/* Theme. Every colour derives from a few base tokens (--bg, --fg, --accent, --accent-2, --glow, --ok, --warn,
   --err), so switching the theme (html[data-scheme]) or a design (app.js sets those tokens inline on <html>)
   redraws the whole UI at once. Boxes get no flat fills: a faint gradient plus a glow in the theme's --glow. */
:root {
  --bg: #0c0c10;
  --fg: #ececf1;
  --accent: #8b7bff;
  --accent-2: #3fd9c8;
  --accent-ink: #0c0c10;
  --ok: #3ecf8e;
  --warn: #f5b454;
  --err: #ff6b7a;
  --glow: var(--accent);
  --shadow: rgba(0, 0, 0, .5);
  --panel: color-mix(in srgb, var(--fg) 4.5%, var(--bg));
  --panel-2: color-mix(in srgb, var(--fg) 7.5%, var(--bg));
  --panel-3: color-mix(in srgb, var(--fg) 12%, var(--bg));
  --rail: color-mix(in srgb, var(--bg) 62%, #000);
  --muted: color-mix(in srgb, var(--fg) 62%, var(--bg));
  --faint: color-mix(in srgb, var(--fg) 42%, var(--bg));
  color-scheme: dark;
}
/* Light: the Paper and Ink design (warm paper, ink text, its deep teal), with blue ink for buttons and accents. */
:root[data-scheme=light] {
  --bg: #f6f2ea;
  --fg: #1d1b18;
  --accent: #2357c6;
  --accent-2: #2f5d62;
  --accent-ink: #ffffff;
  --ok: #3f7d4e;
  --warn: #a8661a;
  --err: #b3261e;
  --shadow: rgba(48, 38, 22, .14);
  --panel: color-mix(in srgb, #fffdf8 70%, var(--bg));
  --panel-2: color-mix(in srgb, var(--fg) 4%, var(--bg));
  --panel-3: color-mix(in srgb, var(--fg) 8%, var(--bg));
  --rail: color-mix(in srgb, var(--fg) 3.5%, var(--bg));
  --muted: color-mix(in srgb, var(--fg) 66%, var(--bg));
  --faint: color-mix(in srgb, var(--fg) 50%, var(--bg));
  color-scheme: light;
}
:root {
  --line: color-mix(in srgb, var(--fg) 11%, var(--bg));
  --line-2: color-mix(in srgb, var(--fg) 18%, var(--bg));
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-hover: color-mix(in srgb, var(--accent) 86%, var(--fg));
  --accent-text: var(--accent);   /* accent as text: app.js darkens it for designs whose accent is too light */
  --accent-2-text: color-mix(in srgb, var(--accent-2) 60%, var(--fg));
  --glow-soft: color-mix(in srgb, var(--glow) 14%, transparent);
  --glow-mid: color-mix(in srgb, var(--glow) 32%, transparent);
  --glow-strong: color-mix(in srgb, var(--glow) 55%, transparent);
  /* boxes: gradient surfaces tinted by the glow, and glow rings */
  --box: linear-gradient(180deg, color-mix(in srgb, var(--glow) 6%, var(--panel)), var(--panel) 70%);
  --box-2: linear-gradient(180deg, color-mix(in srgb, var(--glow) 8%, var(--panel-2)), var(--panel-2));
  --box-3: linear-gradient(180deg, color-mix(in srgb, var(--glow) 12%, var(--panel-3)), var(--panel-3));
  --box-side: linear-gradient(180deg, color-mix(in srgb, var(--glow) 5%, var(--panel)), var(--panel) 45%);
  --ring: 0 0 0 1px var(--glow-soft), 0 8px 26px -16px var(--glow-strong);
  --ring-hover: 0 0 0 1px var(--glow-mid), 0 12px 34px -12px var(--glow-strong), 0 14px 30px -20px var(--shadow);
  --ring-focus: 0 0 0 3px var(--glow-soft), 0 0 22px -6px var(--glow-strong);
  --ring-float: 0 20px 50px var(--shadow), 0 0 0 1px var(--glow-soft), 0 0 50px -14px var(--glow-mid);
  --radius: 12px;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  /* UI scale (Settings): --ui-zoom zooms the whole page. Zoom scales vh/vw too, so use these instead. */
  --vh: calc(1vh / var(--ui-zoom, 1));
  --vw: calc(1vw / var(--ui-zoom, 1));
}* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { zoom: var(--ui-zoom, 1); }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--fg); font: 14px/1.45 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; overflow: hidden; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
svg { flex: none; }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

#app { display: grid; grid-template-columns: 72px 1fr; height: calc(100 * var(--vh)); }
#main { display: grid; grid-template-rows: 56px 1fr; grid-template-columns: minmax(0, 1fr); min-width: 0; min-height: 0; }
#view { overflow: auto; min-height: 0; }
#view.view-fill { overflow: hidden; }

/* ---------- rail */
#rail { background: var(--rail); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; padding: 12px 0; gap: 10px; min-height: 0; }
.rail-logo { width: 44px; height: 44px; border-radius: 12px; display: block; flex: none; object-fit: cover; background: #fff; box-shadow: 0 0 0 1px var(--glow-soft), 0 6px 22px -4px var(--glow-strong); }
.rail-sep { width: 28px; height: 1px; background: var(--line-2); margin: 2px 0; }
.rail-list { display: flex; flex-direction: column; align-items: center; gap: 10px; overflow-y: auto; overflow-x: visible; flex: 1; width: 100%; padding: 2px 0; scrollbar-width: none; }
.rail-list::-webkit-scrollbar { display: none; }
.rail-item, .rail-add, .rail-btn { position: relative; width: 46px; height: 46px; border: 0; border-radius: 16px; display: grid; place-items: center; transition: border-radius .18s ease, background .18s ease, transform .1s ease; flex: none; }
.rail-item { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 28%, var(--panel)), color-mix(in srgb, var(--c) 18%, var(--panel))); color: color-mix(in srgb, var(--c) 70%, var(--fg)); font-weight: 700; font-size: 15px; }
.rail-item:hover { border-radius: 13px; background: color-mix(in srgb, var(--c) 34%, var(--panel)); box-shadow: 0 4px 16px -6px color-mix(in srgb, var(--c) 60%, transparent); }
.rail-item.active { border-radius: 13px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 80%, #fff), var(--c)); color: #0c0c10; box-shadow: 0 6px 20px -6px color-mix(in srgb, var(--c) 75%, transparent); }
.rail-item::before { content: ""; position: absolute; left: -13px; top: 50%; width: 4px; height: 0; border-radius: 0 4px 4px 0; background: var(--fg); transform: translateY(-50%); transition: height .18s ease; }
.rail-item:hover::before { height: 18px; }
.rail-item.active::before { height: 34px; }
.rail-add { background: transparent; border: 1.5px dashed var(--line-2); color: var(--muted); }
.rail-add:hover { color: var(--ok); border-color: var(--ok); border-radius: 13px; }
.rail-btn { background: transparent; color: var(--muted); }
.rail-btn:hover { background: var(--box-2); color: var(--fg); box-shadow: var(--ring); }
.rail-home svg { width: 20px; height: 20px; }
.rail-home.active { background: var(--accent-soft); color: var(--fg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 14px -4px var(--glow-mid); }
.rail-item:active, .rail-add:active { transform: scale(.95); }
.rail-tip { position: fixed; left: 80px; padding: 6px 10px; border-radius: 8px; background: var(--fg); color: var(--bg); font-size: 12.5px; font-weight: 500; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateX(-4px); transition: opacity .12s ease, transform .12s ease; z-index: 100; box-shadow: 0 6px 20px var(--shadow); }
.rail-item:hover .rail-tip, .rail-add:hover .rail-tip, .rail-btn:hover .rail-tip { opacity: 1; transform: none; }
/* Presentations and folders in the rail (renderRail). A folder looks stacked and opens in place; while a tile is
   dragged, a line shows where it lands and a ring the tile it goes into. */
.rail-folder { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; flex: none; }
.folder-art { display: block; }
.folder-art .fa-back { fill: color-mix(in srgb, var(--c) 62%, #000); }
.folder-art .fa-front { fill: var(--c); }
.rail-fold, .rail-deck { background: transparent; }
.rail-fold .folder-art { width: 34px; height: 34px; filter: drop-shadow(0 3px 6px color-mix(in srgb, var(--c) 40%, transparent)); }
.rail-fold:hover { background: color-mix(in srgb, var(--c) 14%, transparent); box-shadow: none; }
.rail-fold.active { background: color-mix(in srgb, var(--c) 22%, var(--panel)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 60%, transparent); }
.rail-shot { position: relative; display: block; width: 42px; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--rail); box-shadow: 0 0 0 1px var(--line-2), 0 3px 10px -4px var(--shadow); }
.rail-shot iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.rail-deck:hover { background: var(--box-2); box-shadow: none; }
.rail-deck.active { background: var(--box-3); box-shadow: none; }
.rail-deck.active .rail-shot { box-shadow: 0 0 0 2px var(--accent), 0 4px 14px -4px var(--glow-strong); }
.rail-kids .rail-shot { width: 34px; }
.rail-kids .rail-fold .folder-art { width: 28px; height: 28px; }
.rail-kids { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 54px; padding: 8px 0; border-radius: 16px; background: color-mix(in srgb, var(--c) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent); }
.rail-kids .rail-item { width: 38px; height: 38px; border-radius: 12px; font-size: 13px; }
.rail-kids .rail-item::before { left: -21px; }
.rail-item.dragging { opacity: .35; }
.rail-item.drop-into { box-shadow: 0 0 0 3px var(--accent); transform: scale(1.08); }
.rail-list .rail-item.drop-before::after, .rail-list .rail-item.drop-after::after { content: ""; position: absolute; left: 2px; right: 2px; width: auto; height: 3px; border: 0; border-radius: 3px; background: var(--accent); }
.rail-list .rail-item.drop-before::after { top: -7px; bottom: auto; }
.rail-list .rail-item.drop-after::after { top: auto; bottom: -7px; }
.rail-list.drop-end .rail-add { color: var(--accent-text); border-color: var(--accent); }
/* Nothing made yet: the + is where to start. */
.rail-add.pulse { color: var(--accent-text); border-color: var(--accent); border-style: solid; animation: rail-pulse 1.8s ease-out infinite; }
@keyframes rail-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { .rail-add.pulse { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); } }
.ai-menu.add-menu { width: 200px; padding: 6px; }
.ai-menu.add-menu .dp-item > svg { margin-left: 0; }   /* icon first, both items flush left (the AI menu puts its check at the right) */

/* ---------- topbar */
#topbar { display: flex; align-items: center; gap: 18px; padding: 0 20px; border-bottom: 1px solid var(--line); background: var(--bg); }
.top-tabs { display: flex; gap: 4px; height: 100%; }
.top-tab { border: 0; background: none; padding: 0 14px; color: var(--muted); font-weight: 500; position: relative; height: 100%; display: flex; align-items: center; gap: 8px; }
.top-tab:hover { color: var(--fg); }
.top-tab.active { color: var(--fg); }
.top-tab.active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); }
.top-tab .badge { font-size: 11px; background: var(--panel-3); color: var(--muted); padding: 1px 7px; border-radius: 999px; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.top-tab.fit-more svg { width: 14px; height: 14px; color: var(--muted); }
#topbar.fit-tight .top-tab { padding: 0 10px; }
#topbar.fit-tight .top-tab .badge, #topbar.fit-tight .ai-pill > span:not(.cc-dot), #topbar.fit-tight .rt-text { display: none; }
#topbar.fit-tight .ai-pill { padding: 8px 8px 8px 10px; }
.run-tabs { display: flex; gap: 6px; min-width: 0; max-width: calc(48 * var(--vw)); overflow-x: auto; scrollbar-width: none; }
.run-tabs::-webkit-scrollbar { display: none; }
.run-tab { flex: none; display: flex; align-items: center; gap: 8px; max-width: 260px; padding: 4px 10px 4px 8px; border-radius: 10px; border: 1px solid var(--glow-mid); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--accent) 6%, transparent)); color: var(--fg); text-align: left; box-shadow: 0 4px 16px -8px var(--glow-strong); transition: border-color .15s, background .15s, box-shadow .15s; }
.run-tab:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 20%, transparent); box-shadow: 0 6px 22px -8px var(--glow-strong); }
.run-tab.here { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.run-tab .spinner { width: 12px; height: 12px; }
.rt-text { display: grid; min-width: 0; line-height: 1.15; }
.rt-text b { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-text small { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-time { font: 500 11px/1 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
/* AI button + menu (top right) */
.ai-pill { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--box-2); color: var(--fg); font-size: 13px; font-weight: 500; white-space: nowrap; box-shadow: var(--ring); transition: border-color .15s, box-shadow .15s; }
.ai-pill:hover, .ai-pill[aria-expanded=true] { border-color: var(--glow-mid); box-shadow: var(--ring-hover); }
.ai-pill .cc-dot { background: var(--accent); }
.ai-pill svg { width: 14px; height: 14px; color: var(--muted); }
.ai-menu { position: fixed; z-index: 150; width: 330px; max-width: calc(100 * var(--vw) - 16px); background: var(--box-2); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--ring-float); padding: 12px; display: grid; gap: 10px; animation: rise .15s ease; }
.ai-menu .dp-item > svg { margin-left: auto; color: var(--accent-text); flex: none; }
.ai-menu .dp-empty { display: flex; align-items: center; gap: 8px; }
.ai-menu .dp-hint { padding: 6px 4px 0; }
.ai-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); flex: none; margin: 0 4px; }
.ai-dot.ok { background: var(--ok); box-shadow: 0 0 8px -1px var(--ok); }
.onb-ais { margin: -8px 0 16px; }
.toast.has-action { display: flex; align-items: center; gap: 12px; }
.toast .btn { flex: none; }

