/* ================================================================ tokens */
:root {
  color-scheme: light;
  /* neutrals */
  --bg:#f5f6f8; --bg-accent:#eef1f6;
  --surface:#ffffff; --surface-2:#f6f7f9; --surface-3:#eef0f3;
  --border:#e6e8ec; --border-strong:#d4d8df;
  --text:#101623; --text-muted:#5b6472; --text-subtle:#9aa2af;
  /* brand accent (indigo) */
  --accent:#4f46e5; --accent-hover:#4338ca; --accent-press:#3730a3;
  --accent-tint:#eef2ff; --accent-tint-2:#e0e7ff; --accent-text:#4338ca;
  --ring:rgba(79,70,229,.32);
  /* feedback */
  --danger:#dc2626; --danger-tint:#fef2f2; --danger-border:#f3c6c6; --danger-text:#b42318;
  --success:#0f9d58; --success-tint:#e9f9ef; --success-text:#0a7c46;
  --warn:#b45309; --warn-tint:#fef3e2;
  /* file kind accents */
  --k-image:#0ea5e9; --k-image-tint:#e0f2fe;
  --k-pdf:#dc2626; --k-pdf-tint:#fee2e2;
  --k-doc:#2563eb; --k-doc-tint:#dbeafe;
  --k-sheet:#16a34a; --k-sheet-tint:#dcfce7;
  --k-archive:#d97706; --k-archive-tint:#fef3c7;
  --k-audio:#db2777; --k-audio-tint:#fce7f3;
  --k-video:#7c3aed; --k-video-tint:#ede9fe;
  --k-code:#0891b2; --k-code-tint:#cffafe;
  --k-file:#64748b; --k-file-tint:#f1f5f9;
  /* motion timing system (mirrored as JS constants) */
  --t-fast:120ms; --t-base:200ms; --t-slow:300ms;
  --e-enter:cubic-bezier(.22,.68,.32,1);   /* settle, no overshoot */
  --e-exit:cubic-bezier(.4,0,1,1);          /* depart, accelerate out */
  --e-hero:cubic-bezier(.2,.7,.3,1);        /* hero / login curve */
  /* radii */
  --r-sm:6px; --r-md:9px; --r-lg:13px; --r-xl:18px;
  /* shadows */
  --shadow-xs:0 1px 2px rgba(16,24,40,.05);
  --shadow-sm:0 1px 2px rgba(16,24,40,.06),0 1px 1px rgba(16,24,40,.04);
  --shadow-md:0 4px 12px -2px rgba(16,24,40,.1),0 2px 6px -2px rgba(16,24,40,.06);
  --shadow-lg:0 18px 40px -12px rgba(16,24,40,.22),0 6px 14px -6px rgba(16,24,40,.12);
  --code-bg:#0d1117; --code-fg:#e6edf3; --code-border:#20262f;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg:#0d0f14; --bg-accent:#14171f;
    --surface:#161a22; --surface-2:#1c212b; --surface-3:#232935;
    --border:#282e3a; --border-strong:#39414f;
    --text:#e8eaef; --text-muted:#9aa3b2; --text-subtle:#6b7482;
    --accent:#6366f1; --accent-hover:#818cf8; --accent-press:#a5b4fc;
    --accent-tint:rgba(99,102,241,.16); --accent-tint-2:rgba(99,102,241,.24); --accent-text:#a5b4fc;
    --ring:rgba(129,140,248,.42);
    --danger:#f87171; --danger-tint:rgba(248,113,113,.13); --danger-border:rgba(248,113,113,.32); --danger-text:#fca5a5;
    --success:#34d399; --success-tint:rgba(52,211,153,.14); --success-text:#6ee7b7;
    --warn:#fbbf24; --warn-tint:rgba(251,191,36,.14);
    --k-image:#38bdf8; --k-image-tint:rgba(56,189,248,.15);
    --k-pdf:#f87171; --k-pdf-tint:rgba(248,113,113,.15);
    --k-doc:#60a5fa; --k-doc-tint:rgba(96,165,250,.15);
    --k-sheet:#34d399; --k-sheet-tint:rgba(52,211,153,.15);
    --k-archive:#fbbf24; --k-archive-tint:rgba(251,191,36,.15);
    --k-audio:#f472b6; --k-audio-tint:rgba(244,114,182,.15);
    --k-video:#a78bfa; --k-video-tint:rgba(167,139,250,.15);
    --k-code:#22d3ee; --k-code-tint:rgba(34,211,238,.15);
    --k-file:#94a3b8; --k-file-tint:rgba(148,163,184,.13);
    --shadow-xs:0 1px 2px rgba(0,0,0,.4);
    --shadow-sm:0 1px 2px rgba(0,0,0,.45),0 1px 1px rgba(0,0,0,.3);
    --shadow-md:0 6px 16px -4px rgba(0,0,0,.55),0 2px 8px -2px rgba(0,0,0,.4);
    --shadow-lg:0 24px 48px -14px rgba(0,0,0,.7),0 8px 18px -8px rgba(0,0,0,.5);
    --code-bg:#0a0d12; --code-fg:#dbe3ec; --code-border:#232a34;
  }
}

