/* =========================================================
   Apple-style layer (HIG-inspired). Loaded after app.css + flow.css.
   Overrides tokens and core components only; remove the <link> to revert.
   ========================================================= */

:root{
  --bg:#F5F5F7;--panel:#FFFFFF;--panel2:#FAFAFC;
  --line:rgb(0 0 0 / .1);--line2:rgb(0 0 0 / .06);
  --ink:#1D1D1F;--ink2:#424245;--muted:#86868B;
  --fill:rgb(118 118 128 / .12);--fill2:rgb(118 118 128 / .08);
  --ok:#248A3D;--ok-soft:#E8F7EC;--warn:#C93400;--warn-soft:#FFF3E3;--bad:#D70015;--bad-soft:#FFEBEC;--info:#0066CC;--info-soft:#E8F2FD;
  --side:rgb(242 242 247 / .82);--side-ink:#1D1D1F;--side-muted:#86868B;--side-hover:rgb(0 0 0 / .05);--side-active:rgb(0 0 0 / .08);
  --shadow:0 1px 1px rgb(0 0 0 / .02),0 2px 10px rgb(0 0 0 / .04);
  --shadow-lg:0 12px 40px rgb(0 0 0 / .14),0 2px 6px rgb(0 0 0 / .05);
  --r:18px;--r-sm:10px;
  --ease:cubic-bezier(.25,.1,.25,1);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Hebrew","IBM Plex Sans Hebrew","Segoe UI",system-ui,Arial,sans-serif;
  --font-d:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Hebrew","IBM Plex Sans Hebrew","Segoe UI",system-ui,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,"IBM Plex Mono",monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#000000;--panel:#1C1C1E;--panel2:#232325;
  --line:rgb(255 255 255 / .12);--line2:rgb(255 255 255 / .07);
  --ink:#F5F5F7;--ink2:#C7C7CC;--muted:#8E8E93;
  --fill:rgb(118 118 128 / .24);--fill2:rgb(118 118 128 / .16);
  --ok:#30D158;--ok-soft:rgb(48 209 88 / .14);--warn:#FF9F0A;--warn-soft:rgb(255 159 10 / .14);--bad:#FF453A;--bad-soft:rgb(255 69 58 / .14);--info:#64D2FF;--info-soft:rgb(100 210 255 / .12);
  --side:rgb(28 28 30 / .78);--side-ink:#F5F5F7;--side-muted:#8E8E93;--side-hover:rgb(255 255 255 / .06);--side-active:rgb(255 255 255 / .1);
  --brand-soft:color-mix(in srgb,var(--brand) 20%,#1C1C1E);
  --shadow:0 0 0 1px rgb(255 255 255 / .05);--shadow-lg:0 16px 48px rgb(0 0 0 / .6),0 0 0 1px rgb(255 255 255 / .08);
}}
:root[data-theme="dark"]{
  --bg:#000000;--panel:#1C1C1E;--panel2:#232325;
  --line:rgb(255 255 255 / .12);--line2:rgb(255 255 255 / .07);
  --ink:#F5F5F7;--ink2:#C7C7CC;--muted:#8E8E93;
  --fill:rgb(118 118 128 / .24);--fill2:rgb(118 118 128 / .16);
  --ok:#30D158;--ok-soft:rgb(48 209 88 / .14);--warn:#FF9F0A;--warn-soft:rgb(255 159 10 / .14);--bad:#FF453A;--bad-soft:rgb(255 69 58 / .14);--info:#64D2FF;--info-soft:rgb(100 210 255 / .12);
  --side:rgb(28 28 30 / .78);--side-ink:#F5F5F7;--side-muted:#8E8E93;--side-hover:rgb(255 255 255 / .06);--side-active:rgb(255 255 255 / .1);
  --brand-soft:color-mix(in srgb,var(--brand) 20%,#1C1C1E);
  --shadow:0 0 0 1px rgb(255 255 255 / .05);--shadow-lg:0 16px 48px rgb(0 0 0 / .6),0 0 0 1px rgb(255 255 255 / .08);
}

/* ---------- type ---------- */
body{font:15px/1.5 var(--font);letter-spacing:-.003em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:600;letter-spacing:-.012em}
h1{font-size:30px;font-weight:700}h2{font-size:20px}h3{font-size:16px}
:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 45%,transparent);outline-offset:2px}
.boot{background:var(--bg)}

