@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

/* ============ Meta-SaaS prototype — Railway-flavored dark theme ============ */
:root{
  --bg:#0d0b13;
  --surface:#161320;
  --surface-2:#1c1827;
  --surface-3:#272234;
  --line:#2a2640;
  --line-soft:#211d2e;
  --text:#f3f1f8;
  --muted:#a39eb6;
  --faint:#6e6884;
  --accent:#9a6bff;          /* Railway purple */
  --accent-2:#e35a96;        /* pink */
  --grad:linear-gradient(135deg,#9a6bff 0%,#e35a96 100%);
  --accent-ink:#ffffff;
  --accent-dim:rgba(154,107,255,.14);
  --accent-soft:#c7adff;     /* light accent (links, code, chips) */
  --glow:rgba(154,107,255,.4);
  --bg-glow-1:rgba(154,107,255,.10);
  --bg-glow-2:rgba(227,90,150,.06);
  --shell-1:rgba(18,15,26,.6);
  --shell-2:rgba(13,11,19,.78);
  --nav-active-fg:#fff;
  --ok:#46d48a;
  --warn:#f1b24a;
  --err:#ff5d6c;
  --info:#6aa8ff;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Hanken Grotesk',ui-sans-serif,system-ui,sans-serif;
  --radius:13px;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.18);
}
/* ===== Supabase theme (dark neutral + signature green) ===== */
html[data-theme="supabase"]{
  --bg:#131313;
  --surface:#191919;
  --surface-2:#1f1f1f;
  --surface-3:#2a2a2a;
  --line:#2e2e2e;
  --line-soft:#242424;
  --text:#ededed;
  --muted:#9a9a9a;
  --faint:#6b6b6b;
  --accent:#3ecf8e;          /* Supabase green */
  --accent-2:#249b6b;
  --grad:linear-gradient(135deg,#3ecf8e 0%,#249b6b 100%);
  --accent-dim:rgba(62,207,142,.13);
  --accent-soft:#7ee6b4;
  --glow:rgba(62,207,142,.34);
  --bg-glow-1:rgba(62,207,142,.08);
  --bg-glow-2:rgba(62,207,142,.04);
  --shell-1:rgba(20,20,20,.6);
  --shell-2:rgba(15,15,15,.8);
  --nav-active-fg:#fff;
}
/* ===== AWS Console (dark) theme — navy slate + Amazon orange ===== */
html[data-theme="aws"]{
  --bg:#0f1b2d;
  --surface:#192534;
  --surface-2:#1f2d3d;
  --surface-3:#27384b;
  --line:#2e4156;
  --line-soft:#233140;
  --text:#e9eef3;
  --muted:#93a3b6;
  --faint:#6c7d90;
  --accent:#ff9900;          /* Amazon orange */
  --accent-2:#ec7211;
  --grad:linear-gradient(135deg,#ff9900 0%,#ec7211 100%);
  --accent-ink:#fff;
  --accent-dim:rgba(255,153,0,.13);
  --accent-soft:#ffb84d;
  --glow:rgba(255,153,0,.30);
  --bg-glow-1:rgba(255,153,0,.06);
  --bg-glow-2:rgba(236,114,17,.05);
  --shell-1:rgba(15,27,45,.72);
  --shell-2:rgba(15,27,45,.82);
  --nav-active-fg:#fff;
}
/* ===== GitHub dark theme (slate + green buttons, blue links) ===== */
html[data-theme="github"]{
  --bg:#0d1117;
  --surface:#161b22;
  --surface-2:#1c2128;
  --surface-3:#21262d;
  --line:#30363d;
  --line-soft:#21262d;
  --text:#e6edf3;
  --muted:#7d8590;
  --faint:#6e7681;
  --accent:#3fb950;          /* GitHub green */
  --accent-2:#238636;
  --grad:linear-gradient(135deg,#3fb950 0%,#238636 100%);
  --accent-ink:#fff;
  --accent-dim:rgba(63,185,80,.14);
  --accent-soft:#58a6ff;     /* GitHub link blue */
  --glow:rgba(63,185,80,.30);
  --bg-glow-1:rgba(63,185,80,.06);
  --bg-glow-2:rgba(47,129,247,.05);
  --shell-1:rgba(13,17,23,.72);
  --shell-2:rgba(13,17,23,.82);
  --nav-active-fg:#fff;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:14.5px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(900px 480px at 78% -8%, var(--bg-glow-1), transparent 60%),
    radial-gradient(700px 420px at 8% 4%, var(--bg-glow-2), transparent 55%);
  background-attachment:fixed;
}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.accent{color:var(--accent)}

/* ---- layout shell ---- */
.app{display:grid;grid-template-columns:244px 1fr;min-height:100vh}
.sidebar{
  border-right:1px solid var(--line);
  background:var(--shell-1);
  backdrop-filter:blur(10px);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}
.brand{display:flex;align-items:center;gap:11px;padding:20px 18px 14px}
.brand .logo{
  width:30px;height:30px;border-radius:9px;
  background:var(--grad);color:#fff;
  display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:15px;
  box-shadow:0 4px 16px var(--glow);
}
.brand b{font-weight:800;letter-spacing:-.01em;font-size:16px}
.brand .env{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:2px 7px;background:var(--surface-2)}
.nav{padding:8px;display:flex;flex-direction:column;gap:2px;overflow:auto}
.nav .group{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);padding:15px 12px 6px;display:flex;align-items:center;justify-content:space-between}
.nav .group .gnote{font-size:10px;letter-spacing:.02em;color:var(--faint);font-weight:500;text-transform:none}
.nav a .ic-slot{width:17px;display:grid;place-items:center;flex:none}
.nav a.cta{color:var(--accent-soft)}
.nav a.cta svg{color:var(--accent)}
.nav a.cta:hover{background:var(--accent-dim);color:var(--accent-soft)}
.nav a{
  display:flex;align-items:center;gap:11px;
  padding:9px 12px;border-radius:10px;color:var(--muted);
  font-size:13.5px;font-weight:600;transition:background-color .13s,color .13s;
}
.nav a svg{width:17px;height:17px;flex:none;stroke-width:1.9}
.nav a:hover{background:var(--surface-2);color:var(--text)}
.nav a.active{background:var(--accent-dim);color:var(--nav-active-fg)}
.nav a.active svg{color:var(--accent)}
.nav a .count{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--faint);font-weight:500}
.sidebar .who{margin-top:auto;border-top:1px solid var(--line);padding:13px 16px;display:flex;align-items:center;gap:11px}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:700;flex:none}