/* ---------- buttons & inputs */
.btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line-2); background: var(--box-2); padding: 8px 14px; border-radius: 10px; font-weight: 500; white-space: nowrap; box-shadow: var(--ring); transition: background .12s ease, border-color .12s ease, box-shadow .15s ease, opacity .12s; text-decoration: none; }
.btn:hover { background: var(--box-3); box-shadow: var(--ring-hover); }
.btn.primary { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 84%, #fff), var(--accent)); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; box-shadow: 0 0 0 1px var(--glow-mid), 0 8px 24px -10px var(--glow-strong); }
.btn.primary:hover { background: var(--accent-hover); box-shadow: 0 0 0 1px var(--glow-strong), 0 10px 30px -8px var(--glow-strong); }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.ghost:hover { background: var(--box-2); box-shadow: var(--ring); }
.btn.danger { color: var(--err); }
.btn.danger:hover { background: color-mix(in srgb, var(--err) 10%, transparent); border-color: color-mix(in srgb, var(--err) 40%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--err) 20%, transparent), 0 8px 24px -12px var(--err); }
.btn.sm { padding: 6px 11px; font-size: 13px; border-radius: 9px; }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.icon-btn { width: 32px; height: 32px; display: inline-grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--muted); }
.icon-btn:hover { background: var(--panel-3); color: var(--fg); }
.input, .select, .textarea { width: 100%; background: var(--bg); border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 12px; outline: none; transition: border-color .12s ease, box-shadow .15s ease; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); box-shadow: var(--ring-focus); }
.textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field > span { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.field .hint { font-size: 12px; color: var(--faint); }
/* Password strength (pw-meter.js): data-score 0 to 5, --pw is the bar's fill from 0 to 1. */
.pw-meter { --pw-c: var(--line-2); display: grid; gap: 6px; }
.pw-meter[data-score="0"] { display: none; }
.pw-meter[data-score="1"], .pw-meter[data-score="2"] { --pw-c: var(--err); }
.pw-meter[data-score="3"] { --pw-c: var(--warn); }
.pw-meter[data-score="4"], .pw-meter[data-score="5"] { --pw-c: var(--ok); }
.pw-bar { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.pw-bar i { display: block; height: 100%; border-radius: inherit; background: var(--pw-c); transform-origin: left; transform: scaleX(var(--pw, 0)); transition: transform .35s cubic-bezier(.2, .8, .2, 1), background-color .35s ease; }
.pw-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.pw-stars { display: inline-flex; gap: 2px; font-size: 14px; line-height: 1; }
.pw-stars b { display: inline-block; font-weight: 400; color: var(--line-2); transition: color .25s ease; }
.pw-stars b.on { color: var(--pw-c); animation: pw-pop .3s ease; }
@keyframes pw-pop { 50% { transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .pw-bar i, .pw-stars b { transition: none; animation: none; } }
.row { display: flex; gap: 8px; align-items: center; }
.spacer { flex: 1; }
/* Rows that don't fit (fit.js): labelled buttons and pickers become square icons, then items fold into a "More" menu */
.fit-out { display: none !important; }
.btn.fit-sq { font-size: 0; gap: 0; padding: 8px; }
.btn.sm.fit-sq { padding: 7px; }
.meta-chip.fit-sq { position: relative; gap: 0; padding: 7px; cursor: pointer; }
.meta-chip.fit-sq select { position: absolute; inset: 0; width: 100%; opacity: 0; }

/* ---------- pages */
.page { padding: 28px 32px 48px; max-width: 1480px; margin: 0 auto; }
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px 20px; margin-bottom: 26px; }
.page-head > :first-child { flex: 1 1 320px; min-width: 0; }
.page-head h1 { font-size: 26px; }
.page-head .sub { color: var(--muted); margin: 6px 0 0; max-width: 680px; }
.ph-actions { display: flex; gap: 8px; margin-left: auto; min-width: 0; }
.section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.section-head h2 { font-size: 15px; }
.section-head .count { color: var(--faint); font-size: 13px; }
.proj-usage { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.proj-usage[hidden] { display: none; }
.proj-usage i { width: 90px; height: 6px; border-radius: 999px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.proj-usage b { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.proj-usage.full { color: var(--warn); }
.proj-usage.full b { background: var(--warn); }

.project-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.ph-left { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1 1 360px; }
.ph-badge { width: 56px; height: 56px; display: grid; place-items: center; flex: none; }
.ph-badge .folder-art { width: 56px; height: 56px; filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--c) 45%, transparent)); }
.ph-left h1 { font-size: 24px; }
.ph-meta { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.meta-chip { display: inline-flex; align-items: center; gap: 7px; max-width: min(460px, 100%); background: var(--box); box-shadow: var(--ring); border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 4px 12px 4px 10px; font-size: 12.5px; }
.meta-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.meta-chip:hover { color: var(--fg); border-color: var(--line-2); }
.meta-chip select { background: transparent; border: 0; color: var(--fg); outline: none; font-size: 12.5px; padding: 0; cursor: pointer; }
.meta-chip select option { background: var(--panel); }

.project-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
@media (max-width: 1100px) { .project-layout { grid-template-columns: minmax(0, 1fr); } }

.deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 18px; }
.deck-card { background: var(--box); box-shadow: var(--ring); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; cursor: pointer; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.deck-card:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--ring-hover); }
.deck-thumb { aspect-ratio: 16 / 9; position: relative; background: var(--rail); border-bottom: 1px solid var(--line); }
.deck-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.deck-info { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 10px 11px 14px; }
.deck-info h3 { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-info .when { font-size: 12px; color: var(--faint); }
.deck-info > div:first-child { min-width: 0; }
.card-menu { display: flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.deck-card:hover .card-menu, .deck-card:focus-within .card-menu { opacity: 1; }
.new-card { border: 1.5px dashed var(--line-2); background: transparent; border-radius: 14px; transition: border-color .15s, background .15s, box-shadow .15s; min-height: 200px; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--muted); text-align: center; padding: 20px; }
.new-card:hover { border-color: var(--accent); color: var(--fg); background: var(--accent-soft); box-shadow: var(--ring-hover); }
.new-card .plus { width: 44px; height: 44px; border-radius: 12px; background: var(--box-2); box-shadow: var(--ring); display: grid; place-items: center; }
.new-card small { color: var(--faint); max-width: 220px; }
.pc-cover { position: absolute; inset: 0; display: grid; place-items: center; background: var(--rail); }
.pc-cover .folder-art { width: 46%; height: auto; filter: drop-shadow(0 10px 18px color-mix(in srgb, var(--c) 40%, transparent)); transition: transform .15s ease; }
.project-card:hover .pc-cover .folder-art { transform: translateY(-2px) scale(1.03); }
/* Projects on the overview are square tiles, two to a row at the narrowest */
.deck-grid:has(> .project-card) { grid-template-columns: repeat(auto-fill, minmax(min(180px, 42%), 1fr)); gap: 14px; }
.project-card { aspect-ratio: 1; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.project-card .deck-thumb { aspect-ratio: auto; }
.project-card .deck-info { padding: 9px 12px 11px; }
.project-card .when { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.deck-grid:has(> .project-card) > .new-card { aspect-ratio: 1; min-height: 0; padding: 12px; }
/* Preview placeholders: a box whose iframe hasn't gone in yet (.frame-slot, see mountFrames in app.js) or hasn't loaded
   shows a sketch of a slide with a light sweeping over it, and the preview fades in over it once loaded (.ready). */
:is(.deck-thumb, .design-visual, .thumb-frame) iframe:not(.ready) { opacity: 0; }
:is(.deck-thumb, .design-visual, .thumb-frame) iframe.ready { animation: frame-in .25s ease; }
@keyframes frame-in { from { opacity: 0; } }
.frame-slot { display: none; }
.deck-thumb { overflow: hidden; }
:is(.deck-thumb:not(:has(> .pc-cover)), .design-visual, .thumb-frame):has(> .frame-slot, > iframe:not(.ready))::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; --sk: color-mix(in srgb, var(--fg) 9%, transparent);
  background: linear-gradient(var(--sk) 0 0) 9% 30% / 44% 10% no-repeat, linear-gradient(var(--sk) 0 0) 9% 52% / 64% 5% no-repeat,
    linear-gradient(var(--sk) 0 0) 9% 63% / 52% 5% no-repeat, linear-gradient(var(--sk) 0 0) 9% 74% / 58% 5% no-repeat;
}
:is(.deck-thumb:not(:has(> .pc-cover)), .design-visual, .thumb-frame):has(> .frame-slot, > iframe:not(.ready))::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 25%, color-mix(in srgb, var(--fg) 7%, transparent) 50%, transparent 75%);
  animation: frame-sweep 1.4s ease-in-out infinite;
}
@keyframes frame-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.sk-card { pointer-events: none; }
.sk-text { display: block; height: 10px; width: 60%; border-radius: 5px; background: color-mix(in srgb, var(--fg) 9%, transparent); }
.deck-info .sk-text.when { width: 40%; height: 8px; margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { :is(.deck-thumb, .design-visual, .thumb-frame)::after { display: none !important; } }

.files-panel { background: var(--box); box-shadow: var(--ring); border: 1px solid var(--line); border-radius: 14px; padding: 16px; position: sticky; top: 0; }
.files-panel .section-head { margin-bottom: 10px; justify-content: space-between; }
.files-panel .files-source { display: flex; width: 100%; max-width: 100%; margin-bottom: 10px; cursor: pointer; }
.files-panel .files-source svg { flex: none; width: 14px; height: 14px; }
.file-list { max-height: max(220px, calc(100 * var(--vh) - 330px)); overflow: auto; margin: 10px -8px 0; }
.file-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 7px; font-size: 12.5px; color: var(--muted); }
.file-row:hover { background: var(--panel-2); color: var(--fg); }
.file-row .fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; direction: rtl; text-align: left; }
.file-row .fsize { color: var(--faint); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.file-ext { font: 600 9.5px/1 var(--mono); text-transform: uppercase; padding: 3px 4px; border-radius: 4px; background: var(--panel-3); color: var(--muted); min-width: 34px; text-align: center; }
.files-panel .hint { font-size: 12px; color: var(--faint); margin: 12px 0 0; }
.empty-files { color: var(--faint); font-size: 13px; padding: 16px 8px; text-align: center; }

.empty { display: grid; place-items: center; text-align: center; padding: 80px 20px; color: var(--muted); }
.empty h2 { color: var(--fg); font-size: 22px; margin-bottom: 8px; }
.empty p { max-width: 520px; margin: 0 auto 20px; }

/* ---------- deck editor */
/* Only .editor itself reads these two, so they don't inherit: dragging a panel edge then restyles one element per
   move, not everything inside the editor. */
@property --ed-left { syntax: "<length>"; inherits: false; initial-value: 196px; }
@property --ed-right { syntax: "<length>"; inherits: false; initial-value: 420px; }
.editor { display: grid; grid-template-columns: min(var(--ed-left, 196px), 40%) minmax(0, 1fr) min(var(--ed-right, 420px), 50%); height: 100%; min-height: 0; }
/* Resizable, collapsible panels (app.js sets --ed-left / --ed-right / --ed-top; 0 when collapsed). Fixed grid cells,
   so a hidden panel doesn't shift the others. */
.editor > .ed-slides { grid-column: 1; grid-row: 1; }
.editor > .ed-center { grid-column: 2; grid-row: 1; position: relative; }
.editor > .ed-claude { grid-column: 3; grid-row: 1; }
.ed-center > .ed-toolbar { grid-row: 1; }
.ed-center > .stage { grid-row: 2; }
.ed-center > .stage-nav { grid-row: 3; }
.ed-center > .ed-notes { grid-row: 4; }
.editor.left-off > .ed-slides, .editor.right-off > .ed-claude, .editor.top-off .ed-toolbar { display: none; }
.editor.resizing { user-select: none; -webkit-user-select: none; }
.editor.resizing iframe { pointer-events: none; }
.editor.resizing > .ed-slides, .editor.resizing > .ed-claude, .editor.resizing-top .ed-toolbar { overflow: hidden; }
.editor.will-collapse.resizing-left > .ed-slides, .editor.will-collapse.resizing-right > .ed-claude, .editor.will-collapse.resizing-top .ed-toolbar { opacity: .35; }
.ed-grip { position: absolute; z-index: 6; touch-action: none; }
.ed-grip[data-grip=left] { left: -4px; top: 0; bottom: 0; width: 8px; cursor: col-resize; }
.ed-grip[data-grip=right] { right: -4px; top: 0; bottom: 0; width: 8px; cursor: col-resize; }
.ed-grip[data-grip=top] { left: 0; right: 0; top: calc(var(--ed-top, 56px) - 4px); height: 8px; cursor: row-resize; }
.ed-grip::after { content: ""; position: absolute; background: var(--accent); opacity: 0; transition: opacity .12s ease; box-shadow: 0 0 10px var(--glow-mid); }
.ed-grip[data-grip=left]::after, .ed-grip[data-grip=right]::after { top: 0; bottom: 0; left: 3px; width: 2px; }
.ed-grip[data-grip=top]::after { left: 0; right: 0; top: 3px; height: 2px; }
.ed-grip:hover::after { opacity: .7; transition-delay: .15s; }
.editor.resizing-left .ed-grip[data-grip=left]::after, .editor.resizing-right .ed-grip[data-grip=right]::after, .editor.resizing-top .ed-grip[data-grip=top]::after { opacity: 1; transition-delay: 0s; }
.editor.left-off .ed-grip[data-grip=left], .editor.right-off .ed-grip[data-grip=right], .editor.top-off .ed-grip[data-grip=top] { display: none; }
.ed-pop { position: absolute; z-index: 6; display: none; place-items: center; padding: 0; border: 1px solid var(--line-2); background: var(--panel-3); color: var(--muted); box-shadow: 0 4px 14px var(--shadow); transition: background .12s ease, color .12s ease; }
.ed-pop:hover { background: var(--accent-soft); color: var(--fg); border-color: var(--accent); }
.ed-pop svg { width: 14px; height: 14px; }
.ed-pop[data-pop=left] { left: 0; top: 50%; transform: translateY(-50%); width: 20px; height: 52px; border-left: 0; border-radius: 0 9px 9px 0; }
.ed-pop[data-pop=right] { right: 0; top: 50%; transform: translateY(-50%); width: 20px; height: 52px; border-right: 0; border-radius: 9px 0 0 9px; }
.ed-pop[data-pop=top] { top: 0; left: 50%; transform: translateX(-50%); width: 52px; height: 20px; border-top: 0; border-radius: 0 0 9px 9px; }
.editor.left-off .ed-pop[data-pop=left], .editor.right-off .ed-pop[data-pop=right], .editor.top-off .ed-pop[data-pop=top] { display: grid; }
.ed-slides { border-right: 1px solid var(--line); overflow-y: auto; padding: 12px 12px 24px; background: var(--rail); }
/* The heading and its + stay at the top while the slide list scrolls under them */
.ed-slides-head { position: sticky; top: -12px; z-index: 3; margin: -12px -12px 6px; padding: 12px 12px 8px 14px; background: var(--rail); box-shadow: 0 1px 0 var(--line); font-size: 12px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; display: flex; justify-content: space-between; align-items: center; }
.ed-slides-tools { display: flex; align-items: center; gap: 4px; }
.ed-slides-tools .icon-btn { width: 26px; height: 26px; }
/* + (new slide): a square version of the editor toolbar's buttons. */
.ed-slides-tools .btn[data-act=add-slide] { width: 30px; height: 30px; padding: 0; justify-content: center; flex: none; color: var(--fg); }
.ed-slides-tools .btn[data-act=add-slide] svg { display: block; flex: none; }
.slide-menu, .fit-menu { position: fixed; z-index: 150; min-width: 180px; display: grid; gap: 2px; padding: 4px; background: var(--box-2); border: 1px solid var(--line-2); border-radius: 11px; box-shadow: var(--ring-float); animation: rise .12s ease; }
.fit-menu { max-width: calc(100 * var(--vw) - 16px); overflow-y: auto; align-content: start; }
.fit-menu .dp-item svg { flex: none; color: var(--muted); }
.slide-menu .dp-item:disabled, .fit-menu .dp-item:disabled { opacity: .4; cursor: not-allowed; background: none; }
/* A design's background drawn at slide scale (bgArt). */
.bg-art { display: block; width: 100%; height: 100%; }
/* A design's Dark / Light flag, in the corner of its picture. */
.scheme-tag { position: absolute; top: 6px; right: 6px; z-index: 1; padding: 2px 7px; border-radius: 999px; font: 600 10.5px/1.4 system-ui, sans-serif; font-style: normal; letter-spacing: .02em; pointer-events: none; }
.scheme-tag.dark { background: rgba(10,10,14,.82); color: #f4f4f6; box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.scheme-tag.light { background: rgba(255,255,255,.9); color: #18181d; box-shadow: 0 0 0 1px rgba(0,0,0,.14); }
.design-visual .scheme-tag { top: 10px; right: 10px; }
.slide-menu .dp-item small, .fit-menu .dp-item small { margin-left: auto; padding-left: 16px; color: var(--faint); font-size: 11px; }
.slide-menu .dp-item.danger:not(:disabled):hover { background: color-mix(in srgb, var(--err) 16%, transparent); color: var(--err); }
/* The + menu: each layout as a small wireframe beside its name */
.ns-menu { width: 300px; max-width: calc(100 * var(--vw) - 16px); overflow-y: auto; align-content: start; }
.ns-menu .dp-item { padding: 6px 8px; }
.ns-menu .dp-name small { margin: 0; padding: 0; font-size: 11.5px; line-height: 1.35; }
.ns-pic { width: 64px; flex: none; }
.ns-pic .sd-icon, .ns-pic .sd-sketch { border-radius: 5px; }
.ns-pic .sd-icon:not(.sd-bg) svg { width: 16px; height: 16px; }
.ns-head { padding: 8px 9px 3px; font-size: 11px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.ns-sep { height: 1px; margin: 3px 6px; background: var(--line); }
.ns-saved { display: grid; gap: 2px; }
.ns-saved:empty { display: none; }
.ns-row { position: relative; display: grid; }
.ns-row .dp-item { padding-right: 38px; }
.ns-del { position: absolute; top: 50%; right: 6px; translate: 0 -50%; opacity: 0; background: var(--panel-2); }
.ns-row:hover .ns-del, .ns-del:focus-visible { opacity: 1; }
.thumbs { display: grid; gap: 10px; }
.thumb { display: grid; grid-template-columns: 16px 1fr; gap: 6px; align-items: start; border: 0; background: none; padding: 0; text-align: left; color: var(--faint); }
.thumb-num { font-size: 11px; font-variant-numeric: tabular-nums; padding-top: 2px; text-align: right; }
.thumb-frame { aspect-ratio: 16 / 9; border-radius: 7px; overflow: hidden; border: 2px solid var(--line); position: relative; background: var(--rail); transition: border-color .12s ease; }
.thumb-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.thumb:hover .thumb-frame { border-color: var(--line-2); }
.thumb.active { color: var(--fg); }
.thumb.active .thumb-frame { border-color: var(--accent); }
.thumb, .thumb-part { position: relative; }
.thumb.dragging { opacity: .4; }
.thumb.drop-before::before, .thumb.drop-after::after, .thumb-part.drop-before::before { content: ""; position: absolute; left: 22px; right: 0; height: 3px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 10px var(--glow-mid); pointer-events: none; }
.thumb.drop-before::before, .thumb-part.drop-before::before { top: -7px; }
.thumb.drop-after::after { bottom: -7px; }
.thumb-title { grid-column: 2; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: -2px; }

/* Slides the AI has locked while it works: a moving rainbow ring and glow around the thumbnail and the stage
   (.ai-ring and .ai-glow, two empty elements behind the iframe, see app.js). The frame stops clipping so the glow
   can show outside it; the iframe keeps the rounded corners. The colours are a strip three frames wide that slides
   inside each of them: a transform, which the browser animates without redrawing anything (a moving background
   would be painted, and its blur worked out, again on every frame for every locked slide). */
@keyframes ai-rainbow { to { transform: translateX(calc(-200% / 3)); } }
.thumb.ai-locked .thumb-frame, .stage-frame.ai-locked { overflow: visible; isolation: isolate; }
.thumb.ai-locked .thumb-frame iframe, .stage-frame.ai-locked iframe { border-radius: inherit; }
.ai-ring, .ai-glow { display: none; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none; }
.thumb.ai-locked .ai-ring, .thumb.ai-locked .ai-glow, .stage-frame.ai-locked > .ai-ring, .stage-frame.ai-locked > .ai-glow { display: block; }
.ai-ring::before, .ai-glow::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 300%;
  background: linear-gradient(90deg, #ff5f6d, #ffb347, #f9f871, #4ade80, #22d3ee, #818cf8, #e879f9, #ff5f6d) 0 0 / calc(200% / 3) 100%;
  animation: ai-rainbow 4s linear infinite;
}
.thumb-frame > .ai-glow { inset: -3px; filter: blur(6px); opacity: .75; }
.stage-frame > .ai-ring { inset: -3px; }
.stage-frame > .ai-glow { inset: -8px; filter: blur(22px); opacity: .7; }
@media (prefers-reduced-motion: reduce) { .ai-ring::before, .ai-glow::before { animation: none; } }
.cc-lock { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.cc-lock svg { flex: none; width: 14px; height: 14px; color: #e879f9; }

.ed-center { display: grid; grid-template-rows: var(--ed-top, 56px) minmax(0, 1fr) 48px auto; grid-template-columns: minmax(0, 1fr); min-width: 0; min-height: 0; }
.ed-toolbar { display: flex; align-items: center; gap: 8px; padding: 0 14px; border-bottom: 1px solid var(--line); min-width: 0; }
.ed-title { min-width: 0; }
.ed-title .crumb { font-size: 11.5px; color: var(--faint); }
.ed-title h2 { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage { position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; background-color: var(--rail); background-image: radial-gradient(color-mix(in srgb, var(--fg) 7%, transparent) 1px, transparent 1px), radial-gradient(70% 60% at 50% 45%, var(--glow-soft), transparent 75%); background-size: 18px 18px, 100% 100%; }
.stage-frame { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 20px 60px var(--shadow), 0 0 0 1px var(--glow-soft), 0 0 70px -20px var(--glow-mid); background: var(--rail); }
.stage-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.stage-frame:fullscreen { width: calc(100 * var(--vw)) !important; height: calc(100 * var(--vh)) !important; border-radius: 0; }
/* Presenter view, while presenting: in the bottom right corner, shown when the mouse is over it. */
.pv-presenter { position: absolute; right: 18px; bottom: 18px; z-index: 2; display: none; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: rgba(12,12,16,.78); color: #f4f4f6; font: 600 13px/1 Inter, system-ui, sans-serif; opacity: 0; transition: opacity .18s ease; backdrop-filter: blur(8px); }
.stage-frame:fullscreen .pv-presenter { display: inline-flex; }
.pv-presenter:hover, .pv-presenter:focus-visible { opacity: 1; }
/* The first time you present: asks about presenter view, over the corner button. */
.pv-tip { position: absolute; right: 18px; bottom: 18px; z-index: 3; display: grid; gap: 6px; width: 270px; padding: 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; background: rgba(12,12,16,.86); color: #f4f4f6; font: 13px/1.4 Inter, system-ui, sans-serif; box-shadow: 0 16px 40px rgba(0,0,0,.45); backdrop-filter: blur(8px); animation: rise .18s ease; }
.pv-tip[hidden], .stage-frame:not(:fullscreen) .pv-tip { display: none; }
.pv-tip b { font-size: 14px; }
.pv-tip span { color: rgba(244,244,246,.7); }
.pv-tip .row { justify-content: flex-end; gap: 8px; margin-top: 6px; }
.pv-tip .btn.ghost { color: #f4f4f6; }
.stage-busy { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: none; align-items: center; gap: 8px; font-size: 12.5px; background: color-mix(in srgb, var(--bg) 85%, transparent); border: 1px solid var(--line-2); box-shadow: var(--ring); padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(8px); z-index: 2; }
.stage-busy.on { display: flex; }
/* Slide zoom (deck editor): a zoomed slide scrolls inside the stage. */
.stage-scroll { position: absolute; inset: 0; display: grid; place-items: safe center; overflow: hidden; }
.stage-scroll.zoomed { overflow: auto; }
.stage-scroll::-webkit-scrollbar-corner { background: transparent; }
.stage-scroll.zoomed .stage-frame { margin: 28px; }
.stage-zoom { position: absolute; left: 12px; display: flex; align-items: center; gap: 2px; }
.stage-zoom .zoom-pct { min-width: 50px; padding: 4px 6px; border: 0; border-radius: 6px; background: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.stage-zoom .zoom-pct:hover { background: var(--panel-2); color: var(--fg); }
.stage-nav { display: flex; align-items: center; justify-content: center; gap: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; position: relative; }
@media (max-width: 1500px) { .mode-seg button { padding: 5px 8px; } .ed-title .crumb { display: none; } }
/* Icon-only toolbar buttons: the name and what it does show on hover. */
.tb-icon { position: relative; }
.ed-toolbar .btn.tb-icon { padding: 7px 9px; }
.tb-tip { position: absolute; top: calc(100% + 9px); left: 50%; z-index: 60; display: grid; gap: 2px; width: max-content; max-width: 230px; padding: 7px 10px; border-radius: 8px; background: var(--fg); color: var(--bg); font-size: 11.5px; font-weight: 400; line-height: 1.35; text-align: left; white-space: normal; pointer-events: none; opacity: 0; transform: translate(-50%, -4px); transition: opacity .12s ease, transform .12s ease; box-shadow: 0 6px 20px var(--shadow); }
.tb-tip b { font-size: 12.5px; font-weight: 600; }
.tb-icon:hover .tb-tip, .tb-icon:focus-visible .tb-tip { opacity: 1; transform: translate(-50%, 0); transition-delay: .12s; }
.ed-toolbar .btn.active { border-color: var(--accent); background: var(--accent-soft); color: var(--fg); }
/* A narrow toolbar folds its least-used buttons into a "More" menu (fit.js); the title keeps a little room. */
.ed-toolbar .ed-title { min-width: 64px; }
/* Speaker notes for the slide in view, under the stage */
.ed-notes { display: grid; gap: 6px; padding: 8px 14px 12px; border-top: 1px solid var(--line); background: var(--panel); }
.ed-notes[hidden] { display: none; }
.ed-notes-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); min-width: 0; }
.ed-notes-head b { color: var(--fg); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.ed-notes-head #notes-slide { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ed-notes-state { font-size: 12px; color: var(--faint); white-space: nowrap; }
.ed-notes-head .icon-btn { width: 26px; height: 26px; }
.ed-notes .textarea { height: 130px; min-height: 60px; max-height: calc(45 * var(--vh)); font-size: 14px; }

/* ---------- Claude Code panel */
.ed-claude, .de-claude { border-left: 1px solid var(--line); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); min-height: 0; background: var(--box-side); }
.cc-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--line); min-height: 56px; }
.cc-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cc-title b { font-weight: 600; }
.cc-sub { color: var(--faint); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
/* Busy: a ring grows out of the dot and fades (a disc behind it that scales, so nothing is repainted while it runs). */
.cc-dot.busy { position: relative; background: var(--accent); }
.cc-dot.busy::before, .cc-dot.busy::after { content: ""; position: absolute; inset: 0; border-radius: 50%; }
.cc-dot.busy::before { background: var(--glow-strong); animation: pulse 1.4s infinite; }
.cc-dot.busy::after { background: var(--accent); }
@keyframes pulse { 0% { transform: scale(1); opacity: 1; } 70%, 100% { transform: scale(3); opacity: 0; } }
.cc-head-actions { margin-left: auto; display: flex; gap: 2px; }
.ed-claude { position: relative; }
.cc-title b { white-space: nowrap; }
.cc-design { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 190px; border: 1px solid var(--line-2); background: var(--bg); color: var(--muted); border-radius: 999px; padding: 4px 8px 4px 9px; font-size: 12.5px; }
.cc-design:hover { color: var(--fg); border-color: var(--accent); box-shadow: var(--ring-hover); }
.cc-design-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-design svg { width: 13px; height: 13px; flex: none; }
.cc-design-dots, .dp-dots, .deck-design { display: inline-flex; align-items: center; }
.cc-design-dots i, .dp-dots i, .deck-design i { width: 9px; height: 9px; border-radius: 50%; margin-left: -3px; box-shadow: 0 0 0 1.5px var(--panel); display: inline-block; }
.cc-design-dots i:first-child, .dp-dots i:first-child, .deck-design i:first-child { margin-left: 0; }
.deck-design { gap: 0; color: var(--muted); }
.deck-design i:last-of-type { margin-right: 6px; }
.design-pop { position: absolute; top: 52px; left: 12px; right: 12px; z-index: 20; max-height: calc(100% - 64px); overflow-y: auto; background: var(--box-2); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--ring-float); padding: 12px; display: grid; gap: 10px; animation: rise .15s ease; }
.dp-head { display: grid; gap: 3px; }
.dp-head b { font-size: 13.5px; }
.dp-head span, .dp-hint { font-size: 12px; color: var(--faint); }
.dp-hint { margin: 0; line-height: 1.45; }
.dp-hint b { color: var(--muted); font-weight: 600; }
.dp-list { display: grid; gap: 2px; max-height: 300px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.dp-item { display: flex; align-items: center; gap: 10px; border: 1px solid transparent; background: none; border-radius: 9px; padding: 7px 9px; text-align: left; color: var(--fg); font-size: 13px; }
.dp-item:hover { background: var(--panel-3); }
.dp-item.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 18px -6px var(--glow-strong); }
.dp-item .dp-dots { width: 34px; flex: none; }
.dp-name { display: grid; min-width: 0; }
.dp-name small { color: var(--faint); font-size: 11.5px; }
.dp-empty { color: var(--faint); font-size: 12.5px; padding: 8px; }
/* The remake buttons stack, full width, and their labels wrap rather than push the popover off screen */
.design-pop > * { min-width: 0; }
/* The design picker in the deck editor's toolbar: the button and its menu under it. */
.ed-toolbar .btn.tb-design { max-width: 210px; border-radius: 9px; padding: 6px 10px; font-size: 13px; color: var(--fg); background: var(--box-2); }
.ed-toolbar .btn.tb-design svg { width: 15px; height: 15px; flex: none; }
.ed-toolbar .btn.tb-design.fit-sq .cc-design-name, .ed-toolbar .btn.tb-design.fit-sq svg:last-child { display: none; }
.design-pop.floating { position: fixed; right: auto; z-index: 150; width: min(340px, calc(100 * var(--vw) - 16px)); }
.dp-foot { display: grid; gap: 6px; }
.dp-foot .btn { justify-content: center; min-width: 0; white-space: normal; text-align: center; }
.dp-foot .btn svg { flex: none; }
.cc-log { overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; }
.cc-empty { color: var(--faint); font-size: 13px; text-align: center; margin: auto 0; padding: 20px; }
.cc-empty b { display: block; color: var(--muted); font-size: 14px; margin-bottom: 6px; }
.cc-signin { display: grid; gap: 6px; text-align: center; margin: auto 0; padding: 16px; border-radius: 12px; background: var(--box-2); box-shadow: var(--ring); color: var(--faint); font-size: 13px; }
.cc-signin b { color: var(--fg); font-size: 14px; }
.cc-signin-ais { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 6px; }
.cc-signin .onb-wait { justify-content: center; margin-top: 4px; }
.cc-signin-code { margin-top: 6px; }
.cc-signin-code .input { flex: 1; min-width: 0; }
.cc-user { align-self: flex-end; max-width: 92%; background: var(--box-3); box-shadow: var(--ring); border-radius: 14px 14px 4px 14px; padding: 9px 13px; white-space: pre-wrap; word-wrap: break-word; }
.cc-user .scope { display: block; font-size: 11px; font-weight: 600; color: var(--accent-text); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px; }
.cc-sys { font-size: 11.5px; color: var(--faint); font-family: var(--mono); text-align: center; }
.cc-text { line-height: 1.55; word-wrap: break-word; }
.cc-text p { margin: 0 0 8px; }
.cc-text p:last-child { margin-bottom: 0; }
.cc-text ul, .cc-text ol { margin: 4px 0 8px; padding-left: 20px; }
.cc-text li { margin: 2px 0; }
.cc-text h4 { font-size: 13.5px; margin: 10px 0 4px; }
.cc-text code { font-family: var(--mono); font-size: 12px; background: var(--panel-3); padding: 1px 5px; border-radius: 5px; }
.cc-text pre { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px; overflow-x: auto; margin: 6px 0; }
.cc-text pre code { background: none; padding: 0; }
.cc-tool { display: flex; align-items: center; gap: 8px; font: 12px/1.35 var(--mono); color: var(--muted); padding: 6px 10px; background: var(--box-2); border: 1px solid var(--line); border-radius: 8px; min-width: 0; }
.cc-tool .tname { color: var(--fg); font-weight: 500; flex: none; }
.cc-tool .targ { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-tool.err { border-color: color-mix(in srgb, var(--err) 35%, transparent); color: var(--err); white-space: pre-wrap; }
.cc-tool svg { color: var(--faint); }
.cc-result { font-size: 12px; color: var(--ok); display: flex; align-items: center; gap: 6px; }
.cc-result.bad { color: var(--err); }
.cc-divider { height: 1px; background: var(--line); margin: 6px 0; }
.cc-working { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--accent); animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.cc-compose { border-top: 1px solid var(--line); padding: 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.seg { display: inline-flex; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: none; padding: 5px 11px; border-radius: 7px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.seg button.active { background: var(--box-3); color: var(--fg); box-shadow: 0 0 14px -5px var(--glow-mid); }
.seg .scope-num { color: var(--accent-text); font-variant-numeric: tabular-nums; }
.cc-pickers { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-pickers .meta-chip { cursor: pointer; }
.cc-pickers .meta-chip:hover { color: var(--fg); border-color: var(--line-2); }
.cc-pickers .meta-chip svg { width: 13px; height: 13px; flex: none; }
.cc-compose.drop { outline: 2px dashed var(--accent); outline-offset: -6px; background: var(--accent-soft); }
.cc-attachments { display: flex; gap: 8px; flex-wrap: wrap; }
.att { position: relative; width: 64px; height: 64px; border-radius: 9px; overflow: hidden; border: 1px solid var(--line-2); background: var(--bg); }
.att img { width: 100%; height: 100%; object-fit: cover; display: block; }
.att button { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.7); color: #fff; padding: 0; }
.att button svg { width: 12px; height: 12px; }
.att-doc { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 6px 4px; }
.att-doc small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; color: var(--muted); }
.att button:hover { background: var(--err); }
.sel-chip { display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 10px; border-radius: 10px; background: color-mix(in srgb, var(--accent-2) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent-2) 35%, transparent); color: var(--accent-2-text); box-shadow: 0 0 18px -8px var(--accent-2); font-size: 12.5px; min-width: 0; }
.sel-chip .sel-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-chip .sel-icon { display: grid; color: var(--accent-2); }
.sel-chip .icon-btn { width: 24px; height: 24px; color: var(--accent-2-text); }
.seg [data-m=selection].active { background: color-mix(in srgb, var(--accent-2) 18%, transparent); color: var(--accent-2-text); }
.cc-user-imgs { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 6px; }
.cc-user-imgs img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; display: block; border: 1px solid var(--line-2); }
.cc-user-files { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 6px; white-space: normal; }
.cc-user-files .file-chip { padding: 3px 9px 3px 7px; font-size: 12px; }
.cc-user-files .file-chip svg { width: 13px; height: 13px; flex: none; color: var(--faint); }
.cc-user-files bdi { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* New presentation: slide amount (min / max) */
/* New presentation: reference documents and included images */
.pick-files { display: grid; gap: 8px; justify-items: start; padding: 10px; border: 1px dashed var(--line-2); border-radius: 12px; transition: border-color .12s ease, background .12s ease; }
.pick-files.drag { border-color: var(--accent); background: var(--accent-soft); }
.pick-list { display: grid; gap: 4px; width: 100%; }
.pick-list:empty { display: none; }
.file-chip { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; padding: 4px 4px 4px 8px; border-radius: 8px; background: var(--box); box-shadow: var(--ring); font-size: 12.5px; color: var(--muted); }
.file-chip .fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.file-chip .fsize { color: var(--faint); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.file-chip .icon-btn { width: 24px; height: 24px; flex: none; }
.file-chip .icon-btn svg { width: 13px; height: 13px; }
.mode-seg button { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mode-seg button svg { width: 14px; height: 14px; }
.mode-seg button.active { background: var(--accent-soft); color: var(--fg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 14px -4px var(--glow-mid); }
.mode-seg button[data-mode=area].active { background: color-mix(in srgb, var(--accent-2) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-2) 45%, transparent), 0 0 14px -4px color-mix(in srgb, var(--accent-2) 50%, transparent); }
.icon-btn:disabled { opacity: .35; cursor: not-allowed; background: none; }
.cc-compose textarea { width: 100%; min-height: 76px; max-height: calc(50 * var(--vh)); resize: none; background: var(--bg); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; outline: none; line-height: 1.5; }
.cc-compose textarea:focus { border-color: var(--accent); box-shadow: var(--ring-focus); }
.compose-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.compose-foot > .row:first-child { min-width: 0; }
.compose-foot .cc-hint { font-size: 12px; color: var(--faint); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Voice input: the mic next to Send, and its timer (micInput in app.js) */
.mic-btn.rec { color: var(--err); background: color-mix(in srgb, var(--err) 14%, transparent); animation: mic-pulse 1.4s infinite; }
@keyframes mic-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--err) 45%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.mic-clock { font: 12px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.mic-clock.rec { color: var(--err); }
.mic-clock.rec::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--err); margin-right: 6px; vertical-align: 1px; }

/* ---------- designs */
.design-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 18px; }
.design-card { background: var(--box); box-shadow: var(--ring); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.design-card:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--ring-hover); }
.design-visual { aspect-ratio: 16 / 9; position: relative; overflow: hidden; cursor: pointer; border-bottom: 1px solid var(--line); background: var(--rail); }
.design-visual iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.swatch-art { position: absolute; inset: 0; padding: 22px 24px; display: flex; flex-direction: column; justify-content: space-between; }
.swatch-art > .swatch-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.swatch-art > div { position: relative; }
.swatch-art .aa { font-size: 64px; line-height: 1; font-weight: 700; letter-spacing: -0.03em; }
.swatch-art .bar { width: 64px; height: 6px; border-radius: 6px; margin-top: 12px; }
.swatch-art .dots { display: flex; gap: 6px; }
.swatch-art .dots i { width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(128,128,128,.35); }
.swatch-art .font { font-size: 12px; opacity: .7; }
.design-info { padding: 14px 16px 16px; display: grid; gap: 8px; }
.design-info h3 { font-size: 15px; }
.used { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--faint); align-items: center; }
.used .tag { display: inline-flex; align-items: center; gap: 5px; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); padding: 2px 8px; border-radius: 999px; }
.used .tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.design-actions { display: flex; gap: 6px; align-items: center; margin-top: 4px; }

.design-editor { display: grid; grid-template-columns: minmax(0, 1fr) 460px; height: 100%; min-height: 0; }
.de-main { display: grid; grid-template-rows: 56px auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); min-width: 0; min-height: 0; }
.name-input { background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 5px 8px; font-size: 15px; font-weight: 600; min-width: 120px; width: 280px; outline: none; }
.name-input:hover { border-color: var(--line); }
.name-input:focus { border-color: var(--accent); background: var(--bg); }
.save-state { font-size: 12px; color: var(--faint); white-space: nowrap; }
.save-state.dirty { color: var(--warn); }
.de-main > .ed-toolbar { grid-row: 1; }
.de-main > .disk-banner { grid-row: 2; }
.md-editor { grid-row: 3; width: 100%; height: 100%; resize: none; border: 0; outline: none; background: var(--bg); padding: 22px 28px 60px; font: 13.5px/1.65 var(--mono); color: color-mix(in srgb, var(--fg) 88%, var(--bg)); tab-size: 2; }
.disk-banner { display: none; align-items: center; gap: 10px; padding: 8px 14px; background: color-mix(in srgb, var(--warn) 10%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); color: var(--warn); font-size: 13px; }
.disk-banner.on { display: flex; }
.de-side { display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); min-height: 0; border-left: 1px solid var(--line); background: var(--box-side); }
.de-preview { padding: 12px; border-bottom: 1px solid var(--line); }
.de-preview-frame { aspect-ratio: 16 / 9; position: relative; border-radius: 10px; overflow: hidden; background: var(--rail); border: 1px solid var(--line); }
.de-preview-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.de-preview-rebuild { position: absolute; right: 8px; bottom: 8px; }
.de-preview-empty { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 10px; color: var(--muted); font-size: 13px; text-align: center; padding: 20px; }
.de-claude { border-left: 0; background: transparent; }
.ia-body { grid-row: 3; position: relative; min-height: 0; display: grid; }
.ia-body > .stage, .ia-body > .ia-code { grid-area: 1 / 1; min-height: 0; }
.ia-desc { padding: 12px 14px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.ia-desc .textarea { min-height: 64px; font-size: 13px; }
.ia-desc .hint { margin: 0; font-size: 12px; color: var(--faint); line-height: 1.45; }
.de-side:has(.ia-desc) { grid-template-rows: auto minmax(0, 1fr); }

/* ---------- modal & toast */
#modal-root:empty { display: none; }
.modal-backdrop { position: fixed; inset: 0; background: color-mix(in srgb, var(--rail) 70%, transparent); backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 200; padding: 20px; animation: fade .15s ease; }
.modal { width: min(560px, 100%); max-height: calc(100 * var(--vh) - 40px); overflow: auto; background: var(--box); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: var(--ring-float); animation: rise .18s ease; }
.modal-head { padding: 18px 52px 4px 20px; }
.modal-head h2 { font-size: 17px; }
.modal-aside { float: right; margin-left: 12px; font-size: 12px; line-height: 22px; color: var(--faint); font-variant-numeric: tabular-nums; }
.modal-head p { color: var(--muted); margin: 6px 0 0; font-size: 13px; }
.modal-body { padding: 16px 20px 6px; }
.modal-foot { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding: 10px 20px 18px; align-items: center; }
.modal-foot .left { margin-right: auto; }
/* The close button at the top right of every popup: dialogs, the AI setup screen and the guide. */
.modal, .onb-card { position: relative; }
.pop-x { position: absolute; top: 10px; right: 10px; z-index: 1; }
.guide-card .pop-x { top: 6px; right: 6px; width: 28px; height: 28px; }
.export-status { display: flex; align-items: center; gap: 10px; padding: 6px 0 10px; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.export-status.ok { color: var(--fg); }
.export-status.ok svg { width: 18px; height: 18px; flex: none; color: var(--ok); }
.export-status.err { color: var(--err); }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px) scale(.99); } }
.colors { display: flex; gap: 8px; flex-wrap: wrap; }
.color-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; background: var(--c); box-shadow: inset 0 0 0 2px var(--panel); }
.color-dot.active { border-color: var(--fg); }
.radio-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.radio-card { border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; background: var(--bg); text-align: left; display: grid; gap: 2px; }
.radio-card b { font-size: 13px; font-weight: 600; }
.radio-card small { color: var(--faint); font-size: 12px; }
.radio-card.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 20px -6px var(--glow-strong); }
.theme-seg { display: flex; }
.theme-seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 7px 8px; }
.theme-seg button svg { width: 13px; height: 13px; }
.theme-design { display: grid; gap: 6px; margin-top: 4px; }
.theme-pick { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--box-2); box-shadow: var(--ring); text-align: left; transition: border-color .12s, box-shadow .15s; }
.theme-pick:hover, .theme-pick[aria-expanded=true] { border-color: var(--accent); box-shadow: var(--ring-hover); }
.theme-pick .dp-dots { width: 34px; flex: none; }
.theme-pick > svg { margin-left: auto; color: var(--muted); transition: transform .15s; }
.theme-pick[aria-expanded=true] > svg { transform: rotate(180deg); }
.theme-menu { display: grid; gap: 8px; padding: 8px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--box-2); box-shadow: var(--ring-float); animation: rise .15s ease; }
.theme-menu .dp-list { max-height: 260px; }
.theme-menu .dp-item:focus-visible { outline-offset: -2px; }
.theme-menu .dp-name small, .theme-pick .dp-name small { text-transform: capitalize; }
.ws-row { gap: 10px; }
.ws-row code { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12px; color: var(--fg); word-break: break-all; }
/* Settings → Change keybinds: each action with its keys */
.kb-list { display: grid; gap: 1px; max-height: min(58vh, 560px); overflow-y: auto; margin: 0 -8px; padding: 0 8px; }
.kb-group { margin: 16px 0 4px; font-size: 11px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.kb-group:first-child { margin-top: 0; }
.kb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 5px 8px; margin: 0 -8px; border-radius: 9px; }
.kb-row:hover { background: var(--panel-3); }
.kb-label { flex: 1 1 200px; min-width: 0; font-size: 13px; color: var(--fg); }
.kb-keys { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; margin-left: auto; }
.kb-key { display: inline-flex; align-items: center; height: 26px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--box-2); }
.kb-key kbd { font: 500 12px/1 var(--mono); padding: 0 2px 0 8px; color: var(--fg); }
.kb-x { display: grid; place-items: center; border: 0; background: none; color: var(--faint); padding: 0 6px; height: 100%; }
.kb-x svg { width: 12px; height: 12px; }
.kb-x:hover { color: var(--err); }
.kb-add { display: inline-grid; place-items: center; height: 26px; min-width: 26px; padding: 0 6px; border: 1px dashed var(--line-2); border-radius: 7px; background: none; color: var(--muted); font-size: 12px; }
.kb-add svg { width: 13px; height: 13px; }
.kb-add:hover { color: var(--fg); border-color: var(--accent); }
.kb-add.rec { border-style: solid; border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); padding: 0 10px; }
.kb-reset { border: 0; background: none; padding: 0 4px; color: var(--accent-text); font-size: 12px; }

