/* ————————————————————————————————————————————————
   THOCK · The Board — a keyboard of the crypto market
   ———————————————————————————————————————————————— */

:root{
  --paper:#e7e4dc;
  --card:#fcfbf7;
  --key-base:#cfcaba;
  --key-base-top:#d6d1c2;
  --ink:#1d1c17;
  --muted:#8d887b;
  --faint:#b5b0a3;
  --hair:#e6e2d7;
  --up:#5c7a4e;
  --down:#a85a50;
  --accent:#8b6f4e;              /* set per switch stem */
  --pop:#fffefb;                 /* popover / panel surfaces */
  --pop2:#fbfaf5;                /* stat cells */
  --btn:#f6f4ec;
  --row-hover:#f6f4ec;
  --cap-ink:#1d1c17;
  --cap-ink-soft:rgba(29,28,23,.52);
  --hint-ink:rgba(29,28,23,.42);
  --hint-line:rgba(29,28,23,.18);
  --hint-bg:rgba(255,255,255,.45);
  --page-glow:rgba(255,255,255,.55);
  --shell-line:#fff;
  --chip-bg:linear-gradient(180deg,#33312a,#191812);
  --chip-ink:#f1eee4;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;

  /* switch physics (overridden per body[data-switch]) */
  --travel:4px;
  --down-dur:.055s;
  --down-ease:cubic-bezier(.4,.6,.5,1);
  --up-dur:.16s;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  background-image:radial-gradient(1200px 500px at 50% -10%, var(--page-glow), transparent 60%);
  color:var(--ink);
  font-family:var(--serif);
  -webkit-font-smoothing:antialiased;
  padding:22px clamp(10px,2.5vw,36px) 40px;
}
.mono{font-family:var(--mono)}
button{font:inherit;color:inherit}

.shell{
  max-width:1500px;margin:0 auto;
  background:var(--card);
  border-radius:24px;
  box-shadow:0 40px 90px -20px rgba(62,55,38,.35), 0 4px 14px rgba(62,55,38,.10), inset 0 1px 0 var(--shell-line);
  overflow:clip;
}

/* ————— header ————— */
.top{
  display:flex;align-items:center;gap:28px;
  padding:18px 30px 16px;
  border-bottom:1px solid var(--hair);
}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.logo-key{
  width:30px;height:30px;border-radius:8px;display:inline-block;position:relative;
  background:linear-gradient(#3a382f,#191813);
  box-shadow:0 2px 4px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.15);
}
.logo-cap{
  position:absolute;inset:3px 3px 5px;border-radius:5px;
  background:linear-gradient(180deg,#454236,#23211a);
  color:#f2efe6;font-family:var(--mono);font-weight:700;font-size:13px;
  display:flex;align-items:center;justify-content:center;
  border-bottom:2px solid var(--accent);
  transition:border-color .3s;
}
.brand-name{font-size:21px;font-weight:600;letter-spacing:-.01em}

.cats{display:flex;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cat{
  border:0;background:none;cursor:pointer;white-space:nowrap;
  font-family:var(--serif);font-size:14.5px;color:var(--muted);
  padding:6px 9px 8px;border-radius:8px;position:relative;
}
.cat:hover{color:var(--ink)}
.cat.active{color:var(--ink);font-weight:600}
.cat.active::after{
  content:"";position:absolute;left:9px;right:9px;bottom:2px;height:2px;
  background:var(--ink);border-radius:1px;
}
.cat .n{font-family:var(--mono);font-size:10px;color:var(--faint);margin-left:4px;vertical-align:2px}

.status{
  flex:none;display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--ink);
}
.status .dot{
  width:8px;height:8px;border-radius:50%;background:#4c9a58;
  box-shadow:0 0 0 0 rgba(76,154,88,.5);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(76,154,88,.45)}
  70%{box-shadow:0 0 0 7px rgba(76,154,88,0)}
  100%{box-shadow:0 0 0 0 rgba(76,154,88,0)}
}
.status .sep{color:var(--faint)}
.board-stat{color:var(--muted)}

/* ————— masthead ————— */
.masthead{
  display:flex;align-items:flex-end;justify-content:space-between;gap:30px;
  padding:34px 34px 6px;
}
h1{
  font-size:clamp(44px,5vw,66px);line-height:.95;margin:0 0 14px;
  font-weight:500;letter-spacing:-.02em;
}
.tagline{
  margin:0;max-width:560px;
  font-family:var(--mono);font-size:12.5px;line-height:1.65;color:var(--muted);
}
.tagline .up-word{color:var(--up)}
.tagline .down-word{color:var(--down)}

/* controls */
.controls{display:flex;flex-direction:column;align-items:flex-end;gap:12px;flex:none;padding-bottom:4px}
.side-controls{display:flex;align-items:center;gap:10px}

.switch-picker{display:flex;align-items:flex-end;gap:7px;flex-wrap:wrap}
.picker-label{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--faint);
  margin-right:2px;padding-bottom:12px;
}
.sw{
  border:0;padding:0;background:none;cursor:pointer;position:relative;
  width:58px;height:46px;flex:none;border-radius:9px;
  background:linear-gradient(#c9c4b4,#bdb7a5);
  box-shadow:inset 0 -1px 2px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.7);
}
.sw .cap{
  position:absolute;inset:0 0 4px;border-radius:8px;
  background:var(--sw-capbg,linear-gradient(180deg,#faf8f1,#eceadd));
  box-shadow:inset 0 1px 0 #fff, inset 0 -5px 9px rgba(0,0,0,.045), 0 2.5px 4px rgba(50,45,30,.22);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  transition:transform var(--down-dur) var(--down-ease);
  will-change:transform;
}
.sw .stem{width:11px;height:11px;border-radius:3px;transform:rotate(45deg);box-shadow:inset 0 1px 1px rgba(255,255,255,.5), 0 1px 2px rgba(0,0,0,.25)}
.sw .sw-name{font-family:var(--mono);font-size:8px;letter-spacing:.08em;color:var(--muted)}
.sw.down .cap{transform:translateY(var(--travel));box-shadow:inset 0 1px 0 #fff, 0 1px 1px rgba(50,45,30,.15)}
.sw.selected .cap{
  transform:translateY(2px);
  box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(50,45,30,.18), 0 0 0 1.6px var(--accent);
}
.sw.selected .sw-name{color:var(--ink);font-weight:700}

.vol{
  -webkit-appearance:none;appearance:none;cursor:pointer;
  width:86px;height:4px;border-radius:2px;margin-right:2px;
  background:var(--hair);outline-offset:4px;
}
.vol::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:14px;height:14px;border-radius:5px;
  background:var(--ink);border:2.5px solid #fdfcf8;
  box-shadow:0 1px 3px rgba(50,45,30,.4);
}
.vol::-moz-range-thumb{
  width:9px;height:9px;border-radius:4px;
  background:var(--ink);border:2.5px solid #fdfcf8;
  box-shadow:0 1px 3px rgba(50,45,30,.4);
}
.icon-btn{
  border:1px solid var(--hair);background:var(--btn);cursor:pointer;
  width:34px;height:34px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;color:var(--muted);
}
.icon-btn:hover{color:var(--ink);border-color:var(--faint)}
.view-toggle{display:flex;gap:5px}
.view-btn.active{background:var(--ink);color:var(--card);border-color:var(--ink)}

/* ————— the board ————— */
.board{
  position:relative;          /* offset parent for the keys — band mapping reads offsetTop */
  display:grid;
  grid-template-columns:repeat(20,1fr);
  grid-auto-rows:47px;
  grid-auto-flow:row dense;
  gap:9px;
  padding:24px 34px 30px;
}

.key{
  grid-column:span var(--c,1);
  grid-row:span var(--r,1);
  position:relative;border:0;padding:0;background:none;cursor:pointer;
  border-radius:11px;
  background:linear-gradient(var(--key-base-top),var(--key-base));
  box-shadow:inset 0 -1px 2px rgba(0,0,0,.22), 0 1px 0 rgba(255,255,255,.65);
  transition:opacity .18s ease;          /* opacity only — filter transitions repaint the whole board */
  outline-offset:3px;
}
.key .cap{
  position:absolute;inset:0 0 var(--cap-lift,5px);
  border-radius:10px;
  background:var(--capbg,linear-gradient(180deg,#f9f7f0,#edeadd));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), inset 0 -6px 10px rgba(0,0,0,.05), 0 3px 5px rgba(50,45,30,.20);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  transition:transform var(--down-dur) var(--down-ease);   /* transform only: stays on the compositor */
  will-change:transform;
  overflow:hidden;
}
.key .lip{
  position:absolute;left:12%;right:12%;bottom:4px;height:3px;border-radius:2px;
  background:var(--dir,transparent);opacity:var(--lip-o,0);
}
.key .tick{font-family:var(--mono);font-weight:700;letter-spacing:.02em;line-height:1;color:var(--cap-ink)}
.key .chg{font-family:var(--mono);color:var(--cap-ink-soft);line-height:1.1}
.key .klogo{
  position:absolute;left:7px;top:7px;width:13px;height:13px;
  object-fit:contain;opacity:.92;pointer-events:none;
}
.key.sz-lg .klogo{width:16px;height:16px;left:9px;top:9px}
.key.sz-xl .klogo{width:22px;height:22px;left:12px;top:12px}
.key .hint{
  position:absolute;right:7px;top:6px;
  font-family:var(--mono);font-size:8.5px;color:var(--hint-ink);
  border:1px solid var(--hint-line);border-radius:3.5px;padding:1px 3.5px;line-height:1.2;
  background:var(--hint-bg);
}

/* typography by key size */
.key.sz-xl .tick{font-size:clamp(34px,4.2vw,58px)}
.key.sz-xl .chg{font-size:17px;margin-top:6px}
.key.sz-lg .tick{font-size:clamp(20px,2vw,27px)}
.key.sz-lg .chg{font-size:12.5px;margin-top:3px}
.key.sz-md .tick{font-size:16px}
.key.sz-md .chg{font-size:10.5px;margin-top:2px}
.key.sz-sm .tick{font-size:11.5px}
.key.sz-sm .chg{font-size:9px}
.key.sz-xs .tick{font-size:9.5px;letter-spacing:0}
.key.sz-xs .chg{display:none}
.key.sz-sm .hint,.key.sz-xs .hint{font-size:7px;right:3.5px;top:3.5px;padding:.5px 2.5px;border-radius:3px}

/* press physics */
.key.down .cap, .key.latched .cap{
  transform:translateY(var(--travel));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 1px 1px rgba(50,45,30,.12);
}
.key.sprung .cap{animation:spring var(--up-dur) cubic-bezier(.2,.85,.3,1.35)}
@keyframes spring{
  0%{transform:translateY(var(--travel))}
  62%{transform:translateY(-1.2px)}
  100%{transform:translateY(0)}
}
/* clicky jolt: little snap partway through travel */
body[data-switch="razer"] .key.down .cap{animation:jolt .07s linear}
body[data-switch="modelm"] .key.down .cap{animation:jolt .05s linear}
@keyframes jolt{
  0%{transform:translateY(0)}
  45%{transform:translateY(calc(var(--travel) * .45))}
  60%{transform:translateY(calc(var(--travel) * 1.15))}
  100%{transform:translateY(var(--travel))}
}

/* hover focus: dim the rest of the board (opacity only — cheap to composite) */
.board.dimmed .key:not(.hot):not(.latched){opacity:.34}
/* category filter: fade keys outside the active category */
.key.faded{opacity:.13;filter:saturate(.2);pointer-events:none}
.board.dimmed .key.faded{opacity:.13}
.board-error{grid-column:1/-1;padding:60px 0;text-align:center;color:var(--muted);font-size:13px}
.key.hot .cap{filter:brightness(1.035)}
.key.latched{z-index:2}

/* live price tick flash */
.key.flash-up .cap{box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 3px 5px rgba(50,45,30,.2), 0 0 0 2px rgba(92,122,78,.55)}
.key.flash-down .cap{box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 3px 5px rgba(50,45,30,.2), 0 0 0 2px rgba(168,90,80,.55)}

/* keyboard profiles → physics + accent */
body[data-switch="holypanda"]{--travel:4.2px;--down-dur:.055s;--down-ease:cubic-bezier(.15,.8,.3,1);--up-dur:.16s;--accent:#d97f3e}
body[data-switch="keychron"]{--travel:4px;--down-dur:.052s;--down-ease:cubic-bezier(.3,.75,.4,1);--up-dur:.15s;--accent:#c99a2e}
body[data-switch="hhkb"]    {--travel:3.4px;--down-dur:.075s;--down-ease:cubic-bezier(.25,.6,.35,1);--up-dur:.2s;--accent:#8a84a8}
body[data-switch="nuphy"]   {--travel:2.6px;--down-dur:.038s;--down-ease:cubic-bezier(.4,.6,.5,1);--up-dur:.1s;--accent:#e8735a}
body[data-switch="modelm"]  {--travel:5.5px;--down-dur:.04s;--down-ease:cubic-bezier(.5,.4,.6,1);--up-dur:.12s;--accent:#3d3a33}
body[data-switch="razer"]   {--travel:4px;--down-dur:.06s;--down-ease:cubic-bezier(.2,.9,.3,1);--up-dur:.14s;--accent:#38c11e}

/* ————— board themes: the whole page wears the selected keyboard ————— */
body[data-switch="holypanda"]{                        /* panda: white caps, dark case */
  --paper:#d6d5d0;--card:#f4f3ef;--key-base:#403f3b;--key-base-top:#565550;
  --hair:#e3e1da;--muted:#84817a;--faint:#adaaa2;
  --pop:#fdfcf9;--pop2:#f7f6f2;--btn:#ebeae4;--row-hover:#edece6;
  --page-glow:rgba(255,255,255,.6);
}
body[data-switch="holypanda"] .key{
  box-shadow:inset 0 -1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5);
}
body[data-switch="nuphy"]{                            /* white low-profile, pastel coral */
  --paper:#e2e6ea;--card:#fdfdfe;--key-base:#c3cad2;--key-base-top:#d5dbe2;
  --hair:#e9ecf0;--muted:#828b95;--faint:#aeb6bf;
  --pop:#fff;--pop2:#f6f8fa;--btn:#eef1f4;--row-hover:#f0f3f6;--cap-lift:4px;
}
body[data-switch="modelm"]{                           /* retro IBM pearl & pebble */
  --paper:#c8c4b5;--card:#e8e4d6;--key-base:#a29e8e;--key-base-top:#bab5a5;
  --hair:#d6d2c2;--muted:#7b776b;--faint:#a19d90;
  --pop:#f2eee1;--pop2:#ece8da;--btn:#ded9c9;--row-hover:#ded9c9;
  --page-glow:rgba(255,255,255,.5);--cap-lift:6px;
}
body[data-switch="hhkb"]{                             /* charcoal Type-S: full dark */
  --paper:#191816;--card:#262522;--key-base:#131210;--key-base-top:#201f1c;
  --ink:#e6e2d8;--muted:#9a948a;--faint:#6b665e;--hair:#38352f;
  --pop:#2e2c28;--pop2:#282623;--btn:#312f2a;--row-hover:#312f2a;
  --cap-ink:#e8e4da;--cap-ink-soft:rgba(232,228,218,.55);
  --hint-ink:rgba(232,228,218,.5);--hint-line:rgba(232,228,218,.22);--hint-bg:rgba(0,0,0,.25);
  --page-glow:rgba(255,255,255,.05);--shell-line:rgba(255,255,255,.06);
  --chip-bg:linear-gradient(180deg,#4a4741,#2b2925);--chip-ink:#efece2;
  --up:#8fb87a;--down:#d98b7f;
}
body[data-switch="razer"]{                            /* black & green, faint RGB glow */
  --paper:#0c0e0c;--card:#161917;--key-base:#050605;--key-base-top:#0d0f0d;
  --ink:#dbe7d6;--muted:#8b9787;--faint:#5c675a;--hair:#242923;
  --pop:#1d211e;--pop2:#191d1a;--btn:#20241f;--row-hover:#20241f;
  --cap-ink:#dfe9da;--cap-ink-soft:rgba(223,233,218,.55);
  --hint-ink:rgba(223,233,218,.5);--hint-line:rgba(223,233,218,.2);--hint-bg:rgba(0,0,0,.3);
  --page-glow:rgba(68,214,44,.05);--shell-line:rgba(255,255,255,.05);
  --chip-bg:linear-gradient(180deg,#2c332b,#151915);--chip-ink:#e2ecd9;
  --up:#4ad62c;--down:#e2564e;
}
/* dark-board component tuning */
body[data-switch="hhkb"] .key,body[data-switch="razer"] .key{
  box-shadow:inset 0 -1px 2px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.06);
}
body[data-switch="hhkb"] .key .cap,body[data-switch="razer"] .key .cap{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 -6px 10px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.5);
}
body[data-switch="razer"] .key .lip{box-shadow:0 0 8px var(--dir)}   /* RGB underglow */
body[data-switch="modelm"] .key{border-radius:9px}
body[data-switch="modelm"] .key .cap{border-radius:7px}
.sw.sw-dark .cap{box-shadow:inset 0 1px 0 rgba(255,255,255,.1), inset 0 -5px 9px rgba(0,0,0,.3), 0 2.5px 4px rgba(0,0,0,.5)}
.sw.sw-dark .sw-name{color:rgba(235,232,225,.72)}
.sw.sw-dark.selected .sw-name{color:#fff}

/* ————— liquid glass finish (body[data-finish="glass"]) ————— */
:root{
  --glass-card:rgba(253,251,246,.55);
  --glass-pop:rgba(255,255,255,.6);
  --glass-line:rgba(255,255,255,.5);
  --glass-edge:rgba(255,255,255,.55);
  --glass-house:rgba(96,90,72,.28);
  --glass-btn:rgba(255,255,255,.4);
  --glass-cell:rgba(255,255,255,.35);
  --aurora-o:.5;
}
body[data-switch="hhkb"]{
  --glass-card:rgba(32,31,28,.55);--glass-pop:rgba(44,42,38,.62);
  --glass-line:rgba(255,255,255,.14);--glass-edge:rgba(255,255,255,.2);
  --glass-house:rgba(0,0,0,.4);--glass-btn:rgba(255,255,255,.09);
  --glass-cell:rgba(255,255,255,.06);--aurora-o:.32;
}
body[data-switch="razer"]{
  --glass-card:rgba(16,19,16,.55);--glass-pop:rgba(26,30,26,.62);
  --glass-line:rgba(255,255,255,.12);--glass-edge:rgba(255,255,255,.18);
  --glass-house:rgba(0,0,0,.45);--glass-btn:rgba(255,255,255,.08);
  --glass-cell:rgba(255,255,255,.05);--aurora-o:.3;
}

.aurora{display:none}
body[data-finish="glass"] .aurora{display:block;position:fixed;inset:-12%;z-index:0;pointer-events:none}
body[data-finish="glass"] .shell{position:relative;z-index:1}
.aurora i{position:absolute;border-radius:50%;opacity:var(--aurora-o);will-change:transform}
.aurora i:nth-child(1){width:58vw;height:58vw;left:-10%;top:-22%;background:radial-gradient(circle, var(--up), transparent 62%);animation:drift-a 47s ease-in-out infinite alternate}
.aurora i:nth-child(2){width:52vw;height:52vw;right:-14%;top:6%;background:radial-gradient(circle, var(--down), transparent 62%);animation:drift-b 59s ease-in-out infinite alternate}
.aurora i:nth-child(3){width:46vw;height:46vw;left:22%;bottom:-26%;background:radial-gradient(circle, var(--accent), transparent 62%);animation:drift-c 71s ease-in-out infinite alternate}
@keyframes drift-a{to{transform:translate3d(14vw,10vh,0) scale(1.15)}}
@keyframes drift-b{to{transform:translate3d(-12vw,14vh,0) scale(.9)}}
@keyframes drift-c{to{transform:translate3d(10vw,-12vh,0) scale(1.2)}}

body[data-finish="glass"] .shell{
  background:var(--glass-card);
  -webkit-backdrop-filter:blur(26px) saturate(1.5);
  backdrop-filter:blur(26px) saturate(1.5);
  border:1px solid var(--glass-line);
}
body[data-finish="glass"] .top,
body[data-finish="glass"] .foot{border-color:var(--glass-line)}
body[data-finish="glass"] .key{
  background:var(--glass-house);
  box-shadow:inset 0 -1px 2px rgba(0,0,0,.2), 0 1px 0 rgba(255,255,255,.3);
}
body[data-finish="glass"] .key .cap{
  border:1px solid var(--glass-edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -8px 14px rgba(255,255,255,.12), 0 4px 12px rgba(40,34,18,.16);
}
body[data-finish="glass"] .tooltip,
body[data-finish="glass"] .panel{
  background:var(--glass-pop);
  -webkit-backdrop-filter:blur(24px) saturate(1.45);
  backdrop-filter:blur(24px) saturate(1.45);
  border-color:var(--glass-line);
}
body[data-finish="glass"] .p-stats{background:transparent;border-color:var(--glass-line)}
body[data-finish="glass"] .p-stat{background:var(--glass-cell)}
body[data-finish="glass"] .icon-btn,
body[data-finish="glass"] .p-close{background:var(--glass-btn);border-color:var(--glass-line)}
body[data-finish="glass"] .sw{background:var(--glass-house)}
body[data-finish="glass"] .sw .cap{border:1px solid var(--glass-edge)}
body[data-finish="glass"] .icon-btn.active,
body[data-finish="glass"] .view-btn.active,
#glass-btn.active{background:var(--ink);color:var(--card);border-color:var(--ink)}


/* ————— tooltip ————— */
.tooltip{
  position:fixed;z-index:40;width:308px;pointer-events:none;
  background:var(--pop);border:1px solid var(--hair);border-radius:13px;
  box-shadow:0 18px 50px -12px rgba(60,52,35,.35), 0 3px 8px rgba(60,52,35,.08);
  padding:15px 16px 13px;
  opacity:0;transform:translateY(4px) scale(.985);
  transition:opacity .14s ease, transform .14s ease;
}
.tooltip.show{opacity:1;transform:none}
.tt-head{display:flex;align-items:center;gap:10px}
.tt-chip{
  min-width:40px;height:34px;padding:0 7px;border-radius:8px;flex:none;
  background:var(--chip-bg);color:var(--chip-ink);
  font-family:var(--mono);font-weight:700;font-size:12px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 2px 3px rgba(0,0,0,.3);
  border-bottom:2.5px solid var(--accent);
}
.tt-logo{width:22px;height:22px;object-fit:contain;margin-left:auto;flex:none}
.tt-name{font-size:15.5px;font-weight:600;line-height:1.15}
.tt-sub{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.04em;margin-top:2px}
.tt-price-row{display:flex;align-items:baseline;gap:9px;margin:11px 0 4px}
.tt-price{font-family:var(--mono);font-size:23px;font-weight:600;letter-spacing:-.01em}
.tt-chg{font-family:var(--mono);font-size:12.5px;font-weight:700}
.tt-chg.up{color:var(--up)} .tt-chg.down{color:var(--down)}
.tt-spark{display:block;margin:2px 0 8px}
.tt-row{
  display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.03em;
  padding:7px 0;border-top:1px solid var(--hair);
}
.tt-story{
  font-size:13px;line-height:1.45;color:var(--muted);
  border-top:1px solid var(--hair);padding-top:8px;margin:0;
}

/* ————— panel (full story) ————— */
.panel-backdrop{
  position:fixed;inset:0;z-index:50;background:rgba(40,36,26,.18);
  opacity:0;transition:opacity .22s;
  pointer-events:none;          /* visual only — keys stay pressable while the story is open */
}
.panel-backdrop.show{opacity:1}
.panel{
  position:fixed;z-index:51;top:14px;right:14px;bottom:14px;width:min(400px,calc(100vw - 28px));
  background:var(--pop);border-radius:18px;border:1px solid var(--hair);
  box-shadow:0 30px 80px -10px rgba(50,44,28,.45);
  padding:26px 26px 22px;overflow-y:auto;
  transform:translateX(calc(100% + 20px));
  transition:transform .28s cubic-bezier(.25,.8,.3,1);
}
.panel.show{transform:none}
.p-close{
  position:absolute;top:14px;right:14px;
  border:1px solid var(--hair);background:var(--btn);color:var(--muted);
  width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:14px;line-height:1;
}
.p-close:hover{color:var(--ink)}
.p-head{display:flex;align-items:center;gap:13px;margin-bottom:4px}
.p-keycap{
  width:64px;height:56px;border-radius:11px;flex:none;position:relative;
  background:linear-gradient(var(--key-base-top),var(--key-base));
  box-shadow:inset 0 -1px 2px rgba(0,0,0,.22);
}
.p-keycap .cap{
  position:absolute;inset:0 0 5px;border-radius:10px;
  background:var(--capbg,linear-gradient(180deg,#f9f7f0,#edeadd));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 3px 5px rgba(50,45,30,.2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-family:var(--mono);font-weight:700;font-size:15px;color:var(--cap-ink);
}
.p-logo{width:22px;height:22px;object-fit:contain}
.p-keycap .cap:has(.p-logo) .p-cap-sym{font-size:9px;letter-spacing:.06em}
.p-title{font-size:22px;font-weight:600;line-height:1.05}
.p-sub{font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.05em;margin-top:4px}
.p-sub .cat-chip{
  border:1px solid var(--hair);border-radius:5px;padding:1.5px 6px;margin-right:6px;
  background:var(--btn);color:var(--muted);
}
.p-price{font-family:var(--mono);font-size:34px;font-weight:600;letter-spacing:-.02em;margin:18px 0 2px}
.p-price .p-chg{font-size:14px;font-weight:700;margin-left:8px}
.p-chg.up{color:var(--up)} .p-chg.down{color:var(--down)}
.p-range{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-bottom:14px}
.p-spark{display:block;margin:0 0 4px}
.p-spark-label{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;color:var(--faint);letter-spacing:.1em;margin-bottom:16px}
.p-stats{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--hair);border:1px solid var(--hair);border-radius:11px;overflow:hidden;
  margin-bottom:16px;
}
.p-stat{background:var(--pop2);padding:9px 12px}
.p-stat .k{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--faint)}
.p-stat .v{font-family:var(--mono);font-size:13px;margin-top:3px}
.p-story{font-size:15px;line-height:1.6;color:var(--ink);opacity:.85;margin:0 0 18px}
.p-foot{font-family:var(--mono);font-size:9.5px;color:var(--faint);letter-spacing:.08em;display:flex;justify-content:space-between}
.p-foot a{color:var(--muted)}

/* ————— list view ————— */
.list{padding:10px 34px 30px;overflow-x:auto}
.list table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12.5px}
.list th{
  text-align:right;font-size:9.5px;letter-spacing:.14em;color:var(--faint);font-weight:500;
  padding:10px 12px;border-bottom:1px solid var(--hair);
}
.list th:nth-child(1),.list th:nth-child(2){text-align:left}
.list td{padding:9px 12px;border-bottom:1px solid var(--hair);text-align:right;white-space:nowrap}
.list td:nth-child(1){color:var(--faint);text-align:left;width:34px}
.list td:nth-child(2){text-align:left}
.list tr{cursor:pointer}
.list tbody tr:hover{background:var(--row-hover)}
.l-sym{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;padding:3px 7px;border-radius:6px;margin-right:10px;
  font-weight:700;font-size:11px;
  background:var(--capbg,#edeadd);box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(50,45,30,.18);
}
.llogo{width:16px;height:16px;object-fit:contain;vertical-align:-3px;margin-right:7px}
.l-name{font-family:var(--serif);font-size:14px}
.l-chg.up{color:var(--up)} .l-chg.down{color:var(--down)}
.l-cat{color:var(--muted);font-size:10.5px}

/* ————— footer ————— */
.foot{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:14px 34px 20px;border-top:1px solid var(--hair);
  font-size:10px;color:var(--faint);letter-spacing:.06em;
}
#data-note{color:var(--muted)}
.foot a{color:var(--muted)}

/* ————— responsive ————— */
@media (max-width:1000px){
  .masthead{flex-direction:column;align-items:flex-start}
  .controls{align-items:flex-start}
  .top{flex-wrap:wrap;gap:12px}
  .cats{order:3;flex-basis:100%}
  .status{margin-left:auto}
}
@media (max-width:700px){
  body{padding:10px 8px 24px}
  .board{grid-template-columns:repeat(10,1fr);grid-auto-rows:42px;gap:6px;padding:16px 14px 22px}
  .masthead{padding:22px 16px 4px}
  .top,.foot{padding-left:16px;padding-right:16px}
  .list{padding:6px 8px 20px}
  .board-stat{display:none}
  .key .hint{display:none}
  h1{font-size:42px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}