:root{
  color-scheme:dark;
  --bg:#15130f; --panel:#1d1a15; --panel2:#24201a; --line:#322d24; --line2:#433c30;
  --text:#efe8da; --dim:#a79e8c; --faint:#776f61; --ink:#efe8da; --paper:#15130f;
  --accent:#e2a64b; --accent-ink:#15130f;
  --bull:#34c77b; --bear:#ff5b4f; --neutral:#a79e8c; --warn:#e2a64b; --info:#7fb3e8;
  --top-bg:rgba(21,19,15,.97);
  --danger-border:#5a2a24; --danger-text:#ff9a8e;
  --chip-on-bg:#efe8da; --outlier:#a58be8;
  --win-bg:rgba(52,199,123,.12); --win-border:rgba(52,199,123,.45); --loss-bg:rgba(255,91,79,.12); --loss-border:rgba(255,91,79,.45); --open-border:#4a5a6e;
  --tag-text:#c9b7ff; --tag-border:#4a3f6e; --warn-border:#6e5222;
  --scalp-bg:rgba(226,166,75,.12); --scalp-text:#f0c078; --scalp-border:#6e5222;
  --grade-ink:#15130f; --shadow:rgba(0,0,0,.5);
  --radius:4px;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  --serif:"Newsreader","Iowan Old Style","Charter","Georgia",serif;
}
/* Light theme ("paper") follows the device unless the person picked one in Settings (data-theme). */
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){
  color-scheme:light;
  --bg:#f3efe6; --panel:#fffdf8; --panel2:#f8f3e9; --line:#ddd5c5; --line2:#cbc1ad;
  --text:#1d1b17; --dim:#6b655a; --faint:#958d7f; --ink:#1d1b17; --paper:#f3efe6;
  --accent:#9a5a12; --accent-ink:#fffdf8;
  --bull:#15803d; --bear:#c62828; --neutral:#6b655a; --warn:#9a5a12; --info:#1f5fa8;
  --top-bg:rgba(243,239,230,.97);
  --danger-border:#e3b3ab; --danger-text:#b3261e;
  --chip-on-bg:#1d1b17; --outlier:#6d4fc7;
  --win-bg:#e3f2e7; --win-border:#9fcfad; --loss-bg:#f9e4e1; --loss-border:#e7aaa2; --open-border:#a9bfdc;
  --tag-text:#5a3fb0; --tag-border:#cbbfe8; --warn-border:#dcc08a;
  --scalp-bg:#f7ecd4; --scalp-text:#7a4a0c; --scalp-border:#e2c99a;
  --grade-ink:#fffdf8; --shadow:rgba(40,32,20,.16);
}}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f3efe6; --panel:#fffdf8; --panel2:#f8f3e9; --line:#ddd5c5; --line2:#cbc1ad;
  --text:#1d1b17; --dim:#6b655a; --faint:#958d7f; --ink:#1d1b17; --paper:#f3efe6;
  --accent:#9a5a12; --accent-ink:#fffdf8;
  --bull:#15803d; --bear:#c62828; --neutral:#6b655a; --warn:#9a5a12; --info:#1f5fa8;
  --top-bg:rgba(243,239,230,.97);
  --danger-border:#e3b3ab; --danger-text:#b3261e;
  --chip-on-bg:#1d1b17; --outlier:#6d4fc7;
  --win-bg:#e3f2e7; --win-border:#9fcfad; --loss-bg:#f9e4e1; --loss-border:#e7aaa2; --open-border:#a9bfdc;
  --tag-text:#5a3fb0; --tag-border:#cbbfe8; --warn-border:#dcc08a;
  --scalp-bg:#f7ecd4; --scalp-text:#7a4a0c; --scalp-border:#e2c99a;
  --grade-ink:#fffdf8; --shadow:rgba(40,32,20,.16);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* header */
.top{position:sticky;top:0;z-index:20;background:var(--top-bg);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.top-row{display:flex;align-items:center;gap:14px;padding:10px 16px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:8px;font:700 17px var(--mono);letter-spacing:.06em;color:var(--text);text-decoration:none}
.brand b{color:var(--bull)}
.brand .mark{color:var(--text);flex:none}
.idx{display:flex;gap:10px;flex-wrap:wrap}
.chip-idx{font:12px var(--mono);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:3px 9px;white-space:nowrap;color:inherit;text-decoration:none;cursor:pointer}
.chip-idx:hover{border-color:var(--accent)}
.idx-tag{margin-left:5px;font-size:9px;color:var(--dim);letter-spacing:.06em;text-transform:uppercase}
.status{font-size:12px;color:var(--dim);margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dot{width:8px;height:8px;border-radius:50%;background:var(--faint);display:inline-block}
.dot.ok{background:var(--bull)} .dot.warn{background:var(--warn)} .dot.bad{background:var(--bear)}
.btn{background:var(--panel2);border:1px solid var(--line2);border-radius:6px;padding:6px 11px;font-size:13px}
.btn:hover{border-color:var(--dim)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
.btn.danger{border-color:var(--danger-border);color:var(--danger-text)}
.btn.small{padding:3px 8px;font-size:12px}
.tabs{display:flex;gap:2px;padding:0 12px;overflow:visible;flex-wrap:wrap}
.tab{background:none;border:none;border-bottom:2px solid transparent;padding:9px 12px;color:var(--dim);font-weight:600;font-size:13px;white-space:nowrap}
.tab[aria-selected="true"]{color:var(--text);border-bottom-color:var(--accent)}
.tab .count{font:11px var(--mono);color:var(--faint);margin-left:4px}

main{padding:14px 16px 80px;max-width:1500px;margin:0 auto}
/* Big screens (Mac, desktop): use the width. One panel flows its tiles into columns. */
@media (min-width:1500px){main{max-width:none;padding-left:max(24px,2.5vw);padding-right:max(24px,2.5vw)}}
.view[hidden]{display:none!important}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:10px;margin-bottom:12px}
.filters input[type=search],.filters input[type=date],.filters select,.filters input[type=number]{background:var(--panel2);border:1px solid var(--line2);border-radius:6px;padding:6px 8px;font-size:13px;min-width:0}
.filters input[type=search]{flex:1 1 200px}
.filters input[type=number]{width:70px}
.fgroup{display:flex;gap:4px;align-items:center;flex-wrap:wrap;max-width:100%}
.filters select{max-width:100%;text-overflow:ellipsis}
.filters > *{max-width:100%}
/* long text never runs off the screen: wrap it, and let only tables/code scroll sideways */
.basis-note,.sub,.mech,.hint,.msg,.ltext,.card p,.detail p,.help p{overflow-wrap:anywhere}
/* iOS zooms into any field smaller than 16px on focus; keep fields at 16px on touch devices */
@media (pointer:coarse){ body input, body select, body textarea{font-size:16px !important} .filters input[type=search],.filters input[type=date],.filters select,.filters input[type=number]{font-size:16px} input.code{font-size:24px !important} }
.flabel{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;margin-right:2px}
.chip{background:var(--panel2);border:1px solid var(--line2);border-radius:999px;padding:4px 10px;font-size:12px;color:var(--dim)}
.chip[data-on="1"]{background:var(--chip-on-bg);border-color:var(--accent);color:var(--accent)}
.toggle{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--dim)}
.sep{width:1px;align-self:stretch;background:var(--line)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px;margin-bottom:12px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:9px 11px}
.stat .n{font:600 20px/1.2 var(--mono)}
.stat .l{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.05em}
.stat.bull .n{color:var(--bull)} .stat.bear .n{color:var(--bear)} .stat.acc .n{color:var(--accent)}
.basis-note{font-size:12px;color:var(--dim);margin:-4px 0 10px}

/* rows */
.list{display:flex;flex-direction:column;gap:8px}
.row{display:grid;grid-template-columns:118px 1fr auto;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px}
.row.outlier{border-left:3px solid var(--outlier)}
.row.void{opacity:.55}
.time{font:12px var(--mono);color:var(--dim)}
.spark{display:block;width:110px;height:30px;margin-top:6px}
.t-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 8px}
.tk{font:700 14px var(--mono);text-decoration:none;color:var(--text)}
.tk:hover{color:var(--accent)}
.mech{color:var(--text)}
.sub{font-size:12px;color:var(--dim);margin-top:3px}
.kv{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--dim);margin-top:5px}
.kv b{color:var(--text);font-family:var(--mono);font-weight:600}
.pos{color:var(--bull)!important} .neg{color:var(--bear)!important}
.pill{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;border:1px solid var(--line2);color:var(--dim);white-space:nowrap}
.pill.win{color:var(--bull);border-color:var(--win-border);background:var(--win-bg)}
.pill.loss{color:var(--bear);border-color:var(--loss-border);background:var(--loss-bg)}
.pill.flat{color:var(--neutral)}
.pill.open{color:var(--info);border-color:var(--open-border)}
.pill.up{color:var(--bull)} .pill.down{color:var(--bear)}
.grade{font:700 11px var(--mono);border-radius:4px;padding:1px 6px;border:1px solid}
.grade.A{color:var(--grade-ink);background:var(--bull);border-color:var(--bull)}
.grade.B{color:var(--accent);border-color:var(--accent)}
.grade.C{color:var(--faint);border-color:var(--line2)}
.tag{font-size:11px;color:var(--tag-text);border:1px solid var(--tag-border);border-radius:4px;padding:1px 6px}
.tag.warn{color:var(--warn);border-color:var(--warn-border)}
.tag.bad{color:var(--bear);border-color:var(--loss-border)}
.right{text-align:right;display:flex;flex-direction:row;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}
.bar{height:4px;background:var(--line);border-radius:2px;overflow:hidden;width:120px}
.bar>i{display:block;height:100%}
.detail{grid-column:1/-1;border-top:1px dashed var(--line2);padding-top:8px;font-size:13px;color:var(--dim)}
.detail p{margin:4px 0}
.more{background:none;border:none;color:var(--faint);font-size:12px;padding:0;text-decoration:underline}
.empty{color:var(--dim);padding:24px;text-align:center;background:var(--panel);border:1px dashed var(--line2);border-radius:var(--radius)}
.pager{display:flex;justify-content:center;margin-top:12px}

