/* ═══════════════════════════════════════════════════════════
   TeleDrive — macOS-native design system
   Tokens identical to the approved mockup. Do not restyle.
   ═══════════════════════════════════════════════════════════ */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root, [data-theme="dark"] {
  --window:#1c1c1e; --titlebar:rgba(38,38,41,0.72); --sidebar:rgba(28,28,30,0.62);
  --content:#1e1e20; --content-alt:#242427; --inspector:rgba(26,26,28,0.66);
  --statusbar:rgba(24,24,26,0.72); --elevated:#2c2c2e;
  --hover:rgba(255,255,255,0.065); --pressed:rgba(255,255,255,0.10);
  --selected:rgba(94,92,230,0.30); --selected-strong:rgba(94,92,230,0.34);
  --hairline:rgba(255,255,255,0.10); --hairline-soft:rgba(255,255,255,0.06);
  --text:#f5f5f7; --text-2:#c8c8d0; --text-3:#a5a5af; --text-4:#7d7d87;
  --accent:#5654d1; --accent-bright:#7d7bff; --accent-ink:#fff; --accent-deep:#4644c4;
  --danger:#ff6961; --danger-ink:#fff;
  --shadow-window:0 26px 80px rgba(0,0,0,0.55), 0 0 0 0.5px rgba(255,255,255,0.07);
  --shadow-pop:0 14px 38px rgba(0,0,0,0.52), 0 0 0 0.5px rgba(255,255,255,0.09);
  color-scheme: dark;
}

[data-theme="light"] {
  --window:#dcdcdd; --titlebar:rgba(246,246,247,0.78); --sidebar:rgba(238,238,240,0.68);
  --content:#fff; --content-alt:#f5f5f7; --inspector:rgba(246,246,248,0.72);
  --statusbar:rgba(243,243,245,0.78); --elevated:#fff;
  --hover:rgba(0,0,0,0.05); --pressed:rgba(0,0,0,0.085);
  --selected:rgba(74,72,207,0.13); --selected-strong:rgba(74,72,207,0.17);
  --hairline:rgba(0,0,0,0.11); --hairline-soft:rgba(0,0,0,0.065);
  --text:#1c1c1e; --text-2:#3f3f46; --text-3:#62626b; --text-4:#8e8e96;
  --accent:#4644c4; --accent-bright:#5654d1; --accent-ink:#fff; --accent-deep:#3d3ab8;
  --danger:#d9483f; --danger-ink:#fff;
  --shadow-window:0 26px 80px rgba(0,0,0,0.24), 0 0 0 0.5px rgba(0,0,0,0.11);
  --shadow-pop:0 14px 38px rgba(0,0,0,0.20), 0 0 0 0.5px rgba(0,0,0,0.11);
  color-scheme: light;
}

:root {
  --tag-red:#ff6961; --tag-orange:#ff9f0a; --tag-yellow:#ffd60a;
  --tag-green:#30d158; --tag-blue:#0a84ff; --tag-purple:#bf5af2;
  --tag-pink:#ff375f; --tag-teal:#40c8e0; --tag-gray:#98989d;
  --r-sm:6px; --r-md:10px; --r-lg:14px;
  --t-fast:120ms ease; --t-med:200ms ease;
  --ease:cubic-bezier(.22,1,.36,1);
}

html, body { height:100%; }

