/* ── ZilchWork CRM · shared shell · skinned to the ZilchWork site (design-system/tokens.css,
   marketing mode) 2026-07-17. Layout identical to crm-platform/crm/ — this file changes SKIN only:
   light-first, royal-blue #1a56d6 labels, #4285F4 single interactive accent, soft site shadows,
   radius-card 24, black pill CTAs, brand mark v2 (rotate 9deg / stroke 95). ── */
:root{
  --blue:#4285F4; --green:#34A853; --red:#EA4335; --gold:#FBBC04;
  /* Apple-first stack: implements the product-mode Apple contract (design-system APPLE-DESIGN.md)
     per Josh 2026-07-17. Renders SF on Mac and iPhone, adapts natively elsewhere; the brand
     wordmark alone stays Montserrat (brand canon), see the .wm/.brand rule below. */
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI","Inter",sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --radius-card:24px; /* site card radius (marketing mode) */
}
[data-theme="light"]{
  --bg:#ffffff;
  --ink:#1f1f21; --ink-soft:#5f6368; --muted:#767d87; --accent:#4285F4; --accent-strong:#1a56d6; /* muted = site a11y contrast fix 7/16, not #9aa0a6 */
  --card:#fafbfc; --card2:#ffffff; --card2-hov:#f3f4f6;
  --card-line:#e6e8eb; --card-line-hov:#d5d8de;
  --hairline:#eef0f2; --rail:#e6e8eb; --dot-idle:#d5d8de; --bar-n:#c4c8cd;
  --field:#ffffff; --track:#e9ecf1;
  --inverse-bg:#0b0b0c; --inverse-ink:#ffffff;
  --pos:#137333; --neg-soft:#b3261e;
  --chip-bg:#e8f0fe; --chip-ink:#1a73e8;
  --chip-green-bg:#e6f4ea; --chip-green-ink:#137333;
  --chip-red-bg:#fdecea; --chip-red-ink:#b3261e;
  --menu-bg:#ffffff;
  --shadow-card:0 24px 56px rgba(20,20,30,.08);
  --shadow-lift:0 30px 60px rgba(20,20,30,.14);
  --panel-line:transparent;
  --logo-stroke:#1a56d6; --logo-glow:none;
}
[data-theme="dark"]{
  --bg:radial-gradient(120% 90% at 50% 45%,#0a1024,#05070f 60%,#000); /* = site --hero-dark */
  --ink:#eaf1fb; --ink-soft:#93a1bd; --muted:#7286a8; --accent:#8ab4f8; --accent-strong:#a8c2ff;
  --card:rgba(255,255,255,.045); --card2:rgba(255,255,255,.03); --card2-hov:rgba(255,255,255,.06);
  --card-line:rgba(255,255,255,.09); --card-line-hov:rgba(255,255,255,.16);
  --hairline:rgba(255,255,255,.06); --rail:rgba(255,255,255,.09); --dot-idle:#39435a; --bar-n:#4a5570;
  --field:rgba(255,255,255,.05); --track:rgba(255,255,255,.07);
  --inverse-bg:#ffffff; --inverse-ink:#0b0b0c;
  --pos:#81c995; --neg-soft:#f28b82;
  --chip-bg:rgba(138,180,248,.16); --chip-ink:#8ab4f8;
  --chip-green-bg:rgba(52,168,83,.16); --chip-green-ink:#81c995;
  --chip-red-bg:rgba(234,67,53,.14); --chip-red-ink:#f28b82;
  --menu-bg:rgba(13,19,34,.97);
  --shadow-card:none;
  --shadow-lift:none;
  --panel-line:var(--card-line);
  --logo-stroke:url(#zwg); --logo-glow:drop-shadow(0 0 5px rgba(90,140,255,.85)) drop-shadow(0 0 13px rgba(47,111,240,.5));
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;
  background:var(--bg);display:grid;grid-template-rows:auto 1fr}

/* nav */
nav{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 30px;border-bottom:1px solid var(--hairline)}
.brand{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.brand a{color:inherit;text-decoration:none;display:flex;align-items:center;gap:10px}
.brand svg{width:20px;height:20px;filter:var(--logo-glow)}
.brand svg path{stroke:var(--logo-stroke)}
/* ZilchWork wordmark: "Zilch" royal blue + "Work" ink, Montserrat 600 (brand canon, styleguide 00) */
.wm,.brand{font-family:"Montserrat",-apple-system,sans-serif} /* wordmark stays Montserrat while the app runs the Apple stack */
.wm{font-weight:600;color:var(--ink)}
.wm b{color:var(--accent-strong);font-weight:600}
.nav-links{display:flex;gap:18px;font-size:13px;font-weight:500;color:var(--ink-soft);flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;min-width:0}
.nav-links a{color:inherit;text-decoration:none;transition:color .2s;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.nav-links a:hover,.nav-links a.on{color:var(--ink)}
.nav-links .nbadge{font-size:10px;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--chip-bg);color:var(--chip-ink)}
.nav-right{display:flex;align-items:center;gap:14px}
.live-pill{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--pos);white-space:nowrap}
.live-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:wpulse 2s infinite}
.live-pill.off{color:var(--neg-soft)}.live-pill.off .dot{background:var(--red);animation:none}
@keyframes wpulse{0%,100%{box-shadow:0 0 0 3px rgba(52,168,83,.25)}50%{box-shadow:0 0 0 7px rgba(52,168,83,0)}}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--inverse-bg);color:var(--inverse-ink);display:grid;place-items:center;font-size:12.5px;font-weight:700;flex:none}