.stale-banner { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 250; max-width: min(760px, calc(100 * var(--vw) - 32px)); display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-radius: 12px; background: color-mix(in srgb, var(--warn) 14%, var(--panel)); border: 1px solid color-mix(in srgb, var(--warn) 50%, transparent); color: color-mix(in srgb, var(--warn) 60%, var(--fg)); font-size: 13px; box-shadow: 0 12px 30px var(--shadow), 0 0 30px -10px var(--warn); }
.stale-banner b { color: var(--fg); }
.stale-banner button { margin-left: auto; flex: none; border: 0; background: none; color: inherit; font-size: 18px; line-height: 1; padding: 2px 6px; border-radius: 6px; }
.stale-banner button:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.stale-banner .btn { margin-left: 0; font-size: 12.5px; padding: 5px 10px; border: 1px solid var(--line-2); background: var(--box-2); color: var(--fg); }
/* The web app's "Slidemaster has updated" note sits at the bottom. */
.update-banner { top: auto; bottom: 16px; }
.update-banner .btn { margin-left: auto; }
.update-banner .btn + button { margin-left: 0; }
/* Settings > View versions changelog. */
.changelog { display: grid; gap: 16px; max-height: min(60vh, 520px); overflow: auto; }
.changelog h3 { margin: 0 0 6px; font-size: 14px; }
.changelog ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: var(--muted); font-size: 13px; line-height: 1.45; }