/* ---------- sidebar: translucent, macOS-style ---------- */
.side{background:var(--side);-webkit-backdrop-filter:saturate(180%) blur(30px);backdrop-filter:saturate(180%) blur(30px);border-inline-end:1px solid var(--line2);padding:16px 10px}
.side__logo{padding:8px 12px 18px}
.side__logo img{height:32px}
/* logo: dark text on light backgrounds, white text on dark ones; the colored mark stays as is */
.logo-on-dark{display:none!important}
.ob__brand img{filter:none!important}
:root[data-theme="dark"] .logo-on-dark{display:block!important}
:root[data-theme="dark"] .logo-on-light{display:none!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo-on-dark{display:block!important}:root:not([data-theme="light"]) .logo-on-light{display:none!important}}
.side__org{background:var(--panel);border:0;box-shadow:var(--shadow);border-radius:14px;margin:0 2px 16px;padding:12px;gap:12px}
.side__org .orgmark{border-radius:12px}
.side__org b{color:var(--ink)}
.side__org span{color:var(--side-muted)}
.nav{gap:1px}
.nav a{padding:7px 10px;border-radius:8px;font-size:14px;font-weight:500;color:var(--side-ink);transition:background .15s var(--ease)}
.nav a svg{opacity:1;color:var(--brand)}
.nav a:hover{background:var(--side-hover);color:var(--side-ink);text-decoration:none}
.nav a.on{background:var(--side-active);color:var(--side-ink);font-weight:600}
.nav a.on svg{color:var(--brand)}
.nav a.on::before{display:none}
.nav__sep{background:var(--line2);margin:8px 10px}
.nav__badge{background:#FF3B30;font-weight:600;line-height:19px;padding:0 7px}

/* ---------- top bar ---------- */
.top{background:color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line2);padding:10px 32px}
.search input{height:36px;border-radius:10px;border:0;background:var(--fill);transition:background .2s var(--ease),box-shadow .2s var(--ease)}
.search input:focus{outline:none;background:var(--panel);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 30%,transparent)}
.search>svg{top:9px}
.search kbd{top:8px;border:0;background:var(--panel);box-shadow:var(--shadow)}
.search__res{border:0;border-radius:14px;padding:6px;background:color-mix(in srgb,var(--panel) 88%,transparent);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px)}
.view{padding:32px 32px 72px;max-width:1440px}

/* ---------- buttons: pill, Apple blue-style primary ---------- */
.btn{height:36px;padding:0 16px;border-radius:980px;border:0;background:var(--fill);color:var(--ink);font-weight:500;font-size:14px;transition:background .2s var(--ease),transform .15s var(--ease),filter .2s var(--ease)}
.btn:hover{background:color-mix(in srgb,var(--fill) 100%,var(--fill2));filter:brightness(.97);border-color:transparent}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--brand);color:var(--brand-ink)}
.btn--primary:hover{background:var(--brand);filter:brightness(1.08)}
.btn--danger{color:var(--bad)}
.btn--danger:hover{background:var(--bad-soft)}
.btn--ghost{background:transparent}
.btn--ghost:hover{background:var(--fill2);filter:none}
.btn--sm{height:30px;padding:0 12px;font-size:13px;border-radius:980px}
.btn--icon{width:36px;padding:0}
.btn--sm.btn--icon{width:30px}
.btn--wa:hover{background:rgb(52 199 89 / .14)}
.auth .btn--primary{background:var(--brand);box-shadow:none}

/* ---------- cards & surfaces ---------- */
.card{border:0;border-radius:var(--r);box-shadow:var(--shadow)}
.card__h{padding:16px 20px 12px;border-bottom:0}
.card__h h3{font-size:17px}
.card__b{padding:6px 20px 18px}
.card__b.flush{padding:0}
.page-h{margin-bottom:24px}
.page-h .sub{font-size:15px;color:var(--muted);margin-top:4px;font-family:var(--font)}

/* ---------- forms ---------- */
.input,select.input,textarea.input{height:38px;border-radius:10px;border:1px solid var(--line);background:var(--panel);transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.input:focus{border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 22%,transparent)}
.field>span{font-weight:500;font-size:13px;color:var(--ink2)}
.check input{accent-color:var(--brand)}
.chip{border:0;background:var(--fill);height:30px;font-weight:500}
.chip:has(input:checked),.chip.on{background:var(--brand);color:var(--brand-ink);font-weight:500}
.swatchpick{border-radius:10px}

