/* BOOBA OS — styles of the design (resources/design/booba-os.html), copied unchanged; additions at the end come from tools/frontend/extra.css. Generated by tools/frontend/build.py. */
/* ============ TOKENS ============ */
:root{
  --ease:cubic-bezier(.22,1,.36,1);
  --pink:#FF1F7A;--coral:#FF4D67;--orange:#FF8A3D;--purple:#7C3AED;
  --green:#14D990;--amber:#FFB020;--red:#FF4D5E;--blue:#4C8DFF;--violet:#9B5CFF;
  --grad:linear-gradient(135deg,#FF1F7A 0%,#FF4D67 40%,#FF8A3D 100%);
  --grad-btn:linear-gradient(135deg,#FF1F7A,#FF635D,#FF8A3D);
  --grad-ai:linear-gradient(135deg,#7C3AED 0%,#FF1F7A 55%,#FF8A3D 100%);
  --sans:Nunito,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:Comfortaa,Nunito,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
  --bg:#F7F8FA;--surface:#FFFFFF;--surface-2:#F1F3F6;--card:#FFFFFF;--card-border:#E8EAF0;--border:#E6E8EC;
  --text:#101217;--text-2:#626875;--muted:#969CA8;
  --shadow:0 6px 24px rgba(15,20,30,.05);--shadow-hover:0 14px 34px rgba(15,20,30,.09);--shadow-lg:0 24px 60px rgba(15,20,30,.14);
  --btn2-bg:#FFFFFF;--btn2-border:#E6E8EC;
  --nav-active-bg:#FFE9F2;--nav-active-text:#E0106A;
  --pink-ink:#E0106A;--green-ink:#08935D;--amber-ink:#A86500;--red-ink:#DC2F44;--blue-ink:#2E6FE0;--violet-ink:#7C3AED;--orange-ink:#D25E17;
  --tint:12%;
  --glow-pink:rgba(255,31,122,.13);--glow-orange:rgba(255,138,61,.12);
  --overlay:rgba(16,18,23,.36);--topbar-bg:rgba(247,248,250,.84);
  --bubble-me:#FFE3EE;--bubble-me-text:#3B0A1E;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#090B0F;--surface:#101319;--surface-2:#151922;--card:#12161D;--card-border:#242A35;--border:#242A35;
  --text:#F7F8FA;--text-2:#9CA3AF;--muted:#687080;
  --shadow:0 6px 24px rgba(0,0,0,.28);--shadow-hover:0 16px 40px rgba(0,0,0,.45);--shadow-lg:0 30px 80px rgba(0,0,0,.6);
  --btn2-bg:#141820;--btn2-border:#252B36;
  --nav-active-bg:linear-gradient(135deg,#FF1F7A,#FF4D67 60%,#FF6A4D);--nav-active-text:#FFFFFF;
  --pink-ink:#FF5C97;--green-ink:#14D990;--amber-ink:#FFB020;--red-ink:#FF6B79;--blue-ink:#6EA2FF;--violet-ink:#B08BFF;--orange-ink:#FF9F5E;
  --tint:18%;
  --glow-pink:rgba(255,31,122,.22);--glow-orange:rgba(255,138,61,.14);
  --overlay:rgba(0,0,0,.62);--topbar-bg:rgba(9,11,15,.8);
  --bubble-me:#5A1636;--bubble-me-text:#FFE9F2;
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#090B0F;--surface:#101319;--surface-2:#151922;--card:#12161D;--card-border:#242A35;--border:#242A35;
  --text:#F7F8FA;--text-2:#9CA3AF;--muted:#687080;
  --shadow:0 6px 24px rgba(0,0,0,.28);--shadow-hover:0 16px 40px rgba(0,0,0,.45);--shadow-lg:0 30px 80px rgba(0,0,0,.6);
  --btn2-bg:#141820;--btn2-border:#252B36;
  --nav-active-bg:linear-gradient(135deg,#FF1F7A,#FF4D67 60%,#FF6A4D);--nav-active-text:#FFFFFF;
  --pink-ink:#FF5C97;--green-ink:#14D990;--amber-ink:#FFB020;--red-ink:#FF6B79;--blue-ink:#6EA2FF;--violet-ink:#B08BFF;--orange-ink:#FF9F5E;
  --tint:18%;
  --glow-pink:rgba(255,31,122,.22);--glow-orange:rgba(255,138,61,.14);
  --overlay:rgba(0,0,0,.62);--topbar-bg:rgba(9,11,15,.8);
  --bubble-me:#5A1636;--bubble-me-text:#FFE9F2;
}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
html.theming,html.theming *{transition:background-color .42s var(--ease),border-color .42s var(--ease),color .42s var(--ease),fill .42s,stroke .42s,box-shadow .42s !important}

/* ============ BASE ============ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
body{min-height:100%;background:var(--bg);color:var(--text);font:400 14px/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
svg{max-width:100%}
.ic{flex:none;display:block}
:focus-visible{outline:2px solid var(--pink);outline-offset:2px;border-radius:6px}
::selection{background:rgba(255,31,122,.2)}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.02em;line-height:1.15;font-weight:700}
.display{font:700 clamp(38px,5.8vw,74px)/1.02 var(--display);letter-spacing:-.04em}
.title-xl{font:800 clamp(32px,4.2vw,54px)/1.02 var(--display);letter-spacing:-.035em}
.title{font:700 clamp(28px,3.4vw,42px)/1.06 var(--display);letter-spacing:-.03em}
.h2{font:700 clamp(26px,3.2vw,38px)/1.1 var(--display);letter-spacing:-.03em}
.h3{font:600 18px/1.25 var(--display);letter-spacing:-.015em}
.h4{font:600 15px/1.3 var(--display);letter-spacing:-.01em}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.t2{color:var(--text-2)}.mut{color:var(--muted)}.sm{font-size:13px}.xs{font-size:12px}.xxs{font-size:11px}.b{font-weight:600}
.num{font-family:var(--display);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.lead{font-size:17px;line-height:1.6;color:var(--text-2);max-width:56ch}
.row{display:flex;align-items:center}.col{display:flex;flex-direction:column}.wrap{flex-wrap:wrap}.between{justify-content:space-between}.start{align-items:flex-start}
.g4{gap:4px}.g6{gap:6px}.g8{gap:8px}.g10{gap:10px}.g12{gap:12px}.g16{gap:16px}.g20{gap:20px}.g24{gap:24px}
.grow{flex:1;min-width:0}.ml-auto{margin-inline-start:auto}.center{text-align:center}.nowrap{white-space:nowrap}
.mt4{margin-top:4px}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt20{margin-top:20px}.mt24{margin-top:24px}.mt32{margin-top:32px}
.grid{display:grid;gap:16px}.c2{grid-template-columns:repeat(2,minmax(0,1fr))}.c3{grid-template-columns:repeat(3,minmax(0,1fr))}.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.container{width:min(1280px,calc(100% - 40px));margin-inline:auto}
.hr{height:1px;background:var(--border);border:0}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ============ COMPONENTS ============ */
.card{background:var(--card);border:1px solid var(--card-border);border-radius:14px;box-shadow:var(--shadow)}
.card.pad{padding:20px}.card.lg{border-radius:18px}
.lift{transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s}
.lift:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:color-mix(in srgb,var(--pink) 13%,var(--card-border))}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.tile{display:inline-grid;place-items:center;border-radius:12px;flex:none;background:color-mix(in srgb,var(--c) var(--tint),transparent);color:var(--c)}
.badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;background:var(--surface-2);color:var(--text-2);transition:background .3s,color .3s}
.b-green{background:color-mix(in srgb,var(--green) var(--tint),transparent);color:var(--green-ink)}
.b-amber{background:color-mix(in srgb,var(--amber) var(--tint),transparent);color:var(--amber-ink)}
.b-red{background:color-mix(in srgb,var(--red) var(--tint),transparent);color:var(--red-ink)}
.b-blue{background:color-mix(in srgb,var(--blue) var(--tint),transparent);color:var(--blue-ink)}
.b-violet{background:color-mix(in srgb,var(--violet) var(--tint),transparent);color:var(--violet-ink)}
.b-pink{background:color-mix(in srgb,var(--pink) var(--tint),transparent);color:var(--pink-ink)}
.b-orange{background:color-mix(in srgb,var(--orange) var(--tint),transparent);color:var(--orange-ink)}
.bdot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.tag{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:7px;font-size:12px;font-weight:500;background:var(--surface-2);color:var(--text-2);white-space:nowrap}
.tag.pink{background:color-mix(in srgb,var(--pink) var(--tint),transparent);color:var(--pink-ink)}
.delta{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:600;color:var(--green-ink)}
.delta.down{color:var(--red-ink)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:10px;font-weight:600;font-size:14px;line-height:1;border:1px solid var(--btn2-border);background:var(--btn2-bg);color:var(--text);cursor:pointer;white-space:nowrap;transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s,background .18s,opacity .18s}
.btn:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--pink) 28%,var(--btn2-border))}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--grad-btn);color:#fff;border-color:transparent}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(255,31,122,.24);border-color:transparent}
.btn-soft{background:color-mix(in srgb,var(--pink) 9%,var(--surface));color:var(--pink-ink);border-color:transparent}
.btn-ghost{background:transparent;border-color:transparent}
.btn-ghost:hover{background:var(--surface-2);border-color:transparent}
.btn-lg{height:48px;padding:0 22px;font-size:15px;border-radius:12px}
.btn-sm{height:32px;padding:0 12px;font-size:13px;border-radius:8px}
.btn-xs{height:28px;padding:0 10px;font-size:12px;border-radius:8px}
.btn-block{width:100%}
.icon-btn{width:38px;height:38px;padding:0;position:relative}
.btn[disabled]{opacity:.55;pointer-events:none}
.btn .dots i{background:#fff}

.label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.input,.select,.textarea{width:100%;height:44px;border-radius:10px;border:1px solid var(--border);background:var(--surface);padding:0 14px;color:var(--text);outline:none;transition:border-color .18s,box-shadow .18s}
.textarea{height:auto;padding:12px 14px;resize:vertical;min-height:90px;line-height:1.5}
.input:focus,.select:focus,.textarea:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,31,122,.12)}
.input::placeholder,.textarea::placeholder{color:var(--muted)}
.ifield{display:flex;align-items:center;gap:12px;padding:9px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface);transition:border-color .18s,box-shadow .18s}
.ifield:focus-within{border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,31,122,.12)}
.ifield>.ic{color:var(--muted)}
.ifield label{display:block;font-size:12px;font-weight:600}
.ifield input{display:block;width:100%;border:0;background:transparent;outline:none;padding:1px 0 0;color:var(--text);font-size:14px}
.ifield input::placeholder{color:var(--muted)}
.ifield.err{border-color:var(--red);animation:shake .35s}
.err-msg{font-size:12px;color:var(--red-ink);margin-top:6px;min-height:0}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.check{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;user-select:none}
.check input,.cbox{appearance:none;-webkit-appearance:none;width:18px;height:18px;border-radius:5px;border:1.5px solid var(--border);background:var(--surface);display:grid;place-items:center;transition:background .15s,border-color .15s;flex:none;cursor:pointer}
.check input:checked,.cbox:checked{background:var(--grad);border-color:transparent}
.check input:checked::after,.cbox:checked::after{content:"";width:9px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.switch{appearance:none;-webkit-appearance:none;width:42px;height:24px;border-radius:99px;background:var(--surface-2);border:1px solid var(--border);position:relative;cursor:pointer;transition:background .2s;flex:none}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .22s var(--ease)}
.switch:checked{background:var(--grad);border-color:transparent}
.switch:checked::after{transform:translateX(18px)}
input[type=range]{width:100%;accent-color:var(--pink);cursor:pointer}