/* tables */
.tbl-wrap{overflow-x:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
th{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.05em;font-weight:600;background:var(--panel2)}
td.num,th.num{text-align:right}
td input,td select{background:var(--panel2);border:1px solid var(--line2);border-radius:5px;padding:4px 6px;width:100%;min-width:60px}
h2{font-size:15px;margin:18px 0 8px}
h3{font-size:13px;margin:14px 0 6px;color:var(--dim);text-transform:uppercase;letter-spacing:.05em}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px}
.signal{font-size:13px;padding:6px 8px;border-radius:6px;margin-top:6px;border-left:3px solid var(--line2);background:var(--panel2)}
.signal.warn{border-left-color:var(--warn)} .signal.bad{border-left-color:var(--bear)} .signal.info{border-left-color:var(--info)} .signal.ok{border-left-color:var(--bull)}
pre.lessons{white-space:pre-wrap;font:12px/1.5 var(--mono);color:var(--dim);max-height:420px;overflow:auto;margin:0}

/* chat drawer */
.drawer{position:fixed;top:0;right:0;height:100%;width:min(460px,100%);background:var(--panel);border-left:1px solid var(--line2);z-index:40;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .2s ease}
.drawer.open{transform:none}
.drawer header{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.msgs{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:10px}
.msg{padding:9px 11px;border-radius:8px;white-space:pre-wrap;font-size:13px;max-width:92%}
.msg.user{background:var(--chip-on-bg);align-self:flex-end}
.msg.assistant{background:var(--panel2);border:1px solid var(--line)}
.msg.err{color:var(--bear);border:1px solid var(--loss-border);background:var(--loss-bg)}
.composer{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
.composer textarea{flex:1;background:var(--panel2);border:1px solid var(--line2);border-radius:6px;padding:8px;resize:none;height:64px}
.presets{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 10px}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:50;display:flex;align-items:center;justify-content:center;padding:16px}
.modal{background:var(--panel);border:1px solid var(--line2);border-radius:10px;padding:18px;width:min(440px,100%);max-height:90vh;overflow:auto}
.modal label{display:block;font-size:12px;color:var(--dim);margin:10px 0 4px}
.modal input,.modal select,.modal textarea{width:100%;background:var(--panel2);border:1px solid var(--line2);border-radius:6px;padding:8px}
.modal .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.hint{font-size:12px;color:var(--faint)}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--line2);padding:8px 14px;border-radius:8px;z-index:60;font-size:13px}