/* ---------- accounts (hosted: account.js) */
.user-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; object-fit: cover; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent)); color: var(--accent-ink); font-size: 12px; font-weight: 700; }
.rail-account.active { background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.acct-who { display: flex; align-items: center; gap: 16px; }
.acct-who .user-av { width: 56px; height: 56px; font-size: 20px; }
.acct-badge { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--accent-soft); color: var(--accent-text); vertical-align: 1px; }
.acct-badge.off { background: color-mix(in srgb, var(--err) 14%, transparent); color: var(--err); }
/* The account's picture: a button that opens the picture editor (a square crop under a round frame). */
.acct-pic { position: relative; display: block; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; flex: none; }
.acct-pic-edit { position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--box); border: 1px solid var(--line-2); color: var(--muted); box-shadow: var(--ring); }
.acct-pic-edit svg { width: 13px; height: 13px; }
.acct-pic:hover .acct-pic-edit { color: var(--fg); border-color: var(--accent); }
.pic-stage { position: relative; width: min(320px, 100%); aspect-ratio: 1; margin: 0 auto; overflow: hidden; border-radius: 12px; background: var(--panel-2); border: 1px dashed var(--line-2); display: grid; place-items: center; touch-action: none; user-select: none; }
.pic-stage.ready { cursor: grab; border-style: solid; }
.pic-stage.ready:active { cursor: grabbing; }
.pic-stage img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.pic-stage .pic-ring { position: absolute; inset: 0; pointer-events: none; border-radius: 50%; box-shadow: 0 0 0 999px color-mix(in srgb, #000 50%, transparent); outline: 2px solid color-mix(in srgb, #fff 80%, transparent); outline-offset: -2px; display: none; }
.pic-stage.ready .pic-ring { display: block; }
.pic-zoom { display: flex; align-items: center; gap: 12px; width: min(320px, 100%); margin: 14px auto 6px; font-size: 13px; color: var(--muted); }
.pic-zoom input { flex: 1; }
/* Up to three columns running top to bottom; the browser shares the cards out so the columns end about level. */
.acct-grid { columns: 3 300px; column-gap: 16px; margin-bottom: 16px; }
.acct-grid > .acct-card { break-inside: avoid; margin-bottom: 16px; }
.acct-card { background: var(--box); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; box-shadow: var(--ring); min-width: 0; }
.acct-card h2 { font-size: 15px; margin-bottom: 14px; }
.acct-card h2 .count { color: var(--faint); font-weight: 500; margin-left: 4px; }
.acct-card > .hint { font-size: 12.5px; color: var(--faint); margin: 0 0 12px; }
.acct-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.acct-line { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.acct-line svg { color: var(--ok); flex: none; }
.acct-check { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; font-size: 13.5px; }
.acct-check input { margin-top: 3px; }
.acct-danger { border-color: color-mix(in srgb, var(--err) 30%, var(--line)); }
.acct-sessions { display: grid; gap: 4px; margin-bottom: 12px; }
.acct-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 6px; border-radius: 8px; min-width: 0; }
.acct-row:hover { background: var(--panel-2); }
.acct-row small { display: block; color: var(--faint); font-size: 12px; margin-top: 2px; overflow-wrap: anywhere; }
.acct-row > div { min-width: 0; }
.acct-sub { margin-top: 30px; }
.acct-uri { gap: 8px; margin-bottom: 10px; }
.acct-uri code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 12px; padding: 7px 9px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); }
.acct-users .acct-table { display: grid; gap: 2px; }
.acct-user { display: flex; align-items: center; gap: 12px; min-width: 0; }
.acct-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.acct-row-actions .btn { padding: 5px 9px; }
.files-panel .files-upload { width: 100%; justify-content: center; margin-bottom: 10px; }
.files-panel.drop-on { box-shadow: 0 0 0 2px var(--accent), var(--ring); }
.file-row .file-del { width: 22px; height: 22px; flex: none; opacity: 0; }
.file-row .file-del svg { width: 13px; height: 13px; }
.file-row:hover .file-del, .file-row .file-del:focus-visible { opacity: 1; }
@media (max-width: 720px) { .acct-users .acct-row { flex-direction: column; align-items: stretch; } .acct-row-actions { justify-content: flex-start; } }
/* Guides (guide.js): everything dims except the part being explained; the card sits beside it. Above dialogs, below toasts. */
.guide { position: fixed; inset: 0; z-index: 280; }
.guide.centered { background: rgba(4, 4, 10, .6); animation: fade .2s ease; }
.guide-hole { position: fixed; border-radius: 10px; pointer-events: none; box-shadow: 0 0 0 200vmax rgba(4, 4, 10, .6), 0 0 0 2px var(--accent), 0 0 28px var(--glow-mid); transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease; }
.guide.centered .guide-hole { display: none; }
.guide-card { position: fixed; width: min(340px, calc(100 * var(--vw) - 24px)); padding: 16px 16px 12px; background: var(--box-2); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--ring-float); transition: left .25s ease, top .25s ease; animation: rise .15s ease; }
.guide-count { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); }
.guide-card h3 { margin: 6px 0 6px; font-size: 16px; }
.guide-card p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.guide-card p b { color: var(--fg); font-weight: 600; }
.guide-foot { display: flex; align-items: center; gap: 6px; margin-top: 14px; }
.guide-foot .spacer { flex: 1; }
@media (prefers-reduced-motion: reduce) { .guide-hole, .guide-card { transition: none; animation: none; } }
#toast-root { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); display: grid; gap: 8px; z-index: 300; pointer-events: none; }
.toast { background: var(--box-2); border: 1px solid var(--line-2); padding: 10px 14px; border-radius: 10px; box-shadow: var(--ring-float); font-size: 13px; max-width: 520px; animation: rise .18s ease; pointer-events: auto; }
.toast.err { border-color: color-mix(in srgb, var(--err) 50%, transparent); color: color-mix(in srgb, var(--err) 45%, var(--fg)); box-shadow: 0 10px 30px var(--shadow), 0 0 30px -10px var(--err); }
.toast.ok { border-color: color-mix(in srgb, var(--ok) 45%, transparent); box-shadow: 0 10px 30px var(--shadow), 0 0 30px -12px var(--ok); }
.loading { color: var(--faint); padding: 20px 0; }