.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.tabs button{position:relative;padding:11px 14px;font-weight:500;color:var(--text-2);white-space:nowrap;transition:color .2s}
.tabs button:hover{color:var(--text)}
.tabs button.on{color:var(--pink-ink);font-weight:600}
.tabs button.on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;background:var(--grad)}
.seg{display:inline-flex;padding:4px;border-radius:12px;background:var(--surface-2);gap:2px;flex-wrap:wrap}
.seg button{height:32px;padding:0 12px;border-radius:9px;font-size:13px;font-weight:500;color:var(--text-2);transition:background .2s,color .2s}
.seg button.on{background:var(--surface);color:var(--pink-ink);box-shadow:0 1px 4px rgba(0,0,0,.08);font-weight:600}
.pill{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface);font-size:13px;font-weight:500;color:var(--text-2);transition:border-color .2s,background .2s,color .2s;white-space:nowrap}
.pill:hover{color:var(--text)}
.pill.on{border-color:color-mix(in srgb,var(--pink) 40%,var(--border));background:color-mix(in srgb,var(--pink) 8%,var(--surface));color:var(--pink-ink)}
.pill .cnt{font-size:11px;padding:1px 6px;border-radius:6px;background:var(--surface-2);color:var(--text-2)}
.prog{height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.prog>i{display:block;height:100%;border-radius:inherit;background:var(--grad);transform-origin:left;animation:growX .9s var(--ease) both}
.prog.green>i{background:linear-gradient(90deg,#0FC27F,#14D990)}
@keyframes growX{from{transform:scaleX(0)}}
.av{display:inline-grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--c) 20%,var(--surface));color:var(--c);font-weight:700;flex:none;font-family:var(--display);letter-spacing:-.02em}
.avs{display:inline-flex;align-items:center}
.avs .av{border:2px solid var(--card);margin-inline-start:-8px}
.avs .av:first-child{margin-inline-start:0}
.avs .more{--c:var(--text-2);width:26px;height:26px;font-size:10px;background:var(--surface-2)}
.score{position:relative;display:inline-grid;place-items:center;flex:none}
.score svg{position:absolute;inset:0;width:100%;height:100%}
.score b{font:700 11px/1 var(--display);position:relative}
.score-arc{animation:dIn .9s var(--ease) both}
.kbd{font:600 11px/1 var(--sans);color:var(--muted);border:1px solid var(--border);border-radius:6px;padding:4px 6px;background:var(--surface-2)}
.dots{display:inline-flex;gap:6px;align-items:center}
.dots i{width:8px;height:8px;border-radius:50%;background:var(--grad);animation:dot .5s var(--ease) infinite alternate}
.dots i:nth-child(2){animation-delay:.12s}.dots i:nth-child(3){animation-delay:.24s}
@keyframes dot{from{transform:scale(.85);opacity:.4}to{transform:scale(1);opacity:1}}
.empty{display:grid;place-items:center;text-align:center;padding:48px 20px;gap:10px}

/* Logo + mascot */
.logo{font-family:var(--display);font-weight:800;letter-spacing:-.045em;display:inline-flex;align-items:baseline;line-height:1;color:var(--text);white-space:nowrap}
.logo .inf{width:1.18em;height:.62em;align-self:center;margin:0 .02em;transform:translateY(.1em)}
.logo .os{font-weight:400;font-size:.8em;margin-left:.2em;letter-spacing:-.02em}
.mascot{display:block;overflow:visible}
.mascot .eyes{transform-box:view-box;transform-origin:61px 60px;animation:blink 6s infinite}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.12)}}
.float{animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-7px)}}

