/* Photon design system — extracted from the approved Hi-Fi prototype (hybrid theme,
   day/night via CSS variables) plus app-level responsive overrides at the bottom. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700&family=Hanken+Grotesk:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
/* Mobile browsers (Chrome/WebView on Android especially) draw their own default tap-highlight
   overlay on any tap-active element, and on a lot of devices that overlay is a plain rectangle —
   it does NOT clip itself to the element's border-radius. On a rounded button this looks like
   "the button is curved but the highlight is blocky". Turning it off everywhere and giving
   buttons their own proper :active states (below) fixes it and gives consistent feedback across
   both touch and mouse instead of leaving touch taps with no feedback at all. */
*{-webkit-tap-highlight-color:transparent}
body{background:var(--bg,#f7f4ee);font-family:'Hanken Grotesk',system-ui,sans-serif;color:#2a251e}

/* Fallback theme vars for elements rendered outside .hy (modals, toasts). */
:root{--bg:#f7f4ee;--panel:#fff;--bd:#ece6db;--text:#2a251e;--muted:#8a7f70;--acc:oklch(0.5 0.14 165);--accfg:#fff;--accsoft:oklch(0.5 0.14 165/.12);--ink:#0b0f10;--shadow:0 3px 14px rgba(80,60,30,.06);--spark:oklch(0.5 0.14 165)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;border:none;background:none}
@keyframes sgpulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes spin{to{transform:rotate(360deg)}}
/* Day/night toggle — cross-fades the whole page via the View Transitions API (see toggleTheme()
   in app.js). No-ops harmlessly in browsers that don't support it (Firefox, older Safari). */
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;animation-timing-function:ease-in-out}
/* Custom scrollbars everywhere (modals, sidebar, log panes) — thin + themed instead of the
   default OS scrollbar, which looks out of place against this UI in both light and dark mode.
   Tied to --muted (already calibrated for subdued-but-visible secondary content in both themes). */
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb, var(--muted) 55%, transparent) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background-color:color-mix(in srgb, var(--muted) 55%, transparent);border-radius:20px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background-color:var(--muted)}
/* ============ HYBRID (dark sidebar + warm cards + themeable + customizable) ============ */
.hy{--accsoft:oklch(0.5 0.14 165/.12);--ink:#0b0f10;--bg:#f7f4ee;--panel:#fff;--bd:#ece6db;--text:#2a251e;--muted:#8a7f70;--acc:oklch(0.5 0.14 165);--accfg:#fff;--spark:oklch(0.5 0.14 165);--sidebg:#faf8f3;--sidetx:#2a251e;--sidemut:#8a7f70;--sidebd:#ece6db;--sidecard:rgba(20,15,5,.03);--shadow:0 3px 14px rgba(80,60,30,.06);width:1180px;border-radius:20px;overflow:hidden;display:flex;background:var(--bg);color:var(--text);font-family:'Hanken Grotesk',sans-serif;box-shadow:0 30px 80px rgba(20,20,25,.2);transition:background .35s}
.hy[data-theme="night"]{--accsoft:oklch(0.86 0.16 168/.14);--ink:#0b0f10;--bg:#0a0d0e;--panel:#12181a;--bd:rgba(255,255,255,.08);--text:#e7efee;--muted:#7f8c8b;--acc:oklch(0.86 0.16 168);--accfg:#052018;--spark:oklch(0.86 0.16 168);--sidebg:#0b0f10;--sidetx:#dfe7e6;--sidemut:#7f8c8b;--sidebd:rgba(255,255,255,.08);--sidecard:rgba(255,255,255,.045);--shadow:none}
.hy[data-theme="night"] .hy-mark{box-shadow:0 0 22px oklch(0.86 0.16 168/.5)}
.hy[data-theme="night"] .hy-nav.on .i svg{filter:drop-shadow(0 0 5px oklch(0.86 0.16 168/.6))}
.hy[data-theme="night"] .hy-nav.on::before{box-shadow:0 0 10px oklch(0.86 0.16 168)}
.hy-side{width:240px;flex:none;background:var(--sidebg);border-right:1px solid var(--sidebd);padding:24px 18px;display:flex;flex-direction:column;gap:22px;color:var(--sidetx);transition:background .35s,color .35s}
.hy-brand{display:flex;align-items:center;gap:11px}
.hy-mark{width:32px;height:32px;border-radius:9px;background:oklch(0.86 0.16 168);position:relative}
.hy-mark::after{content:'';position:absolute;inset:9px;border-radius:3px;background:var(--sidebg)}
.hy-wm{font-family:'Bricolage Grotesque';font-weight:700;font-size:18px}
.hy-navlbl{font:600 9.5px 'JetBrains Mono',monospace;letter-spacing:.14em;color:var(--sidemut);text-transform:uppercase;padding:0 10px;margin-bottom:7px}
.hy-navg{display:flex;flex-direction:column;gap:3px}
.hy-nav{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;font-size:13.5px;color:var(--sidemut);font-weight:500;position:relative}
.hy-nav .i{width:16px;height:16px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--sidemut);opacity:.7}
.hy-nav .i svg{width:16px;height:16px}
.hy-nav.on{background:color-mix(in oklch,var(--acc) 13%,transparent);color:var(--acc)}
.hy-nav.on .i{color:var(--acc);opacity:1}
.hy-nav.on::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--acc)}
.hy-sbal{margin-top:auto;border:1px solid var(--sidebd);border-radius:11px;padding:13px;background:var(--sidecard)}
.hy-sbal .l,.hy-srole .l{font:600 9.5px 'JetBrains Mono',monospace;color:var(--sidemut);letter-spacing:.1em;text-transform:uppercase}
.hy-sbal .v{font:700 20px 'JetBrains Mono',monospace;margin-top:4px}
.hy-srole{border:1px solid var(--sidebd);border-radius:11px;padding:11px 12px;background:var(--sidecard)}
.hy-srole .v{display:flex;justify-content:space-between;margin-top:5px;font-weight:600;font-size:13px}
.hy-main{flex:1;padding:22px 30px 30px;display:flex;flex-direction:column;gap:18px;min-width:0;background:var(--bg);transition:background .35s}
.hy-top{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
/* Action buttons and the theme/bell/avatar cluster are each grouped into their own flex box
   (instead of being loose siblings of .hy-top) so wrapping behaves the same everywhere: the
   icon cluster always travels with the title as one unit, and the action buttons wrap together
   as a separate block — previously each page had a different number of buttons before the icons,
   so the icons would land on a different line/position on almost every page ("shifts in different
   pages"). See the mobile override below for the forced 2-row layout this enables. */
.hy-topactions{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.hy-topicons{display:flex;align-items:center;gap:11px;flex:none}
.hy-h{font-family:'Bricolage Grotesque';font-weight:700;font-size:23px;letter-spacing:-.02em}
.hy-search{margin-left:auto;background:var(--panel);border:1px solid var(--bd);border-radius:11px;padding:9px 14px;font-size:13px;color:var(--muted);width:168px;transition:background .35s}
.hy-ic{width:40px;height:40px;flex-shrink:0;border-radius:11px;background:var(--panel);border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;color:var(--text);font-size:15px;cursor:pointer;transition:background .35s;user-select:none}
.hy-custom{background:var(--acc);color:var(--accfg);font-weight:600;font-size:12.5px;padding:9px 14px;border-radius:11px;cursor:pointer;white-space:nowrap}
.hy-av{width:40px;height:40px;flex-shrink:0;border-radius:11px;background:linear-gradient(140deg,oklch(0.8 0.13 55),oklch(0.6 0.16 20));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:15px;font-family:'Bricolage Grotesque',sans-serif;user-select:none}
.hy-greet{font-family:'Bricolage Grotesque';font-weight:700;font-size:27px;letter-spacing:-.02em}
.hy-greetp{font-size:13px;color:var(--muted);margin-top:2px}
.hy-editbar{display:flex;align-items:center;gap:10px;background:oklch(0.86 0.16 168/.12);border:1px solid oklch(0.5 0.14 165/.3);border-radius:12px;padding:11px 15px;font-size:13px;font-weight:600;color:var(--text)}
.hy-editbar b{margin-left:auto;background:var(--acc);color:var(--accfg);padding:6px 13px;border-radius:8px;cursor:pointer;font-size:12px;font-weight:600}
.hy-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:15px}
.hy-tile{background:var(--panel);border:1px solid var(--bd);border-radius:16px;padding:17px 18px;box-shadow:var(--shadow);position:relative;transition:background .35s,border-color .35s}
.hy-tile.hyediting{border-style:dashed;border-color:var(--acc);cursor:grab;padding-top:34px}
.hy-tile.hyediting:active{cursor:grabbing}
.hy-tile.hydrag{opacity:.35}
.hy-tile.hyover{outline:2px dashed var(--acc);outline-offset:4px}
.hy-s1{font-size:10.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.hy-s2{font-family:'Bricolage Grotesque';font-weight:700;font-size:29px;margin-top:8px;line-height:1;letter-spacing:-.02em}
.hy-s3{font-size:11.5px;color:var(--muted);font-weight:500;margin-top:8px}
.hy-topup{display:inline-block;margin-top:10px;background:var(--acc);color:var(--accfg);font-weight:600;font-size:12px;padding:7px 12px;border-radius:9px}
.hy-spark{display:flex;align-items:flex-end;gap:4px;height:34px;margin-top:11px}
.hy-spark b{flex:1;background:color-mix(in oklch,var(--spark) 32%,transparent);border-radius:3px}
.hy-spark b.hi{background:var(--spark)}
.hy-gauge{height:9px;border-radius:5px;background:var(--bd);overflow:hidden;margin-top:14px}
.hy-gauge b{display:block;height:100%;background:var(--acc);border-radius:5px}
.hy-rm{position:absolute;top:9px;right:9px;width:22px;height:22px;border-radius:7px;background:color-mix(in oklch,#e5484d 14%,var(--panel));color:#e5484d;display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;z-index:3}
.hy-rm:hover{background:#e5484d;color:#fff}
.hy-grip{position:absolute;top:11px;left:15px;color:var(--muted);font-size:14px;letter-spacing:2px;pointer-events:none;opacity:.6}
/* Project-page "sections" builder cards (branding editor) — same drag-reorder feel as the
   Overview tile customizer above, scoped to its own class since layout differs from .hy-tile. */
.secard.hydrag{opacity:.35}
.secard.hyover{outline:2px dashed var(--acc);outline-offset:3px}
.hy-addbar{display:flex;flex-wrap:wrap;gap:9px;align-items:center;background:var(--panel);border:1px dashed var(--acc);border-radius:14px;padding:13px 15px;transition:background .35s}
.hy-addlbl{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-right:4px}
.hy-addchip{border:1px solid var(--bd);border-radius:20px;padding:7px 13px;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--text);background:var(--bg)}
.hy-addchip:hover{border-color:var(--acc);color:var(--acc)}
.hy-addnone{font-size:12px;color:var(--muted)}
.hy-sec{display:flex;align-items:center;gap:10px;margin-top:4px}
.hy-sech{font-family:'Bricolage Grotesque';font-weight:700;font-size:16px}
.hy-live{background:var(--panel);border:1px solid var(--bd);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);display:flex}
.hy-livevid{width:296px;flex:none;background:repeating-linear-gradient(48deg,#141a1a,#141a1a 10px,#1a2221 10px,#1a2221 20px);position:relative;min-height:132px;display:flex;align-items:flex-end;padding:13px}
.hy-livevid::before{content:'';position:absolute;inset:0;background:radial-gradient(360px 180px at 30% 20%,oklch(0.86 0.16 168/.14),transparent 70%)}
.hy-lbadge{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.55);border:1px solid oklch(0.86 0.16 168/.5);border-radius:20px;padding:4px 10px;font:700 10px 'JetBrains Mono',monospace;letter-spacing:.1em;color:oklch(0.86 0.16 168);z-index:2}
.hy-lbadge i{width:6px;height:6px;border-radius:50%;background:oklch(0.86 0.16 168);animation:sgpulse 1.8s infinite}
.hy-lcap{font:600 10px 'JetBrains Mono',monospace;color:#8b9897;z-index:2}
.hy-liveinfo{flex:1;padding:18px 20px;display:flex;flex-direction:column;justify-content:center;gap:5px}
.hy-liveinfo .t{font-family:'Bricolage Grotesque';font-weight:700;font-size:18px}
.hy-liveinfo .d{font-size:12px;color:var(--muted)}
.hy-openb{align-self:flex-start;margin-top:8px;border:1px solid var(--bd);color:var(--text);font-weight:600;font-size:12px;padding:8px 13px;border-radius:9px}
.hy-apps{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.hy-app{background:var(--panel);border:1px solid var(--bd);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.hy-thumb{height:90px;background:repeating-linear-gradient(48deg,rgba(128,120,105,.16),rgba(128,120,105,.16) 9px,rgba(128,120,105,.05) 9px,rgba(128,120,105,.05) 18px);display:flex;align-items:center;justify-content:center;font:600 9.5px 'JetBrains Mono',monospace;color:var(--muted);letter-spacing:.06em}
.hy-appb{padding:13px 15px}
.hy-appn{font-weight:700;font-size:14px}
.hy-appd{font-size:11px;color:var(--muted);margin-top:2px}
.hy-appf{display:flex;align-items:center;gap:8px;margin-top:11px}
.hy-tag{font-size:10.5px;font-weight:600;padding:4px 9px;border-radius:20px}
.hy-tag.live{background:oklch(0.68 0.16 150/.18);color:oklch(0.62 0.15 150)}
.hy-tag.q{background:oklch(0.8 0.14 60/.2);color:oklch(0.62 0.14 60)}
.hy-tag.warn{background:oklch(0.68 0.19 25/.2);color:oklch(0.55 0.19 25)}
.hy-slots{margin-left:auto;font:600 12px 'JetBrains Mono',monospace;color:var(--muted)}

/* ============ FLOW GALLERY (turn 3) — shared tokens + screen pieces ============ */
[id="3a"],[id="4a"]{--bg:#f7f4ee;--panel:#fff;--bd:#ece6db;--text:#2a251e;--muted:#8a7f70;--acc:oklch(0.5 0.14 165);--accsoft:oklch(0.5 0.14 165/.12);--accfg:#fff;--ink:#0b0f10;--shadow:0 3px 14px rgba(80,60,30,.06);--sidemut:#8a7f70;color:var(--text)}
.fl-groups{display:flex;flex-direction:column;gap:30px}
.fl-grouphd{display:flex;align-items:baseline;gap:12px}
.fl-grouphd u{font:700 10px 'JetBrains Mono',monospace;letter-spacing:.14em;color:var(--acc);text-transform:uppercase;text-decoration:none;border:1px solid var(--acc);border-radius:5px;padding:3px 7px}
.fl-grouphd b{font-family:'Bricolage Grotesque';font-weight:700;font-size:21px;letter-spacing:-.02em}
.fl-grouphd .h{font-size:12.5px;color:var(--muted);font-weight:500}
.fl-row{display:flex;flex-wrap:wrap;gap:30px;align-items:flex-start}
.fl-screen{display:flex;flex-direction:column;gap:11px}
.fl-cap{display:flex;align-items:center;gap:9px;font-family:'Bricolage Grotesque';font-weight:700;font-size:14px;color:var(--text)}
.fl-cap u{font:700 10px 'JetBrains Mono',monospace;background:var(--ink);color:#fff;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:6px;text-decoration:none}
.fl-cap .t{font:500 11px 'JetBrains Mono',monospace;color:var(--muted);letter-spacing:.04em}
/* browser chrome */
.fl-web{width:980px;border-radius:16px;overflow:hidden;box-shadow:0 24px 60px rgba(20,20,25,.16);border:1px solid var(--bd)}
.fl-chrome{display:flex;align-items:center;gap:8px;padding:11px 15px;background:var(--ink)}
.fl-chrome i{width:11px;height:11px;border-radius:50%;background:#2d3536;display:block}
.fl-url{flex:1;margin-left:10px;background:rgba(255,255,255,.07);border-radius:8px;font:600 11px 'JetBrains Mono',monospace;color:#8b9897;padding:6px 13px}
/* generic shell reuse for dashboard screens: wrap in .hy (day defaults) */
.fl-shell{width:1180px;box-shadow:0 24px 60px rgba(20,20,25,.16)}
.hy-sub{font-size:12.5px;color:var(--muted);margin-top:3px}
.hy-panel{background:var(--panel);border:1px solid var(--bd);border-radius:16px;padding:20px 22px;box-shadow:var(--shadow)}
.hy-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--bd);background:var(--panel);color:var(--text);font-weight:600;font-size:12.5px;padding:9px 14px;border-radius:10px;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:transform .1s}
.hy-btn:active{transform:scale(.96);background:var(--accsoft)}
.hy-btn.pri{background:var(--acc);border-color:var(--acc);color:var(--accfg)}
.hy-btn.pri:active{background:var(--acc);filter:brightness(.9)}
.hy-btn.dark{background:var(--ink);border-color:var(--ink);color:#fff}
/* --ink is near-black in BOTH themes, and night mode's --bg is also near-black, so a plain --ink
   pill nearly vanishes against a dark page (this is the "View project page" button). Give it the
   accent color in night mode instead, where it stays a clearly visible, still-distinct pill. */
.hy[data-theme="night"] .hy-btn.dark{background:var(--acc);border-color:var(--acc);color:var(--accfg)}
.hy-btn.sm{padding:6px 11px;font-size:11.5px}
.hy-chip2{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--bd);border-radius:20px;padding:5px 11px;font-size:11.5px;font-weight:600;color:var(--text);background:var(--bg)}
.hy-chip2.acc{border-color:var(--acc);color:var(--acc);background:var(--accsoft)}
.hy-chip2.ok{border-color:oklch(0.62 0.15 150);color:oklch(0.5 0.14 150);background:oklch(0.68 0.16 150/.12)}
.hy-chip2.warn{border-color:oklch(0.62 0.14 60);color:oklch(0.5 0.13 55);background:oklch(0.8 0.14 60/.16)}
/* config rows */
.cfg{display:flex;flex-direction:column}
.cfg-row{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--bd)}
.cfg-row:last-child{border-bottom:none}
.cfg-l{flex:1}
.cfg-l .n{font-weight:600;font-size:13.5px}
.cfg-l .d{font-size:11.5px;color:var(--muted);margin-top:2px}
.cfg-step{display:flex;align-items:center;gap:8px}
.cfg-step u{width:30px;height:30px;border-radius:9px;border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--text);cursor:pointer;text-decoration:none;background:var(--panel)}
.cfg-step .v{font:700 15px 'JetBrains Mono',monospace;width:26px;text-align:center}
.tog{width:40px;height:22px;border-radius:20px;background:var(--acc);position:relative;flex:none}
.tog::after{content:'';position:absolute;right:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff}
.tog.off{background:#cfc7ba}.tog.off::after{right:auto;left:2px}
.seg{display:inline-flex;border:1px solid var(--bd);border-radius:9px;overflow:hidden}
.seg span{padding:7px 13px;font-size:12px;font-weight:600;color:var(--muted)}
.seg span.on{background:var(--acc);color:var(--accfg)}
/* wizard */
.wz-steps{display:flex;align-items:center;gap:10px}
.wz-st{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#b7ada0;white-space:nowrap}
.wz-st u{width:24px;height:24px;border-radius:50%;border:1.5px solid currentColor;display:flex;align-items:center;justify-content:center;font-size:11px;text-decoration:none}
.wz-st.on{color:var(--acc)}
.wz-st.done{color:var(--text)}
.wz-st.done u{background:var(--acc);border-color:var(--acc);color:var(--accfg)}
.wz-line{flex:1;height:2px;background:var(--bd)}
.wz-drop{border:2px dashed var(--bd);border-radius:14px;padding:34px;display:flex;flex-direction:column;align-items:center;gap:9px;background:var(--bg);text-align:center}
.wz-fileico{width:44px;height:44px;border-radius:12px;background:var(--accsoft);display:flex;align-items:center;justify-content:center;color:var(--acc);font-size:20px}
/* branding editor */
.br{display:flex;min-height:340px}
.br-controls{width:230px;flex:none;border-right:1px solid var(--bd);padding:18px;display:flex;flex-direction:column;gap:16px}
.br-field .l{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:7px}
.br-logo{height:44px;border-radius:10px;background:var(--bg);border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;font:600 10px 'JetBrains Mono',monospace;color:var(--muted)}
.br-sw{display:flex;gap:8px}
.br-swatch{width:30px;height:30px;border-radius:8px;border:2px solid var(--panel);box-shadow:0 0 0 1px var(--bd)}
.br-input{background:var(--bg);border:1px solid var(--bd);border-radius:8px;padding:8px 11px;font-size:12px;color:var(--text)}
.br-preview{flex:1;background:var(--bg);padding:20px;display:flex;flex-direction:column;gap:9px}
.br-pv-tag{font:600 10px 'JetBrains Mono',monospace;color:var(--muted);letter-spacing:.06em}
.br-stage{flex:1;border-radius:12px;overflow:hidden;border:1px solid var(--bd)}
.br-stagebody{background:linear-gradient(160deg,#101a2e,#1e2b1c);height:100%;min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#fff}
.br-stagelogo{width:52px;height:52px;border-radius:13px;background:#fff;display:flex;align-items:center;justify-content:center;font:700 11px 'JetBrains Mono',monospace;color:var(--ink)}
/* analytics */
.an-bars{display:flex;align-items:flex-end;gap:8px;height:120px}
.an-bars b{flex:1;background:var(--accsoft);border-radius:5px 5px 0 0}
.an-bars b.hi{background:var(--acc)}
.an-gauge{height:11px;border-radius:6px;background:var(--bd);overflow:hidden;margin-top:12px}
.an-gauge b{display:block;height:100%;background:var(--acc);border-radius:6px}
.an-legend{display:flex;justify-content:space-between;font:600 9.5px 'JetBrains Mono',monospace;color:var(--muted);margin-top:8px}
/* monitoring / build rows */
.mrow{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--bd)}
.mrow:last-child{border-bottom:none}
.mdot{width:9px;height:9px;border-radius:50%;flex:none}
.mdot.live{background:oklch(0.62 0.15 150)}.mdot.q{background:oklch(0.68 0.14 60)}.mdot.off{background:#cfc7ba}
.mbar{flex:1;height:9px;border-radius:5px;background:var(--bd)}
.mmono{font:600 11px 'JetBrains Mono',monospace;color:var(--muted)}
/* viewer subdomain */
.vw-body{background:linear-gradient(165deg,#0e1622,#141d16);min-height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:34px;position:relative}
.vw-logo{width:60px;height:60px;border-radius:15px;background:#fff;border:1px solid rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;font:700 12px 'JetBrains Mono',monospace;color:var(--ink);flex:none}
.vw-title{font-weight:700;font-size:24px}
.vw-sub{font-size:13px}
.vw-play{background:oklch(0.86 0.16 168);color:#052018;font-weight:700;font-size:15px;padding:13px 30px;border-radius:12px;box-shadow:0 0 30px oklch(0.86 0.16 168/.4);display:inline-flex;gap:9px;align-items:center;cursor:pointer;transition:transform .15s,box-shadow .2s}
.vw-play:hover{transform:translateY(-1px)}
.vw-play:active{transform:translateY(0) scale(.97)}
.vw-qnum{font-family:'Bricolage Grotesque';font-weight:700;font-size:64px;color:oklch(0.86 0.16 168);line-height:1}
.vw-qbar{width:220px;height:9px;border-radius:5px;background:rgba(255,255,255,.12);overflow:hidden}
.vw-qbar b{display:block;height:100%;width:58%;background:oklch(0.86 0.16 168);border-radius:5px}
.vw-stream{background:repeating-linear-gradient(48deg,#0f1414,#0f1414 11px,#161d1d 11px,#161d1d 22px);min-height:300px;position:relative;display:flex;align-items:flex-end;padding:16px}
.vw-lbadge{position:absolute;top:15px;left:15px;display:flex;align-items:center;gap:7px;background:rgba(0,0,0,.55);backdrop-filter:blur(10px);border:1px solid oklch(0.86 0.16 168/.5);border-radius:20px;padding:6px 12px;font:700 10px 'JetBrains Mono',monospace;letter-spacing:.1em;color:oklch(0.86 0.16 168)}
.vw-lbadge i{width:7px;height:7px;border-radius:50%;background:oklch(0.86 0.16 168);animation:sgpulse 1.8s infinite}
.vw-hud{position:absolute;top:15px;right:15px;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;max-width:calc(100vw - 30px)}
.vw-hudchip{background:rgba(0,0,0,.55);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15);border-radius:20px;padding:6px 11px;font:600 10px 'JetBrains Mono',monospace;color:#cdd8d6}
.vw-bar{background:rgba(8,11,12,.6);backdrop-filter:blur(18px) saturate(160%);border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:11px;padding:13px 18px}
.vw-ctrl{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#e6efee;display:flex;align-items:center;justify-content:center;font-size:14px;transition:transform .1s}
.vw-ctrl:active{transform:scale(.9);background:rgba(255,255,255,.16)}
.vw-ctrl.pri{background:oklch(0.86 0.16 168);border-color:oklch(0.86 0.16 168);color:#052018}

/* ---- project page hero + themed gate (turn: theme system) ---- */
.vw-glow{position:absolute;width:60%;padding-bottom:60%;border-radius:50%;filter:blur(90px);z-index:0;pointer-events:none}
/* height:100vh on mobile Chrome/Safari includes the space the collapsible address bar WOULD take,
   so it's taller than what's actually visible — content (or, in the stream viewer, the bottom
   control bar) ends up pushed below the real fold. 100dvh ("dynamic viewport height") tracks the
   actual visible area and updates as the browser chrome shows/hides. Declaring vh first keeps a
   safe fallback for browsers that don't support dvh (they simply ignore the second, unknown value). */
.vw-hero{height:100vh;height:100dvh;padding:0;display:flex;flex-direction:column;overflow:hidden}
.vw-herowrap{position:relative;z-index:2;display:flex;align-items:center;gap:min(52px,5vh);padding:0 56px;max-width:1180px;margin:0 auto;flex:1;min-height:0;width:100%;box-sizing:border-box}
.vw-herotxt{flex:1;min-width:0}
.vw-herochip{display:inline-flex;align-items:center;gap:8px;border:1px solid;border-radius:20px;padding:6px 13px;font:700 11px 'JetBrains Mono',monospace;letter-spacing:.04em;margin-bottom:14px}
.vw-herotitle{font-weight:700;font-size:clamp(30px,4.6vw,52px);line-height:1.05;letter-spacing:-.02em;margin-bottom:8px}
.vw-herotagline{font-size:17px;font-weight:600;margin-bottom:8px}
.vw-herolocation{font-size:13.5px;margin-bottom:14px}
.vw-herosub{font-size:15px;line-height:1.5;max-width:440px;margin-bottom:20px}
.vw-herostats{display:flex;gap:24px;margin-top:22px}
.vw-herostat{display:flex;flex-direction:column;gap:3px;padding-left:16px;border-left:2px solid}
.vw-herostat b{font-size:20px;line-height:1}
.vw-herostat span{font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.vw-heropreview{flex:1;min-width:0;max-width:480px;max-height:60vh}
.vw-previewchrome{display:flex;align-items:center;gap:7px;padding:10px 14px;border:1px solid;border-radius:12px 12px 0 0;backdrop-filter:blur(10px)}
.vw-previewchrome i{width:9px;height:9px;border-radius:50%}
.vw-previewchrome span{margin-left:8px;font:600 11.5px 'JetBrains Mono',monospace}
.vw-previewscreen{position:relative;aspect-ratio:16/10;max-height:calc(60vh - 40px);border-radius:0 0 14px 14px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.vw-previewscreen canvas{width:100%;height:100%;display:block}
.vw-custom{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 56px 20px;flex:none}
@media (max-width:860px){.vw-hero{height:auto;min-height:100vh;min-height:100dvh;overflow:visible}.vw-herowrap{flex-direction:column;padding:32px 24px;gap:28px;flex:none}.vw-heropreview{max-width:100%;width:100%;max-height:none}.vw-previewscreen{max-height:none}.vw-herostats{gap:20px}}

/* ---- project-page content sections (Wix-style, scroll below the hero fold) ---- */
.vw-section{padding:64px 24px}
.vw-sectioninner{max-width:1100px;margin:0 auto}
.vw-sectiontitle{font-size:clamp(22px,3vw,30px);font-weight:800;margin-bottom:24px;text-align:center}
.vw-highlights{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.vw-highlight{display:flex;align-items:center;gap:8px;padding:13px 20px;border-radius:14px;border:1px solid;font-size:14.5px;font-weight:600}
.vw-units{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.vw-unit{padding:24px 18px;border-radius:16px;border:1px solid;text-align:center}
.vw-unit .n{font-size:19px;font-weight:800;margin-bottom:6px}
.vw-unit .a{font-size:13px;margin-bottom:4px}
.vw-unit .p{font-size:15px;font-weight:700;margin-top:10px}
.vw-cta{text-align:center}
.vw-ctabtn{display:inline-block;padding:15px 34px;border-radius:12px;font-weight:800;font-size:15px;text-decoration:none;cursor:pointer;transition:transform .1s}
.vw-ctabtn:active{transform:scale(.97)}
/* Generic fallback for anything just marked .clickable with no dedicated :active state of its own
   (tiles, table rows, chips — often much bigger than a button) — opacity rather than scale/transform
   so it stays subtle and doesn't blur text on large elements, but still gives real tap feedback now
   that the browser's own (blocky) tap-highlight overlay is turned off above. */
.clickable:active{opacity:.7}
@media (max-width:860px){.vw-section{padding:44px 20px}}

/* Pre-play gate: a full-viewport branded splash, not a small floating card — the glass panel
   below is the focal point, centered against the full-bleed grid+glow backdrop. */
.vw-gate{height:100vh;height:100dvh;padding:34px;box-sizing:border-box}
.vw-gatecard{display:flex;flex-direction:column;align-items:center;gap:14px;padding:48px 44px;border-radius:22px;width:100%;max-width:520px;margin:0 auto;text-align:center;box-shadow:0 30px 90px rgba(0,0,0,.45)}
@media (max-width:560px){.vw-gate{height:auto;min-height:100vh;min-height:100dvh}.vw-gatecard{padding:36px 26px}}
/* marketing */
.mk-nav{display:flex;align-items:center;gap:20px;padding:16px 26px;background:var(--panel);border-bottom:1px solid var(--bd)}
.mk-nav .lk{font-size:13px;font-weight:500;color:var(--muted)}
.mk-hero{background:linear-gradient(180deg,var(--bg),var(--panel));padding:44px 40px;display:flex;gap:36px;align-items:center}
.mk-h1{font-family:'Bricolage Grotesque';font-weight:700;font-size:38px;line-height:1.05;letter-spacing:-.025em}
.mk-h1 em{font-style:normal;color:var(--acc)}
.mk-lead{font-size:14.5px;color:var(--muted);line-height:1.55;margin:16px 0 22px;max-width:400px}
.mk-heroart{flex:none;width:360px;height:220px;border-radius:16px;background:repeating-linear-gradient(48deg,#0f1414,#0f1414 12px,#18201f 12px,#18201f 24px);position:relative;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.mk-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:0 40px 40px}
.mk-feat{background:var(--panel);border:1px solid var(--bd);border-radius:15px;padding:20px}
.mk-featico{width:40px;height:40px;border-radius:11px;background:var(--accsoft);color:var(--acc);display:flex;align-items:center;justify-content:center;font-size:19px;margin-bottom:13px}
.mk-feath{font-family:'Bricolage Grotesque';font-weight:700;font-size:15px}
.mk-featp{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:6px}
/* signup / onboarding */
.su-wrap{background:var(--bg);padding:40px;display:flex;justify-content:center}
.su-card{width:340px;background:var(--panel);border:1px solid var(--bd);border-radius:18px;padding:26px;display:flex;flex-direction:column;gap:13px;box-shadow:var(--shadow)}
.su-in{background:var(--bg);border:1px solid var(--bd);border-radius:10px;padding:11px 13px;font-size:13px;color:var(--muted)}
.su-div{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:11.5px}
.su-div::before,.su-div::after{content:'';flex:1;height:1px;background:var(--bd)}
.ob-wrap{background:var(--bg);padding:40px;display:flex;flex-direction:column;align-items:center;gap:8px}
.ob-choices{display:flex;gap:16px;margin-top:10px}
.ob-choice{width:210px;background:var(--panel);border:2px solid var(--bd);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:9px}
.ob-choice.on{border-color:var(--acc);background:var(--accsoft)}
.ob-choiceic{width:40px;height:40px;border-radius:11px;background:var(--bg)}
.ob-choice.on .ob-choiceic{background:var(--acc)}

/* ============ INTERACTIVE VIEWER (turn 4) + extras ============ */
.iv-play{cursor:pointer;transition:transform .12s,box-shadow .2s}
.iv-play:hover{transform:translateY(-1px);box-shadow:0 0 40px oklch(0.86 0.16 168/.55)}
.iv-ctrl{cursor:pointer;transition:background .15s,border-color .15s}
.iv-ctrl:hover{border-color:oklch(0.86 0.16 168);color:oklch(0.86 0.16 168)}
.vw-stream.vwfull{min-height:420px}
.vw-qmenu{position:absolute;bottom:66px;right:76px;background:rgba(10,14,16,.85);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.14);border-radius:11px;padding:6px;display:flex;flex-direction:column;gap:2px;min-width:120px;z-index:5;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.vw-qopt{padding:8px 12px;border-radius:7px;font:600 12px 'JetBrains Mono',monospace;color:#cdd8d6;cursor:pointer}
.vw-qopt:hover{background:rgba(255,255,255,.07)}
.vw-qopt.on{color:oklch(0.86 0.16 168)}
.vw-qopt.on::after{content:' \2713'}
.iv-endbtn{cursor:pointer;background:rgba(229,72,77,.15);border:1px solid rgba(229,72,77,.5);color:#ff9ea1;border-radius:20px;padding:7px 15px;font:600 11px 'JetBrains Mono',monospace;transition:background .15s,color .15s}
.iv-endbtn:hover{background:#e5484d;color:#fff}
.iv-simrow{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--bd);border-radius:11px;padding:11px 15px;font-size:12.5px;font-weight:600;color:var(--text)}
.iv-toggle{cursor:pointer}
/* code block */
.code{background:var(--ink);border-radius:12px;padding:17px 18px;font:500 12.5px/1.75 'JetBrains Mono',monospace;color:#c8d3d1;overflow-x:auto;white-space:pre}
.code .k{color:oklch(0.86 0.16 168)}
.code .s{color:#e7b45a}
.code .c{color:#6f7c7b}
.code .t{color:#7fb0ff}
/* access control */
.ac-key{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--bd);border-radius:10px;padding:10px 13px;font:600 12px 'JetBrains Mono',monospace;color:var(--text)}
.ac-key .copy{margin-left:auto;color:var(--acc);cursor:pointer}
/* dashboard navigation */
.nav-row{cursor:pointer;transition:background .12s}
.nav-row:hover{background:var(--accsoft)}
.crumb{display:flex;align-items:center;gap:9px;font:600 12px 'JetBrains Mono',monospace;color:var(--muted);margin-bottom:2px}
.crumb a{color:var(--acc);cursor:pointer;text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb .sep{opacity:.5}
.linkcard{display:flex;align-items:center;gap:14px;padding:15px 18px;border:1px solid var(--bd);border-radius:13px;background:var(--panel);cursor:pointer;transition:border-color .12s,box-shadow .12s}
.linkcard:hover{border-color:var(--acc);box-shadow:0 4px 16px rgba(80,60,30,.08)}
.linkcard .chev{color:var(--muted);font-size:18px}
.pvbar-note{font:600 10px 'JetBrains Mono',monospace;color:#8b9897;letter-spacing:.05em}
/* connected-app viewer modal */
.appshell{position:relative}
.vmodal-bg{position:absolute;inset:0;background:rgba(8,10,10,.6);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:30;border-radius:20px}
.vmodal{width:600px;max-width:90%;border-radius:16px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55);position:relative}
.vmodal-close{position:absolute;top:-40px;right:0;width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.14);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px}
.vmodal-close:hover{background:rgba(255,255,255,.24)}
/* dropdowns (notifications + search) */
.hy-topwrap{position:relative}
.hy-bellwrap{position:relative}
.hy-belldot{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:#e5484d;border:2px solid var(--panel)}
.hy-drop{position:absolute;top:52px;z-index:25;background:var(--panel);border:1px solid var(--bd);border-radius:14px;box-shadow:0 18px 50px rgba(20,20,25,.22);overflow:hidden}
.hy-drop-notif{right:52px;width:320px}
.hy-drop-search{right:96px;width:360px}
.hy-drop-acct{width:250px}
.hy-acctinfo{padding:14px 16px;border-bottom:1px solid var(--bd)}
.hy-acctname{font-size:13.5px;font-weight:700}
.hy-acctemail{font-size:11.5px;margin-top:2px}
.hy-acctrow{display:flex;align-items:center;gap:10px;padding:12px 16px;font-size:13px;font-weight:600;color:var(--text);cursor:pointer}
.hy-acctrow:hover{background:var(--bg)}
.hy-acctrow svg{width:15px;height:15px;flex:none;color:var(--muted)}
.hy-drophd{padding:12px 16px;font:700 11px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--bd)}
.hy-notrow{display:flex;gap:11px;align-items:flex-start;padding:12px 16px;border-bottom:1px solid var(--bd)}
.hy-notrow:last-child{border-bottom:none}
.hy-notic{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;flex:none;background:var(--bg);color:var(--muted)}
.hy-notic.warn{background:oklch(0.8 0.14 60/.18);color:oklch(0.5 0.13 55)}
.hy-notic.ok{background:oklch(0.68 0.16 150/.16);color:oklch(0.5 0.14 150)}
.hy-nottitle{font-size:12.5px;font-weight:600;line-height:1.35}
.hy-nottime{font:600 10px 'JetBrains Mono',monospace;color:var(--muted);margin-top:3px}
.hy-searchin{margin:12px 16px;background:var(--bg);border:1px solid var(--bd);border-radius:10px;padding:10px 13px;font-size:13px;color:var(--muted)}
.hy-searchlbl{padding:4px 16px;font:700 10px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hy-searchrow{display:flex;gap:11px;align-items:center;padding:9px 16px;cursor:pointer}
.hy-searchrow:hover{background:var(--accsoft)}
.hy-searchrow .ico{width:26px;height:26px;border-radius:7px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:13px;flex:none}
/* team */
.tm-row{display:flex;align-items:center;gap:13px;padding:14px 0;border-bottom:1px solid var(--bd)}
.tm-row:last-child{border-bottom:none}
.tm-av{width:38px;height:38px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff}
.tm-name{font-weight:700;font-size:13.5px}
.tm-email{font:600 11px 'JetBrains Mono',monospace;color:var(--muted);margin-top:2px}
.tm-role{border:1px solid var(--bd);border-radius:20px;padding:6px 12px;font-size:11.5px;font-weight:600;color:var(--text);cursor:pointer}
.tm-invite{display:flex;gap:10px;align-items:center}
.tm-inin{flex:1;background:var(--bg);border:1px solid var(--bd);border-radius:10px;padding:10px 13px;font-size:13px;color:var(--muted)}
/* docs / api keys */
.dc-key{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--bd)}
.dc-key:last-child{border-bottom:none}
.dc-keyval{font:600 12px 'JetBrains Mono',monospace;color:var(--text);background:var(--bg);border:1px solid var(--bd);border-radius:8px;padding:7px 11px}
.dc-tab{display:flex;gap:6px;margin-bottom:12px}
.dc-tabi{padding:7px 13px;border-radius:9px;font-size:12px;font-weight:600;color:var(--muted);background:var(--bg);border:1px solid var(--bd)}
.dc-tabi.on{background:var(--acc);color:var(--accfg);border-color:var(--acc)}
/* blocked viewer */
.vw-blocked{background:linear-gradient(165deg,#2a1114,#241016);min-height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:34px;text-align:center}
.vw-blockic{width:56px;height:56px;border-radius:15px;background:rgba(229,72,77,.16);border:1px solid rgba(229,72,77,.5);color:#ff9ea1;display:flex;align-items:center;justify-content:center;font-size:24px}
</style>

/* ============ APP-LEVEL OVERRIDES (make the fixed-width mockup a real responsive app) ============ */
html,body{height:100%}
.hy.appshell{width:100%;min-height:100vh;min-height:100dvh;border-radius:0;box-shadow:none;display:flex}
.hy-main{max-height:100vh;max-height:100dvh;overflow-y:auto}
.hy-side{position:sticky;top:0;height:100vh;height:100dvh}
.hy-nav{cursor:pointer;user-select:none}
.hy-nav:hover{color:var(--acc)}
/* The dashboard shell had zero mobile layout: .hy-side is a fixed 240px column and .hy-apps/
   .hy-live are fixed 3-col grids / fixed-width flex rows, so on a ~430px phone the main content
   was squeezed into ~190px, wrapping every word of project cards onto its own line ("curved but
   the highlight is blocky" screenshot's follow-up report — sidebar+cramped-content, not a vh bug).
   Below ~760px, collapse the sidebar into the content column and switch grids to single-column.
   The nav itself first tried wrapping to multiple rows here, but that produced a different
   number of rows (and a stray gap before "Log out") on every page depending on label lengths —
   inherently inconsistent. It's now a single nowrap row that scrolls horizontally instead, so
   it looks identical everywhere: logo, then every nav item, then Log out, all on one line. */
@media (max-width:760px){
  .hy.appshell{flex-direction:column;height:auto}
  .hy-side{width:100%;height:auto;position:relative;flex-direction:row;flex-wrap:nowrap;align-items:center;border-right:none;border-bottom:1px solid var(--sidebd);padding:10px 14px;gap:14px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .hy-side::-webkit-scrollbar{display:none}
  .hy-side .hy-brand{flex:none}
  .hy-side .hy-navlbl{display:none}
  .hy-side .hy-navg{flex-direction:row;flex-wrap:nowrap;gap:4px;flex:none}
  .hy-side .hy-nav{white-space:nowrap;flex:none;padding:7px 10px}
  .hy-side .hy-sbal,.hy-side .hy-srole{display:none}
  .hy-side .hy-nav[data-logout]{margin-top:0;margin-left:4px}
  .hy-main{max-height:none;overflow-y:visible;padding:16px}
  .hy-apps{grid-template-columns:1fr}
  .hy-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .hy-live{flex-direction:column}
  .hy-livevid{width:100%}
  .hy-search{display:none}
  /* Force the title+icon-cluster onto one row and the action buttons onto the row below,
     regardless of how many buttons a given page passes into topbar() — see the .hy-topactions/
     .hy-topicons split in app.js's topbar(). Without this, the icons landed in a different spot
     on almost every page depending on how much button content came before them. */
  .hy-top{row-gap:6px}
  .hy-h{order:1;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hy-top>.grow{order:2;flex:0 0 0;display:none}
  .hy-topicons{order:3;flex:none}
  .hy-topactions{order:4;flex:1 1 100%}
  /* Chip/badge rows (project status line, config-defaults line) used .row with no wrap, so on
     mobile the chips ran off the right edge instead of flowing to a second line. Tables (session
     history, transactions) have more columns than a phone is wide, so give them their own
     horizontal scroller inside the card instead of letting the page itself overflow. */
  .row{flex-wrap:wrap;row-gap:8px}
  .hy-panel{overflow-x:auto}
  .tbl{min-width:560px}
}
.hidden{display:none!important}
.spinner{width:18px;height:18px;border:2px solid rgba(128,128,128,.3);border-top-color:currentColor;border-radius:50%;animation:spin .7s linear infinite;display:inline-block;vertical-align:middle}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#111;color:#fff;padding:12px 20px;border-radius:12px;font-size:13px;font-weight:600;z-index:9999;box-shadow:0 10px 40px rgba(0,0,0,.35);opacity:0;transition:opacity .25s,transform .25s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}
.toast.err{background:#b3261e}
input.br-input,input.su-in,input.tm-inin,select.br-input{width:100%;outline:none;font-family:inherit}
input:focus,select:focus{border-color:var(--acc)}
.field-lg{width:100%;background:var(--bg);border:1px solid var(--bd);border-radius:10px;padding:12px 14px;font-size:14px;color:var(--text);outline:none}
.modal-bg{position:fixed;inset:0;background:rgba(8,10,10,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal{width:520px;max-width:100%;max-height:90vh;overflow:auto;background:var(--panel);border:1px solid var(--bd);border-radius:18px;padding:26px;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.modal h3{font-family:'Bricolage Grotesque';font-size:20px;margin-bottom:4px}
.row{display:flex;gap:12px;align-items:center}
.grow{flex:1}.muted{color:var(--muted)}.mono{font-family:'JetBrains Mono',monospace}
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font:700 9.5px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--bd)}
.tbl td{padding:12px;border-bottom:1px solid var(--bd);font-size:13px}
.clickable{cursor:pointer}

/* ===== Landing page 2.0 — showcase + scroll animation (theme-aware) ===== */
.mk{--maxw:1120px}
.mk-nav{position:sticky;top:0;z-index:60;backdrop-filter:blur(10px);background:color-mix(in oklch,var(--panel) 82%,transparent);transition:box-shadow .3s,background .3s,border-color .3s}
.mk-nav.scrolled{box-shadow:0 6px 24px rgba(0,0,0,.14);background:color-mix(in oklch,var(--panel) 94%,transparent)}
.mk-nav .lk{transition:color .2s}.mk-nav .lk:hover{color:var(--acc)}
.mk-toggle{width:38px;height:38px;border-radius:11px;background:var(--panel);border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;color:var(--text);user-select:none}
.mk-wrap{max-width:var(--maxw);margin:0 auto}
.mk-hero{position:relative;overflow:hidden}
.mk-hero .glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none;z-index:0}
.mk-hero .g1{width:420px;height:420px;background:var(--acc);top:-140px;right:-60px;opacity:.22}
.mk-hero .g2{width:320px;height:320px;background:oklch(0.7 0.17 300);bottom:-160px;left:-80px;opacity:.14}
.mk-hero>*{position:relative;z-index:1}
.mk-h1{font-size:clamp(34px,5vw,52px)}
.mk-eyebrow{font:700 11px 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.mk-h2{font-family:'Bricolage Grotesque';font-weight:700;font-size:clamp(26px,3.4vw,36px);line-height:1.1;letter-spacing:-.02em}
.mk-section{padding:70px 40px}
.mk-section.alt{background:linear-gradient(180deg,transparent,color-mix(in oklch,var(--acc) 5%,transparent))}
.mk-center{text-align:center;max-width:640px;margin:0 auto 42px}
.mk-center .mk-lead{margin:12px auto 0;max-width:520px}

/* browser mockup with a "live" stream */
.mk-browser{width:100%;border-radius:16px;overflow:hidden;border:1px solid var(--bd);background:var(--panel);box-shadow:0 30px 70px rgba(0,0,0,.30)}
.mk-chrome{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--ink)}
.mk-chrome i{width:10px;height:10px;border-radius:50%}
.mk-chrome .u{margin-left:10px;font:600 11px 'JetBrains Mono',monospace;color:#8b9897;background:rgba(255,255,255,.06);padding:4px 12px;border-radius:7px}
.mk-screen{position:relative;aspect-ratio:16/10;background:#0b0f10}
.mk-screen canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.mk-hud{position:absolute;bottom:12px;left:12px;right:12px;display:flex;align-items:center;gap:8px;z-index:3}
.mk-hud .chip{background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:5px 10px;font:600 11px 'JetBrains Mono',monospace;color:#dfe7e6}

/* how it works */
.mk-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:var(--maxw);margin:0 auto}
.mk-step{background:var(--panel);border:1px solid var(--bd);border-radius:16px;padding:22px;position:relative;box-shadow:var(--shadow)}
.mk-step .n{font:700 12px 'JetBrains Mono',monospace;color:var(--accfg);background:var(--acc);width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.mk-step h4{font-family:'Bricolage Grotesque';font-weight:700;font-size:16px}
.mk-step p{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:6px}

/* alternating feature showcase */
.mk-show{display:flex;align-items:center;gap:44px;max-width:var(--maxw);margin:0 auto 56px}
.mk-show:last-child{margin-bottom:0}
.mk-show.rev{flex-direction:row-reverse}
.mk-show .txt{flex:1}
.mk-show .art{flex:1;min-width:0}
.mk-show h3{font-family:'Bricolage Grotesque';font-weight:700;font-size:clamp(20px,2.4vw,26px);margin:10px 0 8px;letter-spacing:-.01em}
.mk-show p{font-size:13.5px;color:var(--muted);line-height:1.6}
.mk-ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.mk-ul li{font-size:13px;color:var(--text);padding-left:24px;position:relative}
.mk-ul li::before{content:'✓';position:absolute;left:0;color:var(--acc);font-weight:800}
.mk-panel{background:var(--panel);border:1px solid var(--bd);border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.16);overflow:hidden}
.mk-panel .bar{height:8px;background:var(--acc);opacity:.9}
.mk-mini{padding:16px}
.mk-mini .r{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--bd)}
.mk-mini .r:first-child{border-top:0}
.mk-swatch{width:26px;height:26px;border-radius:7px;flex:none}
.mk-bars{display:flex;align-items:flex-end;gap:8px;height:120px;padding:12px 4px 0}
.mk-bars b{flex:1;background:var(--acc);border-radius:5px 5px 0 0;opacity:.85;display:block}

/* stats band */
.mk-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:var(--maxw);margin:0 auto}
.mk-stat{text-align:center}
.mk-stat .v{font-family:'Bricolage Grotesque';font-weight:700;font-size:34px;color:var(--acc);line-height:1}
.mk-stat .l{font-size:12px;color:var(--muted);margin-top:6px}

/* final CTA + footer */
.mk-cta{max-width:820px;margin:0 auto;text-align:center;background:var(--panel);border:1px solid var(--bd);border-radius:22px;padding:48px 30px;box-shadow:0 24px 60px rgba(0,0,0,.18);position:relative;overflow:hidden}
.mk-cta .glow{position:absolute;width:360px;height:360px;border-radius:50%;background:var(--acc);filter:blur(80px);opacity:.16;top:-120px;left:50%;transform:translateX(-50%)}
.mk-cta>*{position:relative;z-index:1}
.mk-foot{border-top:1px solid var(--bd);padding:26px 40px;display:flex;align-items:center;gap:16px;color:var(--muted);font-size:12.5px;flex-wrap:wrap}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
@media (max-width:820px){.mk-show,.mk-show.rev{flex-direction:column;gap:22px}.mk-steps,.mk-stats{grid-template-columns:1fr 1fr}.mk-feats{grid-template-columns:1fr}.mk-hero{flex-direction:column}.mk-section{padding:48px 22px}}

/* ===== Mobile top bar + auth pages ===== */
.hy-wm{white-space:nowrap}
@media (max-width:700px){
  .mk-nav{gap:9px;padding:11px 14px}
  .mk-nav .lk{display:none}
  .mk-nav .hy-brand{gap:8px}
  .mk-nav .hy-mark{width:26px;height:26px;border-radius:7px}
  .mk-nav .hy-mark::after{inset:7px}
  .mk-nav .hy-wm{font-size:15.5px}
  .mk-toggle{width:34px;height:34px;border-radius:9px;flex-shrink:0}
  .mk-nav .hy-btn{padding:8px 11px;font-size:12px;border-radius:9px}
  .su-wrap{padding:24px 16px}
  .su-wrap[style]{padding-top:36px!important}
  .su-card{width:100%;max-width:380px}
}
@media (max-width:360px){
  .mk-nav .hy-wm{display:none}
  .mk-nav .hy-btn{padding:8px 9px;font-size:11.5px}
}

/* ===== Dashboard overview polish (CSS-only entrance — always visible) ===== */
@keyframes hyup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hy-fade{animation:hyup .5s cubic-bezier(.2,.7,.2,1) both}
.hy-fade.d1{animation-delay:.06s}.hy-fade.d2{animation-delay:.12s}.hy-fade.d3{animation-delay:.18s}
@media (prefers-reduced-motion:reduce){.hy-fade{animation:none}}
/* Page-switch direction: desktop's nav is a vertical list, so #main keeps the up-fade above as-is.
   Mobile's nav is a left-to-right strip (see the max-width:760px block), so there a page switch
   slides in horizontally instead — from the right by default (moving to a later tab), or from the
   left when app.js's renderShell() adds .dir-l (moving to an earlier tab). Matches the feel of
   swiping between tabs on a phone rather than a vertical list. */
@keyframes hyslideR{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes hyslideL{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
@media (max-width:760px){
  .hy-main.hy-fade{animation:hyslideR .38s cubic-bezier(.2,.7,.2,1) both}
  .hy-main.hy-fade.dir-l{animation:hyslideL .38s cubic-bezier(.2,.7,.2,1) both}
}
@media (prefers-reduced-motion:reduce){.hy-main.hy-fade{animation:none!important}}
.ov-hero{position:relative;overflow:hidden;border:1px solid var(--bd);border-radius:18px;padding:22px 24px;background:linear-gradient(120deg,var(--accsoft),transparent)}
.ov-hero .glow{position:absolute;width:300px;height:300px;border-radius:50%;background:var(--acc);filter:blur(80px);opacity:.12;top:-150px;right:-50px;pointer-events:none}
.ov-hero>*{position:relative}