/* settings gear + theme menu */
.settings{position:relative}
.gear{position:relative;width:32px;height:32px;border-radius:50%;border:1px solid var(--card-line);background:transparent;color:var(--ink-soft);display:grid;place-items:center;cursor:pointer;transition:color .2s,border-color .2s}
.gear::before{content:"";position:absolute;inset:-7px}
.gear:hover{color:var(--ink);border-color:var(--card-line-hov)}
.gear svg{width:15px;height:15px}
.menu{position:absolute;right:0;top:42px;z-index:60;min-width:150px;display:none;flex-direction:column;gap:2px;padding:6px;border-radius:14px;background:var(--menu-bg);border:1px solid var(--card-line);box-shadow:0 20px 50px rgba(0,0,0,.35)}
.menu.open{display:flex}
.menu .mlabel{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:6px 10px 4px}
.menu button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;border:none;background:transparent;font-family:inherit;font-size:13px;font-weight:500;color:var(--ink);padding:8px 10px;border-radius:9px;cursor:pointer;transition:background .15s}
.menu button:hover{background:var(--card2-hov)}
.menu button .chk{width:14px;height:14px;color:var(--accent);opacity:0;flex:none}
.menu button.sel .chk{opacity:1}

/* ── sidebar chrome (market pattern: Attio zones · Linear dimmed hierarchy) ── */
body.has-side{grid-template-rows:none;grid-template-columns:222px minmax(0,1fr);height:100vh}
.side{display:flex;flex-direction:column;gap:10px;padding:14px 12px;border-right:1px solid var(--hairline);min-height:0}
.side .ws{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:10px;text-decoration:none;color:var(--ink)}
.side .ws:hover{background:var(--card2-hov)}
.side .ws svg{width:20px;height:20px;flex:none;filter:var(--logo-glow)}
.side .ws svg path{stroke:var(--logo-stroke)}
.side .wsname{font-size:13.5px;font-weight:600;line-height:1.2}
.side .wssub{display:block;font-size:9.5px;font-weight:600;letter-spacing:.04em;color:var(--muted)}
.cmdk{display:flex;align-items:center;gap:8px;font-family:inherit;font-size:12.5px;color:var(--muted);background:var(--field);border:1px solid var(--card-line);border-radius:10px;padding:8px 10px;cursor:pointer;transition:border-color .2s,color .2s}
.cmdk:hover{color:var(--ink-soft);border-color:var(--card-line-hov)}
.cmdk svg{width:13px;height:13px;flex:none}
.cmdk kbd{margin-left:auto;font-family:inherit;font-size:10px;font-weight:600;color:var(--muted);border:1px solid var(--card-line);border-radius:5px;padding:1px 5px}
.snav{display:flex;flex-direction:column;gap:2px;min-height:0;overflow-y:auto;scrollbar-width:thin}
.snav a{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:9px;font-size:13px;font-weight:500;color:var(--ink-soft);text-decoration:none;transition:background .15s,color .15s}
.snav a:hover{background:var(--card2-hov);color:var(--ink)}
.snav a.on{background:var(--card2);color:var(--ink);font-weight:600}
.snav a svg{width:15px;height:15px;flex:none;opacity:.75}
.snav a.on svg{opacity:1;color:var(--accent)}
.snav .nbadge{margin-left:auto;font-size:10px;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--chip-bg);color:var(--chip-ink)}
.sfoot{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding:6px 4px 0;border-top:1px solid var(--hairline)}