/* ---- main ---- */
.main{min-width:0;display:flex;flex-direction:column}
.topbar{
  display:flex;align-items:center;gap:14px;
  padding:16px 28px;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:5;background:var(--shell-2);backdrop-filter:blur(10px);
}
.topbar h1{font-size:18px;font-weight:800;margin:0;letter-spacing:-.02em}
.crumb{font-family:var(--mono);font-size:12px;color:var(--faint)}
.topbar .sp{flex:1}
.content{padding:28px;max-width:1200px;width:100%}
.page-intro{color:var(--muted);margin:-6px 0 24px;max-width:680px;font-size:15px}

/* ---- cards / panels ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card.pad{padding:20px}
.card-h{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line)}
.card-h h3{margin:0;font-size:12px;font-family:var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:600}
.card-h .sp{flex:1}
.card-b{padding:18px}
.grid{display:grid;gap:18px}
.cols-2{grid-template-columns:1fr 1fr}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}

/* ---- stat / kpi ---- */
.kpi{padding:18px}
.kpi .label{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--faint)}
.kpi .val{font-size:28px;font-weight:800;margin-top:8px;letter-spacing:-.03em}
.kpi .sub{font-size:12.5px;color:var(--muted);margin-top:2px}

/* ---- status dot / badges ---- */
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.dot.ok{background:var(--ok);box-shadow:0 0 10px rgba(70,212,138,.6)}
.dot.warn{background:var(--warn);box-shadow:0 0 10px rgba(241,178,74,.5)}
.dot.err{background:var(--err);box-shadow:0 0 10px rgba(255,93,108,.5)}
.dot.idle{background:var(--faint)}
.dot.info{background:var(--info)}
.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;font-weight:600;padding:3px 9px;border-radius:8px;border:1px solid var(--line);color:var(--muted);background:var(--surface-2)}
.badge svg{width:13px;height:13px}
.badge.ok{color:var(--ok);border-color:rgba(70,212,138,.25);background:rgba(70,212,138,.08)}
.badge.warn{color:var(--warn);border-color:rgba(241,178,74,.25);background:rgba(241,178,74,.08)}
.badge.err{color:var(--err);border-color:rgba(255,93,108,.25);background:rgba(255,93,108,.08)}
.badge.accent{color:var(--accent-soft);border-color:var(--glow);background:var(--accent-dim)}

/* ---- progress bars ---- */
.bar{height:8px;border-radius:6px;background:var(--surface-3);overflow:hidden}
.bar > i{display:block;height:100%;border-radius:6px;background:var(--grad)}
.bar.warn > i{background:var(--warn)}
.bar.err > i{background:var(--err)}
.meter{display:flex;flex-direction:column;gap:7px;margin-bottom:15px}
.meter .top{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px}
.meter .top span:last-child{color:var(--muted)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:13.5px;font-weight:600;
  padding:9px 15px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);cursor:pointer;transition:.14s}
