/* Ray OS · single dark world by design. Skin (full palette) is switchable in Settings; Forest is default. */
:root{
  color-scheme:dark;
  /* shared base (Propel bronze) */
  --bg:#0B0B0D; --panel:#151517; --panel2:#1B1B1E; --panel3:#26262a;
  --tint:237,232,221;
  --line:rgba(var(--tint),.11); --line2:rgba(var(--tint),.22);
  --text:#EDE8DD; --soft:#A39D8E; --mute:#6f6a5f; --glow:12%;
  --ion:#5BD4FF; --bronze:#D2A060; --violet:#9B8CFF;
  /* Forest (default) accent */
  --accent:#4FCB8B; --accent-ink:#04120A;
  --ok:#7FC8A0; --warn:#E8B25A; --err:#E07A6E;
  --r:12px; --r-sm:8px;
  --f-display:'Chakra Petch','Segoe UI',system-ui,sans-serif;
  --f-body:'Red Hat Display','Segoe UI',system-ui,sans-serif;
  --f-mono:'Red Hat Mono',ui-monospace,Consolas,monospace;
}
:root[data-skin="river"]{--accent:#3CC6BD;--accent-ink:#031211}
:root[data-skin="cement"]{--accent:#E8ECE9;--accent-ink:#0B0B0D;--glow:7%}
:root[data-skin="ion"]{--accent:#45CFFF;--accent-ink:#021019}
:root[data-skin="bronze"]{--accent:#D2A060;--accent-ink:#1A1206}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 var(--f-body);-webkit-font-smoothing:antialiased;overflow:hidden}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(800px 460px at 85% -8%,color-mix(in srgb,var(--accent) var(--glow,12%),transparent),transparent 62%),
    radial-gradient(640px 420px at -5% 105%,color-mix(in srgb,var(--accent) calc(var(--glow,12%) / 2),transparent),transparent 60%),
    linear-gradient(rgba(var(--tint),.035) 1px,transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg,rgba(var(--tint),.035) 1px,transparent 1px) 0 0/40px 40px;
  -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.4) 75%,transparent);mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.4) 75%,transparent)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:var(--accent)}
.mono{font-family:var(--f-mono)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:rgba(var(--tint),.16);border-radius:8px}::-webkit-scrollbar-track{background:transparent}

/* ---------- shell ---------- */
.app{position:relative;display:grid;grid-template-columns:232px minmax(0,1fr);height:100%}
.side{display:flex;flex-direction:column;border-right:1px solid var(--line);background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);padding:16px 10px 12px;overflow-y:auto;min-height:0}
.brand{display:flex;align-items:center;gap:10px;padding:2px 10px 16px}
.mark{width:26px;height:26px;flex:none;position:relative;background:url(icons/logo.svg) center/contain no-repeat}
.brand b{font:700 16px var(--f-display);letter-spacing:.18em}
.brand i{font-style:normal;font-size:10px;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);padding:0 5px;border-radius:4px}
.nav-group{display:flex;flex-direction:column;gap:1px;margin-bottom:10px}
.nav-label{width:100%;display:flex;align-items:center;justify-content:space-between;font:600 10px var(--f-mono);letter-spacing:.2em;color:var(--accent);text-transform:uppercase;padding:6px 10px 4px;border-radius:6px;cursor:pointer}
.nav-label:hover{background:rgba(var(--tint),.05)}
.nav-label i{font-style:normal;font-size:11px;letter-spacing:0;transition:transform .2s}
.nav-group.folded .nav-label i{transform:rotate(-90deg)}
.nav-items{display:flex;flex-direction:column;gap:1px}
.nav-group.folded .nav-items{display:none}
.nav-item{width:100%;text-align:left;cursor:pointer;display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--r-sm);color:var(--soft);text-decoration:none;font-weight:500;font-size:13.5px;border:1px solid transparent;transition:background .15s,color .15s,transform .15s}
.nav-item svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nav-item:hover{background:rgba(var(--tint),.06);color:var(--text);transform:translateX(2px)}
.nav-item.active{background:color-mix(in srgb,var(--accent) 12%,transparent);border-color:color-mix(in srgb,var(--accent) 30%,transparent);color:var(--text)}
.nav-item.active svg{color:var(--accent)}
.nav-item .count{margin-left:auto;font:500 10.5px var(--f-mono);color:var(--mute)}
.side-foot{margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
.tenant-chip{width:100%;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--panel);text-align:left}
.tenant-chip .av{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font:700 11px var(--f-display);color:var(--accent-ink);background:var(--accent);flex:none}
.tenant-chip small{display:block;color:var(--mute);font-size:11px}
.tenant-chip b{font-size:12.5px;font-weight:600}

.main{display:flex;flex-direction:column;min-width:0;min-height:0}
.top{display:flex;align-items:center;gap:12px;padding:10px 22px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 70%,transparent);backdrop-filter:blur(10px);position:relative;z-index:5}
.crumb{font:500 12px var(--f-mono);color:var(--mute);letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumb b{color:var(--text);font-weight:600}
.top-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.search-btn{display:flex;align-items:center;gap:10px;padding:6px 8px 6px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);color:var(--mute);font-size:12.5px}
kbd{font:500 10px var(--f-mono);border:1px solid var(--line2);border-radius:4px;padding:1px 5px;color:var(--soft)}
.prime-btn{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--r-sm);background:color-mix(in srgb,var(--accent) 14%,var(--panel));border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);font-weight:600;font-size:12.5px}
.icon-btn{width:32px;height:32px;display:grid;place-items:center;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--panel);color:var(--soft)}
.menu-btn{display:none}
.isolation{display:flex;align-items:center;gap:10px;padding:7px 22px;font-size:12px;color:var(--warn);background:rgba(255,181,71,.07);border-bottom:1px solid rgba(255,181,71,.2)}
.view{flex:1;overflow-y:auto;min-height:0;padding:22px 22px 60px;outline:none}
.view.full{padding:0;overflow:hidden;position:relative}