/* ---------- badges & tags ---------- */
.badge{height:22px;padding:0 9px;font-weight:500;font-size:12px}
.tag{border-radius:6px;background:var(--fill2)}

/* ---------- tables: hairlines, no fills ---------- */
.t th{background:transparent;font-weight:500;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line2);padding:12px 16px}
.t td{padding:12px 16px;border-bottom:1px solid var(--line2)}
.t tbody tr{transition:background .15s var(--ease)}
.t tbody tr:hover td{background:var(--fill2)}
.t .name{font-weight:500}
.pager{border-top:1px solid var(--line2)}
.bulk{background:var(--brand-soft);border-bottom:0}

/* ---------- KPIs: large, light numbers ---------- */
.kpis{gap:16px;margin-bottom:20px}
.kpi{padding:20px 22px}
.kpi__l{font-size:13px;color:var(--muted);font-weight:500}
.kpi__l svg{color:var(--brand)}
.kpi__v{font-family:var(--font-d);font-size:36px;font-weight:600;letter-spacing:-.02em;margin-top:8px;line-height:1.1}
.kpi__s{font-size:13px;margin-top:4px}
a.card.kpi{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
a.card.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.cols{gap:20px;margin-bottom:20px}

/* ---------- lists ---------- */
.row{padding:12px 20px;border-bottom:1px solid var(--line2)}
.row__main b{font-weight:500}
.group-h{background:transparent;border-bottom:0;font-weight:600;font-size:13px;padding:16px 20px 6px;color:var(--ink2)}
.tcheck{border-radius:50%;border-width:1.5px;border-color:color-mix(in srgb,var(--muted) 70%,transparent)}
.tcheck.on{background:var(--brand);border-color:var(--brand)}
.tcheck:hover{border-color:var(--brand)}

/* ---------- detail ---------- */
.hero .avatar{--s:64px}
.hero h1{font-size:28px}
.stagebar{gap:6px}
.stagebar button,[dir="rtl"] .stagebar button,.stagebar button:first-child,[dir="rtl"] .stagebar button:first-child{clip-path:none;border-radius:980px;height:32px;background:var(--fill);font-weight:500}
.stagebar button.past{background:color-mix(in srgb,var(--sc) 18%,var(--panel))}
.composer{border-bottom:1px solid var(--line2);padding:16px 20px}
.composer__tabs button{border-radius:980px;font-weight:500}
.tl{padding:8px 20px 20px}
.tl li:not(:last-child)::after{width:1px;background:var(--line)}

/* ---------- kanban ---------- */
.kanban{gap:16px}
.col{background:var(--fill2);border:0;border-radius:var(--r)}
.col__h{border-top:0;padding:14px 16px 10px;position:relative}
.col__h b::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--sc);margin-inline-end:8px;vertical-align:1px}
.col__h b{justify-content:flex-start}
.col__h b>:last-child{margin-inline-start:auto}
.col.over{background:var(--brand-soft);border:0}
.dcard{border:0;border-radius:12px;box-shadow:var(--shadow);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.dcard:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}
.dcard b{font-weight:500}
.dcard__v{font-weight:600}
.dcard--ghost{border:0}

/* ---------- calendar ---------- */
.cal__dh{background:transparent;font-weight:500}
.cal__d.out{background:var(--fill2)}
.cal__n{font-weight:500;width:26px;height:26px}
.cal__d:hover{background:var(--fill2)}
.ev{border-radius:6px;font-weight:500}