/* help & feedback dialog — one intake, four lanes (bug/help/training/idea) */
.helpbtn{position:relative;width:32px;height:32px;border-radius:50%;border:1px solid var(--card-line);background:transparent;color:var(--ink-soft);display:grid;place-items:center;cursor:pointer;font-family:inherit;font-size:14px;font-weight:700;transition:color .2s,border-color .2s}
.helpbtn:hover{color:var(--ink);border-color:var(--card-line-hov)}
.helpbtn::before{content:"";position:absolute;inset:-7px}
.fb{position:fixed;inset:0;z-index:80;display:none;background:rgba(0,0,0,.35);backdrop-filter:blur(2px)}
.fb.open{display:block}
.fbbox{width:min(520px,92vw);margin:12vh auto 0;background:var(--menu-bg);border:1px solid var(--card-line);border-radius:18px;padding:20px;box-shadow:0 30px 80px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:14px}
.fbbox h3{font-size:15px;font-weight:600;letter-spacing:-.01em}
.fbcats{display:flex;gap:8px;flex-wrap:wrap}
.fbcat{font-family:inherit;font-size:12px;font-weight:600;color:var(--ink-soft);background:transparent;border:1px solid var(--card-line);border-radius:999px;padding:7px 14px;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.fbcat:hover{color:var(--ink)}
.fbcat.on{background:var(--chip-bg);color:var(--chip-ink);border-color:transparent}
.fb textarea{width:100%;min-height:90px;resize:vertical;font-family:inherit;font-size:13px;color:var(--ink);background:var(--field);border:1px solid var(--card-line);border-radius:14px;padding:12px 14px;outline:none;line-height:1.5}
.fb textarea:focus{border-color:rgba(66,133,244,.55)}
.fb textarea::placeholder{color:var(--muted)}
.fbfoot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fbnote{font-size:11px;color:var(--muted);line-height:1.5}
.fbok{font-size:12.5px;color:var(--pos);font-weight:600;padding:10px 12px;border-radius:12px;background:rgba(52,168,83,.12)}

/* command palette lite */
.pal{position:fixed;inset:0;z-index:80;display:none;background:rgba(0,0,0,.35);backdrop-filter:blur(2px)}
.pal.open{display:block}
.palbox{width:min(480px,90vw);margin:16vh auto 0;background:var(--menu-bg);border:1px solid var(--card-line);border-radius:16px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.palbox input{width:100%;border:none;outline:none;background:transparent;font-family:inherit;font-size:15px;color:var(--ink);padding:15px 18px;border-bottom:1px solid var(--card-line)}
.palbox input::placeholder{color:var(--muted)}
.palls{max-height:300px;overflow-y:auto;padding:6px}
.palit{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;font-size:13.5px;font-weight:500;cursor:pointer;color:var(--ink)}
.palit svg{width:15px;height:15px;color:var(--ink-soft)}
.palit:hover,.palit.on{background:var(--card2-hov)}
.palempty{padding:14px;font-size:13px;color:var(--muted);text-align:center}

/* activity-status dot (Pipedrive pattern) — green: activity today · gold: due soon · red: overdue · gray: none */
.adot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none}
.adot.g{background:var(--green)} .adot.y{background:var(--gold)} .adot.r{background:var(--red)} .adot.n{background:var(--bar-n)}
/* deal rotting (Pipedrive) — untouched too long in stage */
.rot{background:rgba(234,67,53,.05)!important;border-color:rgba(234,67,53,.3)!important}

/* stage + panels */
.stage{display:grid;gap:24px;align-items:stretch;max-width:1400px;width:100%;margin:0 auto;padding:22px 30px 26px;min-height:0}
.panel{display:flex;flex-direction:column;gap:12px;min-height:0;padding:20px;border-radius:var(--radius-card);background:var(--card);border:1px solid var(--panel-line);box-shadow:var(--shadow-card)}
.ov{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-strong)}
h1.page{font-size:clamp(22px,2.2vw,28px);font-weight:400;letter-spacing:-.02em;text-wrap:balance}
button,a,input,[role="button"]{touch-action:manipulation}
h1.page b{font-weight:600}
.panel h2,h2.sec{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.ptitle{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sub{font-size:12px;color:var(--ink-soft)}

/* chips + counts — color is functional, never decorative */
.count{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--chip-bg);color:var(--chip-ink);white-space:nowrap}
.chip{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.chip.b{background:var(--chip-bg);color:var(--chip-ink)}
.chip.g{background:var(--chip-green-bg);color:var(--chip-green-ink)}
.chip.r{background:var(--chip-red-bg);color:var(--chip-red-ink)}
.chip.n{background:var(--card2);border:1px solid var(--card-line);color:var(--ink-soft)}

/* rows, lists, tables */
.rowcard{display:flex;gap:12px;align-items:center;padding:11px 12px;border-radius:14px;background:var(--card2);border:1px solid var(--card-line);transition:background .2s,border-color .2s}
.rowcard.click{cursor:pointer}
.rowcard.click:hover{background:var(--card2-hov);border-color:var(--card-line-hov)}
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:8px 10px;border-bottom:1px solid var(--card-line);position:sticky;top:0;background:inherit}
.tbl td{padding:10px;border-bottom:1px solid var(--hairline);vertical-align:top}
.tbl tr.click{cursor:pointer}
.tbl tbody tr.click:hover td{background:var(--card2-hov)}
.num{font-variant-numeric:tabular-nums}
.scroll{overflow-y:auto;min-height:0;scrollbar-width:thin;scrollbar-color:var(--card-line-hov) transparent}

/* the one action style — circular ✓ / small inverse pill; use sparingly */
.ok{position:relative;flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--card-line);background:transparent;color:var(--ink-soft);display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.ok::before{content:"";position:absolute;inset:-7px}/* 44px touch target without visual bulk */
.ok:hover{background:var(--inverse-bg);color:var(--inverse-ink);border-color:var(--inverse-bg)}
.ok svg{width:14px;height:14px}
.act{border:none;cursor:pointer;font-family:inherit;font-weight:600;font-size:12.5px;border-radius:999px;padding:9px 18px;background:var(--inverse-bg);color:var(--inverse-ink);transition:transform .2s;white-space:nowrap}
.act:hover{transform:translateY(-1px)}
.act.ghost{background:transparent;color:var(--ink);border:1px solid var(--card-line)}
.act.ghost:hover{transform:none;background:var(--card2-hov)}

/* functional bars + goal bars */
.bar{width:3px;border-radius:3px;align-self:stretch;flex:none}
.bar.b{background:var(--blue)}.bar.g{background:var(--green)}.bar.n{background:var(--bar-n)}
.goal .row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
.goal .lbl{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.goal .amt{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.goal .amt span{color:var(--ink-soft);font-weight:500}
.goal .track{height:6px;border-radius:999px;background:var(--track);overflow:hidden}
.goal .fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--blue),#5b8def);transition:width .9s var(--ease)}

/* plan-gated feature card */
.locked{position:relative;padding:16px;border-radius:16px;background:var(--card2);border:1px dashed var(--card-line-hov);display:flex;gap:12px;align-items:flex-start}
.locked svg.lock{width:15px;height:15px;color:var(--muted);flex:none;margin-top:2px}
.locked .t{font-size:13px;font-weight:600}
.locked .d{font-size:11.5px;color:var(--ink-soft);margin-top:2px;line-height:1.5}

/* live-call pipeline (from design system) */
.callflow{display:inline-flex;align-items:center;gap:0;background:var(--card2);border:1px solid var(--card-line);border-radius:12px;padding:5px}
.cf-step{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;white-space:nowrap}
.cf-done{color:var(--chip-green-ink)}.cf-done svg{width:14px;height:14px}
.cf-active{background:var(--chip-bg);color:var(--chip-ink)}
.cf-active .dot{width:7px;height:7px;border-radius:50%;background:var(--blue);animation:cfpulse 1.6s infinite}
.cf-next{color:var(--muted)}
.cf-sep{width:14px;height:1px;background:var(--card-line)}
@keyframes cfpulse{0%{box-shadow:0 0 0 0 rgba(66,133,244,.45)}70%{box-shadow:0 0 0 7px rgba(66,133,244,0)}100%{box-shadow:0 0 0 0 rgba(66,133,244,0)}}

a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition:none!important}}
@media(max-width:1280px){.nav-links{gap:14px;font-size:13px}}
@media(max-width:1000px){
  html,body{overflow:auto}
  .stage{grid-template-columns:1fr!important}
  .nav-links{display:none}
  body.has-side{grid-template-columns:1fr;height:auto}
  .side{flex-direction:row;align-items:center;border-right:none;border-bottom:1px solid var(--hairline);overflow-x:auto}
  .side .wssub,.cmdk span,.cmdk kbd{display:none}
  .snav{flex-direction:row}
  .snav a span{display:none}
  .sfoot{margin-top:0;margin-left:auto;flex-direction:row;border-top:none;align-items:center}
}


