/* ===========================================================================
   Slide Builder — hub (Phase 2). Authentic workers-dev cream theme,
   matching the published decks and the /decks gallery.
   ========================================================================= */
:root {
  --page:#f5f1eb; --surface:#fff9ef; --surface2:#fffdf9; --surfaceSoft:#fff4e6;
  --text:#2b0b05; --muted:#7b6254; --border:#ead6c4; --borderLight:#f2e3d5;
  --orange:#ff5f2e; --blue:#0a95ff; --purple:#9b3ff6; --green:#26a641; --yellow:#f5a623;
  --radius:16px; --radius-sm:10px;
  --shadow:0 12px 28px rgba(43,11,5,.10);
  --font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
* { box-sizing:border-box; }
html,body { height:100%; }
body {
  margin:0; background:var(--page); color:var(--text); font-family:var(--font);
  -webkit-font-smoothing:antialiased; display:flex; flex-direction:column; min-height:100vh;
}
a { color:inherit; }
button { font-family:inherit; }

/* ── top bar ─────────────────────────────────────────── */
.topbar {
  position:sticky; top:0; z-index:20;
  background:rgba(245,241,235,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.topbar-inner {
  max-width:1200px; margin:0 auto; padding:16px 24px;
  display:flex; align-items:center; gap:14px;
}
.brand { display:flex; align-items:center; gap:12px; color:var(--orange); cursor:pointer; text-decoration:none; }
.brand svg { width:38px; height:auto; display:block; }
.brand .t { color:var(--text); font-weight:700; font-size:19px; letter-spacing:-.01em; }
.brand .t small { display:block; color:var(--muted); font-weight:500; font-size:12px; letter-spacing:0; }
.topbar-spacer { flex:1; }
.crumbs { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13.5px; }
.crumbs .sep { opacity:.5; }
.crumbs .here { color:var(--text); font-weight:600; }

/* ── layout ──────────────────────────────────────────── */
main { flex:1; width:100%; }
.wrap { max-width:1200px; margin:0 auto; padding:28px 24px 64px; }
.view { display:none; }
.view.active { display:block; }

.page-head { display:flex; align-items:flex-start; gap:16px; margin-bottom:22px; }
.page-head h1 { margin:0 0 4px; font-size:24px; letter-spacing:-.02em; }
.page-head p { margin:0; color:var(--muted); font-size:14px; max-width:70ch; line-height:1.5; }
.page-head .actions { margin-left:auto; display:flex; gap:10px; flex:none; }

/* ── buttons ─────────────────────────────────────────── */
.btn {
  border:1px solid var(--border); background:var(--surface2); color:var(--text);
  border-radius:var(--radius-sm); padding:9px 15px; font-size:13.5px; font-weight:600;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  transition:filter .12s, background .12s, border-color .12s, transform .1s; white-space:nowrap;
}
.btn:hover { background:var(--surface); }
.btn:active { transform:translateY(1px); }
.btn.primary { background:var(--orange); color:#fff; border-color:var(--orange); }
.btn.primary:hover { filter:brightness(1.05); }
.btn.blue { background:var(--blue); color:#fff; border-color:var(--blue); }
.btn.green { background:var(--green); color:#fff; border-color:var(--green); }
.btn.danger { color:var(--orange); border-color:var(--border); }
.btn.danger:hover { background:#fff0eb; border-color:var(--orange); }
.btn.sm { padding:6px 12px; font-size:12.5px; }
.btn:disabled { opacity:.55; cursor:default; }
.btn .spin { width:14px; height:14px; border:2px solid rgba(255,255,255,.5); border-top-color:#fff; border-radius:50%; display:none; animation:spin .7s linear infinite; }
.btn.loading .spin { display:inline-block; }
.btn.loading .lbl { opacity:.85; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── landing cards ───────────────────────────────────── */
.hero { text-align:center; padding:34px 0 8px; }
.hero h1 { margin:0 0 10px; font-size:34px; letter-spacing:-.025em; }
.hero p { margin:0 auto; color:var(--muted); font-size:15.5px; max-width:56ch; line-height:1.55; }
.home-grid { display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:34px; }
.home-card {
  background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius);
  padding:26px 24px; cursor:pointer; text-align:left; display:flex; flex-direction:column; gap:12px;
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.home-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--borderLight); }
.home-card .ic { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.home-card .ic svg { width:24px; height:24px; }
.home-card.new .ic { background:#fff0eb; color:var(--orange); }
.home-card.wip .ic { background:#eaf5ff; color:var(--blue); }
.home-card.vault .ic { background:#f3ebff; color:var(--purple); }
.home-card h2 { margin:0; font-size:18px; letter-spacing:-.01em; }
.home-card p { margin:0; color:var(--muted); font-size:13.5px; line-height:1.5; }
.home-card .count-pill {
  align-self:flex-start; margin-top:2px; font-size:12px; font-weight:600; color:var(--muted);
  background:var(--surfaceSoft); border:1px solid var(--borderLight); border-radius:999px; padding:3px 10px;
}

/* ── card grids (drafts + vault) ─────────────────────── */
.grid { display:grid; gap:20px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.card {
  background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.card:hover { transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--borderLight); }
.card .thumb {
  position:relative; display:block; aspect-ratio:16/9; background:var(--surface);
  border-bottom:1px solid var(--border); overflow:hidden; cursor:pointer;
}
.card .thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.card .thumb.noimg { display:flex; align-items:center; justify-content:center; padding:16px;
  text-align:center; font-weight:700; background:linear-gradient(135deg,var(--surface),var(--surface2)); }
.card .thumb.noimg img { display:none; }
.card .body { padding:15px 17px 16px; display:flex; flex-direction:column; gap:7px; flex:1; }
.card .body h3 { margin:0; font-size:16px; line-height:1.25; letter-spacing:-.01em; cursor:pointer; }
.card .body h3:hover { color:var(--orange); }
.card .desc { margin:0; color:var(--muted); font-size:13px; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card .meta { margin:0; color:var(--muted); font-size:12px; opacity:.85; }
.card .row { margin-top:auto; padding-top:10px; display:flex; gap:8px; flex-wrap:wrap; }
.card .icon-del {
  position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:8px;
  border:1px solid var(--border); background:rgba(255,253,249,.92); color:var(--muted);
  cursor:pointer; font-size:13px; line-height:1; display:flex; align-items:center; justify-content:center;
}
.card .icon-del:hover { color:var(--orange); border-color:var(--orange); }
.tag { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  border-radius:999px; padding:2px 9px; }
.tag.v { background:var(--surfaceSoft); color:var(--muted); border:1px solid var(--borderLight); }

/* ── empty state ─────────────────────────────────────── */
.empty { text-align:center; color:var(--muted); padding:70px 20px; }
.empty .ic { font-size:34px; margin-bottom:10px; opacity:.7; }
.empty h3 { color:var(--text); margin:0 0 6px; }
.empty p { margin:0; line-height:1.55; }

/* ── studio (project window) ─────────────────────────── */
.studio { display:flex; flex-direction:column; gap:0; }
.studio-head {
  display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap;
}
.name-input {
  font-size:18px; font-weight:700; letter-spacing:-.01em; color:var(--text);
  background:transparent; border:1px solid transparent; border-radius:8px; padding:5px 9px; min-width:220px;
}
.name-input:hover { border-color:var(--borderLight); }
.name-input:focus { outline:none; border-color:var(--orange); background:var(--surface2); }
.studio-meta { color:var(--muted); font-size:13px; }
.studio-head .actions { margin-left:auto; display:flex; gap:9px; }

.studio-body { display:grid; grid-template-columns:1fr 400px; gap:20px; align-items:start; }
@media (max-width:960px) { .studio-body { grid-template-columns:1fr; } }
.preview-wrap {
  background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; aspect-ratio:1200/675;
}
.preview-wrap iframe { width:100%; height:100%; border:0; display:block; background:#fff; }

.side {
  background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius);
  display:flex; flex-direction:column; height:675px; overflow:hidden;
}
.side-tabs { display:flex; border-bottom:1px solid var(--border); flex:none; }
.side-tab { flex:1; background:transparent; border:0; padding:12px; font-size:13px; font-weight:600;
  color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; }
.side-tab.active { color:var(--text); border-bottom-color:var(--orange); }
.side-pane { display:none; flex:1; min-height:0; flex-direction:column; }
.side-pane.active { display:flex; }

.chat-scroll { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; }
.chat-hint { color:var(--muted); font-size:13px; line-height:1.5; background:var(--surfaceSoft);
  border:1px solid var(--borderLight); border-radius:12px; padding:12px 14px; }
.msg { display:flex; }
.msg.user { justify-content:flex-end; }
.bubble { max-width:85%; padding:9px 13px; border-radius:14px; font-size:13.5px; line-height:1.5; }
.msg.user .bubble { background:var(--orange); color:#fff; border-bottom-right-radius:4px; }
.msg.bot .bubble { background:var(--surfaceSoft); border:1px solid var(--borderLight); border-bottom-left-radius:4px; }
.msg.thinking .bubble { color:var(--muted); font-style:italic; }
.msg.error .bubble { background:#fff0eb; border-color:var(--orange); color:var(--orange); }
.chat-form { flex:none; border-top:1px solid var(--border); padding:12px; display:flex; gap:9px; align-items:flex-end; }
.chat-input { flex:1; resize:none; border:1px solid var(--border); border-radius:10px; padding:9px 11px;
  font-size:13.5px; font-family:var(--font); color:var(--text); background:var(--surface); max-height:120px; }
.chat-input:focus { outline:none; border-color:var(--orange); }

.log-scroll { flex:1; overflow-y:auto; padding:14px 16px; }
.log-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.log-item { display:grid; grid-template-columns:auto 1fr auto; gap:9px; align-items:baseline;
  font-size:13px; padding-bottom:10px; border-bottom:1px solid var(--borderLight); }
.log-kind { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  border-radius:999px; padding:2px 8px; background:var(--surfaceSoft); color:var(--muted); border:1px solid var(--borderLight); }
.log-kind.cl-add { color:var(--green); } .log-kind.cl-remove { color:var(--orange); }
.log-kind.cl-create { color:var(--blue); }
.log-sum { color:var(--text); line-height:1.4; }
.log-time { color:var(--muted); font-size:11.5px; white-space:nowrap; }
.log-empty { color:var(--muted); font-size:13px; }

/* ── inline publish / picker panels ──────────────────── */
.panel {
  background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px 22px; margin-top:18px;
}
.panel h3 { margin:0 0 6px; font-size:16px; }
.panel p.hint { margin:0 0 14px; color:var(--muted); font-size:13px; line-height:1.5; }
.field { display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
.field label { font-size:12px; font-weight:600; color:var(--muted); }
.field input, .field textarea {
  border:1px solid var(--border); border-radius:9px; padding:9px 11px; font-size:14px;
  font-family:var(--font); color:var(--text); background:var(--surface);
}
.field input:focus, .field textarea:focus { outline:none; border-color:var(--orange); }
.panel .panel-actions { display:flex; gap:10px; margin-top:6px; }

/* ── version list ────────────────────────────────────── */
.deck-detail { display:grid; grid-template-columns:1fr 380px; gap:24px; align-items:start; }
@media (max-width:900px){ .deck-detail { grid-template-columns:1fr; } }
.detail-preview { background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; aspect-ratio:1200/675; }
.detail-preview iframe { width:100%; height:100%; border:0; display:block; background:#fff; }
.versions { list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.ver { border:1px solid var(--border); border-radius:12px; padding:12px 14px; background:var(--surface2); }
.ver.current { border-color:var(--orange); background:var(--surface); }
.ver-top { display:flex; align-items:center; gap:9px; }
.ver-top .vn { font-weight:700; }
.ver-top .cur { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--orange); border:1px solid var(--orange); border-radius:999px; padding:1px 7px; }
.ver-meta { color:var(--muted); font-size:12px; margin:4px 0 0; }
.ver-note { color:var(--text); font-size:12.5px; margin:6px 0 0; font-style:italic; }
.ver-actions { display:flex; gap:7px; margin-top:9px; flex-wrap:wrap; }

/* ── slide picker (reuse) ────────────────────────────── */
.slide-pick { list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:7px;
  max-height:340px; overflow-y:auto; }
.slide-pick li { display:flex; align-items:center; gap:11px; padding:9px 12px; border:1px solid var(--border);
  border-radius:10px; background:var(--surface); cursor:pointer; }
.slide-pick li:hover { border-color:var(--orange); }
.slide-pick li.on { border-color:var(--orange); background:#fff6f2; }
.slide-pick input { accent-color:var(--orange); width:16px; height:16px; }
.slide-pick .sidx { font-size:11px; font-weight:700; color:var(--muted); width:22px; }
.slide-pick .slay { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  color:var(--blue); background:#eaf5ff; border-radius:6px; padding:2px 7px; }
.slide-pick .stitle { font-size:13px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── toasts ──────────────────────────────────────────── */
.toast-container { position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:10px; z-index:100; align-items:center; }
.toast { background:var(--text); color:#fff; padding:11px 18px; border-radius:10px; font-size:13.5px;
  box-shadow:var(--shadow); opacity:0; transform:translateY(12px); transition:opacity .3s, transform .3s; max-width:90vw; }
.toast.show { opacity:1; transform:translateY(0); }
.toast.success { background:var(--green); } .toast.error { background:var(--orange); }

.muted-note { color:var(--muted); font-size:12.5px; }
.warn-note { color:var(--orange); font-size:12.5px; margin-top:8px; }