* { box-sizing:border-box; }
html,body { height:100%; }
body {
  margin:0;
  font:14px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection { background:var(--accent-tint-2); color:var(--accent-text); }

.num { font-variant-numeric:tabular-nums; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; }
.muted { color:var(--text-muted); font-size:13px; }
.help { color:var(--text-muted); font-size:13px; line-height:1.5; margin-top:9px; }
.section-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-subtle); }
.hidden { display:none !important; }

/* ================================================================ icons */
.icon { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; line-height:0; color:currentColor; }
.icon svg { width:18px; height:18px; display:block; }
.icon-sm svg { width:14px; height:14px; }
.icon-lg svg { width:26px; height:26px; }
.icon-xl svg { width:30px; height:30px; }

/* ================================================================ app bar */
.appbar {
  position:sticky; top:0; z-index:20;
  min-height:58px; padding:0 22px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--surface);
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  -webkit-backdrop-filter:saturate(1.6) blur(10px); backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid var(--border);
}
.brand { display:inline-flex; align-items:center; gap:10px; font-size:16px; font-weight:700; color:var(--text); letter-spacing:-.01em; }
.brand-mark {
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:9px; overflow:hidden;
  background:linear-gradient(145deg,var(--accent),var(--accent-press));
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.22);
}
.brand-mark svg { width:18px; height:18px; display:block; }
.brand-name { white-space:nowrap; }
.spacer { flex:1; }
.role {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 11px; border-radius:999px; font-size:12px; font-weight:600;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-muted);
}
.role::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.75; }
.role-admin { background:var(--accent-tint); border-color:transparent; color:var(--accent-text); }

/* breadcrumbs */
.crumbs {
  display:flex; align-items:center; gap:4px; min-width:0;
  font-size:13px; color:var(--text-muted);
  white-space:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.crumbs::-webkit-scrollbar { height:0; width:0; }
.crumb-link {
  background:none; border:0; padding:3px 7px; margin:0; font:inherit; cursor:pointer;
  color:var(--text-muted); border-radius:var(--r-sm);
  transition:background .14s ease,color .14s ease;
}
.crumb-link:hover { color:var(--accent-text); background:var(--accent-tint); }
.crumb-link:focus-visible { outline:none; box-shadow:0 0 0 3px var(--ring); color:var(--accent-text); }
.crumb-current { color:var(--text); font-weight:600; padding:3px 4px; }
.crumb-sep { color:var(--text-subtle); display:inline-flex; }
.crumb-sep svg { width:15px; height:15px; }

/* ================================================================ content */
.content { max-width:1120px; margin:0 auto; padding:34px 24px 64px; animation:fade-in .3s ease both; }
.page-title { font-size:21px; font-weight:700; letter-spacing:-.02em; margin:22px 0 4px; line-height:1.25; }
.page-title:first-child { margin-top:0; }
.page-head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:2px; }
.page-count { font-size:13px; font-weight:600; color:var(--text-subtle); font-variant-numeric:tabular-nums; }

@keyframes fade-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

