:root{--bg-color: #f8f9fa;--text-primary: #2d3436;--text-secondary: #b2bec3;--accent: #6C63FF;--sidebar-width: 320px;--header-height: 64px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body,html,#root{margin:0;padding:0;height:100%;width:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background-color:var(--bg-color);color:var(--text-primary)}.app-container{display:flex;flex-direction:column;height:100vh}.app-header{height:var(--header-height);padding:0 24px;display:flex;align-items:center;justify-content:space-between;background:#ffffffd9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,.06);flex-shrink:0;z-index:100;box-shadow:0 4px 20px #00000005}.header-actions{display:flex;align-items:center;gap:12px}.main-content{flex:1;display:grid;grid-template-columns:var(--sidebar-width) 1fr;gap:24px;padding:24px;overflow:hidden;position:relative;max-width:1600px;margin:0 auto;width:100%}.sidebar{background:#ffffffe6;border-radius:16px;border:1px solid rgba(255,255,255,.8);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 4px 20px #00000008}.preview-card{background:#fffffff2;border-radius:16px;border:1px solid rgba(255,255,255,1);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 10px 40px #00000014;position:relative}.file-item{padding:14px 16px;margin-bottom:6px;border-radius:10px;cursor:pointer;display:flex;align-items:center;gap:14px;transition:all .2s;border:1px solid transparent}.file-item:hover{background:#00000005}.file-item.active{background:#f1f2f6;border-color:#0000000d}@media(max-width:768px){:root{--header-height: 56px}.app-header{padding:0 12px}.app-header h1{font-size:1rem;max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-actions{gap:8px}.btn-text{display:none}.main-content{display:block;padding:12px;width:100%}.sidebar{width:100%;height:100%;border-radius:12px;box-shadow:none;background:transparent;border:none}.file-item{background:#fff;padding:16px;margin-bottom:10px;box-shadow:0 2px 8px #00000008}.preview-card{position:fixed;inset:0;width:100%;height:100%;z-index:200;border-radius:0;transform:translate(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1);background:#f8f9fa}.preview-card.show{transform:translate(0)}}.settings-modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:500;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.settings-modal{background:#fff;width:90%;max-width:500px;height:60vh;border-radius:16px;box-shadow:0 10px 40px #0003;display:flex;flex-direction:column;overflow:hidden;animation:popIn .2s cubic-bezier(.175,.885,.32,1.275)}.settings-header{padding:15px 20px;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center}.settings-header h3{margin:0}.settings-tabs{display:flex;border-bottom:1px solid #eee;background:#f9f9f9}.settings-tabs button{flex:1;border:none;background:none;padding:12px;cursor:pointer;font-weight:600;color:#999;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s}.settings-tabs button.active{color:#6c63ff;background:#fff;border-bottom:2px solid #6C63FF}.settings-content{flex:1;overflow-y:auto;background:#fff}.list-view{padding:0}.list-item{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-bottom:1px solid #f0f0f0}.list-item:last-child{border-bottom:none}@keyframes popIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}