/* ---------- primitives ---------- */
.pressable{transition:transform .12s,filter .15s,border-color .15s,background .15s}
.pressable:hover{filter:brightness(1.12)}
.pressable:active{transform:translateY(1px) scale(.985)}
.led{width:7px;height:7px;border-radius:2px;display:inline-block;flex:none;background:var(--mute)}
.led.ok{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.led.warn{background:var(--warn);box-shadow:0 0 8px var(--warn)}
.led.err{background:var(--err);box-shadow:0 0 8px var(--err)}
.led.run{background:var(--accent);box-shadow:0 0 8px var(--accent);animation:blink 1s steps(2) infinite}
.led.off{background:var(--mute)}
@keyframes blink{50%{opacity:.25}}
.page-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.page-head h1{font:700 24px/1.1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;margin:0;text-wrap:balance}
.eyebrow{font:600 10px var(--f-mono);letter-spacing:.28em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.page-head p{margin:6px 0 0;color:var(--soft);max-width:62ch}
.page-head .actions{margin-left:auto;max-width:100%;display:flex;gap:8px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:var(--r-sm);border:1px solid var(--line2);background:var(--panel2);font-weight:600;font-size:12.5px;white-space:nowrap}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.btn.ghost{background:transparent}
.btn.sm{padding:4px 9px;font-size:11.5px}
.btn[disabled]{opacity:.55;cursor:default}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;min-width:0}
.card h3{font:600 11px var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--soft);margin:0 0 12px;display:flex;align-items:center;gap:8px}
.card h3 .right{margin-left:auto;letter-spacing:.06em;text-transform:none;color:var(--mute);font-weight:500}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.span2{grid-column:span 2}
.span3{grid-column:span 3}
.stat .k{font:500 11px var(--f-mono);color:var(--mute);letter-spacing:.08em;text-transform:uppercase}
.stat .v{font:600 28px/1.15 var(--f-display);margin-top:6px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.stat .d{font:500 11.5px var(--f-mono);margin-top:4px}
.up{color:var(--ok)}.down{color:var(--err)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;font:500 11px var(--f-mono);border:1px solid var(--line2);color:var(--soft);white-space:nowrap}
.chip.ok{color:var(--ok);border-color:rgba(61,220,151,.35)}
.chip.warn{color:var(--warn);border-color:rgba(255,181,71,.35)}
.chip.err{color:var(--err);border-color:rgba(255,92,122,.35)}
.chip.acc{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.chip.lock{color:var(--mute);border-style:dashed}
.chip.example{color:var(--violet);border-color:rgba(155,140,255,.35)}
.muted{color:var(--mute)}.soft{color:var(--soft)}
.list{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row .grow{flex:1;min-width:0}
.row .t{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .s{font-size:12px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row.click{cursor:pointer;border-radius:8px;padding-inline:8px;margin-inline:-8px}
.row.click:hover{background:rgba(var(--tint),.05)}
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{text-align:left;font:600 10px var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:9px 10px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;white-space:nowrap}
.num{text-align:right}
.bar{height:6px;border-radius:4px;background:rgba(var(--tint),.1);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--accent);border-radius:4px;transition:width .6s}
.tabs{display:inline-flex;max-width:100%;overflow-x:auto;gap:2px;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.tabs button{flex:none;padding:5px 12px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--soft)}
.tabs button.on{background:var(--panel3);color:var(--text)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font:600 10.5px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.input,select.input,textarea.input{background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r-sm);padding:8px 10px;outline:none;min-width:0}
.input:focus{border-color:var(--accent)}
.av-px{width:32px;height:32px;border-radius:8px;background:var(--panel3);flex:none}
.empty{color:var(--mute);font-size:12.5px;padding:10px 0}
svg text{fill:var(--mute);font:10px var(--f-mono)}
.spark{width:100%;height:auto;display:block}
.rise{animation:rise .45s both}
@keyframes rise{from{opacity:.4;transform:translateY(6px)}}

/* ---------- home ---------- */
.hello h1{font:700 26px var(--f-display);letter-spacing:.04em;margin:0}
.feed .row .time{font:500 11px var(--f-mono);color:var(--mute);width:46px;flex:none}
.feed .row.new{animation:flash 1.2s}
@keyframes flash{from{background:color-mix(in srgb,var(--accent) 16%,transparent)}}
.mini-canvas{width:100%;height:230px;display:block;border-radius:10px;background:var(--bg);cursor:pointer;border:1px solid var(--line)}

/* ---------- kanban ---------- */
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:12px;overflow-x:auto;padding-bottom:8px}
.col{background:color-mix(in srgb,var(--panel) 75%,transparent);border:1px solid var(--line);border-radius:var(--r);padding:10px;display:flex;flex-direction:column;gap:8px;min-height:180px}
.col-head{display:flex;align-items:center;gap:8px;font:600 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--soft);padding:2px 4px 6px}
.col-head .n{margin-left:auto;color:var(--mute)}
.kcard{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:6px;cursor:pointer}
.kcard:hover{border-color:var(--line2)}
.kcard .t{font-weight:600;font-size:13px;line-height:1.35}
.kcard .meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11px;color:var(--mute)}
.kcard.enter{animation:rise .5s both, flash 1.4s}

/* ---------- funnel ---------- */
.funnel{display:grid;grid-template-columns:repeat(8,minmax(118px,1fr));gap:8px;overflow-x:auto;position:relative;padding-bottom:6px}
.fstage{background:color-mix(in srgb,var(--panel) 80%,transparent);border:1px solid var(--line);border-radius:10px;padding:10px 8px;display:flex;flex-direction:column;gap:6px;min-height:300px;position:relative}
.fstage .h{font:600 10px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--soft);line-height:1.3;min-height:26px}
.fstage .cnt{font:600 22px var(--f-display)}
.fstage .conv{font:500 10.5px var(--f-mono);color:var(--mute)}
.lead{display:flex;align-items:center;gap:6px;padding:5px 6px;border-radius:7px;background:var(--panel2);border:1px solid var(--line);font-size:11.5px;cursor:pointer;white-space:nowrap;overflow:hidden}
.lead:hover{border-color:var(--accent)}
.lead .dot{width:6px;height:6px;border-radius:50%;flex:none}
.flow-bar{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--accent),transparent);opacity:.6}