/* Charts */
.chart{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:var(--h,180px) auto;column-gap:10px;row-gap:8px}
.yaxis{position:relative;width:46px}
:root[lang="ar"] .yaxis,:root[lang="fr"] .yaxis{width:62px}
:root[lang="ar"] .yaxis span,:root[lang="fr"] .yaxis span{font-size:10px}
.yaxis span{position:absolute;right:0;transform:translateY(50%);font-size:11px;color:var(--muted);white-space:nowrap}
.plot{position:relative}
.gline{position:absolute;left:0;right:0;height:1px;background:var(--border)}
.tline{position:absolute;left:0;right:0;border-top:1.5px dashed var(--muted);z-index:3;pointer-events:none}
.tline em{position:absolute;right:0;bottom:5px;font-style:normal;font-size:11px;font-weight:600;color:var(--text-2);background:var(--card);padding:2px 7px;border-radius:6px;border:1px solid var(--border)}
.bars{position:absolute;inset:0;display:flex;align-items:flex-end;gap:var(--gap,10px)}
.bcol{flex:1;height:100%;display:flex;align-items:flex-end;justify-content:center;min-width:0}
.bar{position:relative;width:100%;max-width:var(--bw,44px);border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,#FF79A6,#FF1F7A);transform-origin:bottom;animation:barIn .65s var(--ease) both}
.bar.proj{background:color-mix(in srgb,var(--pink) 20%,transparent);border:1px dashed color-mix(in srgb,var(--pink) 45%,transparent);border-bottom:0}
.bar.hi{background:var(--grad);box-shadow:0 8px 24px rgba(255,31,122,.25)}
.tip{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);background:var(--card);border:1px solid var(--card-border);box-shadow:var(--shadow-hover);border-radius:9px;padding:5px 9px;font-size:11.5px;font-weight:700;white-space:nowrap;font-family:var(--display);z-index:4;text-align:center;line-height:1.3}
.tip.pinkt{background:var(--grad);color:#fff;border:0}
@keyframes barIn{from{transform:scaleY(0)}}
.xaxis{grid-column:2;display:flex;gap:var(--gap,10px)}
.xaxis span{flex:1;text-align:center;font-size:11px;color:var(--muted);min-width:0}
.lineov{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.ldot{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--card);border:2.5px solid var(--pink);transform:translate(-50%,50%);z-index:3;animation:fadeIn .4s var(--ease) both}
.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .9s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadeIn{from{opacity:0}}
.donut{position:relative;flex:none}
.donut svg{width:100%;height:100%;display:block}
.dseg{animation:dIn .9s var(--ease) both}
@keyframes dIn{from{stroke-dasharray:0 100}}
.dc{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.dc{padding:0 16%}
.dc b{font:700 clamp(13px,1.3vw,20px)/1.15 var(--display);letter-spacing:-.02em}
.dc span{font-size:11px;color:var(--text-2)}
.legend{display:grid;gap:9px;flex:1;min-width:0}
.legend .li{display:grid;grid-template-columns:10px minmax(0,1fr) auto auto;gap:10px;align-items:center;font-size:12.5px}
.legend .li i{width:10px;height:10px;border-radius:3px}
.legend .li span:nth-child(3){color:var(--muted)}
.legend .li b{font-weight:600;font-family:var(--display)}
.spark{display:block}

/* ============ APP SHELL ============ */
.app{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100%}
.sidebar{position:sticky;top:env(safe-area-inset-top,0px);align-self:start;height:calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;padding:22px 14px 16px;border-inline-end:1px solid var(--border);background:var(--surface);overflow-y:auto;z-index:60}
.sidebar .logo-link{padding:0 10px 22px;display:block}
.nav{position:relative;display:flex;flex-direction:column;gap:2px}
.nav a{position:relative;z-index:1;display:flex;align-items:center;gap:12px;height:40px;padding:0 12px;border-radius:10px;color:var(--text-2);font-weight:500;transition:color .2s,background .2s}
.nav a:hover{color:var(--text);background:var(--surface-2)}
.nav a.active{color:var(--nav-active-text);font-weight:600}
.nav a.active:hover{background:transparent}
.nav-ind{position:absolute;left:0;right:0;top:0;height:40px;border-radius:10px;background:var(--nav-active-bg);transition:transform .26s var(--ease),opacity .2s;z-index:0;pointer-events:none}
.nav-sep{height:1px;background:var(--border);margin:14px 12px}
.upg{position:relative;overflow:hidden;margin-top:auto;border-radius:16px;padding:16px;background:linear-gradient(160deg,color-mix(in srgb,var(--pink) 10%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,var(--pink) 18%,var(--border));min-height:150px;flex:none;margin-top:24px}
.upg .wave{position:absolute;left:-20px;right:-20px;bottom:-30px;height:90px;background:radial-gradient(60% 80% at 30% 100%,#FF1F7A,transparent 70%),radial-gradient(60% 90% at 80% 100%,#FF8A3D,transparent 70%);opacity:.6;filter:blur(6px)}
.upg .go{position:absolute;inset-inline-end:14px;top:58px;width:32px;height:32px;border-radius:50%;background:var(--grad-btn);color:#fff;display:grid;place-items:center;transition:transform .18s var(--ease)}
.upg:hover .go{transform:translateX(2px)}
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;height:70px;display:flex;align-items:center;gap:14px;padding:0 28px;background:var(--topbar-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.cmd{flex:1;min-width:0;max-width:580px;display:flex;align-items:center;gap:10px;height:44px;padding-inline:14px 8px;border-radius:12px;background:var(--surface);border:1px solid var(--border);transition:border-color .2s,box-shadow .2s}
.cmd>.ic{color:var(--pink)}
.cmd input{flex:1;min-width:0;border:0;background:transparent;outline:none;color:var(--text);font-size:14px}
.cmd input::placeholder{color:var(--muted)}
.cmd:focus-within{border-color:color-mix(in srgb,var(--pink) 50%,var(--border));box-shadow:0 0 0 1px rgba(255,31,122,.2),0 8px 30px rgba(255,31,122,.08)}
.menu-btn{display:none}
.ddw{position:relative}
.ddw:not(.open) .dd{display:none}
.dd{position:absolute;inset-inline-end:0;top:calc(100% + 8px);min-width:270px;background:var(--surface);border:1px solid var(--card-border);border-radius:14px;box-shadow:var(--shadow-lg);padding:8px;z-index:70;animation:ddIn .2s var(--ease)}
@keyframes ddIn{from{opacity:0;transform:translateY(-4px) scale(.98)}}
.di{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:9px;font-size:13.5px;color:var(--text);text-align:start}
.di:hover{background:var(--surface-2)}
.ping{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 2px var(--surface)}
.user-chip{display:flex;align-items:center;gap:10px;padding:4px 8px 4px 4px;border-radius:12px;transition:background .2s}
.user-chip:hover{background:var(--surface-2)}
.main{padding:6px 28px 48px;min-width:0}
.main>.page{max-width:1320px;margin-inline:auto}
.scrim{display:none}
.theme-toggle{overflow:hidden}
.theme-toggle .tt{position:absolute;inset:0;display:grid;place-items:center;transition:transform .45s var(--ease),opacity .3s}
.theme-toggle .tt-moon{transform:rotate(-180deg);opacity:0}
.theme-toggle.is-dark .tt-sun{transform:rotate(180deg);opacity:0}
.theme-toggle.is-dark .tt-moon{transform:none;opacity:1}

/* Page transitions */
.page{animation:pageIn .32s var(--ease) both}
.page.leaving{animation:pageOut .15s ease both}
@keyframes pageIn{from{opacity:0;transform:translateY(8px) scale(.995)}}
@keyframes pageOut{to{opacity:0;transform:translateY(-4px)}}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* Hero (app) */
.hero{position:relative;overflow:hidden;isolation:isolate;border-radius:18px;background:var(--card);border:1px solid var(--card-border);box-shadow:var(--shadow);padding:28px 32px;display:flex;align-items:center;gap:24px}
.hero::before{content:"";position:absolute;z-index:-1;right:-40px;top:-140px;width:560px;height:420px;background:radial-gradient(closest-side,var(--glow-pink),transparent 75%);pointer-events:none}
.hero::after{content:"";position:absolute;z-index:-1;right:-140px;bottom:-200px;width:420px;height:380px;background:radial-gradient(closest-side,var(--glow-orange),transparent 75%);pointer-events:none}
.hero-art{position:relative;margin-inline-start:auto;flex:none;display:flex;align-items:center;gap:14px}
.bubble{background:var(--surface);border:1px solid var(--card-border);box-shadow:var(--shadow-hover);border-radius:14px;padding:9px 13px;font-size:12.5px;font-weight:500}
.bubble-stack{display:flex;flex-direction:column;gap:8px}
.bubble-stack .bubble{display:flex;align-items:center;gap:8px;white-space:nowrap;transition:transform .18s var(--ease)}
button.bubble:hover{transform:translateX(-3px);border-color:color-mix(in srgb,var(--pink) 30%,var(--card-border))}
.kpi{position:relative;display:flex;gap:14px;align-items:flex-start;padding:18px}
.kpi .spk{position:absolute;right:16px;bottom:16px}
.seg.sm button{padding:0 9px;font-size:12.5px;height:30px}
.kpi .lbl{font-size:12.5px;color:var(--text-2);font-weight:500}
.kpi .val{font:700 clamp(19px,1.8vw,26px)/1.15 var(--display);letter-spacing:-.025em;margin:2px 0 3px;overflow-wrap:anywhere}
.kpi>div{min-width:0}
.listrow{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--border)}
.listrow:first-child{border-top:0;padding-top:0}
.listrow:last-child{padding-bottom:0}
.lnk{font-size:12.5px;font-weight:600;color:var(--text-2);display:inline-flex;align-items:center;gap:4px;padding:5px 9px;border-radius:8px;border:1px solid var(--border);background:var(--surface);transition:color .2s,border-color .2s}
.lnk:hover{color:var(--pink-ink);border-color:color-mix(in srgb,var(--pink) 30%,var(--border))}
.chip-goal{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface);font-size:13px;font-weight:500;transition:transform .18s var(--ease),border-color .2s,box-shadow .2s}
.chip-goal:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--pink) 30%,var(--border));box-shadow:var(--shadow-hover)}
.ring{position:relative;flex:none}
.ring svg{display:block;width:100%;height:100%}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font:700 18px/1 var(--display)}

/* Tables / rows */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:start;font-weight:500;color:var(--muted);font-size:12px;padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap}
.tbl td{padding:12px;border-bottom:1px solid var(--border);vertical-align:middle;white-space:nowrap}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .15s}
.tbl tbody tr.click{cursor:pointer}
.tbl tbody tr.click:hover{background:var(--surface-2)}
.mtable{min-width:960px}
.mhead,.mrow{display:grid;grid-template-columns:minmax(240px,2.2fr) 124px 110px 140px 90px 130px 158px;align-items:center;gap:12px;padding:0 18px}
.mhead{height:42px;font-size:12px;color:var(--muted);font-weight:500}
.mrow{padding:16px 18px;margin-bottom:10px}
.mission-new{animation:missionIn .5s var(--ease) both}
@keyframes missionIn{from{opacity:0;transform:translateY(15px) scale(.96)}}
.swap{animation:swapIn .35s var(--ease)}
@keyframes swapIn{from{opacity:0;transform:translateY(4px)}}