/* ---------- charts ---------- */
.chart .bar{rx:4px}
.hbar__t{height:8px;border-radius:99px;background:var(--fill2)}
.hbar__f{border-radius:99px}
.hbar__v{font-weight:500}
.tip{border-radius:10px;background:color-mix(in srgb,var(--ink) 92%,transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}

/* ---------- modal, sheet, toast, menu ---------- */
.modal-bg{background:rgb(0 0 0 / .32);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:fade .25s var(--ease)}
.modal{border:0;border-radius:22px;animation:pop .3s cubic-bezier(.32,.72,0,1)}
.modal__h{padding:20px 24px 12px;border-bottom:0}
.modal__h h2{font-size:20px}
.modal__b{padding:8px 24px 20px}
.modal__f{padding:14px 24px 20px;border-top:0}
.err{border-radius:12px}
@keyframes pop{from{opacity:0;transform:scale(.96)}}
.toast{border-radius:980px;padding:11px 20px;background:color-mix(in srgb,var(--ink) 90%,transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.menu,.picker__list{border:0;border-radius:14px;padding:6px;background:color-mix(in srgb,var(--panel) 88%,transparent);-webkit-backdrop-filter:saturate(180%) blur(30px);backdrop-filter:saturate(180%) blur(30px)}
.menu a,.menu button{border-radius:8px;padding:8px 12px}
.menu a:hover,.menu button:hover{background:var(--brand);color:var(--brand-ink)}
.menu a:hover svg,.menu button:hover svg{color:var(--brand-ink)}
.menu button.danger:hover,.menu button.danger:hover svg{background:var(--bad);color:#fff}
.menu hr{border-top-color:var(--line2)}

/* ---------- tabs & segmented ---------- */
.tabs{border-bottom:1px solid var(--line2)}
.tabs a{font-weight:500}
.seg{background:var(--fill);border-radius:9px;padding:2px}
.seg button,.seg a{border-radius:7px;font-weight:500;padding:5px 12px}
.seg .on{background:var(--panel);box-shadow:0 1px 3px rgb(0 0 0 / .12),0 0 0 .5px rgb(0 0 0 / .04)}
:root[data-theme="dark"] .seg .on{background:#636366}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .seg .on{background:#636366}}
pre.code{background:#1C1C1E;border-radius:12px}
.note{border-radius:12px}

/* ---------- auth: calm, light ---------- */
.auth__brand{background:linear-gradient(160deg,#1D1D1F,#000);}
.auth__brand::before,.auth__brand::after{display:none}
.auth__brand h2 em{background:linear-gradient(90deg,#2997FF,#A78BFA);-webkit-background-clip:text;background-clip:text}
.auth__brand p{color:#A1A1A6}
.auth__brand li i{border:0;border-radius:10px}
.auth__form::before{display:none}
.auth__box h1{font-size:32px}
.auth__box .btn{height:44px;font-size:15px}

/* ---------- onboarding preview sidebar ---------- */
.pv__side{background:#F2F2F7;color:#1D1D1F}
.pv__org{border-bottom-color:rgb(0 0 0 / .07)}
.pv__org b{color:#1D1D1F}
.pv__nav svg{color:var(--brand)}
.pv__nav.on{background:rgb(0 0 0 / .08);color:#1D1D1F;font-weight:600}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .side{background:color-mix(in srgb,var(--panel) 92%,transparent);border-inline-end:0}
  .top{padding:10px 16px}
  .view{padding:20px 16px 60px}
}
@media (max-width:560px){
  h1{font-size:26px}
  .kpi__v{font-size:30px}
}

/* ---------- theme switch: circular reveal (driven from app.js) ---------- */
.theme-vt::view-transition-old(root),.theme-vt::view-transition-new(root){animation:none;mix-blend-mode:normal}
.theme-vt::view-transition-new(root){z-index:2}

/* ---------- getting started ---------- */
.gs-ring{--s:40px;position:relative;width:var(--s);height:var(--s);flex:none;display:inline-grid;place-items:center}
.gs-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.gs-ring circle{fill:none;stroke-width:3.2}
.gs-ring__bg{stroke:var(--fill)}
.gs-ring__fg{stroke:var(--ok);stroke-linecap:round;transition:stroke-dashoffset .8s var(--ease)}
.gs-ring b{position:relative;font-size:calc(var(--s) * .27);font-weight:600;font-variant-numeric:tabular-nums;direction:ltr}

/* sidebar card */
.gs-side{display:flex;align-items:center;gap:12px;margin:-6px 2px 16px;padding:10px 12px;border-radius:12px;background:var(--panel);box-shadow:var(--shadow);color:var(--ink);text-decoration:none!important;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.gs-side:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.gs-side.on{box-shadow:0 0 0 2px var(--brand)}
.gs-side>span:last-child{min-width:0}
.gs-side b{display:block;font-size:13.5px;font-weight:600}
.gs-side small{display:block;font-size:11.5px;color:var(--muted)}

/* page */
.gs{max-width:880px;margin:0 auto}
.gs-sum{display:flex;align-items:center;gap:16px;padding:18px 22px;margin-bottom:16px}
.gs-sum__t{flex:1;min-width:0}
.gs-sum__t b{display:block;font-size:16px;font-weight:600}
.gs-sum__t small{color:var(--muted);font-size:13px}
.gs-list{display:flex;flex-direction:column;gap:10px}
.gs-step{overflow:hidden;transition:box-shadow .25s var(--ease)}
.gs-step.open{box-shadow:var(--shadow-lg)}
.gs-step__h{display:flex;align-items:center;gap:14px;width:100%;padding:14px 20px;border:0;background:none;cursor:pointer;text-align:start;color:var(--ink);font:inherit}
.gs-num{width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:600;border:1.5px solid var(--line);color:var(--ink2)}
.gs-num svg{width:15px;height:15px}
.gs-step.done .gs-num{background:var(--ok);border-color:var(--ok);color:#fff}
.gs-ic{width:36px;height:36px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand)}
.gs-ic svg{width:18px;height:18px}
.gs-title{flex:1;min-width:0;font-weight:600;font-size:15px}
.gs-step.done .gs-title{color:var(--muted);font-weight:500}
.gs-chev{color:var(--muted);display:grid;transition:transform .3s var(--ease)}
.gs-chev svg{width:18px;height:18px}
.gs-step.open .gs-chev{transform:rotate(180deg)}
/* smooth open/close without measuring heights */
.gs-step__b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.gs-step.open .gs-step__b{grid-template-rows:1fr}
.gs-step__in{overflow:hidden;padding:0 20px 0 20px;padding-inline-start:98px}
.gs-step.open .gs-step__in{padding-bottom:20px}
.gs-step__in>p{margin:0 0 14px}
.gs-form{display:flex;flex-direction:column;gap:12px}
.gs-act{display:flex;gap:8px;flex-wrap:wrap}
.gs-skip{margin-top:10px}
.gs-color{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.gs-stages{display:flex;flex-direction:column;gap:6px}
.gs-stage{display:flex;align-items:center;gap:10px}
.gs-stage>i{width:10px;height:10px;border-radius:50%;background:var(--sc);flex:none}
.gs-stage .input{height:34px;flex:1}
.gs-stage{padding:2px;border-radius:12px;transition:background .15s var(--ease),opacity .15s}
.gs-stage.drag{opacity:.45;background:var(--brand-soft)}
.gs-grip{display:grid;color:var(--muted);cursor:grab;padding:4px 2px}
.gs-grip svg{width:16px;height:16px;transform:rotate(90deg)}
.gs-stage__act{display:flex;gap:2px;flex:none}
.gs-stage__act .btn[disabled]{opacity:.25}
@media (hover:hover){.gs-stage__act{opacity:.4;transition:opacity .15s}.gs-stage:hover .gs-stage__act,.gs-stage:focus-within .gs-stage__act{opacity:1}}
@media (max-width:560px){.gs-grip{display:none}}
.gs-inline{display:flex;gap:8px}
.gs-inline .input{flex:1}
.gs-tpls{gap:8px}
.gs-tpl{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--fill2)}
.gs-tpl>div{flex:1;min-width:0}
.gs-tpl b{display:block;font-weight:600;font-size:14px}
.gs-tpl small{color:var(--muted);font-size:12.5px}
.gs-link{margin-top:10px;padding:12px 14px;border-radius:12px;background:var(--ok-soft);display:grid;gap:8px}
.gs-link b{font-size:13.5px;font-weight:600}
.gs-step.just{animation:gsDone .9s var(--ease)}
.gs-step.just .gs-num{animation:gsPop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes gsDone{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 45%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
@keyframes gsPop{from{transform:scale(.3)}}
@media (max-width:560px){
  .gs-step__h{padding:12px 14px;gap:10px}
  .gs-ic{display:none}
  .gs-step__in{padding:0 14px;padding-inline-start:14px}
  .gs-sum{flex-wrap:wrap}
  .gs-tpl{flex-wrap:wrap}
}

/* ---------- AI connector (MCP) ---------- */
.ai{max-width:980px;margin:0 auto;display:grid;gap:16px}
.ai-hero,.ai-banner{position:relative;overflow:hidden;color:#fff;border-radius:22px;
  background:radial-gradient(80% 120% at 0% 0%,color-mix(in srgb,var(--brand) 55%,transparent),transparent 60%),radial-gradient(60% 90% at 100% 100%,rgb(124 77 255 / .35),transparent 60%),linear-gradient(135deg,#0B1226,#05070D)}
.ai-hero{padding:34px 36px}
.ai-hero h1{font-size:32px;line-height:1.2;margin:14px 0 10px;max-width:640px;color:#fff}
.ai-hero p{color:rgb(255 255 255 / .78);max-width:640px;font-size:16px;margin:0 0 18px}
.ai-badge{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:#fff;background:rgb(255 255 255 / .12);border:1px solid rgb(255 255 255 / .16);padding:4px 10px;border-radius:99px}
.ai-badge svg{width:14px;height:14px}
.ai-chips{display:flex;flex-wrap:wrap;gap:8px}
.ai-chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border-radius:99px;background:rgb(255 255 255 / .92);color:#1D1D1F;font-size:13px;font-weight:600}
.ai-chip svg{width:14px;height:14px;color:var(--brand)}
.ai-card .card__h{align-items:flex-start}
.ai-card .card__h>div{flex:1;min-width:0}
.ai-card .card__h small{display:block;margin-top:2px}
.ai-url{display:flex;align-items:center;gap:4px;padding:8px 10px;border-radius:12px;background:var(--fill2);border:1px solid var(--line2)}
.ai-url code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:13px var(--mono);text-align:left}
.ai-warn{display:flex;gap:8px;align-items:flex-start;margin-top:12px;padding:10px 14px;border-radius:12px;background:var(--warn-soft);color:var(--warn);font-size:13.5px}
.ai-warn svg{width:16px;height:16px;flex:none;margin-top:2px}
.ai-meta{margin:10px 0 0}
.linkbtn{border:0;background:none;padding:0;color:var(--bad);cursor:pointer;font:inherit}
.ai-empty{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ai-empty p{margin:0}
.ai-tabs{margin-bottom:14px;flex-wrap:wrap}
.ai-steps{margin:0 0 12px;padding-inline-start:20px;display:grid;gap:8px;line-height:1.6}
.ai-ex{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ai-exb{display:flex;align-items:flex-start;gap:10px;text-align:start;padding:12px 14px;border-radius:12px;border:0;background:var(--fill2);color:var(--ink);font:inherit;font-size:14px;cursor:pointer;transition:background .15s var(--ease)}
.ai-exb:hover{background:var(--brand-soft)}
.ai-exb svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--brand)}
.ai-tools{display:flex;flex-wrap:wrap;gap:6px}
.ai-tool{font-size:12.5px;padding:4px 10px;border-radius:99px;background:var(--fill2);color:var(--ink2);direction:ltr}
.ai-tool.w{background:var(--brand-soft);color:var(--brand)}
/* dashboard banner */
.ai-banner{display:flex;align-items:center;gap:24px;padding:22px 26px;margin-bottom:20px}
.ai-banner__t{flex:1;min-width:0}
.ai-banner h3{color:#fff;font-size:20px;margin:10px 0 4px}
.ai-banner p{color:rgb(255 255 255 / .75);margin:0 0 14px;font-size:14px}
.ai-banner__go{background:#fff;color:#1D1D1F;height:42px;padding:0 20px;font-weight:600;flex:none}
.ai-banner__go:hover{background:#fff;filter:brightness(.95)}
.ai-banner__go svg{width:16px;height:16px}
.ai-banner__x{position:absolute;top:12px;inset-inline-end:12px;border:0;background:rgb(255 255 255 / .1);color:#fff;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;cursor:pointer}
.ai-banner__x svg{width:14px;height:14px}
@media (max-width:700px){.ai-banner{flex-direction:column;align-items:stretch}.ai-hero{padding:24px 20px}.ai-hero h1{font-size:24px}.ai-ex{grid-template-columns:1fr}}

/* ---------- skeleton loading (replaces every spinner) ---------- */
.sk{display:block;border-radius:8px;background:linear-gradient(90deg,var(--fill2) 0%,var(--fill) 45%,var(--fill2) 90%);background-size:300% 100%;animation:skShimmer 1.5s ease-in-out infinite}
.sk--round{border-radius:50%;flex:none}
.sk--pill{border-radius:980px;flex:none}
@keyframes skShimmer{from{background-position:100% 0}to{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.sk{animation:none}}
.sk-wrap{animation:skIn .25s var(--ease)}
@keyframes skIn{from{opacity:0}}
.sk-col{display:flex;flex-direction:column;gap:9px;flex:1;min-width:0}
.sk-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:24px}
.sk-acts{display:flex;gap:8px}
.sk-tools{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.sk-kpi{padding:20px 22px;display:flex;flex-direction:column;gap:12px}
.sk-rows{display:flex;flex-direction:column}
.sk-row{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line2)}
.sk-row:last-child{border-bottom:0}
.sk-hero{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.sk-stack{display:grid;gap:16px;max-width:880px}
.btn.is-busy{background-image:linear-gradient(90deg,transparent,rgb(255 255 255 / .25),transparent);background-size:200% 100%;animation:skShimmer 1.2s linear infinite}
/* first paint, before the app script runs */
.boot-sk{display:grid;grid-template-columns:244px 1fr;min-height:100vh;background:var(--bg)}
.boot-sk aside{display:flex;flex-direction:column;gap:16px;padding:22px 16px;background:var(--side);border-inline-end:1px solid var(--line2)}
.boot-sk nav{display:flex;flex-direction:column;gap:18px;padding:10px 8px}
.boot-sk main{display:flex;flex-direction:column;gap:14px;padding:18px 32px}
.boot-sk main>.sk:first-child{align-self:center;margin-bottom:18px}
.boot-sk__kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:16px}
.boot-sk__kpis .sk{height:120px;border-radius:18px}
.boot-sk__cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.boot-sk__cols .sk{height:300px;border-radius:18px}
@media (max-width:900px){.boot-sk{grid-template-columns:1fr}.boot-sk aside{display:none}.boot-sk main{padding:14px 16px}.boot-sk__kpis{grid-template-columns:1fr 1fr}.boot-sk__cols{grid-template-columns:1fr}}
@media (max-width:560px){.sk-head .sk-acts,.sk-head .sk-col>.sk:nth-child(2){display:none}}

/* ---------- AI assistant panel ---------- */
.ai-fab{position:fixed;bottom:22px;inset-inline-end:22px;z-index:90;display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 18px 0 16px;border:0;border-radius:980px;cursor:pointer;color:#fff;font:600 14.5px var(--font);
  background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--brand) 85%,#fff),var(--brand) 55%,color-mix(in srgb,var(--brand) 60%,#7C4DFF));box-shadow:0 10px 30px -8px color-mix(in srgb,var(--brand) 70%,transparent),0 2px 6px rgb(0 0 0 / .12);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.ai-fab:hover{transform:translateY(-2px)}
.ai-fab svg{width:19px;height:19px}
.ai-root.open .ai-fab{transform:scale(.9);opacity:0;pointer-events:none}
.ai-panel{position:fixed;bottom:16px;inset-inline-end:16px;z-index:95;width:min(430px,calc(100vw - 32px));height:min(720px,calc(100dvh - 32px));display:flex;flex-direction:column;border-radius:22px;overflow:hidden;
  background:color-mix(in srgb,var(--panel) 94%,transparent);-webkit-backdrop-filter:saturate(180%) blur(30px);backdrop-filter:saturate(180%) blur(30px);box-shadow:var(--shadow-lg),0 0 0 1px var(--line2);animation:aiIn .32s cubic-bezier(.32,.72,0,1)}
.ai-panel[hidden]{display:none}
.ai-panel.drop{box-shadow:var(--shadow-lg),0 0 0 3px var(--brand)}
@keyframes aiIn{from{opacity:0;transform:translateY(16px) scale(.97)}}
.ai-panel__h{display:flex;align-items:center;gap:10px;padding:14px 14px 12px 16px;border-bottom:1px solid var(--line2)}
.ai-panel__h>div{flex:1;min-width:0}
.ai-panel__h b{display:block;font-size:15.5px;font-weight:600}
.ai-panel__h small{color:var(--muted);font-size:12px}
.ai-panel__ic,.ai-hello__ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none;color:#fff;background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 55%,#7C4DFF))}
.ai-panel__ic svg,.ai-hello__ic svg{width:18px;height:18px}
.ai-panel__b{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;overscroll-behavior:contain}
.ai-hello{margin:auto 0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 6px}
.ai-hello__ic{width:48px;height:48px;border-radius:15px}
.ai-hello b{font-size:17px}
.ai-hello p{color:var(--muted);font-size:13.5px;margin:0 0 6px;line-height:1.55}
.ai-sugg{display:flex;flex-direction:column;gap:6px;width:100%}
.ai-sugg button{border:0;background:var(--fill2);color:var(--ink);border-radius:12px;padding:10px 12px;font:inherit;font-size:13.5px;text-align:start;cursor:pointer;transition:background .15s var(--ease)}
.ai-sugg button:hover{background:var(--brand-soft)}
.ai-msg{display:flex;flex-direction:column;gap:6px;max-width:92%}
.ai-msg.me{align-self:flex-start;align-items:flex-start}
.ai-msg.bot{align-self:flex-end;align-items:flex-end;max-width:100%;width:100%}
[dir="rtl"] .ai-msg.me{align-self:flex-start}
.ai-b{padding:10px 14px;border-radius:18px;font-size:14.5px;line-height:1.55;overflow-wrap:anywhere}
.ai-msg.me .ai-b{background:var(--brand);color:var(--brand-ink);border-end-start-radius:6px;white-space:pre-wrap}
.ai-msg.bot .ai-b{background:var(--fill2);color:var(--ink);border-end-end-radius:6px;align-self:stretch}
.ai-b p{margin:0 0 6px}.ai-b p:last-child{margin:0}
.ai-b ul{margin:4px 0 6px;padding-inline-start:18px}
.ai-b a{color:var(--brand);font-weight:500}
.ai-imgs{display:flex;gap:6px;flex-wrap:wrap}
.ai-imgs img{width:84px;height:84px;object-fit:cover;border-radius:12px}
.ai-acts{display:flex;flex-wrap:wrap;gap:6px;align-self:stretch}
.ai-act{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:4px 10px;border-radius:99px;background:var(--fill2);color:var(--ink2)}
.ai-act svg{width:13px;height:13px}
.ai-act.ok{background:var(--ok-soft);color:var(--ok)}
.ai-act.bad{background:var(--bad-soft);color:var(--bad)}
.ai-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);animation:aiPulse 1s ease-in-out infinite}
@keyframes aiPulse{50%{opacity:.3;transform:scale(.7)}}
.ai-typing{display:inline-flex!important;gap:4px;align-self:flex-end!important}
.ai-typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:aiPulse 1.2s ease-in-out infinite}
.ai-typing i:nth-child(2){animation-delay:.15s}.ai-typing i:nth-child(3){animation-delay:.3s}
.ai-err{display:flex;gap:6px;align-items:flex-start;font-size:13px;color:var(--bad);background:var(--bad-soft);padding:8px 12px;border-radius:12px;align-self:stretch}
.ai-err svg{width:15px;height:15px;flex:none;margin-top:2px}
.ai-panel__f{padding:10px 12px 12px;border-top:1px solid var(--line2);display:flex;flex-direction:column;gap:6px}
.ai-pending{display:flex;gap:6px;flex-wrap:wrap}
.ai-pending:empty{display:none}
.ai-thumb{position:relative}
.ai-thumb img{width:56px;height:56px;object-fit:cover;border-radius:10px;display:block}
.ai-thumb button{position:absolute;top:-6px;inset-inline-start:-6px;width:20px;height:20px;border-radius:50%;border:0;background:var(--ink);color:var(--bg);display:grid;place-items:center;cursor:pointer}
.ai-thumb button svg{width:11px;height:11px}
.ai-input{display:flex;align-items:flex-end;gap:6px;background:var(--fill2);border-radius:18px;padding:5px}
.ai-input textarea{flex:1;border:0;background:transparent;resize:none;font:inherit;font-size:14.5px;line-height:1.45;padding:7px 4px;max-height:160px;color:var(--ink);outline:none}
.ai-input .btn--icon{flex:none}
.ai-note{color:var(--muted);font-size:11px;text-align:center}
@media (max-width:700px){
  .ai-fab span{display:none}.ai-fab{width:52px;height:52px;padding:0;justify-content:center;bottom:16px;inset-inline-end:16px}
  .ai-panel{inset:0;width:100%;height:100dvh;border-radius:0}
}
@media print{.ai-root{display:none}}