/* ── Variables: Dark ────────────────────────────────── */
:root {
  --bg:          #0a0a12;
  --surface:     #13131f;
  --surface2:    #1c1c2e;
  --surface3:    #252538;
  --surface4:    #2e2e45;
  --border:      rgba(255,255,255,0.07);
  --border2:     rgba(255,255,255,0.12);
  --accent:      #3b82f6;
  --accent-dark: #2563eb;
  --accent-glow: rgba(59,130,246,0.12);
  --text:        #e2e8f0;
  --text-muted:  #94a3b8;
  --text-dim:    #475569;
  --danger:      #ef4444;
  --danger-dark: #dc2626;
  --success:     #22c55e;
  --warn:        #f59e0b;
  --folder-clr:  #f59e0b;
  --radius:      10px;
  --radius-lg:   16px;
  --radius-sm:   6px;
  --shadow:      0 4px 20px rgba(0,0,0,0.4);
  --shadow-lg:   0 8px 40px rgba(0,0,0,0.6);
  --t:           0.15s ease;
  --header-h:    52px;
  --sidebar-w:   210px;
}
/* ── Variables: Light ───────────────────────────────── */
[data-theme="light"] {
  --bg:          #f0f4f8;
  --surface:     #ffffff;
  --surface2:    #f8fafc;
  --surface3:    #f0f4f8;
  --surface4:    #e2e8f0;
  --border:      rgba(0,0,0,0.07);
  --border2:     rgba(0,0,0,0.13);
  --accent:      #2563eb;
  --accent-dark: #1d4ed8;
  --accent-glow: rgba(37,99,235,0.08);
  --text:        #1e293b;
  --text-muted:  #64748b;
  --text-dim:    #94a3b8;
  --danger:      #dc2626;
  --danger-dark: #b91c1c;
  --success:     #16a34a;
  --warn:        #d97706;
  --folder-clr:  #d97706;
  --shadow:      0 2px 12px rgba(0,0,0,0.07);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.10);
}
/* ── Reset ──────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px}
body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;line-height:1.5;min-height:100vh;transition:background var(--t),color var(--t)}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
input,select,textarea,button{font-family:inherit;font-size:inherit}
svg{fill:none;flex-shrink:0}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--surface4);border-radius:3px}

/* ── Logo ───────────────────────────────────────────── */
.logo-text{font-size:22px;font-weight:800;letter-spacing:-0.5px;background:linear-gradient(135deg,#3b82f6,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
[data-theme="light"] .logo-text{background:linear-gradient(135deg,#2563eb,#3b82f6);-webkit-background-clip:text;background-clip:text}

/* ── Buttons ────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;font-weight:600;font-size:13px;transition:all var(--t);white-space:nowrap;line-height:1}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.btn-secondary{background:var(--surface3);color:var(--text);border-color:var(--border)}
.btn-secondary:hover{background:var(--surface4);border-color:var(--border2)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:var(--danger-dark)}
.btn-accent{background:var(--accent-glow);color:var(--accent);border-color:rgba(59,130,246,0.3)}
.btn-accent:hover{background:var(--accent);color:#fff}
.btn-full{width:100%}
.btn-sm{padding:5px 11px;font-size:12px;border-radius:var(--radius-sm)}
.btn-icon{background:var(--surface3);color:var(--text);border:1px solid var(--border);cursor:pointer;width:32px;height:32px;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:all var(--t);padding:0}
.btn-icon:hover{background:var(--surface4);border-color:var(--border2)}
.btn-icon-secondary{background:var(--surface3)}

/* ── Forms ──────────────────────────────────────────── */
.form-group{margin-bottom:16px}
.form-group label{display:block;margin-bottom:6px;font-size:13px;color:var(--text-muted);font-weight:500}
input[type=text],input[type=password]{width:100%;padding:10px 14px;background:var(--surface3);border:1.5px solid var(--border);border-radius:var(--radius);color:var(--text);outline:none;transition:border-color var(--t),background var(--t)}
input[type=text]:focus,input[type=password]:focus{border-color:var(--accent);background:var(--surface2)}
input::placeholder{color:var(--text-dim)}

/* ── Alerts ─────────────────────────────────────────── */
.alert{padding:12px 16px;border-radius:var(--radius);font-size:14px;margin-bottom:16px}
.alert-error{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);color:#fca5a5}
[data-theme="light"] .alert-error{color:#b91c1c}

/* ── Auth ───────────────────────────────────────────── */
.auth-body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px;flex-direction:column;gap:16px}
.auth-container{width:100%;max-width:390px}
.auth-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:36px 32px;box-shadow:var(--shadow-lg)}
.auth-logo{text-align:center;margin-bottom:6px}
.auth-card h2{text-align:center;font-size:17px;color:var(--text-muted);font-weight:400;margin-bottom:24px}

/* ── App Layout ─────────────────────────────────────── */
.app-body{display:flex;flex-direction:column;height:100vh;overflow:hidden}
.app-header{height:var(--header-h);background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 12px;gap:10px;flex-shrink:0;z-index:100}
.header-left{display:flex;align-items:center;gap:8px;flex-shrink:0}
.header-center{flex:1;max-width:500px;position:relative}
.header-right{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}
.app-layout{display:flex;flex:1;overflow:hidden}

/* ── Search ─────────────────────────────────────────── */
.search-bar{display:flex;align-items:center;background:var(--surface3);border:1px solid var(--border);border-radius:20px;padding:0 10px;gap:6px;transition:border-color var(--t)}
.search-bar:focus-within{border-color:var(--accent)}
.search-icon{color:var(--text-dim);flex-shrink:0}
.search-bar input{border:none;background:transparent;padding:7px 0;color:var(--text);width:100%;outline:none;font-size:13px}
.content-search-toggle{font-size:11px;color:var(--text-dim);white-space:nowrap;cursor:pointer;display:flex;align-items:center;gap:3px;padding-right:4px}
.content-search-toggle input{width:auto;padding:0}
.search-results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:200;max-height:320px;overflow-y:auto;display:none}
.search-results.open{display:block}
.search-item{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:background var(--t);font-size:13px}
.search-item:hover{background:var(--surface3)}
.search-item-info{flex:1;overflow:hidden}
.search-item-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-item-path{font-size:11px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-match-content{font-size:10px;color:var(--accent);background:var(--accent-glow);border-radius:3px;padding:1px 5px;flex-shrink:0}

/* ── User menu ───────────────────────────────────────── */
.user-menu{display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:var(--radius);cursor:pointer;position:relative;color:var(--text-muted);font-size:13px;transition:background var(--t)}
.user-menu:hover{background:var(--surface3)}
.avatar{width:26px;height:26px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
.username-label{display:none}
@media(min-width:600px){.username-label{display:block}}
.dropdown{position:absolute;top:calc(100% + 6px);right:0;min-width:170px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:200;display:none;overflow:hidden}
.dropdown.open{display:block}
.dropdown-item{display:flex;align-items:center;gap:10px;padding:10px 14px;color:var(--text);cursor:pointer;font-size:13px;transition:background var(--t);width:100%;background:none;border:none;text-align:left}
.dropdown-item:hover{background:var(--surface3)}
.dropdown-item.danger{color:var(--danger)}
.dropdown-item.danger:hover{background:rgba(239,68,68,.1)}

/* ── Theme toggle ────────────────────────────────────── */
.theme-toggle .icon-moon{display:none}
.theme-toggle .icon-sun{display:block}
[data-theme="light"] .theme-toggle .icon-moon{display:block}
[data-theme="light"] .theme-toggle .icon-sun{display:none}

/* ── Sidebar ────────────────────────────────────────── */
.sidebar{width:var(--sidebar-w);background:var(--surface);border-right:1px solid var(--border);flex-shrink:0;display:flex;flex-direction:column;overflow-y:auto;transition:transform var(--t)}
.sidebar-nav{padding:10px 8px}
.sidebar-divider{height:1px;background:var(--border);margin:4px 8px}
.sidebar-actions{padding:10px 8px}
.sidebar-item{display:flex;align-items:center;gap:9px;padding:8px 10px;width:100%;background:none;border:none;border-radius:var(--radius-sm);color:var(--text-muted);font-size:13px;cursor:pointer;transition:all var(--t);text-align:left;position:relative}
.sidebar-item:hover{background:var(--surface3);color:var(--text)}
.sidebar-item.active{background:var(--accent-glow);color:var(--accent)}
.sidebar-item svg{color:inherit;flex-shrink:0}
.trash-badge{background:var(--text-dim);color:#fff;font-size:10px;font-weight:700;padding:1px 5px;border-radius:8px;margin-left:auto}
.sidebar-footer{padding:12px;border-top:1px solid var(--border);margin-top:auto}

/* ── Quota ───────────────────────────────────────────── */
.quota-info{font-size:12px}
.quota-row{display:flex;justify-content:space-between;margin-bottom:5px}
.quota-label{color:var(--text-muted);font-weight:500}
.quota-used{color:var(--text-muted)}
.quota-bar{height:4px;background:var(--surface3);border-radius:2px;overflow:hidden;margin-bottom:4px}
.quota-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .5s}
.quota-fill.warn{background:var(--warn)}
.quota-fill.danger{background:var(--danger)}
.quota-detail{color:var(--text-dim);font-size:11px}

/* ── Stats Panel ─────────────────────────────────────── */
.stats-panel{display:flex;align-items:center;gap:16px;padding:10px 20px;background:var(--surface);border-bottom:1px solid var(--border);font-size:13px;flex-wrap:wrap}
.stat-item{display:flex;align-items:center;gap:6px;color:var(--text-muted)}
.stat-item svg{color:var(--text-dim)}
.stat-item span{color:var(--text);font-weight:600}
.stat-sep{width:1px;height:16px;background:var(--border);flex-shrink:0}
.stat-storage{color:var(--text-muted)}
.stat-storage span{color:var(--text);font-weight:600}
.stat-percent{color:var(--text-dim);font-size:12px}

/* ── Recent Panel ────────────────────────────────────── */
.recent-panel{padding:10px 20px 4px;border-bottom:1px solid var(--border)}
.recent-title{font-size:11px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.recent-list{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px}
.recent-list::-webkit-scrollbar{height:3px}
.recent-item{display:flex;align-items:center;gap:6px;padding:5px 10px;background:var(--surface3);border:1px solid var(--border);border-radius:20px;white-space:nowrap;cursor:pointer;font-size:12px;color:var(--text-muted);transition:all var(--t);flex-shrink:0}
.recent-item:hover{background:var(--surface4);color:var(--text)}
.recent-item svg{flex-shrink:0}

/* ── Toolbar ─────────────────────────────────────────── */
.toolbar{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;gap:10px;flex-shrink:0;border-bottom:1px solid var(--border)}
.toolbar-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.breadcrumb{display:flex;align-items:center;gap:3px;flex-wrap:wrap;min-width:0;flex:1}
.bread-item{display:inline-flex;align-items:center;gap:5px;background:none;border:none;color:var(--text-muted);font-size:13px;cursor:pointer;padding:3px 5px;border-radius:var(--radius-sm);transition:all var(--t);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bread-item:hover{background:var(--surface3);color:var(--text)}
.bread-item.active{color:var(--text);font-weight:500}
.bread-sep{color:var(--text-dim);font-size:12px}

/* ── Sort ────────────────────────────────────────────── */
.sort-wrap{display:flex;align-items:center;gap:2px}
.sort-select{background:var(--surface3);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);padding:4px 8px;font-size:12px;cursor:pointer;outline:none;transition:border-color var(--t)}
.sort-select:focus{border-color:var(--accent)}
.sort-dir-btn{width:28px;height:28px}
.sort-asc{display:block}
.sort-desc{display:none}
.sort-dir-desc .sort-asc{display:none}
.sort-dir-desc .sort-desc{display:block}

/* ── View toggle ─────────────────────────────────────── */
.icon-list{display:none}
.icon-grid{display:block}
.view-list .icon-list{display:block}
.view-list .icon-grid{display:none}

/* ── List header ─────────────────────────────────────── */
.list-header{display:none;align-items:center;padding:4px 20px;border-bottom:1px solid var(--border);font-size:12px;color:var(--text-dim);gap:10px;flex-shrink:0}
.view-list + .list-header,.file-grid.view-list ~ .list-header{display:flex}
.lh-check{width:36px;flex-shrink:0}
.lh-name{flex:1;cursor:pointer;display:flex;align-items:center;gap:4px}
.lh-name:hover,.lh-size:hover,.lh-date:hover{color:var(--text)}
.lh-size{width:80px;flex-shrink:0;cursor:pointer}
.lh-date{width:120px;flex-shrink:0;cursor:pointer;text-align:right}

/* ── File Grid ───────────────────────────────────────── */
.main-content{flex:1;overflow-y:auto;display:flex;flex-direction:column;position:relative}
.file-grid{padding:14px 18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;align-content:start;min-height:100px}
.file-grid.view-list{display:flex;flex-direction:column;gap:2px;padding:8px 12px}

/* Grid item */
.file-item{border-radius:var(--radius);border:1px solid transparent;background:var(--surface);cursor:pointer;transition:all var(--t);position:relative;user-select:none}
.file-item:hover{background:var(--surface2);border-color:var(--border)}
.file-item.selected{border-color:var(--accent)!important;background:var(--accent-glow)}

/* Grid card */
.view-grid .file-item{display:flex;flex-direction:column;align-items:center;padding:14px 8px 10px;gap:7px;text-align:center}
.view-grid .file-icon{width:44px;height:44px}
.view-grid .file-name{font-size:12px;color:var(--text);word-break:break-word;max-height:32px;overflow:hidden;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;width:100%}
.view-grid .file-meta{font-size:11px;color:var(--text-dim)}
.view-grid .file-check{position:absolute;top:5px;left:5px;opacity:0;transition:opacity var(--t)}
.view-grid .file-item:hover .file-check,.file-item.selected .file-check{opacity:1}

/* List item */
.view-list .file-item{display:flex;align-items:center;gap:10px;padding:7px 14px;border-radius:var(--radius-sm);border-color:transparent}
.view-list .file-item:hover{border-color:var(--border)}
.view-list .file-icon{width:24px;height:24px;flex-shrink:0}
.view-list .file-name{flex:1;font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.view-list .file-size{width:80px;font-size:12px;color:var(--text-dim);flex-shrink:0;text-align:right}
.view-list .file-date{width:120px;font-size:12px;color:var(--text-dim);flex-shrink:0;text-align:right}
.view-list .file-check{flex-shrink:0;width:28px}

/* Checkbox styling */
.file-check{display:flex;align-items:center;justify-content:center}
.file-check input[type=checkbox]{width:15px;height:15px;accent-color:var(--accent);cursor:pointer}

/* ── File Icons ──────────────────────────────────────── */
.file-icon{display:flex;align-items:center;justify-content:center}
.icon-folder svg{color:var(--folder-clr)}
.icon-image svg{color:#ec4899}
.icon-video svg{color:#8b5cf6}
.icon-audio svg{color:#06b6d4}
.icon-text svg{color:#22c55e}
.icon-pdf svg{color:#ef4444}
.icon-archive svg{color:var(--warn)}
.icon-word svg{color:#2563eb}
.icon-excel svg{color:#16a34a}
.icon-ppt svg{color:#ea580c}
.icon-file svg{color:var(--text-dim)}

/* ── Trash Toolbar ───────────────────────────────────── */
.trash-toolbar{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;border-bottom:1px solid var(--border);flex-shrink:0}
.trash-info{font-size:14px;color:var(--text-muted)}

/* ── Trash items ─────────────────────────────────────── */
.trash-item{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:var(--radius-sm);border:1px solid transparent;transition:all var(--t);font-size:13px}
.trash-item:hover{background:var(--surface2);border-color:var(--border)}
.trash-item-info{flex:1;min-width:0}
.trash-item-name{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trash-item-meta{font-size:11px;color:var(--text-dim)}
.trash-item-actions{display:flex;gap:6px;flex-shrink:0}
.btn-restore{background:var(--accent-glow);color:var(--accent);border:1px solid rgba(59,130,246,.3);border-radius:var(--radius-sm);padding:4px 10px;font-size:12px;cursor:pointer;transition:all var(--t);font-weight:500}
.btn-restore:hover{background:var(--accent);color:#fff}
.btn-purge{background:rgba(239,68,68,.1);color:var(--danger);border:1px solid rgba(239,68,68,.2);border-radius:var(--radius-sm);padding:4px 8px;font-size:12px;cursor:pointer;transition:all var(--t)}
.btn-purge:hover{background:var(--danger);color:#fff}

/* ── Loading / Empty ─────────────────────────────────── */
.loading-state{display:flex;align-items:center;justify-content:center;padding:60px;grid-column:1/-1}
.empty-state{display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:60px 20px;color:var(--text-dim);text-align:center}
.empty-state h3{color:var(--text-muted);font-size:16px}
.empty-state p{font-size:13px}
.empty-state svg{color:var(--text-dim);opacity:.35}
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--surface3);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Drop overlay ────────────────────────────────────── */
.drop-overlay{position:fixed;inset:var(--header-h) 0 0 var(--sidebar-w);z-index:50;background:rgba(59,130,246,.07);border:2px dashed var(--accent);display:none;align-items:center;justify-content:center;pointer-events:none}
.drop-overlay.active{display:flex}
.drop-msg{text-align:center;color:var(--accent)}
.drop-msg svg{margin-bottom:10px}
.drop-msg p{font-size:18px;font-weight:600}

/* ── Multi-select bar ────────────────────────────────── */
.select-bar{position:fixed;bottom:0;left:var(--sidebar-w);right:0;background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -4px 20px rgba(0,0,0,.3);z-index:200;display:flex;align-items:center;padding:10px 20px;gap:12px}
.select-bar-left{display:flex;align-items:center;gap:10px}
.select-bar-close{background:none;border:none;cursor:pointer;color:var(--text-muted);display:flex;align-items:center;transition:color var(--t);padding:4px}
.select-bar-close:hover{color:var(--text)}
.select-bar-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
.sb-label{display:none}
@media(min-width:600px){.sb-label{display:inline}}
#selectCount{font-size:13px;font-weight:600;color:var(--text-muted)}

/* ── Context Menu ────────────────────────────────────── */
.context-menu{position:fixed;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:300;padding:4px;min-width:170px;display:none}
.context-menu.open{display:block}
.ctx-item{display:flex;align-items:center;gap:9px;padding:8px 12px;background:none;border:none;color:var(--text);font-size:13px;cursor:pointer;border-radius:var(--radius-sm);width:100%;text-align:left;transition:background var(--t)}
.ctx-item:hover{background:var(--surface3)}
.ctx-item.danger{color:var(--danger)}
.ctx-item.danger:hover{background:rgba(239,68,68,.1)}
.ctx-divider{height:1px;background:var(--border);margin:4px 0}

/* ── Modals ──────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:400;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:440px}
.modal-card-sm{max-width:380px}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.modal-header h3{font-size:15px;font-weight:600}
.modal-body{padding:20px}
.modal-input{width:100%;padding:10px 14px;background:var(--surface3);border:1.5px solid var(--border);border-radius:var(--radius);color:var(--text);outline:none;font-size:14px;transition:border-color var(--t)}
.modal-input:focus{border-color:var(--accent)}
.modal-footer{display:flex;gap:10px;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--border)}

/* Delete modal */
.delete-icon{display:flex;justify-content:center;margin-bottom:14px;color:var(--danger)}
.delete-msg{font-size:14px;color:var(--text);text-align:center;font-weight:500;margin-bottom:8px}
.delete-note{font-size:12px;color:var(--text-dim);text-align:center;line-height:1.5}

/* ── Folder Picker ───────────────────────────────────── */
.picker-body{padding:0;overflow:hidden;display:flex;flex-direction:column}
.picker-breadcrumb{padding:10px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:12px;background:var(--surface2);min-height:40px}
.picker-crumb{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:2px 4px;border-radius:4px;font-size:12px;transition:all var(--t)}
.picker-crumb:hover{background:var(--surface3);color:var(--text)}
.picker-crumb.active{color:var(--text);font-weight:500}
.picker-list{padding:8px;max-height:250px;overflow-y:auto}
.picker-folder{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--radius-sm);cursor:pointer;font-size:13px;color:var(--text-muted);transition:all var(--t)}
.picker-folder:hover{background:var(--surface3);color:var(--text)}
.picker-folder svg{color:var(--folder-clr);flex-shrink:0}
.picker-empty{padding:20px;text-align:center;color:var(--text-dim);font-size:13px}
.picker-loading{display:flex;justify-content:center;padding:20px}

/* ── Editor ──────────────────────────────────────────── */
.editor-overlay{align-items:stretch;padding:0}
.editor-card{background:var(--surface);display:flex;flex-direction:column;width:100%;height:100%;max-width:960px;margin:0 auto;border-left:1px solid var(--border);border-right:1px solid var(--border)}
@media(max-width:960px){.editor-card{border:none}}
.editor-header{display:flex;align-items:center;justify-content:space-between;padding:11px 20px;border-bottom:1px solid var(--border);flex-shrink:0}
.editor-filename{font-weight:600;font-size:14px}
.editor-actions{display:flex;align-items:center;gap:8px}
.save-status{font-size:12px;color:var(--success)}
.editor-area{flex:1;padding:20px;resize:none;outline:none;background:var(--surface);color:var(--text);border:none;font-family:'JetBrains Mono','Fira Code','Courier New',monospace;font-size:14px;line-height:1.7;tab-size:2}

/* ── Preview Modal ───────────────────────────────────── */
.preview-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:900px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden}
.preview-name{font-weight:500;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:300px}
.preview-body{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;padding:16px;min-height:200px;background:var(--bg)}
.preview-body img{max-width:100%;max-height:70vh;border-radius:var(--radius-sm);object-fit:contain}
.preview-body video{width:100%;max-height:65vh}
.preview-body audio{width:100%;max-width:500px}
.preview-body iframe{width:100%;height:70vh;border:none;background:#fff}

/* ── Upload Tray ─────────────────────────────────────── */
.upload-tray{position:fixed;bottom:20px;right:20px;z-index:500;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:290px;overflow:hidden}
.upload-tray-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;font-weight:600;font-size:13px;border-bottom:1px solid var(--border)}
.upload-tray-header button{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:18px;line-height:1}
.upload-file-row{padding:8px 14px;font-size:12px}
.upload-file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:4px;color:var(--text-muted)}
.upload-file-status{font-size:11px;margin-bottom:3px}
.upload-file-status.ok{color:var(--success)}
.upload-file-status.err{color:var(--danger)}
.upload-file-status.wait{color:var(--text-dim)}
.upload-bar-wrap{height:3px;background:var(--surface3);border-radius:2px}
.upload-bar{height:100%;background:var(--accent);border-radius:2px;transition:width .3s;width:0}

/* ── Footer ──────────────────────────────────────────── */
.site-footer{text-align:center;padding:8px;font-size:12px;color:var(--text-dim);border-top:1px solid var(--border);background:var(--surface);flex-shrink:0}
.site-footer a{color:var(--text-dim)}
.site-footer a:hover{color:var(--accent);text-decoration:none}

/* ── Toast ───────────────────────────────────────────── */
.toast-wrap{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:600;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{background:var(--surface3);color:var(--text);padding:9px 18px;border-radius:20px;font-size:13px;box-shadow:var(--shadow);animation:toastIn .2s ease;white-space:nowrap;border:1px solid var(--border)}
.toast.success{background:rgba(34,197,94,.18);border-color:rgba(34,197,94,.4);color:var(--success)}
.toast.error{background:rgba(239,68,68,.18);border-color:rgba(239,68,68,.4);color:var(--danger)}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── Mobile ──────────────────────────────────────────── */
.sidebar-toggle{display:none}
.sidebar-overlay{display:none;position:fixed;inset:var(--header-h) 0 0 0;background:rgba(0,0,0,.5);z-index:85}
.sidebar-overlay.open{display:block}
@media(max-width:768px){
  :root{--sidebar-w:0px}
  .sidebar-toggle{display:flex}
  .sidebar{position:fixed;top:var(--header-h);left:0;bottom:0;z-index:90;transform:translateX(-100%);width:220px}
  .sidebar.open{transform:translateX(0)}
  .select-bar{left:0}
  .drop-overlay{left:0}
  .toolbar{padding:8px 14px}
  .file-grid{padding:10px}
  .sort-select{font-size:11px;padding:3px 6px}
}
@media(min-width:769px){
  .sidebar-toggle{display:none}
}