/* Kanban */
.board{display:grid;grid-template-columns:repeat(4,minmax(176px,1fr));gap:12px;min-width:752px}
.kcol{border-radius:14px;padding:4px;transition:background .2s,outline-color .2s;outline:2px dashed transparent;outline-offset:-2px;min-height:200px}
.kcol.over{background:color-mix(in srgb,var(--pink) 6%,transparent);outline-color:color-mix(in srgb,var(--pink) 40%,transparent)}
.kcard{padding:14px;margin-bottom:10px;cursor:grab;user-select:none}
.kcard.sel{border-color:color-mix(in srgb,var(--pink) 55%,var(--card-border));box-shadow:0 0 0 1px rgba(255,31,122,.2),0 8px 30px rgba(255,31,122,.08)}
.kcard.dragging{opacity:.45}
.logo-sq{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;color:#fff;font:800 14px/1 var(--display);flex:none;background:var(--c)}
.lead-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.lead-wrap.closed{grid-template-columns:minmax(0,1fr)}
.lpanel{position:sticky;top:calc(80px + env(safe-area-inset-top,0px));padding:18px;animation:panelIn .32s var(--ease)}
@keyframes panelIn{from{opacity:0;transform:translateX(12px)}}
.kv{display:grid;grid-template-columns:110px 1fr;gap:9px 10px;font-size:13px}
.kv dt{color:var(--text-2)}
.kv dd{font-weight:500;text-align:end;min-width:0;overflow:hidden;text-overflow:ellipsis}

/* Conversations */
.conv{display:grid;grid-template-columns:300px minmax(0,1fr) 320px;gap:16px;align-items:start}
.clist{padding:16px 10px 10px}
.citem{display:flex;gap:12px;padding:12px 10px;border-radius:12px;cursor:pointer;transition:background .15s;text-align:start;width:100%}
.citem:hover{background:var(--surface-2)}
.citem.on{background:color-mix(in srgb,var(--pink) 9%,var(--surface))}
.unread{min-width:18px;height:18px;border-radius:9px;background:var(--grad);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;padding:0 5px}
.chan{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;color:#fff;font:700 9px/1 var(--sans);flex:none}
.thread{display:flex;flex-direction:column;min-height:640px}
.msgs{flex:1;padding:18px 20px;display:flex;flex-direction:column;gap:16px;overflow-y:auto;max-height:640px}
.msg{display:flex;gap:10px;max-width:86%}
.msg.me{align-self:flex-end;flex-direction:row-reverse}
.mb{background:var(--surface-2);border-radius:14px 14px 14px 4px;padding:11px 14px;font-size:13.5px;line-height:1.55}
.msg.me .mb{background:var(--bubble-me);color:var(--bubble-me-text);border-radius:14px 14px 4px 14px}
.msg-new{animation:missionIn .35s var(--ease) both}
.daysep{align-self:center;font-size:11.5px;color:var(--muted);background:var(--surface-2);padding:3px 10px;border-radius:99px}
.composer{border-top:1px solid var(--border);padding:12px 14px}
.composer textarea{width:100%;border:1px solid var(--border);background:var(--surface);border-radius:12px;padding:12px;padding-inline-end:50px;resize:none;min-height:52px;outline:none;color:var(--text)}
.composer textarea:focus{border-color:var(--pink)}
.send{position:absolute;inset-inline-end:8px;bottom:8px;width:36px;height:36px;border-radius:10px;background:var(--grad-btn);color:#fff;display:grid;place-items:center}
.wave-bars{display:flex;align-items:center;gap:2px;height:24px;flex:1}
.wave-bars i{width:3px;border-radius:2px;background:var(--muted);transition:background .2s}
.wave-bars i.p{background:var(--pink)}
.sugg{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--border);border-radius:12px;transition:border-color .2s}
.sugg:hover{border-color:color-mix(in srgb,var(--pink) 30%,var(--border))}

/* Agents */
.arow{display:grid;grid-template-columns:minmax(260px,1.6fr) 120px 120px 130px 130px 150px 32px;gap:14px;align-items:center;padding:16px 18px;margin-bottom:10px;min-width:1000px}
.ametric{display:flex;gap:10px;align-items:center}
.ametric b{display:block;font:700 15px/1.2 var(--display)}
.ametric span{font-size:11.5px;color:var(--text-2)}
.aact{display:flex;flex-direction:column;gap:4px}
.aact button{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2);padding:4px 8px;border-radius:7px;border:1px solid var(--border);background:var(--surface);transition:color .2s,border-color .2s}
.aact button:hover{color:var(--pink-ink);border-color:color-mix(in srgb,var(--pink) 30%,var(--border))}

/* Settings / integrations */
.introw{display:flex;align-items:center;gap:16px;padding:14px 16px;margin-bottom:10px}
.brand-sq{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--c);color:#fff;font:800 18px/1 var(--display);flex:none}
.theme-card{display:flex;align-items:center;gap:14px;padding:16px;border-radius:14px;border:1.5px solid var(--border);background:var(--surface);text-align:start;width:100%;transition:border-color .2s,box-shadow .2s}
.theme-card.selected{border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,31,122,.1)}
.radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--border);margin-inline-start:auto;display:grid;place-items:center;flex:none}
.theme-card.selected .radio{border-color:var(--pink)}
.theme-card.selected .radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--grad)}

