/* Soul — black & gold command centre */
:root {
  --bg: #0c0d10; --bg-2: #101217; --panel: #14161c; --panel-2: #1b1e26; --line: #262a35; --line-2: #333847;
  --text: #eef0f4; --text-2: #a9b0be; --muted: #737b8c;
  --gold: #c98500; --gold-2: #e0b34a; --gold-soft: rgba(201,133,0,.16);
  --blue: #3987e5; --green: #199e70; --red: #e66767; --amber: #eda100;
  --series-1: var(--gold); --series-2: var(--blue); --series-3: var(--green);
  /* marketplace identity colours (validated on the dark surface) */
  --mk-catawiki: #22b8c2; --mk-ebay: #3987e5; --mk-etsy: #ee7b3a; --mk-shopify: #199e70; --mk-amazon: #eda100;
  /* cost-structure colours */
  --c-cost: #3987e5; --c-postage: #22b8c2; --c-fees: #eda100; --c-refunds: #e66767; --c-ads: #9d7be8; --c-profit: #199e70;
  --radius: 16px; --radius-s: 10px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv11", "ss01";
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
body { position: relative; min-height: 100vh; }
.bg-glow { position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(900px 500px at 15% -10%, rgba(201,133,0,.18), transparent 60%),
              radial-gradient(700px 400px at 100% 0%, rgba(57,135,229,.10), transparent 60%); }
a { color: var(--gold-2); text-decoration: none; }
h1, h2, h3 { margin: 0; }
h2 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.pip { display: inline-block; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 10px currentColor; }
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: -6px; padding: 0 2px; }
.tabs.seg { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; }
.tabs.seg button.active { background: var(--gold); color: #1a1200; border-color: transparent; }
.up { color: #7fd6ad } .down { color: var(--red) }
.muted { color: var(--muted); } .small { font-size: 12px; } .error { color: var(--red); }
button { background: var(--gold); color: #1a1200; border: 0; border-radius: 10px; padding: 9px 14px; font-weight: 700; cursor: pointer; font: inherit; font-weight: 700; transition: transform .08s ease, filter .15s; }
button:hover { filter: brightness(1.08); } button:active { transform: translateY(1px); }
button.ghost { background: transparent; border: 1px solid var(--line-2); color: var(--text-2); font-weight: 600; }
button.ghost:hover { color: var(--text); border-color: var(--gold); }
button.small { padding: 5px 11px; font-size: 12px; border-radius: 8px; }
button.red { background: #a32e2e; color: #fff; } button.green { background: #1d7a54; color: #fff; }
button:disabled { opacity: .5; cursor: default; }
input, textarea, select { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 10px 12px; font: inherit; width: 100%; }
input:focus, select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
input[type=checkbox] { width: auto; accent-color: var(--gold); }

/* ---------- login ---------- */
.login-body { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.login-card { width: 100%; max-width: 380px; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 36px; text-align: center; box-shadow: var(--shadow); position: relative; z-index: 1; }
.login-card h1 { letter-spacing: .34em; font-weight: 800; font-size: 26px; margin-top: 10px; }
.login-card label { display: block; text-align: left; margin: 14px 0 0; font-size: 12px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.login-card input { margin-top: 6px; } .login-card button { width: 100%; margin-top: 22px; }
.orb { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto; position: relative;
  background: radial-gradient(circle at 32% 30%, #ffe6a3 0%, #e0b34a 28%, #8a5a00 62%, #1a1200 100%);
  box-shadow: 0 0 40px rgba(224,179,74,.45), inset 0 0 18px rgba(0,0,0,.35); }
.orb::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(224,179,74,.35); animation: ring 3.5s linear infinite; }
@keyframes ring { 0% { transform: scale(.9); opacity: .9 } 100% { transform: scale(1.35); opacity: 0 } }
.orb.speaking { animation: pulse .9s ease-in-out infinite; }
.orb.listening { background: radial-gradient(circle at 32% 30%, #c9f5d8 0%, #4fd08f 30%, #0f5a3a 65%, #041a10 100%); box-shadow: 0 0 40px rgba(79,208,143,.5); animation: pulse .7s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.12) } }

/* ---------- top bar ---------- */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 10px 22px;
  background: rgba(12,13,16,.78); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.top .orb { width: 30px; height: 30px; margin: 0; } .top .orb::after { inset: -4px; }
.brand { display: flex; flex-direction: column; line-height: 1.05; }
.brand span { font-weight: 800; letter-spacing: .32em; font-size: 15px; }
.brand small { color: var(--muted); font-size: 11px; letter-spacing: .02em; }
.topnav { display: flex; gap: 4px; margin-left: 18px; }
.topnav a { color: var(--text-2); font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 8px; }
.topnav a:hover, .topnav a.active { color: var(--text); background: var(--panel-2); }
.top .spacer { flex: 1; }
.pill { font-size: 12px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-2); white-space: nowrap; }
.pill.ok { color: #7fd6ad; border-color: rgba(25,158,112,.5); } .pill.warn { color: var(--amber); border-color: rgba(237,161,0,.5); }

/* ---------- layout ---------- */
.page { position: relative; z-index: 1; max-width: 1480px; margin: 0 auto; padding: 22px 22px 40px; display: flex; flex-direction: column; gap: 18px; }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.card { background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)) , var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; min-width: 0; box-shadow: var(--shadow); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.count { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--panel-2); color: var(--text-2); }
.count.red { background: rgba(230,103,103,.18); color: var(--red); } .count.amber { background: rgba(237,161,0,.18); color: var(--amber); }
.span-4 { grid-column: span 4 } .span-5 { grid-column: span 5 } .span-7 { grid-column: span 7 } .span-12 { grid-column: span 12 }
@media (max-width: 1100px) { .span-4, .span-5, .span-7 { grid-column: span 12 } .topnav { display: none } .page { padding: 14px } }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: 5fr 7fr; gap: 16px; background: linear-gradient(135deg, rgba(201,133,0,.14), rgba(20,22,28,.6) 55%), var(--panel); border: 1px solid rgba(201,133,0,.35); border-radius: 22px; padding: 26px; box-shadow: var(--shadow), 0 0 80px rgba(201,133,0,.08); }
@media (max-width: 1100px) { .hero { grid-template-columns: 1fr } }
.eyebrow { color: var(--gold-2); font-weight: 700; font-size: 22px; letter-spacing: .02em; margin-bottom: 10px; }
.hero-number { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.hero-number span:first-child { font-size: 56px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hero-label { color: var(--text-2); font-size: 14px; }
.hero-sub { color: var(--text-2); margin-top: 8px; font-size: 14px; line-height: 1.5; max-width: 52ch; }
.hero-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.chip { font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text-2); display: inline-flex; gap: 6px; align-items: center; }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; margin: 0; }
.chip.red { border-color: rgba(230,103,103,.45); } .chip.amber { border-color: rgba(237,161,0,.45); } .chip.green { border-color: rgba(25,158,112,.45); }
.chart-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--text-2); }
.legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.chart { width: 100%; min-height: 160px; position: relative; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart text { fill: var(--muted); font-size: 11px; font-family: inherit; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .hit { fill: transparent; }
.tooltip { position: fixed; z-index: 50; background: #0a0b0e; border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 11px; font-size: 12px; color: var(--text); pointer-events: none; box-shadow: var(--shadow); white-space: nowrap; }
.tooltip b { color: var(--gold-2); }

/* ---------- KPI row ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; position: relative; overflow: hidden; }
.stat .label { font-size: 12px; color: var(--muted); }
.stat .value { font-size: 24px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.stat .delta { font-size: 12px; margin-top: 4px; color: var(--muted); }
.stat .delta.up { color: #7fd6ad } .stat .delta.down { color: var(--red) }
.stat .spark { position: absolute; right: 12px; top: 12px; width: 72px; height: 24px; opacity: .75; }
.stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent, var(--line-2)); opacity: .9; }
.stat.c-rev { --accent: var(--gold) } .stat.c-orders { --accent: var(--blue) } .stat.c-profit { --accent: var(--green) }
.stat.c-fees { --accent: var(--c-fees) } .stat.c-refunds { --accent: var(--c-refunds) } .stat.c-dispatch { --accent: var(--c-postage) }
.stat.warn { border-color: rgba(237,161,0,.5) } .stat.warn .value { color: var(--amber) }
.stat.bad { border-color: rgba(230,103,103,.5) } .stat.bad .value { color: var(--red) }

/* ---------- marketplaces ---------- */
.mkts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.mkt { background: var(--panel-2); border-radius: 12px; padding: 14px; border: 1px solid var(--line); position: relative; overflow: hidden; --mk: var(--gold); }
.mkt::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--mk); opacity: .9; }
.mkt.planned::before { opacity: .25 }
.mkt .mk-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--mk); box-shadow: 0 0 10px var(--mk); margin-right: 8px; vertical-align: middle; }
.mkt.error { border-color: rgba(230,103,103,.5) }
.mkt .big small { font-size: 11px; color: var(--muted); font-weight: 500; margin-left: 8px; letter-spacing: .06em; text-transform: uppercase; }
.mkt .name { font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.mkt .st { font-size: 11px; font-weight: 600; color: var(--muted); padding: 2px 8px; border-radius: 999px; background: var(--panel); white-space: nowrap }
.mkt.mock .st, .mkt.connected .st { color: #7fd6ad }
.mkt .big { font-size: 22px; font-weight: 700; margin-top: 10px; font-variant-numeric: tabular-nums; }
.mkt .row { font-size: 12px; color: var(--muted); margin-top: 3px; display: flex; justify-content: space-between; }
.mkt .row b { color: var(--text-2); font-weight: 600; }
.mkt .share { height: 4px; border-radius: 2px; background: var(--line); margin-top: 10px; overflow: hidden; }
.mkt .share i { display: block; height: 100%; background: var(--mk); }
.mkt.planned { opacity: .6; }
.badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.badge { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
.badge.red { background: rgba(230,103,103,.16); color: var(--red) } .badge.amber { background: rgba(237,161,0,.16); color: var(--amber) }
.badge.green { background: rgba(25,158,112,.18); color: #7fd6ad } .badge.grey { background: rgba(255,255,255,.06); color: var(--muted) }
.badge.gold { background: var(--gold-soft); color: var(--gold-2) }

/* ---------- lists ---------- */
.list { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow: auto; padding-right: 2px; }
.list::-webkit-scrollbar { width: 6px } .list::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px }
.item { background: var(--panel-2); border-radius: 12px; padding: 11px 13px; font-size: 13px; display: flex; gap: 10px; align-items: flex-start; border: 1px solid transparent; transition: border-color .15s; }
.item:hover { border-color: var(--line-2) }
.item .body { flex: 1; min-width: 0 } .item .title { font-weight: 600; line-height: 1.35 }
.item .meta { color: var(--muted); font-size: 12px; margin-top: 3px }
.item .actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end }
.dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; box-shadow: 0 0 10px currentColor }
.dot.red { background: var(--red); color: var(--red) } .dot.amber { background: var(--amber); color: var(--amber) } .dot.green { background: var(--green); color: var(--green) }
.approval { border-color: rgba(201,133,0,.35); background: linear-gradient(180deg, rgba(201,133,0,.08), transparent), var(--panel-2) }
.approval .kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin-top: 6px; font-size: 12px }
.approval .kv span:nth-child(odd) { color: var(--muted) }
.empty { color: var(--muted); font-size: 13px; padding: 10px 0 }
.tabs { display: flex; gap: 4px; flex-wrap: wrap }
.tabs button { background: transparent; border: 1px solid transparent; color: var(--muted); padding: 4px 10px; font-size: 12px; font-weight: 600; border-radius: 8px }
.tabs button.active { color: var(--text); background: var(--panel-2); border-color: var(--line-2) }
.team-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px }
.team-strip .stat { padding: 10px 12px } .team-strip .value { font-size: 20px }
.task-form { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 6px; margin-top: 10px }
.roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin-bottom: 12px }
.member { display: flex; gap: 10px; align-items: flex-start; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 13px }
.member .avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #0b0c10; background: var(--mk, var(--gold)); box-shadow: 0 0 12px var(--mk, var(--gold)); flex-shrink: 0 }
.member .title { font-weight: 600 } .member .meta { color: var(--muted); font-size: 12px; margin-top: 2px } .member .badges { margin-top: 6px }
.member-add { margin-top: 10px; font-size: 13px } .member-add summary { cursor: pointer; color: var(--text-2); font-weight: 600 }
.member-form { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-top: 10px; align-items: center }
.member-form label { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--text-2) }
.member-form button { grid-column: 1 / -1; justify-self: start }
@media (max-width: 700px) { .member-form { grid-template-columns: 1fr } }
@media (max-width: 700px) { .task-form { grid-template-columns: 1fr } .team-strip { grid-template-columns: repeat(2, 1fr) } }