body {
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  font-size:13px; line-height:1.4; letter-spacing:-0.005em;
  background:#0f0f10; color:var(--text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow:hidden; padding:22px;
  display:flex; align-items:center; justify-content:center;
  transition:background .35s ease;
}
[data-theme="light"] body { background:#cdc9c4; }

button { font-family:inherit; }
input, select { font-family:inherit; }

/* ═══ WINDOW ═══ */
.window {
  width:100%; max-width:1440px; height:100%; max-height:900px;
  background:var(--window); border-radius:12px; box-shadow:var(--shadow-window);
  display:flex; flex-direction:column; overflow:hidden; position:relative;
  transition:background .35s ease, box-shadow .35s ease;
}

/* ═══ TITLEBAR ═══ */
.titlebar {
  height:52px; flex-shrink:0; display:flex; align-items:center; gap:14px;
  padding:0 14px 0 0; background:var(--titlebar);
  backdrop-filter:saturate(180%) blur(24px); -webkit-backdrop-filter:saturate(180%) blur(24px);
  border-bottom:1px solid var(--hairline); position:relative; z-index:30;
  transition:background .35s ease, border-color .35s ease;
}
.traffic { display:flex; gap:8px; padding-left:20px; flex-shrink:0; }
.light { width:12px; height:12px; border-radius:50%; border:0.5px solid rgba(0,0,0,0.14); }
.light.red{background:#ff5f57} .light.yellow{background:#febc2e} .light.green{background:#28c840}
.tb-divider { width:1px; height:22px; background:var(--hairline); flex-shrink:0; }
.tb-btn {
  width:28px; height:24px; border:none; background:transparent; border-radius:6px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  color:var(--text-2); transition:background .12s ease, color .12s ease;
}
.tb-btn:hover { background:var(--hover); color:var(--text); }
.tb-btn:active { background:var(--pressed); }
.tb-btn.on { color:var(--accent-bright); }
.tb-btn svg { width:15px; height:15px; }
.tb-btn:disabled { color:var(--text-4); cursor:default; }
.tb-btn:disabled:hover { background:transparent; }
.tb-nav { display:flex; gap:2px; }
.tb-title { font-size:13px; font-weight:600; color:var(--text); letter-spacing:-0.01em; white-space:nowrap; }
.tb-sub { font-size:11px; color:var(--text-3); font-weight:400; }
.tb-spacer { flex:1; }

.tb-search { position:relative; width:180px; flex-shrink:0; transition:width .2s var(--ease); }
.tb-search:focus-within { width:240px; }
.tb-search input {
  width:100%; height:26px; padding:0 10px 0 27px; font-size:12px; color:var(--text);
  background:var(--hover); border:1px solid transparent; border-radius:6px; outline:none;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.tb-search input::placeholder { color:var(--text-3); }
.tb-search input:focus { background:var(--content); border-color:var(--accent); box-shadow:0 0 0 3px var(--selected); }
.tb-search svg { position:absolute; left:8px; top:50%; transform:translateY(-50%); width:13px; height:13px; color:var(--text-3); pointer-events:none; }

.segmented { display:flex; background:var(--hover); border-radius:7px; padding:2px; gap:2px; flex-shrink:0; }
.segmented button {
  width:30px; height:22px; border:none; background:transparent; border-radius:5px;
  cursor:pointer; color:var(--text-3); display:flex; align-items:center; justify-content:center;
  transition:all .14s ease;
}
.segmented button:hover { color:var(--text-2); }
.segmented button.active { background:var(--elevated); color:var(--text); box-shadow:0 1px 2px rgba(0,0,0,0.18), 0 0 0 0.5px rgba(0,0,0,0.06); }
.segmented button svg { width:14px; height:14px; }

/* ═══ BODY ═══ */
.body { flex:1; display:grid; grid-template-columns:216px 1fr 272px; overflow:hidden; min-height:0; }
.body.no-inspector { grid-template-columns:216px 1fr 0; }
.body.home-mode { grid-template-columns:216px 1fr; }
.body.home-mode .inspector { display:none; }

/* ═══ SIDEBAR ═══ */
.sidebar {
  background:var(--sidebar); backdrop-filter:saturate(180%) blur(24px); -webkit-backdrop-filter:saturate(180%) blur(24px);
  border-right:1px solid var(--hairline); overflow-y:auto; padding:10px 10px 16px;
  transition:background .35s ease, border-color .35s ease, margin-left .25s var(--ease), opacity .2s ease;
}
.sidebar.hidden { margin-left:-216px; opacity:0; pointer-events:none; }
.sidebar::-webkit-scrollbar { width:0; }
.sb-group { margin-bottom:20px; }
.sb-head { font-size:11px; font-weight:600; color:var(--text-3); padding:6px 8px 7px; }
.sb-item {
  display:flex; align-items:center; gap:8px; height:27px; padding:0 8px; border-radius:6px;
  color:var(--text-2); font-size:13px; cursor:pointer; user-select:none;
  transition:background .1s ease, color .1s ease;
}
.sb-item:hover { background:var(--hover); }
.sb-item.active { background:var(--accent); color:var(--accent-ink); font-weight:500; box-shadow:0 1px 2px rgba(0,0,0,0.14); }
.sb-item.active svg { color:var(--accent-ink); opacity:1; }
.sb-item.active .sb-count { color:rgba(255,255,255,0.78); }
.sb-item svg { width:15px; height:15px; flex-shrink:0; color:var(--accent-bright); opacity:.9; }
.sb-label { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-count { font-size:11px; color:var(--text-3); font-variant-numeric:tabular-nums; }
.sb-item.active .sb-count { color:var(--text-2); }
.tag-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; box-shadow:inset 0 0 0 0.5px rgba(0,0,0,0.18); }

/* ═══ CONTENT ═══ */
.content { background:var(--content); display:flex; flex-direction:column; overflow:hidden; min-width:0; transition:background .35s ease; }

.col-header {
  display:grid; grid-template-columns:1fr 136px 96px 92px; align-items:center;
  height:34px; padding:0 14px; border-bottom:1px solid var(--hairline);
  background:var(--content); flex-shrink:0; position:sticky; top:0; z-index:5;
}
.col-header span {
  font-size:11px; font-weight:600; color:var(--text-3); cursor:pointer;
  display:flex; align-items:center; gap:4px; user-select:none; transition:color .12s ease;
}
.col-header span:hover { color:var(--text-2); }
.col-header span.sorted { color:var(--text); }
.col-header svg { width:10px; height:10px; margin-left:1px; }

.file-scroll { flex:1; overflow-y:auto; padding:4px 8px 12px; }
.file-scroll::-webkit-scrollbar { width:9px; }
.file-scroll::-webkit-scrollbar-thumb { background:var(--text-4); border-radius:5px; border:2px solid var(--content); background-clip:padding-box; }
.file-scroll::-webkit-scrollbar-thumb:hover { background:var(--text-3); background-clip:padding-box; }

.row {
  display:grid; grid-template-columns:1fr 136px 96px 92px; align-items:center;
  height:34px; padding:0 6px; border-radius:7px; cursor:default; user-select:none;
  transition:background .08s ease, box-shadow .08s ease;
}
.row:hover { background:var(--hover); }
.row.selected { background:var(--accent); box-shadow:inset 0 0 0 0.5px rgba(255,255,255,0.10), 0 1px 2px rgba(0,0,0,0.16); }
.row.selected .r-label { color:#fff; font-weight:500; }
.row.selected .r-cell { color:rgba(255,255,255,0.82); }
.row.selected .tag-dot { box-shadow:inset 0 0 0 0.5px rgba(0,0,0,0.10), 0 0 0 1px rgba(255,255,255,0.35); }
.row.dragover { background:var(--selected); box-shadow:inset 0 0 0 1.5px var(--accent-bright); }

.r-name { display:flex; align-items:center; gap:8px; padding-left:6px; min-width:0; color:var(--text); }
.r-icon { width:20px; height:20px; flex-shrink:0; border-radius:5px; display:flex; align-items:center; justify-content:center; }
.r-icon svg { width:13px; height:13px; color:#fff; }
.r-label { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; }
.r-cell { font-size:12px; color:var(--text-3); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:6px; }
.r-tags { display:flex; gap:4px; align-items:center; }

.ic-folder{background:linear-gradient(180deg,#6ba7e8,#4a8ed6)}
.ic-pdf{background:linear-gradient(180deg,#e0655a,#cf4a3f)}
.ic-doc{background:linear-gradient(180deg,#5a9ee0,#3f7fcc)}
.ic-sheet{background:linear-gradient(180deg,#5aab6a,#3f8f4f)}
.ic-slides{background:linear-gradient(180deg,#e0934a,#cc7a2f)}
.ic-fig{background:linear-gradient(180deg,#a86ad4,#8f4fc0)}
.ic-img{background:linear-gradient(180deg,#d97aa8,#c45a8c)}
.ic-video{background:linear-gradient(180deg,#7a6ad4,#5f4fc0)}
.ic-audio{background:linear-gradient(180deg,#d45a6a,#c03f52)}
.ic-zip{background:linear-gradient(180deg,#9a9a5a,#80803f)}
.ic-code{background:linear-gradient(180deg,#6a8a9a,#4f6f80)}

/* grid */
.grid-view { display:none; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:4px 10px; padding:14px; overflow-y:auto; flex:1; align-content:start; }
.content.grid .file-scroll, .content.grid .col-header { display:none; }
.content.grid .grid-view { display:grid; }
.grid-item {
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 6px 10px;
  border-radius:9px; cursor:default; user-select:none; position:relative;
  transition:background .1s ease, box-shadow .1s ease;
}
.grid-item:hover { background:var(--hover); }
.grid-item.selected { background:var(--accent); box-shadow:inset 0 0 0 0.5px rgba(255,255,255,0.10), 0 1px 2px rgba(0,0,0,0.16); }
.grid-item.selected .grid-name { color:#fff; font-weight:500; }
.grid-thumb { width:60px; height:60px; border-radius:14px; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 7px rgba(0,0,0,0.14); position:relative; }
.grid-thumb svg { width:28px; height:28px; color:#fff; }
.grid-thumb::after { content:''; position:absolute; inset:0; border-radius:14px; background:linear-gradient(180deg,rgba(255,255,255,0.12),rgba(255,255,255,0) 50%); }
.grid-name { font-size:11.5px; line-height:1.25; text-align:center; color:var(--text); max-width:100%; padding:0 4px; min-height:29px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word; }
.grid-item .r-tags { position:absolute; top:10px; right:10px; }

/* ═══ HOME ═══ */
.home-view { display:none; flex:1; overflow-y:auto; padding:24px 28px 28px; min-width:0; }
.content.home .home-view { display:block; }
.content.home .file-scroll, .content.home .col-header, .content.home .grid-view { display:none; }
.home-view::-webkit-scrollbar { width:9px; }
.home-view::-webkit-scrollbar-thumb { background:var(--text-4); border-radius:5px; border:2px solid var(--content); background-clip:padding-box; }

.home-hero { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:22px; }
.home-hero h1 { font-size:26px; font-weight:600; letter-spacing:-0.022em; color:var(--text); margin-bottom:5px; }
.home-hero p { font-size:13px; color:var(--text-3); }
.hero-actions { display:flex; gap:8px; flex-shrink:0; }
.hero-btn {
  height:30px; padding:0 14px; border-radius:7px; font-size:12.5px; font-weight:500;
  border:1px solid var(--hairline); background:var(--hover); color:var(--text); cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; transition:background .12s ease, transform .06s ease;
}
.hero-btn:hover { background:var(--pressed); }
.hero-btn:active { transform:scale(0.98); }
.hero-btn svg { width:13px; height:13px; }
.hero-btn.primary { background:var(--accent); border-color:transparent; color:var(--accent-ink); box-shadow:0 1px 3px rgba(0,0,0,0.20); }
.hero-btn.primary:hover { background:var(--accent-deep); }

.stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:24px; }
.stat-tile { background:var(--content-alt); border:1px solid var(--hairline-soft); border-radius:11px; padding:14px 15px; transition:border-color .14s ease; }
.stat-tile:hover { border-color:var(--hairline); }
.stat-tile-top { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.stat-ico { width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center; background:var(--hover); color:var(--accent-bright); }
.stat-ico svg { width:14px; height:14px; }
.stat-tile-label { font-size:11px; font-weight:600; color:var(--text-3); text-transform:uppercase; letter-spacing:0.05em; }
.stat-val { font-size:22px; font-weight:600; color:var(--text); letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.stat-val small { font-size:12px; font-weight:400; color:var(--text-3); margin-left:3px; }

.home-section { margin-bottom:24px; }
.home-section-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; }
.home-section-head h2 { font-size:14px; font-weight:600; color:var(--text); letter-spacing:-0.01em; }
.home-section-head a { font-size:12px; color:var(--accent-bright); text-decoration:none; cursor:pointer; }
.home-section-head a:hover { text-decoration:underline; }

.qa-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(186px,1fr)); gap:10px; }
.qa-card {
  display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--content-alt);
  border:1px solid var(--hairline-soft); border-radius:10px; cursor:pointer;
  transition:background .14s ease, border-color .14s ease;
}
.qa-card:hover { background:var(--hover); border-color:var(--hairline); }
.qa-ico { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,#6ba7e8,#4a8ed6); flex-shrink:0; }
.qa-ico svg { width:16px; height:16px; color:#fff; }
.qa-meta { min-width:0; flex:1; }
.qa-name { font-size:12.5px; font-weight:500; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qa-count { font-size:11px; color:var(--text-3); margin-top:1px; }
.qa-card.create { border-style:dashed; border-color:var(--hairline); background:transparent; }
.qa-card.create:hover { background:var(--hover); border-color:var(--accent); }
.qa-card.create .qa-ico { background:var(--hover); }
.qa-card.create .qa-ico svg { color:var(--text-3); }
.qa-card.create:hover .qa-ico svg { color:var(--accent-bright); }
.qa-card.create .qa-name { color:var(--text-2); }

.recent-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:12px; }
.recent-card {
  background:var(--content-alt); border:1px solid var(--hairline-soft); border-radius:11px; padding:12px;
  cursor:pointer; transition:background .14s ease, border-color .14s ease, transform .14s ease;
}
.recent-card:hover { background:var(--hover); border-color:var(--hairline); transform:translateY(-1px); }
.recent-thumb { height:74px; border-radius:8px; display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.recent-thumb svg { width:26px; height:26px; color:#fff; }
.recent-name { font-size:12.5px; font-weight:500; color:var(--text); line-height:1.28; min-height:32px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word; }
.recent-meta { font-size:11px; color:var(--text-3); margin-top:2px; font-variant-numeric:tabular-nums; }

.storage-panel { background:var(--content-alt); border:1px solid var(--hairline-soft); border-radius:11px; padding:16px 17px; }
.storage-total { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:11px; }
.storage-total strong { font-size:15px; font-weight:600; color:var(--text); }
.storage-total span { font-size:12px; color:var(--text-3); }
.storage-track-seg { display:flex; height:9px; border-radius:5px; overflow:hidden; background:var(--hover); gap:2px; margin-bottom:14px; }
.storage-track-seg i { display:block; height:100%; }
.storage-legend { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px 16px; }
.legend-item { display:flex; align-items:center; gap:7px; font-size:12px; }
.legend-item .dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.legend-item .lname { color:var(--text-2); }
.legend-item .lval { margin-left:auto; color:var(--text-3); font-variant-numeric:tabular-nums; }

/* ═══ INSPECTOR ═══ */
.inspector {
  background:var(--inspector); backdrop-filter:saturate(180%) blur(24px); -webkit-backdrop-filter:saturate(180%) blur(24px);
  border-left:1px solid var(--hairline); overflow-y:auto; padding:20px 18px;
  transition:background .35s ease, border-color .35s ease, margin-right .25s var(--ease), opacity .2s ease;
}
.inspector.hidden { margin-right:-272px; opacity:0; pointer-events:none; }
.inspector::-webkit-scrollbar { width:0; }
.insp-grab { display:none; }
.insp-empty { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--text-3); text-align:center; padding:20px; }
.insp-empty svg { width:40px; height:40px; opacity:.35; }
.insp-empty p { font-size:12px; line-height:1.5; }
.insp-preview { display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.insp-thumb { width:80px; height:80px; border-radius:16px; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,0.20); position:relative; overflow:hidden; }
.insp-thumb svg { width:36px; height:36px; color:#fff; }
.insp-thumb img { width:100%; height:100%; object-fit:cover; }
.insp-thumb::after { content:''; position:absolute; inset:0; border-radius:16px; background:linear-gradient(180deg,rgba(255,255,255,0.18),rgba(255,255,255,0) 52%); pointer-events:none; }
.insp-name { font-size:14px; font-weight:600; text-align:center; color:var(--text); margin-bottom:3px; word-break:break-word; line-height:1.3; }
.insp-kind { font-size:12px; text-align:center; color:var(--text-3); margin-bottom:18px; }
.insp-actions { display:flex; gap:6px; justify-content:center; margin-bottom:22px; }
.insp-btn {
  flex:1; height:26px; border:1px solid var(--hairline);
  background:linear-gradient(180deg,var(--elevated),var(--content-alt)); border-radius:6px;
  font-size:12px; font-weight:500; color:var(--text); cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:5px;
  box-shadow:0 1px 1.5px rgba(0,0,0,0.10); transition:background .12s ease, transform .06s ease;
}
.insp-btn:hover { background:var(--hover); }
.insp-btn:active { transform:scale(0.975); background:var(--pressed); }
.insp-btn svg { width:12px; height:12px; }
.insp-section { border-top:1px solid var(--hairline-soft); padding-top:14px; margin-top:14px; }
.insp-section-title { font-size:11px; font-weight:600; color:var(--text-3); margin-bottom:10px; }
.insp-meta { display:flex; flex-direction:column; gap:8px; }
.insp-meta-row { display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:12px; }
.insp-meta-key { color:var(--text-3); flex-shrink:0; }
.insp-meta-val { color:var(--text-2); text-align:right; font-variant-numeric:tabular-nums; word-break:break-word; }
.insp-tags { display:flex; flex-wrap:wrap; gap:6px; }
.chip { display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px 0 7px; border-radius:11px; font-size:11px; font-weight:500; background:var(--hover); color:var(--text-2); border:1px solid var(--hairline-soft); }

/* ═══ STATUS BAR ═══ */
.statusbar {
  height:28px; flex-shrink:0; display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--statusbar); backdrop-filter:saturate(180%) blur(24px); -webkit-backdrop-filter:saturate(180%) blur(24px);
  border-top:1px solid var(--hairline); font-size:11.5px; color:var(--text-2); padding:0 16px;
  position:relative; transition:background .35s ease, border-color .35s ease;
}
.sb-sep { color:var(--text-4); }
.sb-storage { position:absolute; right:16px; display:flex; align-items:center; gap:7px; font-variant-numeric:tabular-nums; }
.sb-storage-short { display:none; }
.sb-bar { width:58px; height:5px; background:var(--hover); border-radius:3px; overflow:hidden; box-shadow:inset 0 0 0 0.5px var(--hairline); }
.sb-bar-fill { height:100%; width:0; background:var(--accent); border-radius:3px; transition:width .5s var(--ease); }

/* ═══ CONTEXT MENU ═══ */
.ctx-menu {
  position:fixed; min-width:208px; background:var(--elevated); border:1px solid var(--hairline);
  border-radius:9px; box-shadow:var(--shadow-pop); padding:5px; z-index:999; display:none;
  backdrop-filter:saturate(180%) blur(30px); -webkit-backdrop-filter:saturate(180%) blur(30px);
}
.ctx-menu.show { display:block; animation:ctxIn .13s var(--ease); }
@keyframes ctxIn { from{opacity:0;transform:scale(.96) translateY(-4px)} to{opacity:1;transform:scale(1) translateY(0)} }
.ctx-item { display:flex; align-items:center; gap:9px; height:26px; padding:0 9px; border-radius:5px; font-size:13px; color:var(--text); cursor:pointer; transition:background .08s ease; }
.ctx-item:hover { background:var(--accent); color:var(--accent-ink); }
.ctx-item:hover svg { color:var(--accent-ink); }
.ctx-item svg { width:14px; height:14px; color:var(--text-3); }
.ctx-item .ctx-key { margin-left:auto; font-size:12px; color:var(--text-3); font-variant-numeric:tabular-nums; }
.ctx-item:hover .ctx-key { color:rgba(255,255,255,0.75); }
.ctx-item.danger { color:var(--tag-red); }
.ctx-item.danger:hover { background:var(--tag-red); color:#fff; }
.ctx-item.danger svg { color:var(--tag-red); }
.ctx-item.danger:hover svg { color:#fff; }
.ctx-sep { height:1px; background:var(--hairline); margin:5px 8px; }

/* ═══ TOAST ═══ */
.toast {
  position:fixed; bottom:46px; left:50%; transform:translateX(-50%) translateY(80px);
  height:34px; padding:0 16px; display:flex; align-items:center; gap:9px;
  background:var(--elevated); border:1px solid var(--hairline); border-radius:9px;
  box-shadow:var(--shadow-pop); font-size:12px; color:var(--text); z-index:1000;
  opacity:0; pointer-events:none; transition:transform .3s var(--ease), opacity .3s ease;
}
.toast.show { transform:translateX(-50%) translateY(0); opacity:1; }
.toast svg { width:14px; height:14px; color:var(--tag-green); flex-shrink:0; }
.toast.error svg { color:var(--danger); }
.toast button { margin-left:6px; height:22px; padding:0 10px; border-radius:6px; border:none; background:var(--accent); color:var(--accent-ink); font-size:11.5px; font-weight:600; cursor:pointer; }

/* ═══ MODAL ═══ */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.42); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  z-index:500; display:none; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.show { display:flex; animation:overlayIn .18s ease; }
@keyframes overlayIn { from{opacity:0} to{opacity:1} }
.modal {
  width:100%; max-width:430px; max-height:88vh; overflow-y:auto; background:var(--window);
  border:1px solid var(--hairline); border-radius:14px; box-shadow:0 26px 70px rgba(0,0,0,0.48);
  animation:modalIn .26s var(--ease);
}
@keyframes modalIn { from{opacity:0;transform:scale(.94) translateY(12px)} to{opacity:1;transform:scale(1) translateY(0)} }
.modal.closing { animation:modalOut .16s ease forwards; }
@keyframes modalOut { from{opacity:1;transform:scale(1)} to{opacity:0;transform:scale(.96)} }
.modal-head { display:flex; align-items:center; gap:10px; padding:16px 18px 12px; border-bottom:1px solid var(--hairline-soft); }
.modal-head h3 { font-size:15px; font-weight:600; color:var(--text); letter-spacing:-0.01em; }
.modal-head .mh-sub { font-size:11.5px; color:var(--text-3); margin-top:2px; }
.modal-close { margin-left:auto; width:26px; height:26px; border-radius:6px; border:none; background:transparent; cursor:pointer; color:var(--text-3); display:flex; align-items:center; justify-content:center; transition:background .12s ease, color .12s ease; }
.modal-close:hover { background:var(--hover); color:var(--text); }
.modal-close svg { width:14px; height:14px; }
.modal-body { padding:16px 18px; }
.field { margin-bottom:18px; }
.field > label { display:block; font-size:11px; font-weight:600; color:var(--text-3); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:7px; }
.field input[type="text"], .field input[type="email"], .field input[type="password"], .field input[type="number"], .field select {
  width:100%; height:34px; padding:0 11px; font-size:13.5px; color:var(--text);
  background:var(--content-alt); border:1px solid var(--hairline); border-radius:8px; outline:none;
  transition:border-color .14s ease, box-shadow .14s ease;
}
.field input::placeholder { color:var(--text-4); }
.field input:focus, .field select:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--selected); }
.field-hint { font-size:11.5px; color:var(--text-3); margin-top:6px; }
.field-error { font-size:11.5px; color:var(--danger); margin-top:6px; display:none; }
.field-error.show { display:block; }

.folder-preview { display:flex; align-items:center; gap:12px; padding:12px; background:var(--content-alt); border:1px solid var(--hairline-soft); border-radius:10px; margin-bottom:18px; }
.fp-ico { width:46px; height:46px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 3px 10px rgba(0,0,0,0.16); position:relative; transition:background .2s ease; }
.fp-ico svg { width:23px; height:23px; color:#fff; position:relative; z-index:1; }
.fp-ico::after { content:''; position:absolute; inset:0; border-radius:11px; background:linear-gradient(180deg,rgba(255,255,255,0.18),rgba(255,255,255,0) 52%); }
.fp-meta { min-width:0; }
.fp-name { font-size:14px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fp-type { font-size:11.5px; color:var(--text-3); margin-top:2px; }

.opt-grid { display:grid; gap:7px; }
.opt-grid.types { grid-template-columns:repeat(2,1fr); }
.opt-grid.icons { grid-template-columns:repeat(6,1fr); }
.opt-grid.colors { grid-template-columns:repeat(8,1fr); }
.type-opt { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--hairline-soft); border-radius:8px; background:var(--content-alt); cursor:pointer; transition:border-color .13s ease, background .13s ease, transform .08s ease; font-size:12.5px; color:var(--text-2); }
.type-opt:hover { background:var(--hover); }
.type-opt:active { transform:scale(.98); }
.type-opt.on { border-color:var(--accent); background:var(--selected); color:var(--text); font-weight:500; }
.type-opt .to-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.type-opt span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.icon-opt { aspect-ratio:1; border:1px solid var(--hairline-soft); border-radius:8px; background:var(--content-alt); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text-3); transition:all .13s ease; }
.icon-opt:hover { background:var(--hover); color:var(--text); transform:translateY(-1px); }
.icon-opt.on { border-color:var(--accent); background:var(--selected); color:var(--accent-bright); }
.icon-opt svg { width:16px; height:16px; }
.color-opt { aspect-ratio:1; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:transform .1s ease, box-shadow .13s ease; box-shadow:inset 0 0 0 0.5px rgba(0,0,0,0.16); }
.color-opt:hover { transform:scale(1.12); }
.color-opt.on { box-shadow:0 0 0 2px var(--window), 0 0 0 4px currentColor, inset 0 0 0 0.5px rgba(0,0,0,0.16); }
.modal-foot { display:flex; gap:8px; justify-content:flex-end; padding:14px 18px 16px; border-top:1px solid var(--hairline-soft); }
.mbtn { height:32px; padding:0 16px; border-radius:8px; font-size:13px; font-weight:500; cursor:pointer; border:1px solid var(--hairline); background:var(--hover); color:var(--text); transition:background .12s ease, transform .06s ease, opacity .12s ease; }
.mbtn:hover { background:var(--pressed); }
.mbtn:active { transform:scale(.98); }
.mbtn.primary { background:var(--accent); border-color:transparent; color:var(--accent-ink); box-shadow:0 1px 3px rgba(0,0,0,0.20); }
.mbtn.primary:hover { background:var(--accent-deep); }
.mbtn.primary:disabled { opacity:.45; cursor:not-allowed; }
.mbtn.danger { background:var(--danger); border-color:transparent; color:var(--danger-ink); }
.mbtn.danger:hover { filter:brightness(0.92); }

/* ═══ COMMAND PALETTE ═══ */
.palette-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.34); backdrop-filter:blur(2px); z-index:600; display:none; align-items:flex-start; justify-content:center; padding:14vh 20px 20px; }
.palette-overlay.show { display:flex; animation:overlayIn .14s ease; }
.palette { width:100%; max-width:520px; background:var(--elevated); border:1px solid var(--hairline); border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,0.5); overflow:hidden; animation:modalIn .2s var(--ease); }
.palette input { width:100%; height:46px; padding:0 16px; font-size:14.5px; color:var(--text); background:transparent; border:none; border-bottom:1px solid var(--hairline-soft); outline:none; }
.palette input::placeholder { color:var(--text-3); }
.palette-list { max-height:340px; overflow-y:auto; padding:6px; }
.palette-item { display:flex; align-items:center; gap:10px; height:36px; padding:0 10px; border-radius:7px; font-size:13.5px; color:var(--text); cursor:pointer; }
.palette-item.on, .palette-item:hover { background:var(--accent); color:var(--accent-ink); }
.palette-item svg { width:15px; height:15px; color:var(--text-3); }
.palette-item.on svg, .palette-item:hover svg { color:var(--accent-ink); }
.palette-item .p-key { margin-left:auto; font-size:11.5px; color:var(--text-3); font-variant-numeric:tabular-nums; }
.palette-item.on .p-key, .palette-item:hover .p-key { color:rgba(255,255,255,0.7); }
.palette-empty { padding:22px; text-align:center; font-size:13px; color:var(--text-3); }

/* ═══ BULK BAR ═══ */
.bulk-bar {
  position:absolute; bottom:44px; left:50%; transform:translateX(-50%) translateY(80px);
  height:44px; padding:0 8px 0 16px; display:flex; align-items:center; gap:8px;
  background:var(--elevated); border:1px solid var(--hairline); border-radius:11px;
  box-shadow:var(--shadow-pop); z-index:400; opacity:0; pointer-events:none;
  transition:transform .28s var(--ease), opacity .28s ease; font-size:12.5px; color:var(--text);
}
.bulk-bar.show { transform:translateX(-50%) translateY(0); opacity:1; pointer-events:auto; }
.bulk-count { font-weight:600; margin-right:4px; white-space:nowrap; }
.bulk-btn { height:30px; padding:0 12px; border-radius:7px; border:1px solid var(--hairline); background:var(--hover); color:var(--text); font-size:12.5px; font-weight:500; cursor:pointer; display:flex; align-items:center; gap:6px; transition:background .12s ease; }
.bulk-btn:hover { background:var(--pressed); }
.bulk-btn svg { width:13px; height:13px; }
.bulk-btn.danger { color:var(--danger); }
.bulk-btn.danger:hover { background:var(--danger); color:#fff; }

/* ═══ STATES ═══ */
.state { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:44px 24px; text-align:center; color:var(--text-3); }
.state svg { width:44px; height:44px; opacity:.32; }
.state h3 { font-size:15px; font-weight:600; color:var(--text-2); }
.state p { font-size:12.5px; max-width:320px; line-height:1.5; }
.state .mbtn { margin-top:6px; }
.spinner { width:22px; height:22px; border:2.5px solid var(--hairline); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg) } }

/* ═══ UPLOAD PANEL ═══ */
.upload-panel {
  position:absolute; bottom:44px; right:16px; width:330px; max-width:calc(100vw - 32px);
  background:var(--elevated); border:1px solid var(--hairline); border-radius:11px;
  box-shadow:var(--shadow-pop); z-index:410; overflow:hidden; display:none;
}
.upload-panel.show { display:block; animation:modalIn .22s var(--ease); }
.up-head { display:flex; align-items:center; gap:8px; padding:11px 13px; border-bottom:1px solid var(--hairline-soft); font-size:12.5px; font-weight:600; color:var(--text); }
.up-head button { margin-left:auto; width:22px; height:22px; border:none; background:transparent; border-radius:5px; cursor:pointer; color:var(--text-3); display:flex; align-items:center; justify-content:center; }
.up-head button:hover { background:var(--hover); color:var(--text); }
.up-head svg { width:12px; height:12px; }
.up-list { max-height:230px; overflow-y:auto; padding:6px; }
.up-item { padding:8px 9px; border-radius:7px; }
.up-item + .up-item { margin-top:2px; }
.up-row { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text); }
.up-name { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.up-pct { font-size:11px; color:var(--text-3); font-variant-numeric:tabular-nums; }
.up-track { height:3px; background:var(--hover); border-radius:2px; overflow:hidden; margin-top:6px; }
.up-fill { height:100%; width:0; background:var(--accent); border-radius:2px; transition:width .18s ease; }
.up-item.done .up-fill { background:var(--tag-green); }
.up-item.fail .up-fill { background:var(--danger); }
.up-item.fail .up-pct { color:var(--danger); }

/* ═══ DROP ZONE ═══ */
.drop-veil {
  position:absolute; inset:0; z-index:450; display:none;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,0.44); backdrop-filter:blur(3px);
}
.drop-veil.show { display:flex; animation:overlayIn .14s ease; }
.drop-veil .dv-box {
  border:2px dashed var(--accent-bright); border-radius:16px; padding:34px 46px;
  display:flex; flex-direction:column; align-items:center; gap:11px;
  background:var(--window); box-shadow:var(--shadow-pop);
}
.drop-veil svg { width:34px; height:34px; color:var(--accent-bright); }
.drop-veil span { font-size:14px; font-weight:600; color:var(--text); }

/* ═══ SCRIM + HAMBURGER ═══ */
.scrim { position:fixed; inset:0; background:rgba(0,0,0,0.44); opacity:0; pointer-events:none; transition:opacity .22s ease; z-index:200; display:none; }
.hamburger { display:none; }

/* ═══ ANIMATION ═══ */
@keyframes staggerIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.qa-card, .recent-card, .row, .grid-item { animation:staggerIn .3s var(--ease) backwards; }
@keyframes folderPop { 0%{opacity:0;transform:scale(.82)} 60%{opacity:1;transform:scale(1.045)} 100%{opacity:1;transform:scale(1)} }
.qa-card.pop, .row.pop { animation:folderPop .42s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ═══ RESPONSIVE ═══ */
@media (max-width:1100px) {
  body { padding:0; }
  .window { max-width:none; max-height:none; border-radius:0; height:100vh; height:100dvh; }
  .body { grid-template-columns:216px 1fr; }
  .inspector { display:none; }
  .stat-row { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:820px) {
  .scrim { display:block; }
  .scrim.show { opacity:1; pointer-events:auto; }
  .hamburger { display:flex; }
  .traffic, .tb-divider, .tb-nav, #inspectorToggle, #sidebarToggle { display:none !important; }

  .titlebar { height:auto; flex-wrap:wrap; gap:8px; padding:9px 10px; align-items:center; }
  .tb-title { font-size:14px; font-weight:600; }
  .tb-sub { display:none; }
  .tb-spacer { flex:1 1 0; min-width:0; }
  .tb-search { order:10; flex-basis:100%; width:100% !important; }
  .tb-search:focus-within { width:100% !important; }
  .tb-search input { height:38px; font-size:14px; border-radius:8px; padding-left:32px; }
  .tb-search svg { width:15px; height:15px; left:10px; }

  .tb-btn { width:40px; height:40px; }
  .segmented { padding:3px; }
  .segmented button { width:40px; height:34px; }
  .segmented button svg { width:16px; height:16px; }

  .sidebar {
    position:fixed; top:0; left:0; bottom:0; width:268px; z-index:300;
    transform:translateX(-104%); transition:transform .26s var(--ease);
    background:var(--window); backdrop-filter:none; -webkit-backdrop-filter:none;
    box-shadow:6px 0 40px rgba(0,0,0,0.42); padding:20px 10px 24px;
    margin-left:0; opacity:1; pointer-events:auto;
  }
  .sidebar.open { transform:translateX(0); }
  .sidebar.hidden { transform:translateX(-104%); opacity:1; margin-left:0; pointer-events:auto; }
  .sb-item { height:44px; font-size:15px; }
  .sb-head { font-size:11.5px; padding:8px 8px; }

  .body, .body.home-mode { grid-template-columns:1fr; }

  .col-header, .row { grid-template-columns:1fr 84px; }
  .col-header { height:36px; padding:0 12px; }
  .row { height:48px; padding:0 4px; }
  .col-header span:nth-child(2), .col-header span:nth-child(4),
  .row .r-cell:nth-child(2), .row .r-tags { display:none; }
  .r-label { font-size:14.5px; }
  .r-cell { font-size:12.5px; }
  .r-icon { width:28px; height:28px; border-radius:8px; }
  .r-icon svg { width:16px; height:16px; }
  .file-scroll { padding:4px 8px 16px; }

  .grid-view { grid-template-columns:repeat(3,1fr); gap:6px; padding:12px; }
  .grid-item { padding:12px 4px 10px; }
  .grid-thumb { width:54px; height:54px; border-radius:13px; }
  .grid-thumb svg { width:25px; height:25px; }
  .grid-name { font-size:11px; min-height:27px; }

  .statusbar { justify-content:space-between; height:auto; min-height:38px; padding:0 14px calc(4px + env(safe-area-inset-bottom)); font-size:11.5px; gap:8px; }
  .sb-storage { position:static; gap:6px; }
  .sb-storage-text { display:none; }
  .sb-storage-short { display:inline; }
  .sb-bar { width:44px; }
  #statusSel { flex:1; text-align:center; }

  .inspector {
    display:block; position:fixed; left:0; right:0; bottom:0; top:auto; max-height:72vh;
    border-left:none; border-top:1px solid var(--hairline); border-radius:16px 16px 0 0;
    transform:translateY(102%); transition:transform .28s var(--ease); z-index:320;
    box-shadow:0 -14px 44px rgba(0,0,0,0.38); margin-right:0 !important; opacity:1 !important;
    pointer-events:auto; padding:10px 18px calc(30px + env(safe-area-inset-bottom));
    overscroll-behavior:contain; backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--window);
  }
  .inspector.hidden { transform:translateY(102%); }
  .inspector.mobile-open { transform:translateY(0); }
  .insp-grab { display:block; width:40px; height:5px; border-radius:3px; background:var(--text-4); opacity:.45; margin:0 auto 14px; cursor:pointer; }
  .insp-thumb { width:72px; height:72px; }
  .insp-btn { height:44px; font-size:14px; }
  .insp-meta-row { font-size:13px; }
  .chip { height:28px; font-size:12px; border-radius:14px; }

  .toast { bottom:54px; font-size:13px; height:38px; }

  .home-view { padding:18px 16px 28px; }
  .home-hero { flex-direction:column; align-items:stretch; gap:14px; margin-bottom:22px; }
  .home-hero h1 { font-size:21px; }
  .home-hero p { font-size:12.5px; }
  .hero-actions { width:100%; }
  .hero-btn { flex:1; height:42px; justify-content:center; font-size:13.5px; }
  .stat-row { grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:24px; }
  .stat-tile { padding:12px 13px; }
  .stat-val { font-size:19px; }
  .qa-row { grid-template-columns:1fr; }
  .qa-card { padding:12px; }
  .recent-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .recent-thumb { height:64px; }
  .storage-legend { grid-template-columns:1fr; }

  .modal { max-width:none; border-radius:14px 14px 0 0; margin-top:auto; max-height:92vh; }
  .modal-overlay { align-items:flex-end; padding:0; }
  .mbtn { height:44px; font-size:14.5px; }
  .field input { height:44px; font-size:15px; }
  .type-opt { padding:11px 12px; font-size:13.5px; }
  .modal-head { padding:18px 18px 14px; }
  .modal-body { padding:16px 18px calc(20px + env(safe-area-inset-bottom)); }

  .bulk-bar { left:12px; right:12px; transform:translateX(0) translateY(80px); bottom:48px; overflow-x:auto; }
  .bulk-bar.show { transform:translateX(0) translateY(0); }
  .upload-panel { left:12px; right:12px; width:auto; bottom:calc(50px + env(safe-area-inset-bottom)); max-height:52vh; z-index:430; }
  .upload-panel .up-list { max-height:34vh; }
  .palette-overlay { padding:8vh 12px 12px; }
}