@media (max-width:760px){
  .row{grid-template-columns:1fr;gap:6px}
  .right{align-items:flex-start;text-align:left;flex-direction:row;flex-wrap:wrap}
  .spark{width:100%;max-width:220px}
  .grid2{grid-template-columns:1fr}
  .status{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){.drawer{transition:none}}

.row.wire { opacity: .85; }
.row.wire .mech { font-weight: 400; }

/* installed-app safe areas (Dynamic Island / notch / home indicator) */
html{background:var(--bg)}
.top{padding-top:env(safe-area-inset-top,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
body{padding-bottom:env(safe-area-inset-bottom,0px);overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent}
.drawer{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.modal-bg{padding-top:calc(16px + env(safe-area-inset-top,0px));padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.toast{bottom:calc(18px + env(safe-area-inset-bottom,0px))}

.pill.open.ok{border-color:var(--bull);color:var(--bull)}
.pill.open.bad{border-color:var(--bear);color:var(--bear)}

.clocks{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.clock{font:12px var(--mono);color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:3px 9px;white-space:nowrap}
.clock small{font-size:9px;color:var(--dim);letter-spacing:.08em;margin-right:4px}

.tag.scalp{background:var(--scalp-bg);color:var(--scalp-text);border-color:var(--scalp-border)}

.chat-hist{display:flex;gap:6px;padding:8px 12px;border-bottom:1px solid var(--line);align-items:center;font-size:12px}
.chat-hist select{flex:1;min-width:0;background:var(--panel2);border:1px solid var(--line2);border-radius:6px;padding:5px;font-size:12px}
.msg .ts{display:block;font:10px var(--mono);color:var(--dim);margin-top:4px;letter-spacing:.04em}

.lounge{display:flex;flex-direction:column;height:calc(100vh - var(--topH,110px) - 120px);height:calc(100dvh - var(--topH,110px) - 120px);min-height:360px;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.lounge-msgs{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.lounge-day{align-self:center;font:11px var(--mono);color:var(--dim);letter-spacing:.08em;margin:6px 0}
.lmsg{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 10px;max-width:min(720px,92%);align-self:flex-start}
.lmsg.mine{align-self:flex-end;border-color:var(--line2)}
.lhead{font-size:12px;margin-bottom:3px}
.ltext{white-space:pre-wrap;word-break:break-word}
.linkbtn{background:none;border:none;color:var(--dim);font-size:11px;padding:0 4px;text-decoration:underline;cursor:pointer}
.lounge-composer{border-top:1px solid var(--line);padding:10px 10px 10px 64px}
@media (min-width:700px){.lounge-composer{padding-left:10px}}

.help-fab{position:fixed;left:calc(14px + env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);background:var(--panel);color:var(--accent);font:700 20px var(--mono);z-index:35;box-shadow:0 4px 16px var(--shadow);cursor:pointer}
.help-fab:hover{border-color:var(--accent)}
.modal.help{width:min(720px,100%);max-height:calc(100vh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));max-height:calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
.help-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.help-nav{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 14px}
.help-nav a{font-size:12px;color:var(--accent);background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:3px 9px;text-decoration:none}
.modal.help h3{margin:18px 0 4px;font-size:14px}
.modal.help p{margin:0;color:var(--text);line-height:1.5}
.danger-zone{margin-top:18px;border-top:1px solid var(--line);padding-top:10px}
.danger-zone summary{cursor:pointer;color:var(--bear);font-size:13px}
.btn.trade{border-color:var(--bull);color:var(--bull);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.btn.trade small{font-size:10px;font-weight:500;opacity:.75;letter-spacing:.04em;text-transform:uppercase}
.btn.trade:hover{background:var(--win-bg)}

/* Admin: one card per member, controls under Manage */
.ulist{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.ucard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px}
.ucard.pending{border-color:var(--accent)}
.uhead{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}
.uhead > div:first-child{flex:1 1 220px;min-width:0}
.uhead .tag{margin-left:4px}
.ubody{border-top:1px solid var(--line);margin-top:10px;padding-top:10px}
.ucard .chip{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.ucard .chip.on{background:var(--chip-on-bg);border-color:var(--accent);color:var(--accent)}
.ucard .chip input{margin:0;accent-color:var(--accent)}

/* Phone width: no sideways scrolling anywhere. Tables stack into labelled rows. */
@media (max-width:700px){
  .tbl-wrap{overflow-x:visible;border:none;background:transparent}
  table,tbody,tr,td{display:block;width:100%}
  thead{display:none}
  tr{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:8px;padding:4px 10px}
  td{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:6px 0;white-space:normal;text-align:right}
  td:last-child{border-bottom:none}
  td[data-l]::before{content:attr(data-l);color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.05em;text-align:left;flex:0 0 auto}
  td:not([data-l]),td[data-l=""]{justify-content:flex-start;text-align:left}
}
/* Touch devices: no visible scrollbars on the site's own scrolling boxes */
@media (pointer:coarse){
  *{scrollbar-width:none}
  *::-webkit-scrollbar{display:none;width:0;height:0}
}
@media (max-width:700px){ .tabs{overflow:visible} .tab{padding:8px 10px;flex:1 1 auto;text-align:center} }

/* App, not web page: no double-tap zoom, no pinch zoom, no long-press callouts,
   no rubber-banding of the whole page, no accidental text selection on chrome. */
html,body{touch-action:pan-x pan-y;-webkit-text-size-adjust:100%;overscroll-behavior:none}
*{-webkit-touch-callout:none}
body{-webkit-user-select:none;user-select:none}
input,textarea,select,[contenteditable],.msg,.lmsg,.news p,.reason,.notes,.card p,.help-body,pre,code{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
a,button,.btn,.chip,.tab,.tag,.pill,label,summary{touch-action:manipulation}

/* Native app extras */
label.chk{display:flex;align-items:center;gap:8px;margin:8px 0;font-weight:500}
label.chk input[type=checkbox]{width:auto;margin:0}
.biolock{position:fixed;inset:0;z-index:1000;background:var(--bg);display:flex;align-items:center;justify-content:center;text-align:center;padding:env(safe-area-inset-top,0) 24px env(safe-area-inset-bottom,0);color:var(--text)}
.biolock p{margin:16px 0 20px;font-weight:600}

/* Progress bar as the card's bottom edge */
.row{position:relative;overflow:hidden}
.bar.rowbar{grid-column:1 / -1;width:auto;height:3px;border-radius:0;margin:2px -12px -10px}
/* Header slides away while reading. Pinned filters = a compact strip fixed at the top. */
.top{transition:transform .22s ease}
.top.away{transform:translateY(-100%)}
html.appmode .top{position:fixed;left:0;right:0;top:0}
html.appmode main{padding-top:calc(var(--topH,110px) + 16px)}
html.appmode .top-row{padding-top:6px}
html.appmode.pinned .top{top:var(--stripH,110px);padding-top:0}
html.appmode.pinned main{padding-top:calc(var(--topH,110px) + var(--stripH,110px) + 16px)}
.filters.pinned{position:fixed;left:max(8px,calc(50% - 742px));right:max(8px,calc(50% - 742px));top:calc(var(--topH,0px) + 6px);z-index:26;box-shadow:0 6px 18px var(--shadow);margin:0;padding:8px 10px}
html.topaway:not(.appmode) .filters.pinned{top:6px}
html.appmode .filters.pinned{top:0;left:0;right:0;padding-top:calc(var(--sat) + 6px);border-radius:0 0 14px 14px;border-top:0}
.filters.pinned.open{max-height:80vh;overflow:auto}
.filters-ph{height:60px;margin-bottom:12px}
.filters .fmore,.filters .fdone{display:none}
.filters.pinned .fmore{display:inline-block}
.filters.float .fdone{display:inline-block;order:0;margin-left:auto}
.filters.pinned:not(.open) > *:not([data-pin]):not([data-fmore]):not([data-reset]):not([data-f="q"]){display:none}
.filters.pinned .fmore{order:2}.filters.pinned [data-reset]{order:3}.filters.pinned [data-pin]{order:3}.filters.pinned [data-f="q"]{order:1;flex:1 1 120px}
.filters.pinned > *:not([data-pin]):not([data-fmore]):not([data-reset]):not([data-f="q"]){order:4}
.chip.pin{margin-right:2px}
.totop{position:fixed;right:calc(14px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);background:var(--panel);color:var(--text);font:700 18px var(--mono);z-index:35;box-shadow:0 4px 16px var(--shadow);cursor:pointer}
.help-wrap{position:fixed;left:calc(14px + env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:35;width:44px;height:44px}
.help-wrap .help-fab{position:static}
.help-x{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;border:1px solid var(--line2);background:var(--panel2);color:var(--dim);font:700 12px/1 var(--mono);padding:0;cursor:pointer}
.filters .fmore{display:none}
html.topaway .filters.pinned .fmore{display:inline-block}
html.topaway .filters.pinned:not(.open) > *:not([data-pin]):not([data-fmore]):not([data-reset]):not([data-f="q"]){display:none}
.filters.pinned .fmore{order:2}.filters.pinned [data-reset]{order:3}.filters.pinned [data-pin]{order:3}.filters.pinned [data-f="q"]{order:1;flex:1 1 120px}
.filters.pinned > *:not([data-pin]):not([data-fmore]):not([data-reset]):not([data-f="q"]){order:4}

/* Opening animation (app only): the stem rises, then the market line traces across it and the arrow lands. */
#intro{position:fixed;inset:0;z-index:2000;background:var(--bg);color:var(--text);display:flex;align-items:center;justify-content:center;transition:opacity .4s ease}
#intro.out{opacity:0;pointer-events:none}
#intro .i-stem{transform-origin:100px 180px;transform:scaleY(0);animation:i-stem .34s cubic-bezier(.2,.8,.2,1) .1s forwards}
#intro .i-flat{stroke-dasharray:150;stroke-dashoffset:150;animation:i-flat .34s cubic-bezier(.4,0,.2,1) .4s forwards, i-fade .5s ease 1.05s forwards}
#intro .i-line{stroke-dasharray:175;stroke-dashoffset:175;animation:i-line .9s cubic-bezier(.4,0,.2,1) .95s forwards}
#intro .i-arrow{opacity:0;transform-origin:160px 36px;transform:scale(.4);animation:i-arrow .28s cubic-bezier(.2,1.4,.4,1) 1.72s forwards}
@keyframes i-flat{to{stroke-dashoffset:0}}
@keyframes i-fade{to{opacity:0}}
@keyframes i-stem{to{transform:scaleY(1)}}
@keyframes i-line{to{stroke-dashoffset:0}}
@keyframes i-arrow{to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){#intro .i-stem,#intro .i-flat,#intro .i-line,#intro .i-arrow{animation-duration:.01s;animation-delay:0s}}
.diag{font:11px/1.4 var(--mono);white-space:pre-wrap;word-break:break-word;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px;max-height:200px;overflow:auto}

/* Dynamic Island bar */
html{--sat:env(safe-area-inset-top,0px);--islandW:240px}
#islandBar{position:fixed;top:0;left:0;right:0;height:var(--sat);z-index:40;pointer-events:none}
/* The pills grow out of the screen corners: their outer edge is flush with the display and the
   rounded glass clips it, so the visible shape follows the iPhone's own curve. Text sits inset past
   the deepest point of that curve. */
#islandBar > button{pointer-events:auto;position:absolute;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:4px;height:32px;border:1px solid var(--line2);background:var(--panel);color:var(--text);font:600 11px var(--sans, system-ui);box-shadow:0 2px 10px var(--shadow);white-space:nowrap;overflow:hidden;max-width:calc((100% - var(--islandW)) / 2 - 6px)}
#ibSearch{left:0;border-left:0;border-radius:0 16px 16px 0;padding:0 10px 0 26px}
#ibFilter{right:0;border-right:0;border-radius:16px 0 0 16px;padding:0 26px 0 10px;flex-direction:row-reverse}
@media (max-width:420px){#islandBar > button span{display:none}#ibSearch{padding-right:8px}#ibFilter{padding-left:8px}}
#ibBackdrop{position:fixed;inset:0;z-index:38;background:rgba(0,0,0,.45)}
#ibSearchPanel{position:fixed;top:calc(var(--sat) + 8px);left:10px;right:10px;z-index:39;display:flex;gap:8px;padding:10px;background:var(--panel);border:1px solid var(--line2);border-radius:14px;box-shadow:0 12px 32px var(--shadow)}
#ibSearchPanel input{flex:1;min-width:0}
.filters.float{position:fixed !important;top:calc(var(--sat) + 8px) !important;left:10px !important;right:10px !important;z-index:39;max-height:75vh;overflow:auto;visibility:visible !important;box-shadow:0 12px 32px var(--shadow);border:1px solid var(--line2);border-radius:14px !important;padding:10px !important}
#islandBar[hidden],#ibSearchPanel[hidden],#ibBackdrop[hidden]{display:none}

/* Portfolio holdings as dropdown cards */
.pfmodes{margin-bottom:10px}
details.hold{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:8px}
details.hold summary{list-style:none;display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer}
details.hold summary::-webkit-details-marker{display:none}
.hold-tk{font:700 15px var(--mono);letter-spacing:.02em}
.hold-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hold-val{white-space:nowrap;font-family:var(--mono)}
.hold .chev{color:var(--dim);transition:transform .18s ease}
details.hold[open] .chev{transform:rotate(180deg)}
.hold-body{padding:0 14px 12px;border-top:1px solid var(--line)}
.hold-body .kv{margin-top:10px}
.hold-body .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}

/* Panes (wide screens) */
.pane{min-width:0}
.pane-head{display:none}
html.multi .pane-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
html.multi .pane-head select{flex:1;background:var(--panel2);border:1px solid var(--line2);border-radius:8px;padding:6px 8px;font-weight:600}
main.panes-2,main.panes-3{display:grid;gap:16px;align-items:start;max-width:none}
main.panes-2{grid-template-columns:1fr 1fr}
main.panes-3{grid-template-columns:1fr 1fr 1fr}
main.panes-2 .pane,main.panes-3 .pane{max-height:calc(100vh - var(--topH,0px) - 28px);overflow:auto;padding-right:2px;-webkit-overflow-scrolling:touch}
html.appmode main.panes-2 .pane,html.appmode main.panes-3 .pane{max-height:calc(100vh - var(--topH,0px) - 28px)}
.pane-ctl{margin-left:auto;display:inline-flex;gap:4px;align-items:center;padding:6px 0}
.pane-ctl .chip{padding:3px 9px}
/* Chat pull-tab (right edge) */
.chat-tab{position:fixed;right:0;top:50%;transform:translateY(-50%);width:36px;height:64px;border-radius:12px 0 0 12px;border:1px solid var(--line2);border-right:0;background:var(--panel);color:var(--accent);z-index:30;box-shadow:0 4px 16px var(--shadow);cursor:pointer;display:flex;align-items:center;justify-content:center}
.chat-tab:hover{width:42px}
.chat-tab[hidden]{display:none}
/* Liquid glass: translucent surfaces with a blurred, saturated backdrop and a specular top edge */
html.glass .top,html.glass .filters.pinned,html.glass #islandBar > button,html.glass #ibSearchPanel,html.glass .filters.float,html.glass .modal,html.glass .drawer,html.glass .help-fab,html.glass .totop,html.glass .chat-tab,html.glass .biolock{background:color-mix(in srgb,var(--panel) 62%,transparent);-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);border-color:color-mix(in srgb,var(--line2) 70%,rgba(255,255,255,.35));box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 28px var(--shadow)}
html.glass .top{box-shadow:inset 0 -1px 0 rgba(255,255,255,.06)}
html.glass .chip[data-on="1"],html.glass .btn.primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
html.glass .row,html.glass .card,html.glass details.hold{background:color-mix(in srgb,var(--panel) 88%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
@media (prefers-reduced-transparency:reduce){html.glass .top,html.glass .modal,html.glass .drawer,html.glass .filters.pinned{background:var(--panel);-webkit-backdrop-filter:none;backdrop-filter:none}}
html.chattab main{padding-right:max(52px,2.5vw)}

/* Search / Tips / Trades */
.search-bar input{flex:1 1 200px;font-size:16px}
.tips-bar{padding:8px 10px}
.tcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;margin-bottom:12px}
.tcard .t-head{margin-bottom:6px}
.tcard .actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:10px}
.modal.sheet{max-width:640px}
.btn.track.on{border-color:var(--accent);color:var(--accent)}
.btn.log{border-color:var(--line2)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media (max-width:480px){.grid2{grid-template-columns:1fr}}
.row.trade .right{gap:6px}

/* Chat tab menu, lounge popup, lock-screen animation, notification highlight */
.chat-menu{position:fixed;right:44px;top:50%;transform:translateY(-50%);z-index:31;display:flex;flex-direction:column;gap:6px;background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:8px;box-shadow:0 8px 24px var(--shadow)}
.chat-menu[hidden]{display:none}
.chat-menu button{background:var(--panel2);border:1px solid var(--line2);border-radius:8px;padding:8px 12px;color:var(--text);font-weight:600;cursor:pointer;white-space:nowrap}
.chat-menu button:hover{border-color:var(--accent)}
.lounge-pop .lounge-pop-body{flex:1;overflow:auto;padding:12px}
.lounge-pop .lounge-msgs{max-height:60vh}
.biolock{flex-direction:column;justify-content:space-between;padding-top:calc(env(safe-area-inset-top,0px) + 18vh);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 40px)}
.lock-foot{text-align:center}
.intro-anim .i-stem{transform-origin:100px 180px;transform:scaleY(0);animation:i-stem .34s cubic-bezier(.2,.8,.2,1) .1s forwards}
.intro-anim .i-flat{stroke-dasharray:150;stroke-dashoffset:150;animation:i-flat .34s cubic-bezier(.4,0,.2,1) .4s forwards, i-fade .5s ease 1.05s forwards}
.intro-anim .i-line{stroke-dasharray:175;stroke-dashoffset:175;animation:i-line .9s cubic-bezier(.4,0,.2,1) .95s forwards}
.intro-anim .i-arrow{opacity:0;transform-origin:160px 36px;transform:scale(.4);animation:i-arrow .28s cubic-bezier(.2,1.4,.4,1) 1.72s forwards}
.row.flash{box-shadow:0 0 0 2px var(--accent);transition:box-shadow .3s}

/* Status pill and buttons on one baseline; brand centred on phones */
.right .pill,.right .btn.small{height:30px;display:inline-flex;align-items:center;box-sizing:border-box;line-height:1}
/* Portrait phones: everything in the header is centred */
@media (max-width:700px){.top-row{justify-content:center;text-align:center}.top-row .brand{flex-basis:100%;justify-content:center}.top-row .idx,.top-row .clocks,.top-row .status{justify-content:center;width:100%}.tabs{justify-content:center}}
.paircode{font:700 34px var(--mono);letter-spacing:.12em;text-align:center;margin:10px 0}

/* Layout popup + mirrors + landscape notch */
.layout-pop{position:absolute;z-index:45;background:var(--panel);border:1px solid var(--line2);border-radius:14px;padding:12px;box-shadow:0 12px 32px var(--shadow);min-width:240px;max-width:min(92vw,520px)}
.lp-row{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.lp-panel{border-top:1px solid var(--line);padding-top:8px;margin-top:8px;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.lp-panel .flabel{width:100%}
.lp-opt{display:inline-flex;align-items:center;gap:5px;font-size:13px;cursor:pointer}
.lp-opt input{margin:0}
.pane-title{font-weight:700;flex:1}
.view.mirror{opacity:.96}
main{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
html.appmode .filters.pinned{padding-left:max(10px,env(safe-area-inset-left,0px));padding-right:max(10px,env(safe-area-inset-right,0px))}
#ibSearchPanel,.filters.float{left:max(10px,env(safe-area-inset-left,0px)) !important;right:max(10px,env(safe-area-inset-right,0px)) !important}
.drawer,.lounge-pop{padding-right:env(safe-area-inset-right,0px)}
.chat-tab{right:env(safe-area-inset-right,0px)}
.chat-menu{right:calc(44px + env(safe-area-inset-right,0px))}
.totop{right:calc(14px + env(safe-area-inset-right,0px))}
.help-wrap{left:calc(14px + env(safe-area-inset-left,0px))}
.biolock,#intro{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}

/* Tips dropdown hanging off the tab bar */
.tab-dd{position:relative;display:inline-block}
.tab-dd .tab small{font-size:10px;font-weight:600;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.tab-dd .caret{display:inline-block;width:6px;height:6px;border-right:2px solid var(--dim);border-bottom:2px solid var(--dim);transform:rotate(45deg) translateY(-3px);margin-left:2px}
.tab-menu{display:none;position:absolute;left:50%;top:100%;transform:translateX(-50%);min-width:170px;background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:6px;box-shadow:0 12px 30px var(--shadow);z-index:30}
.tab-dd.open .tab-menu{display:block}
@media (hover:hover){.tab-dd:hover .tab-menu{display:block}}
.tab-menu button{display:block;width:100%;text-align:left;background:none;border:0;padding:9px 12px;border-radius:8px;color:var(--text);font:600 14px inherit;cursor:pointer}
.tab-menu button:hover{background:var(--panel2)}
.tab-menu button.on{color:var(--accent)}
.tab-menu button.on::after{content:" ✓";float:right}
.tips-bar{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.tips-bar .tips-sel{margin-left:auto;background:var(--panel2);border:1px solid var(--line2);border-radius:8px;padding:5px 8px}
html.glass .tab-menu{background:color-mix(in srgb,var(--panel) 70%,transparent);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%)}

/* Settings tabs */
.modal.settings{max-width:640px}
.set-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.set-tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--line);margin:0 0 12px;padding-bottom:2px;scrollbar-width:none}
.set-tabs::-webkit-scrollbar{display:none}
.set-tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:8px 10px;color:var(--dim);font-weight:600;font-size:14px;white-space:nowrap;cursor:pointer}
.set-tabs button[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.set-panel h3:first-child{margin-top:0}
.set-foot{position:sticky;bottom:-16px;background:var(--panel);padding:10px 0 4px;margin-top:14px}

/* Settings gear beside the logo */
.brand .gear{margin-left:8px;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--line2);background:var(--panel);color:var(--dim);cursor:pointer;padding:0}
.brand .gear:hover{color:var(--accent);border-color:var(--accent)}
html.glass .brand .gear{background:color-mix(in srgb,var(--panel) 62%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
main{padding-top:max(18px,var(--mainGap,18px))}
html.appmode main{scroll-padding-top:calc(var(--topH,110px) + 16px)}

/* iPhone landscape: compact tiles (ticker, call, numbers, buttons, status); tap the tile for the full write-up */
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  html.cmp .pane .row[data-id]{grid-template-columns:1fr auto;gap:6px;padding:8px 10px}
  html.cmp .pane .row[data-id] > div:first-child{display:none}
  html.cmp .pane .row[data-id] .mech,html.cmp .pane .row[data-id] .detail,html.cmp .pane .row[data-id] .more,html.cmp .pane .row[data-id] > div:nth-child(2) > .sub,html.cmp .pane .row[data-id] .tag{display:none}
  html.cmp .pane .row[data-id] .kv{font-size:12px;gap:4px 10px}
  html.cmp .pane .row[data-id] .kv > span:nth-child(n+3){display:none}
  html.cmp .pane .row[data-id]{grid-template-columns:1fr}
  html.cmp .pane .row[data-id] .right{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:6px}
  html.cmp .pane .row[data-id] .right .btn.small,html.cmp .pane .row[data-id] .right .pill{height:28px;padding:0 10px;font-size:12px}
  html.cmp .pane .row[data-id] .bar.rowbar{margin:2px -10px -8px}
  html.cmp .pane .row[data-id] .t-head{cursor:pointer}
  html.cmp .pane .row[data-id] .t-head::after{content:"▸";color:var(--dim);margin-left:6px;font-size:12px}
}
.modal.rowsheet .row{border:0;padding:0;background:none;display:block}
.modal.rowsheet .row > div:first-child{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.modal.rowsheet .row .right{justify-content:flex-start;margin-top:12px}
.modal.rowsheet .row .more{display:none}

/* Several panels side by side: the page itself stays put; each panel scrolls on its own */
html.multi,html.multi body{height:100%;overflow:hidden;overscroll-behavior:none}
html.multi main{box-sizing:border-box;height:calc(100dvh - var(--topH,0px));overflow:hidden;padding-bottom:10px;align-items:stretch}
html.multi.appmode main{height:100dvh}
html.multi main.panes-2 .pane,html.multi main.panes-3 .pane{max-height:none;height:100%;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
html.multi .totop{display:none}
/* iPhone landscape: one-line header (logo, gear, indices, Ask Claude) and a single scrolling tab row,
   so the panels get most of the short screen */
@media (orientation:landscape) and (max-height:500px){
  .top-row{flex-wrap:nowrap;gap:10px;padding:4px max(12px,env(safe-area-inset-right,0px)) 4px max(12px,env(safe-area-inset-left,0px));overflow-x:auto;scrollbar-width:none}
  .top-row::-webkit-scrollbar{display:none}
  .top-row .brand{flex:0 0 auto}
  .top-row .idx{flex-wrap:nowrap}
  .top-row .clocks,.top-row .status .dot,.top-row #status{display:none}
  .top-row .status{margin-left:auto;flex:0 0 auto}
  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
  .tabs::-webkit-scrollbar{display:none}
  .tab{padding:6px 10px;flex:0 0 auto}
  .tab-menu{position:fixed;left:auto;transform:none}
}
.tabs{align-items:center}
.tab-dd{display:inline-flex;align-items:stretch}
.pane-ctl{flex:0 0 auto;white-space:nowrap}
.pane-ctl .chip{white-space:nowrap}

/* ================= TipSheet "Tape" look: paper, ink rules, serif headlines ================= */
body{font:15px/1.45 var(--sans)}
.num,.mono,.kv b,.tape .num,.stat .n{font-variant-numeric:tabular-nums}
/* header: logo row, ticker tape, tabs — separated by ink rules */
.top{background:var(--top-bg);border-bottom:2px solid var(--ink);backdrop-filter:none}
html.glass .top{background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);box-shadow:none}
.top-row{justify-content:center;padding:10px 16px 8px}
.brand .gear{border-color:var(--line2);background:transparent}
.tape{background:var(--ink);color:var(--paper);overflow:hidden;white-space:nowrap;position:relative;height:30px;display:flex;align-items:center;mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.tape-track{display:flex;width:max-content;animation:tape var(--tape-dur,30s) linear infinite}
.tape:hover .tape-track{animation-play-state:paused}
.tape-run{display:flex;align-items:center;gap:10px;padding-right:10px}
@keyframes tape{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tape-track{animation:none}}
.tape-item{background:none;border:0;color:inherit;font:13px var(--mono);padding:0 2px;display:inline-flex;gap:6px;align-items:baseline;cursor:pointer}
.tape-item b{font-weight:600;letter-spacing:.02em}
.tape-item small{font-size:9px;opacity:.6;text-transform:uppercase;letter-spacing:.08em}
.tape .pos{color:#5fe0a0!important}.tape .neg{color:#ff8a80!important}
:root[data-theme="light"] .tape .pos{color:#5fe0a0!important}
.tape-dot{opacity:.35}
.tabs{border-top:0;padding-top:2px}
.tab{text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:600;color:var(--dim);padding:10px 12px;border-bottom:2px solid transparent}
.tab[aria-selected="true"]{color:var(--text);border-bottom-color:var(--ink)}
.tab-icon{display:inline-flex;align-items:center;justify-content:center;padding:8px 10px}
.tab-dd .tab small{letter-spacing:.06em;font-size:9px;color:var(--text)}
.tab-dd .tab[aria-selected="true"] small{color:var(--dim)}
/* section and panel titles */
h2{font:600 12px var(--sans);text-transform:uppercase;letter-spacing:.12em;color:var(--dim);margin:22px 0 10px}
.pane-title,.tips-bar .pane-title{font:600 12px var(--sans);text-transform:uppercase;letter-spacing:.12em;color:var(--dim)}
.basis-note{font:italic 14px/1.45 var(--serif);color:var(--dim)}
/* filters: quiet box, flat chips; active = ink */
.filters{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.flabel{font-size:10.5px;letter-spacing:.12em;color:var(--faint)}
.chip{background:transparent;border:1px solid var(--line2);border-radius:3px;color:var(--dim);font-size:12.5px;padding:4px 10px}
.chip[data-on="1"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.filters input[type=search],.filters input[type=date],.filters select,.filters input[type=number],input,select,textarea{border-radius:3px}
/* scorecard: stats share ink rules instead of floating boxes */
.stats{gap:0;border-top:1px solid var(--ink);border-left:1px solid var(--ink);margin-bottom:16px}
.stat{border:0;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);border-radius:0;background:var(--panel);padding:10px 12px}
.stat .n{font:600 24px/1.15 var(--serif)}
.stat .l{font-size:11.5px;text-transform:none;letter-spacing:0;color:var(--dim)}
/* tiles: paper cards; the right-hand column is the ticket stub */
.row{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:none}
.row > .right{align-self:stretch;margin:-10px -12px -10px 0;padding:10px 14px;background:var(--panel2);border-left:1.5px dashed var(--line2);flex-direction:column;justify-content:center;align-items:stretch;gap:6px;min-width:128px}
.row > .right .pill{text-align:center}
.row.outlier{border-left:3px solid var(--outlier)}
.tk{font:700 16px var(--sans);letter-spacing:.01em}
.mech{font:17px/1.4 var(--serif);color:var(--text)}
#v-news .row a.mech{font:600 18px/1.3 var(--serif);text-decoration:none}
#v-news .row a.mech:hover{text-decoration:underline}
.sub{font-size:12.5px}
.kv{font-size:12.5px}
.kv b{font-family:var(--mono);font-weight:600}
.time{font:12px var(--mono);color:var(--faint)}
.pill{border-radius:3px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px}
.pill.up,.pill.down{text-transform:none;letter-spacing:0;font-size:12px}
.grade{border-radius:3px;font-family:var(--sans)}
.tag{border-radius:3px}
.btn{border-radius:3px;background:transparent;border-color:var(--line2)}
.btn:hover{border-color:var(--ink)}
.btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.trade{color:var(--bull);border-color:var(--bull)}
.more{color:var(--dim)}
/* headline photos sit where the sparkline was */
.nimg{display:none}
.row.has-img{grid-template-columns:118px 1fr auto 112px}
.row.has-img > .nimg{display:block;position:relative;grid-column:4;grid-row:1;align-self:stretch;margin:-10px -12px -10px 0;min-height:84px;background:var(--panel2);border-left:1px solid var(--line);overflow:hidden}
.nimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.row.has-img > .right{margin-right:0}
@media (max-width:760px){
  .row.has-img{grid-template-columns:1fr 92px}
  .row.has-img > .nimg{grid-column:2;grid-row:1 / span 2;align-self:start;height:104px;margin:-10px -12px 0 0;min-height:0;border-left:1px solid var(--line);border-bottom:1px solid var(--line);border-bottom-left-radius:4px}
  .row.has-img > .right{grid-column:1 / -1;margin-right:-12px}
}
/* cards, dropdowns, modals follow the paper */
.card,.tcard,details.hold{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.modal{border-radius:6px;background:var(--panel)}
.modal h2,.modal h3{font-family:var(--serif)}
.modal h2{font:700 24px var(--serif);text-transform:none;letter-spacing:0;color:var(--text)}
h3{font:600 15px var(--serif)}
.set-tabs button{text-transform:uppercase;letter-spacing:.08em;font-size:12px}
.set-tabs button[aria-selected="true"]{color:var(--text);border-bottom-color:var(--ink)}
.chat-menu{position:fixed;top:0;right:0;transform:none;border-radius:4px;background:var(--panel);border:1px solid var(--ink)}
.chat-menu button{border-radius:3px;background:transparent;text-align:left}
.tab-menu{border-radius:4px;border-color:var(--ink)}
/* bottom status bar: clocks and market status */
.statusbar{position:fixed;left:0;right:0;bottom:0;z-index:25;display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--ink);color:var(--paper);font:12px var(--mono);padding:6px max(14px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px))}
.statusbar .clocks{display:flex;gap:14px;flex-wrap:nowrap;overflow:hidden}
.statusbar .clock{background:none;border:0;padding:0;font:12px var(--mono);color:inherit;white-space:nowrap}
.statusbar .clock small{opacity:.6;margin-right:5px;letter-spacing:.06em}
.statusbar .status{margin:0;color:inherit;font:12px var(--sans);white-space:nowrap;display:flex;align-items:center;gap:7px}
.statusbar .dot.ok{background:#5fe0a0}
@media (max-width:420px){.statusbar .status #status{max-width:150px;overflow:hidden;text-overflow:ellipsis}}
main{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
.help-wrap,.totop{bottom:calc(44px + env(safe-area-inset-bottom,0px))}
.toast{bottom:calc(48px + env(safe-area-inset-bottom,0px))}
html.multi main{height:calc(100dvh - var(--topH,0px) - 32px - env(safe-area-inset-bottom,0px))}
html.multi.appmode main{height:calc(100dvh - 32px - env(safe-area-inset-bottom,0px))}
/* page footer: site, contact, copyright */
.site-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 10px;margin:34px 0 8px;padding-top:14px;border-top:2px solid var(--ink);font:13px var(--serif);color:var(--dim)}
.site-foot a{color:var(--text);text-decoration:none}
.site-foot a:hover{text-decoration:underline}
html.multi .site-foot{display:none}
/* phones: the stub becomes a strip along the bottom of the ticket */
@media (max-width:700px){
  .row > .right{margin:4px -12px -10px;border-left:0;border-top:1.5px dashed var(--line2);flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;min-width:0;padding:8px 12px}
  .top-row .brand{flex-basis:auto}
}
html.cmp .pane .row[data-id] > .right{margin:4px -10px -8px;border-left:0;border-top:1.5px dashed var(--line2);padding:6px 10px}
/* stock prices and moves keep the market colours everywhere */
.pos,.pill.up,.pill.win,.stat.bull .n{color:var(--bull)!important}
.neg,.pill.down,.pill.loss,.stat.bear .n{color:var(--bear)!important}
.top-row .idx,.top-row #chatBtn{display:none!important}
.statusbar .clock{display:inline-flex;align-items:baseline}
.statusbar .clocks{flex:1 1 auto;min-width:0}
.statusbar .status{flex:0 1 auto;min-width:0;overflow:hidden}
.statusbar .status #status{overflow:hidden;text-overflow:ellipsis}
.statusbar .clocks{flex:0 0 auto;overflow:visible}
.statusbar .status{flex:1 1 auto;justify-content:flex-end;min-width:0}
.row > .right:empty{display:none}
/* v6.1: settings gear sits at the far end of the tab row (after the layout toggle);
   portrait phones keep it beside the logo */
.tab-end{margin-left:auto;display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding-right:2px}
.tab-end .pane-ctl{margin-left:0}
.tab-gear{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--line2);background:transparent;color:var(--dim);cursor:pointer;padding:0}
.tab-gear:hover{color:var(--accent);border-color:var(--accent)}
.tab-gear svg{width:16px;height:16px}
.brand .gear{display:none}
@media (max-width:700px) and (orientation:portrait){
  .brand .gear{display:inline-flex}
  .tab-gear{display:none}
}
html.upright .brand .gear{display:inline-flex}
html.upright .tab-gear{display:none}
.statusbar .clock small{text-transform:uppercase}
/* v6.1 paged guide */
.modal.help.guide{width:min(820px,100%);display:flex;flex-direction:column}
.guide-body{display:grid;grid-template-columns:200px 1fr;gap:18px;min-height:0;flex:1 1 auto}
.guide-toc{list-style:none;margin:0;padding:0 12px 0 0;border-right:1px solid var(--line);overflow:auto;counter-reset:g}
.guide-toc li{counter-increment:g}
.guide-toc button{display:flex;gap:8px;width:100%;text-align:left;background:none;border:0;padding:6px 8px;border-radius:4px;color:var(--dim);font:13px/1.3 var(--sans);cursor:pointer}
.guide-toc button::before{content:counter(g);font:11px var(--mono);min-width:16px;opacity:.7;padding-top:1px}
.guide-toc button:hover{color:var(--text);background:var(--panel2)}
.guide-toc button[aria-current="step"]{color:var(--text);background:var(--panel2);font-weight:600}
.guide-page{overflow:auto;min-height:260px;padding-right:4px}
.guide-step{font:11px var(--mono);color:var(--dim);letter-spacing:.08em;text-transform:uppercase}
.modal.help.guide .guide-page h3{font:600 24px/1.2 var(--serif);margin:4px 0 12px}
.modal.help.guide .guide-page p{margin:0 0 12px;line-height:1.6;max-width:62ch}
.guide-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.guide-count{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.guide-count i{width:6px;height:6px;border-radius:50%;background:var(--line2)}
.guide-count i.past{background:var(--dim)}
.guide-count i.on{background:var(--text);width:16px;border-radius:3px}
@media (max-width:640px){
  .guide-body{grid-template-columns:1fr;gap:10px}
  .guide-toc{display:flex;gap:4px;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:0 0 8px}
  .guide-toc li{flex:0 0 auto}
  .guide-toc button{white-space:nowrap}
  .guide-page{min-height:0}
  .guide-count{display:none}
}
/* v6.1 info buttons: page explanations live in a pop-up */
.info-i{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:0;background:transparent;color:var(--dim);cursor:pointer;padding:0;flex:0 0 auto}
.info-i:hover,.info-i:focus-visible{color:var(--text);background:var(--panel2)}
.filters.has-info:not(.pinned),.stats.has-info{position:relative}
.filters.has-info:not(.pinned){padding-right:40px}
.filters.pinned > .info-i{position:static}
.filters.has-info > .info-i,.stats.has-info > .info-i{position:absolute;top:6px;right:6px;z-index:1}
.search-bar .info-i{margin-left:2px}
.page-info{display:flex;justify-content:flex-end;margin:-4px 0 4px}
.modal.info-pop{width:min(480px,100%)}
.modal.info-pop p{margin:10px 0 0;line-height:1.55;color:var(--text)}
.modal.help.guide .guide-page h3{text-transform:none;letter-spacing:0;color:var(--text)}
/* Track · Log · Trade sit side by side in the stub, status pill above */
.row > .right{flex-direction:row;flex-wrap:wrap;align-content:center}
.row > .right > .pill{flex:1 0 100%}
.row > .right > .btn.small{flex:1 1 auto;justify-content:center}
/* v6.1 summary boxes on upright phones: always a full rectangle.
   even → 2 columns · odd → 2 columns with the first box spanning the top · multiples of 3 → 3 columns · 8 → 4×2 compact */
@media (max-width:600px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats:has(> .stat:nth-of-type(2):last-of-type){grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats:has(> .stat:last-of-type:nth-of-type(odd)) > .stat:first-of-type{grid-column:1 / -1}
  .stats:has(> .stat:last-of-type:nth-of-type(3n)){grid-template-columns:repeat(3,minmax(0,1fr))}
  .stats:has(> .stat:last-of-type:nth-of-type(3n)) > .stat:first-of-type{grid-column:auto}
  .stats:has(> .stat:last-of-type:nth-of-type(3n)) .stat .n{font-size:19px}
  .stats:has(> .stat:nth-of-type(8):last-of-type){grid-template-columns:repeat(4,minmax(0,1fr))}
  .stats:has(> .stat:nth-of-type(8):last-of-type) .stat{padding:8px 7px}
  .stats:has(> .stat:nth-of-type(8):last-of-type) .stat .n{font-size:16px}
  .stats:has(> .stat:nth-of-type(8):last-of-type) .stat .l{font-size:10px;line-height:1.25}
  .stat .l{overflow-wrap:anywhere}
}
/* filter dropdowns match the chips beside them */
body .filters select{background:transparent;color:var(--dim);font:12.5px/1.3 var(--sans)!important;padding:4px 8px;border:1px solid var(--line2);border-radius:3px}
/* iPad held upright: one even row of boxes (8 → 4×2) */
@media (min-width:601px){
  html.upright .stats{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  html.upright .stats:has(> .stat:nth-of-type(7)){grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* upright phones/iPads: filters can be hidden; a Show filters button comes back at the bottom */
.chip.fhide{display:none}
html.upright .chip.fhide{display:inline-flex}
html.upright.fhide .filters[data-kind]{display:none!important}
html.upright.fhide .filters-ph{display:none!important}
.show-filters{display:none;position:fixed;left:50%;transform:translateX(-50%);bottom:calc(52px + env(safe-area-inset-bottom,0px));z-index:34;background:var(--panel);color:var(--text);border:1px solid var(--line2);border-radius:999px;padding:7px 14px;font:600 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;box-shadow:0 4px 14px rgba(0,0,0,.12);cursor:pointer}
html.upright.fhide:has(.filters[data-kind]:not([hidden] .filters)) .show-filters{display:inline-flex}
.row > .right{max-width:236px}
.row > .right > .btn.small{flex:1 1 0;min-width:0;padding-left:6px;padding-right:6px}
@media (max-width:700px){ .row > .right{max-width:none} }
.card > .page-info:first-child{float:right;margin:-6px -6px 0 8px}
/* upright phones & iPads: the tab row is centred as a block */
html.upright .tabs{justify-content:center;flex-wrap:wrap;overflow:visible;column-gap:4px}
html.upright .tabs .tab,html.upright .tabs .tab-dd{flex:0 0 auto}
html.upright .tab-end{display:none}
@media (max-width:700px) and (orientation:portrait){
  .tabs{justify-content:center}
  .tabs .tab,.tabs .tab-dd{flex:0 0 auto}
  .tab-end:not(:has(.pane-ctl)){display:none}
}
@media (max-width:700px){ html.upright .tabs{column-gap:0;padding-left:8px;padding-right:8px} html.upright .tabs .tab{padding:8px 8px;letter-spacing:.06em;font-size:11.5px} html.upright .tabs .tab-icon{padding:8px 7px} }
@media (max-width:389px){ html.upright .tabs .tab{padding:8px 6px;letter-spacing:.04em;font-size:11px} html.upright .tabs .tab-icon{padding:8px 5px} }
/* v6.3 news tiles: chart | headline | sentiment | company logo */
.row.news-row:has(> .nlogo){grid-template-columns:118px 1fr auto 60px}
.nlogo{grid-column:4;grid-row:1;align-self:center;justify-self:end;position:relative;width:52px;height:52px;border-radius:10px;overflow:hidden;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.nlogo span{font:700 13px/1 var(--mono);letter-spacing:.02em;color:#1d1b17}
.nlogo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:6px;box-sizing:border-box;background:#fff}
.row.news-row > .right:not(:empty){margin-right:0}
@media (max-width:760px){
  .row.news-row:has(> .nlogo){grid-template-columns:minmax(0,1fr) 48px}
  .row.news-row > .nlogo{grid-column:2;grid-row:1;align-self:start;justify-self:end;width:44px;height:44px;border-radius:8px}
  .row.news-row:has(> .nlogo) > div:nth-child(2){grid-column:1 / -1}
  .row.news-row:has(> .nlogo) > .right{grid-column:1 / -1;margin-right:-12px}
}
/* Settings → Tickers */
.tk-add{display:flex;gap:8px;margin:10px 0 4px}
.modal .tk-add input{flex:1;width:auto}
.tk-row{display:grid;grid-template-columns:auto 1fr auto 28px;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.tk-name{background:none;border:0;padding:0;font:600 14px var(--mono);color:var(--text);cursor:pointer;text-align:left}
.tk-name:hover{text-decoration:underline}
.tk-sw{position:relative;display:inline-block;width:42px;height:24px;cursor:pointer}
.modal .tk-sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.tk-sw span{position:absolute;inset:0;border-radius:999px;background:var(--line2);transition:background .15s;pointer-events:none}
.tk-sw span::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--panel);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.tk-sw input:checked + span{background:var(--bull)}
.tk-sw input:checked + span::after{transform:translateX(18px)}
.tk-sw input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.tk-x{width:28px;height:28px;border:0;background:none;color:var(--dim);font-size:18px;cursor:pointer;border-radius:50%}
button.tk-x:hover{color:var(--bear);background:var(--panel2)}
/* upright phones: a slimmer bottom bar (about half the height) */
.statusbar .clock small .pin{display:inline-block;vertical-align:-1px;opacity:1}
@media (max-width:700px) and (orientation:portrait){
  .statusbar{padding-top:3px;padding-bottom:calc(3px + env(safe-area-inset-bottom,0px) * .35);font-size:11px;gap:8px}
  .statusbar .clock,.statusbar .status{font-size:11px}
  .statusbar .clocks{gap:10px}
  main{padding-bottom:calc(40px + env(safe-area-inset-bottom,0px) * .35)}
  .help-wrap,.totop{bottom:calc(30px + env(safe-area-inset-bottom,0px) * .35)}
  .show-filters{bottom:calc(32px + env(safe-area-inset-bottom,0px) * .35)}
}
/* rounded iPhone corners: keep the bottom bar's text clear of the curve */
@media (max-width:700px) and (orientation:portrait){
  .statusbar{padding-left:max(14px,calc(env(safe-area-inset-bottom,0px) * .75));padding-right:max(14px,calc(env(safe-area-inset-bottom,0px) * .75))}
}
/* filter search box, date range and number fields match the chips (the Search page keeps its big box) */
body .filters[data-kind] input[type=search],body .filters[data-kind] input[type=date],body .filters[data-kind] input[type=number]{background:transparent;color:var(--text);font:12.5px/1.3 var(--sans)!important;padding:4px 8px;border:1px solid var(--line2);border-radius:3px;height:28px;box-sizing:border-box}
body .filters[data-kind] input[type=search]::placeholder{color:var(--dim);opacity:1}
body .filters[data-kind] input[type=date]{-webkit-appearance:none;appearance:none;min-width:118px;width:auto;color:var(--dim)}
body .filters[data-kind] input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0}
body .filters[data-kind] input[type=date]::-webkit-calendar-picker-indicator{opacity:.55;margin-left:4px}
body .filters[data-kind] select{height:28px;box-sizing:border-box}
@media (max-width:700px){ body .filters[data-kind] input[type=date]{min-width:0;width:128px} }
/* phones on their side: the same slim bottom bar as upright */
@media (orientation:landscape) and (max-height:500px){
  .statusbar{padding-top:3px;padding-bottom:calc(3px + env(safe-area-inset-bottom,0px) * .35);font-size:11px;gap:8px}
  .statusbar .clock,.statusbar .status{font-size:11px}
  .statusbar .clocks{gap:10px}
  main{padding-bottom:calc(40px + env(safe-area-inset-bottom,0px) * .35)}
  .help-wrap,.totop{bottom:calc(30px + env(safe-area-inset-bottom,0px) * .35)}
}
/* v6.8 per-page switches (Settings → Display) */
html.nostats .view > .stats,html.nostats-news #v-news > .stats,html.nostats-predictions #v-predictions > .stats,html.nostats-options #v-options > .stats,html.nostats-trades #v-trades > .stats,html.nostats-portfolio #v-portfolio > .stats,html.nostats-performance #v-performance > .stats,html.nostats-admin #v-admin > .stats{display:none!important}
html.upright.nofilt-news #v-news > .filters[data-kind],html.upright.nofilt-predictions #v-predictions > .filters[data-kind],html.upright.nofilt-options #v-options > .filters[data-kind],html.upright.nofilt-performance #v-performance > .filters[data-kind]{display:none!important}
html.upright.nofilt-news:has(#v-news:not([hidden]) > .filters[data-kind]) .show-filters,html.upright.nofilt-predictions:has(#v-tips:not([hidden]) #v-predictions:not([hidden]) > .filters[data-kind]) .show-filters,html.upright.nofilt-options:has(#v-tips:not([hidden]) #v-options:not([hidden]) > .filters[data-kind]) .show-filters,html.upright.nofilt-performance:has(#v-performance:not([hidden]) > .filters[data-kind]) .show-filters{display:inline-flex}
.pg-chks{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;margin:2px 0 6px 26px}
.pg-chks .hint{flex-basis:100%}
.pg-chks.off{opacity:.45;pointer-events:none}
/* the island Filters button opens the filter box even when it's hidden or pinned on this page */
html .filters[data-kind].float{display:flex!important}
html.multi .tips-bar{display:none}
html.multi .pane-head{min-height:30px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:8px}
/* city labels on the bottom bar: readable on the ink bar in both themes */
.statusbar .clock small{color:inherit;opacity:.78;font-weight:600}
.statusbar .clock small .pin{opacity:1}