/* ---------- workflows ---------- */
.wf-canvas{width:100%;overflow-x:auto}
.wf-canvas svg{min-width:720px;width:100%;height:auto;display:block}
.wf-node rect{fill:var(--panel2);stroke:var(--line2)}
.wf-node text{fill:var(--text);font:600 11px var(--f-body)}
.wf-node .sub{fill:var(--mute);font:500 9.5px var(--f-mono)}
.wf-node.hot rect{stroke:var(--accent);filter:drop-shadow(0 0 6px var(--accent))}
.wf-edge{stroke:var(--line2);stroke-width:1.5;fill:none}
.wf-pulse{fill:var(--accent)}

/* ---------- office + brain (full views) ---------- */
.stage{position:absolute;inset:0}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#officeCanvas{cursor:grab}
#officeCanvas.drag{cursor:grabbing}
.hud{position:absolute;z-index:3;display:flex;gap:8px;align-items:center}
.hud.tl{left:16px;top:14px;flex-direction:column;align-items:flex-start}
.hud.tr{right:16px;top:14px}
.hud.bl{left:16px;bottom:16px;flex-wrap:wrap;max-width:calc(100% - 32px)}
.hud.br{right:16px;bottom:16px}
.hud-title{font:700 20px var(--f-display);letter-spacing:.08em;text-transform:uppercase;text-shadow:0 2px 12px #000}
.hud-sub{font:500 11.5px var(--f-mono);color:var(--soft);text-shadow:0 1px 8px #000}
.glass{background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(10px);border:1px solid var(--line2);border-radius:10px}
.hud .glass{padding:6px}
.side-card{position:absolute;right:16px;top:60px;bottom:16px;width:320px;z-index:4;padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.side-card h2{font:700 17px var(--f-display);letter-spacing:.05em;margin:0}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:12px}
.kv dt{color:var(--mute);font-family:var(--f-mono)}
.kv dd{margin:0;overflow-wrap:anywhere}
.filter-chip{padding:4px 10px;border-radius:999px;border:1px solid var(--line2);font:500 11.5px var(--f-mono);color:var(--soft);display:inline-flex;gap:6px;align-items:center;background:color-mix(in srgb,var(--bg) 75%,transparent)}
.filter-chip i{width:8px;height:8px;border-radius:50%}
.filter-chip.off{opacity:.4}
.note-body{font-size:13px;line-height:1.6}
.note-body h4{font:600 10.5px var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--soft);margin:12px 0 6px}
.note-body p{margin:0 0 8px}
.note-body ul{margin:0;padding-left:16px;color:var(--soft)}
.wikilink{color:var(--violet);cursor:pointer;text-decoration:underline dotted;background:none;padding:0;font:inherit}
.legend-row{display:flex;gap:6px;flex-wrap:wrap}
.room-list .row .av-px{width:28px;height:28px}
.bubble-cost{font:500 10.5px var(--f-mono);color:var(--mute)}

/* ---------- overlays ---------- */
.drawer{position:fixed;z-index:40;right:0;top:0;bottom:0;width:min(420px,100%);background:var(--panel);border-left:1px solid var(--line2);display:flex;flex-direction:column;box-shadow:-30px 0 60px rgba(0,0,0,.5);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);animation:slide .25s both}
@keyframes slide{from{transform:translateX(30px);opacity:.001}}
.drawer-head{display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.prime-id{display:flex;gap:10px;align-items:center}
.prime-id canvas{width:36px;height:36px;border-radius:9px;background:var(--panel3)}
.prime-id small{display:block;color:var(--mute);font-size:11.5px}
.drawer-head .icon-btn{margin-left:auto}
.chat{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:88%;padding:9px 12px;border-radius:12px;font-size:13px;line-height:1.5;white-space:pre-wrap}
.msg.me{align-self:flex-end;background:color-mix(in srgb,var(--accent) 18%,var(--panel2));border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.msg.bot{align-self:flex-start;background:var(--panel2);border:1px solid var(--line)}
.msg .plan{margin-top:8px;display:flex;flex-direction:column;gap:4px;font:500 11.5px var(--f-mono);color:var(--soft)}
.typing{display:inline-flex;gap:3px}.typing i{width:5px;height:5px;border-radius:50%;background:var(--soft);animation:blink .9s infinite}.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
.chat-suggest{display:flex;gap:6px;flex-wrap:wrap;padding:0 16px 10px}
.chat-suggest button{font-size:11.5px;padding:5px 9px;border-radius:999px;border:1px solid var(--line2);color:var(--soft);text-align:left}
.chat-form{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
.chat-form input{flex:1;min-width:0;background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r-sm);padding:9px 11px;outline:none}
.palette-wrap,.modal-wrap{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:flex-start;padding:12vh 16px 16px}
.palette{width:min(560px,100%);background:var(--panel);border:1px solid var(--line2);border-radius:14px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.palette input{width:100%;padding:14px 16px;background:transparent;border:0;border-bottom:1px solid var(--line);outline:none;font-size:15px}
.palette-list{max-height:50vh;overflow-y:auto;padding:6px}
.palette-list button{width:100%;display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:8px;text-align:left;font-size:13px}
.palette-list button.on{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.palette-list small{margin-left:auto;color:var(--mute);font:500 10.5px var(--f-mono)}
.modal{width:min(480px,100%);background:var(--panel);border:1px solid var(--line2);border-radius:14px;padding:22px;box-shadow:0 30px 80px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:12px;max-height:80vh;overflow-y:auto}
.modal h2{font:700 19px var(--f-display);letter-spacing:.04em;margin:0}
.modal p{margin:0;color:var(--soft)}
.modal .foot{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:6px}
.panel-drawer{position:fixed;z-index:45;right:0;top:0;bottom:0;width:min(400px,100%);background:var(--panel);border-left:1px solid var(--line2);box-shadow:-30px 0 60px rgba(0,0,0,.5);padding:20px;padding-top:calc(20px + env(safe-area-inset-top,0px));overflow-y:auto;animation:slide .25s both}
.panel-close{position:absolute;right:14px;top:calc(14px + env(safe-area-inset-top,0px))}
.panel-drawer h2{font:700 18px var(--f-display);letter-spacing:.04em;margin:0 40px 4px 0}
.panel-drawer .sec{margin-top:16px}
.toasts{position:fixed;z-index:60;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:max-content;max-width:calc(100% - 32px)}
.toast{background:var(--panel3);border:1px solid var(--line2);border-radius:10px;padding:9px 14px;font-size:12.5px;display:flex;gap:8px;align-items:center;box-shadow:0 12px 30px rgba(0,0,0,.5);animation:rise .3s both}
.scrim{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.55)}

/* ---------- settings / reference ---------- */
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg button{padding:8px 14px;border-radius:var(--r-sm);border:1px solid var(--line2);background:var(--panel2);font-weight:600;font-size:12.5px;display:flex;gap:8px;align-items:center}
.seg button.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--panel2))}
.swatch{width:12px;height:12px;border-radius:4px}
.layer{display:flex;gap:14px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);transition:border-color .2s,transform .2s}
.layer:hover{border-color:var(--accent);transform:translateX(3px)}
.layer .n{font:700 12px var(--f-mono);color:var(--accent);width:28px;flex:none;padding-top:2px}
.layer b{font-size:14px}
.layer p{margin:3px 0 0;color:var(--soft);font-size:12.5px}
.layer .cost{margin-left:auto;flex:none}
pre.tree{font:500 12px/1.65 var(--f-mono);color:var(--soft);margin:0;overflow-x:auto;white-space:pre}
pre.tree b{color:var(--text);font-weight:600}
pre.tree i{color:var(--mute);font-style:normal}
.phase{display:grid;grid-template-columns:88px 1fr;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.phase:first-child{border-top:0}
.phase .tag{font:700 20px var(--f-display);color:var(--mute)}
.phase.now .tag{color:var(--accent)}
.phase h4{margin:0 0 4px;font-size:14px}
.phase p{margin:0;color:var(--soft);font-size:12.5px}
.check-row .res{font:500 11.5px var(--f-mono)}
.gauge text{font:700 26px var(--f-display);fill:var(--text)}
.conn-card{display:flex;flex-direction:column;gap:10px}
.conn-card .logo{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font:700 13px var(--f-display);color:#fff;flex:none}
.conn-card>.chip,.conn-card>.btn{align-self:flex-start}
.conn-card.locked{opacity:.72;border-style:dashed}
.persona-card{display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.persona-card.on{border-color:var(--accent)}
.skill-card{display:flex;flex-direction:column;gap:8px}
.skill-card code{font:500 11.5px var(--f-mono);color:var(--accent)}
.agent-card{display:flex;flex-direction:column;gap:10px}
.agent-card .log{font:500 11px/1.6 var(--f-mono);color:var(--soft);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px;max-height:90px;overflow-y:auto;white-space:pre-wrap}
.comms{display:grid;grid-template-columns:180px 300px minmax(0,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel);min-height:520px}
.comms>div{min-width:0}
.comms .chan{border-right:1px solid var(--line);padding:10px}
.comms .inbox{border-right:1px solid var(--line);overflow-y:auto;max-height:640px}
.comms .thread{padding:18px;display:flex;flex-direction:column;gap:12px}
.chan button{width:100%;display:flex;gap:8px;align-items:center;padding:7px 8px;border-radius:8px;font-size:13px;color:var(--soft);text-align:left}
.chan button.on{background:var(--panel3);color:var(--text)}
.chan button small{margin-left:auto;font:500 10.5px var(--f-mono)}
.mail{padding:12px 14px;border-bottom:1px solid var(--line);cursor:pointer;display:flex;flex-direction:column;gap:3px}
.mail.on{background:color-mix(in srgb,var(--accent) 8%,transparent);box-shadow:inset 2px 0 0 var(--accent)}
.mail .who{display:flex;gap:6px;align-items:center;font-weight:600;font-size:13px}
.mail .who small{margin-left:auto;color:var(--mute);font:500 10.5px var(--f-mono)}
.mail .pv{font-size:12px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bubble{padding:10px 13px;border-radius:12px;background:var(--panel2);border:1px solid var(--line);max-width:80%;font-size:13px}
.bubble.them{align-self:flex-start}
.draft{border:1px dashed color-mix(in srgb,var(--accent) 50%,transparent);background:color-mix(in srgb,var(--accent) 6%,transparent);border-radius:12px;padding:12px}
.draft textarea{width:100%;min-height:84px;resize:vertical;background:transparent;border:0;outline:none;font-size:13px;line-height:1.5}

/* ---------- responsive ---------- */
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.comms{grid-template-columns:150px minmax(0,1fr)}.comms .thread{grid-column:1/-1;border-top:1px solid var(--line)}}
@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;z-index:35;left:0;top:0;bottom:0;width:250px;transform:translateX(-105%);transition:transform .25s;padding-top:calc(16px + env(safe-area-inset-top,0px))}
  .side.open{transform:none}
  .menu-btn{display:grid}
  .g2,.g3{grid-template-columns:minmax(0,1fr)}
  .span2,.span3{grid-column:auto}
  .top{padding:10px 16px}.view{padding:16px 16px 60px}
  .search-btn kbd,.search-btn span{display:none}
  .search-btn{padding:6px 10px}.search-btn::before{content:'⌕';font-size:15px}
  .side-card{left:16px;right:16px;width:auto;top:auto;max-height:52%}
  .comms{grid-template-columns:minmax(0,1fr)}.comms .chan{display:flex;gap:4px;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}.comms .chan button{width:auto;white-space:nowrap}.comms .inbox{border-right:0;max-height:260px}
  .isolation{padding:7px 16px}
}
@media (max-width:520px){.g4{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.stat .v{font-size:22px}.page-head h1{font-size:20px}.hud-title{font-size:16px}.prime-btn #primeLabel{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
:root[data-motion="off"] *{animation-duration:.01ms!important;animation-iteration-count:1!important}

/* ---------- home hero: office + brain take the stage ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:14px}
.hero-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.hero-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.hero-bar h3{margin:0}
.hero-bar .btn{margin-left:auto}
.hero-canvas{display:block;width:100%;height:clamp(360px,52vh,560px);background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--panel3) 55%,var(--bg)),var(--bg));cursor:pointer}
.feed-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.feed-grid .row:nth-child(2){border-top:0}

/* ---------- CRM ---------- */
.av-init{display:inline-grid;place-items:center;border-radius:50%;color:#fff;font-weight:700;font-family:var(--f-display);flex:none;letter-spacing:.02em}
.ring{flex:none;display:block}
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(178px,1fr);gap:10px;overflow-x:auto;padding-bottom:8px}
.pcol{background:color-mix(in srgb,var(--panel) 80%,transparent);border:1px solid var(--line);border-radius:var(--r);padding:10px;display:flex;flex-direction:column;gap:6px;min-height:320px;transition:border-color .15s,background .15s}
.pcol.over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--panel))}
.pcol-sum{font-size:11.5px;color:var(--soft);padding:0 4px 6px}
.pcards{display:flex;flex-direction:column;gap:8px;flex:1}
.pcard{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:7px;cursor:grab}
.pcard:hover{border-color:var(--line2)}
.pcard.dragging{opacity:.4}
.pcard.enter{animation:rise .5s both,flash 1.4s}
.pc-top{display:flex;align-items:center;gap:8px}
.pc-top b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-top small{display:block;color:var(--mute);font:500 11px var(--f-mono)}
.pc-src{font-size:11.5px;color:var(--soft);line-height:1.35}
.pc-foot{display:flex;justify-content:space-between;font-size:11.5px}
.filter-chip.on{border-color:var(--accent);color:var(--text);background:color-mix(in srgb,var(--accent) 14%,transparent)}
th[data-s],th[data-sort]{cursor:pointer}
th.on{color:var(--text)}
.trow{cursor:pointer}.trow:hover td{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.hist{display:flex;flex-direction:column;gap:10px;margin-top:8px;border-left:1px solid var(--line2);padding-left:14px}
.hist>div{position:relative;font-size:13px}
.hist>div::before{content:'';position:absolute;left:-18px;top:6px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.hist small{display:block;color:var(--mute);font-size:11.5px}
.day{font:600 10.5px var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:12px 0 2px}
.day:first-child{margin-top:0}
.wbars{display:flex;align-items:flex-end;gap:12px;height:170px;padding-top:10px}
.wbars>div{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;justify-content:flex-end;height:100%}
.wbars i{display:block;width:100%;max-width:38px;border-radius:6px 6px 2px 2px;background:var(--line2)}
.wbars .hi i{background:var(--accent)}
.wbars span{font:600 11px var(--f-mono)}.wbars small{font:500 10.5px var(--f-mono);color:var(--mute)}
.sw{position:relative;display:inline-block;width:36px;height:20px;flex:none}
.sw input{opacity:0;width:0;height:0;position:absolute}
.sw i{position:absolute;inset:0;border-radius:999px;background:var(--panel3);border:1px solid var(--line2);transition:background .2s;cursor:pointer}
.sw i::after{content:'';position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:var(--soft);transition:transform .2s}
.sw input:checked+i{background:var(--accent)}
.sw input:checked+i::after{transform:translateX(16px);background:var(--accent-ink)}
.sw input:focus-visible+i{outline:2px solid var(--accent);outline-offset:2px}
.step{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--line)}
.step:first-child{border-top:0;padding-top:0}
.step h4{margin:0 0 2px;font-size:14px}
.step p{margin:0 0 10px;font-size:12.5px}
.snum{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 12px var(--f-mono);background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);flex:none}
.drop{border:1px dashed var(--line2);border-radius:10px;padding:16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.drop.done{border-style:solid;border-color:color-mix(in srgb,var(--ok) 50%,transparent);color:var(--ok)}
.segs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sg{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border:1px solid var(--line2);border-radius:10px;background:var(--panel2);text-align:left}
.sg b{font:600 18px var(--f-display)}.sg span{font-size:12px;color:var(--soft)}
.sg.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--panel2))}
.prev{margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--panel2);border:1px solid var(--line)}
.prev p{margin:4px 0 0;font-size:13px}
.stack{display:flex;height:12px;border-radius:6px;overflow:hidden;gap:2px}
.stack i{display:block;height:100%}
.dotc{width:8px;height:8px;border-radius:50%;display:inline-block}
.ins{padding:10px 0;border-top:1px solid var(--line)}
.ins:first-of-type{border-top:0}
.ins p{margin:6px 0 0;font-size:12.5px;color:var(--soft)}
/* comms with AI setter */
.comms{grid-template-columns:160px 270px minmax(0,1fr) 250px!important}
.comms .thread{min-height:0}
.comms .msgs{display:flex;flex-direction:column;gap:8px;max-height:360px;overflow-y:auto;padding-right:4px}
.bubble.me2{align-self:flex-end;background:color-mix(in srgb,var(--accent) 16%,var(--panel2));border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.bubble .by{font:600 10px var(--f-mono);letter-spacing:.08em;color:var(--accent);margin-bottom:3px;text-transform:uppercase}
.ctrl{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.qual{border-left:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:6px}
.qh{font:600 11px var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--soft);margin:0 0 8px}
.qc{width:18px;height:18px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;font-size:11px;flex:none}
.qc.on{background:var(--ok);border-color:var(--ok);color:var(--bg)}
@media (max-width:1300px){.comms{grid-template-columns:150px 250px minmax(0,1fr)!important}.comms .qual{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}}
@media (max-width:1100px){.hero{grid-template-columns:minmax(0,1fr)}.comms{grid-template-columns:150px minmax(0,1fr)!important}.comms .thread,.comms .qual{grid-column:1/-1;border-top:1px solid var(--line)}}
@media (max-width:860px){.feed-grid{grid-template-columns:minmax(0,1fr)}.feed-grid .row:nth-child(2){border-top:1px solid var(--line)}.segs{grid-template-columns:minmax(0,1fr)}.comms{grid-template-columns:minmax(0,1fr)!important}.hero-canvas{height:340px}}

/* ---------- v5: calendar ---------- */
.cal-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.cal-wrap{overflow-x:auto}
.cal-grid{display:grid;grid-template-columns:52px repeat(7,minmax(110px,1fr));position:relative;min-width:820px}
.cal-day{font:600 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--soft);text-align:center;padding-top:6px}
.cal-day.today{color:var(--accent)}
.cal-h{font:500 10.5px var(--f-mono);color:var(--mute);text-align:right;padding-right:8px;transform:translateY(-7px)}
.cal-cell{border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cal-cell.off{background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(var(--tint),.03) 6px 12px)}
.cal-ev{align-self:start;margin-inline:3px;border-radius:8px;padding:4px 7px;text-align:left;background:color-mix(in srgb,var(--c) 22%,var(--panel2));border:1px solid color-mix(in srgb,var(--c) 55%,transparent);border-left:3px solid var(--c);overflow:hidden;position:relative;z-index:1;display:flex;flex-direction:column;gap:1px}
.cal-ev b{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-ev small{font-size:10px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-ev.block{background:repeating-linear-gradient(135deg,var(--panel2) 0 6px,var(--panel3) 6px 12px);border-color:var(--line2)}
.cal-ev.st-risk{box-shadow:0 0 0 1px var(--err)}
.ev-risk{position:absolute;right:5px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--err);color:#fff;font:700 10px/14px var(--f-mono);text-align:center;font-style:normal}
.cal-now{grid-column:2/-1!important;height:2px;background:var(--err);position:relative;z-index:2;pointer-events:none}
.cal-now::before{content:'';position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--err)}
.book{display:grid;grid-template-columns:240px minmax(0,1fr) 260px;gap:0;padding:0;overflow:hidden}
.book>div{padding:18px;min-width:0}
.book-l{border-right:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.book-r{border-left:1px solid var(--line)}
.bk-ty{width:100%;background:none;border-radius:8px}
.bk-ty.on{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.mcal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:12px;text-align:center;font-size:11px}
.mday{aspect-ratio:1;border-radius:50%;font:600 12.5px var(--f-body);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--text);max-width:100%}
.mday.dis{background:none;color:var(--mute);cursor:default}
.mday.on{background:var(--accent);color:var(--accent-ink)}
.slots{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.slot{padding:8px;border-radius:8px;border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);color:var(--accent);font-weight:600}
.slot.on{background:var(--accent);color:var(--accent-ink)}
/* ---------- v5: pipeline + analytics + tasks ---------- */
.age{font:600 10.5px var(--f-mono);padding:1px 6px;border-radius:5px}
.age.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)}
.age.mid{color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent)}
.age.bad{color:var(--err);background:color-mix(in srgb,var(--err) 14%,transparent)}
.tag{font:500 10px var(--f-mono);padding:1px 6px;border-radius:4px;background:var(--panel3);color:var(--soft)}
.tag.ai{color:var(--ok)}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
details.kpi{cursor:pointer}
details.kpi summary{list-style:none}
details.kpi summary::-webkit-details-marker{display:none}
details.kpi .k{display:flex;justify-content:space-between;align-items:center;font:600 11px var(--f-mono);letter-spacing:.1em;color:var(--soft)}
details.kpi .v{font:600 26px var(--f-display);margin:6px 0 2px;font-variant-numeric:tabular-nums}
details.kpi[open]{border-color:var(--accent)}
.why{font-size:11.5px;color:var(--soft);border-left:2px solid var(--err);padding-left:8px}
.rule .rk{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--panel3);flex:none}
/* ---------- v5: intelligence ---------- */
.honest{border-color:color-mix(in srgb,var(--warn) 45%,transparent);background:color-mix(in srgb,var(--warn) 6%,var(--panel))}
.honest p{margin:6px 0 0;color:var(--soft);font-size:13px;max-width:90ch}
.flowline{display:flex;gap:8px;flex-wrap:wrap}
.fl-step{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid var(--line2);background:var(--panel2);font-size:12.5px;font-weight:600;transition:all .25s}
.fl-step span{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--panel3);font:700 10px var(--f-mono)}
.fl-step.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,var(--panel2));transform:translateY(-2px)}
.tech{display:flex;flex-direction:column}
.row.win{background:color-mix(in srgb,var(--ok) 8%,transparent);border-radius:8px;padding-inline:8px;margin-inline:-8px}
.row.blocked{opacity:.7}
.row.blocked .t{text-decoration:line-through}
.sit-hero{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,var(--panel)),var(--panel))}
.sit-text{font-size:16px;line-height:1.55;margin:4px 0 0;max-width:90ch}
.sit-strip{display:flex;gap:8px;flex-wrap:wrap;margin:-4px 0 14px}
.sit-item{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;border:1px solid var(--line2);background:var(--panel);font-size:12.5px;color:var(--soft)}
.sit-item.more{color:var(--accent)}
.prop{padding:12px 0;border-top:1px solid var(--line)}
.prop:first-child{border-top:0;padding-top:0}
tr.worst td{background:color-mix(in srgb,var(--err) 7%,transparent)}
.flow-cv{width:100%;height:340px;display:block;border-radius:10px;background:var(--bg);border:1px solid var(--line)}
.flow-tip{position:absolute;z-index:5;pointer-events:none;background:var(--panel3);border:1px solid var(--line2);border-radius:10px;padding:8px 10px;width:210px;box-shadow:0 12px 30px rgba(0,0,0,.45);font-size:12.5px}
@media (max-width:1100px){.book{grid-template-columns:minmax(0,1fr)}.book-l,.book-r{border:0;border-top:1px solid var(--line)}}
@media (max-width:860px){.flow-cv{height:280px}}
.fchart{max-width:820px;margin-inline:auto}
.cal-ev.short{flex-direction:row;align-items:center;padding:2px 7px}.cal-ev.short small{display:none}