/* ================================================================ buttons */
.btn {
  height:38px; padding:0 15px; border-radius:var(--r-md);
  font:inherit; font-size:14px; font-weight:600; line-height:1; white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border:1px solid transparent; background:none; cursor:pointer;
  transition:background .14s ease,border-color .14s ease,box-shadow .14s ease,transform .06s ease,color .14s ease;
}
.btn .icon svg { width:16px; height:16px; }
.btn:focus-visible { outline:none; box-shadow:0 0 0 3px var(--ring); }
.btn:disabled { opacity:.55; cursor:not-allowed; }
.btn-primary { background:var(--accent); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover:not(:disabled) { background:var(--accent-hover); }
.btn-primary:active:not(:disabled) { background:var(--accent-press); transform:translateY(1px); }
.btn-ghost { background:var(--surface); color:var(--text); border-color:var(--border-strong); box-shadow:var(--shadow-xs); }
.btn-ghost:hover:not(:disabled) { background:var(--surface-2); border-color:var(--text-subtle); }
.btn-ghost:active:not(:disabled) { transform:translateY(1px); }
.btn-danger { background:var(--surface); color:var(--danger-text); border-color:var(--danger-border); box-shadow:var(--shadow-xs); }
.btn-danger:hover:not(:disabled) { background:var(--danger-tint); border-color:var(--danger); }
.btn-danger:active:not(:disabled) { transform:translateY(1px); }
.btn-block { width:100%; height:44px; font-size:15px; }
.btn-sm { height:32px; padding:0 11px; font-size:13px; border-radius:var(--r-sm); }
.btn.is-busy { position:relative; color:transparent !important; pointer-events:none; }
.btn.is-busy::after {
  content:""; position:absolute; width:15px; height:15px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent; opacity:.9;
  color:#fff; animation:spin .6s linear infinite;
}
.btn-ghost.is-busy::after, .btn-danger.is-busy::after { color:var(--text-muted); }
@keyframes spin { to { transform:rotate(360deg); } }

/* ================================================================ inputs */
.field {
  width:100%; height:40px; padding:9px 13px;
  border:1px solid var(--border-strong); border-radius:var(--r-md);
  background:var(--surface); color:var(--text); font:inherit; font-size:14px;
  box-shadow:var(--shadow-xs);
  transition:border-color .14s ease,box-shadow .14s ease,background .14s ease;
}
.field::placeholder { color:var(--text-subtle); }
.field:hover:not(:focus) { border-color:var(--text-subtle); }
.field:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
textarea.field { height:auto; min-height:90px; resize:vertical; line-height:1.5; }

/* compose bar */
.composer {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:16px; box-shadow:var(--shadow-sm); margin:18px 0 26px;
}
.composer-row { display:flex; gap:9px; flex-wrap:wrap; align-items:center; }
.composer-row .field { flex:1; min-width:200px; }
.composer-row .btn { flex:0 0 auto; }

.err { color:var(--danger-text); font-size:13px; min-height:1em; margin-top:9px; }
.err:not(:empty) { display:flex; align-items:flex-start; gap:6px; }

/* ================================================================ tables */
.table-wrap {
  position:relative; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); background:var(--surface);
}
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:13px 16px; font-size:14px; }
th {
  background:var(--surface-2); color:var(--text-subtle);
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  border-bottom:1px solid var(--border); position:sticky; top:0;
}
th.num, td.num { text-align:right; }
td { border-bottom:1px solid var(--border); color:var(--text); }
td.strong { font-weight:600; }
tbody tr:last-child td { border-bottom:0; }
tr.click { cursor:pointer; transition:background .13s ease; }
tr.click:hover td { background:var(--accent-tint); }
tr.click:focus-visible { outline:none; }
tr.click:focus-visible td { background:var(--accent-tint); box-shadow:inset 0 0 0 2px var(--ring); }
tr.click td:first-child { position:relative; }
tr.click:hover td:first-child::before,
tr.click:focus-visible td:first-child::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent);
}
td.chev { width:38px; text-align:right; color:var(--text-subtle); }
td.chev .icon { transition:transform .14s ease, color .14s ease; }
tr.click:hover td.chev .icon { transform:translateX(2px); color:var(--accent); }
.file-count { display:inline-flex; align-items:center; gap:5px; justify-content:flex-end; color:var(--text-muted); font-weight:600; }
.file-count .icon { color:var(--text-subtle); }

/* ================================================================ pills / badges */
.pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600; line-height:1.4;
  border:1px solid transparent; text-transform:capitalize;
}
.pill .dot { width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px color-mix(in srgb,currentColor 18%,transparent); }
.pill-new { background:var(--accent-tint); color:var(--accent-text); }
.pill-read { background:var(--surface-2); color:var(--text-muted); border-color:var(--border); }

.badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:2px 9px; border-radius:999px; font-size:11px; font-weight:700;
  letter-spacing:.02em; text-transform:uppercase; line-height:1.5;
  background:var(--k-file-tint); color:var(--k-file);
}
.badge-image { background:var(--k-image-tint); color:var(--k-image); }
.badge-pdf { background:var(--k-pdf-tint); color:var(--k-pdf); }
.badge-doc { background:var(--k-doc-tint); color:var(--k-doc); }
.badge-sheet { background:var(--k-sheet-tint); color:var(--k-sheet); }
.badge-archive { background:var(--k-archive-tint); color:var(--k-archive); }
.badge-audio { background:var(--k-audio-tint); color:var(--k-audio); }
.badge-video { background:var(--k-video-tint); color:var(--k-video); }
.badge-code { background:var(--k-code-tint); color:var(--k-code); }
.badge-file { background:var(--k-file-tint); color:var(--k-file); }

/* ================================================================ cards / detail */
.card {
  position:relative;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); padding:20px 22px; margin:16px 0;
}
.card > .section-label { display:block; margin-bottom:13px; }
.detail-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:4px; }
.detail-meta { font-size:13px; margin-top:6px; word-break:break-word; display:flex; align-items:center; gap:7px; }
.detail-meta .icon { color:var(--text-subtle); }
.detail-meta.ua { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; }

.kv { display:flex; flex-direction:column; }
.kv-row {
  display:grid; grid-template-columns:170px 1fr; gap:16px;
  padding:11px 0; border-bottom:1px solid var(--border);
}
.kv-row:last-child { border-bottom:0; }
.kv .k { color:var(--text-muted); font-size:13px; font-weight:600; word-break:break-word; }
.kv .v { color:var(--text); word-break:break-word; white-space:pre-wrap; }

/* file cards */
.file-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
.file-card {
  display:flex; flex-direction:column; gap:0;
  border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden;
  background:var(--surface-2); transition:border-color .14s ease,box-shadow .14s ease;
}
.file-card:hover { border-color:var(--border-strong); box-shadow:var(--shadow-sm); }
.file-thumb {
  display:flex; align-items:center; justify-content:center;
  height:132px; background:var(--surface-3); position:relative; overflow:hidden; text-decoration:none;
}
.file-thumb-icon { color:var(--k-file); }
.file-thumb-image { color:var(--k-image); background:var(--k-image-tint); }
.file-thumb-pdf { color:var(--k-pdf); background:var(--k-pdf-tint); }
.file-thumb-doc { color:var(--k-doc); background:var(--k-doc-tint); }
.file-thumb-sheet { color:var(--k-sheet); background:var(--k-sheet-tint); }
.file-thumb-archive { color:var(--k-archive); background:var(--k-archive-tint); }
.file-thumb-audio { color:var(--k-audio); background:var(--k-audio-tint); }
.file-thumb-video { color:var(--k-video); background:var(--k-video-tint); }
.file-thumb-code { color:var(--k-code); background:var(--k-code-tint); }
.file-thumb-icon .icon svg { width:40px; height:40px; }
a.file-thumb::after {
  content:""; position:absolute; inset:0; background:rgba(16,24,40,0); transition:background .14s ease;
}
a.file-thumb:hover::after { background:rgba(16,24,40,.14); }
a.file-thumb:focus-visible { outline:none; box-shadow:inset 0 0 0 3px var(--ring); }
.file-img { width:100%; height:100%; object-fit:cover; display:block; }
.file-body { padding:11px 13px; display:flex; flex-direction:column; gap:9px; }
.file-name {
  color:var(--text); font-weight:600; font-size:13px; text-decoration:none;
  word-break:break-word; line-height:1.35;
}
.file-name:hover { color:var(--accent-text); text-decoration:underline; }
.file-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.file-ct { font-size:11px; }
.file-actions { display:flex; align-items:center; gap:8px; margin-top:2px; }
.file-dl { text-decoration:none; }

/* legacy single-line file row (kept for safety) */
.file-row { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.file-row:last-child { border-bottom:0; }
a.dl { color:var(--accent-text); text-decoration:none; font-weight:600; display:inline-flex; align-items:center; gap:6px; }
a.dl:hover { text-decoration:underline; }

.actions { display:flex; gap:9px; flex-wrap:wrap; margin-top:22px; }
.actions .spacer { flex:1; min-width:12px; }
.pager { display:flex; align-items:center; gap:12px; margin-top:18px; }
.pager .page-ind { color:var(--text-muted); font-size:13px; font-weight:600; }

/* ================================================================ snippet */
.snippet-panel {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); padding:16px; margin-bottom:24px;
  animation:fade-in .25s ease both;
}
.snippet-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.snippet-copy { height:30px; padding:0 12px; font-size:13px; }
.snippet {
  margin:10px 0 0; background:var(--code-bg); color:var(--code-fg);
  border:1px solid var(--code-border);
  border-radius:var(--r-md); padding:14px 16px; overflow-x:auto;
  font:12px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre;
}
.snippet::-webkit-scrollbar { height:8px; }
.snippet::-webkit-scrollbar-thumb { background:rgba(255,255,255,.16); border-radius:99px; }