/* ---------- first run: connect Claude */
.onboard { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 24px 16px; overflow: auto; background: radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--glow) 18%, transparent), transparent 60%), color-mix(in srgb, var(--rail) 96%, transparent); animation: fade .2s ease; }
.onb-card { width: min(560px, 100%); background: var(--box); border: 1px solid var(--line-2); border-radius: 20px; padding: 32px 32px 22px; box-shadow: var(--ring-float); animation: rise .22s ease; }
.onb-card .rail-logo { width: 72px; height: 72px; border-radius: 16px; margin-bottom: 18px; }
.onb-card h1 { font-size: 24px; letter-spacing: -0.02em; }
.onb-sub { color: var(--muted); margin: 6px 0 22px; }
.onb-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.onb-step { display: grid; grid-template-columns: 30px 1fr; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; color: var(--faint); }
.onb-step.current { border-color: var(--glow-mid); background: linear-gradient(180deg, color-mix(in srgb, var(--glow) 8%, transparent), transparent); color: var(--fg); box-shadow: var(--ring); }
.onb-step.done { color: var(--muted); }
.onb-num { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--panel-3); }
.onb-step.current .onb-num { background: var(--accent); color: var(--accent-ink); }
.onb-step.done .onb-num { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.onb-body { min-width: 0; display: grid; gap: 10px; align-content: start; padding-top: 4px; }
.onb-body h3 { font-size: 15px; }
.onb-body p { margin: 0; color: var(--muted); font-size: 13.5px; }
.onb-body p b { color: var(--fg); font-weight: 600; }
.onb-body a { color: var(--accent-text); }
.onb-body .onb-meta { font-family: var(--mono); font-size: 12px; margin-top: -6px; }
.onb-err { color: var(--err) !important; background: color-mix(in srgb, var(--err) 8%, transparent); border: 1px solid color-mix(in srgb, var(--err) 30%, transparent); border-radius: 10px; padding: 8px 10px; }
.onb-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.onb-wait { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--fg); }
.onb-code { display: grid; gap: 6px; font-size: 12.5px; color: var(--muted); }
.onb-foot { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.onb-foot .btn.primary { margin-left: auto; }
.onb-hint { font-size: 12px; color: var(--faint); }
@media (max-width: 520px) { .onb-card { padding: 24px 18px 18px; } .onb-body form.row { flex-wrap: wrap; } }

/* ---------- timeline (parts of a deck, shown while presenting) */

/* New presentation: create or import */
.new-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.new-choice button { display: grid; justify-items: start; align-content: start; gap: 6px; text-align: left; padding: 18px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--box); box-shadow: var(--ring); color: var(--fg); font: inherit; cursor: pointer; transition: border-color .12s ease, background .12s ease, box-shadow .15s ease; }
.new-choice button:hover, .new-choice button:focus-visible { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--ring-hover); outline: none; }
.new-choice .nc-icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--box-2); color: var(--accent-text); margin-bottom: 4px; }
.new-choice b { font-weight: 600; font-size: 15px; }
.new-choice small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
/* New presentation: the design list beside a title slide in the hovered or chosen design */
.nd-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 22px; align-items: start; }
.nd-list { height: 250px; max-height: none; align-content: start; }
.nd-preview { position: sticky; top: 0; display: grid; gap: 8px; margin-top: 22px; }
.nd-slide { position: relative; aspect-ratio: 16 / 9; overflow: hidden; display: flex; align-items: center; border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--ring); container-type: inline-size; }
.nd-slide > .swatch-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.nd-copy { position: relative; display: grid; justify-items: start; gap: 2.4cqw; padding: 0 8cqw; }
.nd-bar { width: 9cqw; height: .9cqw; border-radius: 1cqw; background: var(--nd-accent); }
.nd-title { font-size: 6.4cqw; line-height: 1.05; font-weight: 700; letter-spacing: -.02em; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nd-sub { font-size: 2.5cqw; color: var(--nd-muted); }
.nd-cap { font-size: 12px; color: var(--muted); }
@media (max-width: 760px) { .nd-grid { grid-template-columns: 1fr; } .nd-preview { position: static; margin-top: 0; } }

/* New slide: layouts and saved slide designs, drawn as wireframes */
.sd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.sd-card { position: relative; min-width: 0; }
.sd-main { width: 100%; height: 100%; display: grid; align-content: start; gap: 5px; text-align: left; padding: 10px 10px 12px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--box); box-shadow: var(--ring); color: var(--fg); font: inherit; cursor: pointer; transition: border-color .12s ease, background .12s ease, box-shadow .15s ease; }
.sd-main:hover, .sd-main:focus-visible { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--ring-hover); outline: none; }
/* Build with AI: the picked layout stays marked. */
.sd-card.active .sd-main { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent), 0 8px 24px -12px var(--glow-strong); }
.sd-prompt { margin: 16px 0 0; }
.sd-main b { font-weight: 600; font-size: 14px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-main small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.sd-icon { aspect-ratio: 16 / 9; display: grid; place-items: center; border-radius: 8px; background: var(--box-2); border: 1px solid var(--line); color: var(--accent-text); }
.sd-icon svg { width: 34px; height: 34px; }
.sd-icon.sd-bg { overflow: hidden; }
.sd-icon.sd-bg svg { width: 100%; height: 100%; }
.sd-sketch { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; background: var(--box-2); border: 1px solid var(--line); }
.sd-sketch .sk-shape { fill: color-mix(in srgb, var(--fg) 7%, transparent); stroke: color-mix(in srgb, var(--fg) 24%, transparent); stroke-width: 5; }
.sd-sketch .sk-head { fill: var(--accent); }
.sd-sketch .sk-text { fill: color-mix(in srgb, var(--fg) 42%, transparent); }
.sd-sketch .sk-img { fill: color-mix(in srgb, var(--accent) 8%, transparent); stroke: color-mix(in srgb, var(--accent) 60%, transparent); stroke-width: 6; stroke-dasharray: 26 16; }
.sd-sketch .sk-img-line { fill: none; stroke: color-mix(in srgb, var(--accent) 60%, transparent); stroke-width: 10; stroke-linejoin: round; stroke-linecap: round; }
.sd-sketch .sk-bar { fill: color-mix(in srgb, var(--accent) 75%, transparent); }
.sd-sketch .sk-el { fill: color-mix(in srgb, var(--glow) 8%, transparent); stroke: var(--glow); stroke-width: 6; stroke-dasharray: 26 16; }

.thumb-part { display: flex; align-items: center; gap: 7px; border: 0; background: none; padding: 6px 2px 0; margin-bottom: -3px; color: var(--fg); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-align: left; min-width: 0; }
.thumb-part:first-child { padding-top: 0; }
.thumb-part i { width: 8px; height: 8px; border-radius: 3px; background: var(--c); flex: none; }
.thumb-part span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thumb-part:hover span { color: var(--c); }
.thumb.in-part .thumb-num { box-shadow: inset -2px 0 0 var(--c); padding-right: 5px; }
.pos-part { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; color: var(--muted); }
.pos-part i { width: 8px; height: 8px; border-radius: 3px; background: var(--c); }

.tl-ed { display: grid; gap: 14px; }
.tl-preview { display: flex; gap: 3px; padding: 10px 12px 11px; border-radius: 12px; background: var(--rail); border: 1px solid var(--line); box-shadow: var(--ring); font-size: 11px; font-weight: 600; color: var(--fg); min-height: 38px; align-items: flex-end; }
.tl-prev-seg { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.tl-prev-seg span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1em; line-height: 1; }
.tl-prev-seg i { height: 4px; border-radius: 4px; background: var(--c); }
.tl-prev-seg.none i { background: color-mix(in srgb, var(--fg) 14%, transparent); }
.tl-prev-empty { color: var(--faint); font-weight: 500; align-self: center; }
.tl-lanes { display: grid; gap: 10px; max-height: min(calc(56 * var(--vh)), 560px); overflow-y: auto; padding-right: 4px; }
.tl-lane { border: 1px solid var(--line-2); border-left: 4px solid var(--c, var(--line-2)); border-radius: 12px; background: var(--box); box-shadow: var(--ring); transition: border-color .12s ease, background .12s ease; }
.tl-lane.over { background: color-mix(in srgb, var(--c, var(--accent)) 10%, var(--panel)); border-color: var(--c, var(--accent)); }
.tl-lane-head { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 8px 0 10px; }
.tl-color { width: 26px; height: 26px; border-radius: 8px; border: 0; background: var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 18%, transparent); flex: none; }
.tl-color:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 18%, transparent), 0 0 0 3px color-mix(in srgb, var(--c) 35%, transparent); }
.tl-name { flex: 1; max-width: 320px; padding: 6px 10px; font-weight: 600; background: transparent; border-color: transparent; }
.tl-name:hover { border-color: var(--line-2); }
.tl-name:focus { background: var(--bg); }
.tl-count { color: var(--faint); font-size: 12px; margin-left: auto; white-space: nowrap; }
.tl-none { --c: var(--line-2); border-style: dashed; border-left-style: dashed; background: transparent; }
.tl-none-title { font-weight: 600; color: var(--muted); padding: 5px 0; }
.tl-drop { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; min-height: 72px; }
.tl-drop:empty::after { content: 'Drop slides here'; color: var(--faint); font-size: 12.5px; align-self: center; padding-left: 4px; }
.tl-chip { width: 132px; border-radius: 9px; background: var(--box-2); border: 1.5px solid var(--line-2); padding: 4px; cursor: grab; user-select: none; transition: border-color .12s ease, opacity .12s ease, transform .12s ease; }
.tl-chip:hover { border-color: var(--faint); }
.tl-chip.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), 0 0 18px -6px var(--glow-strong); }
.tl-chip.dragging { opacity: .4; }
.tl-chip:active { cursor: grabbing; }
.tl-chip-thumb { aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; position: relative; background: var(--rail); }
.tl-chip-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.tl-chip-label { display: flex; gap: 6px; font-size: 11.5px; color: var(--muted); padding: 5px 2px 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-chip-label b { color: var(--fg); font-variant-numeric: tabular-nums; font-weight: 600; }
.tl-new { display: flex; align-items: center; gap: 8px; border: 1.5px dashed var(--line-2); border-radius: 12px; background: none; padding: 12px 14px; color: var(--muted); font-weight: 500; text-align: left; transition: border-color .12s ease, color .12s ease, background .12s ease; }
.tl-new small { color: var(--faint); font-weight: 400; margin-left: 4px; }
.tl-new:hover, .tl-new.over { border-color: var(--accent); color: var(--fg); background: var(--accent-soft); }
.tl-foot-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.tl-show { display: flex; align-items: center; gap: 8px; color: var(--fg); cursor: pointer; }
.tl-show input { accent-color: var(--accent); }
.tl-show small, .tl-tip { color: var(--faint); font-size: 12px; }
.tl-tip { margin-left: auto; }
.tl-pop { position: absolute; top: calc(100% + 6px); left: 6px; z-index: 5; width: 244px; padding: 10px 12px 12px; border-radius: 12px; background: var(--box-2); border: 1px solid var(--line-2); box-shadow: var(--ring-float); }
.tl-pop-label { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); margin: 2px 0 7px; }
.tl-sw-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tl-sw { width: 24px; height: 24px; border-radius: 7px; border: 0; background: var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 16%, transparent); }
.tl-sw:hover { transform: scale(1.1); }
.tl-sw.on { box-shadow: 0 0 0 2px var(--panel-2), 0 0 0 4px var(--fg); }
.tl-custom { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.tl-custom input { width: 28px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }

/* Animations tab: library cards (hover plays them) and the animation editor */
.an-section { margin-bottom: 30px; }
.an-section-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; }
.an-section-head h2 { font-size: 15px; }
.an-section-head span { color: var(--faint); font-size: 12.5px; }

