@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* =====================================================================
   JournalDesk — graphite / indigo
   Brand is indigo. Green and red belong to money only, and use the
   exchange's own values so they read instantly.
   Motion: opacity, translateY, width. Never 3D on interactive elements.
   ===================================================================== */

:root{
  --f:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --f-num:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --rail-w:76px;
  --r:18px; --r-md:13px; --r-sm:10px; --r-xs:7px; --pill:999px;
  --ease:cubic-bezier(.2,.8,.3,1);
  --t:.2s; --t-rail:.3s;
  --night:#0D111A; --night-2:#141A26; --night-ink:#EEF1F8; --night-ink-2:#8592AD;
  --i-top-a:#CFC7FF; --i-top-b:#A99BFF;
  --i-left-a:#8878FA; --i-left-b:#6D5EF6;
  --i-right-a:#5A4BD1; --i-right-b:#4133A8;
}
html.rail-open{--rail-w:248px}

html[data-theme='light']{
  --canvas:#F2F4F8; --card:#FFFFFF; --sunken:#F4F6FA; --field:#F4F6FA;
  --ink:#0C1220; --ink-2:#4A5670; --ink-3:#7B879F;
  --line:rgba(12,18,32,.09); --line-2:rgba(12,18,32,.055);
  --brand:#5B4BE0; --brand-soft:rgba(91,75,224,.10); --brand-ink:#4133A8;
  --gain:#06A66B; --loss:#D32F3B; --warn:#C9950A;
  --shadow:0 1px 2px rgba(12,18,32,.05),0 8px 24px rgba(12,18,32,.06);
  --shadow-lg:0 2px 8px rgba(12,18,32,.07),0 24px 56px rgba(12,18,32,.11);
  --scheme:light;
}
html[data-theme='dark']{
  --canvas:#0A0D14; --card:#111621; --sunken:#161C29; --field:#0D1119;
  --ink:#E9EDF5; --ink-2:#9AA6BD; --ink-3:#6B7793;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.05);
  --brand:#6D5EF6; --brand-soft:rgba(109,94,246,.16); --brand-ink:#C7BEFF;
  --gain:#16C784; --loss:#EA3943; --warn:#F0B90B;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3);
  --shadow-lg:0 2px 10px rgba(0,0,0,.5),0 24px 56px rgba(0,0,0,.45);
  --scheme:dark;
}

*{box-sizing:border-box}
html{color-scheme:var(--scheme)}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--f);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;letter-spacing:-.006em}
html.theming body,html.theming .panel,html.theming .card,html.theming .stat,html.theming .tablewrap{
  transition:background-color var(--t) var(--ease),color var(--t) var(--ease) !important}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.03em;line-height:1.15}
h1{font-size:clamp(1.55rem,2.7vw,2rem)} h2{font-size:1.3rem} h3{font-size:1rem;font-weight:600}
a{color:var(--ink);text-decoration:none}
.mono,.num{font-family:var(--f-num);font-variant-numeric:tabular-nums}
.up{color:var(--gain)} .down{color:var(--loss)} .muted{color:var(--ink-3)}
.small{font-size:.82rem} .center{text-align:center} .right{text-align:right} .nowrap{white-space:nowrap}
.spacer{flex:1}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
::selection{background:var(--brand);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:20px;border:3px solid var(--canvas)}
.ambient,.scene{display:none}

/* ---- isometric icons ---- */
.ic{width:24px;height:24px;display:block;flex:none;transition:transform var(--t) var(--ease),filter var(--t)}
.ic-sm{width:19px;height:19px} .ic-xl{width:30px;height:30px}
/* The symbols paint themselves with currentColor, so all we set here is
   `color` — the one thing that inherits into a <use> shadow tree. */
.ic-av{width:60%;height:60%;display:block;color:rgba(255,255,255,.94)}
.avatar{color:rgba(255,255,255,.94)}
.avatar.av2,.avatar.av5,.avatar.av9{color:rgba(26,18,0,.68)}
/* 3D tilt on the icon only. .ico takes no pointer events, so a click can
   never land on a transformed surface -- that was the cause of BUG 6. */
.rail-item .ico{pointer-events:none;perspective:520px}
.rail-item .ic{transition:transform .34s var(--ease),filter var(--t)}
.rail-item:hover .ic{transform:rotateY(-22deg) rotateX(10deg) translateY(-2px) scale(1.06)}
.rail-item.on .ic{transform:rotateY(-14deg) rotateX(7deg) scale(1.04)}
.rail-brand .ic{transition:transform .4s var(--ease)}
.rail-brand:hover .ic{transform:rotateY(-28deg) rotateX(12deg) scale(1.08)}
.rail-toggle .ic,.themeswitch .ic{transform:none}
.rail-toggle:hover .ic{transform:translateX(2px)}

/* ---- collapsible sidebar ---- */
.app{display:flex;min-height:100vh;padding:12px;gap:12px}
.rail{width:var(--rail-w);flex:none;position:sticky;top:12px;height:calc(100vh - 24px);z-index:50;
  display:flex;flex-direction:column;padding:16px 12px;border-radius:22px;background:var(--night);
  box-shadow:var(--shadow);overflow:hidden;transition:width var(--t-rail) var(--ease)}
.rail-logo{display:flex;align-items:center;gap:8px;padding-bottom:16px;margin-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.07);min-height:52px}
.rail-brand{display:flex;align-items:center;gap:11px;flex:1;min-width:0;padding:4px;color:var(--night-ink)}
.rail-brand:hover{color:#fff}
.wordmark{font-weight:800;font-size:1rem;letter-spacing:-.03em;color:var(--night-ink);white-space:nowrap}
.rail-toggle .ic{transition:transform var(--t-rail) var(--ease)}
html.rail-open .rail-toggle .ic{transform:scaleX(-1)}
.rail > *:not(.rail-fx){position:relative;z-index:1}
/* Candlesticks. Decorative only: pointer-events off, z-index 0, and the
   whole strip sits under everything interactive. Bodies and wicks are in
   px so the shapes stay true whatever width the rail is. */
.rail-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;opacity:.26;
  perspective:900px;
  mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent)}
.tape{display:flex;align-items:center;height:100%;gap:9px;padding:0 12px;width:max-content;
  transform:rotateY(-7deg);animation:tape 72s linear infinite;will-change:transform}
@keyframes tape{from{transform:rotateY(-7deg) translateX(0)}to{transform:rotateY(-7deg) translateX(-50%)}}
.cd{position:relative;top:var(--t,0);flex:none;width:9px;height:var(--h,40px);border-radius:2px;
  background:currentColor}
.cd.up{color:var(--gain)} .cd.dn{color:var(--loss)}
.cd::before,.cd::after{content:'';position:absolute;left:50%;margin-left:-1px;width:2px;
  background:currentColor;opacity:.8;border-radius:2px}