/* ---------- v8: approvals, billing, portal, licenses, onboarding, audit, research, autopilot, brief, tab bar ---------- */
.row.new{animation:flash 1.2s}
.row.sel{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.av-sys{width:24px;height:24px;border-radius:6px;display:inline-grid;place-items:center;background:var(--panel3);font-size:13px}
.who{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
table.audit td{vertical-align:top}
/* approvals */
.ap-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;align-items:start}
.ap-list{display:flex;flex-direction:column;gap:10px}
.ap-card{position:relative;border-radius:var(--r);transition:opacity .22s,transform .22s,max-height .3s}
.ap-under{position:absolute;inset:0;border-radius:var(--r);display:flex;justify-content:space-between;align-items:center;padding:0 18px;font:700 13px var(--f-mono);opacity:0;transition:opacity .15s}
.ap-under .ok{color:var(--ok)}.ap-under .no{color:var(--err)}
.ap-card.to-ok .ap-under,.ap-card.to-no .ap-under{opacity:1}
.ap-card.to-ok .ap-under{background:color-mix(in srgb,var(--ok) 14%,transparent)}
.ap-card.to-no .ap-under{background:color-mix(in srgb,var(--err) 14%,transparent)}
.ap-face{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:6px;touch-action:pan-y;transition:transform .2s;cursor:grab;user-select:none}
.ap-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px}
.ap-title{font-weight:600;font-size:14px;line-height:1.35}
.ap-detail{font-size:12.5px;color:var(--soft)}
.ap-preview{font-size:13px;line-height:1.5;padding:10px 12px;border-radius:10px;background:var(--panel2);border:1px solid var(--line);white-space:pre-wrap}
.ap-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.ap-card.gone-r{opacity:0;transform:translateX(60px)}
.ap-card.gone-l{opacity:0;transform:translateX(-60px)}
.ap-empty{text-align:center;padding:40px 16px;display:flex;flex-direction:column;gap:6px;align-items:center}
/* billing + proposal document */
.prop-flow{display:grid;grid-template-columns:repeat(5,minmax(170px,1fr));gap:10px;overflow-x:auto}
.pf-col{display:flex;flex-direction:column;gap:8px;min-height:120px;background:color-mix(in srgb,var(--panel) 75%,transparent);border:1px solid var(--line);border-radius:var(--r);padding:8px}
.pf-col .kcard{text-align:left;width:100%}
.modal.wide{width:min(620px,100%)}
.doc{display:flex;flex-direction:column;gap:8px}
.doc-head{display:flex;align-items:center;gap:10px}
.doc-head small{display:block;color:var(--mute)}
.doc-items{margin:6px 0}
.doc-items td{white-space:normal}
.doc-items .tot td{font-weight:700;border-bottom:0;font-size:14px}
.num{text-align:right}
.pay-how{display:grid;gap:6px}.pay-how div{display:flex;flex-direction:column;gap:2px;padding:9px 12px;border-radius:10px;background:var(--panel2);border:1px solid var(--line)}.pay-how b{font-size:12.5px}.pay-how span{font-size:11.5px;color:var(--soft);overflow-wrap:anywhere}
img.receipt{max-width:100%;max-height:180px;border-radius:10px;border:1px solid var(--line);margin-top:8px}
#chatClip{padding:7px 10px}
/* portal */
.portal-wrap{display:grid;grid-template-columns:280px minmax(0,1fr);gap:14px;align-items:start}
.portal-frame{border:1px solid var(--line2);border-radius:14px;overflow:hidden;background:var(--bg);box-shadow:0 20px 50px rgba(0,0,0,.35)}
.pt-bar{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--panel2);border-bottom:1px solid var(--line)}
.pt-dots{display:flex;gap:5px}.pt-dots i{width:9px;height:9px;border-radius:50%;background:var(--panel3)}
.pt-url{font-size:11.5px;color:var(--mute);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-in{display:grid;grid-template-columns:150px minmax(0,1fr);min-height:360px}
.pt-tabs{display:flex;flex-direction:column;gap:2px;padding:10px;border-right:1px solid var(--line)}
.pt-tabs button{text-align:left;padding:7px 10px;border-radius:8px;color:var(--soft);font-weight:500;font-size:12.5px}
.pt-tabs button.on{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--text)}
.pt-body{padding:16px;min-width:0}
.pt-hello{font:700 20px var(--f-display);margin-bottom:12px}
.pt-kpi{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:2px}
.pt-kpi b{font:600 20px var(--f-display)}.pt-kpi span{font-size:11.5px;color:var(--mute)}
.pt-cta{margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--panel);border:1px solid var(--line);font-size:13px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pt-chat{max-height:260px;padding:0 0 10px}
.pt-body .chat-form{padding:10px 0 0}
table.perm td{text-align:center;white-space:normal}table.perm td:first-child{text-align:left}
.plan-card{display:flex;flex-direction:column}
.plan-card.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--panel))}
/* onboarding */
.ob-steps{display:flex;gap:6px;flex-wrap:wrap}
.ob-step{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;border:1px solid var(--line);font-size:12.5px;color:var(--mute)}
.ob-step span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 11px var(--f-mono);background:var(--panel2)}
.ob-step.on{border-color:var(--accent);color:var(--text)}.ob-step.on span{background:var(--accent);color:var(--accent-ink)}
.ob-step.done{color:var(--ok)}.ob-step.done span{background:color-mix(in srgb,var(--ok) 20%,transparent)}
.ob-preview{border:1px solid var(--line2);border-radius:12px;overflow:hidden;background:var(--bg)}
.ob-prev-bar{display:flex;align-items:center;gap:10px;padding:10px 12px;background:color-mix(in srgb,var(--brand) 22%,var(--panel));border-bottom:2px solid var(--brand)}
.ob-prev-bar img{height:28px;max-width:90px;object-fit:contain}
.ob-prev-bar .av{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--brand);color:#111;font:700 11px var(--f-display)}
.ob-prev-body{padding:16px;display:flex;flex-direction:column;gap:10px;align-items:flex-start;color:var(--soft);font-size:13px}
/* research */
.rs-list{display:flex;flex-direction:column;gap:10px}
.rs-card{cursor:pointer;display:flex;flex-direction:column;gap:6px;transition:border-color .2s}
.rs-card:hover{border-color:var(--line2)}
.rs-q{font-size:14.5px;line-height:1.35}
.rs-a{margin:0;color:var(--soft);font-size:13px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rs-card.open .rs-a{-webkit-line-clamp:unset;display:block}
.rs-more{display:none;flex-direction:column;gap:6px}
.rs-card.open{border-color:var(--accent)}.rs-card.open .rs-more{display:flex}
.rs-src{display:flex;flex-wrap:wrap;gap:6px}
.rs-src a{font:500 11.5px var(--f-mono);padding:3px 8px;border-radius:999px;border:1px solid var(--line2);text-decoration:none}
/* brief */
.brief-hero{padding:22px;border-radius:var(--r);border:1px solid var(--line);background:radial-gradient(600px 240px at 90% 0%,color-mix(in srgb,var(--bronze) 22%,transparent),transparent 70%),var(--panel);display:flex;flex-direction:column;gap:10px}
.brief-hero h1{font:700 30px/1.1 var(--f-display);letter-spacing:.03em;margin:0}
.brief-hero p{margin:0;color:var(--soft);font-size:15px;max-width:60ch}
/* mobile tab bar */
.tabbar{display:none}
@media (max-width:860px){
  .ap-grid,.portal-wrap{grid-template-columns:minmax(0,1fr)}
  .pt-in{grid-template-columns:minmax(0,1fr)}
  .pt-tabs{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}
  .pt-tabs button{white-space:nowrap}
  .prop-flow{grid-template-columns:repeat(5,minmax(160px,1fr))}
  .brief-hero h1{font-size:24px}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
  .tabbar button{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 0;color:var(--mute);font-size:10.5px;font-weight:600}
  .tabbar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .tabbar button.on{color:var(--accent)}
  .tb-badge{position:absolute;top:0;left:calc(50% + 6px);min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--err);color:#fff;font:700 10px/16px var(--f-mono);font-style:normal}
  .view{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .toasts{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
}

/* ---------- layout fixes (overlap scan, v8.2) ---------- */
#panelBody>:first-child{padding-right:40px}            /* close ✕ never sits on the header (e.g. the lead score ring) */
.crumb{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}   /* long page names stop before Search */
.pf-col .chip{white-space:normal;text-align:center;justify-content:center}

/* ---------- touch + phone comfort (v8.3) ---------- */
@supports (height:100dvh){.app{height:100dvh}}
@media (pointer:coarse){
  .btn{min-height:40px}.btn.sm{min-height:34px;padding:6px 11px}
  .filter-chip{min-height:32px}.icon-btn{width:40px;height:40px}
  .nav-item{padding:10px 10px}.nav-label{padding:10px 10px 6px}
  .nav-item:hover{transform:none}.layer:hover{transform:none}
  .row.click,.kcard,.mail{-webkit-tap-highlight-color:transparent}
}
@media (max-width:860px){
  input,select,textarea,.input,.chat-form input{font-size:16px}
  .modal{max-height:calc(100dvh - 24px)}
  .modal-wrap{padding:12px 12px calc(12px + env(safe-area-inset-bottom,0px));align-items:flex-end}
  .palette-wrap{padding:10px 12px}
  .panel-drawer{padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
  .drawer{padding-bottom:env(safe-area-inset-bottom,0px)}
}
@media (max-width:860px){
  .card h3{flex-wrap:wrap;row-gap:8px}.card h3 .right{max-width:100%}
  #bInv .row{flex-wrap:wrap}#bInv .row .grow{flex:1 1 calc(100% - 44px)}#bInv .row>b{margin-left:40px}
}

.demo-tag{font:700 8.5px var(--f-mono);letter-spacing:.14em;font-style:normal;color:var(--accent-ink);background:var(--accent);padding:1px 5px;border-radius:4px;vertical-align:2px;margin-left:4px}
.sync-box{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}

/* ---------- v9: studio, goals, reports ---------- */
.studio-board{grid-auto-columns:minmax(210px,1fr)}
.studio-board .kcard .meta span{white-space:nowrap}
.piece-title{font:700 18px var(--f-display);letter-spacing:.03em;width:100%}
.modal .tabs{align-self:flex-start}.modal .tabs button{padding:6px 12px;border-radius:8px;color:var(--soft);font-weight:600;font-size:12.5px}.modal .tabs button.on{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--text)}
.goal-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.goal{display:flex;flex-direction:column;gap:8px}
.goal-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.goal-num{display:flex;align-items:baseline;gap:2px}.goal-num .v{font:600 28px var(--f-display)}
.goal-in{width:90px;background:transparent;border:0;border-bottom:1px dashed var(--line2);color:var(--soft);font:500 16px var(--f-mono);padding:2px 4px}
.goal-in:focus{outline:none;border-bottom-color:var(--accent);color:var(--text)}
.goal-bar{position:relative;height:8px;border-radius:6px;background:var(--panel3)}.goal-bar i{display:block;height:100%;border-radius:6px;transition:width .6s}
.goal-bar em{position:absolute;top:-4px;width:2px;height:16px;background:var(--text);opacity:.7;border-radius:2px}
.goal-lever{font-size:12.5px;color:var(--text);background:color-mix(in srgb,var(--warn) 10%,transparent);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);border-radius:8px;padding:8px 10px}

/* ---------- v9: voice + guided tour ---------- */
#chatMic{padding:7px 10px}#chatMic.rec{background:var(--err);color:#fff;border-color:transparent;animation:blink 1s steps(2) infinite}
.tour-spot{position:fixed;z-index:60;border-radius:12px;box-shadow:0 0 0 9999px rgba(0,0,0,.55),0 0 0 2px var(--accent),0 0 30px color-mix(in srgb,var(--accent) 50%,transparent);pointer-events:none;transition:left .3s,top .3s,width .3s,height .3s}
.tour-spot.none{display:none}
.tour-lang{display:inline-flex;border:1px solid var(--line2);border-radius:var(--r-sm);overflow:hidden;height:32px}.tour-lang b{display:grid;place-items:center;padding:0 9px;font:600 11px var(--f-mono);color:var(--mute)}.tour-lang b.on{background:var(--accent);color:var(--accent-ink)}
.tour{position:fixed;z-index:61;left:0;right:0;margin:0 auto;bottom:22px;width:min(560px,calc(100% - 24px));background:var(--panel);border:1px solid var(--line2);border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.6);padding:14px 16px;display:flex;flex-direction:column;gap:10px;animation:rise .4s both}
.tour-bars{display:flex;gap:3px}.tour-bars i{flex:1;height:3px;border-radius:2px;background:var(--panel3);overflow:hidden}.tour-bars i em{display:block;height:100%;width:0;background:var(--accent);transition:width .1s linear}.tour-bars i.done em{width:100%}
.tour-step{font-size:10.5px;color:var(--accent);letter-spacing:.14em}.tour-t{font:700 17px var(--f-display);letter-spacing:.03em;display:block;margin:2px 0}.tour-d{margin:0;color:var(--soft);font-size:13.5px;line-height:1.55}
.tour-ctrl{display:flex;gap:6px;justify-content:center}
.tour-card{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
body.touring .tabbar{display:none!important}
@media (max-width:860px){.tour{bottom:calc(10px + env(safe-area-inset-bottom,0px))}}
.nav-item.tour-hit{background:color-mix(in srgb,var(--accent) 18%,transparent);border-color:var(--accent);color:var(--text)}
@media (display-mode:standalone){.top{padding-top:calc(10px + env(safe-area-inset-top,0px))}}
.tour.left{left:24px;right:auto;margin:0;width:min(520px,calc(100% - 470px))}