/* ---------- library folders (designs, elements, animations): tiles on the list page, a breadcrumb inside one */
.folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 12px; margin-bottom: 24px; }
.folder-card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 12px; background: var(--box); border: 1px solid var(--line); box-shadow: var(--ring); color: var(--fg); transition: border-color .15s, background .15s, box-shadow .15s; }
.folder-card > svg { grid-row: 1 / 3; width: 22px; height: 22px; color: var(--accent-text); }
.folder-card b, .lib-folder-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-card small { color: var(--faint); }
.folder-card:hover, .folder-card.drop { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--ring-hover); }
.lib-crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lib-crumbs a { color: var(--muted); text-decoration: none; border-radius: 8px; padding: 0 6px; margin: 0 -6px; flex: none; }
.lib-crumbs a:hover, .lib-crumbs a.drop { color: var(--fg); background: var(--accent-soft); }
.lib-crumbs > span:not(.lib-folder-name) { color: var(--faint); font-weight: 400; }
.lib-crumbs > svg { width: 22px; height: 22px; color: var(--accent-text); flex: none; }
/* Insert element popup (right-click → Element in the slide editor) */
.ia-pick { display: grid; gap: 14px; margin: 14px 0 10px; }
.ia-pick .folder-grid { margin-bottom: 0; }
.ia-pick-crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--faint); }
.ia-pick-crumbs > svg { width: 18px; height: 18px; color: var(--accent-text); flex: none; }
.ia-pick-crumbs b { color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ia-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 12px; }
.ia-pick-card { display: grid; padding: 0; text-align: left; border-radius: 12px; overflow: hidden; background: var(--box); border: 1px solid var(--line); box-shadow: var(--ring); color: var(--fg); transition: border-color .15s, box-shadow .15s; }
.ia-pick-card:hover, .ia-pick-card:focus-visible { border-color: var(--accent); box-shadow: var(--ring-hover); }
.ia-pick-card b { padding: 9px 12px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* An element's kind (Basic / Chart / Interactable): how it's edited on a slide. */
.used .tag.ia-kind-tag, .ia-kind-tag { color: var(--fg); font-weight: 600; }
.ia-kind-tag.k-basic { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.ia-kind-tag.k-chart { border-color: color-mix(in srgb, var(--accent-2) 55%, var(--line)); }
.ia-kind-tag.k-interactable { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.ia-pick-card .ia-kind-tag { position: absolute; top: 6px; right: 6px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel-2) 88%, transparent); font-size: 10.5px; }
.ia-kind-field .seg { display: flex; }
.ia-kind-field .seg button { flex: 1; }
.ia-kind-field .hint { margin: 6px 0 0; }
.ia-pick-empty { color: var(--faint); text-align: center; padding: 24px 0; }
.ia-pick-empty:empty { display: none; }
.ia-pick.busy { opacity: .45; pointer-events: none; }
.ia-modify { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; margin-top: 14px; }
.ia-modify .field { margin: 0; }
.ia-modify .field > span { display: flex; align-items: center; gap: 6px; }
.ia-modify .field > span svg { width: 14px; height: 14px; color: var(--accent-text); }
.ia-modify small { font-weight: 400; color: var(--faint); }
.ia-modify .meta-chip { margin-bottom: 4px; }
.ia-modify-run { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--box); border: 1px solid var(--line); font-size: 13px; color: var(--fg); }
.ia-modify-run[hidden] { display: none; }
.ia-modify-run.failed { color: var(--err); }
.ia-modify-run.failed .spinner { display: none; }
@media (max-width: 560px) { .ia-modify { grid-template-columns: 1fr; } .ia-modify .meta-chip { justify-self: start; } }
.an-body { grid-row: 3; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
.an-body > .stage, .an-body > .ia-code { grid-area: 1 / 1; min-height: 0; }
.an-controls { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); }
.an-controls .an-note { color: var(--faint); font-size: 12px; margin-left: 8px; }
.an-controls .btn.on { border-color: var(--accent); color: var(--fg); box-shadow: 0 0 0 1px var(--glow-mid), 0 0 18px -6px var(--glow-strong); }
.an-type { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); padding: 3px 9px; border-radius: 999px; }