.cd::before{bottom:100%;height:var(--wu,14px)}
.cd::after{top:100%;height:var(--wd,14px)}
/* the newest few keep printing, the way a live candle does */
.cd:nth-child(7n){animation:print 4.6s ease-in-out infinite;transform-origin:center}
@keyframes print{0%,100%{transform:scaleY(1)}45%{transform:scaleY(1.28)}70%{transform:scaleY(.88)}}
html:not(.rail-open) .tape{gap:6px;transform:rotateY(0) translateX(0)}
html:not(.rail-open) .cd{width:6px}
html:not(.rail-open) .tape{animation-name:tape-flat}
@keyframes tape-flat{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.rail-nav{display:flex;flex-direction:column;gap:3px}
.rail-end{margin-top:auto;display:flex;flex-direction:column;gap:3px;padding-top:12px;border-top:1px solid rgba(255,255,255,.07)}
.rail-item{position:relative;display:flex;align-items:center;gap:13px;padding:10px;border-radius:var(--r-md);
  color:var(--night-ink-2);font-family:var(--f);font-size:.9rem;font-weight:500;white-space:nowrap;border:0;
  background:transparent;cursor:pointer;width:100%;text-align:left;transition:background var(--t),color var(--t)}
.rail-item .ico{width:28px;flex:none;display:grid;place-items:center}
.rail-item:hover{background:rgba(255,255,255,.06);color:var(--night-ink)}
.rail-item:hover .ic{transform:translateY(-2px)}
.rail-item.on{background:linear-gradient(135deg,rgba(109,94,246,.28),rgba(109,94,246,.12));color:#fff}
.rail-item.on::before{content:'';position:absolute;left:-12px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;
  background:var(--brand);box-shadow:0 0 12px rgba(109,94,246,.8)}
.rail-item.on .ic{filter:drop-shadow(0 3px 8px rgba(109,94,246,.55))}
/* labels collapse away with the rail */
.rail-item .lbl,.wordmark{opacity:0;width:0;overflow:hidden;transition:opacity var(--t) var(--ease)}
html.rail-open .rail-item .lbl,html.rail-open .wordmark{opacity:1;width:auto}
html:not(.rail-open) .rail{padding:14px 10px}
html:not(.rail-open) .rail-logo{display:grid;place-items:center;padding-bottom:12px;margin-bottom:10px}
html:not(.rail-open) .rail-brand{flex:none;padding:0;width:100%;justify-content:center;gap:0}
html:not(.rail-open) .rail-item{justify-content:center;padding:11px 0;gap:0}
html:not(.rail-open) .rail-item .ico{width:auto}
html:not(.rail-open) .rail-item::before{left:-10px}
.themeswitch .sun{display:none}
html[data-theme='light'] .themeswitch .sun{display:block}
html[data-theme='light'] .themeswitch .moon{display:none}

.main{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
.topline{display:flex;align-items:center;gap:14px;padding:11px 18px;background:var(--card);border-radius:var(--r);
  box-shadow:var(--shadow)}
.ledger-mark{font-weight:700;font-size:.95rem;letter-spacing:-.02em}
.who{display:flex;align-items:center;gap:10px;padding:4px 12px 4px 4px;border-radius:var(--pill);background:var(--sunken);color:var(--ink)}
.who .name{font-size:.85rem;font-weight:600;display:block;line-height:1.2}
.who .role{font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.avatar{width:32px;height:32px;border-radius:var(--pill);display:grid;place-items:center;font-size:.74rem;font-weight:700;
  color:#fff;background:linear-gradient(135deg,#8878FA,#5B4BE0);position:relative;overflow:hidden;letter-spacing:.02em}
/* Ten identities. The username decides which, so a person keeps their
   colour everywhere they appear. */
.avatar.av0{background:linear-gradient(135deg,#8878FA,#4F3FD6)}
.avatar.av1{background:linear-gradient(135deg,#2FD4C4,#0E8F86)}
.avatar.av2{background:linear-gradient(135deg,#FFC93C,#E07C17);color:#3A2600}
.avatar.av3{background:linear-gradient(135deg,#FF7D9C,#D6336C)}
.avatar.av4{background:linear-gradient(135deg,#5BB0FF,#1D6FD8)}
.avatar.av5{background:linear-gradient(135deg,#9BE24A,#4E9E1F);color:#152B00}
.avatar.av6{background:linear-gradient(135deg,#CE7BF7,#8B2FD6)}
.avatar.av7{background:linear-gradient(135deg,#FF9B6B,#E1533A)}
.avatar.av8{background:linear-gradient(135deg,#8FA1BC,#4A5A73)}
.avatar.av9{background:linear-gradient(135deg,#F5C842,#C08A00);color:#3A2A00}
/* alternating treatments so they differ in form, not only hue */
.avatar.av1,.avatar.av4,.avatar.av7{border-radius:var(--r-md)}
.avatar.av2,.avatar.av6{border-radius:38% 62% 55% 45%/50% 45% 55% 50%}
.avatar.av0::after,.avatar.av3::after,.avatar.av8::after{content:'';position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(255,255,255,.28),transparent 55%)}
.avatar.av5::after,.avatar.av9::after{content:'';position:absolute;inset:3px;border-radius:inherit;
  border:1.5px solid rgba(255,255,255,.35)}
.avatar span,.avatar{z-index:0}
.avatar.lg{width:46px;height:46px;font-size:.95rem;border-radius:var(--r-md)}
.avatar.xl{width:64px;height:64px;font-size:1.3rem;border-radius:var(--r)}
.sheetpaper{flex:1}
.wrap{width:100%;max-width:1480px;padding:0}
.wrap.narrow{max-width:900px}
.foot{display:flex;gap:12px;align-items:center;padding:14px 4px 6px;font-size:.75rem;color:var(--ink-3)}

.pagehead{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:18px;padding:2px}
.eyebrow{font-size:.67rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);margin-bottom:8px}

.panel{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;margin-bottom:12px}
.panel-pad{padding:clamp(16px,2vw,22px)}
.panel-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:18px clamp(16px,2vw,22px) 0}
.panel-head h3{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.divider{height:1px;background:var(--line-2);margin:20px 0}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tilt{transform:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 17px;border-radius:var(--pill);
  border:1px solid var(--line);background:var(--card);color:var(--ink);font-family:var(--f);font-size:.85rem;font-weight:600;
  cursor:pointer;position:relative;overflow:hidden;transition:background var(--t),border-color var(--t),transform var(--t) var(--ease)}
.btn:hover{background:var(--sunken);border-color:transparent;color:var(--ink);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-primary{background:linear-gradient(135deg,#7C6BF5,var(--brand));border-color:transparent;color:#fff;
  box-shadow:0 4px 14px var(--brand-soft)}
.btn-primary:hover{color:#fff;box-shadow:0 8px 22px var(--brand-soft)}
.btn-danger{color:var(--loss);border-color:transparent;background:color-mix(in srgb,var(--loss) 12%,transparent)}
.btn-danger:hover{background:var(--loss);color:#fff}
.btn-ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
.btn-ghost:hover{background:var(--sunken);color:var(--ink)}
.btn-sm{padding:7px 13px;font-size:.79rem} .btn-lg{padding:13px 26px;font-size:.92rem}
.btn-block{width:100%} .btn[disabled]{opacity:.4;pointer-events:none}
.ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.14;transform:scale(0);pointer-events:none;
  animation:rip .5s var(--ease) forwards}
@keyframes rip{to{transform:scale(3);opacity:0}}

.field{margin-bottom:14px}
.field label{display:block;font-size:.69rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
.input,input[type=text],input[type=password],input[type=number],input[type=date],input[type=file],select,textarea{
  width:100%;padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--field);
  color:var(--ink);font-family:var(--f);font-size:.92rem;
  transition:border-color var(--t),background var(--t),box-shadow var(--t)}
.input:hover,input:hover,select:hover,textarea:hover{border-color:var(--ink-3)}
input:focus,select:focus,textarea:focus,.input:focus{outline:none;border-color:var(--brand);background:var(--card);
  box-shadow:0 0 0 3px var(--brand-soft)}
input::placeholder{color:var(--ink-3)}
select{appearance:none;padding-right:32px;background-repeat:no-repeat;background-size:5px 5px,5px 5px;
  background-position:calc(100% - 17px) 53%,calc(100% - 12px) 53%;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:620px){.row2,.row3{grid-template-columns:1fr}}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px;margin-bottom:12px}
.stat{background:var(--card);border-radius:var(--r);padding:18px;box-shadow:var(--shadow);
  transition:transform var(--t) var(--ease),box-shadow var(--t)}
.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.stat .k{font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.stat .v{font-size:clamp(1.45rem,2.5vw,1.9rem);font-weight:800;letter-spacing:-.035em;line-height:1.1;font-variant-numeric:tabular-nums}
.stat .note{font-size:.74rem;color:var(--ink-3);margin-top:5px}
.stat.pos .v{color:var(--gain)} .stat.neg .v{color:var(--loss)}
.stat.hero{background:linear-gradient(140deg,#1B2133,var(--night));color:var(--night-ink)}
.stat.hero .k{color:var(--night-ink-2)} .stat.hero .v{color:#fff} .stat.hero .note{color:var(--night-ink-2)}
.meter{height:6px;border-radius:var(--pill);background:var(--sunken);overflow:hidden;margin-top:13px}
.stat.hero .meter{background:rgba(255,255,255,.12)}
.meter i{display:block;height:100%;width:0;border-radius:var(--pill);background:linear-gradient(90deg,#7C6BF5,var(--brand));
  transition:width .9s var(--ease)}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:12px}
.card{display:block;padding:18px;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);color:var(--ink);
  transition:box-shadow var(--t),transform var(--t) var(--ease)}
.card:hover{color:var(--ink);box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.card .title{font-size:1.08rem;font-weight:700;letter-spacing:-.02em;margin-bottom:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card .meta{font-size:.75rem;color:var(--ink-3)}
.card .figs{display:flex;gap:18px;margin-top:15px;padding-top:14px;border-top:1px solid var(--line-2)}
.card .figs div{flex:1}
.card .figs .k{font-size:.61rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.card .figs .v{font-size:1.02rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.card.featured{grid-column:1/-1;padding:24px;background:linear-gradient(140deg,#1B2133,var(--night));color:var(--night-ink)}
.card.featured:hover{color:var(--night-ink)}
.card.featured .title{font-size:1.4rem;color:#fff}
.card.featured .meta{color:var(--night-ink-2)}
.card.featured .figs{border-top-color:rgba(255,255,255,.1);gap:30px}
.card.featured .figs .k{color:var(--night-ink-2)} .card.featured .figs .v{font-size:1.25rem;color:#fff}
.card.featured .figs .v.up{color:#16C784} .card.featured .figs .v.down{color:#EA3943}
.usertile{display:block;padding:17px;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);color:var(--ink);
  cursor:pointer;transition:box-shadow var(--t),transform var(--t) var(--ease)}
.usertile:hover{color:var(--ink);box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.usertile.active{background:linear-gradient(140deg,#1B2133,var(--night));color:var(--night-ink)}
.usertile.active .bits .k{color:var(--night-ink-2)}
.usertile .top{display:flex;align-items:center;gap:12px}
.usertile .uname{font-weight:700;font-size:1rem;letter-spacing:-.02em}
.usertile .bits{display:flex;gap:16px;margin-top:14px}
.usertile .bits .k{font-size:.59rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.usertile .bits .v{font-weight:700;font-size:.94rem}

.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--pill);font-size:.67rem;
  font-weight:700;letter-spacing:.04em;border:0;color:var(--ink-2);background:var(--sunken)}
.badge.live{color:var(--gain);background:color-mix(in srgb,var(--gain) 14%,transparent)}
.badge.live .dot{width:5px;height:5px;border-radius:50%;background:currentColor;animation:blip 2s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.3}}
.badge.accent{color:var(--brand-ink);background:var(--brand-soft)}
.badge.warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 15%,transparent)}
.badge.off{color:var(--loss);background:color-mix(in srgb,var(--loss) 13%,transparent)}

.tablewrap{overflow-x:auto;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:12px}
table{width:100%;border-collapse:collapse}
thead th{padding:13px 12px;text-align:left;font-size:.62rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle}
tbody td{padding:0;border-bottom:1px solid var(--line-2);font-size:.85rem;vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr{animation:fade .3s var(--ease) both}
tbody tr:hover td{background:var(--sunken)}
@keyframes fade{from{opacity:0}to{opacity:1}}
/* Written as input.cell/select.cell so it outranks the generic
   input[type=...] form rule, which is specificity 0,1,1. */
input.cell,select.cell,.cell{width:100%;padding:11px 12px;border:0;background:transparent;color:var(--ink);
  font-family:var(--f-num);font-size:.8rem;font-variant-numeric:tabular-nums;border-radius:var(--r-xs);
  transition:box-shadow var(--t),background var(--t)}
input.cell:hover,select.cell:hover{border:0;background:var(--sunken)}
input.cell:focus,select.cell:focus,.cell:focus{outline:none;border:0;background:var(--field);
  box-shadow:inset 0 0 0 2px var(--brand)}
.cell.text{font-family:var(--f)}
.cell[data-field="ticker"]{text-transform:uppercase;letter-spacing:.03em;font-weight:500}
select.cell.tt{font-weight:700;font-size:.76rem;letter-spacing:.03em;border-radius:20px;text-align:center;
  text-align-last:center;cursor:pointer;background-image:none;padding:7px 10px;min-width:86px;
  font-family:var(--f);transition:background-color var(--t),color var(--t)}
.cell.tt-long{background-color:color-mix(in srgb,var(--gain) 17%,transparent);color:var(--gain)}
.cell.tt-short{background-color:color-mix(in srgb,var(--loss) 17%,transparent);color:var(--loss)}
.cell.tt-spot{background-color:color-mix(in srgb,#38BDF8 20%,transparent);color:#0C90CC}
html[data-theme='dark'] .cell.tt-spot{color:#5CC8F5}
.cell.saved{animation:save .8s var(--ease)}
@keyframes save{0%{background:color-mix(in srgb,var(--gain) 26%,transparent)}100%{background:transparent}}
.cell.err{box-shadow:inset 0 0 0 2px var(--loss)}
td.calc{padding:11px 12px;font-family:var(--f-num);font-size:.8rem;font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap}
td.calc.big{color:var(--ink);font-weight:600}
td.rowno{padding:11px 10px;font-family:var(--f-num);font-size:.7rem;color:var(--ink-3);text-align:center;width:48px}
tr.win td.rowno{color:var(--gain)} tr.loss td.rowno{color:var(--loss)} tr.open td.rowno{color:var(--warn)}
tr.win td.rowno::before,tr.loss td.rowno::before,tr.open td.rowno::before{
  content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;margin-right:6px;vertical-align:middle}
.rowdel{border:0;background:transparent;color:var(--ink-3);cursor:pointer;padding:6px 8px;border-radius:var(--r-xs);opacity:0;
  transition:opacity var(--t),color var(--t),background var(--t)}
tr:hover .rowdel{opacity:1}
.rowdel:hover{color:var(--loss);background:var(--sunken)}

.imgcell{padding:6px 10px;white-space:nowrap}
.thumb{width:34px;height:34px;border-radius:var(--r-xs);object-fit:cover;cursor:pointer;display:block;box-shadow:var(--shadow);
  transition:transform var(--t) var(--ease)}
.thumb:hover{transform:scale(1.12)}
.imgadd{width:34px;height:34px;border-radius:var(--r-xs);border:1.5px dashed var(--line);background:transparent;color:var(--ink-3);
  cursor:pointer;display:grid;place-items:center;transition:border-color var(--t),color var(--t)}
.imgadd:hover{border-color:var(--brand);color:var(--brand)}
.imgadd svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(156px,1fr));gap:11px}
.gallery figure{margin:0;border-radius:var(--r-md);overflow:hidden;background:var(--sunken);box-shadow:var(--shadow)}
.gallery img{width:100%;height:110px;object-fit:cover;display:block;cursor:pointer;transition:transform .4s var(--ease)}
.gallery figure:hover img{transform:scale(1.05)}
.gallery figcaption{padding:8px 10px;font-size:.7rem;color:var(--ink-3);display:flex;align-items:center;gap:6px}
.lightbox{position:fixed;inset:0;z-index:950;display:grid;place-items:center;padding:22px;background:rgba(6,9,14,.95);
  animation:fade .16s var(--ease) both}
.lightbox img{max-width:100%;max-height:84vh;border-radius:var(--r-md)}
.lightbox figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.lightbox figcaption{font-size:.72rem;font-weight:600;letter-spacing:.1em;color:rgba(255,255,255,.6);text-transform:uppercase}
.lightbox .x{position:absolute;top:18px;right:20px;width:38px;height:38px;border:0;background:rgba(255,255,255,.12);color:#fff;
  border-radius:var(--pill);font-size:1.1rem;cursor:pointer}
.lightbox .nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border:0;border-radius:var(--pill);
  background:rgba(255,255,255,.12);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;transition:background var(--t)}
.lightbox .nav:hover{background:rgba(255,255,255,.24)}
.lightbox .prev{left:18px} .lightbox .next{right:18px}
@media(max-width:640px){.lightbox .nav{width:38px;height:38px;font-size:1.2rem}.lightbox .prev{left:8px}.lightbox .next{right:8px}}

.equity{width:100%;height:86px;display:block}
.equity path.line{fill:none;stroke:var(--brand);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.equity path.area{stroke:none;opacity:.16}
.equity.draw path.line{stroke-dasharray:2600;stroke-dashoffset:2600;animation:draw 1.3s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.card.featured .equity path.line{stroke:#A99BFF}
.dd{width:100%;height:120px;display:block}
.dd path.area{fill:color-mix(in srgb,var(--loss) 16%,transparent);stroke:none}
.dd path.line{fill:none;stroke:var(--loss);stroke-width:1.8;stroke-linejoin:round}
.dd line.zero{stroke:var(--line)}

.flash{display:flex;align-items:center;gap:10px;padding:13px 17px;border-radius:var(--r-md);margin-bottom:14px;
  background:var(--card);box-shadow:var(--shadow);font-size:.87rem;font-weight:500;border-left:3px solid var(--brand)}
.flash.ok{border-left-color:var(--gain)} .flash.err{border-left-color:var(--loss);color:var(--loss)}
.toasts{position:fixed;right:20px;bottom:20px;z-index:800;display:flex;flex-direction:column;gap:10px}
.toast{display:flex;align-items:center;gap:11px;min-width:238px;padding:13px 17px;border-radius:var(--r-md);
  background:var(--night);color:var(--night-ink);box-shadow:var(--shadow-lg);font-size:.85rem;font-weight:500;
  animation:toastIn .24s var(--ease) both}
.toast.out{animation:toastOut .2s var(--ease) forwards}
.toast .bar{width:6px;height:6px;border-radius:50%;background:var(--gain);flex:none}
.toast.err .bar{background:var(--loss)}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(8px)}}
.modal-back{position:fixed;inset:0;z-index:900;display:grid;place-items:center;padding:20px;background:rgba(6,9,14,.6);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);animation:fade .16s var(--ease) both}
.modal-back[hidden]{display:none}
.modal{width:100%;max-width:460px;padding:26px;border-radius:var(--r);background:var(--card);box-shadow:var(--shadow-lg);
  max-height:90vh;overflow-y:auto;animation:modalIn .22s var(--ease) both}
@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:none}}
.modal h3{font-size:1.12rem;font-weight:700;letter-spacing:-.02em;margin-bottom:5px}
.modal .lede{color:var(--ink-3);font-size:.86rem;margin-bottom:18px}
.modal .acts{display:flex;gap:9px;justify-content:flex-end;margin-top:20px}
.empty{text-align:center;padding:54px 20px;color:var(--ink-3)}
.empty .ico{width:60px;height:60px;margin:0 auto 16px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--brand-soft)}
.empty .ico svg{width:25px;height:25px;stroke:var(--brand);fill:none;stroke-width:1.6}
.empty h3{color:var(--ink);margin-bottom:6px;font-size:1.05rem}

[data-anim].in{animation:enter .42s var(--ease) both}
@keyframes enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.login-stage{min-height:100vh;display:grid;place-items:center;padding:36px 18px;background:var(--canvas)}
.login-card{width:100%;max-width:392px;padding:36px 32px 28px;background:var(--card);border-radius:24px;
  box-shadow:var(--shadow-lg);animation:enter .4s var(--ease) both}
.login-card .logo{width:56px;height:56px;margin:0 auto 18px;border-radius:var(--r-md);display:grid;place-items:center;
  background:linear-gradient(135deg,#7C6BF5,var(--brand));box-shadow:0 8px 24px var(--brand-soft)}
.login-card .logo svg{width:27px;height:27px;stroke:#fff;fill:none;stroke-width:2}
.login-card h1{text-align:center;font-size:1.5rem;margin-bottom:5px}
.login-card .tag{text-align:center;color:var(--ink-3);font-size:.86rem;margin-bottom:24px}
.ticker{display:flex;gap:20px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line-2);overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.ticker .run{display:flex;gap:20px;animation:marq 30s linear infinite}
.ticker span{font-family:var(--f-num);font-size:.68rem;color:var(--ink-3);white-space:nowrap}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-100%)}}

@media(max-width:900px){
  .app{padding:0;gap:0;flex-direction:column}
  .rail{position:fixed;inset:auto 10px 10px 10px;width:auto !important;height:auto;flex-direction:row;padding:7px;
    border-radius:18px;gap:2px;justify-content:space-around;overflow:visible}
  .rail-logo,.rail-toggle,.rail-item .lbl{display:none}
  .rail-nav{flex-direction:row;gap:2px;flex:1;justify-content:space-around}
  .rail-end{margin-top:0;flex-direction:row;padding-top:0;border-top:0}
  .rail-item{padding:10px 14px;justify-content:center}
  .rail-item.on::before{left:12px;right:12px;top:auto;bottom:-3px;width:auto;height:3px;border-radius:3px}
  .main{margin:0;padding:10px 10px 82px;gap:10px}
  .card.featured{padding:20px}
  .card.featured .title{font-size:1.18rem}
  .card.featured .figs{gap:16px;flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* =====================================================================
   Sign in — a split screen: the product's own chart on the left,
   the form on the right. Stacks to the form alone on a phone.
   ===================================================================== */
.auth-body{margin:0}
.auth{display:grid;grid-template-columns:1.05fr 1fr;min-height:100vh}
.auth-art{position:relative;overflow:hidden;background:linear-gradient(155deg,#1B2133,var(--night) 62%);
  display:flex;align-items:flex-end;padding:clamp(28px,4vw,56px);perspective:1100px}
.auth-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;transform-style:preserve-3d}
/* receding floor */
.auth-grid{position:absolute;left:-40%;right:-40%;bottom:-14%;height:78%;
  transform:rotateX(72deg);transform-origin:50% 100%;
  background-image:linear-gradient(rgba(140,160,255,.16) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(140,160,255,.16) 1px,transparent 1px);
  background-size:64px 64px;animation:floorrun 7s linear infinite;
  mask-image:linear-gradient(to top,#000 6%,transparent 72%);
  -webkit-mask-image:linear-gradient(to top,#000 6%,transparent 72%)}
@keyframes floorrun{from{background-position:0 0,0 0}to{background-position:0 64px,64px 0}}
/* drifting light */
.auth-orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5}
.auth-orb.o1{width:340px;height:340px;left:-8%;top:6%;background:rgba(109,94,246,.7);animation:drift 19s ease-in-out infinite}
.auth-orb.o2{width:260px;height:260px;right:-6%;top:34%;background:rgba(22,199,132,.45);animation:drift 25s ease-in-out infinite reverse}
@keyframes drift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(40px,-46px,0)}}
/* floating panes */
.auth-panes{position:absolute;inset:0;transform-style:preserve-3d}
.auth-pane{position:absolute;border-radius:18px;border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(150deg,rgba(255,255,255,.13),rgba(255,255,255,.03));
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);box-shadow:0 30px 70px rgba(0,0,0,.4)}
.auth-pane.p1{width:240px;height:150px;left:14%;top:20%;transform:rotateX(12deg) rotateY(-18deg);animation:float1 12s ease-in-out infinite}
.auth-pane.p2{width:180px;height:112px;left:44%;top:42%;transform:rotateX(10deg) rotateY(-14deg);animation:float2 15s ease-in-out infinite}
.auth-pane.p3{width:130px;height:84px;left:8%;top:52%;transform:rotateX(14deg) rotateY(-20deg);animation:float3 18s ease-in-out infinite}
.auth-pane i{position:absolute;left:14px;right:14px;height:2px;border-radius:2px;background:rgba(255,255,255,.22)}
.auth-pane i:nth-child(1){top:18px;width:38%;background:var(--brand)}
.auth-pane i:nth-child(2){top:34px}
.auth-pane i:nth-child(3){top:48px;right:44%}
@keyframes float1{0%,100%{transform:rotateX(12deg) rotateY(-18deg) translateY(0)}50%{transform:rotateX(12deg) rotateY(-18deg) translateY(-20px)}}
@keyframes float2{0%,100%{transform:rotateX(10deg) rotateY(-14deg) translateY(0)}50%{transform:rotateX(10deg) rotateY(-14deg) translateY(16px)}}
@keyframes float3{0%,100%{transform:rotateX(14deg) rotateY(-20deg) translateY(0)}50%{transform:rotateX(14deg) rotateY(-20deg) translateY(-13px)}}
.auth-art-in{position:relative;z-index:1;max-width:460px}
.auth-mark{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:26px;
  background:linear-gradient(135deg,#8878FA,var(--brand));color:#fff;box-shadow:0 10px 30px rgba(109,94,246,.4)}
.auth-art h2{color:#fff;font-size:clamp(1.6rem,2.6vw,2.15rem);letter-spacing:-.035em;margin-bottom:12px}
.auth-art p{color:var(--night-ink-2);font-size:1rem;margin:0 0 26px;max-width:38ch}
.auth-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.auth-points li{display:flex;align-items:center;gap:11px;color:var(--night-ink);font-size:.9rem;font-weight:500}
.auth-points li span{width:7px;height:7px;border-radius:50%;background:var(--gain);flex:none;
  box-shadow:0 0 0 4px rgba(22,199,132,.16)}
.auth-form{position:relative;display:grid;place-items:center;padding:clamp(24px,4vw,48px);background:var(--card)}
.auth-theme{position:absolute;top:20px;right:20px;width:auto;padding:9px 11px;border-radius:var(--r-sm);
  background:var(--card);color:var(--ink-2);box-shadow:var(--shadow)}
.auth-theme:hover{color:var(--ink);background:var(--card)}
.auth-box{width:100%;max-width:370px}
.auth-box h1{font-size:1.75rem;letter-spacing:-.035em;margin-bottom:7px}
.auth-sub{color:var(--ink-3);font-size:.9rem;margin:0 0 28px}
.auth-box .field label{margin-bottom:8px}
.auth-box .btn-block{margin-top:6px}
.auth-foot{margin:26px 0 0;text-align:center;font-size:.75rem;color:var(--ink-3)}
@media(max-width:880px){
  .auth{grid-template-columns:1fr}
  .auth-art{display:none}
  .auth-form{min-height:100vh}
}


/* =====================================================================
   Responsive pass — every size from a phone to a wide desktop
   ===================================================================== */

/* the journal keeps its column widths and scrolls rather than crushing */
#journal{min-width:1080px}
.tablewrap{-webkit-overflow-scrolling:touch}

/* wide screens: let the content breathe but stop it stretching forever */
@media(min-width:1600px){ .wrap{max-width:1560px} }

/* laptops */
@media(max-width:1280px){
  .stats{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
  .stat{padding:16px}
  .cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
  html.rail-open{--rail-w:224px}
}

/* tablets */
@media(max-width:1024px){
  .pagehead h1{font-size:1.5rem}
  .card.featured .figs{gap:20px}
  .panel-pad{padding:16px}
  .topline{padding:10px 14px}
}

/* phones */
@media(max-width:640px){
  .main{padding:8px 8px 84px}
  .wrap{padding:0}
  .pagehead{gap:12px;margin-bottom:14px}
  .pagehead h1{font-size:1.3rem}
  .eyebrow{font-size:.6rem;letter-spacing:.14em}
  .stats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
  .stat{padding:14px;border-radius:14px}
  .stat .v{font-size:1.25rem}
  .cards{grid-template-columns:1fr;gap:10px}
  .card,.usertile,.panel{border-radius:14px}
  .card.featured .figs{gap:14px}
  .card.featured .figs div{min-width:44%}
  .topline{border-radius:14px;padding:9px 12px}
  .who .name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .btn{padding:9px 14px;font-size:.82rem}
  .btn-lg{padding:12px 20px}
  .chips{gap:6px}
  .modal{padding:18px;border-radius:16px;max-height:88vh}
  .modal .acts{flex-direction:column-reverse}
  .modal .acts .btn{width:100%}
  .toasts{left:10px;right:10px;bottom:82px}
  .toast{min-width:0}
  .gallery{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
  .gallery img{height:88px}
  .foot{flex-direction:column;align-items:flex-start;gap:4px}
}

/* very small phones */
@media(max-width:380px){
  .stats{grid-template-columns:1fr}
  .rail-item{padding:10px 9px}
}

/* short screens: stop the sidebar footer colliding with the nav */
@media(max-height:620px){
  .rail{overflow-y:auto}
  .rail-fx{display:none}
}

/* =====================================================================
   Micro-interactions
   ===================================================================== */
.stat{position:relative;overflow:hidden}
.stat::after{content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--brand),transparent);opacity:0;transition:opacity var(--t)}
.stat:hover::after{opacity:1}
.stat.hero::after{background:linear-gradient(90deg,var(--gain),transparent)}

tbody tr td:first-child{transition:box-shadow var(--t)}
tbody tr:hover td:first-child{box-shadow:inset 2px 0 0 0 var(--brand)}
.badge.live .dot{animation:blip 2s ease-in-out infinite}
.btn-primary::after{content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%);
  transform:translateX(-120%);transition:transform .6s var(--ease)}
.btn-primary:hover::after{transform:translateX(120%)}
.rail-item,.btn,.card,.usertile,.stat,.thumb{-webkit-tap-highlight-color:transparent}


/* ---- the row guide ---- */
.guide{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:12px;overflow:hidden}
.guide summary{display:flex;align-items:center;gap:12px;padding:15px 18px;cursor:pointer;list-style:none;
  transition:background var(--t)}
.guide summary::-webkit-details-marker{display:none}
.guide summary:hover{background:var(--sunken)}
.guide summary strong{display:block;font-size:.92rem;font-weight:700;letter-spacing:-.01em}
.guide summary em{display:block;font-style:normal;font-size:.78rem;color:var(--ink-3);margin-top:1px}
.guide .g-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:var(--brand-soft);color:var(--brand)}
.guide .g-chev{margin-left:auto;color:var(--ink-3);transform:rotate(90deg);transition:transform var(--t) var(--ease)}
.guide[open] .g-chev{transform:rotate(-90deg)}
.g-body{padding:2px 18px 18px;animation:enter .3s var(--ease) both}
.g-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px 22px;
  padding-top:14px;border-top:1px solid var(--line-2)}
.g-grid div{display:flex;flex-direction:column;gap:2px}
.g-grid b{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--brand)}
.g-grid span{font-size:.83rem;color:var(--ink-2);line-height:1.45}
.g-note{margin:16px 0 0;padding:12px 14px;border-radius:var(--r-sm);background:var(--sunken);
  font-size:.82rem;color:var(--ink-2);line-height:1.55}
.cell::placeholder{color:var(--ink-3);opacity:.5;font-weight:400;font-family:var(--f);font-size:.76rem;
  letter-spacing:0;text-transform:none}
@media(max-width:640px){
  .guide summary{padding:13px 14px}
  .g-body{padding:2px 14px 14px}
  .g-grid{grid-template-columns:1fr}
}

/* =====================================================================
   Closed trades colour their whole row — green on a profit, red on a
   loss, amber while still open. Tint is kept low so the figures stay
   the loudest thing in the row, and it fades in as the row closes.
   ===================================================================== */
tbody tr td{transition:background-color .3s var(--ease)}
tbody tr.win td{background-color:color-mix(in srgb,var(--gain) 8%,transparent)}
tbody tr.loss td{background-color:color-mix(in srgb,var(--loss) 8%,transparent)}
tbody tr.win:hover td{background-color:color-mix(in srgb,var(--gain) 14%,transparent)}
tbody tr.loss:hover td{background-color:color-mix(in srgb,var(--loss) 14%,transparent)}
html[data-theme='dark'] tbody tr.win td{background-color:color-mix(in srgb,var(--gain) 12%,transparent)}
html[data-theme='dark'] tbody tr.loss td{background-color:color-mix(in srgb,var(--loss) 12%,transparent)}
html[data-theme='dark'] tbody tr.win:hover td{background-color:color-mix(in srgb,var(--gain) 18%,transparent)}
html[data-theme='dark'] tbody tr.loss:hover td{background-color:color-mix(in srgb,var(--loss) 18%,transparent)}

/* the edge marker keeps the row's own colour, not the brand */
tbody tr.win td:first-child,tbody tr.win:hover td:first-child{box-shadow:inset 3px 0 0 0 var(--gain)}
tbody tr.loss td:first-child,tbody tr.loss:hover td:first-child{box-shadow:inset 3px 0 0 0 var(--loss)}
tbody tr.open td:first-child,tbody tr.open:hover td:first-child{box-shadow:inset 3px 0 0 0 var(--warn)}

/* result reads strongest */
tbody tr.win td.calc.big{color:var(--gain);font-weight:700}
tbody tr.loss td.calc.big{color:var(--loss);font-weight:700}
tbody tr.win td.calc,tbody tr.loss td.calc{color:var(--ink-2)}

/* a hairline on cell hover instead of a fill, so the row tint survives */
input.cell:hover,select.cell:hover{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
input.cell:focus,select.cell:focus{background:var(--field);box-shadow:inset 0 0 0 2px var(--brand)}

/* ---- glass on closed rows ----
   Two layers on one pseudo-element: a fixed sheet of top light, and a
   diagonal highlight that travels across on hover. Driven by
   background-position, never transform — transforms on table rows break
   their layout. pointer-events stay off so every cell is still typable. */




to{background-position:0 0,-165% 0}}
@media(prefers-reduced-motion:reduce){
  
  
}

/* ---- position sizer ---- */
.szrow{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.szf{display:flex;flex-direction:column;gap:6px;flex:1 1 130px;min-width:118px}
.szf span{font-size:.66rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.szf input,.szf select{padding:10px 12px;font-size:.9rem;font-family:var(--f-num)}
.szf input[readonly]{background:var(--sunken);color:var(--ink-2);cursor:default}
.szout{display:flex;flex-direction:column;gap:6px;flex:1 1 150px;min-width:130px;padding:9px 14px;
  border-radius:var(--r-sm);background:var(--sunken)}
.szout span{font-size:.66rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.szout b{font-size:1.18rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.szout.hero{background:var(--brand-soft)}
.szout.hero b{color:var(--brand)}
html[data-theme='dark'] .szout.hero b{color:var(--brand-ink)}
@media(max-width:820px){
  .szf,.szout{flex:1 1 calc(50% - 6px);min-width:0}
}
@media(max-width:420px){
  .szf,.szout{flex:1 1 100%}
}

/* =====================================================================
   The sizer is a tool, not a report — so it gets its own surface:
   a dark console in both themes with a lit brand edge.
   ===================================================================== */
.panel.sizer{background:linear-gradient(150deg,#1C2233,var(--night) 65%);
  box-shadow:0 1px 2px rgba(0,0,0,.35),0 16px 44px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.06);
  position:relative;overflow:hidden}
.sizer-head{display:flex;align-items:center;gap:12px;padding:16px 20px 4px}
.sizer .sz-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:rgba(109,94,246,.22);color:#B5AAFF}
.sizer .sz-title strong{display:block;color:#fff;font-size:.98rem;font-weight:700;letter-spacing:-.01em}
.sizer .sz-title em{display:block;font-style:normal;font-size:.76rem;color:var(--night-ink-2);margin-top:1px}
.sizer .badge{background:rgba(255,255,255,.08);color:var(--night-ink-2)}
.sizer .szf span,.sizer .szout span{color:#8E9AB4}
.sizer .szf input,.sizer .szf select{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.11);color:#fff}
.sizer .szf input:hover,.sizer .szf select:hover{border-color:rgba(255,255,255,.3)}
.sizer .szf input:focus,.sizer .szf select:focus{background:rgba(255,255,255,.09);border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(109,94,246,.28)}
.sizer .szout{background:rgba(255,255,255,.05)}
.sizer .szout b{color:#fff}
.sizer .szout.hero{background:linear-gradient(140deg,rgba(109,94,246,.28),rgba(109,94,246,.10));
  box-shadow:inset 0 0 0 1px rgba(109,94,246,.4)}
.sizer .szout.hero b{color:#C7BEFF;font-size:1.34rem}
.sizer #szExplain{color:var(--night-ink-2)!important}
/* leverage slides away when it does not apply */
#szLevWrap{overflow:hidden;transition:max-width .3s var(--ease),opacity .3s var(--ease),margin .3s var(--ease)}
#szLevWrap.off{max-width:0;opacity:0;flex-basis:0;min-width:0;margin:0;padding:0;pointer-events:none}
/* a figure that changes says so */
.bump{animation:bump .42s var(--ease)}
@keyframes bump{0%{transform:translateY(3px);opacity:.35}60%{transform:translateY(-1px);opacity:1}100%{transform:none}}
@media(prefers-reduced-motion:reduce){.bump{animation:none}.panel.sizer::before{animation:none}}

/* ---- the sizer's working, step by step ---- */
.szflow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:18px;padding-top:15px;
  border-top:1px solid rgba(255,255,255,.08)}
.szstep{display:flex;flex-direction:column;gap:3px;padding:8px 13px;border-radius:11px;
  background:rgba(255,255,255,.05);opacity:0;transform:translateY(7px);
  animation:stepIn .36s var(--ease) forwards;animation-delay:calc(var(--i) * .07s)}
.szstep u{text-decoration:none;font-size:.58rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#8E9AB4}
.szstep b{font-family:var(--f-num);font-size:.92rem;font-weight:600;color:#fff;letter-spacing:-.01em}
.szstep.res{background:linear-gradient(140deg,rgba(109,94,246,.32),rgba(109,94,246,.12));
  box-shadow:inset 0 0 0 1px rgba(109,94,246,.45)}
.szstep.res b{color:#C7BEFF}
.szstep.res u{color:#A99BFF}
.szarrow{font-family:var(--f-num);font-size:.92rem;color:#6E7A96;opacity:0;
  animation:stepIn .36s var(--ease) forwards;animation-delay:calc(var(--i) * .07s)}
@keyframes stepIn{to{opacity:1;transform:none}}
@media(max-width:640px){
  .szflow{gap:6px}
  .szstep{padding:6px 10px;flex:1 1 calc(50% - 20px)}
  .szstep b{font-size:.84rem}
}
@media(prefers-reduced-motion:reduce){
  .szstep,.szarrow{animation:none;opacity:1;transform:none}
}

/* =====================================================================
   Compact rows — more trades on screen without losing legibility
   ===================================================================== */
tbody td{font-size:.79rem}
input.cell,select.cell,.cell{padding:7px 10px;font-size:.77rem}
td.calc{padding:7px 10px;font-size:.77rem}
td.rowno{padding:7px 8px;font-size:.65rem;width:40px}
thead th{padding:9px 10px;font-size:.58rem;letter-spacing:.11em}
.imgcell{padding:4px 8px}
.thumb,.imgadd{width:26px;height:26px;border-radius:6px}
.imgadd svg{width:11px;height:11px}
select.cell.tt{padding:4px 10px;font-size:.71rem;min-width:74px;border-radius:14px}
.rowdel{padding:4px 6px}
#journal{min-width:1020px}

/* a little more colour across the columns, kept quiet */
td.calc[data-calc="target_pct"]{color:var(--gain);opacity:.85}
td.calc[data-calc="sl_pct"]{color:var(--loss);opacity:.8}
td.calc[data-calc="days"]{color:var(--ink-3)}
.cell[data-field="ticker"]{color:var(--brand);font-weight:600}
html[data-theme='dark'] .cell[data-field="ticker"]{color:var(--brand-ink)}

/* =====================================================================
   3D icon: depth is drawn in the artwork, the tilt is on the svg alone,
   and .sz-ico takes no pointer events — nothing clickable is transformed.
   ===================================================================== */
.sz-ico{perspective:420px;pointer-events:none}
.ic3d{animation:tilt3d 7s ease-in-out infinite;will-change:transform}
@keyframes tilt3d{
  0%,100%{transform:rotateY(-18deg) rotateX(9deg)}
  50%{transform:rotateY(18deg) rotateX(-5deg)}
}
.guide .g-ico,.empty .ico{perspective:420px}
.guide[open] .g-ico .ic{animation:tilt3d 7s ease-in-out infinite}

/* sizer: a touch more colour on the outputs */
.sizer .szout:first-of-type{box-shadow:inset 0 0 0 1px rgba(78,216,176,.28)}
.sizer .szout:first-of-type b{color:#4ED8B0}
@media(prefers-reduced-motion:reduce){.ic3d{animation:none}}

/* =====================================================================
   Falling coins behind the sizer. Decorative: the layer takes no
   pointer events and sits at z-index 0 with every control above it,
   so nothing interactive is ever on a transformed surface.
   ===================================================================== */
.szrain{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;perspective:700px;
  mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 72%,transparent);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 72%,transparent)}
.sizer > *:not(.szrain){position:relative;z-index:1}
.szrain .coin{position:absolute;top:-14%;left:var(--x);width:var(--s);height:var(--s);
  display:grid;place-items:center;border-radius:50%;
  font-family:var(--f);font-weight:800;font-size:calc(var(--s) * .5);color:#5A4108;
  background:radial-gradient(circle at 32% 28%,#FBE9A8,#F0C24E 46%,#C08A1E 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -2px 4px rgba(120,80,0,.35),
             0 4px 12px rgba(0,0,0,.35);
  opacity:0;transform-style:preserve-3d;will-change:transform;
  animation:coinfall var(--d) linear infinite;animation-delay:var(--dl)}
@keyframes coinfall{
  0%{transform:translate3d(0,-40px,0) rotateY(0deg) rotateZ(-6deg);opacity:0}
  8%{opacity:var(--o)}
  88%{opacity:var(--o)}
  100%{transform:translate3d(14px,420px,0) rotateY(900deg) rotateZ(8deg);opacity:0}
}
@media(max-width:640px){
  .szrain .coin:nth-child(2n){display:none}
}
@media(prefers-reduced-motion:reduce){
  .szrain{display:none}
}

/* ---- banknotes, falling with the coins ----
   A note is a flat sheet, so it flutters on two axes and drifts sideways,
   where a coin just spins. Same decorative rules: no pointer events. */
.szrain .note{position:absolute;top:-14%;left:var(--x);width:var(--w);height:calc(var(--w) * .5);
  border-radius:3px;opacity:0;transform-style:preserve-3d;will-change:transform;
  background:linear-gradient(135deg,#8FE3B6,#37A879 55%,#1E7B54);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),inset 0 0 0 3px rgba(255,255,255,.10),
             0 5px 14px rgba(0,0,0,.32);
  animation:notefall var(--d) linear infinite;animation-delay:var(--dl)}
.szrain .note::after{content:'$';position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--f);font-weight:800;font-size:calc(var(--w) * .3);color:rgba(255,255,255,.9)}
@keyframes notefall{
  0%{transform:translate3d(0,-50px,0) rotateX(0deg) rotateY(0deg) rotateZ(-12deg);opacity:0}
  8%{opacity:var(--o)}
  35%{transform:translate3d(-18px,150px,0) rotateX(150deg) rotateY(90deg) rotateZ(10deg)}
  65%{transform:translate3d(16px,290px,0) rotateX(300deg) rotateY(210deg) rotateZ(-8deg)}
  88%{opacity:var(--o)}
  100%{transform:translate3d(-10px,430px,0) rotateX(430deg) rotateY(330deg) rotateZ(6deg);opacity:0}
}
@media(max-width:640px){ .szrain .note:nth-child(2n){display:none} }

/* =====================================================================
   The masthead. Depth comes from a stacked drop-shadow, the life from a
   light that travels across the letters. It takes no pointer events, so
   the 3D tilt can never sit under a click.
   ===================================================================== */
.pagemark{perspective:700px;pointer-events:none;flex:none}
.pm3d{display:inline-block;font-weight:800;letter-spacing:-.025em;white-space:nowrap;
  font-size:clamp(.86rem,1.5vw,1.1rem);
  background:linear-gradient(100deg,var(--ink) 0%,var(--ink) 34%,var(--brand) 48%,
             #4ED8B0 56%,var(--ink) 70%,var(--ink) 100%);
  background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.22)) drop-shadow(0 3px 7px rgba(0,0,0,.20));
  transform-style:preserve-3d;
  animation:pmshine 7s linear infinite,pmtilt 11s ease-in-out infinite}
.pm3d i{font-style:normal;font-weight:600;opacity:.65}
html[data-theme='light'] .pm3d{filter:drop-shadow(0 1px 0 rgba(12,18,32,.16)) drop-shadow(0 3px 7px rgba(12,18,32,.14))}
@keyframes pmshine{from{background-position:130% 0}to{background-position:-130% 0}}
@keyframes pmtilt{
  0%,100%{transform:rotateY(-7deg) rotateX(4deg)}
  50%{transform:rotateY(7deg) rotateX(-3deg)}
}
@media(max-width:560px){
  .pm3d{font-size:.78rem;letter-spacing:-.02em}
  .pm3d i{display:none}
}
@media(prefers-reduced-motion:reduce){
  .pm3d{animation:none;background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--ink)}
}

/* =====================================================================
   The top bar stays put while the page scrolls, the same way the
   sidebar does. It sits below the sidebar in the stack so the two
   never fight, and gains a shadow once content passes beneath it.
   ===================================================================== */
.topline{position:sticky;top:12px;z-index:40;
  background:color-mix(in srgb,var(--card) 92%,transparent);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:var(--shadow),0 1px 0 var(--line-2);
  transition:box-shadow var(--t)}
.topline:hover{box-shadow:var(--shadow-lg)}
@media(max-width:900px){
  .topline{top:10px}
}
@media(max-width:640px){
  .topline{top:8px}
}

/* paste button in the chart column */
.imgbtns{display:inline-flex;gap:4px;align-items:center}
.imgpaste{font-family:var(--f);font-weight:800;font-size:.68rem;letter-spacing:.02em;
  border-style:solid;border-color:var(--line)}
.imgpaste:hover{border-color:var(--brand);color:var(--brand)}
.imgpaste.armed{border-color:var(--brand);color:var(--brand);background:var(--brand-soft);
  animation:armed 1.1s ease-in-out infinite}
@keyframes armed{0%,100%{box-shadow:0 0 0 0 var(--brand-soft)}50%{box-shadow:0 0 0 5px transparent}}

/* ---- running board: the P&L is the thing you actually look at ---- */
#board td[data-f="pnl"]{font-size:1.12rem;font-weight:800;letter-spacing:-.02em;padding:8px 12px}
#board td[data-f="pnl"] , #board td[data-f="roi"]{white-space:nowrap}
#board td[data-f="pnl"].up{color:var(--gain)}
#board td[data-f="pnl"].down{color:var(--loss)}
#board td[data-f="roi"]{font-size:.95rem;font-weight:700}
#board tr.win td[data-f="pnl"],#board tr.loss td[data-f="pnl"]{
  border-radius:8px;box-shadow:inset 0 0 0 1px currentColor}
#board td[data-f="last"]{font-weight:600}
#board tr td{transition:background-color .25s var(--ease)}
@media(max-width:640px){
  #board td[data-f="pnl"]{font-size:1rem}
}

/* the running board is read at a glance, so it gets room */
#board tbody td{font-size:.87rem}
#board tbody td,#board tbody td.calc{padding:15px 12px}
#board thead th{padding:12px}
#board td[data-f="pnl"]{font-size:1.2rem;padding:12px}
#board td[data-f="roi"]{font-size:1.02rem}
#board td[data-f="peak"]{color:var(--gain);opacity:.85}
#board td[data-f="trough"]{color:var(--loss);opacity:.85}
#board td[data-f="qty"]{color:var(--ink-3)}

/* each position takes two rows so nothing needs scrolling sideways */
#board{min-width:0}
#board tr.rmain td{border-bottom:0;padding-top:14px;padding-bottom:6px}
#board tr.rsub td{padding:0 12px 14px;border-bottom:1px solid var(--line)}
#board tr.rsub:last-child td{border-bottom:0}
.subgrid{display:flex;flex-wrap:wrap;gap:8px 10px}
.subgrid span{display:flex;flex-direction:column;gap:2px;padding:7px 12px;border-radius:9px;
  background:var(--sunken);min-width:96px;flex:1 1 auto}
.subgrid u{text-decoration:none;font-size:.58rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.subgrid b{font-family:var(--f-num);font-size:.86rem;font-weight:600;font-variant-numeric:tabular-nums}
.subgrid b[data-f="peak"]{color:var(--gain)}
.subgrid b[data-f="trough"]{color:var(--loss)}
#board tr.win td,#board tr.loss td{background-color:transparent}
#board tr.win.rmain td,#board tr.win.rsub td{background-color:color-mix(in srgb,var(--gain) 9%,transparent)}
#board tr.loss.rmain td,#board tr.loss.rsub td{background-color:color-mix(in srgb,var(--loss) 9%,transparent)}
@media(max-width:640px){
  .subgrid span{min-width:calc(50% - 5px)}
  #board td[data-f="pnl"]{font-size:1.05rem}
}

/* ================= STRATEGY LAB ================= */
.lab-steps{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.lab-step{flex:1 1 200px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:14px 16px}
.lab-step .n{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;
  font-size:.72rem;font-weight:800;margin-bottom:8px}
.lab-step h4{margin:0 0 4px;font-size:.92rem}
.lab-step p{margin:0;font-size:.8rem;color:var(--muted);line-height:1.45}

.coinpick{padding:0 18px 18px}
.coinbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:0 0 12px}
.coingrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
.coin{display:flex;align-items:center;justify-content:space-between;gap:6px;
  background:var(--field);border:1px solid var(--line);border-radius:10px;
  padding:8px 10px;transition:border-color .16s,opacity .16s}
.coin .sym{font-weight:700;font-size:.82rem;letter-spacing:.2px}
.coin.on{border-color:var(--brand)}
.coin.off{opacity:.42}
.coin .acts{display:flex;gap:2px}
.coin button{background:none;border:0;cursor:pointer;color:var(--muted);
  padding:2px 5px;border-radius:6px;font-size:.8rem;line-height:1}
.coin button:hover{background:var(--line);color:var(--ink)}
.coin .dot{width:8px;height:8px;border-radius:50%;background:var(--gain);flex:none}
.coin.off .dot{background:var(--muted)}

.labsum{background:var(--field);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;margin:0 0 16px;font-size:.88rem;line-height:1.6}
.labsum b{color:var(--brand)}

.fset{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:0 0 12px}
.fset > legend{font-size:.78rem;font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;color:var(--muted);padding:0 6px}
.fset .hint{font-size:.78rem;color:var(--muted);margin:0 0 10px;line-height:1.5}
.fhide{display:none !important}

.runbar{position:sticky;bottom:0;z-index:5;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:12px 16px;
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  box-shadow:0 -6px 24px rgba(0,0,0,.18);margin-top:16px}
.runbar .grow{flex:1 1 auto;font-size:.82rem;color:var(--muted)}

.codehead{display:flex;justify-content:space-between;align-items:center;
  gap:10px;flex-wrap:wrap;margin:0 0 8px}
textarea.code{font-family:var(--mono,ui-monospace,monospace);font-size:.8rem;
  line-height:1.55;white-space:pre;tab-size:4;background:var(--field)}

@media(max-width:640px){
  .coingrid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
  .runbar{position:static;box-shadow:none}
}

/* ---- Lab form grid (was missing entirely) ---- */
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:10px 14px;align-items:end}
.fgrid > label{display:flex;flex-direction:column;gap:5px;
  font-size:.76rem;font-weight:600;letter-spacing:.2px;color:var(--muted)}
.fgrid > label .input{width:100%}
.fgrid > label.wide{grid-column:1/-1}
.fgrid > label.chk{flex-direction:row;align-items:center;gap:8px;
  font-size:.82rem;color:var(--ink);font-weight:500}
.fgrid > label.chk input{width:auto}

.lab .input,.labform .input{padding:8px 11px;font-size:.85rem;border-radius:9px}
.labform .fset{padding:12px 14px;margin:0 0 10px}
.labform .fset > legend{font-size:.7rem}

.labgrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.labgrid .side{position:sticky;top:78px;display:flex;flex-direction:column;gap:12px}
@media(max-width:1080px){
  .labgrid{grid-template-columns:1fr}
  .labgrid .side{position:static}
}

.mini{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.mini h3{margin:0 0 10px;font-size:.82rem;text-transform:uppercase;
  letter-spacing:.6px;color:var(--muted)}
.mini .row{display:flex;justify-content:space-between;gap:10px;
  padding:5px 0;font-size:.84rem;border-bottom:1px solid var(--line)}
.mini .row:last-of-type{border-bottom:0}
.mini .row span:last-child{font-weight:700}

.editorwrap{border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--field)}
.editorwrap .bar{display:flex;justify-content:space-between;align-items:center;
  padding:8px 12px;border-bottom:1px solid var(--line);font-size:.75rem;
  color:var(--muted);letter-spacing:.4px;text-transform:uppercase;font-weight:700}
.editorwrap textarea{border:0;border-radius:0;background:transparent;
  width:100%;display:block;resize:vertical;padding:12px 14px}

/* ── DLBR scanner ─────────────────────────────────────────────── */
.dn{color:var(--loss)}
.strong{font-weight:700}
.addrow{display:flex;gap:10px;align-items:center}
.addrow input{flex:1;min-width:0}
.check{display:flex;align-items:center;gap:9px;font-size:.82rem;color:var(--ink-2);cursor:pointer;
  padding:11px 0;font-weight:600}
.check input{width:16px;height:16px;accent-color:var(--brand);cursor:pointer;flex:none}
.csym{font-family:var(--mono);font-size:.78rem;font-weight:700;letter-spacing:.02em}
.loglist{list-style:none;margin:0;padding:0;font-size:.8rem;line-height:1.9;color:var(--ink-2)}
.loglist li{border-bottom:1px solid var(--line-2);padding:5px 0}
.loglist li:last-child{border-bottom:0}
.pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:.68rem;font-weight:700;
  letter-spacing:.04em;background:var(--sunken);color:var(--ink-2);white-space:nowrap}
.pill.up{background:color-mix(in srgb,var(--gain) 15%,transparent);color:var(--gain)}
.pill.dn{background:color-mix(in srgb,var(--loss) 15%,transparent);color:var(--loss)}
.pill.open{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.tbl tbody td{padding:11px 12px}
.dlbr-acc .panel-head{align-items:baseline}
.dlbr-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line-2);
  border-top:1px solid var(--line-2)}
.dstat{background:var(--card);padding:16px 14px;display:flex;flex-direction:column;gap:6px}
.dlab{font-size:.62rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.dval{font-family:var(--f-num);font-size:1.5rem;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.dval.up{color:var(--gain)} .dval.dn{color:var(--loss)}
.dlbr-tbl td.mono{font-family:var(--mono);font-size:.78rem}
.dlbr-tbl tbody tr.sig-win td{background:color-mix(in srgb,var(--gain) 7%,transparent)}
.dlbr-tbl tbody tr.sig-loss td{background:color-mix(in srgb,var(--loss) 7%,transparent)}
@media(max-width:1024px){.dlbr-stats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.dlbr-stats{grid-template-columns:repeat(2,1fr)}
  .dval{font-size:1.25rem}.addrow{flex-direction:column;align-items:stretch}}
.dayrow{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line-2);border-top:1px solid var(--line-2)}
.daycell{background:var(--card);padding:14px 10px;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.dnum{font-family:var(--f-num);font-size:1.35rem;font-weight:800;color:var(--ink);line-height:1}
.dsub{font-family:var(--mono);font-size:.68rem;color:var(--ink-3)}
@media(max-width:820px){.dayrow{grid-template-columns:repeat(4,1fr)}}
@media(max-width:480px){.dayrow{grid-template-columns:repeat(2,1fr)}}