/* ── collapsible sidebar: icons-only rail (toggle button, persisted via zw-side-min) ── */
.sidetoggle{align-self:flex-end;width:26px;height:26px;border-radius:8px;border:1px solid var(--card-line);background:transparent;color:var(--ink-soft);display:grid;place-items:center;cursor:pointer;transition:color .2s,border-color .2s}
.sidetoggle:hover{color:var(--ink);border-color:var(--card-line-hov)}
.sidetoggle svg{width:13px;height:13px;transition:transform .25s var(--ease)}
@media(min-width:1001px){
  body.has-side{transition:grid-template-columns .25s var(--ease)}
  body.side-min.has-side{grid-template-columns:64px minmax(0,1fr)}
  body.side-min .side{padding:14px 8px;align-items:center}
  body.side-min .side .ws{padding:6px;justify-content:center}
  body.side-min .side .wsname{display:none}
  body.side-min .cmdk{width:36px;justify-content:center;padding:8px}
  body.side-min .cmdk span,body.side-min .cmdk kbd{display:none}
  body.side-min .snav{width:100%}
  body.side-min .snav a{position:relative;justify-content:center;padding:9px}
  body.side-min .snav a span{display:none}
  body.side-min .snav .nbadge{position:absolute;top:1px;right:3px;margin:0;padding:1px 5px;font-size:9px}
  body.side-min #livePillLbl{display:none}
  body.side-min .sfoot{align-items:center}
  body.side-min .sfoot>div{flex-direction:column}
  body.side-min .sidetoggle{align-self:center}
  body.side-min .sidetoggle svg{transform:rotate(180deg)}
}
@media(max-width:1000px){.sidetoggle{display:none}}

