/* ============================================================
   StoryForge — Liquid Glass design system
   Deep navy canvas · translucent glass panels · violet/fuchsia/
   coral gradient accents. Everything reusable lives here; layout
   is composed with Tailwind utilities in the markup.
   ============================================================ */

:root {
  --bg: #070b18;
  --panel: #0d1426;
  --glass-bg: rgba(255, 255, 255, 0.055);
  --glass-bg-strong: rgba(17, 24, 44, 0.72);
  --glass-line: rgba(255, 255, 255, 0.09);
  --glass-line-soft: rgba(255, 255, 255, 0.07);
  --brand: #8b7bff;
  --brand-deep: #6d4dfa;
  --brand-soft: #a795ff;
  --coral: #f2796b;
  --mint: #34d399;
  --amber: #fbbf24;
  --text: #e2e8f0;
  --text-dim: #94a3b8;
  --text-faint: #64748b;
  --radius: 20px;
  --shadow-soft: 0 18px 50px -22px rgba(2, 6, 20, 0.9);
  --shadow-brand: 0 12px 34px -12px rgba(109, 77, 250, 0.55);
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
button { cursor: pointer; font: inherit; color: inherit; }
button:disabled { cursor: not-allowed; opacity: 0.55; }
input, textarea, select { font: inherit; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
iconify-icon { display: inline-block; vertical-align: -0.18em; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }

/* ---------- scrollbars ---------- */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,.13); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.22); }
*::-webkit-scrollbar-track { background: transparent; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* ---------- ambient background pieces ---------- */
.orb {
  position: absolute;
  width: 520px; height: 520px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.34;
  pointer-events: none;
}
.orb-violet  { background: radial-gradient(circle at 30% 30%, rgba(139,123,255,.5), rgba(109,77,250,.12) 70%); }
.orb-fuchsia { background: radial-gradient(circle at 60% 40%, rgba(217,70,239,.38), rgba(217,70,239,.08) 70%); }
.orb-coral   { background: radial-gradient(circle at 50% 50%, rgba(242,121,107,.32), rgba(242,121,107,.06) 70%); }

.bg-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, black 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, black 30%, transparent 78%);
}

/* ---------- glass primitives ---------- */
.glass {
  background: linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.035) 55%);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.06);
}
.glass-strong {
  background: var(--glass-bg-strong);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(26px) saturate(1.3);
  -webkit-backdrop-filter: blur(26px) saturate(1.3);
  border-radius: var(--radius);
  box-shadow: 0 28px 70px -24px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.08);
}
.card { background: linear-gradient(165deg, rgba(255,255,255,.065), rgba(255,255,255,.028)); border: 1px solid var(--glass-line-soft); border-radius: 22px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.05); }
.glow-ring { box-shadow: 0 0 0 1px rgba(139,123,255,.14), 0 30px 80px -30px rgba(109,77,250,.4); }
.cta-ring { background: linear-gradient(135deg, rgba(139,123,255,.55), rgba(242,121,107,.4) 50%, rgba(139,123,255,.28)); box-shadow: 0 30px 90px -30px rgba(109,77,250,.5); }