/* Modal + toast */
.overlay{position:fixed;inset:0;z-index:200;background:var(--overlay);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);display:grid;place-items:center;padding:calc(20px + env(safe-area-inset-top,0px)) 16px calc(20px + env(safe-area-inset-bottom,0px));animation:fadeIn .2s ease}
.modal{position:relative;width:min(640px,100%);max-height:100%;overflow:auto;background:var(--surface);border:1px solid var(--card-border);border-radius:22px;box-shadow:var(--shadow-lg);animation:modalIn .26s var(--ease)}
.modal.wide{width:min(780px,100%)}
.modal.narrow{width:min(460px,100%)}
@keyframes modalIn{from{opacity:0;transform:scale(.97)}}
.mclose{position:absolute;top:14px;inset-inline-end:14px;z-index:2}
.mbody{padding:28px}
.toasts{position:fixed;inset-inline-end:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:300;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:12px;min-width:260px;max-width:380px;padding:12px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--card-border);box-shadow:var(--shadow-lg);animation:toastIn .35s var(--ease);font-size:13.5px}
.toast.out{animation:toastOut .25s ease forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(10px) scale(.98)}}
@keyframes toastOut{to{opacity:0;transform:translateY(6px)}}
.think{display:grid;gap:10px;margin-top:20px;text-align:start}
.think-step{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted);transition:color .3s}
.think-step .sc{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border);display:grid;place-items:center;flex:none;transition:background .3s,border-color .3s;color:#fff}
.think-step.done{color:var(--text)}
.think-step.done .sc{background:var(--green);border-color:transparent}
.think-step.cur{color:var(--text)}
.think-step.cur .sc{border-color:var(--pink);border-top-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.verify{position:relative;width:104px;height:104px;margin:0 auto}
.verify .vring{position:absolute;inset:0;border-radius:50%;background:color-mix(in srgb,var(--green) 16%,transparent);animation:vScale .6s var(--ease) both}
.verify .vcore{position:absolute;inset:16px;border-radius:50%;background:linear-gradient(135deg,#0FC27F,#14D990);display:grid;place-items:center;color:#fff;animation:vScale .55s .08s var(--ease) both;box-shadow:0 10px 30px rgba(20,217,144,.35)}
.verify .vpulse{position:absolute;inset:0;border-radius:50%;background:var(--grad);opacity:0;animation:vPulse .8s .35s ease-out both;z-index:-1}
.verify path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .42s .3s var(--ease) forwards}
@keyframes vScale{from{transform:scale(.6);opacity:0}}
@keyframes vPulse{0%{transform:scale(.85);opacity:.45}100%{transform:scale(1.45);opacity:0}}
.vchk{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--surface-2);font-size:13px;opacity:0;animation:missionIn .35s var(--ease) forwards}

/* ============ PUBLIC ============ */
.public{min-height:100%}
.pnav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--topbar-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent)}
.pnav-in{height:68px;display:flex;align-items:center;gap:28px}
.pnav-links{display:flex;gap:4px}
.pnav-links a{padding:8px 12px;border-radius:9px;font-size:14px;font-weight:500;color:var(--text-2);transition:color .2s,background .2s}
.pnav-links a:hover{color:var(--text);background:var(--surface-2)}
.pnav-links a.on{color:var(--pink-ink)}
.sec{padding:110px 0 0}
.sec-h{max-width:680px;margin:0 auto 44px;text-align:center}
.sec-h p{margin-top:12px;color:var(--text-2);font-size:16px}
.eyebrow-pill{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:99px;background:var(--surface);border:1px solid var(--card-border);font-size:12.5px;font-weight:500;color:var(--text-2);box-shadow:var(--shadow)}
.eyebrow-pill .ic{color:var(--pink)}
.l-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:40px;align-items:center;padding:64px 0 40px;position:relative}
.l-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.l-bg::before{content:"";position:absolute;right:-10%;top:-30%;width:70%;height:120%;background:radial-gradient(closest-side,var(--glow-pink),transparent 72%)}
.l-bg::after{content:"";position:absolute;left:-15%;bottom:-40%;width:55%;height:90%;background:radial-gradient(closest-side,var(--glow-orange),transparent 72%)}
.hv{position:relative;min-height:440px}
.hv-dash{position:relative;margin-inline-start:auto;width:min(560px,100%);border-radius:18px;background:var(--card);border:1px solid var(--card-border);box-shadow:var(--shadow-lg);display:grid;grid-template-columns:96px 1fr;overflow:hidden;animation:tiltIn .9s .1s var(--ease) both;transform-origin:50% 100%}
@keyframes tiltIn{from{opacity:0;transform:perspective(1200px) translateY(20px) rotateX(3deg)}}
.hv-side{padding:16px 10px;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:7px;background:var(--surface)}
.hv-side i{display:block;height:8px;border-radius:4px;background:var(--surface-2)}
.hv-side i.on{background:var(--grad);height:14px;border-radius:5px}
.hv-main{padding:14px 16px 16px;display:grid;gap:12px;min-width:0}
.hv-mascot{position:absolute;left:-34px;top:150px;z-index:2}
.hv-chip{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--card-border);box-shadow:var(--shadow-hover);font-size:12.5px;font-weight:600;white-space:nowrap;animation:missionIn .6s var(--ease) both}
.logos{display:flex;align-items:center;justify-content:center;gap:clamp(20px,5vw,56px);flex-wrap:wrap;padding:28px 0;color:var(--muted)}
.logos span{display:inline-flex;align-items:center;gap:8px;font:700 17px/1 var(--display);letter-spacing:-.02em;opacity:.85}
.flow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;position:relative}
.flow::before{content:"";position:absolute;left:7%;right:7%;top:27px;height:2px;background:linear-gradient(90deg,#7C3AED,#FF1F7A,#FF8A3D);opacity:.35}
.fstep{position:relative;text-align:center;display:grid;justify-items:center;gap:8px}
.fstep .fdot{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--card);border:1px solid var(--card-border);box-shadow:var(--shadow);color:var(--pink)}
.fstep:last-child .fdot{background:var(--grad);color:#fff;border:0}
.fstep b{font:600 14px/1.2 var(--display)}
.fstep p{font-size:12.5px;color:var(--text-2);max-width:18ch}
.calc{display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
.calc-in{padding:28px;display:grid;gap:22px}
.calc-in label{display:grid;gap:10px;font-size:13.5px;font-weight:500}
.calc-in label b{font-family:var(--display);color:var(--pink-ink)}
.calc-out{padding:28px;background:var(--surface-2);display:grid;gap:10px;align-content:start}
.calc-out .ln{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.calc-out .ln span{color:var(--text-2)}
.calc-out .tot{border-top:1px solid var(--border);padding-top:12px;margin-top:4px}
.story{padding:22px;display:grid;gap:14px;align-content:start}
.story q{font-size:15px;line-height:1.55;quotes:none}
.price-card{padding:24px;display:flex;flex-direction:column;gap:16px;position:relative}
.price-card.pop{border-color:color-mix(in srgb,var(--pink) 55%,var(--card-border));box-shadow:0 0 0 1px rgba(255,31,122,.15),0 16px 44px rgba(255,31,122,.1)}
.price-card .poptag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--grad);color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-radius:99px;letter-spacing:.02em}
.price-card ul{list-style:none;display:grid;gap:9px;font-size:13.5px}
.price-card li{display:flex;gap:9px;align-items:flex-start}
.price-card li .ic{color:var(--pink);margin-top:2px}
.faq details{border-bottom:1px solid var(--border);padding:14px 0}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{transition:transform .25s var(--ease);color:var(--text-2)}
.faq details[open] summary .ic{transform:rotate(45deg)}
.faq details p{margin-top:10px;color:var(--text-2);font-size:14px;max-width:70ch}
.cta-band{position:relative;overflow:hidden;isolation:isolate;border-radius:22px;padding:56px 40px;text-align:center;background:var(--card);border:1px solid var(--card-border)}
.cta-band::before{content:"";position:absolute;inset:auto -10% -60% -10%;height:120%;z-index:-1;background:radial-gradient(40% 60% at 20% 100%,rgba(255,31,122,.35),transparent 70%),radial-gradient(40% 60% at 80% 100%,rgba(255,138,61,.3),transparent 70%)}
.foot{padding:56px 0 40px;margin-top:100px;border-top:1px solid var(--border)}
.foot a{color:var(--text-2);font-size:13.5px}
.foot a:hover{color:var(--text)}

/* Auth */
.auth{min-height:100%;display:grid;place-items:center;padding:28px 16px;position:relative;overflow:hidden;isolation:isolate}
.auth::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(40% 40% at 90% 10%,var(--glow-pink),transparent 70%),radial-gradient(40% 40% at 5% 95%,var(--glow-orange),transparent 70%)}
.auth-frame{width:min(1120px,100%);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:22px;align-items:stretch}
.auth-card{padding:40px;animation:authIn .45s var(--ease) both}
@keyframes authIn{from{opacity:0;transform:translateY(14px)}}
.auth-art{position:relative;overflow:hidden;isolation:isolate;border-radius:22px;padding:36px;background:linear-gradient(170deg,color-mix(in srgb,var(--pink) 7%,var(--card)),var(--card));border:1px solid var(--card-border);animation:artIn .65s .12s var(--ease) both;display:flex;flex-direction:column}
@keyframes artIn{from{opacity:0;transform:scale(.96)}}
.auth-art .waves{position:absolute;left:-10%;right:-10%;bottom:-50px;height:200px;z-index:-1;background:radial-gradient(45% 70% at 25% 100%,rgba(255,31,122,.55),transparent 70%),radial-gradient(45% 80% at 75% 100%,rgba(255,138,61,.5),transparent 70%),radial-gradient(30% 60% at 95% 90%,rgba(124,58,237,.35),transparent 70%);filter:blur(8px)}
.sso{flex:1;height:44px;display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:10px;border:1px solid var(--btn2-border);background:var(--btn2-bg);font-weight:600;font-size:13.5px;transition:transform .18s var(--ease),border-color .18s}
.sso:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--pink) 25%,var(--btn2-border))}
.sso .gl{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font:800 11px/1 var(--display);color:#fff;background:var(--c)}
.divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12.5px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--border)}
.pw-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:8px}
.pw-meter i{height:4px;border-radius:2px;background:var(--surface-2);transition:background .3s}
.benefit{display:flex;gap:14px;align-items:flex-start;padding:14px;border-radius:14px;background:color-mix(in srgb,var(--surface) 70%,transparent);border:1px solid var(--card-border)}