/* ---------- chat ---------- */
.chat-card { display: flex; flex-direction: column }
.chat { display: flex; flex-direction: column; flex: 1; min-height: 420px }
.chat .log { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; min-height: 200px; max-height: 360px }
.msg { max-width: 92%; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5; white-space: pre-wrap }
.msg.user { align-self: flex-end; background: var(--gold); color: #1a1200; border-bottom-right-radius: 4px; font-weight: 500 }
.msg.soul { align-self: flex-start; background: var(--panel-2); border-bottom-left-radius: 4px; border: 1px solid var(--line) }
.msg .tools { display: block; margin-top: 6px; font-size: 11px; color: var(--muted) }
.msg .tools span { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 6px; background: rgba(255,255,255,.05) }
.chat form { display: flex; gap: 8px; margin-top: 10px; align-items: center }
.chat form input { flex: 1 }
.mic { width: 42px; height: 42px; border-radius: 50%; padding: 0; background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text-2); flex-shrink: 0; display: grid; place-items: center }
.mic.on { background: #1d7a54; border-color: #4fd08f; color: #fff; animation: pulse .8s infinite }
.suggest { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px }
.suggest button { background: transparent; border: 1px solid var(--line); color: var(--text-2); font-size: 12px; padding: 5px 10px; font-weight: 500; border-radius: 999px }
.suggest button:hover { border-color: var(--gold); color: var(--text) }
.voicebar { display: flex; gap: 12px; align-items: center; font-size: 12px; color: var(--muted); margin-top: 10px; flex-wrap: wrap }
.voicebar label { display: flex; gap: 6px; align-items: center }
.voicebar select { width: auto; padding: 4px 8px; font-size: 12px }
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: #0a0b0e; border: 1px solid var(--gold); padding: 10px 16px; border-radius: 12px; font-size: 13px; z-index: 60; box-shadow: var(--shadow); max-width: 90vw }

/* ---------- misc ---------- */
pre.report { white-space: pre-wrap; font-size: 12.5px; background: var(--panel-2); padding: 14px; border-radius: 12px; max-height: 420px; overflow: auto; margin: 10px 0 0; font-family: "SF Mono", Menlo, Consolas, monospace; line-height: 1.5 }
table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 10px }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top }
th { color: var(--muted); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 11px }
code { font-size: 11px; color: var(--muted); word-break: break-all; font-family: "SF Mono", Menlo, Consolas, monospace }
.foot { text-align: center; color: var(--muted); font-size: 12px; padding: 10px }
.bar-row { display: grid; grid-template-columns: 150px 1fr 70px; gap: 10px; align-items: center; font-size: 12px; margin: 7px 0 }
.bar-row .name { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.bar-row .track { height: 10px; background: var(--line); border-radius: 0 4px 4px 0; overflow: hidden; position: relative }
.bar-row .track i { display: block; height: 100%; background: var(--green); border-radius: 0 4px 4px 0 }
.bar-row .track i.neg { background: var(--red) }
.bar-row .val { text-align: right; font-variant-numeric: tabular-nums; color: var(--text) }

/* ---------- Soul core ---------- */
.core { position: relative; border-radius: 24px; border: 1px solid rgba(201,133,0,.35); overflow: hidden; min-height: 420px;
  background: radial-gradient(1200px 600px at 50% 120%, rgba(201,133,0,.12), transparent 60%), linear-gradient(180deg, #0f1116, #0a0b0e);
  box-shadow: var(--shadow), 0 0 120px rgba(201,133,0,.10), inset 0 0 0 1px rgba(255,255,255,.02); }
.core::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 42px 42px;
  mask-image: radial-gradient(circle at 50% 50%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 20%, transparent 75%); }
.core::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.09) 0 2px, transparent 2px 4px); opacity: .35; }
#core-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; pointer-events: none; }
.core-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 4fr 4fr 5fr; gap: 20px; padding: 28px; align-items: center; }
@media (max-width: 1100px) { .core-grid { grid-template-columns: 1fr } .core-centre { order: -1; min-height: 360px } }
.core-centre { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 400px; }
.core-status { font-size: 26px; letter-spacing: .42em; padding-left: .42em; font-weight: 800; margin-bottom: auto; margin-top: -10px; text-align: center;
  background: linear-gradient(180deg, #ffffff 0%, #fff1c4 40%, #e0b34a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px rgba(224,179,74,.55)) drop-shadow(0 0 30px rgba(224,179,74,.25)); }
.core-status::after { content: ""; display: block; width: 8px; height: 8px; border-radius: 50%; background: #7fd6ad; box-shadow: 0 0 12px #3fb950; margin: 8px auto 0; animation: blink 2s ease-in-out infinite; }
.core-status.speaking::after { background: var(--gold-2); box-shadow: 0 0 12px var(--gold-2); }
@media (max-width: 1100px) { .core-status { font-size: 18px } }
.core-status.speaking { animation: blink 1s ease-in-out infinite }
@keyframes blink { 50% { opacity: .45 } }
.gold-text { background: linear-gradient(180deg, #fff1c4 0%, #e0b34a 45%, #b87400 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 18px rgba(224,179,74,.25)); }
.hero-number span:first-child { font-size: 60px; }
.hero-label { color: var(--text-2); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin-top: -2px }
.gauges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; max-width: 440px; margin-top: 12px; }
.gauge { text-align: center; }
.gauge svg { width: 100%; max-width: 92px; display: block; margin: 0 auto; }
.gauge .g-val { font-size: 15px; font-weight: 700; fill: var(--text); font-family: inherit }
.gauge .g-name { font-size: 11px; color: var(--text-2); font-weight: 600; letter-spacing: .04em; margin-top: 2px }
.gauge .g-sub { font-size: 10px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.gauge .track { stroke: rgba(255,255,255,.08) } .gauge .arc { stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1) }
.gauge.good .arc { stroke: var(--green); filter: drop-shadow(0 0 6px rgba(25,158,112,.6)) }
.gauge.warn .arc { stroke: var(--amber); filter: drop-shadow(0 0 6px rgba(237,161,0,.6)) }
.gauge.bad .arc { stroke: var(--red); filter: drop-shadow(0 0 6px rgba(230,103,103,.6)) }
.constellation { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.node { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--line); font-size: 12px; color: var(--text-2) }
.node { --mk: var(--gold) } .node i { width: 12px; height: 12px; border-radius: 50%; background: var(--mk); box-shadow: 0 0 10px var(--mk); display: inline-block }
.node.planned { opacity: .45 } .node.planned i { background: var(--line-2); box-shadow: none }
.node b { color: var(--text) }
.ticker-wrap { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 8px 0; margin-top: -6px; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent) }
.ticker { display: flex; gap: 34px; white-space: nowrap; width: max-content; animation: ticker 55s linear infinite; font-size: 12px; color: var(--text-2) }
.ticker:hover { animation-play-state: paused } .ticker[hidden] { display: none }
.ticker span b { color: var(--text) } .ticker .up { color: #7fd6ad } .ticker .down { color: var(--red) }
.ticker .mk { color: var(--gold-2); font-weight: 700; letter-spacing: .06em; font-size: 10px; margin-right: 6px }
@keyframes ticker { from { transform: translateX(0) } to { transform: translateX(-50%) } }
.stat .value, #hero-value { transition: none }

/* ---------- galaxy mode ---------- */
body.galaxy-mode { background: #05060a; }
.core.galaxy { min-height: calc(100vh - 80px); background: transparent; border: 0; box-shadow: none; display: flex; align-items: center; }
.core.galaxy::before { opacity: .14; } .core.galaxy::after { opacity: .08; }
.core.galaxy .core-grid { width: 100%; }
.core.galaxy .core-centre { min-height: 460px; }
.scroll-hint { margin-top: 26px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); animation: hint 2.4s ease-in-out infinite; }
@keyframes hint { 50% { transform: translateY(4px); opacity: .5 } }
body.galaxy-mode .card, body.galaxy-mode .stat, body.galaxy-mode .ticker-wrap, body.galaxy-mode .top { background: rgba(14,16,22,.66); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
body.galaxy-mode .top { background: rgba(6,7,10,.6); }
body.galaxy-mode .mkt, body.galaxy-mode .item, body.galaxy-mode .msg.soul, body.galaxy-mode .team-strip .stat { background: rgba(255,255,255,.04); }
body.galaxy-mode .core-left, body.galaxy-mode .core-right { background: rgba(10,11,15,.42); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.05); border-radius: 18px; padding: 22px; }

/* ---------- by business ---------- */
.span-6 { grid-column: span 6 } @media (max-width: 1100px) { .span-6 { grid-column: span 12 } }
.biz { border-top: 3px solid var(--mk); }
.biz-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.biz-kpis > div { background: var(--panel-2); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.biz-kpis .label { font-size: 11px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase }
.biz-kpis b { font-size: 18px; font-variant-numeric: tabular-nums } .biz-kpis small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.biz-kpis > div.warn b { color: var(--amber) } .biz-kpis > div.bad b { color: var(--red) }
@media (max-width: 900px) { .biz-kpis { grid-template-columns: repeat(2, 1fr) } }
body.galaxy-mode .biz-kpis > div { background: rgba(255,255,255,.04) }

/* ---------- phone ---------- */
@media (max-width: 700px) {
  .top { padding: 8px 12px; gap: 8px; flex-wrap: wrap } .top .brand small { display: none } #clock, #claude-pill { display: none }
  .page { padding: 12px 12px 90px } .core.galaxy { min-height: auto } .core-grid { padding: 14px; gap: 12px }
  .hero-number span:first-child { font-size: 42px } .core-status { font-size: 16px; letter-spacing: .3em }
  .core.galaxy .core-centre { min-height: 300px } .gauges { grid-template-columns: repeat(4, 1fr); gap: 4px }
  .kpis { grid-template-columns: repeat(2, 1fr) } .stat .value { font-size: 20px } .stat .spark { display: none }
  .mkts { grid-template-columns: 1fr } .chat { min-height: 320px } .chat .log { max-height: 240px }
  .suggest { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px } .suggest button { white-space: nowrap }
  .ticker-wrap { display: none } .scroll-hint { display: none } .bar-row { grid-template-columns: 90px 1fr 64px }
  .biz-kpis { grid-template-columns: repeat(2, 1fr) } .list { max-height: 320px }
}

/* ---------- growth ---------- */
.tgt { margin-bottom: 12px } .tgt .row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px } .tgt .row b { font-variant-numeric: tabular-nums }
.tgt .track { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden } .tgt .track i { display: block; height: 100%; border-radius: 4px; background: var(--green); transition: width .8s cubic-bezier(.2,.8,.2,1) }
.tgt .track i.off { background: var(--amber) } .tgt .small { margin-top: 4px }

/* ---------- imports drop zone / cash / help ---------- */
.dropzone { display: flex; flex-direction: column; gap: 3px; margin-top: 12px; padding: 14px 16px; border: 1px dashed var(--line-2); border-radius: 12px; cursor: pointer; color: var(--text-2); font-size: 13px; transition: border-color .15s, background .15s }
.dropzone span { font-size: 12px; color: var(--muted) } .dropzone:hover, .dropzone.over { border-color: var(--gold); background: var(--gold-soft) } .dropzone.busy { opacity: .6; pointer-events: none }
.biz-tag { display: inline-block; margin-left: 8px; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
.cash-grid { display: grid; grid-template-columns: 1fr 240px; gap: 16px; align-items: start } @media (max-width: 900px) { .cash-grid { grid-template-columns: 1fr } }
.cashchart { width: 100%; height: 150px; display: block } .cash-axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted) } .cash-axis span { flex: 1; text-align: center }
.help h3 { font-size: 13px; margin: 14px 0 4px; color: var(--gold-2) } .help p { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.55 }

/* ---------- orbital map · radar · cinema ---------- */
.orbit-hits { position: fixed; inset: 0; pointer-events: none; z-index: 1 }
.orbit-hit { position: absolute; left: 0; top: 0; margin: -1px; padding: 0; border-radius: 50%; background: transparent; border: 0; pointer-events: auto; cursor: pointer; translate: -50% -50%; }
.orbit-hit:hover { box-shadow: 0 0 0 2px rgba(255,255,255,.25) }
.radar-wrap { display: flex; align-items: center; gap: 14px; margin-top: 8px; flex-wrap: wrap }
.radar { width: 170px; height: 170px; flex-shrink: 0 } .radar svg { width: 100%; height: 100%; overflow: visible }
.radar-wrap .constellation { margin-top: 0; flex: 1; min-width: 160px }
.radar-label { fill: var(--text-2); font-size: 10.5px; font-weight: 600; letter-spacing: .04em; font-family: inherit }
.radar-poly { filter: drop-shadow(0 0 10px rgba(224,179,74,.45)); transition: points .8s }
.gauges { max-width: 400px; margin-top: auto } .gauge svg { max-width: 62px } .gauge .g-val { font-size: 12px } .gauge .g-sub { display: none }
.core.galaxy .core-centre { min-height: 520px; justify-content: space-between }
.cinema-bar[hidden] { display: none }
.biz.flash { box-shadow: 0 0 0 2px var(--mk), 0 0 40px var(--mk); transition: box-shadow .3s }
/* KPI tiles: light sweep + glow */
.stat { transition: transform .2s, box-shadow .2s } .stat:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(0,0,0,.45), 0 0 0 1px var(--accent, var(--line-2)) }
.stat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.06) 50%, transparent 70%); transform: translateX(-100%); animation: sweep 7s ease-in-out infinite; pointer-events: none }
@keyframes sweep { 0%, 70% { transform: translateX(-100%) } 85%, 100% { transform: translateX(100%) } }
.mkt { transition: transform .2s } .mkt:hover { transform: translateY(-2px) }
/* cinema mode: full-screen command deck */
body.cinema .top, body.cinema .ticker-wrap, body.cinema .kpis, body.cinema .section-head, body.cinema .grid, body.cinema .foot { display: none !important }
body.cinema .page { padding: 0 } body.cinema .core.galaxy { min-height: 100vh; height: 100vh }
body.cinema .core-grid { grid-template-columns: 1fr; padding: 34px 6vw 120px; height: 100vh; align-content: space-between }
body.cinema .core-left, body.cinema .core-right { background: transparent; border: 0; backdrop-filter: none; padding: 0 }
body.cinema .core-left { order: 2; max-width: 520px } body.cinema .core-right { display: none } body.cinema .core-centre { order: 1; min-height: 56vh; justify-content: flex-start }
body.cinema .core-status { font-size: 40px; margin-top: 0 } body.cinema .hero-number span:first-child { font-size: 76px } body.cinema .gauges { display: none } body.cinema .scroll-hint { display: none } body.cinema .core-centre { min-height: 50vh }
.cinema-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: rgba(6,7,10,.7); backdrop-filter: blur(12px); border-top: 1px solid var(--line) }
.cinema-ticker { flex: 1; overflow: hidden; white-space: nowrap; display: flex; gap: 34px; width: max-content; animation: ticker 55s linear infinite; font-size: 13px; color: var(--text-2) }
.cinema-ticker span b { color: var(--text) } .cinema-ticker .mk { font-weight: 700; letter-spacing: .06em; font-size: 10px; margin-right: 6px } .cinema-ticker .up { color: #7fd6ad } .cinema-ticker .down { color: var(--red) }

/* ---------- Soul presence: boot, thoughts, mood ---------- */
.boot { position: fixed; inset: 0; z-index: 100; background: #04050a; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity 1.2s ease; cursor: pointer }
.boot.on { opacity: 1; pointer-events: auto } .boot.out { opacity: 0; pointer-events: none }
#boot-canvas { position: absolute; inset: 0; width: 100%; height: 100% }
.boot-inner { position: relative; text-align: center; padding: 0 24px }
.boot-word { display: flex; justify-content: center; gap: .32em; font-size: clamp(64px, 12vw, 168px); font-weight: 900; line-height: 1 }
.boot-word span { opacity: 0; transform: translateY(18px) scale(.94); filter: blur(10px); background: linear-gradient(180deg, #fff 0%, #fff1c4 40%, #e0b34a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; transition: opacity 1.1s cubic-bezier(.2,.8,.2,1), transform 1.1s cubic-bezier(.2,.8,.2,1), filter 1.1s }
.boot-word span.lit { opacity: 1; transform: none; filter: blur(0) drop-shadow(0 0 30px rgba(224,179,74,.55)) }
.boot-rule { width: 0; height: 1px; margin: 26px auto 22px; background: linear-gradient(90deg, transparent, var(--gold-2), transparent); transition: width 1.4s cubic-bezier(.2,.8,.2,1) } .boot-rule.draw { width: min(520px, 70vw) }
.boot-lines { min-height: 88px; width: min(90vw, 760px); margin: 0 auto; font-size: 13px; letter-spacing: .34em; text-transform: uppercase; color: var(--muted) }
.boot-line { opacity: 0; transition: opacity .4s; margin: 6px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .boot-line.show { opacity: 1 } .boot-line::after { content: "_"; color: var(--gold-2); animation: blink .9s steps(2) infinite } .boot-line:not(:last-child)::after { content: "" }
.boot-greet { margin-top: 26px; opacity: 0; transform: translateY(10px); transition: opacity 1.4s ease, transform 1.4s ease } .boot-greet.show { opacity: 1; transform: none }
.boot-greet .g1 { font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 500; font-size: clamp(30px, 4.6vw, 58px); color: #f7ecd2; letter-spacing: .01em }
.boot-greet .g2 { margin-top: 8px; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(18px, 2.2vw, 26px); color: var(--text-2) }
.boot-greet .g3 { margin-top: 22px; font-size: 12px; letter-spacing: .5em; text-transform: uppercase; color: var(--gold-2); animation: blink 2s ease-in-out infinite }
.boot-skip { position: absolute; left: 0; right: 0; bottom: -18vh; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: rgba(115,123,140,.6) }
.core-head { margin-bottom: auto; margin-top: -10px; width: 100%; text-align: center }
.core-head .core-status { margin: 0; font-size: 28px; letter-spacing: .48em; padding-left: .48em; font-weight: 900; white-space: nowrap }
@media (max-width: 1250px) { .core-head .core-status { font-size: 22px } }
.thoughts { min-height: 44px; max-width: 460px; margin: 10px auto 0; text-align: center; font-size: 14px; line-height: 1.5; color: var(--text-2); font-style: italic }
.thoughts .txt { color: #f3e6c4 } .thoughts .cursor { display: inline-block; width: 7px; height: 14px; margin-left: 3px; background: var(--gold-2); vertical-align: -2px; animation: blink 1s steps(2) infinite }
.watching { font-size: 12px; color: var(--muted); letter-spacing: .04em; margin: -4px 0 12px } .watching span { color: #7fd6ad; animation: blink 2s ease-in-out infinite; margin-right: 4px }
.hero-number span:first-child { font-weight: 900; letter-spacing: -.035em }
body[data-mood="urgent"] .core-status::after { background: var(--red); box-shadow: 0 0 12px var(--red) }
body[data-mood="alert"] .core-status::after { background: var(--amber); box-shadow: 0 0 12px var(--amber) }
body[data-mood="urgent"] .core-status { background: linear-gradient(180deg, #fff 0%, #ffd9d9 40%, #e66767 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 14px rgba(230,103,103,.55)) }
body.cinema .thoughts { font-size: 18px; max-width: 720px } body.cinema .watching { font-size: 13px }
@media (max-width: 700px) { .thoughts { font-size: 13px; min-height: 40px } .core-status { font-size: 20px } }

/* ---------- views, overview grid, chat drawer ---------- */
.view[hidden] { display: none }
.view-head { padding: 6px 4px 0 } .view-head h1 { font-size: 26px; font-weight: 800; letter-spacing: -.01em } .view-head p { margin: 4px 0 0; color: var(--text-2); font-size: 14px }
.card.ov { cursor: pointer; transition: transform .2s, box-shadow .2s, border-color .2s; display: flex; flex-direction: column; min-height: 230px }
.card.ov:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: 0 14px 40px rgba(0,0,0,.45) }
.card.ov > div:nth-child(2) { flex: 1 } .ov-more { margin-top: 10px; font-size: 12px; color: var(--gold-2); font-weight: 600; letter-spacing: .04em }
.ov-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line) } .ov-row:last-child { border-bottom: 0 }
.ov-row .mk-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mk); box-shadow: 0 0 10px var(--mk); flex-shrink: 0 }
.ov-row .body { flex: 1; min-width: 0 } .ov-row .title { font-weight: 600; font-size: 13px } .ov-row .track { height: 4px; background: var(--line); border-radius: 2px; margin-top: 5px; overflow: hidden } .ov-row .track i { display: block; height: 100%; background: var(--mk) }
.ov-row .num { text-align: right; font-variant-numeric: tabular-nums } .ov-row .num b { display: block; font-size: 14px } .ov-row .num small { font-size: 11px; color: var(--muted) }
.ov-row.planned { opacity: .5 } .ov-row.planned .mk-dot { opacity: .4; box-shadow: none }
.ov-item { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--line) } .ov-item:last-child { border-bottom: 0 } .ov-item .dot { margin-top: 5px } .ov-item .grow { flex: 1 } .ov-item .mk { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-top: 2px }
.ov-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 8px; margin-top: 8px } .ov-nums > div { background: var(--panel-2); border-radius: 10px; padding: 8px 10px } .ov-nums b { display: block; font-size: 18px; font-variant-numeric: tabular-nums } .ov-nums small { font-size: 11px; color: var(--muted) } .ov-nums .warn b { color: var(--amber) } .ov-nums .bad b { color: var(--red) }
body.galaxy-mode .ov-nums > div { background: rgba(255,255,255,.04) }
.stat[data-go] { cursor: pointer }
.ask { display: flex; gap: 8px; margin-top: 16px; max-width: 420px } .ask input { flex: 1; background: rgba(255,255,255,.05) }
.list.tall { max-height: 620px }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); z-index: 40; transform: translateX(105%); transition: transform .32s cubic-bezier(.2,.8,.2,1); padding: 12px }
.drawer.open { transform: none } .drawer .card { height: 100%; display: flex; flex-direction: column; background: rgba(12,13,18,.92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-color: rgba(201,133,0,.35); box-shadow: -20px 0 60px rgba(0,0,0,.5) }
.drawer .chat { flex: 1; min-height: 0 } .drawer .chat .log { max-height: none; flex: 1 } .drawer .card-head { gap: 8px } .drawer #chat-close { margin-left: auto }
.fab { position: fixed; right: 18px; bottom: 18px; z-index: 39; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 999px; background: rgba(12,13,18,.85); border: 1px solid rgba(201,133,0,.45); color: var(--text); font-weight: 700; backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(0,0,0,.45) }
.fab .orb { width: 26px; height: 26px; margin: 0 } .fab .orb::after { inset: -3px } .fab:hover { border-color: var(--gold) }
body.chat-open .fab { right: min(478px, calc(100vw - 20px)) }
body.cinema .fab, body.cinema .drawer { display: none }
@media (max-width: 700px) { .drawer { padding: 0; width: 100vw } .drawer .card { border-radius: 0 } .fab { bottom: 14px; right: 14px; padding: 10px 14px 10px 10px } body.chat-open .fab { display: none } .card.ov { min-height: auto } }

/* ---------- stop speaking ---------- */
.stop-btn { margin-left: auto } .stop-btn[hidden], .stop-fab[hidden], #stop-top[hidden] { display: none }
.stop-fab { right: 18px; bottom: 74px; background: #a32e2e; border-color: #e66767; color: #fff; animation: pulse 1.2s ease-in-out infinite }
body.chat-open .stop-fab { right: min(478px, calc(100vw - 20px)) }
body.cinema .stop-fab:not([hidden]) { display: flex; right: 18px; bottom: 60px }
@media (max-width: 700px) { .stop-fab { bottom: 70px; right: 14px } }

/* ---------- slides in chat + presentation mode ---------- */
.deck { margin-top: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-style: normal }
.deck-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 13px }
.deck-nav { display: flex; align-items: center; gap: 8px; margin-top: 8px } .deck-nav .dots { flex: 1; display: flex; gap: 5px; justify-content: center } .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); display: inline-block } .dots i.on { background: var(--gold) }
.sl-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px } .sl-kpis > div { background: var(--panel-2); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.sl-kpis .label { font-size: 11px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase } .sl-kpis b { font-size: 20px; font-variant-numeric: tabular-nums } .sl-kpis small { font-size: 11px; color: var(--muted) }
.sl-bars .bar-row { grid-template-columns: 120px 1fr 90px } .sl-bars .val small { display: block; font-size: 10px; color: var(--muted); font-weight: 400 }
.sl-line { width: 100%; height: auto; display: block } .sl-line text { fill: var(--muted); font-size: 11px } .sl-line .grid { stroke: var(--line) }
.sl-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 12px; margin-top: 10px; font-size: 12px } .sl-legend div { display: flex; align-items: center; gap: 6px; color: var(--text-2) } .sl-legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block } .sl-legend b { margin-left: auto } .sl-legend small { color: var(--muted) }
.sl-note { margin-top: 8px; font-size: 12px; color: var(--text-2) } .sl-table { max-height: 260px; overflow: auto } .sl-table table { margin: 0 }
.presenting { position: fixed; inset: 0; z-index: 90; background: rgba(4,5,10,.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); display: grid; place-items: center; opacity: 0; transition: opacity .3s; padding: 24px }
.presenting.on { opacity: 1 } .present-inner { width: min(1100px, 96vw); max-height: 92vh; display: flex; flex-direction: column; gap: 18px; background: linear-gradient(180deg, rgba(255,255,255,.03), transparent), var(--panel); border: 1px solid rgba(201,133,0,.4); border-radius: 22px; padding: 28px 32px; box-shadow: 0 30px 100px rgba(0,0,0,.6), 0 0 80px rgba(201,133,0,.12) }
.present-kicker { font-size: 11px; letter-spacing: .4em; color: var(--gold-2); text-transform: uppercase } .present-head h2 { font-size: 30px; letter-spacing: -.01em; text-transform: none; color: var(--text); font-weight: 800; margin-top: 6px; display: block }
.present-body { flex: 1; min-height: 0; overflow: auto; font-size: 16px; transition: opacity .16s ease, transform .16s ease; will-change: opacity, transform } .present-body.out-l { opacity: 0; transform: translateX(-14px) } .present-body.out-r { opacity: 0; transform: translateX(14px) } .present-body.in-r { opacity: 0; transform: translateX(14px); transition: none } .present-body.in-l { opacity: 0; transform: translateX(-14px); transition: none } .present-body .sl-kpis { grid-template-columns: repeat(4, 1fr) } .present-body .sl-kpis b { font-size: 34px } .present-body .sl-kpis > div { padding: 18px 20px } .present-body .sl-bars .bar-row { grid-template-columns: 220px 1fr 140px; font-size: 15px; margin: 10px 0 } .present-body .bar-row .track { height: 16px } .present-body .sl-table { max-height: 60vh } .present-body table { font-size: 14px } .present-body .sl-note { font-size: 15px } .present-body .sl-legend { font-size: 14px }
.present-foot { display: flex; align-items: center; gap: 10px } .present-foot .dots { flex: 1; display: flex; justify-content: center; gap: 6px } .present-foot .dots i { width: 8px; height: 8px }
@media (max-width: 700px) { .present-inner { padding: 18px } .present-body .sl-kpis { grid-template-columns: repeat(2, 1fr) } .present-body .sl-kpis b { font-size: 24px } .present-body .sl-bars .bar-row { grid-template-columns: 100px 1fr 90px } .present-head h2 { font-size: 22px } }