/* Animation editor (deck editor → Animations) */
.anx { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 18px; }
.anx-main { display: grid; gap: 10px; min-width: 0; align-content: start; }
.anx-slidebar { display: flex; align-items: center; gap: 6px; }
.anx-slidesel { flex: 0 1 420px; padding: 6px 10px; font-size: 13px; }
.anx-slidebar .spacer { flex: 1; }
.anx-stage { padding: 10px; border-radius: 12px; background-color: var(--rail); background-image: radial-gradient(color-mix(in srgb, var(--fg) 7%, transparent) 1px, transparent 1px); background-size: 18px 18px; border: 1px solid var(--line); transition: box-shadow .15s ease; }
.anx-playing .anx-stage { box-shadow: 0 0 0 2px var(--accent), 0 0 30px -8px var(--glow-strong); }
.anx-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; box-shadow: 0 12px 40px var(--shadow), 0 0 0 1px var(--glow-soft); background: var(--rail); }
.anx-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.anx-selbar { display: flex; align-items: center; gap: 8px; min-height: 34px; font-size: 13px; }
.anx-selbar .spacer { flex: 1; }
.anx-selname { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 42%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.anx-hint { color: var(--faint); font-size: 12.5px; }
.anx-chip i, .anx-selname i { font-style: normal; font: 500 10.5px/1.4 var(--mono); color: var(--muted); background: var(--panel-3); padding: 1px 5px; border-radius: 5px; flex: none; }
.anx-side { display: grid; gap: 10px; align-content: start; max-height: min(calc(68 * var(--vh)), 720px); overflow-y: auto; padding: 2px 4px 2px 2px; }
.anx-clicks { display: grid; gap: 10px; }
.anx-click { display: grid; gap: 8px; padding: 8px 10px 10px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--box); box-shadow: var(--ring); }
.anx-click header { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.anx-click header b { margin-left: 4px; }
.anx-click header .spacer { flex: 1; }
.anx-click header .icon-btn { width: 28px; height: 28px; }
.anx-click header .anx-mv svg { transform: rotate(180deg); }
.anx-num { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 12px; }
.anx-row { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 6px 8px; align-items: center; }
.anx-role { font-size: 12px; font-weight: 600; }
.anx-role.in { color: var(--ok); }
.anx-role.out { color: var(--err); }
.anx-anim { padding: 5px 8px; font-size: 12.5px; }
.anx-drop { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-height: 38px; padding: 5px; border: 1.5px dashed var(--line-2); border-radius: 9px; transition: border-color .12s ease, background .12s ease; }
.anx-ph { color: var(--faint); font-size: 12px; padding: 0 4px; }
.anx-drop:has(.anx-chip) .anx-ph { display: none; }
.anx-add { display: none; align-items: center; gap: 4px; border: 1px solid var(--line-2); background: var(--box-2); color: var(--accent-2-text); border-radius: 7px; padding: 4px 8px; font-size: 12px; font-weight: 500; }
.anx-add svg { width: 12px; height: 12px; }
.anx.has-sel .anx-add { display: inline-flex; }
.anx-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 3px 3px 6px; border-radius: 8px; background: var(--box-2); border: 1px solid var(--line-2); font-size: 12.5px; cursor: grab; user-select: none; }
.anx-chip:hover { border-color: var(--faint); }
.anx-chip > span { min-width: 0; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anx-chip.missing { opacity: .6; border-style: dashed; }
.anx-x { width: 20px; height: 20px; display: grid; place-items: center; border: 0; border-radius: 5px; background: none; color: var(--faint); flex: none; }
.anx-x:hover { background: var(--panel-3); color: var(--fg); }
.anx-x svg { width: 12px; height: 12px; }
.anx-newclick { display: flex; align-items: center; gap: 8px; border: 1.5px dashed var(--line-2); border-radius: 12px; background: none; padding: 12px 14px; color: var(--muted); font-weight: 500; text-align: left; transition: border-color .12s ease, color .12s ease, background .12s ease; }
.anx-newclick small { color: var(--faint); font-weight: 400; margin-left: 2px; }
.anx-newclick:hover { border-color: var(--accent); color: var(--fg); background: var(--accent-soft); }
.anx-dragging .anx-drop, .anx-dragging .anx-newclick { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-2)); }
.anx-target.over { border-color: var(--accent) !important; background: var(--accent-soft); }
.anx-trans { display: grid; gap: 8px; padding: 10px 12px 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--box); box-shadow: var(--ring); font-size: 13px; }
.anx-trans-head small { display: block; color: var(--faint); font-size: 12px; margin-top: 3px; }
.anx-trans .row { display: flex; gap: 6px; align-items: center; }
.anx-trans .select { padding: 6px 10px; font-size: 13px; }
.anx-trans .btn { justify-self: start; }
.anx-empty { color: var(--muted); font-size: 12.5px; line-height: 1.5; padding: 12px 14px; border: 1px dashed var(--line-2); border-radius: 12px; }
.anx-empty b { display: block; color: var(--fg); margin-bottom: 3px; }
.anx-ghost { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; will-change: transform; max-width: 260px; padding: 6px 10px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--ring-float); }
@media (max-width: 1100px) { .anx { grid-template-columns: 1fr; } .anx-side { max-height: none; } }