/* ── BUBBLE DEPTH layer (Josh 2026-07-17): ONLY the soft raised bubble shadows from the
   restyle_2_soft reference, transferred onto the current design. Colors, backgrounds, font,
   halo bloom, orb, bubbles: all unchanged. Light theme only; dark theme untouched. ── */
[data-theme="light"] .panel{border-color:transparent;box-shadow:8px 8px 18px rgba(163,177,198,.38),-8px -8px 18px rgba(255,255,255,.95)}
[data-theme="light"] .rowcard,[data-theme="light"] .ap,[data-theme="light"] .slot .card,
[data-theme="light"] .braincard,[data-theme="light"] .bfield,[data-theme="light"] .mini .mrow,
[data-theme="light"] .deal,[data-theme="light"] .batch,[data-theme="light"] .kpi,
[data-theme="light"] .set,[data-theme="light"] .pcard,[data-theme="light"] .lib,
[data-theme="light"] .builder,[data-theme="light"] .agent{border-color:transparent;box-shadow:5px 5px 12px rgba(163,177,198,.30),-5px -5px 12px rgba(255,255,255,.9)}
[data-theme="light"] .rowcard.click:hover,[data-theme="light"] .ap:hover,
[data-theme="light"] .braincard:hover,[data-theme="light"] .deal:hover{box-shadow:7px 7px 16px rgba(163,177,198,.44),-7px -7px 16px rgba(255,255,255,.95)}

