/* ── KATAN V2 · shared UI language (home / trading / peakvision / agents / drones / memory / calendar / settings) ── */
@font-face{font-family:'Pirulen';src:url('../assets/fonts/pirulen.otf') format('opentype');font-display:block}
@font-face{font-family:'Squids';src:url('../assets/fonts/game-of-squids.otf') format('opentype');font-display:block}
@font-face{font-family:'Dogica';src:url('../assets/fonts/dogica.ttf') format('truetype');font-weight:400;font-display:block}
@font-face{font-family:'Dogica';src:url('../assets/fonts/dogica-bold.ttf') format('truetype');font-weight:700;font-display:block}
/* Levy's pick for text + numbers — Noto Sans Old Turkic. Latin 58/58 + digits 10/10 + 73 Old Turkic runes (decorative). SIL OFL · Google Noto. */
@font-face{font-family:'Noto Sans Old Turkic';src:url('../assets/fonts/NotoSansOldTurkic-Regular.ttf') format('truetype');font-weight:400;font-display:swap}

/* ── THEME TOKENS ── night = pure black (default), day = lighter graphite console. Accent re-themable. ── */
:root{
  --bg:#000;--bg-2:#06070a;--panel:rgba(255,255,255,.018);--panel-2:rgba(255,255,255,.03);
  --line:rgba(var(--accent-rgb),.15);--line-2:rgba(var(--accent-rgb),.32);--line-w:rgba(255,255,255,.09);
  --txt:#f3f5f7;--dim:#7b828a;--faint:#4a5057;
  --green:#3ddc84;--amber:#f0b429;--red:#ff5f6d;--blue:#6aa6ff;--purple:#b06eff;
  /* re-themable accent (primary/default WHITE) */
  --accent:#ffffff;--accent-rgb:255,255,255;
  /* fixed agent-activity colours (semantic, not themed) */
  --ag-trade:90,209,255;--ag-peak:61,220,132;--ag-mem:181,123,255;--ag-drone:255,138,61;
  --r:9px;--rlg:12px;--logo:'Pirulen',sans-serif;--title:'Squids',sans-serif;--body:'Noto Sans Old Turkic','Dogica',monospace;
  --breathe:1;
}
:root[data-theme="white"] { --accent:#ffffff;--accent-rgb:255,255,255 }
:root[data-theme="ice"]   { --accent:#5ad1ff;--accent-rgb:90,209,255 }
:root[data-theme="green"] { --accent:#3ef0a4;--accent-rgb:62,240,164 }
:root[data-theme="red"]   { --accent:#ff5a6e;--accent-rgb:255,90,110 }
:root[data-theme="amber"] { --accent:#ffc24d;--accent-rgb:255,194,77 }
:root[data-theme="orange"]{ --accent:#ff8a3d;--accent-rgb:255,138,61 }
:root[data-theme="purple"]{ --accent:#b57bff;--accent-rgb:181,123,255 }
:root[data-motion="off"]{ --breathe:0 }

/* ── circadian + market-aware rhythm — subtle modulation WITHIN the locked pure-black night
   aesthetic. Never lightens the #000 base, never overrides the user's accent. Drives the ambient
   horizon glow, dust brightness, motion cadence + pulse frequency by time of day AND US-market
   state. data-rhythm / data-market are set by katan-ui.js; --rhythm-energy is 0..1. ── */
:root{ --rhythm-energy:.45; --glow-top:20,26,38; --glow-bot:12,16,26; --rhythm-glow:.06 }
:root[data-rhythm="night"]{ --glow-top:12,18,34; --glow-bot:9,12,22;  --rhythm-glow:.05 }
:root[data-rhythm="dawn"] { --glow-top:60,42,30; --glow-bot:28,21,30; --rhythm-glow:.17 }
:root[data-rhythm="day"]  { --glow-top:22,31,44; --glow-bot:13,18,28; --rhythm-glow:.08 }
:root[data-rhythm="dusk"] { --glow-top:56,33,40; --glow-bot:25,19,29; --rhythm-glow:.15 }
:root[data-motion="off"]{ --rhythm-energy:0 }

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--txt);font-family:var(--body);font-size:11px;letter-spacing:.01em;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"lnum" 1;-webkit-font-smoothing:antialiased;transition:background .4s ease,color .4s ease}
#ambient{position:fixed;inset:0;z-index:0;pointer-events:none}
#rhythm-glow{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--rhythm-glow);background:radial-gradient(135% 72% at 50% -12%,rgb(var(--glow-top)),transparent 58%),radial-gradient(135% 64% at 50% 112%,rgb(var(--glow-bot)),transparent 60%);transition:opacity 2.4s ease,background 3.2s ease}
.tb-rhythm .rdot{width:7px;height:7px;border-radius:50%;background:var(--faint);box-shadow:0 0 6px rgba(255,255,255,.18);transition:background .8s ease,box-shadow .8s ease;flex:none}
.tb-rhythm.mkt-open .rdot{background:var(--green);box-shadow:0 0 9px rgba(61,220,132,.75)}
.tb-rhythm.mkt-pre .rdot{background:var(--amber);box-shadow:0 0 9px rgba(240,180,41,.65)}
.tb-rhythm .rlab b{color:var(--txt)}
.app{position:relative;z-index:1;height:100vh;display:flex;flex-direction:column;opacity:1;transition:opacity .25s ease,filter .2s ease}
.app.leaving{opacity:0;filter:blur(2px)}
.green{color:var(--green)}.amber{color:var(--amber)}.red{color:var(--red)}.dim{color:var(--dim)}.faint{color:var(--faint)}.t{font-family:var(--title)}
/* Levy's title spec — titles BOLDER + LARGER than text/numbers. Targets the common title selectors used across mockups. */
.ct,.gt,.pt,.tt,.ko-ttl,.pagehead h1,.sechead h2,.mwin h2,.gch .gt,.colhead .ct,.hc .hl,.calhead .mname{font-family:var(--title);font-weight:700;letter-spacing:.16em}
.pagehead h1,.sechead h2{font-size:1.1em}
:focus-visible{outline:1px solid rgba(var(--accent-rgb),.75);outline-offset:2px}

/* topbar */
.topbar{display:flex;align-items:center;height:54px;padding:0 22px;border-bottom:1px solid var(--line);flex:none}
.logo{font-family:var(--logo);font-size:17px;letter-spacing:.16em;color:var(--txt);padding-right:26px}
.tb-sep{width:1px;height:20px;background:var(--line);margin:0 17px}
.tb-item{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--dim)}
.tb-item i{font-size:15px}.tb-item b{color:var(--txt);font-weight:400}
.spot{display:flex;align-items:center;gap:11px}
.spot .art{width:32px;height:32px;border-radius:6px;background:linear-gradient(135deg,#2a2f36,#11141a);display:flex;align-items:center;justify-content:center;font-family:var(--logo);font-size:11px;color:#cfd6db}
.spot .stt{font-size:11px;color:var(--txt)}.spot .sar{font-size:9px;color:var(--dim);margin-top:2px}
.spot .sctl{display:flex;align-items:center;gap:9px;color:var(--dim);margin-left:4px}.spot .sctl i{font-size:14px;cursor:pointer;transition:color .16s}.spot .sctl i:hover{color:var(--txt)}
.spot canvas{width:58px;height:20px;margin-left:4px}
.spot .sctl,.spot canvas{opacity:.42;transition:opacity .25s}.spot:hover .sctl,.spot:hover canvas{opacity:1}
.spacer{flex:1}.notif{cursor:pointer}.notif .nd{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);margin-left:5px;vertical-align:1px}

/* body + nav */
.body{flex:1;display:flex;min-height:0}
.nav{width:60px;flex:none;display:flex;flex-direction:column;align-items:center;padding:16px 0;border-right:1px solid var(--line)}
.navlist{display:flex;flex-direction:column;gap:5px;flex:1;align-items:center}
.nav-i{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:var(--r);color:var(--dim);cursor:pointer;transition:.16s;text-decoration:none;position:relative}
.nav-i i{font-size:20px}
.nav-i span{position:absolute;left:50px;top:50%;transform:translateY(-50%) translateX(-5px);white-space:nowrap;font-family:var(--title);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt);background:#0b0e12;border:1px solid var(--line-2);padding:6px 10px;border-radius:7px;opacity:0;pointer-events:none;transition:.15s;z-index:40}
.nav-i:hover span{opacity:1;transform:translateY(-50%) translateX(0)}
.nav-i:hover{color:var(--txt);background:rgba(var(--accent-rgb),.08)}.nav-i.on{color:var(--txt);background:rgba(var(--accent-rgb),.14)}
.nav-i.nav-bottom{margin-top:6px}
.nav-i.pulse{animation:navPulse 1.7s ease-out both}
@keyframes navPulse{0%{box-shadow:inset 3px 0 0 rgba(var(--pulse-rgb),0);background:transparent}22%{box-shadow:inset 3px 0 0 rgba(var(--pulse-rgb),1);background:rgba(var(--pulse-rgb),.12);color:var(--txt)}100%{box-shadow:inset 3px 0 0 rgba(var(--pulse-rgb),0);background:transparent}}
.operator{display:flex;align-items:center;gap:11px;padding-top:15px;border-top:1px solid var(--line)}
.operator .ava{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#3a4049,#15181d);flex:none;display:flex;align-items:center;justify-content:center;color:#aeb6bd;font-size:13px}
.operator .onm{font-family:var(--title);font-size:11px;color:var(--txt);letter-spacing:.04em}.operator .orl{font-size:9px;color:var(--dim);letter-spacing:.08em;text-transform:uppercase;margin-top:2px}

/* stage + page header */
.stage{flex:1;position:relative;display:flex;flex-direction:column;padding:18px 26px 22px;min-width:0;overflow:hidden}
.pagehead{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:15px;border-bottom:1px solid var(--line);flex:none}
.pagehead .pt1{font-family:var(--title);font-size:clamp(16px,1.55vw,21px);letter-spacing:.13em;color:var(--txt);text-transform:uppercase}
.pagehead .pt2{font-size:10px;letter-spacing:.18em;color:var(--dim);text-transform:uppercase;margin-top:9px}
.hstats{display:flex;gap:clamp(20px,2.6vw,40px)}
.hstat{text-align:right}.hstat .hl{font-family:var(--title);font-size:9px;letter-spacing:.1em;color:var(--dim);text-transform:uppercase}.hstat .hv{font-size:clamp(16px,1.5vw,20px);color:var(--txt);margin-top:7px}

/* panels + primitives */
.panel{border:1px solid var(--line);border-radius:var(--rlg);background:var(--panel);padding:15px 17px;display:flex;flex-direction:column;min-height:0;position:relative;transition:border-color .2s ease}
.panel:hover{border-color:var(--line-2)}
.panel::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid transparent;pointer-events:none;animation:panelBreath calc((8.5s - 2.5s * var(--rhythm-energy)) + var(--bd,0s)) ease-in-out infinite}
@keyframes panelBreath{0%,100%{border-color:rgba(255,255,255,0)}50%{border-color:rgba(255,255,255,calc((.028 + .05 * var(--rhythm-energy)) * var(--breathe)))}}
/* localized-urgency: one panel/row flares red while the rest stays composed */
.flare{box-shadow:inset 0 0 0 1px rgba(255,95,109,.45);animation:flarePulse 1.9s ease-in-out infinite}
@keyframes flarePulse{0%,100%{box-shadow:inset 0 0 0 1px rgba(255,95,109,.3),0 0 0 0 rgba(255,95,109,0)}50%{box-shadow:inset 0 0 0 1px rgba(255,95,109,.7),0 0 16px 0 rgba(255,95,109,.16)}}
/* localized-urgency crisis (KCRISIS): only the RELEVANT nav item + a topbar alert flare red */
.nav-i.crisis{color:var(--red)}
.nav-i.crisis::after{content:"";position:absolute;top:7px;right:7px;width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 7px rgba(255,95,109,.85);animation:flarePulse 1.9s ease-in-out infinite}
.tb-crisis{display:none;align-items:center;gap:8px;cursor:pointer;color:var(--red);border:1px solid rgba(255,95,109,.5);border-radius:8px;padding:5px 11px;animation:flarePulse 1.9s ease-in-out infinite}
.tb-crisis.on{display:flex}
.tb-crisis i{font-size:14px;color:var(--red)}
.tb-crisis b{color:var(--red);font-weight:400;letter-spacing:.04em}
.tb-crisis .cx{color:var(--dim);font-size:10px;margin-left:1px}
.panel:nth-of-type(2n)::after{--bd:1.4s}.panel:nth-of-type(3n)::after{--bd:2.6s}.panel:nth-of-type(4n)::after{--bd:.8s}
.panel.epulse::before{content:"";position:absolute;top:0;left:-32%;height:1px;width:32%;border-radius:1px;background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.9),transparent);animation:eSweep 1.15s ease-out forwards;z-index:2}
@keyframes eSweep{from{left:-32%;opacity:0}12%{opacity:1}to{left:100%;opacity:0}}
.panel .ph{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex:none}
.panel .pt{font-family:var(--title);font-size:11px;letter-spacing:.05em;color:var(--txt);text-transform:uppercase}
.panel .plink{font-size:9px;letter-spacing:.08em;color:var(--dim);text-transform:uppercase;display:flex;align-items:center;gap:6px;cursor:pointer;transition:color .16s}
.panel .plink:hover{color:var(--txt)}
.statset{display:flex}
.statset .st{flex:1;padding-right:14px}.statset .st+.st{padding-left:18px;border-left:1px solid var(--line)}
.st .sv{font-size:23px;color:var(--txt);letter-spacing:.01em}.st .sl{font-size:9px;letter-spacing:.05em;color:var(--dim);text-transform:uppercase;margin-top:7px}
.chart{flex:1;min-height:50px}.chart svg{display:block;width:100%;height:100%}
.row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}.row:last-child{border-bottom:none}
.badge{font-size:9px;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:5px;border:1px solid var(--line-2)}
button{font-family:inherit;color:inherit;cursor:pointer}
button:active,.tapable:active,.mic:active,.arrow:active,.seg span:active,.oside span:active,#ptabs span:active,#rseg span:active,.tseg span:active,.sigx:active,.qc:active,.connbtn:active{transform:scale(.985)}

/* responsive */
@media (max-width:1320px){ .stage{padding:16px 18px 18px} }
@media (max-width:1140px){ .spot .stt,.spot .sar{display:none} .spot .sctl{display:none} }
@media (max-width:1000px){ .tb-item.notif b{display:none} }
@media (max-height:720px){ .stage{overflow:auto} }

/* ── Place Order popup (shared · window.KORDER) — broker-first ticket, modal ── */
.ko-ov{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.ko-ov.open{display:flex}
.ko-modal{width:100%;max-width:560px;max-height:88vh;overflow:auto;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--rlg);padding:20px 22px;position:relative;box-shadow:0 24px 80px rgba(0,0,0,.6),0 0 0 1px rgba(var(--accent-rgb),.08)}
.ko-ov.open .ko-modal{animation:koIn .22s cubic-bezier(.2,.8,.2,1) both}
@keyframes koIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.ko-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}
.ko-ttl{font-family:var(--title);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt);display:flex;align-items:center;gap:9px}
.ko-ttl i{color:var(--accent);font-size:15px}
.ko-x{width:30px;height:30px;border-radius:7px;border:1px solid var(--line-2);background:transparent;color:var(--dim);display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;transition:.16s}
.ko-x:hover{color:var(--red);border-color:rgba(255,95,109,.45);background:rgba(255,95,109,.08)}
.ko-brokers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:13px}
.ko-pill{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;padding:9px 11px;border-radius:var(--r);border:1px solid var(--line-2);background:transparent;color:var(--dim);cursor:pointer;transition:.16s}
.ko-pill:hover{border-color:rgba(var(--accent-rgb),.5);color:var(--txt)}
.ko-pill.on{border-color:var(--accent);background:rgba(var(--accent-rgb),.1);color:var(--txt)}
.ko-pill .kn{font-family:var(--title);font-size:11px;letter-spacing:.05em}
.ko-pill .ks{font-size:8px;letter-spacing:.02em;text-transform:uppercase;color:var(--dim)}
.ko-acct{display:flex;flex-wrap:wrap;gap:5px 18px;padding:9px 11px;margin-bottom:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);min-height:20px}
.ko-acct .km{display:flex;flex-direction:column;gap:2px}
.ko-acct .kk{font-size:8px;letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
.ko-acct .kv{font-size:12px;color:var(--txt)}
.ko-acct .kbadge{margin-left:auto;align-self:center;font-size:8px;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:5px;border:1px solid var(--line-2);color:var(--dim)}
.ko-acct .kbadge.green{color:var(--green);border-color:rgba(61,220,132,.4)}.ko-acct .kbadge.amber{color:var(--amber);border-color:rgba(240,180,41,.4)}
.ko-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ko-fld{display:flex;flex-direction:column;gap:5px;min-width:0}
.ko-fld.full{grid-column:1 / -1}
.ko-fld label{font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.ko-fld input,.ko-fld select{height:32px;background:rgba(255,255,255,.025);border:1px solid var(--line-2);border-radius:6px;color:var(--txt);font-family:var(--body);font-size:11px;padding:0 9px;outline:none;width:100%}
.ko-fld input:focus,.ko-fld select:focus{border-color:rgba(var(--accent-rgb),.6)}
.ko-side{display:flex;border:1px solid var(--line-2);border-radius:6px;overflow:hidden;height:32px}
.ko-side span{flex:1;display:flex;align-items:center;justify-content:center;font-family:var(--title);font-size:9px;letter-spacing:.04em;color:var(--dim);cursor:pointer;text-transform:uppercase}
.ko-side span.buy.on{background:rgba(61,220,132,.18);color:var(--green)}.ko-side span.sell.on{background:rgba(255,95,109,.18);color:var(--red)}
.ko-foot{display:flex;align-items:center;gap:10px;margin-top:15px}
.ko-mic{width:38px;height:38px;flex:none;border-radius:8px;border:1px solid var(--line-2);background:transparent;color:var(--dim);display:flex;align-items:center;justify-content:center;font-size:17px;cursor:pointer;transition:.16s}
.ko-mic:hover{color:var(--txt);border-color:rgba(var(--accent-rgb),.5)}
.ko-mic.live{color:var(--accent);border-color:var(--accent);background:rgba(var(--accent-rgb),.12);animation:koMic 1.3s ease-in-out infinite}
@keyframes koMic{0%,100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.4)}50%{box-shadow:0 0 0 5px rgba(var(--accent-rgb),0)}}
.ko-place{flex:1;height:38px;border:1px solid rgba(var(--accent-rgb),.55);background:rgba(var(--accent-rgb),.12);color:var(--accent);font-family:var(--title);font-size:11px;letter-spacing:.12em;text-transform:uppercase;border-radius:8px;cursor:pointer;transition:.16s}
.ko-place:hover{background:rgba(var(--accent-rgb),.2)}
.ko-place:disabled{opacity:.4;cursor:not-allowed}
.ko-msg{font-size:11px;min-height:15px;margin-top:11px;font-family:var(--body)}
.ko-msg .ok{color:var(--green)}.ko-msg .err{color:var(--red)}.ko-msg .dim{color:var(--dim)}
.ko-hint{font-size:9px;letter-spacing:.04em;color:var(--faint);margin-top:9px;text-align:center}
/* PLACE ORDER trigger label (cards / panels) */
.po-label{display:inline-flex;align-items:center;gap:6px;font-family:var(--title);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);border:1px solid rgba(var(--accent-rgb),.45);background:rgba(var(--accent-rgb),.08);border-radius:6px;padding:4px 10px;cursor:pointer;transition:.16s}
.po-label:hover{background:rgba(var(--accent-rgb),.16)}
.po-label i{font-size:11px}
/* Trading P/L card hosting the trigger: top-right label + slightly smaller numbers to make room */
.po-card .po-label{position:absolute;top:11px;right:12px;z-index:2}
.po-card .cv{font-size:20px}
.po-card .cl{max-width:60%}

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

/* ── PRIVACY MODE — blur whole financial sections (topbar eye toggle) ─────
   html.kprivacy is set by the #tb-privacy button (persisted in localStorage).
   Sections opt in with .fin-blur; hover peeks. Social/audience data stays clear. */
html.kprivacy .fin-blur{filter:blur(9px);user-select:none;transition:filter .25s}
html.kprivacy .fin-blur:hover{filter:none}