/* ---------- typography helpers ---------- */
.kicker { font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--brand-soft); }
.gtext {
  background: linear-gradient(92deg, #c4b8ff 0%, #8b7bff 38%, #e9a49a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ---------- logo ---------- */
.logo-mark {
  width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto;
  display: inline-flex; align-items: flex-end; justify-content: center; gap: 2px; padding: 5px;
  background: linear-gradient(145deg, #9f8bff, #5b3fd6);
  box-shadow: 0 6px 16px -4px rgba(109,77,250,.6), inset 0 1px 0 rgba(255,255,255,.28);
}
.logo-mark span { width: 3px; border-radius: 4px; background: #fff; display: block; }
.logo-mark span:nth-child(1) { height: 8px; opacity: .74; }
.logo-mark span:nth-child(2) { height: 13px; }
.logo-mark span:nth-child(3) { height: 10px; opacity: .84; }

/* ---------- buttons ---------- */
.btn-primary, .btn-ghost, .btn-soft, .btn-danger {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 12px; padding: 9px 14px;
  font-size: 13px; font-weight: 700; letter-spacing: -0.01em;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, filter .18s ease;
  border: 1px solid transparent; white-space: nowrap;
}
.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #a78bfa 0%, #7c5cfa 48%, #6d4dfa 100%);
  box-shadow: var(--shadow-brand), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-primary:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.07); box-shadow: 0 16px 40px -12px rgba(109,77,250,.65), inset 0 1px 0 rgba(255,255,255,.28); }
.btn-primary:active:not(:disabled) { transform: translateY(0); }
.btn-ghost {
  color: #dbe2f0;
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.btn-ghost:hover:not(:disabled) { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); }
.btn-soft {
  color: var(--brand-soft);
  background: rgba(139,123,255,.12);
  border-color: rgba(139,123,255,.25);
}
.btn-soft:hover:not(:disabled) { background: rgba(139,123,255,.2); }
.btn-danger {
  color: #fda4af;
  background: rgba(244,63,94,.1);
  border-color: rgba(244,63,94,.28);
}
.btn-danger:hover:not(:disabled) { background: rgba(244,63,94,.18); }
.btn-text { background: none; border: 0; color: var(--brand-soft); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; padding: 4px 2px; }
.btn-text:hover { color: #d6ceff; }

/* ---------- nav ---------- */
.nav-pill { padding: 7px 12px; border-radius: 10px; transition: background .15s, color .15s; }
.nav-pill:hover { color: #fff; background: rgba(255,255,255,.06); }

/* ---------- hero phone + floating chips ---------- */
.phone-frame {
  position: relative; width: min(76vw, 350px); aspect-ratio: 9 / 16;
  margin-inline: auto; border-radius: 34px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(165deg, #131b33, #0a0f20);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.1);
}
.phone-notch {
  position: absolute; z-index: 20; top: 12px; left: 50%; transform: translateX(-50%);
  width: 86px; height: 22px; border-radius: 20px; background: rgba(3,6,14,.85);
  border: 1px solid rgba(255,255,255,.08);
}
.story-slide { position: absolute; inset: 0; }
.story-slide-a { background: radial-gradient(circle at 70% 18%, rgba(217,70,239,.55), transparent 52%), radial-gradient(circle at 20% 80%, rgba(109,77,250,.55), transparent 55%), linear-gradient(160deg, #2b2350 0%, #131a38 58%, #0c1124 100%); }
.story-slide-a::before, .story-slide-a::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(2px);
}
.story-slide-a::before { width: 130px; height: 130px; right: -28px; top: 12%; background: radial-gradient(circle, rgba(242,121,107,.55), transparent 70%); }
.story-slide-a::after { width: 90px; height: 90px; left: -18px; top: 34%; background: radial-gradient(circle, rgba(139,123,255,.5), transparent 70%); }
.story-shade { position: absolute; inset: 32% 0 0; background: linear-gradient(transparent, rgba(4,8,18,.9)); }
.story-copy { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 24px; }
.story-copy h3 { margin: 0 0 8px; color: #fff; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.22; text-shadow: 0 2px 8px rgba(0,0,0,.85); }
.story-copy p { margin: 0; color: #dbe3f2; font-size: 12.5px; line-height: 1.45; text-shadow: 0 1px 5px rgba(0,0,0,.8); }

.chip {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(13,20,38,.6);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.7);
  max-width: 210px;
}
.chip strong { display: block; font-size: 11.5px; color: #fff; letter-spacing: -0.01em; }
.chip small { display: block; font-size: 10px; color: #93a1bd; margin-top: 1px; }
.chip-ico { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; }

/* ---------- bento ---------- */
.bento { padding: 22px; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.bento:hover { transform: translateY(-3px); border-color: rgba(139,123,255,.32); box-shadow: 0 26px 60px -24px rgba(2,6,20,.95), 0 0 0 1px rgba(139,123,255,.12); }
.bento-wide { grid-column: span 2; }
@media (max-width: 640px) { .bento-wide { grid-column: span 1; } }
.bento-ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 1px solid rgba(255,255,255,.09); }
.tag-pill { font-size: 9px; font-weight: 800; letter-spacing: .14em; color: #b9aeff; background: rgba(139,123,255,.14); border: 1px solid rgba(139,123,255,.28); border-radius: 999px; padding: 4px 9px; }
.tag-mint { color: #6ee7b7; background: rgba(52,211,153,.1); border-color: rgba(52,211,153,.28); }

.mock-row { display: flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.035); border-radius: 12px; padding: 8px 10px; }
.mock-thumb { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: rgba(255,255,255,.85); flex: 0 0 auto; }
.mock-lines { flex: 1; display: grid; gap: 5px; }
.mock-lines i { height: 6px; border-radius: 4px; background: rgba(255,255,255,.13); display: block; }
.mock-check { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: #34d399; background: rgba(52,211,153,.14); flex: 0 0 auto; }

/* ---------- proof metrics ---------- */
.metric-card { border: 1px solid var(--glass-line-soft); background: rgba(255,255,255,.045); border-radius: 16px; padding: 16px 14px; display: grid; gap: 3px; }
.metric-card strong { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; background: linear-gradient(92deg, #fff, #c4b8ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.metric-card span { font-size: 11.5px; color: var(--text-dim); }
.fmt-chip { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: #9fb0d0; }

/* ---------- workflow steps ---------- */
.step-card { padding: 20px; transition: transform .25s ease, border-color .25s ease; }
.step-card:hover { transform: translateY(-3px); border-color: rgba(139,123,255,.3); }
.step-num { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 800; background: linear-gradient(92deg, #c4b8ff, #8b7bff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.step-card h3 { margin: 12px 0 6px; font-size: 15px; font-weight: 800; color: #fff; letter-spacing: -0.015em; }
.step-card p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-dim); }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 18px; }
.modal.hidden { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(3,6,14,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.modal-card { position: relative; z-index: 2; width: min(100%, 400px); max-height: calc(100dvh - 36px); overflow: auto; padding: 26px 24px; animation: modalIn .3s cubic-bezier(.16,1,.3,1) both; }
@keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-x { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: #8fa0bf; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); }
.modal-x:hover { color: #fff; background: rgba(255,255,255,.1); }

.auth-tab { padding: 9px 10px; border-radius: 9px; color: #8fa0bf; background: transparent; border: 0; font-weight: 700; transition: background .15s, color .15s; }
.auth-tab.active { color: #fff; background: rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }

/* ---------- fields ---------- */
.field { display: grid; gap: 6px; }
.field > span { font-size: 11px; font-weight: 700; color: #8fa0bf; letter-spacing: .01em; }
.input {
  width: 100%; border-radius: 12px; border: 1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.05); color: #f1f5fb;
  padding: 10px 12px; font-size: 13px; outline: none;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.input::placeholder { color: #5a6a8a; }
.input:focus { border-color: rgba(139,123,255,.6); box-shadow: 0 0 0 3px rgba(139,123,255,.16); background: rgba(255,255,255,.065); }
textarea.input { resize: vertical; line-height: 1.55; font-size: 12.5px; }
select.input option { background: #0d1426; }
.form-error { border-radius: 12px; border: 1px solid rgba(244,63,94,.3); background: rgba(244,63,94,.1); color: #fda4af; font-size: 12px; padding: 10px 12px; }
.form-ok { border-radius: 12px; border: 1px solid rgba(52,211,153,.3); background: rgba(52,211,153,.08); color: #6ee7b7; font-size: 12px; padding: 10px 12px; }

/* ---------- status pills ---------- */
.status-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 10px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; border: 1px solid; white-space: nowrap; }
.status-pill i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-pill.queued    { color: #fcd34d; background: rgba(251,191,36,.09);  border-color: rgba(251,191,36,.3); }
.status-pill.published { color: #6ee7b7; background: rgba(52,211,153,.09); border-color: rgba(52,211,153,.3); }
.status-pill.failed    { color: #fda4af; background: rgba(244,63,94,.09);  border-color: rgba(244,63,94,.3); }
.status-pill.ready     { color: #b9aeff; background: rgba(139,123,255,.1); border-color: rgba(139,123,255,.32); }

/* ---------- sidebar / app shell ---------- */
/* NOTE: display comes from utility classes (flex/hidden) in the markup so
   Tailwind's `hidden` reliably wins on mobile — no double off-canvas. */
.sidebar {
  width: 250px; min-width: 250px;
  background: linear-gradient(180deg, rgba(13,19,38,.86), rgba(8,12,26,.9));
  border-right: 1px solid rgba(255,255,255,.07);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  padding: 24px 14px 16px;
}
.side-item {
  width: 100%; display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 11px; border: 1px solid transparent;
  color: #94a3b8; background: transparent; font-size: 13px; font-weight: 600;
  text-align: left; transition: background .16s, color .16s, border-color .16s;
}
.side-item:hover { color: #fff; background: rgba(255,255,255,.055); }
.side-item.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(139,123,255,.22), rgba(139,123,255,.07));
  border-color: rgba(139,123,255,.26);
  box-shadow: inset 3px 0 0 var(--brand);
}
.side-item.active iconify-icon { color: #c4b8ff; }
.side-item iconify-icon { font-size: 17px; color: #7488ab; flex: 0 0 auto; }
.side-item .side-tag { margin-left: auto; font-size: 8.5px; font-weight: 800; letter-spacing: .1em; color: #c4b8ff; background: rgba(139,123,255,.2); border-radius: 5px; padding: 3px 5px; }

.workspace-chip { display: flex; align-items: center; gap: 9px; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.05); padding: 9px; }
.workspace-chip strong { display: block; font-size: 12px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.workspace-chip small { display: block; font-size: 9.5px; color: #7d8db0; margin-top: 1px; }
.avatar {
  width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px;
  background: linear-gradient(135deg, #f2a091, #b45bd0); color: #fff; font-size: 12px; font-weight: 800;
}
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); margin-left: auto; box-shadow: 0 0 0 3px rgba(52,211,153,.15); flex: 0 0 auto; }

.nav-label { color: #5d6d90; font-size: 9px; letter-spacing: .18em; font-weight: 800; padding: 0 12px; margin: 0 0 8px; text-transform: uppercase; }

.help-card { border-radius: 14px; background: linear-gradient(150deg, rgba(139,123,255,.14), rgba(139,123,255,.04)); border: 1px solid rgba(139,123,255,.22); padding: 13px; }
.help-card strong { font-size: 12px; color: #fff; }
.help-card p { color: #9aa8c7; line-height: 1.5; font-size: 10.5px; margin: 5px 0 10px; }

.topbar {
  height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 clamp(18px, 4vw, 44px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(7,11,24,.62);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  position: sticky; top: 0; z-index: 30;
}
.top-kicker { color: #5d6d90; font-weight: 800; font-size: 9px; letter-spacing: .18em; margin: 0 0 4px; text-transform: uppercase; }
.topbar h1 { margin: 0; color: #fff; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.icon-button { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: #8fa0bf; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); }
.icon-button:hover { color: #fff; background: rgba(255,255,255,.1); }
.icon-button .notification-dot { position: absolute; top: 9px; right: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 3px rgba(242,121,107,.18); }

/* ---------- misc app components ---------- */
.thumb-fallback { display: grid; place-items: center; color: #66779c; background: linear-gradient(155deg, #1a2440, #101730); }
.panel-title { color: #fff; font-size: 15px; font-weight: 800; letter-spacing: -0.015em; margin: 0; }
.panel-sub { color: #7d8db0; font-size: 11.5px; margin: 3px 0 0; }
.section-ico { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; color: #c4b8ff; background: rgba(139,123,255,.14); border: 1px solid rgba(139,123,255,.24); }

.row-item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; width: 100%; text-align: left; border-radius: 14px; border: 1px solid transparent; padding: 10px 12px; transition: background .15s, border-color .15s; }
.row-item:hover { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.08); }

.tip-box { display: flex; gap: 10px; border-radius: 14px; border: 1px solid rgba(251,191,36,.22); background: rgba(251,191,36,.07); padding: 12px; font-size: 11.5px; line-height: 1.5; color: #cbb26a; }
.tip-box strong { color: #fcd34d; }

.step-link { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border-radius: 14px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.035); padding: 12px; transition: border-color .16s, background .16s; }
.step-link:hover { border-color: rgba(139,123,255,.32); background: rgba(139,123,255,.07); }
.step-link .n { font-family: ui-monospace, monospace; font-size: 12px; font-weight: 800; color: #c4b8ff; }
.step-link strong { display: block; font-size: 12.5px; color: #fff; }
.step-link small { display: block; font-size: 10.5px; color: #7d8db0; margin-top: 2px; }

.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .8s linear infinite; flex: 0 0 auto; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- toasts ---------- */
#toast-root { position: fixed; z-index: 90; right: 18px; bottom: 18px; display: grid; gap: 8px; max-width: min(92vw, 380px); }
.toast {
  display: flex; align-items: flex-start; gap: 10px;
  border-radius: 14px; padding: 12px 14px; font-size: 12.5px; font-weight: 600; color: #e6ecf7;
  background: rgba(13,20,38,.92); border: 1px solid rgba(52,211,153,.35);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 22px 50px -18px rgba(0,0,0,.8);
  animation: toastIn .35s cubic-bezier(.16,1,.3,1) both;
}
.toast.error { border-color: rgba(244,63,94,.4); }
.toast .t-ico { width: 24px; height: 24px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; background: rgba(52,211,153,.16); color: #6ee7b7; }
.toast.error .t-ico { background: rgba(244,63,94,.16); color: #fda4af; }
.toast button { margin-left: auto; color: #7d8db0; background: none; border: 0; padding: 2px; }
.toast button:hover { color: #fff; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
.toast.out { transition: opacity .3s, transform .3s; opacity: 0; transform: translateY(8px); }

/* ---------- story player ---------- */
.player { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: radial-gradient(circle at center, #232c47 0%, #10162b 58%, #090d1c 100%); animation: fadeIn .25s both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.player-phone {
  position: relative; width: min(84vw, 380px); aspect-ratio: 9 / 16; max-height: 82dvh;
  border-radius: 32px; overflow: hidden; border: 6px solid #0b1020;
  background: #1a2340; box-shadow: 0 40px 100px -20px rgba(0,0,0,.9);
}
.player-progress { position: absolute; z-index: 5; top: 14px; left: 16px; right: 16px; display: flex; gap: 5px; }
.player-progress i { flex: 1; height: 3px; border-radius: 6px; background: rgba(255,255,255,.32); transition: background .25s; }
.player-progress i.seen { background: #fff; }
.player-page { position: absolute; inset: 0; background: linear-gradient(150deg, #37456a, #141d38) center/cover no-repeat; }
.player-tap { position: absolute; top: 76px; bottom: 0; width: 34%; border: 0; background: transparent; z-index: 6; }
.player-tap.back { left: 0; } .player-tap.forward { right: 0; width: 66%; cursor: default; }
.player-tap.forward.clickable { cursor: pointer; width: 34%; }

/* ---------- editor ---------- */
.phone-editor {
  position: relative; width: min(100%, 292px); aspect-ratio: 9 / 16; border-radius: 28px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.14); background: linear-gradient(165deg, #131b33, #0a0f20);
  box-shadow: 0 30px 70px -24px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.08);
  margin-inline: auto;
}
.phone-speaker { position: absolute; z-index: 20; top: 10px; left: 50%; transform: translateX(-50%); width: 64px; height: 18px; border-radius: 16px; background: rgba(3,6,14,.85); border: 1px solid rgba(255,255,255,.08); }
.phone-slide { position: absolute; inset: 0; background: linear-gradient(160deg, #43507a, #182140) center/cover no-repeat; }
.phone-empty { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 8px; color: #7488ab; font-size: 10.5px; }
.slide-thumb { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; border-radius: 13px; border: 1px solid transparent; padding: 7px; transition: background .15s, border-color .15s; }
.slide-thumb:hover { background: rgba(255,255,255,.05); }
.slide-thumb.active { background: rgba(139,123,255,.12); border-color: rgba(139,123,255,.3); }
.slide-thumb-img { position: relative; width: 46px; height: 62px; flex: 0 0 auto; border-radius: 9px; background: #16203c center/cover no-repeat; display: grid; place-items: center; color: #66779c; border: 1px solid rgba(255,255,255,.09); }
.slide-thumb-img b { position: absolute; left: 4px; top: 4px; width: 16px; height: 16px; border-radius: 6px; display: grid; place-items: center; font-size: 8.5px; background: rgba(3,6,14,.8); color: #cbd5e6; border: 1px solid rgba(255,255,255,.12); }
.slide-thumb span { min-width: 0; font-size: 11px; color: #9fb0d0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.slide-thumb.active span { color: #e3e9f5; }
.progress-bars { position: absolute; z-index: 10; top: 36px; left: 14px; right: 14px; display: flex; gap: 4px; }
.progress-bars i { flex: 1; height: 3px; border-radius: 6px; background: rgba(255,255,255,.3); }
.progress-bars i.seen { background: #fff; }

/* archive cards */
.archive-card { position: relative; overflow: hidden; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.archive-card:hover { transform: translateY(-3px); border-color: rgba(139,123,255,.35); }
.archive-card.selected { border-color: rgba(139,123,255,.55); box-shadow: 0 0 0 3px rgba(139,123,255,.16), var(--shadow-soft); }
.archive-cover { position: relative; display: block; width: 100%; aspect-ratio: 9 / 12.6; background: #131b33 center/cover no-repeat; border: 0; }
.archive-cover .cover-veil { position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(4,8,18,.85)); }
.archive-slides-chip { position: absolute; z-index: 3; left: 12px; top: 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(6,10,22,.62); color: #e6ecf7; font-size: 10px; font-weight: 800; padding: 5px 9px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.archive-play { position: absolute; z-index: 3; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; border: 1px solid rgba(255,255,255,.26); background: rgba(6,10,22,.62); color: #fff; font-size: 10.5px; font-weight: 800; padding: 6px 10px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .16s; }
.archive-play:hover { background: var(--brand-deep); }
.archive-edit { position: absolute; z-index: 3; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: rgba(6,10,22,.62); color: #e6ecf7; font-size: 10.5px; font-weight: 800; padding: 6px 10px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.archive-edit:hover { background: rgba(255,255,255,.14); }
.check-box { position: relative; display: inline-flex; width: 20px; height: 20px; flex: 0 0 auto; }
.check-box input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.check-box i { width: 100%; height: 100%; border-radius: 7px; border: 1.5px solid rgba(255,255,255,.28); background: rgba(6,10,22,.5); display: grid; place-items: center; color: transparent; transition: all .15s; pointer-events: none; font-size: 11px; }
.check-box input:checked + i { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }

/* code output */
.code-panel { border-radius: 18px; border: 1px solid rgba(255,255,255,.09); background: rgba(4,7,16,.66); }
.code-panel pre { margin: 0; padding: 14px 16px; overflow: auto; max-height: 260px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; line-height: 1.6; color: #8ba1c7; white-space: pre-wrap; word-break: break-all; }

/* boot screen */
.boot-screen { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; align-content: center; gap: 16px; background: var(--bg); color: #7d8db0; font-size: 12.5px; transition: opacity .45s ease; }
.boot-screen.done { opacity: 0; pointer-events: none; }

/* history */
.legend-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.legend-dot.queued { background: var(--amber); } .legend-dot.published { background: var(--mint); } .legend-dot.failed { background: #fb7185; }

/* checkbox row (found links) */
.found-link { display: flex; align-items: center; gap: 9px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.035); border-radius: 11px; padding: 8px 10px; font-size: 11px; color: #9fb0d0; cursor: pointer; transition: border-color .15s; }
.found-link:hover { border-color: rgba(139,123,255,.3); }
.found-link input { accent-color: var(--brand-deep); }
.found-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- motion / a11y ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@keyframes sheetIn { from { transform: translateX(-102%); } to { transform: none; } }

/* The mobile hamburger must never appear on desktop even if utility order flips. */
@media (min-width: 1024px) {
  .topbar [data-action="mobile-nav"] { display: none !important; }
}

/* ---------- Story Builder ---------- */
.b-canvas-wrap { position: relative; width: 100%; max-width: 350px; margin-inline: auto; }
.b-canvas {
  position: relative; width: 405px; height: 718px; transform-origin: top left;
  background: #0b1020 radial-gradient(circle at 30% 18%, #1d2b55 0%, #0b1020 62%);
  border-radius: 22px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
  box-shadow: 0 30px 70px -24px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.08);
}
.b-el { cursor: grab; }
.b-el:active { cursor: grabbing; }
.b-el.selected { outline: 2px solid #8b7bff; box-shadow: 0 0 0 4px rgba(139,123,255,.18); z-index: 4; }
.b-el img { pointer-events: none; }
.b-handle {
  position: absolute; right: -8px; bottom: -8px; width: 15px; height: 15px; border-radius: 5px;
  background: #8b7bff; border: 2px solid #0b1020; cursor: nwse-resize; z-index: 6;
  box-shadow: 0 2px 8px rgba(0,0,0,.55);
}
.b-el-empty {
  position: absolute; inset: 6px; display: grid; place-items: center; align-content: center; gap: 6px;
  color: #93a7cf; font-size: 11px; pointer-events: none;
  background: repeating-linear-gradient(45deg, rgba(139,123,255,.07) 0 10px, transparent 10px 20px);
  border: 1.5px dashed rgba(139,123,255,.55); border-radius: 12px;
}
.b-tab {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 6px; font-size: 11.5px; font-weight: 800; color: #7d8db0;
  border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer;
}
.b-tab:hover { color: #c4b8ff; }
.b-tab.active { color: #fff; border-bottom-color: #8b7bff; background: rgba(139,123,255,.07); }
.b-subtab { padding: 7px 4px; border-radius: 9px; color: #7d8db0; font-weight: 700; font-size: 11px; }
.b-subtab:hover { color: #c4b8ff; }
.b-subtab.active { background: rgba(139,123,255,.18); color: #fff; }
.b-unsplash-card { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); background: #0d1426; }
.b-unsplash-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.b-unsplash-by {
  position: absolute; left: 6px; top: 6px; border-radius: 999px; background: rgba(6,10,22,.72);
  backdrop-filter: blur(6px); font-size: 9px; font-weight: 700; color: #cbd5e6; padding: 3px 7px;
}
.b-unsplash-actions { display: flex; gap: 6px; padding: 7px; }
.b-unsplash-actions button { flex: 1; justify-content: center; }
.b-drop {
  display: grid; justify-items: center; gap: 6px; padding: 26px 16px; text-align: center;
  border-radius: 16px; border: 1.5px dashed rgba(139,123,255,.45);
  background: rgba(139,123,255,.05); color: #9fb0d0; cursor: pointer; width: 100%;
}
.b-drop:hover { background: rgba(139,123,255,.1); }
.b-drop strong { font-size: 12.5px; color: #e3e9f5; }
.b-drop small { font-size: 10px; color: #64748b; }
.b-empty-tip {
  display: grid; justify-items: center; gap: 8px; padding: 30px 18px; text-align: center;
  color: #64748b; border-radius: 14px; border: 1px dashed rgba(255,255,255,.12);
}
.b-empty-tip p { margin: 0; font-size: 11px; line-height: 1.55; max-width: 230px; }
.b-rail::-webkit-scrollbar { height: 6px; width: 6px; }
.b-rail::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 6px; }
.input-range { width: 100%; accent-color: #8b7bff; height: 28px; }
.input-color {
  width: 36px; height: 36px; flex: 0 0 auto; padding: 3px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); cursor: pointer;
}
/* player: element-based slides */
.player-elements { position: absolute; top: 0; left: 0; transform-origin: top left; background: #0b1020; }

@media (max-width: 1023px) {
  .b-canvas-wrap { max-width: 305px; }
  .b-canvas { border-radius: 18px; }
}
/* Fullscreen editor / mobile bottom dock */
body.pro-active{overflow:hidden;overscroll-behavior:none;height:100dvh}
.pro-active #app>div>aside,.pro-active .topbar{display:none!important}
.pro-active #app>div>div>main{padding:0;max-width:none}
.pro-editor{height:100dvh;height:100svh;height:100dvh;display:flex;flex-direction:column;background:#10131c;position:fixed;inset:0;z-index:30;color:#e2e8f0}
.pro-header{height:58px;flex:none;display:flex;align-items:center;gap:7px;padding:8px 12px;border-bottom:1px solid #ffffff15;background:#181d2b}
.pro-header input{max-width:320px;min-width:40px;flex:1}.pro-header button{padding:8px 12px;white-space:nowrap}
.pro-body{display:flex;flex:1;min-height:0}.pro-left{width:170px;padding:16px;overflow:auto;border-right:1px solid #ffffff15;flex:none}.pro-left .slide-thumb{margin-bottom:10px;width:100%}
.pro-stage{min-width:0;flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;background:radial-gradient(ellipse at center,#252b3c,#10131c)}
.pro-progress{display:flex;gap:4px;padding:10px 20px;flex:none}.pro-progress button{height:4px;background:#ffffff30;flex:1;border-radius:4px}.pro-progress button.active{background:#a899ff}
.pro-viewport{flex:1;min-height:0;display:grid;place-items:center;overflow:hidden;touch-action:none;overscroll-behavior:none;user-select:none}
.pro-editor .b-canvas-wrap{max-width:none;flex:none;margin:0;position:relative}.pro-editor .b-canvas{border-radius:0;overflow:hidden;position:absolute;left:0;top:0}
.pro-editor .b-el.selected{z-index:auto;outline:3px solid #b4a4ff}.pro-editor .b-el{touch-action:none}.pro-editor .b-el.selected{overflow:visible!important}.pro-editor .b-handle{width:34px;height:34px;right:-12px;bottom:-12px;background:white;border:5px solid #8870ff;border-radius:50%;z-index:100;touch-action:none;box-shadow:0 0 0 2px #191329}
.pro-panel{width:310px;flex:none;display:flex;flex-direction:column;border-left:1px solid #ffffff15;background:#191e2c;min-height:0}.pro-panel-title{display:flex;justify-content:space-between;align-items:center;padding:12px;text-transform:capitalize}.pro-panel-content{overflow-y:auto;overscroll-behavior:contain;padding:16px;display:flex;flex-direction:column;gap:14px}.pro-panel-content p{font-size:12px;color:#94a3b8}.pro-panel-content input,.pro-panel-content textarea,.pro-panel-content select{font-size:16px!important}.pro-panel-content button{min-height:40px}
.pro-status{display:flex;align-items:center;justify-content:center;gap:8px;font-size:10px;padding:5px;flex:none}.pro-status button{padding:5px;font-size:10px}.pro-timeline{height:54px;flex:none;display:flex;gap:6px;overflow:auto;padding:7px 12px;align-items:center;border-top:1px solid #ffffff10}.pro-timeline button{min-width:34px;white-space:nowrap;padding:6px}
.pro-dock{display:flex;flex:none;overflow-x:auto;justify-content:center;background:#181d2b;border-top:1px solid #ffffff20;padding:4px 8px max(6px,env(safe-area-inset-bottom));gap:5px}.pro-dock button{min-width:60px;padding:5px;border-radius:10px;color:#9ba7bf;display:flex;flex-direction:column;align-items:center;gap:2px}.pro-dock button b{font-size:22px;line-height:24px}.pro-dock button span{font-size:10px}.pro-dock button.active{background:#8470ff28;color:#c5baff}
.pro-safe{position:absolute;inset:60px 24px;pointer-events:none;border:1px dashed #ffffff70;z-index:999}.pro-bg{position:absolute;width:100%;height:100%;object-fit:cover;pointer-events:none}.pro-cta{position:absolute;left:30px;right:30px;bottom:65px;padding:14px;text-align:center;font-size:18px;font-weight:700;pointer-events:none}.snap-x:after{content:'';position:absolute;top:0;bottom:0;left:50%;border-left:2px solid #f58edb;pointer-events:none}.snap-y:before{content:'';position:absolute;left:0;right:0;top:50%;border-top:2px solid #f58edb;z-index:999;pointer-events:none}
@media(max-width:1023px){.pro-left{display:none}.pro-panel{display:none;position:absolute;bottom:66px;left:0;right:0;width:100%;height:46%;z-index:50;border:1px solid #ffffff25;border-radius:20px 20px 0 0;box-shadow:0 -15px 60px #0008}.sheet-open .pro-panel{display:flex}.sheet-open .pro-viewport{padding-bottom:0}.pro-dock{justify-content:flex-start;z-index:60}.pro-header{padding:6px;height:52px;gap:4px}.pro-header button{padding:7px;font-size:11px}.pro-header input{font-size:13px!important;padding:6px}.pro-status span{max-width:180px;white-space:nowrap;overflow:hidden}.pro-panel-title{padding:8px 16px}.pro-panel-content{padding:12px 16px}.pro-timeline{height:47px}}
.pro-active #toast-root{bottom:145px;pointer-events:none}.pro-active #toast-root button{pointer-events:auto}
@media(max-height:520px) and (orientation:landscape){.pro-dock button{padding:0 4px}.pro-dock button b{font-size:16px;line-height:18px}.pro-header{height:42px}.pro-timeline{height:34px}.pro-status{padding:1px}.pro-panel{bottom:45px;height:65%}}
/* Background library + icon-first editor */
.pro-svg{display:block;width:22px;height:22px;flex:none}.pro-icon-btn{width:42px;min-width:42px;min-height:42px!important;padding:9px!important;justify-content:center}.pro-icon-btn:hover,.pro-dock button:hover{background:#8874ff30;color:#e9e2ff}.pro-editor button:focus-visible{outline:2px solid #baa9ff;outline-offset:3px}.pro-dock button{min-width:48px;min-height:48px;justify-content:center;padding:10px}.pro-header .pro-icon-btn{width:38px;min-width:38px;min-height:38px!important;padding:8px!important}.pro-bg-tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;background:#101420;padding:4px;border-radius:12px}.pro-bg-tabs button{display:grid;place-items:center;min-height:42px;border-radius:9px;color:#94a3b8}.pro-bg-tabs button.active{background:#8b75ff30;color:#c6baff;box-shadow:inset 0 0 0 1px #9d85ff66}.pro-swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.pro-swatch{aspect-ratio:1;border:2px solid #ffffff20;border-radius:13px;min-height:42px!important}.pro-swatch.active{outline:2px solid white;outline-offset:3px}.pro-gradients{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.pro-gradients button{height:76px;border-radius:12px;border:1px solid #ffffff20;display:flex;align-items:flex-end;padding:7px;text-align:left}.pro-gradients button span{font-size:10px;font-weight:700;color:white;text-shadow:0 1px 5px black}.pro-color-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pro-color-pair input[type=color],.pro-panel-content input[type=color]{width:100%;height:44px;padding:4px;cursor:pointer}.pro-bg-footer{display:flex;align-items:center;gap:12px;border-top:1px solid #ffffff10;padding-top:12px}.pro-bg-footer small{color:#94a3b8;font-size:11px}.pro-upload-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-height:145px;border:1px dashed #aa97ff80;border-radius:18px;background:#8b75ff10;color:#c5b7ff}.pro-upload-tile .pro-svg{width:36px;height:36px}.pro-upload-tile span{font-size:11px}.pro-bg-unsplash [data-action=b-un-add]{display:none}.pro-panel-content>.pro-icon-btn{align-self:flex-start}.pro-timeline .pro-icon-btn{min-width:36px;width:36px;min-height:36px!important;padding:6px!important}
@media(max-width:1023px){.pro-header .pro-icon-btn{min-width:34px;width:34px;padding:6px!important}.pro-gradients button{height:84px}.pro-swatches{grid-template-columns:repeat(8,1fr);gap:7px}.pro-swatch{min-height:30px!important;border-radius:9px}.pro-dock{padding-bottom:max(6px,env(safe-area-inset-bottom))}.pro-status .pro-icon-btn{min-width:30px;width:30px;min-height:30px!important;padding:4px!important}.pro-status .pro-svg{width:18px;height:18px}}
/* Icon + text labels restored. Keep mobile editor inside the viewport. */
.pro-editor .pro-icon-btn{width:auto;min-width:42px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.pro-editor .pro-btn-label{display:none;font-size:11px;line-height:1.2}
.pro-editor .pro-dock button{min-width:58px;flex-direction:column;gap:4px}
.pro-editor .pro-dock-label{display:block;font-size:10px;line-height:1.2}
.pro-bg-tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:7px 2px}
.pro-bg-tabs button span{font-size:9px;line-height:1.2}
.pro-editor .pro-header .pro-icon-btn{flex-direction:column;gap:2px;min-width:38px;padding:5px!important}
.pro-editor .pro-header .pro-btn-label{font-size:9px}
.pro-editor .pro-header{height:66px}
.pro-editor .pro-timeline .pro-icon-btn{width:auto;min-width:36px}
.pro-editor .pro-status .pro-icon-btn{width:auto}
@media(max-width:1023px){.pro-editor .pro-header{height:60px}.pro-editor .pro-header input{width:60px}.pro-editor .pro-dock{min-height:66px}.pro-editor .pro-panel{bottom:calc(70px + env(safe-area-inset-bottom))}.pro-editor .pro-status .pro-btn-label{font-size:9px}.pro-editor .pro-status>span{max-width:130px}.pro-editor .pro-header .pro-svg{width:18px;height:18px}}