/* ── HALO BLOOM v2 (Josh: make it visible) — the design-system conic bloom (styleguide 08),
   on EVERY box: invisible at rest, blooms around the box on hover. Both themes. ── */
.panel,.rowcard,.ap,.slot .card,.braincard,.bfield,.mini .mrow,.deal,.batch,.kpi,.set,.pcard,.lib,.builder,.agent{position:relative;z-index:0}
.panel::after,.rowcard::after,.ap::after,.slot .card::after,.braincard::after,.bfield::after,.mini .mrow::after,.deal::after,.batch::after,.kpi::after,.set::after,.pcard::after,.lib::after,.builder::after,.agent::after{
  content:"";position:absolute;inset:-14px;z-index:-1;border-radius:32px;pointer-events:none;
  background:conic-gradient(from 120deg,#a7c4ff,#ffd48a,#ffe0a3,#b7f0c8,#cdb8ff,#a7c4ff);
  filter:blur(24px);opacity:0;transition:opacity .3s var(--ease)}
.panel:hover::after,.rowcard:hover::after,.ap:hover::after,.slot .card:hover::after,.braincard:hover::after,.bfield:hover::after,.mini .mrow:hover::after,.deal:hover::after,.batch:hover::after,.kpi:hover::after,.set:hover::after,.pcard:hover::after,.lib:hover::after,.builder:hover::after,.agent:hover::after{opacity:.7}
@media(prefers-reduced-motion:reduce){.panel::after,.rowcard::after,.ap::after{transition:none}}

/* ── FULL DEPTH SYSTEM (Josh confirmed via reference screenshot 2026-07-17): the complete
   soft-depth treatment from restyle_2_soft — pale surface, raised boxes and chips, sunken
   fields — with brand blues. Cascades last = wins. Light theme only. Orb, iMessage bubbles,
   halo bloom, dark theme: untouched. ── */
[data-theme="light"]{
  --bg:#e7eaf1; --card:#e7eaf1; --card2:#e7eaf1; --card2-hov:#edf0f6;
  --field:#e7eaf1; --menu-bg:#eef1f7; --track:#d5d9e4;
  --hairline:transparent; --panel-line:transparent; --card-line:transparent; --card-line-hov:transparent;
}
[data-theme="light"] .panel{border:none;box-shadow:9px 9px 20px #c4c8d6,-9px -9px 20px #fdffff}
[data-theme="light"] .rowcard,[data-theme="light"] .ap,[data-theme="light"] .slot .card,
[data-theme="light"] .braincard,[data-theme="light"] .bfield,[data-theme="light"] .mini .mrow,
[data-theme="light"] .deal,[data-theme="light"] .batch,[data-theme="light"] .kpi,
[data-theme="light"] .set,[data-theme="light"] .pcard,[data-theme="light"] .lib,
[data-theme="light"] .builder,[data-theme="light"] .agent,[data-theme="light"] .locked{border:none;box-shadow:5px 5px 12px #cfd3df,-5px -5px 12px #fbfdff}
[data-theme="light"] .rowcard.click:hover,[data-theme="light"] .ap:hover,[data-theme="light"] .braincard:hover,
[data-theme="light"] .deal:hover{background:#e7eaf1;box-shadow:7px 7px 16px #c8ccdb,-7px -7px 16px #ffffff}
[data-theme="light"] .cmdchip,[data-theme="light"] .chip,[data-theme="light"] .count,
[data-theme="light"] .fbcat,[data-theme="light"] .sug{border:none;box-shadow:4px 4px 9px #cfd3df,-4px -4px 9px #fbfdff;background:#e7eaf1}
[data-theme="light"] .chip.g{color:var(--chip-green-ink)}[data-theme="light"] .chip.r{color:var(--chip-red-ink)}
[data-theme="light"] .chip.b,[data-theme="light"] .count,[data-theme="light"] .cmdchip{color:var(--chip-ink)}
[data-theme="light"] .chatbox,[data-theme="light"] .cmdk,[data-theme="light"] .search,
[data-theme="light"] .sand input,[data-theme="light"] .fld input,[data-theme="light"] .fld select,
[data-theme="light"] .fb textarea,[data-theme="light"] .bfield textarea,[data-theme="light"] .goal .track,
[data-theme="light"] .track{border:none;background:#e7eaf1;box-shadow:inset 4px 4px 9px #c7cbd9,inset -4px -4px 9px #fdffff}
[data-theme="light"] .chatbox:focus-within,[data-theme="light"] .search:focus-within{box-shadow:inset 4px 4px 9px #c7cbd9,inset -4px -4px 9px #fdffff,0 0 0 3px rgba(66,133,244,.18)}
[data-theme="light"] .send,[data-theme="light"] .act{background:#1a56d6;color:#fff;box-shadow:5px 5px 11px #c4c8d6,-5px -5px 11px #fdffff}
[data-theme="light"] .act.ghost{background:#e7eaf1;color:var(--ink);box-shadow:4px 4px 9px #cfd3df,-4px -4px 9px #fbfdff}
[data-theme="light"] .ok,[data-theme="light"] .gear,[data-theme="light"] .helpbtn,
[data-theme="light"] .sidetoggle,[data-theme="light"] .avatar{border:none;background:#e7eaf1;color:var(--ink-soft);box-shadow:4px 4px 9px #cfd3df,-4px -4px 9px #fbfdff}
[data-theme="light"] .avatar{color:var(--ink);font-weight:700}
[data-theme="light"] .ok:hover{background:#1a56d6;color:#fff}
[data-theme="light"] nav{border-bottom:none;box-shadow:0 6px 16px -8px rgba(120,128,160,.4);background:#e7eaf1}
[data-theme="light"] .side{border-right:none;box-shadow:6px 0 16px -8px rgba(120,128,160,.35);background:#e7eaf1}
[data-theme="light"] .snav a.on{background:#e7eaf1;box-shadow:inset 3px 3px 7px #c7cbd9,inset -3px -3px 7px #fdffff}
[data-theme="light"] .menu{border:none;box-shadow:8px 8px 20px #c4c8d6,-6px -6px 16px #fdffff}
[data-theme="light"] .goal .fill{background:linear-gradient(90deg,#4285F4,#5b8def)}

/* ── iPHONE TEXT TUNE (Josh screenshot 2026-07-17): bubbles must read as iMessage on the
   depth surface. Incoming = crisp light gray lifted off the page; outgoing = true iOS blue
   gradient; tighter width so long replies wrap like a phone. main-prefixed to outrank page blocks. ── */
main .thread .m{max-width:62%;font-size:15px;line-height:1.35;border-radius:20px;padding:9px 14px;border:none}
main .thread .m.me{background:linear-gradient(180deg,#0A84FF,#007AFF);color:#fff;border-bottom-right-radius:6px}
[data-theme="light"] main .thread .m.ai{background:#F1F2F6;color:#111;border-bottom-left-radius:6px;box-shadow:3px 3px 8px rgba(163,177,198,.38),-3px -3px 8px rgba(255,255,255,.9)}
[data-theme="dark"] main .thread .m.ai{background:#26252A;color:#eaeaea}
main .thread .m.ai.card{max-width:88%;width:min(440px,88%)} /* inline mini-cards stay wide */
[data-theme="light"] main .sand .reply{background:#F1F2F6;box-shadow:3px 3px 8px rgba(163,177,198,.38),-3px -3px 8px rgba(255,255,255,.9)}
[data-theme="light"] main .m.them{background:#F1F2F6;color:#111;box-shadow:3px 3px 8px rgba(163,177,198,.38),-3px -3px 8px rgba(255,255,255,.9)}
[data-theme="light"] main .m.us{background:linear-gradient(180deg,#0A84FF,#007AFF);color:#fff}

/* ── CALM HOVER (Josh 2026-07-17): halo bloom OFF everywhere (panels and buttons were lighting
   the whole background). Hover feedback = a slight raise instead. ── */
.panel::after,.rowcard::after,.ap::after,.slot .card::after,.braincard::after,.bfield::after,
.mini .mrow::after,.deal::after,.batch::after,.kpi::after,.set::after,.pcard::after,
.lib::after,.builder::after,.agent::after{display:none}
[data-theme="light"] .ap,[data-theme="light"] .rowcard.click,[data-theme="light"] .braincard,
[data-theme="light"] .deal,[data-theme="light"] .bfield{transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
[data-theme="light"] .ap:hover,[data-theme="light"] .rowcard.click:hover,
[data-theme="light"] .braincard:hover,[data-theme="light"] .deal:hover{transform:translateY(-2px)}
[data-theme="light"] .ok,[data-theme="light"] .act,[data-theme="light"] .cmdchip{transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
[data-theme="light"] .ok:hover,[data-theme="light"] .cmdchip:hover{transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){[data-theme="light"] .ap:hover,[data-theme="light"] .rowcard.click:hover,[data-theme="light"] .ok:hover{transform:none}}

/* ── PANEL BLOOM v3 (Josh: bloom on top-level panels ONLY, never the background) ──
   Glow is INSIDE the panel: inset 18px + contained blur, painted under the content,
   soft opacity. Cards/buttons keep the raise-on-hover; background stays clean. */
.panel{position:relative;z-index:0}
.panel::before{content:"";position:absolute;inset:18px;z-index:-1;border-radius:inherit;pointer-events:none;
  background:conic-gradient(from 120deg,#a7c4ff,#ffd48a,#ffe0a3,#b7f0c8,#cdb8ff,#a7c4ff);
  filter:blur(24px);opacity:0;transition:opacity .35s var(--ease)}
.panel:hover::before{opacity:.32}
@media(prefers-reduced-motion:reduce){.panel::before{transition:none}}