/* ---------- live feed ---------- */
.live-wrap { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 8px 12px; margin-top: -6px; display: flex; align-items: center; gap: 12px; overflow: hidden }
body.galaxy-mode .live-wrap { background: rgba(14,16,22,.66); backdrop-filter: blur(14px) }
.live-head { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .18em; flex-shrink: 0 } .live-head b { color: var(--text) }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); animation: blink 1.4s ease-in-out infinite }
.live { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: 1 } .live::-webkit-scrollbar { display: none }
.ev { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--line); font-size: 12px; white-space: nowrap; animation: evin .5s ease both }
.ev i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); flex-shrink: 0 } .ev small { color: var(--muted) } .ev.urgent { border-color: rgba(230,103,103,.4) }
@keyframes evin { from { opacity: 0; transform: translateX(-8px) } to { opacity: 1; transform: none } }
#stats.changed .stat .value { animation: flashval .9s ease } @keyframes flashval { 0% { color: var(--gold-2) } 100% { color: inherit } }
@media (max-width: 700px) { .live-wrap { display: flex } .live-head span.small { display: none } }

/* ---------------- one room per business ---------------- */
.nav-biz { display: contents }
.topnav a .nav-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--mk); box-shadow: 0 0 8px var(--mk); margin-right: 7px; vertical-align: 1px }
.topnav a small { color: var(--muted); font-weight: 500; margin-left: 5px; font-size: 11px }
.topnav a.active .nav-dot { box-shadow: 0 0 12px var(--mk), 0 0 2px #fff }
.biz-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; padding: 6px 4px 4px }
.biz-head h1 { font-size: 28px; font-weight: 800; letter-spacing: -.01em; display: flex; align-items: center; gap: 12px; margin: 0 }
.biz-head h1 .pip { width: 12px; height: 12px } .biz-head h1 small { font-size: 14px; color: var(--muted); font-weight: 500 }
.biz-head .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px } .biz-head .chip[data-open] { cursor: pointer }
.biz-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.kpis.biz-kpis { grid-template-columns: repeat(4, 1fr) }
.stat.clickable { cursor: pointer } .stat .stat-go { position: absolute; right: 12px; bottom: 10px; font-size: 11px; color: var(--muted); opacity: 0; transition: opacity .15s } .stat.clickable:hover .stat-go { opacity: 1 }
.stat.c-cost { --accent: var(--c-cost, #b98cff) } .stat.c-postage { --accent: var(--c-postage, #7fb6ff) }
.biz-chart svg { display: block; width: 100%; height: auto } .biz-chart .ax { fill: var(--muted); font-size: 10px } .biz-chart .bar { transition: opacity .15s } .biz-chart .hit { cursor: pointer } .biz-chart .hit:hover + * , .biz-chart .bar:hover { opacity: 1 }
.card .legend { margin-top: 8px }
.search { margin-left: auto; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 9px; padding: 6px 10px; font-size: 12px; min-width: 220px }
.tbl { overflow: auto; max-height: 520px; border: 1px solid var(--line); border-radius: 10px; margin-top: 6px } .tbl.tall { max-height: 640px }
.tbl table { margin: 0; border-collapse: separate; border-spacing: 0 } .tbl th { position: sticky; top: 0; background: rgba(18,20,26,.98); z-index: 1; text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 9px 10px; border-bottom: 1px solid var(--line) }
.tbl td { padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.04); vertical-align: top; font-size: 12.5px } .tbl tr:last-child td { border-bottom: 0 }
.tbl tr.click { cursor: pointer } .tbl tr.click:hover td { background: rgba(255,255,255,.035) } .tbl tr.late td:first-child { box-shadow: inset 3px 0 0 var(--red) }
.tbl td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap } .tbl .nowrap { white-space: nowrap }
.badge.st-paid { background: rgba(237,161,0,.16); color: var(--amber) } .badge.st-dispatched { background: rgba(57,135,229,.18); color: #8db9f2 } .badge.st-delivered { background: rgba(25,158,112,.18); color: #7fd6ad } .badge.st-cancelled, .badge.st-returned { background: rgba(230,103,103,.16); color: var(--red) } .badge.st-active { background: rgba(25,158,112,.18); color: #7fd6ad } .badge.st-unlisted, .badge.st-ended { background: rgba(255,255,255,.06); color: var(--muted) }
.warn-t { color: var(--amber) } .down { color: var(--red) } .up { color: #7fd6ad }
.bar-row.click, .item.click { cursor: pointer } .bar-row.click:hover .name { color: var(--text) } .item.click:hover { border-color: var(--line-2) }
.ov-nums .clickable { cursor: pointer } .ov-nums .clickable:hover { outline: 1px solid var(--line-2) }
button.more { margin-top: 8px; width: 100% }
/* detail slide-over */
.drawer.detail { width: min(600px, 100vw); z-index: 41 }
.drawer.detail .card { border-color: rgba(255,255,255,.12) } .drawer.detail .card-head { flex-wrap: nowrap; align-items: flex-start }
.detail-heading { flex: 1; min-width: 0 } .detail-heading h2 { font-size: 17px; margin: 0; line-height: 1.3; letter-spacing: 0; text-transform: none } .detail-heading > span { display: block; margin-top: 3px }
.detail-body { flex: 1; min-height: 0; overflow: auto; padding-right: 4px } .detail-body h3 { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px }
.detail-title { font-size: 15px; font-weight: 600; line-height: 1.4 } .big-num { font-size: 34px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; margin: 4px 0 8px }
.kv { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: 6px 12px; font-size: 13px; margin-top: 8px } .kv .k { color: var(--muted) } .kv .v { word-break: break-word }
.waterfall { border: 1px solid var(--line); border-radius: 10px; overflow: hidden } .wf-row { display: flex; justify-content: space-between; padding: 8px 12px; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.05) } .wf-row:last-child { border-bottom: 0 } .wf-row.rev { background: rgba(255,255,255,.03) } .wf-row.total { font-weight: 700; background: rgba(255,255,255,.04) } .wf-row.total.down b { color: var(--red) } .wf-row.total.up b { color: #7fd6ad }
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 14px 0 6px } .timeline > div { position: relative; padding: 8px 0 0 0; border-top: 2px solid var(--line) } .timeline > div i { position: absolute; top: -6px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--panel-2); border: 2px solid var(--line) } .timeline > div.done { border-top-color: var(--green) } .timeline > div.done i { background: var(--green); border-color: var(--green) } .timeline > div.late { border-top-color: var(--red) } .timeline > div.late i { background: var(--red); border-color: var(--red) } .timeline b { display: block; font-size: 12px } .timeline small { color: var(--muted); font-size: 11px }
.issues { margin: 0; padding-left: 18px; font-size: 13px } .issues li { margin: 3px 0 }
body.detail-open .fab { display: none }
@media (max-width: 900px) { .kpis.biz-kpis { grid-template-columns: repeat(2, 1fr) } .search { min-width: 0; width: 100% } .timeline { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 700px) { .drawer.detail { width: 100vw } .topnav a small { display: none } }
.span-8 { grid-column: span 8 } .span-3 { grid-column: span 3 } @media (max-width: 1100px) { .span-8, .span-3 { grid-column: span 12 } }
.topnav a { white-space: nowrap } @media (max-width: 1500px) { .topnav a { padding: 6px 8px; font-size: 12.5px } .topnav a small { display: none } .top { gap: 10px } }

/* ---------------- team logins & team mode ---------------- */
body.team .owner-only, body.staff .manager-only { display: none !important }
.mk-picks { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 12px } .mk-picks label { display: inline-flex; gap: 6px; align-items: center }
.member-form label.hours { display: inline-flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted) } .member-form label.hours input { width: 80px }
.logins { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin: 6px 0 12px }
.login-row { background: var(--panel-2); border-radius: 12px; padding: 12px 14px; display: flex; gap: 12px; align-items: flex-start; border: 1px solid transparent }
.login-row.off { opacity: .55 } .login-row .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--mk, var(--gold)); color: #101010; font-weight: 800; display: grid; place-items: center; flex-shrink: 0 }
.login-row .body { flex: 1; min-width: 0 } .login-row .title { font-weight: 600 } .login-row .meta { color: var(--muted); font-size: 12px; margin-top: 2px; word-break: break-all } .login-row .actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px }
body.galaxy-mode .login-row { background: rgba(255,255,255,.04) }
.team-banner { background: var(--gold-soft); border: 1px solid rgba(201,133,0,.35); border-radius: 12px; padding: 10px 14px; font-size: 13px; margin-bottom: 12px; display: flex; gap: 10px; align-items: center }