/* Presenter view (presenter.js): current slide on the left; timer, next slide and notes on the right */
.pv { position: fixed; inset: 0; z-index: 280; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--bg); color: var(--fg); animation: fade .15s ease; }
.pv-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--rail); min-width: 0; }
.pv-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pv-aud { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.pv-aud i { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.pv-aud.on i { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.pv-main { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, calc(30 * var(--vw)), 460px); min-height: 0; }
.pv-left { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; padding: 20px; min-height: 0; }
.pv-stage { container-type: size; display: grid; place-items: center; min-height: 0; }
.pv-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-2); background: #000; }
.pv-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.pv-cur iframe { pointer-events: auto; }
.pv-cur { width: min(100cqw, 100cqh * 16 / 9); cursor: pointer; box-shadow: 0 24px 60px -24px var(--shadow), 0 0 0 1px var(--glow-soft); }
.pv-nav { display: flex; align-items: center; gap: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pv-pos b { color: var(--fg); }
.pv-hint { margin-left: auto; font-size: 12px; color: var(--faint); text-align: right; }
.pv-right { display: flex; flex-direction: column; gap: 16px; padding: 20px 20px 20px 0; min-height: 0; }
.pv-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.pv-timer { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.pv-timer-top { display: flex; align-items: center; gap: 4px; }
.pv-elapsed { flex: 1; font: 600 44px/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.pv-timer.paused .pv-elapsed { color: var(--warn); }
.pv-timer-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pv-timer-row b { color: var(--fg); font-weight: 600; }
.pv-next { display: grid; gap: 8px; }
.pv-end { position: absolute; inset: 0; display: none; place-items: center; background: var(--panel); color: var(--muted); font-size: 13px; }
.pv-next.is-end .pv-end { display: grid; }
.pv-notes-box { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.pv-notes-head { display: flex; align-items: center; gap: 2px; }
.pv-notes-head .icon-btn { width: 30px; height: 26px; font-size: 12px; font-weight: 600; }
.pv-notes { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); font-size: var(--pv-fs, 18px); line-height: 1.5; overflow-wrap: anywhere; }
.pv-notes.text { white-space: pre-line; }
.pv-notes.empty { color: var(--faint); font-style: italic; font-size: 14px; }
.pv-notes > :first-child { margin-top: 0; }
@media (max-width: 900px) { .pv-main { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); } .pv-right { padding: 0 20px 20px; } .pv-hint { display: none; } }

/* ---------- share and cowork: the top bar's Share button and avatars, the Cowork window, the join screen */
.share-btn { flex: none; display: flex; align-items: center; gap: 7px; padding: 6px 12px 6px 10px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--box-2); color: var(--fg); font-size: 13px; font-weight: 500; white-space: nowrap; box-shadow: var(--ring); transition: border-color .15s, box-shadow .15s; }
.share-btn:hover, .share-btn[aria-expanded=true] { border-color: var(--glow-mid); box-shadow: var(--ring-hover); }
.share-btn svg { width: 15px; height: 15px; color: var(--muted); }
#topbar.fit-tight .share-btn > span { display: none; }
#topbar.fit-tight .share-btn { padding: 7px; }
.share-menu .dp-item > svg { margin-left: 0; color: var(--muted); }
.cw-people { display: flex; align-items: center; flex: none; }
.cw-people:empty { display: none; }
.cw-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 11px; font-weight: 700; color: color-mix(in srgb, var(--c) 70%, var(--fg)); background: color-mix(in srgb, var(--c) 14%, var(--panel)); border: 2px solid var(--bg); opacity: .5; filter: grayscale(.7); cursor: default; }
.cw-people .cw-av + .cw-av { margin-left: -7px; }
.cw-av.on { opacity: 1; filter: none; background: color-mix(in srgb, var(--c) 30%, var(--panel)); box-shadow: 0 0 0 1.5px var(--c); }
.cw-av.more { --c: var(--muted); opacity: 1; filter: none; }
.cw-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.cw-dot.on { background: var(--ok); box-shadow: 0 0 8px -1px var(--ok); }
.cw-dot.err { background: var(--warn); }
.deck-info .when .cw-dot { margin-right: 6px; vertical-align: 1px; }
.rail-item.team::after { content: ""; position: absolute; right: 1px; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: var(--c); border: 2px solid var(--rail, var(--bg)); }
.team-head { margin-top: 34px; }
.cw-top { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.cw-top .field { margin-bottom: 0; }
.cw-switch { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; font-size: 13px; white-space: nowrap; cursor: pointer; }
.cw-sec { margin-top: 22px; }
.cw-sec h3 { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.cw-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; padding: 9px 10px; border-radius: 10px; background: var(--box); border: 1px solid var(--line); }
.cw-row > div { flex: 1; min-width: 0; display: grid; }
.cw-row b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-row small { font-size: 12px; color: var(--faint); overflow-wrap: anywhere; }
.cw-row.req { border-color: var(--glow-mid); background: var(--accent-soft); }
.cw-row .cw-av { opacity: 1; filter: none; border-color: var(--box); }
.cw-invite-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.cw-invite-row .select { flex: 1 1 220px; min-width: 0; }
.cw-max { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.cw-max .input { width: 96px; }
.cw-link { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.cw-link:empty { display: none; }
.cw-qr { width: 132px; height: 132px; flex: none; box-sizing: border-box; padding: 6px; border-radius: 10px; background: #fff; }
.cw-qr svg { display: block; width: 100%; height: 100%; }
.cw-link-text { flex: 1; min-width: 0; display: grid; gap: 8px; }
.cw-link-text .row { gap: 8px; }
.cw-link-text .input { flex: 1; min-width: 0; font: 12.5px var(--mono); }
.cw-link-text small { color: var(--faint); font-size: 12px; line-height: 1.45; }
.stage-offline { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: none; align-items: center; gap: 8px; max-width: calc(100% - 40px); font-size: 12.5px; background: color-mix(in srgb, var(--bg) 85%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 50%, var(--line-2)); box-shadow: var(--ring); padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(8px); z-index: 3; }
.stage-offline.on { display: flex; }
.join-page { display: grid; place-items: center; min-height: 100%; }
.join-card { width: min(520px, 100%); display: grid; gap: 14px; padding: 28px; border-radius: 16px; background: var(--box-2); border: 1px solid var(--line-2); box-shadow: var(--ring-float); }
.join-card h2 { margin: 0; font-size: 22px; line-height: 1.25; }
.join-card p { margin: 0; color: var(--muted); }
.join-card .field { margin: 0; }
.join-card > .row:last-child { justify-content: flex-end; gap: 10px; }
.join-badge { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--accent-text); background: var(--accent-soft); }

/* ---------- small windows: panels restack, side columns narrow, spacing tightens */
@media (max-width: 1100px) {
  .design-editor { grid-template-columns: minmax(0, 1fr) min(460px, 45%); }
}
/* Narrow: the slide list turns into a strip above the slide, with Claude beside both */
@media (max-width: 860px) {
  .editor { grid-template-columns: minmax(0, 1fr) min(var(--ed-right, 420px), 50%); grid-template-rows: auto minmax(0, 1fr); }
  .editor > .ed-slides { grid-column: 1; grid-row: 1; }
  .editor > .ed-center { grid-column: 1; grid-row: 2; }
  .editor > .ed-claude { grid-column: 2; grid-row: 1 / span 2; }
  .ed-slides { display: flex; align-items: center; gap: 10px; overflow: auto hidden; padding: 8px 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .ed-slides-head { flex: none; top: auto; left: -10px; align-self: stretch; margin: -8px 0 -8px -10px; padding: 0 6px 0 10px; box-shadow: 1px 0 0 var(--line); }
  .ed-slides-head > span:first-child { display: none; }
  .ed-slides-tools { flex-direction: column; gap: 2px; }
  .thumbs { display: flex; gap: 8px; }
  .thumb { flex: none; width: 104px; grid-template-columns: minmax(0, 1fr); }
  .thumb-num { position: absolute; left: 5px; top: 4px; z-index: 1; padding: 0 4px; border-radius: 4px; background: color-mix(in srgb, var(--bg) 75%, transparent); }
  .thumb-title, .thumb-part { display: none; }
  .thumb.drop-before::before, .thumb.drop-after::after { top: 0; bottom: 0; left: auto; right: auto; width: 3px; height: auto; }
  .thumb.drop-before::before { left: -6px; }
  .thumb.drop-after::after { right: -6px; }
  .ed-grip[data-grip=left] { display: none; }
  /* Design, element and animation editors: the side panel goes under the editor, preview and Claude side by side */
  .design-editor { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 50%); }
  .de-side { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: minmax(0, 1fr); border-left: 0; border-top: 1px solid var(--line); }
  .de-side:has(.ia-desc) { grid-template-rows: minmax(0, 1fr); }
  .de-preview, .ia-desc { border-bottom: 0; border-right: 1px solid var(--line); overflow-y: auto; }
  .md-editor { padding: 16px 16px 40px; }
}
/* Very narrow: everything in one column */
@media (max-width: 600px) {
  #app { grid-template-columns: 56px minmax(0, 1fr); }
  #rail { gap: 8px; }
  .rail-item, .rail-add, .rail-btn { width: 40px; height: 40px; border-radius: 14px; }
  .rail-shot { width: 36px; }
  .rail-fold .folder-art { width: 30px; height: 30px; }
  .rail-item::before { left: -8px; }
  .rail-tip { left: 62px; }
  #topbar { padding: 0 8px; gap: 8px; }
  .page { padding: 20px 16px 32px; }
  .page-head h1 { font-size: 22px; }
  .deck-grid:has(> .project-card) > .new-card small { display: none; }
  .editor { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) minmax(0, 48%); }
  .editor.right-off { grid-template-rows: auto minmax(0, 1fr) 0; }
  .editor > .ed-claude { grid-column: 1; grid-row: 3; border-left: 0; border-top: 1px solid var(--line); }
  .ed-grip[data-grip=right] { display: none; }
  .de-side { grid-template-columns: minmax(0, 1fr); }
  .de-preview, .ia-desc { display: none; }
  .modal-backdrop { padding: 10px; }
}
/* Short windows: less chrome, more room for the slide and the chat */
@media (max-height: 640px) {
  #main { grid-template-rows: 48px 1fr; }
  #rail { padding: 8px 0; gap: 6px; }
  .rail-list { gap: 6px; }
  .page { padding-top: 18px; }
  .page-head { margin-bottom: 18px; }
  .ed-center { grid-template-rows: var(--ed-top, 56px) minmax(0, 1fr) 38px auto; }
  .cc-head { min-height: 48px; padding-top: 6px; padding-bottom: 6px; }
  .cc-log { padding: 10px 12px; }
  .cc-empty { padding: 8px; }
  .cc-empty { font-size: 0; }
  .cc-empty b { font-size: 13px; margin: 0; }
  .cc-compose { padding: 8px 10px; gap: 7px; }
  .cc-compose textarea { min-height: 46px; }
  .ed-notes .textarea { height: 80px; }
}
/* The Cowork window on a narrow screen */
@media (max-width: 640px) { .cw-top { grid-template-columns: 1fr; } .cw-switch { padding-bottom: 0; } .cw-link { flex-direction: column; align-items: stretch; } .cw-qr { align-self: center; } }