/* Onboarding */
.stepper{display:grid;grid-template-columns:repeat(5,1fr);position:relative}
.stp{display:grid;justify-items:center;gap:6px;position:relative;font-size:12.5px;color:var(--muted);font-weight:500}
.stp::before{content:"";position:absolute;top:15px;inset-inline-start:calc(-50% + 18px);inset-inline-end:calc(50% + 18px);height:2px;background:var(--border);transition:background .4s}
.stp:first-child::before{display:none}
.stp .n{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--border);background:var(--surface);font-weight:700;font-size:13px;position:relative;z-index:1;transition:all .35s var(--ease)}
.stp.done .n,.stp.cur .n{background:var(--grad);color:#fff;border-color:transparent}
.stp.cur .n{box-shadow:0 0 0 5px rgba(255,31,122,.15)}
.stp.done::before,.stp.cur::before{background:var(--grad)}
.stp.done,.stp.cur{color:var(--text)}
.stp.cur{color:var(--pink-ink);font-weight:600}
.osec{padding:24px;display:grid;grid-template-columns:36px 1fr;gap:16px}
.osec .onum{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--pink) 12%,transparent);color:var(--pink-ink);font-weight:700}
.goalc{position:relative;padding:16px;border-radius:14px;border:1.5px solid var(--border);background:var(--surface);text-align:start;display:grid;gap:10px;align-content:start;transition:border-color .2s,box-shadow .2s,transform .18s var(--ease)}
.goalc:hover{transform:translateY(-2px)}
.goalc.on{border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,31,122,.1)}
.goalc .ck{position:absolute;top:12px;inset-inline-end:12px;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--border);display:grid;place-items:center;color:#fff;transition:all .2s}
.goalc.on .ck{background:var(--grad);border-color:transparent}
.toolc{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:var(--surface);text-align:start;transition:border-color .2s}
.toolc.on{border-color:color-mix(in srgb,var(--green) 60%,var(--border))}
.toolc .plus{margin-inline-start:auto;width:26px;height:26px;border-radius:50%;border:1px solid var(--border);display:grid;place-items:center;transition:all .2s}
.toolc.on .plus{background:var(--green);color:#fff;border-color:transparent}


.split{}
.verify{isolation:isolate}
@media (max-width:960px){.split{grid-template-columns:minmax(0,1fr) !important}}
/* ============ V2: LOGO / I18N / RTL ============ */
.logo{display:inline-flex;align-items:center;color:var(--text);line-height:0;flex:none}
.logo svg{display:block;height:100%;width:auto;overflow:visible}
:root[lang="ar"]{--sans:Tajawal,"IBM Plex Sans Arabic",system-ui,sans-serif;--display:"Baloo Bhaijaan 2",Tajawal,system-ui,sans-serif}
:root[lang="ar"] *{letter-spacing:0 !important}
:root[lang="ar"] body{font-size:15px}
[dir="rtl"] .ic-dir{transform:scaleX(-1)}
.chart,.donut,.ring,.score,.spark,.wave-bars,.dive-cam,.code,.hv3d .inf-fallback{direction:ltr}
.av.ill{background:var(--c);overflow:hidden}
.av.ill svg{width:100%;height:100%;display:block}
.lang-btn{gap:6px;padding:0 10px;height:38px}
.lang-btn .mut{font-weight:500}
.cur-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:4px 6px 6px}
.cur-grid .pill{height:30px;justify-content:center;padding:0}
.di.on{color:var(--pink-ink);font-weight:600}
.di .flagc{width:26px;height:20px;border-radius:6px;display:grid;place-items:center;background:var(--surface-2);font-size:10.5px;font-weight:800;color:var(--text-2)}
.locked{opacity:.45 !important;cursor:not-allowed !important;filter:saturate(.3)}
.locked *{pointer-events:none !important}
.role-banner{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:10px 14px;border-radius:12px;background:color-mix(in srgb,var(--violet) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--violet) 28%,var(--border));font-size:13px}
.rb-wrap{padding:0 28px}
.rb-wrap:empty{display:none}
@media (max-width:960px){.rb-wrap{padding:0 16px}}
.role-chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:99px;font-size:12px;font-weight:700;color:#fff;background:var(--c)}
.nav-group{font-size:11px;font-weight:700;color:var(--muted);padding:14px 12px 6px;letter-spacing:.02em}
.nav a .nbadge{margin-inline-start:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--grad);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
.nav a.active .nbadge{background:#fff;color:var(--pink)}

/* Splash */
.splash{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:var(--bg);transition:opacity .55s var(--ease),transform .7s var(--ease);cursor:pointer}
.splash.out{opacity:0;transform:scale(1.05);pointer-events:none}
.splash::before{content:"";position:absolute;inset:0;background:radial-gradient(38% 34% at 50% 46%,var(--glow-pink),transparent 70%),radial-gradient(28% 28% at 64% 58%,var(--glow-orange),transparent 70%);animation:fadeIn 1.2s ease both}
.splash-in{position:relative;display:grid;justify-items:center;gap:26px;padding:20px}
.splash .logo-anim{width:min(560px,82vw);height:auto;color:var(--text)}
.logo-anim .ltr{opacity:0;transform:translateY(16px);transform-box:fill-box;animation:ltrIn .7s var(--ease) forwards}
.logo-anim .infp{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.1s .1s var(--ease) forwards}
.logo-anim .tagl{opacity:0;animation:fadeUp .8s .85s var(--ease) forwards}
@keyframes ltrIn{to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.splash-bar{width:200px;height:3px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.splash-bar i{display:block;height:100%;background:var(--grad);transform-origin:left;animation:growX 1.6s var(--ease) both}
[dir="rtl"] .splash-bar i{transform-origin:right}
.wsplash{position:fixed;inset:0;z-index:950;display:grid;place-items:center;background:var(--bg);animation:fadeIn .3s ease}
.wsplash::before{content:"";position:absolute;inset:0;background:radial-gradient(40% 40% at 50% 40%,var(--glow-pink),transparent 70%)}
.wsplash.out{opacity:0;transition:opacity .45s var(--ease)}
.ws-card{position:relative;width:min(420px,calc(100% - 40px));text-align:center;display:grid;justify-items:center;gap:14px}
.ws-steps{display:grid;gap:10px;width:100%;margin-top:8px;text-align:start}

/* View transitions between screens */
::view-transition-old(root),::view-transition-new(root){animation-duration:.46s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-old(root){animation-name:vtOut}
::view-transition-new(root){animation-name:vtIn}
@keyframes vtOut{to{opacity:0;transform:scale(.985);filter:blur(6px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(12px) scale(1.01)}}
.vt .main{view-transition-name:main}
::view-transition-old(main){animation:vtOutMain .18s ease both}
::view-transition-new(main){animation:vtInMain .42s cubic-bezier(.22,1,.36,1) both}
@keyframes vtOutMain{to{opacity:0;transform:translateY(-6px)}}
@keyframes vtInMain{from{opacity:0;transform:translateY(10px)}}
::view-transition-group(*){animation-duration:.5s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
.vt .page{animation:none}

/* Copilot */
.copilot{position:fixed;top:0;bottom:0;inset-inline-end:0;width:min(430px,100%);z-index:85;background:var(--surface);border-inline-start:1px solid var(--border);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;transform:translateX(105%);transition:transform .42s var(--ease);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
[dir="rtl"] .copilot{transform:translateX(-105%)}
.copilot.open{transform:none}
.cp-head{padding:16px 18px 12px;border-bottom:1px solid var(--border)}
.cp-agents{display:flex;gap:6px;overflow-x:auto;margin-top:12px;padding-bottom:2px;scrollbar-width:none}
.cp-agent{display:flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:99px;border:1px solid var(--border);font-size:12px;font-weight:600;white-space:nowrap;color:var(--text-2);transition:all .2s}
.cp-agent.on{border-color:color-mix(in srgb,var(--pink) 50%,var(--border));background:color-mix(in srgb,var(--pink) 8%,var(--surface));color:var(--pink-ink)}
.cp-body{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:14px}
.cp-msg{font-size:13.5px;line-height:1.6}
.cp-msg.me{align-self:flex-end;max-width:88%;background:var(--bubble-me);color:var(--bubble-me-text);padding:10px 13px;border-radius:14px 14px 4px 14px;animation:missionIn .3s var(--ease)}
.cp-msg.ai{display:flex;gap:10px;max-width:96%;animation:missionIn .3s var(--ease)}
.cp-msg.ai .bub{background:var(--surface-2);padding:11px 13px;border-radius:4px 14px 14px 14px;min-width:0}
.cp-msg.ai .bub ul{margin:6px 0 0;padding-inline-start:18px}
.cp-msg.ai .bub li{margin:3px 0}
.cp-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.cp-foot{padding:12px 14px;border-top:1px solid var(--border)}
.cp-sugg{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.cp-sugg button{font-size:12px;padding:6px 10px;border-radius:99px;border:1px solid var(--border);background:var(--surface);color:var(--text-2);transition:border-color .2s,color .2s}
.cp-sugg button:hover{color:var(--pink-ink);border-color:color-mix(in srgb,var(--pink) 40%,var(--border))}
.cp-in{display:flex;gap:8px;align-items:flex-end;border:1px solid var(--border);border-radius:14px;padding:8px;padding-inline-start:12px;background:var(--surface);transition:border-color .2s,box-shadow .2s}
.cp-in:focus-within{border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,31,122,.1)}
.cp-in textarea{flex:1;border:0;outline:0;background:transparent;resize:none;max-height:120px;color:var(--text);padding:6px 0;min-height:22px}
.cp-ctx{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-2);background:var(--surface-2);border-radius:99px;padding:3px 9px;margin-top:10px}
.fab{position:fixed;inset-inline-end:22px;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:70;width:62px;height:62px;border-radius:20px;background:var(--surface);border:1px solid var(--card-border);box-shadow:var(--shadow-lg);display:grid;place-items:center;transition:transform .22s var(--ease),opacity .2s;isolation:isolate}
.fab:hover{transform:translateY(-3px) scale(1.04)}
.fab::after{content:"";position:absolute;inset:-4px;border-radius:24px;background:var(--grad);z-index:-1;opacity:.55;filter:blur(12px);animation:fabGlow 3s ease-in-out infinite}
@keyframes fabGlow{50%{opacity:.25}}
.copilot-open .fab{opacity:0;pointer-events:none}
.toasts{bottom:calc(96px + env(safe-area-inset-bottom,0px))}

/* RBAC / Team */
.matrix{min-width:900px}
.matrix th,.matrix td{text-align:center}
.matrix th:first-child,.matrix td:first-child{text-align:start;position:sticky;inset-inline-start:0;background:var(--card);z-index:1}
.matrix .area td{background:var(--surface-2);font-weight:700;font-size:12px;color:var(--text-2);text-align:start}
.matrix .area td:first-child{background:var(--surface-2)}
.role-card{padding:16px;display:grid;gap:10px;align-content:start;border-top:3px solid var(--c)}
.mem-row td{white-space:nowrap}

/* 2FA code + workspaces */
.code{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.code input{height:60px;min-width:0;text-align:center;font:700 24px var(--display);border-radius:12px;border:1.5px solid var(--border);background:var(--surface);color:var(--text);outline:none;transition:border-color .15s,transform .15s,box-shadow .15s}
.code input:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,31,122,.12);transform:translateY(-2px)}
.code.ok input{border-color:var(--green);background:color-mix(in srgb,var(--green) 8%,var(--surface))}
.code.bad input{border-color:var(--red);animation:shake .35s}
.wscard{display:flex;align-items:center;gap:14px;padding:16px;border-radius:14px;border:1.5px solid var(--border);background:var(--surface);width:100%;text-align:start;transition:border-color .2s,transform .18s var(--ease),box-shadow .2s}
.wscard:hover{border-color:color-mix(in srgb,var(--pink) 45%,var(--border));transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.ws-logo{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#fff;font:700 18px/1 var(--display);background:var(--c);flex:none}

/* Tour */
.tour-block{position:fixed;inset:0;z-index:399}
.tour-spot{position:fixed;z-index:400;border-radius:16px;pointer-events:none;box-shadow:0 0 0 9999px rgba(9,11,15,.66),0 0 0 3px rgba(255,31,122,.85),0 0 46px rgba(255,31,122,.5);transition:top .55s var(--ease),left .55s var(--ease),width .55s var(--ease),height .55s var(--ease)}
.tour-spot.dive{animation:spotDive .7s var(--ease)}
@keyframes spotDive{from{transform:scale(1.35);opacity:.2}}
.tour-tip{position:fixed;z-index:401;width:min(350px,calc(100% - 32px));background:var(--surface);border:1px solid var(--card-border);border-radius:18px;box-shadow:var(--shadow-lg);padding:18px;transition:top .55s var(--ease),left .55s var(--ease)}
.tour-tip .tprog{display:flex;gap:4px;margin-bottom:12px}
.tour-tip .tprog i{flex:1;height:3px;border-radius:2px;background:var(--surface-2)}
.tour-tip .tprog i.on{background:var(--grad)}

/* Landing 3D + scroll */
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:1}
.landing{position:relative;z-index:1}
.gl-on .hv3d .inf-fallback{opacity:0}
.hv3d{position:relative;min-height:470px}
.hv3d .inf-fallback{position:absolute;inset:8% 0 auto;width:100%;transition:opacity .6s;animation:infSpin 9s ease-in-out infinite;filter:drop-shadow(0 20px 40px rgba(255,31,122,.25))}
@keyframes infSpin{50%{transform:rotate(-6deg) scale(1.04)}}
.hv3d .hv-m3d{position:absolute;left:50%;top:60%;transform:translate(-50%,-50%);z-index:2}
.hv3d .float-card{position:absolute;z-index:3;padding:14px 16px;border-radius:16px;animation:missionIn .7s 1s var(--ease) both}
#hero{transition:none;will-change:transform,opacity}
.dive{position:relative;height:620vh}
.dive-sticky{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.6fr);align-items:center;gap:24px;padding:0 max(20px,calc((100% - 1280px)/2))}
.dive-copy{position:relative;z-index:2}
.dcaps{position:relative;height:250px;margin-top:20px}
.dcap{position:absolute;inset:0;opacity:0;transform:translateY(22px);transition:opacity .45s var(--ease),transform .45s var(--ease);pointer-events:none}
.dcap.on{opacity:1;transform:none}
.dcap .dnum{font:700 13px var(--display);color:var(--pink-ink)}
.dcap h3{margin-top:8px}
.dcap p{margin-top:12px}
.dive-dots{display:flex;gap:6px;margin-top:8px}
.dive-dots i{width:22px;height:4px;border-radius:2px;background:var(--surface-2);transition:background .3s,width .3s var(--ease)}
.dive-dots i.on{background:var(--grad);width:44px}
.dive-stage{position:relative;height:84vh;perspective:2000px;perspective-origin:50% 40%;overflow:hidden;border-radius:28px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(transparent 0,#000 6%,#000 94%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(transparent 0,#000 6%,#000 94%,transparent 100%);mask-composite:intersect}
.dive-cam{position:absolute;left:50%;top:50%;width:1200px;height:760px;margin:-380px 0 0 -600px;transform-origin:600px 380px;will-change:transform;transform-style:preserve-3d}
.dscreen{width:1200px;height:760px;border-radius:22px;background:var(--card);border:1px solid var(--card-border);box-shadow:0 60px 120px rgba(15,20,30,.25);display:grid;grid-template-columns:200px 1fr;overflow:hidden;text-align:start}
.ds-side{background:var(--surface);border-inline-end:1px solid var(--border);padding:22px 14px;display:flex;flex-direction:column;gap:6px}
.ds-side .dn{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:9px;font-size:13px;color:var(--text-2);font-weight:600}
.ds-side .dn.on{background:var(--nav-active-bg);color:var(--nav-active-text)}
.ds-main{padding:20px 24px;display:grid;grid-template-rows:auto auto 1fr auto;gap:16px;min-width:0;background:var(--bg)}
.dreg{transition:opacity .45s var(--ease),box-shadow .45s var(--ease);border-radius:14px}
.dscreen.zoomed .dreg:not(.focus){opacity:.32}
.dreg.focus{box-shadow:0 0 0 2px rgba(255,31,122,.55),0 18px 50px rgba(255,31,122,.18)}
.ds-type::after{content:"";display:inline-block;width:2px;height:16px;background:var(--pink);margin-inline-start:2px;vertical-align:-3px;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.vbadge{transition:all .4s var(--ease)}
.hs{position:relative;height:360vh}
.hs-sticky{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:34px}
.hs-track{display:flex;gap:20px;padding:0 max(20px,calc((100% - 1280px)/2));will-change:transform;width:max-content}
.hs-card{flex:none;width:min(380px,78vw);padding:24px;display:grid;gap:14px;align-content:start;border-radius:20px}
.hs-bar{height:3px;border-radius:2px;background:var(--surface-2);overflow:hidden}
.hs-bar i{display:block;height:100%;width:0;background:var(--grad)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

/* Domains / misc */
.dom-card{padding:20px;display:grid;gap:12px;align-content:start}
.denied{display:grid;place-items:center;text-align:center;padding:70px 20px;gap:12px}
.page-404 .num404{font:700 clamp(90px,16vw,180px)/1 var(--display);letter-spacing:-.05em}

/* ============ RESPONSIVE ============ */
@media (max-width:1240px){
  .conv{grid-template-columns:280px minmax(0,1fr)}
  .conv .aip{grid-column:1/-1}
}
@media (max-width:1100px){
  .c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lead-wrap{grid-template-columns:minmax(0,1fr)}
  .lpanel{position:relative;top:0}
  .l-hero{grid-template-columns:1fr}
  .hv{min-height:400px}
  .flow{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:28px}
  .flow::before{display:none}
}
@media (max-width:960px){
  .app{grid-template-columns:minmax(0,1fr)}
  .sidebar{position:fixed;inset-inline-start:0;top:0;bottom:0;height:auto;width:272px;transform:translateX(-102%);transition:transform .32s var(--ease);padding-top:calc(22px + env(safe-area-inset-top,0px));padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));box-shadow:var(--shadow-lg)}
  [dir="rtl"] .sidebar{transform:translateX(102%)}
  .app.nav-open .sidebar{transform:none}
  .app.nav-open .scrim{display:block;position:fixed;inset:0;z-index:55;background:var(--overlay);animation:fadeIn .2s}
  .menu-btn{display:inline-flex}
  .topbar{padding:0 16px;gap:10px}
  .main{padding:6px 16px 40px}
  .c3,.c2{grid-template-columns:minmax(0,1fr)}
  .conv{grid-template-columns:minmax(0,1fr)}
  .auth-frame{grid-template-columns:minmax(0,1fr)}
  .auth-art{display:none}
  .calc{grid-template-columns:1fr}
  .pnav-links{display:none}
  .hero{padding:24px}
  .hero-art .bubble-stack{display:none}
  .user-chip .uname{display:none}
}
@media (max-width:520px){.topbar .theme-toggle,.user-chip>.ic{display:none}.topbar{gap:8px}}
@media (max-width:640px){
  .c4{grid-template-columns:minmax(0,1fr)}
  .hero{flex-direction:column;align-items:flex-start}
  .hero-art{margin-left:0;display:none}
  .auth-card{padding:28px 22px}
  .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stepper .stp span{display:none}
  .osec{grid-template-columns:1fr;padding:20px}
  .hide-sm{display:none !important}
  .cta-band{padding:40px 22px}
  .hv-dash{grid-template-columns:1fr}
  .hv-side{display:none}
  .mbody{padding:22px}
  .kpi .val{font-size:24px}
}
@media (max-width:960px){
  .dive{height:520vh}
  .dive-sticky{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;align-items:start;padding-top:calc(76px + env(safe-area-inset-top,0px))}
  .dcaps{height:150px;margin-top:10px}
  .dcap p{font-size:14px}
  .dive-stage{height:58vh}
  .hv3d{min-height:380px}
  .copilot{width:100%}
}
@media (max-width:640px){.hv3d{min-height:320px}.fab{width:54px;height:54px;border-radius:17px}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;animation-delay:0s !important;transition-duration:.01ms !important}
}

/* ================= ADDITIONS FOR THE LIVE APP (the prototype's styles above are untouched) ================= */
[hidden]{display:none !important}
/* A page redrawn in place by a live update keeps still: no entrance animation replays. */
.still{animation:none !important}
.draw.still{stroke-dashoffset:0}
/* Thin progress line for a page that takes a moment to load. */
.loadbar{position:fixed;inset:0 0 auto 0;height:2.5px;z-index:990;background:var(--grad);transform:scaleX(0);transform-origin:left;opacity:0;pointer-events:none}
[dir=rtl] .loadbar{transform-origin:right}
.loadbar.on{opacity:1;transform:scaleX(.85);transition:transform 6s cubic-bezier(.1,.7,.2,1),opacity .15s}
/* A change chip pointing down. */
.ic.flip{transform:rotate(180deg)}
/* File inputs and checkboxes inside dialogs follow the theme. */
input[type=file].input{font-size:13px;color:var(--text-2)}
.check span{font-size:13.5px}
@media (prefers-reduced-motion:reduce){.loadbar.on{transition:none}}