.present-inner { position: relative; overflow: hidden } .present-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.06) } .present-bar i { display: block; height: 100%; width: 0; background: var(--gold) }
.present-foot .play { min-width: 40px } .presenting { -webkit-overflow-scrolling: touch }
@media (max-width: 700px) { .presenting { padding: 10px } .present-inner { max-height: 96vh; border-radius: 16px } .present-foot { flex-wrap: wrap } }

/* ---------------- connections ---------------- */
.conn-status { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 10px }
.steps { margin: 6px 0 12px; padding-left: 20px; font-size: 13px; color: var(--text-2); line-height: 1.55 } .steps li { margin: 6px 0 } .steps b { color: var(--text) } .steps code { background: var(--panel-2); padding: 1px 6px; border-radius: 6px; font-size: 12px }
.conn-auth { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center } .conn-auth form { flex: 1; min-width: 320px; display: flex; gap: 8px } .conn-auth form input { flex: 1 }
a.btn { display: inline-block; background: var(--gold); color: #1a1200; font-weight: 700; padding: 7px 12px; border-radius: 9px; text-decoration: none } a.ghost { display: inline-block; padding: 7px 12px; border-radius: 9px; border: 1px solid var(--line); color: var(--text-2); text-decoration: none; font-size: 12px }
.conn-actions { margin-top: 10px }
.conn-auth[hidden], .conn-actions[hidden] { display: none }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; word-break: break-all }