.btn svg{width:16px;height:16px}
.btn:hover{background:var(--surface-3);border-color:var(--faint)}
.btn.primary{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 4px 18px var(--glow)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.ghost{background:transparent}
.btn.sm{padding:7px 11px;font-size:12.5px}
.btn.danger{color:var(--err);border-color:rgba(255,93,108,.3)}

/* ---- inputs ---- */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.input{display:flex;align-items:center;gap:9px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 13px}
.input:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.input input{background:transparent;border:0;outline:0;color:var(--text);font-family:var(--mono);font-size:13.5px;width:100%}
.input .suffix{font-family:var(--mono);font-size:13.5px;color:var(--faint);white-space:nowrap}
.hint{font-size:12.5px;color:var(--muted)}

/* ---- toggle ---- */
.switch{position:relative;width:42px;height:24px;border-radius:20px;background:var(--surface-3);border:1px solid var(--line);cursor:pointer;flex:none;transition:background-color .18s,border-color .18s}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#cfc9da;transition:transform .2s var(--ease-out),background-color .18s}
.switch.on{background:var(--grad);border-color:transparent}
.switch.on::after{transform:translateX(18px);background:#fff}

/* ---- tables ---- */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:600;padding:11px 18px;border-bottom:1px solid var(--line);background:var(--surface-2)}
td{padding:13px 18px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
.t-mono{font-family:var(--mono);font-size:12.5px}

/* ---- list rows ---- */
.row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.row:last-child{border-bottom:0}
.row .grow{flex:1;min-width:0}
.row .title{font-weight:600}
.row .meta{font-family:var(--mono);font-size:12px;color:var(--faint)}
.row.link{cursor:pointer;border-radius:9px;margin:0 -10px;padding-left:10px;padding-right:10px;transition:background-color .12s}
.row.link:hover{background:var(--surface-2)}
.row.link .chev{color:var(--faint);width:16px;height:16px;flex:none}

/* ---- chat (hero) ---- */
.hero{display:grid;grid-template-columns:1.7fr .82fr;gap:18px;align-items:start}
@media(max-width:1020px){.hero{grid-template-columns:1fr}}
.chat{display:flex;flex-direction:column;height:calc(100vh - 132px);min-height:560px;overflow:hidden;
  background:linear-gradient(180deg,var(--bg-glow-1),transparent 120px),var(--surface)}
.chat-head{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)}
.chat-head .av{width:34px;height:34px;border-radius:10px;background:var(--grad);display:grid;place-items:center;color:#fff;font-family:var(--mono);font-weight:700;box-shadow:0 4px 16px var(--glow)}
.chat-head .nm{font-weight:700;font-size:15px}
.chat-head .st{font-size:12px;color:var(--ok);display:flex;align-items:center;gap:6px;font-family:var(--mono)}
.chat-stream{flex:1;overflow:auto;padding:24px;display:flex;flex-direction:column;gap:18px}
.chat-stream .msg .bubble{font-size:14.5px}
/* secondary rail */
.rail-label{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin:2px 0 4px}
/* full-page chat (client home) — chat IS the surface, no card */
.content.chatpage{max-width:none;padding:0;flex:1;display:flex;flex-direction:column;min-height:0}
.chatfull{flex:1;display:flex;flex-direction:column;min-height:0;background:linear-gradient(180deg,var(--bg-glow-1),transparent 200px)}
.chatfull .chat-head{padding:15px 24px}
.chatfull .chat-stream{max-width:860px;width:100%;margin:0 auto;min-height:0}
.chatfull .chat-in{padding:14px 16px 22px}
.chatfull .chat-in .chips,.chatfull .chat-in .box{max-width:860px;margin-left:auto;margin-right:auto}
/* lock the assistant page to the viewport so the chat scrolls internally (not the whole page) */
body[data-active="dashboard"]{overflow:hidden}
body[data-active="dashboard"] .main{height:100vh;overflow:hidden}
.msg{display:flex;gap:11px;max-width:90%}
.msg .ic{width:28px;height:28px;border-radius:9px;flex:none;display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:700}
.msg.bot .ic{background:var(--grad);color:#fff;box-shadow:0 3px 12px var(--glow)}
.msg.me{flex-direction:row-reverse;margin-left:auto}
.msg.me .ic{background:var(--surface-3);color:var(--text)}
.bubble{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:12px 15px;font-size:14px}
.msg.me .bubble{background:var(--accent-dim);border-color:var(--glow)}
.bubble code{font-family:var(--mono);font-size:12.5px;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:1px 5px;color:var(--accent-soft)}
.bubble .think{font-family:var(--mono);font-size:11px;color:var(--faint);margin-bottom:7px;display:flex;align-items:center;gap:6px}
.chat-in{border-top:1px solid var(--line);padding:15px}
.chat-in .box{display:flex;align-items:flex-end;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:10px 13px}
.chat-in .box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.chat-in input{flex:1;background:transparent;border:0;outline:0;color:var(--text);font-family:var(--sans);font-size:14.5px}
.chat-in .send{width:36px;height:36px;border-radius:11px;border:0;background:var(--grad);color:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:0 4px 14px var(--glow)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:11px}
.chip{font-size:12.5px;color:var(--muted);border:1px solid var(--line);background:var(--surface-2);border-radius:20px;padding:6px 12px;cursor:pointer}
.chip:hover{border-color:var(--accent);color:var(--accent-soft)}

/* ---- in-chat scenario blocks ---- */
.daytag{align-self:center;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);background:var(--surface-2);border:1px solid var(--line);border-radius:20px;padding:4px 12px}
/* HITL approval card */
.actcard{margin-top:10px;border:1px solid var(--glow);background:var(--accent-dim);border-radius:12px;padding:12px 13px}
.actcard .ttl{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-soft);display:flex;align-items:center;gap:6px;margin-bottom:9px}
.actcard .ttl svg{width:13px;height:13px}
.actcard .ln{display:flex;justify-content:space-between;font-size:12.5px;padding:3px 0}
.actcard .ln span:first-child{color:var(--muted)}
.actcard .ln span:last-child{font-family:var(--mono)}
.actcard .acts{display:flex;gap:8px;margin-top:11px}
.actcard .ok-btn{flex:1;justify-content:center;font-size:12.5px;font-weight:700;border:0;background:var(--grad);color:#fff;border-radius:9px;padding:8px;cursor:pointer;box-shadow:0 4px 14px var(--glow)}
.actcard .no-btn{justify-content:center;font-size:12.5px;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:9px;padding:8px 14px;cursor:pointer}
.actcard.done{border-color:rgba(70,212,138,.3);background:rgba(70,212,138,.07)}
.actcard.done .ttl{color:var(--ok)}
/* deploy step list */
.steps{margin-top:9px;display:flex;flex-direction:column;gap:7px}
.steps .s{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.steps .s svg{width:14px;height:14px;flex:none}
.steps .s.ok{color:var(--ok)} .steps .s.ok svg{color:var(--ok)}
.steps .s.run{color:var(--accent-soft)} .steps .s.run svg{color:var(--accent)}
/* prompt-to-paste block */
.promptbox{margin-top:10px;border:1px solid var(--line);background:#0a0810;border-radius:11px;overflow:hidden}
.promptbox .pb-h{display:flex;align-items:center;gap:7px;padding:8px 12px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.promptbox .pb-h svg{width:13px;height:13px;color:var(--accent)}
.promptbox .pb-h .cp{margin-left:auto;color:var(--accent-soft);display:flex;align-items:center;gap:5px;cursor:pointer}
.promptbox .pb-b{padding:12px;font-family:var(--mono);font-size:12px;line-height:1.7;color:#d7d2e4}
.promptbox .pb-b code{background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:var(--accent-soft)}
.lnk{color:var(--accent-soft);font-weight:600}
/* in-chat connect button (generative UI) */
.ghbtn{display:inline-flex;align-items:center;gap:9px;margin-top:11px;padding:11px 16px;border-radius:11px;border:1px solid var(--line);background:#0a0810;color:#fff;font-family:var(--sans);font-weight:700;font-size:13.5px;cursor:pointer;transition:.14s}
.ghbtn:hover{border-color:var(--faint);background:#120f1a}
.ghbtn svg{width:18px;height:18px}
.ghbtn .arr{margin-left:4px;color:var(--faint)}
.connpill{display:inline-flex;align-items:center;gap:7px;margin-top:10px;font-family:var(--mono);font-size:12px;color:var(--ok);background:rgba(70,212,138,.08);border:1px solid rgba(70,212,138,.25);border-radius:9px;padding:6px 11px}
.connpill svg{width:14px;height:14px}

/* ---- floating theme switcher (demo: pick a look with the client) ---- */
.themer{position:fixed;right:20px;top:82px;z-index:50}
/* current-theme trigger */
.themer .cur{display:flex;align-items:center;gap:10px;border:1px solid var(--line);cursor:pointer;
  background:var(--surface);border-radius:30px;padding:7px 9px 7px 11px;box-shadow:0 8px 30px rgba(0,0,0,.40);transition:border-color .14s}
.themer .cur:hover{border-color:var(--faint)}
.themer .cur .meta{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.themer .cur .hd{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.themer .cur .nm{font-size:13px;font-weight:700;color:var(--text)}
.themer .cur > i{width:16px;height:16px;color:var(--faint);transition:transform .18s}
.themer.open .cur > i{transform:rotate(180deg)}
/* popover panel */
.themer .panel{position:absolute;right:0;top:calc(100% + 10px);width:228px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:7px;
  box-shadow:0 18px 50px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);
  transform-origin:top right;transition:.16s}
.themer.open .panel{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.themer .grp{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding:9px 10px 5px}
.themer .opt{display:flex;align-items:center;gap:11px;width:100%;border:0;cursor:pointer;background:transparent;
  border-radius:10px;padding:9px 10px;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--text);transition:background-color .12s}
.themer .opt:hover{background:var(--surface-2)}
.themer .opt.on{background:var(--accent-dim)}
.themer .opt .nm{flex:1;text-align:left}
.themer .opt .ck{width:15px;height:15px;color:var(--accent);opacity:0;flex:none}
.themer .opt.on .ck{opacity:1}
/* swatches (shared by trigger + options) */
.themer .sw{width:16px;height:16px;border-radius:50%;flex:none;border:1px solid rgba(255,255,255,.12)}
.themer [data-th="railway"] .sw{background:linear-gradient(135deg,#9a6bff,#e35a96)}
.themer [data-th="supabase"] .sw{background:#3ecf8e}
.themer [data-th="github"] .sw{background:linear-gradient(135deg,#3fb950,#238636)}
.themer [data-th="aws"] .sw{background:linear-gradient(135deg,#ff9900,#ec7211)}

/* ---- misc ---- */
.section-title{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin:28px 0 13px}
.divider{height:1px;background:var(--line);margin:18px 0}
.kv{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:13.5px}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--muted)}
.kv .v{font-family:var(--mono);font-weight:500}
.pill-link{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12.5px;color:var(--accent-soft);font-weight:600}
.plug-ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:13px;flex:none}
.plug-ic svg{width:14px;height:14px}
/* resource scaling sliders */
.scale-row .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
.scale-row .top .lbl{font-weight:700;font-size:13.5px}
.scale-row .top .val{font-family:var(--mono);font-size:13px;color:var(--accent-soft)}
input[type=range].rng{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;background:var(--surface-3);outline:none;cursor:pointer}
input[type=range].rng::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--grad);box-shadow:0 2px 8px var(--glow);cursor:pointer}
input[type=range].rng::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:var(--grad);box-shadow:0 2px 8px var(--glow);cursor:pointer}
.term{background:#0a0810;border:1px solid var(--line);border-radius:11px;font-family:var(--mono);font-size:12.5px;line-height:1.75;padding:15px;color:#cfcada;max-height:280px;overflow:auto}
.term .g{color:#5fe3a1} .term .r{color:#ff8088} .term .y{color:#f3c057} .term .d{color:#6e6884}

/* ---- process pipeline (admin deploy view) ---- */
.pipe{display:flex;flex-direction:column}
.pipe .step{display:flex;gap:14px;padding-bottom:20px;position:relative}
.pipe .step::before{content:"";position:absolute;left:12px;top:26px;bottom:-2px;width:2px;background:var(--line)}
.pipe .step:last-child::before{display:none}
.pipe .step .node{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;flex:none;background:var(--surface);z-index:1;color:var(--faint)}
.pipe .step .node svg{width:13px;height:13px}
.pipe .step.done .node{border-color:var(--ok);background:var(--ok);color:#04130b}
.pipe .step.done::before{background:var(--ok)}
.pipe .step.run .node{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 4px var(--accent-dim)}
.pipe .step.run .node svg{animation:spin 1s linear infinite}
.pipe .step .body{flex:1;min-width:0;padding-top:3px}
.pipe .step .ttl{font-weight:600;font-size:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pipe .step.pend .ttl{color:var(--faint)}
.pipe .step .who{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);border:1px solid var(--line);border-radius:5px;padding:1px 6px}
.pipe .step.run .who{color:var(--accent);border-color:var(--glow)}
.pipe .step .meta{font-family:var(--mono);font-size:11.5px;color:var(--faint);margin-top:3px}
.pipe .step .dur{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--faint);flex:none;padding-left:10px}
.pipe .step.run .dur{color:var(--accent)}
.tag-new{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-soft);background:var(--accent-dim);border:1px solid var(--glow);border-radius:5px;padding:1px 6px}
@keyframes spin{to{transform:rotate(360deg)}}
.term .cursor{display:inline-block;width:7px;height:13px;background:var(--accent);vertical-align:-2px;margin-left:2px;animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
/* retried / failed steps */
.pipe .step.retry .node{border-color:var(--warn);background:var(--warn);color:#241a05}
.pipe .step.retry::before{background:linear-gradient(var(--warn),var(--ok))}
.pipe .step.err .node{border-color:var(--err);background:var(--err);color:#2a0608}
.pipe .step.err::before{background:var(--err)}
.pipe .step.action .node{border-color:var(--warn);background:var(--warn);color:#241a05;box-shadow:0 0 0 4px rgba(241,178,74,.16)}
.pipe .step.action::before{background:linear-gradient(var(--warn),var(--line))}
.pipe .step.action .ttl{color:var(--warn)}
.pipe .step .attempt{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;border-radius:5px;padding:1px 6px;border:1px solid var(--warn);color:var(--warn);background:rgba(241,178,74,.08)}
.pipe .step .sub{font-family:var(--mono);font-size:11.5px;margin-top:5px;display:flex;align-items:flex-start;gap:6px;color:var(--warn)}
.pipe .step .sub.bad{color:var(--err)}
.pipe .step .sub svg{width:13px;height:13px;flex:none;margin-top:1px}
.pipe .step .acts{display:flex;gap:7px;margin-top:9px}
.mode-redeploy .newonly{display:none}
/* mode toggle */
.segmt{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:3px}
.segmt button{border:0;background:transparent;color:var(--muted);font-family:var(--sans);font-weight:600;font-size:13px;padding:7px 14px;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:7px}
.segmt button svg{width:15px;height:15px}
.segmt button.on{background:var(--grad);color:#fff;box-shadow:0 3px 12px var(--glow)}

/* ---- auth / standalone ---- */
.center-screen{min-height:100vh;display:grid;place-items:center;padding:24px}
.auth{width:100%;max-width:396px}
.auth .brand{justify-content:center;padding:0 0 22px}
.auth .card{padding:28px}
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.plan-grid{grid-template-columns:1fr}}
.plan{cursor:pointer;position:relative;transition:border-color .14s,box-shadow .14s}
.plan:hover{border-color:var(--faint)}
.plan.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 10px 40px var(--glow)}
.plan .price{font-size:32px;font-weight:800;margin:6px 0;letter-spacing:-.03em}
.plan ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.plan li{display:flex;gap:9px;align-items:center;font-size:13.5px;color:var(--muted)}
.plan li svg{width:16px;height:16px;color:var(--accent);flex:none}
.tag-top{position:absolute;top:-10px;right:16px}
.plan li.off{color:var(--faint)}
.plan li.off svg{color:var(--faint)}
.plan .earn{margin-top:16px;font-size:12px;font-weight:600;color:var(--accent-soft);background:var(--accent-dim);border:1px solid var(--glow);border-radius:9px;padding:9px 11px;display:flex;gap:8px;align-items:flex-start;line-height:1.4}
.plan .earn svg{width:15px;height:15px;flex:none;margin-top:1px}
.plan .earn.off{color:var(--faint);background:transparent;border-color:var(--line);font-weight:500}
.plan .plan-cta{width:100%;justify-content:center;margin-top:16px}
.plan .plan-cta.current{opacity:.6;pointer-events:none}
.plan .price small{font-size:14px;font-weight:500;color:var(--muted)}

/* ── first-login mode chooser (full agent vs guided) ────────── */
.modes{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mode{display:flex;flex-direction:column;gap:11px;text-align:left;padding:20px;border:1px solid var(--line);border-radius:15px;background:var(--surface);cursor:pointer;transition:border-color .15s,box-shadow .18s var(--ease-out),transform .2s var(--ease-out);text-decoration:none;color:inherit}
.mode:hover{border-color:var(--faint);transform:translateY(-2px)}
.mode.sel{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);background:var(--surface-2)}
.mode .mi{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--accent-dim);color:var(--accent);border:1px solid var(--glow)}
.mode .mi svg{width:22px;height:22px}
.mode h3{font-size:16px;margin:0;display:flex;align-items:center;gap:9px}
.mode .tag{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);border:1px solid var(--line);border-radius:6px;padding:2px 7px}
.mode p{font-size:13px;color:var(--muted);line-height:1.5;margin:0}
.mode ul{margin:2px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.mode li{font-size:12.5px;color:var(--muted);display:flex;align-items:flex-start;gap:8px}
.mode li svg{width:14px;height:14px;flex:none;margin-top:2px;color:var(--accent-soft)}
.mode .go{margin-top:4px;display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:13px;color:var(--accent-soft)}
.mode .go svg{width:15px;height:15px}

@keyframes wzin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ════════ Go-live: progress header ════════ */
.gl-head{display:flex;align-items:center;gap:18px;margin-bottom:14px}
.gl-head h2{margin:0;font-size:18px}
.prog{flex:1;max-width:340px}
.prog .bar{height:8px;border-radius:99px;background:var(--surface-3);overflow:hidden;border:1px solid var(--line)}
.prog .fill{height:100%;background:var(--grad);width:100%;transform-origin:left;transform:scaleX(0);transition:transform .45s var(--ease-out)}
.prog .lbl{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:6px;display:flex;align-items:center;gap:7px}
.prog .lbl .done-chip{color:var(--ok)}

/* shared step-action bits (used inside blocks) */
.gl-do{margin-top:4px;display:flex;flex-direction:column;gap:14px}
.bigbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:15px;font-weight:600;padding:14px 22px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);cursor:pointer;align-self:flex-start;transition:filter .15s,border-color .15s}
.bigbtn.primary{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 6px 22px var(--glow)}
.bigbtn:hover{filter:brightness(1.05);border-color:var(--faint)}
.bigbtn.ghost{background:transparent;font-weight:500;color:var(--muted);padding:11px 16px;font-size:13.5px}
.bigbtn svg{width:18px;height:18px}
.gl-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.safe{font-size:12.5px;color:var(--faint);display:flex;align-items:center;gap:8px}
.safe svg{width:14px;height:14px;flex:none}

/* connected-state reveal (GitHub repo / Stripe account) */
.reveal{display:none}
.reveal.on{display:flex;flex-direction:column;gap:11px;animation:wzin .2s var(--ease-out)}
.conn{display:flex;align-items:center;gap:12px;border:1px solid rgba(70,212,138,.3);background:rgba(70,212,138,.07);border-radius:12px;padding:13px 15px;max-width:480px}
.conn .ci{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line)}
.conn .ci svg{width:18px;height:18px}
.conn .title{font-weight:600;font-size:13.5px}
.conn .meta{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:2px}

/* celebration on full completion */
.celebrate{display:none;align-items:center;gap:12px;margin-top:18px;border:1px solid rgba(70,212,138,.3);background:rgba(70,212,138,.08);border-radius:14px;padding:16px 18px}
.celebrate.on{display:flex;animation:wzin .25s var(--ease-out)}
.celebrate .big{font-size:22px}
.celebrate h3{margin:0 0 2px;font-size:15px}
.celebrate p{margin:0;font-size:13px;color:var(--muted)}

/* ════════ step "blocks" accordion (klocki) ════════ */
.blocks{display:flex;flex-direction:column;gap:13px;max-width:680px;margin-top:18px}
.blk{border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden;transition:border-color .15s,box-shadow .15s,opacity .15s}
.blk.active{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.blk.locked{opacity:.55}
.blk.locked .blk-h{cursor:not-allowed}
.blk-h{display:flex;align-items:center;gap:14px;padding:17px 19px;cursor:pointer;user-select:none}
.blk-h .bn{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;font-family:var(--mono);font-size:14px;font-weight:700;border:2px solid var(--line);background:var(--surface-2);color:var(--muted)}
.blk-h .bn svg{width:16px;height:16px}
.blk.active .bn{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 4px var(--accent-dim)}
.blk.done .bn{border-color:var(--ok);background:var(--ok);color:#04130b}
.blk-h .bmid{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.blk-h .bt{font-weight:680;font-size:15.5px;letter-spacing:-.01em}
.blk-h .bsum{font-size:12.5px;color:var(--muted);display:none}
.blk.done .bsum{display:block}
.blk-h .bstat{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);border:1px solid var(--line);border-radius:6px;padding:3px 8px;flex:none}
.blk.active .bstat{color:var(--accent-soft);border-color:var(--glow);background:var(--accent-dim)}
.blk.done .bstat{color:var(--ok);border-color:rgba(70,212,138,.3);background:rgba(70,212,138,.08)}
.blk-h .bchev{width:17px;height:17px;color:var(--faint);transition:transform .18s;flex:none}
.blk.active .bchev{transform:rotate(180deg)}
.blk-body{display:none;padding:4px 19px 22px 65px}
.blk.active .blk-body{display:block;animation:wzin .2s var(--ease-out)}
.blk-body .lead{font-size:13.5px;color:var(--muted);line-height:1.55;margin:0 0 15px;max-width:46ch}
@media(max-width:560px){.blk-body{padding-left:19px}}

/* ── floating "Ask AI" — Linear-style, stacked above the theme switcher ── */
.ai-fab{position:fixed;right:20px;bottom:20px;z-index:49;display:inline-flex;align-items:center;gap:9px;padding:12px 17px;border-radius:14px;border:0;background:var(--grad);color:#fff;font-weight:600;font-size:13.5px;cursor:pointer;box-shadow:0 10px 30px var(--glow);transition:transform .15s,filter .15s}
.ai-fab:hover{filter:brightness(1.06);transform:translateY(-1px)}
.ai-fab svg{width:17px;height:17px}
.ai-fab .nudge{position:absolute;top:-7px;right:-7px;width:16px;height:16px;border-radius:50%;background:var(--accent);border:2px solid var(--bg);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.55}}
.ai-fab.hide{opacity:0;visibility:hidden;transform:translateY(8px)}

.ai-pop{position:fixed;right:20px;bottom:20px;z-index:51;width:452px;max-width:calc(100vw - 36px);height:min(564px,72vh);display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 26px 70px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translateY(14px) scale(.97);transform-origin:bottom right;transition:opacity .2s var(--ease-out),transform .24s var(--ease-out),visibility .2s}
.ai-pop.open{opacity:1;visibility:visible;transform:none}
.ai-pop .ch-h{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--line)}
.ai-pop .ch-h .ai{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;background:var(--grad);color:#fff;font-family:var(--mono);font-size:12px;font-weight:700;box-shadow:0 3px 12px var(--glow)}
.ai-pop .ch-h .t{font-weight:600;font-size:13.5px}
.ai-pop .ch-h .s{font-size:11px;color:var(--muted);margin-top:1px}
.ai-pop .ch-x{margin-left:auto;width:30px;height:30px;border-radius:8px;border:0;background:transparent;color:var(--muted);cursor:pointer;display:grid;place-items:center}
.ai-pop .ch-x:hover{background:var(--surface-2);color:var(--text)}
.ai-pop .ch-x svg{width:17px;height:17px}

/* chat stream / chips / input inside the popover */
.gl-stream{flex:1;overflow:auto;padding:17px;display:flex;flex-direction:column;gap:13px}
.gl-stream .msg{max-width:100%}
.gl-stream .bubble{font-size:13.5px}
.gl-stream .bubble a{color:var(--accent-soft);font-weight:600;text-decoration:underline}
.codeblock{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:10px;margin-top:9px}
.codeblock pre{margin:0;padding:12px 13px;font-family:var(--mono);font-size:11px;line-height:1.65;color:var(--text);white-space:pre-wrap;word-break:break-word;overflow:auto;max-height:210px}
.codeblock .copy{position:absolute;top:8px;right:8px;font-family:var(--mono);font-size:10px;font-weight:600;color:var(--accent-soft);background:var(--surface-2);border:1px solid var(--line);border-radius:7px;padding:4px 9px;cursor:pointer}
.codeblock .copy:hover{border-color:var(--accent)}
.gl-chips{display:flex;gap:7px;flex-wrap:wrap;padding:0 15px 11px}
.gl-chips .chip{font-size:12px;padding:6px 11px;display:inline-flex;align-items:center;gap:6px}
.gl-chips .chip svg{width:14px;height:14px;flex:none}
.gl-chips .chip.go{color:#fff;background:var(--grad);border-color:transparent}
.gl-in{border-top:1px solid var(--line);padding:11px 13px;display:flex;gap:9px;align-items:center}
.gl-in input{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 13px;color:var(--text);font-size:13.5px;outline:none;font-family:var(--sans)}
.gl-in input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.gl-in .send{width:38px;height:38px;flex:none;border-radius:10px;border:0;background:var(--grad);color:#fff;cursor:pointer;display:grid;place-items:center}
.gl-in .send svg{width:17px;height:17px}

/* ════════ landing: two big "doors" (client vs admin) ════════ */
.enter-wrap{width:100%;max-width:940px}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}
@media(max-width:780px){.doors{grid-template-columns:1fr}}
.door{position:relative;display:flex;flex-direction:column;gap:15px;padding:32px 30px;border:1px solid var(--line);border-radius:20px;background:var(--surface);overflow:hidden;text-decoration:none;color:inherit;min-height:360px;transition:transform .2s var(--ease-out),border-color .18s,box-shadow .22s var(--ease-out)}
.door::before{content:"";position:absolute;inset:0;background:radial-gradient(440px 240px at 82% -12%,var(--accent-dim),transparent 62%);opacity:.7;pointer-events:none}
.door:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 22px 54px rgba(0,0,0,.42)}
.door .dicon{position:relative;width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--accent-dim);border:1px solid var(--glow);color:var(--accent)}
.door .dicon svg{width:27px;height:27px}
.door.admin-door .dicon{background:var(--surface-3);border-color:var(--line);color:var(--muted)}
.door .drole{position:relative;font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--faint)}
.door h2{position:relative;font-size:27px;margin:-6px 0 0;letter-spacing:-.02em}
.door .badge{position:absolute;top:30px;right:28px}
.door > p{position:relative;font-size:14px;color:var(--muted);line-height:1.55;margin:0}
.door ul{position:relative;list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.door li{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:10px}
.door li svg{width:15px;height:15px;color:var(--accent-soft);flex:none}
.door.admin-door li svg{color:var(--muted)}
.door .enter{position:relative;margin-top:auto;display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15px;color:var(--accent-soft);border-top:1px solid var(--line);padding-top:16px}
.door.admin-door .enter{color:var(--text)}
.door .enter svg{width:19px;height:19px;transition:transform .18s}
.door:hover .enter svg{transform:translateX(5px)}

/* prototype hint on the login step */
.proto-hint{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--accent-soft);background:var(--accent-dim);border:1px solid var(--glow);border-radius:9px;padding:7px 11px;margin-bottom:14px}
.proto-hint svg{width:14px;height:14px}

/* onboarding choice — mini previews + "best if" line inside .mode cards */
.mode .best{position:relative;font-size:12.5px;color:var(--muted)}
.mode .best b{color:var(--text)}
.mode .prev{position:relative;margin-top:2px;border:1px solid var(--line);border-radius:12px;background:var(--bg);padding:12px;display:flex;flex-direction:column;justify-content:center;gap:6px;height:112px;overflow:hidden}
.mode .prev .pb{font-size:11px;line-height:1.35;border-radius:9px;padding:5px 9px;max-width:82%}
.mode .prev .pb.bot{background:var(--surface-2);border:1px solid var(--line);color:var(--muted)}
.mode .prev .pb.me{align-self:flex-end;background:var(--accent-dim);border:1px solid var(--glow);color:var(--accent-soft)}
.mode .prev .ps{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--muted)}
.mode .prev .ps .n{width:19px;height:19px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-family:var(--mono);font-size:9.5px;flex:none}
.mode .prev .ps .n svg{width:11px;height:11px}
.mode .prev .ps.done .n{background:var(--ok);border-color:var(--ok);color:#04130b}
.mode .prev .ps.cur .n{border-color:var(--accent);color:var(--accent)}


/* ════════ animated onboarding previews — play on hover ════════ */
@keyframes pbIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes pbInR{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes psIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes fillGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes popIn{0%{opacity:0;transform:scale(.85)}70%{transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
@keyframes ringPulse{0%,100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}50%{box-shadow:0 0 0 5px var(--accent-dim)}}

/* chat card — the conversation types itself in */
.mini-spin{display:inline-block;width:9px;height:9px;border:1.5px solid var(--glow);border-top-color:var(--accent);border-radius:50%;vertical-align:-1px;margin-left:5px}
.mode:hover .prev.pvchat .pb{animation:pbIn .45s var(--ease-out) both}
.mode:hover .prev.pvchat .pb.me{animation:pbInR .45s var(--ease-out) both}
.mode:hover .prev.pvchat .pb:nth-child(1){animation-delay:.05s}
.mode:hover .prev.pvchat .pb:nth-child(2){animation-delay:.55s}
.mode:hover .prev.pvchat .pb:nth-child(3){animation-delay:1.05s}
.mode:hover .prev.pvchat .pb:nth-child(3) .mini-spin{animation:spin .7s linear infinite}

/* steps card — progress fills, current step pulses, "live" pops in */
.prev .pbar{height:5px;border-radius:99px;background:var(--surface-3);overflow:hidden;border:1px solid var(--line)}
.prev .pbar .pfill{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(.4);background:var(--grad);border-radius:99px}
.prev .golive{position:absolute;bottom:11px;right:11px;display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10px;font-weight:700;color:var(--ok);background:rgba(70,212,138,.12);border:1px solid rgba(70,212,138,.3);border-radius:7px;padding:3px 8px;opacity:0}
.prev .golive svg{width:11px;height:11px}
.mode:hover .prev.pvsteps .pfill{animation:fillGrow 1.6s ease both}
.mode:hover .prev.pvsteps .ps{animation:psIn .4s var(--ease-out) both}
.mode:hover .prev.pvsteps .ps:nth-child(2){animation-delay:.15s}
.mode:hover .prev.pvsteps .ps:nth-child(3){animation-delay:.55s}
.mode:hover .prev.pvsteps .ps:nth-child(4){animation-delay:.95s}
.mode:hover .prev.pvsteps .ps.cur .n{animation:ringPulse 1.4s ease-in-out .7s infinite}
.mode:hover .prev.pvsteps .golive{animation:popIn .4s 1.5s both}

@media (prefers-reduced-motion: reduce){
  .mode:hover .prev *{animation:none !important}
  .prev .golive{opacity:1}
}

/* ════ subtle circuit accent in two corners (Hero Patterns "Circuit Board") ════ */
.circuitfx{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden;
  --circ:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 304 304' width='304' height='304'%3E%3Cpath fill='%239C92AC' fill-opacity='0.16' d='M44.1 224a5 5 0 1 1 0 2H0v-2h44.1zm160 48a5 5 0 1 1 0 2H82v-2h122.1zm57.8-46a5 5 0 1 1 0-2H304v2h-42.1zm0 16a5 5 0 1 1 0-2H304v2h-42.1zm6.2-114a5 5 0 1 1 0 2h-86.2a5 5 0 1 1 0-2h86.2zm-256-48a5 5 0 1 1 0 2H0v-2h12.1zm185.8 34a5 5 0 1 1 0-2h86.2a5 5 0 1 1 0 2h-86.2zM258 12.1a5 5 0 1 1-2 0V0h2v12.1zm-64 208a5 5 0 1 1-2 0v-54.2a5 5 0 1 1 2 0v54.2zm48-198.2V80h62v2h-64V21.9a5 5 0 1 1 2 0zm16 16V64h46v2h-48V37.9a5 5 0 1 1 2 0zm-128 96V208h16v12.1a5 5 0 1 1-2 0V210h-16v-76.1a5 5 0 1 1 2 0zm-5.9-21.9a5 5 0 1 1 0 2H114v48H85.9a5 5 0 1 1 0-2H112v-48h12.1zm-6.2 130a5 5 0 1 1 0-2H176v-74.1a5 5 0 1 1 2 0V242h-60.1zm-16-64a5 5 0 1 1 0-2H114v48h10.1a5 5 0 1 1 0 2H112v-48h-10.1zM66 284.1a5 5 0 1 1-2 0V274H50v30h-2v-32h18v12.1zM236.1 176a5 5 0 1 1 0 2H226v94h48v32h-2v-30h-48v-98h12.1zm25.8-30a5 5 0 1 1 0-2H274v44.1a5 5 0 1 1-2 0V146h-10.1zm-64 96a5 5 0 1 1 0-2H208v-80h16v-14h-42.1a5 5 0 1 1 0-2H226v18h-16v80h-12.1zm86.2-210a5 5 0 1 1 0 2H272V0h2v32h10.1zM98 101.9V146H53.9a5 5 0 1 1 0-2H96v-42.1a5 5 0 1 1 2 0zM53.9 34a5 5 0 1 1 0-2H80V0h2v34H53.9zm60.1 3.9V66H82v64H69.9a5 5 0 1 1 0-2H80V64h32V37.9a5 5 0 1 1 2 0zM101.9 82a5 5 0 1 1 0-2H128V37.9a5 5 0 1 1 2 0V82h-28.1zm16-64a5 5 0 1 1 0-2H146v44.1a5 5 0 1 1-2 0V18h-26.1zm102.2 270a5 5 0 1 1 0 2H98v14h-2v-16h124.1zM242 149.9V160h16v34h-16v62h48v48h-2v-46h-48v-66h16v-30h-16v-12.1a5 5 0 1 1 2 0zM53.9 18a5 5 0 1 1 0-2H64V2H48V0h18v18H53.9zm112 32a5 5 0 1 1 0-2H192V0h50v2h-48v48h-28.1zm-48-48a5 5 0 0 1-9.8-2h2.07a3 3 0 1 0 5.66 0H178v34h-18V21.9a5 5 0 1 1 2 0V32h14V2h-58.1zm0 96a5 5 0 1 1 0-2H137l32-32h39V21.9a5 5 0 1 1 2 0V66h-40.17l-32 32H117.9zm28.1 90.1a5 5 0 1 1-2 0v-76.51L175.59 80H224V21.9a5 5 0 1 1 2 0V82h-49.59L146 112.41v75.69zm16 32a5 5 0 1 1-2 0v-99.51L184.59 96H300.1a5 5 0 0 1 3.9-3.9v2.07a3 3 0 0 0 0 5.66v2.07a5 5 0 0 1-3.9-3.9H185.41L162 121.41v98.69zm-144-64a5 5 0 1 1-2 0v-3.51l48-48V48h32V0h2v50H66v55.41l-48 48v2.69zM50 53.9v43.51l-48 48V208h26.1a5 5 0 1 1 0 2H0v-65.41l48-48V53.9a5 5 0 1 1 2 0zm-16 16V89.41l-34 34v-2.82l32-32V69.9a5 5 0 1 1 2 0zM12.1 32a5 5 0 1 1 0 2H9.41L0 43.41V40.6L8.59 32h3.51zm265.8 18a5 5 0 1 1 0-2h18.69l7.41-7.41v2.82L297.41 50H277.9zm-16 160a5 5 0 1 1 0-2H288v-71.41l16-16v2.82l-14 14V210h-28.1zm-208 32a5 5 0 1 1 0-2H64v-22.59L40.59 194H21.9a5 5 0 1 1 0-2H41.41L66 216.59V242H53.9zm150.2 14a5 5 0 1 1 0 2H96v-56.6L56.6 162H37.9a5 5 0 1 1 0-2h19.5L98 200.6V256h106.1zm-150.2 2a5 5 0 1 1 0-2H80v-46.59L48.59 178H21.9a5 5 0 1 1 0-2H49.41L82 208.59V258H53.9zM34 39.8v1.61L9.41 66H0v-2h8.59L32 40.59V0h2v39.8zM2 300.1a5 5 0 0 1 3.9 3.9H3.83A3 3 0 0 0 0 302.17V256h18v48h-2v-46H2v42.1zM34 241v63h-2v-62H0v-2h34v1zM17 18H0v-2h16V0h2v18h-1zm273-2h14v2h-16V0h2v16zm-32 273v15h-2v-14h-14v14h-2v-16h18v1zM0 92.1A5.02 5.02 0 0 1 6 97a5 5 0 0 1-6 4.9v-2.07a3 3 0 1 0 0-5.66V92.1zM80 272h2v32h-2v-32zm37.9 32h-2.07a3 3 0 0 0-5.66 0h-2.07a5 5 0 0 1 9.8 0zM5.9 0A5.02 5.02 0 0 1 0 5.9V3.83A3 3 0 0 0 3.83 0H5.9zm294.2 0h2.07A3 3 0 0 0 304 3.83V5.9a5 5 0 0 1-3.9-5.9zm3.9 300.1v2.07a3 3 0 0 0-1.83 1.83h-2.07a5 5 0 0 1 3.9-3.9zM97 100a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-48 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 96a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-144a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM49 36a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM33 68a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 240a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm80-176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm112 176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 180a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 84a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'%3E%3C/path%3E%3C/svg%3E")}
.cc-wrap{position:absolute;width:470px;height:470px;max-width:64vw;max-height:64vh;background-repeat:no-repeat,repeat}
.cc-br{right:0;bottom:0;
  background-image:radial-gradient(360px 360px at 100% 100%,var(--accent-dim),transparent 70%),var(--circ);
  background-position:100% 100%,100% 100%;
  -webkit-mask-image:radial-gradient(470px 470px at 100% 100%,#000 0%,#000 16%,transparent 72%);
  mask-image:radial-gradient(470px 470px at 100% 100%,#000 0%,#000 16%,transparent 72%)}
.cc-tl{left:0;top:0;
  background-image:radial-gradient(360px 360px at 0% 0%,var(--accent-dim),transparent 70%),var(--circ);
  background-position:0% 0%,0% 0%;
  -webkit-mask-image:radial-gradient(470px 470px at 0% 0%,#000 0%,#000 16%,transparent 72%);
  mask-image:radial-gradient(470px 470px at 0% 0%,#000 0%,#000 16%,transparent 72%)}
@media (max-width:640px){.cc-wrap{width:300px;height:300px}}

/* ── design-eng polish: custom easing, press feedback, reduced motion ── */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1)}
.btn,.bigbtn,.ghbtn,.chip,.gl-chips .chip,.optbtn,.gl-in .send,.ai-fab{
  transition-property:background-color,border-color,filter,transform,box-shadow,color;
  transition-duration:.16s;transition-timing-function:var(--ease-out)}
.btn:active,.bigbtn:active,.ghbtn:active,.chip:active,.gl-chips .chip:active,.optbtn:active{transform:scale(.97)}
.gl-in .send:active{transform:scale(.93)}
.ai-fab:active{transform:scale(.96)}
.door:active{transform:translateY(-2px) scale(.99)}
.mode:active{transform:translateY(-1px) scale(.99)}
@media (prefers-reduced-motion:reduce){
  .door:hover,.mode:hover{transform:none}
  .mode:hover .prev .pb,.mode:hover .prev .ps,.mode:hover .prev .pfill,.mode:hover .prev .golive,.mode:hover .prev .ps.cur .n{animation:none!important;opacity:1!important;transform:none!important}
}

@media (hover:none){
  .door:hover,.mode:hover{transform:none}
  .mode:hover .prev .pb,.mode:hover .prev .ps,.mode:hover .prev .pfill,.mode:hover .prev .golive,.mode:hover .prev .ps.cur .n{animation:none}
}