/* ==================================================== embed code & docs */
.docs-panel {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); margin:0 0 24px; overflow:hidden;
}
.docs-summary {
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; gap:11px; padding:15px 16px;
  font-size:14px; font-weight:600; color:var(--text);
  transition:background .14s ease;
}
.docs-summary::-webkit-details-marker { display:none; }
.docs-summary:hover { background:var(--surface-2); }
.docs-summary:focus-visible { outline:none; box-shadow:inset 0 0 0 3px var(--ring); }
.docs-summary .docs-lead { display:inline-flex; color:var(--accent-text); }
.docs-title { flex:1; }
.docs-toggle {
  font-size:12px; font-weight:600; color:var(--accent-text);
  padding:3px 11px; border-radius:999px; background:var(--accent-tint);
}
.docs-toggle::after { content:"Show"; }
.docs-panel[open] .docs-toggle::after { content:"Hide"; }
.docs-panel[open] .docs-summary { border-bottom:1px solid var(--border); }

.docs-body { padding:18px 16px; display:flex; flex-direction:column; gap:20px; }
.docs-block > .section-label { display:block; margin-bottom:8px; }
.docs-block .snippet-head { margin-bottom:0; }
.docs-endpoint {
  padding:11px 13px; background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--r-md);
  color:var(--text); word-break:break-all;
}
.docs-list { display:flex; flex-direction:column; }
.docs-item {
  display:grid; grid-template-columns:190px 1fr; gap:16px;
  padding:11px 0; border-bottom:1px solid var(--border);
}
.docs-item:last-child { border-bottom:0; }
.docs-term { color:var(--text-muted); font-size:13px; font-weight:600; }
.docs-desc { color:var(--text); word-break:break-word; line-height:1.55; }
.docs-inline {
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px;
  background:var(--surface-3); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:1px 5px; word-break:break-word;
}

/* ================================================================ states */
.state {
  position:relative;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:9px;
  padding:52px 24px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
  animation:fade-in .3s ease both;
}
.state-icon {
  width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background:var(--accent-tint); color:var(--accent-text); margin-bottom:5px;
}
.state-icon svg { width:26px; height:26px; }
.state-icon-warn { background:var(--danger-tint); color:var(--danger-text); }
.state-title { font-size:16px; font-weight:700; color:var(--text); letter-spacing:-.01em; }
.state-sub { font-size:13px; color:var(--text-muted); max-width:360px; line-height:1.55; }
.state .btn { margin-top:10px; }
.state-inline { padding:36px 24px; }

/* loading skeleton */
.skeleton { display:flex; flex-direction:column; gap:13px; }
.skel-bar, .skel-card, .skel-row {
  border-radius:var(--r-md); background:var(--surface-2);
  position:relative; overflow:hidden; border:1px solid var(--border);
}
.skel-bar { height:26px; width:38%; border:0; }
.skel-card { height:74px; }
.skel-row { height:50px; }
.skel-bar::after, .skel-card::after, .skel-row::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--surface) 70%,transparent),transparent);
  transform:translateX(-100%); animation:shimmer 1.4s infinite;
}
@keyframes shimmer { 100% { transform:translateX(100%); } }

/* ================================================================ login */
.auth-wrap {
  min-height:100dvh; display:grid; place-items:center; padding:24px;
  background:
    radial-gradient(900px 500px at 50% -8%,var(--accent-tint),transparent 70%),
    radial-gradient(700px 500px at 110% 110%,var(--accent-tint),transparent 60%),
    var(--bg);
}
.auth-card {
  width:100%; max-width:396px; padding:34px 32px 30px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column;
  animation:auth-in .4s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes auth-in { from { opacity:0; transform:translateY(12px) scale(.985); } to { opacity:1; transform:none; } }
.brand-mark-lg { width:52px; height:52px; border-radius:15px; margin:0 auto 2px; }
.brand-mark-lg svg { width:30px; height:30px; }
.auth-title { font-size:23px; font-weight:700; text-align:center; letter-spacing:-.02em; margin:16px 0 4px; }
.auth-sub { font-size:14px; color:var(--text-muted); text-align:center; margin:0 0 22px; }
.auth-label { font-size:13px; font-weight:600; color:var(--text); margin:14px 0 6px; }
.auth-field { position:relative; display:flex; align-items:center; }
.auth-field .icon { position:absolute; left:12px; color:var(--text-subtle); pointer-events:none; }
.auth-field .field { padding-left:38px; height:44px; }
.auth-card .btn-block { margin-top:24px; }
.auth-foot { margin-top:18px; text-align:center; font-size:12px; color:var(--text-subtle); }
.alert {
  position:relative;
  background:var(--danger-tint); color:var(--danger-text); border:1px solid var(--danger-border);
  border-radius:var(--r-md); padding:10px 12px 10px 34px; font-size:13px; margin-bottom:6px; line-height:1.45;
  animation:fade-in .2s ease both;
}
/* Icon via a masked pseudo-element (inline data-URI, self-contained) so the
   login script's `textContent` writes never clobber it. */
.alert::before {
  content:""; position:absolute; left:12px; top:11px; width:15px; height:15px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ================================================================ responsive */
@media (max-width:640px) {
  .appbar { padding:9px 16px; gap:9px; }
  .content { padding:22px 16px 52px; }
  .crumbs { order:3; width:100%; }
  .composer-row { flex-direction:column; align-items:stretch; }
  .composer-row .field, .composer-row .btn { width:100%; min-width:0; }
  .kv-row { grid-template-columns:1fr; gap:3px; }
  .docs-item { grid-template-columns:1fr; gap:3px; }
  .file-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
  .actions .btn { flex:1; }
  .actions .spacer { display:none; }
  .btn { min-height:40px; }
  .brand-name { display:none; }
}

/* ================================================================ the indigo sweep */
/* A ~2px accent leading edge GSAP wipes across freshly-arrived content — the
   product's heartbeat. Pure transform/opacity; self-removing DOM nodes. */
.sweep { pointer-events:none; z-index:6; will-change:transform,opacity; }
.sweep-v {
  position:absolute; left:0; top:0; bottom:0; width:2px; transform-origin:top center;
  background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 8%,transparent));
  box-shadow:0 0 10px color-mix(in srgb,var(--accent) 55%,transparent);
}
.sweep-h {
  position:absolute; left:0; right:0; bottom:-1px; height:2px; transform-origin:left center;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 6%,transparent));
  box-shadow:0 0 10px color-mix(in srgb,var(--accent) 50%,transparent);
}

/* current-crumb one-shot indigo underline sweep — "where am I now" */
.crumb-current { position:relative; }
.crumb-lit::after {
  content:""; position:absolute; left:4px; right:4px; bottom:-1px; height:2px;
  background:var(--accent); border-radius:2px; transform-origin:left center;
  animation:crumb-underline var(--t-slow) var(--e-enter) both;
}
@keyframes crumb-underline { from { transform:scaleX(0); opacity:.4; } to { transform:scaleX(1); opacity:1; } }

/* copy-button success morph */
.snippet-copy.is-copied { color:var(--success-text); border-color:var(--success); }
.snippet-copy.is-copied .icon { color:var(--success-text); }

/* create/delete toasts */
.toast {
  position:fixed; right:20px; bottom:20px; z-index:60;
  display:inline-flex; align-items:center; gap:8px; max-width:min(360px,90vw);
  padding:11px 15px; border-radius:var(--r-md); font-size:13px; font-weight:600;
  background:var(--surface); color:var(--text);
  border:1px solid var(--border); box-shadow:var(--shadow-lg);
}
.toast .icon { color:var(--accent-text); }
.toast-danger { border-color:var(--danger-border); }
.toast-danger .icon { color:var(--danger-text); }
@media (max-width:640px) { .toast { left:16px; right:16px; bottom:16px; } }

/* press feedback — a subtle indigo bloom behind the primary button */
.btn-primary:active:not(:disabled) { box-shadow:var(--shadow-sm),0 0 0 4px var(--ring); }

/* ================================================================ motion */
@media (prefers-reduced-motion:reduce) {
  *, *::after, *::before { transition:none !important; animation:none !important; }
}