/* ===== Ant Design v5 design language (dark) — vanilla CSS, no React ===== */
:root{
  --bg:#000000;            /* colorBgLayout */
  --panel:#141414;         /* colorBgContainer */
  --elevated:#1f1f1f;      /* colorBgElevated (popovers/dropdowns) */
  --line:#303030;          /* colorBorderSecondary */
  --border:#424242;        /* colorBorder */
  --fg:rgba(255,255,255,.88);      /* colorText */
  --muted:rgba(255,255,255,.65);   /* colorTextSecondary */
  --muted2:rgba(255,255,255,.45);  /* colorTextTertiary */
  --accent:#4096ff;        /* brighter blue — reads better on the dark theme */
  --accent-hover:#69b1ff;
  --accent-bg:rgba(64,150,255,.22);
  --kw-pos:#3ddc97;--kw-neg:#ff6b6b;--kw-neu:#ffc447;   /* inline keyword marks (soft-tint highlights) */
  --seg-track:#0a0a0a;             /* segmented track (darker than the selected item) */
  --seg-active:#34373e;            /* segmented SELECTED — clearly lighter */
  --seg-active-fg:rgba(255,255,255,.95);
  --hover:rgba(255,255,255,.08);   /* controlItemBgHover */
  --up:#26a69a; --down:#ef5350;
  --radius:6px; --radius-lg:8px;
  --shadow:0 6px 16px rgba(0,0,0,.45);
  --topbar:74px; --toolbar:42px;
}
/* ===== Premium theme palettes (8) — selectable via the ◐ picker (theme.js). =====
   Each sets data-theme="<id>"; the root also carries data-mode="dark|light" so the
   light-specific component tweaks further down hook every light palette, not just one. */

/* ---- DARK ---- */
[data-theme="midnight-sapphire"]{
  --bg:#070b14; --panel:#0e1626; --elevated:#16233a; --line:rgba(140,175,255,.12); --border:rgba(120,164,255,.30);
  --fg:rgba(235,242,255,.92); --muted:rgba(200,214,240,.62); --muted2:rgba(200,214,240,.42);
  --accent:#6ba6ff; --accent-hover:#93bdff; --accent-bg:rgba(107,166,255,.18);
  --seg-track:#050a14; --seg-active:#1c2a44; --seg-active-fg:rgba(235,242,255,.96);
  --hover:rgba(107,166,255,.10); --up:#2dd4bf; --down:#fb7185; --shadow:0 6px 18px rgba(2,8,24,.6);
}
[data-theme="obsidian-gold"]{
  --bg:#0a0a0b; --panel:#151417; --elevated:#1f1d22; --line:rgba(255,255,255,.07); --border:rgba(214,178,94,.30);
  --fg:rgba(255,248,235,.9); --muted:rgba(255,248,235,.58); --muted2:rgba(255,248,235,.4);
  --accent:#e2be6a; --accent-hover:#eccf88; --accent-bg:rgba(226,190,106,.16);
  --seg-track:#050505; --seg-active:#2a2730; --seg-active-fg:rgba(255,248,235,.95);
  --hover:rgba(226,190,106,.08); --up:#4ade80; --down:#f87171; --shadow:0 6px 16px rgba(0,0,0,.55);
}
[data-theme="royal-amethyst"]{
  --bg:#0a0711; --panel:#16111f; --elevated:#211a2e; --line:rgba(180,160,255,.12); --border:rgba(178,150,255,.30);
  --fg:rgba(244,238,255,.92); --muted:rgba(214,204,240,.6); --muted2:rgba(214,204,240,.42);
  --accent:#b39dff; --accent-hover:#c8b8ff; --accent-bg:rgba(179,157,255,.18);
  --seg-track:#070510; --seg-active:#241d33; --seg-active-fg:rgba(244,238,255,.96);
  --hover:rgba(179,157,255,.10); --up:#34d399; --down:#fb7185; --shadow:0 6px 18px rgba(8,3,20,.6);
}
[data-theme="platinum-graphite"]{
  --bg:#0c0d0e; --panel:#17181b; --elevated:#212327; --line:rgba(255,255,255,.07); --border:rgba(174,190,208,.26);
  --fg:rgba(238,242,247,.93); --muted:rgba(198,208,220,.6); --muted2:rgba(198,208,220,.4);
  --accent:#9fb6cc; --accent-hover:#c1d0de; --accent-bg:rgba(159,182,204,.16);
  --seg-track:#060708; --seg-active:#282b30; --seg-active-fg:rgba(238,242,247,.96);
  --hover:rgba(255,255,255,.06); --up:#5ccf9e; --down:#ef6b6b; --shadow:0 6px 16px rgba(0,0,0,.5);
}

/* ---- LIGHT ---- */
[data-theme="porcelain-sapphire"]{
  --bg:#eaeff6; --panel:#fbfcfe; --elevated:#ffffff; --line:rgba(20,40,80,.1); --border:rgba(50,100,200,.34);
  --fg:rgba(21,32,55,.92); --muted:rgba(21,32,55,.62); --muted2:rgba(21,32,55,.44);
  --accent:#2160db; --accent-hover:#1a4fb8; --accent-bg:rgba(33,96,219,.12);
  --seg-track:#d9e1ee; --seg-active:#fbfcfe; --seg-active-fg:rgba(21,32,55,.95);
  --hover:rgba(33,96,219,.07); --up:#0d8f80; --down:#dc2645; --shadow:0 6px 16px rgba(40,55,90,.14);
}
[data-theme="ivory-gold"]{
  --bg:#f5f1e8; --panel:#fffdf8; --elevated:#ffffff; --line:rgba(40,30,10,.1); --border:rgba(160,120,40,.34);
  --fg:rgba(42,36,22,.92); --muted:rgba(42,36,22,.6); --muted2:rgba(42,36,22,.42);
  --accent:#a9781f; --accent-hover:#8a6014; --accent-bg:rgba(169,120,31,.14);
  --seg-track:#e6ded0; --seg-active:#fffdf8; --seg-active-fg:rgba(42,36,22,.95);
  --hover:rgba(169,120,31,.08); --up:#0f9d4c; --down:#d5352b; --shadow:0 6px 16px rgba(80,64,30,.14);
}
[data-theme="lavender-amethyst"]{
  --bg:#f1edf9; --panel:#fdfcff; --elevated:#ffffff; --line:rgba(40,20,80,.1); --border:rgba(115,70,220,.32);
  --fg:rgba(36,26,54,.92); --muted:rgba(36,26,54,.6); --muted2:rgba(36,26,54,.42);
  --accent:#6d31d9; --accent-hover:#5824b0; --accent-bg:rgba(109,49,217,.12);
  --seg-track:#e5def3; --seg-active:#fdfcff; --seg-active-fg:rgba(36,26,54,.95);
  --hover:rgba(109,49,217,.07); --up:#0a9668; --down:#dc2645; --shadow:0 6px 16px rgba(50,30,90,.14);
}
[data-theme="cool-platinum"]{
  --bg:#e9edf1; --panel:#fbfcfd; --elevated:#ffffff; --line:rgba(20,30,45,.09); --border:rgba(80,100,120,.36);
  --fg:rgba(26,36,48,.92); --muted:rgba(26,36,48,.6); --muted2:rgba(26,36,48,.42);
  --accent:#44607a; --accent-hover:#35506a; --accent-bg:rgba(68,96,122,.12);
  --seg-track:#dbe1e7; --seg-active:#fbfcfd; --seg-active-fg:rgba(26,36,48,.95);
  --hover:rgba(20,30,45,.05); --up:#0a9463; --down:#cf3b3b; --shadow:0 6px 16px rgba(40,55,75,.13);
}
/* darker sentiment inks for the light themes — the dark-theme brights wash out on a pale ground */
[data-theme="cool-platinum"],[data-theme="ivory-gold"],[data-theme="lavender-amethyst"],[data-theme="porcelain-sapphire"]{--kw-pos:#178a5c;--kw-neg:#c93a34;--kw-neu:#a06f00}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);
  font:14px/1.5715 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  overflow:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;color:var(--fg);background:transparent;border:none;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s}
button:disabled{opacity:.4;cursor:not-allowed}

/* ===== header (Ant Layout.Header) ===== */
.topbar{height:var(--topbar);display:flex;align-items:center;gap:16px;padding:0 16px;position:sticky;top:0;
  z-index:175;background:var(--panel);border-bottom:1px solid var(--line)}   /* z:175 keeps the bar above the trend assistor (below), under normal modals (200) */
.brand{display:inline-flex;align-items:center;height:100%;text-decoration:none}
.brand img{height:48px;width:auto;display:block}   /* 1.2× the original 40px — 1.5× read as too big */

/* Ant Input */
.symbol{position:relative}
.symbol input{width:220px;height:32px;background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);color:var(--fg);padding:4px 11px;outline:none;font-size:14px;transition:all .2s}
.symbol input::placeholder{color:var(--muted2)}
.symbol input:hover{border-color:var(--accent-hover)}
/* GLOBAL placeholder style (all pages): uppercase labels, unified muted tone + letter-spacing.
   Bare pseudo-element (low specificity) so per-input colour overrides still win; only the
   text-transform/letter-spacing/opacity apply everywhere. */
::placeholder{text-transform:uppercase;letter-spacing:.04em;opacity:1}
::-webkit-input-placeholder{text-transform:uppercase;letter-spacing:.04em}
/* GLOBAL: hide the native up/down spinners on all number inputs (all pages) */
input[type="number"]{-moz-appearance:textfield;appearance:textfield}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}
.symbol input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg)}

/* Ant Dropdown menu */
.dropdown{position:absolute;top:38px;left:0;width:130px;max-height:340px;overflow:auto;margin:0;padding:4px;
  list-style:none;background:var(--elevated);border:1px solid var(--line);border-radius:var(--radius-lg);
  z-index:50;box-shadow:var(--shadow);display:none}
.dropdown.open{display:block}
.dropdown li{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;border-radius:var(--radius);
  cursor:pointer;transition:background .2s}
.dropdown li:hover,.dropdown li.active{background:var(--hover)}
.dropdown li b{font-weight:500}
.dropdown li .px{color:var(--muted2);font-variant-numeric:tabular-nums}
.dropdown li .up{color:var(--up)} .dropdown li .down{color:var(--down)}

.quote{display:flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums}
.quote .p{font-size:18px;font-weight:600}
.quote .c.up{color:var(--up)} .quote .c.down{color:var(--down)}

/* Ant Tabs-ish nav */
.nav{display:flex;gap:2px;margin-left:8px;align-items:center;flex:1}   /* flex:1 right-aligns the account button */
.nav a[href="/"]{order:-1}   /* Signal (the home page) sits leftmost in the nav on every page */
/* account: a MUI-style circular avatar button + dropdown (Profile / Logout), injected as the
   LAST topbar child so it sits right-most (after the theme toggle) */
.nav-profile-wrap{position:relative;flex:none;align-self:center;display:flex;align-items:center}
.nav-profile{width:44px;height:44px;padding:0;border:none;border-radius:50%;background:transparent;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .18s}
.nav-profile:hover{background:var(--hover)}
.nav-avatar{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:800;line-height:1;color:#fff;border:1.5px solid var(--panel);background-size:cover;background-position:center;
  box-shadow:0 0 0 1px var(--accent);background-image:linear-gradient(140deg,var(--accent),color-mix(in srgb,var(--accent) 45%,#6366f1))}
.nav-avatar.has-img{color:transparent;background-color:var(--panel)}
.nav-profile-menu{position:absolute;right:0;top:44px;z-index:1000;min-width:190px;padding:6px;
  border-radius:var(--radius-lg);background:var(--elevated);border:1px solid var(--border);box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:2px}
.nav-profile-menu[hidden]{display:none}
.npm-head{display:flex;flex-direction:column;gap:1px;padding:6px 10px 8px;border-bottom:1px solid var(--line);margin-bottom:4px}
.npm-name{font-weight:700;font-size:13px;color:var(--fg)}
.npm-email{font-size:11px;color:var(--muted2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.npm-item{display:block;width:100%;padding:8px 10px;border:none;border-radius:var(--radius);background:transparent;
  color:var(--fg);text-decoration:none;font-size:13px;font-family:inherit;text-align:left;cursor:pointer}
.npm-item:hover{background:var(--hover)}
.npm-logout{color:var(--down)}
/* profile page */
.prof-main{max-width:640px;margin:0 auto;padding:32px 20px 80px}
.prof-title{font-size:22px;font-weight:800;margin:0 0 20px}
.prof-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 20px;margin-bottom:16px}
.prof-h{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 14px}
.prof-avatar-row{display:flex;align-items:center;gap:18px}
.prof-avatar{width:72px;height:72px;flex:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:28px;font-weight:800;color:#fff;border:1px solid var(--border);background-size:cover;background-position:center;
  background-image:linear-gradient(140deg,var(--accent),color-mix(in srgb,var(--accent) 45%,#6366f1))}
.prof-avatar.has-img{color:transparent;background-color:var(--panel)}
.prof-avatar-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.prof-field{display:flex;align-items:center;gap:10px}
.prof-field.prof-col{flex-direction:column;align-items:stretch}
.prof-in{flex:1;height:36px;background:var(--elevated);border:1px solid var(--border);border-radius:var(--radius);
  color:var(--fg);padding:6px 12px;outline:none;font-size:14px}
.prof-in:focus{border-color:var(--accent)}
.prof-col .prof-in{width:100%}
.prof-col .btn-primary{align-self:flex-start;margin-top:2px}
.prof-hint{font-size:12px;color:var(--muted2);margin:10px 0 0}
.toast-bad{background:color-mix(in srgb,var(--down) 22%,var(--elevated));border-color:color-mix(in srgb,var(--down) 55%,transparent)}
/* underline-tab nav (picked Sep 11): the active link carries a 2px accent underline flush to
   the topbar's lower edge, no pill. Links fill the bar height (.nav is align-items:stretch) so
   the underline sits on the bar edge without a magic offset; hover previews it at 40% accent. */
.nav-link{display:inline-flex;align-items:center;padding:16px 13px 12px;border-radius:0;color:var(--muted);
  cursor:pointer;font-family:var(--font-x);font-size:14px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  transition:color .18s;text-decoration:none;position:relative}
.nav-link:hover{color:var(--accent);background:none}
.nav-link.on{color:var(--accent);background:none;font-weight:600}
.nav-link.on::after,.nav-link:not(.on):hover::after{content:"";position:absolute;left:12px;right:12px;
  bottom:0;height:2.5px;background:var(--accent);border-radius:2px 2px 0 0}   /* 12px bottom padding puts the underline ~12px under the label */
.nav-link:not(.on):hover::after{background:color-mix(in srgb,var(--accent) 40%,transparent)}

/* theme toggle as a MUI-style circular icon button (matches the account button height/shape) */
.topbar .icon{width:42px;height:42px;flex:none;align-self:center;display:inline-flex;align-items:center;
  justify-content:center;padding:0;border:none;border-radius:50%;background:transparent;color:var(--muted);
  font-size:20px;line-height:1;cursor:pointer;transition:background .18s,color .18s}
.topbar .icon svg{width:22px;height:22px}
.topbar .icon:hover{background:var(--hover);color:var(--fg)}
.icon:hover{background:var(--hover);color:var(--fg)}
.topbar .icon.on{background:var(--hover);color:var(--fg)}   /* bell active (panel open) */
/* daily-news bell dropdown — shell only; content wired later */
.daily-news-panel{position:fixed;top:var(--topbar);right:12px;margin-top:6px;width:340px;
  max-width:calc(100vw - 24px);max-height:70vh;overflow:auto;z-index:500;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 14px 34px -10px rgba(0,0,0,.55)}
.daily-news-panel[hidden]{display:none}
.dn-head{font-size:13px;font-weight:700;color:var(--fg);padding:12px 14px;border-bottom:1px solid var(--border)}
.dn-body{padding:0}   /* sections self-pad */
.dn-empty{margin:0;padding:12px 14px;color:var(--muted);font-size:12px}
/* daily edition — centered dialog (lead + rail) opened from the nav bell on every page */
.dn-overlay{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.5);padding:20px}
.dn-overlay[hidden]{display:none}
.dn-dialog{--dn-display:"Playfair Display",Georgia,"Times New Roman",serif;
  --dn-serif:"Newsreader",Georgia,"Times New Roman",serif;
  position:relative;display:flex;flex-direction:column;width:min(500px,95vw);max-height:88vh;overflow:hidden;
  font-family:var(--dn-serif);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
/* newsprint paper palette — scoped so the edition reads like paper (child colors inherit these) */
.dn-dialog{--panel:#f5f1e6;--fg:#211e17;--muted:#6f6656;--muted2:#978c77;
  --line:#e2dac8;--border:#e5ddcb;--hover:#ece5d4;
  --accent:#1b4f8f;--accent-bg:#e9e1cd;--up:#1c7a45;--down:#b23a2e;--warn:#a9701a}
.dn-dialog.dn-lead{width:min(840px,96vw);min-height:min(60vh,520px)}   /* never collapses to a line */
.dn-dialog .dn-body{display:flex;flex-direction:column;flex:1;min-height:0;padding:0;position:relative}
/* whale watermark: one fixed size, dead centre of the paper, showing faintly THROUGH the content
   (painted over it at 8% ink — clicks pass through) */
.dn-dialog .dn-body::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:url(../img/whale-mark.png) center/220px auto no-repeat;opacity:.08}
/* loading skeleton — same lead + rail grid as the paper, shimmering bars */
.dn-skel{display:grid;grid-template-columns:1.7fr 1fr;flex:1;min-height:min(70vh,608px)}   /* ≈ a typical edition */
.dn-skel>div{padding:12px 15px;min-width:0}
.dn-skel>div+div{padding:12px 14px;background:color-mix(in srgb,var(--fg) 3%,var(--panel));border-left:1px solid var(--line)}
.dn-sk{height:11px;border-radius:5px;margin:9px 0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--fg) 7%,transparent) 25%,color-mix(in srgb,var(--fg) 13%,transparent) 50%,color-mix(in srgb,var(--fg) 7%,transparent) 75%);
  background-size:200% 100%;animation:dnshimmer 1.3s linear infinite}
.dn-sk.bar{height:56px;border-radius:10px;margin:0 0 14px}
.dn-sk.hero{height:86px;border-radius:10px;margin:0 0 12px}
.dn-sk.h{width:38%;height:12px;margin:16px 0 10px}
.dn-sk.w1{width:92%} .dn-sk.w2{width:66%} .dn-sk.w3{width:80%}
.dn-sk.dl{display:inline-block;width:96px;height:17px;margin:0}   /* dateline placeholder, = the italic line box */
.dn-sk-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@keyframes dnshimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.dn-sk{animation:none}}
@media(max-width:640px){.dn-skel{grid-template-columns:1fr}.dn-skel>div+div{border-left:0;border-top:1px solid var(--line)}}
.dn-main .dn-empty,.dn-rail .dn-empty{padding:2px 0}
/* newspaper masthead — stays fixed; only the content grid below scrolls */
.dn-masthead{flex:none;text-align:center;padding:22px 14px 11px;border-bottom:3px double var(--fg)}
.dn-name{font-family:var(--dn-display);font-weight:900;font-size:25px;line-height:1.02;color:var(--fg);letter-spacing:.01em}
.dn-dateline{margin-top:5px;font-family:var(--dn-serif);font-style:italic;font-size:11px;letter-spacing:.04em;color:var(--muted);
  display:flex;gap:8px;align-items:center;justify-content:center}
.dn-live{color:var(--accent);font-weight:700}
.dn-mh-top{display:flex;align-items:center;gap:8px;padding:0 14px}
.dn-mh-top .dn-name{flex:1;text-align:center}
.dn-navbtn{flex:none;border:0;background:none;color:var(--muted2);font-size:15px;line-height:1;padding:2px 7px;border-radius:6px;cursor:pointer}
.dn-navbtn:hover:not([disabled]){color:var(--fg);background:var(--hover)}
.dn-navbtn[disabled]{opacity:.28;cursor:default}
/* lead + rail grid — the sole scroll region under the fixed masthead */
.dn-cols2{display:grid;grid-template-columns:1.7fr 1fr;flex:1;min-height:0;overflow-y:auto}
.dn-main{padding:12px 15px;min-width:0}
.dn-rail{padding:12px 14px;min-width:0;background:color-mix(in srgb,var(--fg) 3%,var(--panel));border-left:1px solid var(--line)}
@media(max-width:640px){.dn-cols2{grid-template-columns:1fr}.dn-rail{border-left:0;border-top:1px solid var(--line)}}
/* sections */
.dn-sec{min-width:0}
.dn-sec + .dn-sec{margin-top:13px;padding-top:11px;border-top:1px solid var(--border)}
.dn-h{margin:0 0 8px;font-family:var(--dn-serif);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg);
  display:flex;align-items:center;gap:6px;padding-bottom:4px;border-bottom:1px solid var(--border)}
.dn-i{width:14px;height:14px;flex:none;fill:currentColor}
.dn-h .dn-i{color:var(--muted2)}
.dn-i.up{color:var(--up)} .dn-i.dn{color:var(--down)} .dn-i.n{color:var(--accent)}
.dn-i.w{color:var(--warn,#c77d0a)} .dn-i.mut{color:var(--muted)}
/* market strip */
.dn-market{display:flex;align-items:baseline;gap:10px;padding:12px 14px;margin-bottom:12px;border-radius:10px;
  background:var(--accent-bg);font-size:13px}
.dn-market .dn-i{width:18px;height:18px;align-self:center}
.dn-mk-l{font-weight:800;letter-spacing:.08em;color:var(--muted);font-size:12px}
.dn-mk-p{font-family:var(--mono);font-weight:700;font-size:26px;line-height:1;letter-spacing:-.01em;color:var(--fg)}
.dn-mk-c{font-family:var(--mono);font-weight:600;font-size:15px}
.dn-mk-c.up{color:var(--up)} .dn-mk-c.dn{color:var(--down)}
.dn-mk-e{margin-left:auto;align-self:center;color:var(--muted);font-family:var(--mono);font-size:11px}
/* headlines */
.dn-head{display:flex;gap:9px;padding:6px 0;text-decoration:none;color:var(--fg)}
.dn-head + .dn-head{border-top:1px solid var(--border)}
.dn-head:hover .dn-hsn{color:var(--accent)}
.dn-av{width:26px;height:26px;border-radius:50%;flex:none;object-fit:cover}
.dn-av-i{display:grid;place-items:center;background:var(--accent);color:#fff;font-weight:700;font-size:12px}
.dn-hb{min-width:0;flex:1}
.dn-htop{display:flex;justify-content:space-between;gap:8px}
.dn-hau{font-weight:700;font-size:12px;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dn-hsig{font-family:var(--mono);font-size:9.5px;font-weight:600;color:var(--accent);background:var(--accent-bg);border-radius:5px;padding:0 5px;flex:none}
.dn-hsnip{color:var(--muted);font-size:11px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dn-hsn{font-weight:600;color:var(--fg)}
/* movers */
.dn-hero{display:flex;align-items:flex-start;gap:10px;padding:9px 11px;border-radius:10px;margin-bottom:10px;text-decoration:none;
  background:color-mix(in srgb,var(--up) 12%,var(--panel))}
.dn-hero.dn{background:color-mix(in srgb,var(--down) 12%,var(--panel))}
.dn-tg{font-size:8.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--up)}
.dn-hero.dn .dn-tg{color:var(--down)}
.dn-hs{font-family:var(--dn-display);font-weight:800;font-size:22px;display:flex;align-items:center;flex-wrap:wrap;
  gap:.4em;margin:1px 0 3px;color:var(--fg)}
.dn-hp{margin-left:auto;font-family:var(--mono);font-weight:600;font-size:20px}
.dn-hp.up{color:var(--up)} .dn-hp.dn{color:var(--down)}
.dn-cols{display:grid;grid-template-columns:1fr 1fr;gap:0}
.dn-col{min-width:0}
.dn-col:first-child{padding-right:11px}
.dn-col + .dn-col{border-left:1px solid var(--border);padding-left:11px}
.dn-ch{display:flex;align-items:center;gap:5px;font-size:9.5px;font-weight:800;text-transform:uppercase;margin-bottom:6px}
.dn-ch.up{color:var(--up)} .dn-ch.dn{color:var(--down)}
.dn-ch .dn-i{width:12px;height:12px}
.dn-mv{display:block;padding:5px 0;text-decoration:none}
.dn-mv + .dn-mv{border-top:1px solid var(--border)}
.dn-mvt{display:flex;justify-content:space-between;gap:6px;font-size:12px}
.dn-mv:hover .dn-sn{color:var(--accent)}
.dn-pct{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums}
.dn-pct.up{color:var(--up)} .dn-pct.dn{color:var(--down)}
.dn-reason{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:11px;margin-top:2px;min-width:0;max-width:100%}
.dn-reason .dn-i{width:12px;height:12px}
.dn-reason.up .dn-i{color:var(--up)} .dn-reason.dn .dn-i{color:var(--down)}
.dn-rt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* generic rail rows */
.dn-row{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:11.5px;color:var(--fg);text-decoration:none}
.dn-row + .dn-row{border-top:1px solid color-mix(in srgb,var(--border) 60%,transparent)}
.dn-row:hover .dn-sn{color:var(--accent)}
.dn-sn{font-family:var(--dn-serif);font-weight:600;color:var(--fg);white-space:nowrap;flex:none}
.dn-rt2{color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dn-tag{margin-left:auto;flex:none;font-size:9.5px;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--accent-bg);color:var(--accent)}
.dn-tag.w{background:color-mix(in srgb,var(--warn,#c77d0a) 16%,transparent);color:var(--warn,#c77d0a)}
.dn-rem{margin-left:auto;font-family:var(--mono);color:var(--warn,#c77d0a)}
/* whale + desk rows */
.dn-wd{font-weight:700;width:13px;text-align:center;flex:none}
.dn-wd.up{color:var(--up)} .dn-wd.dn{color:var(--down)} .dn-wd.sw{color:var(--accent)}
.dn-wck{font-family:var(--mono);font-size:11px;color:var(--fg);min-width:0;overflow:hidden;text-overflow:ellipsis}
.dn-wt{margin-left:auto;font-family:var(--mono);font-weight:600}
.dn-wt.up{color:var(--up)} .dn-wt.dn{color:var(--down)} .dn-wt.sw{color:var(--accent)}
.dn-wsn{font-family:var(--dn-serif);font-weight:600;font-size:12px;color:var(--muted);min-width:40px;text-align:right}
/* netuid tag BEFORE every subnet name ("SN 64 OpenRoboto") */
.dn-nu{display:inline-block;vertical-align:.08em;margin-right:.4em;padding:0 .35em;white-space:nowrap;
  font-family:var(--mono);font-size:.72em;font-weight:600;line-height:1.45;letter-spacing:.03em;color:var(--muted);
  background:color-mix(in srgb,var(--fg) 6%,transparent);border:1px solid var(--border);border-radius:4px}
.dn-hs .dn-nu{font-size:.55em;line-height:1.5;padding:0 .45em;margin:0;vertical-align:baseline;font-weight:700}
.dn-row:hover .dn-nu,.dn-mv:hover .dn-nu,.dn-head:hover .dn-nu{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
.dn-kpi{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:7px}
.dn-dk{background:color-mix(in srgb,var(--fg) 4%,transparent);border:1px solid var(--border);border-radius:8px;padding:6px 9px}
.dn-dkl{font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted2)}
.dn-dkv{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--fg)}
/* unread badge on the bell + toast */
#bellBtn{position:relative}
#bellBtn.dn-unread::after{content:"";position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;
  background:#e5484d;box-shadow:0 0 0 2px var(--panel)}
.dn-toast{position:fixed;right:18px;bottom:18px;z-index:500;display:flex;align-items:center;gap:8px;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);
  padding:10px 13px;font-size:12.5px;color:var(--fg);opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
.dn-toast.show{opacity:1;transform:none}
.dn-toast .dn-i{width:16px;height:16px;fill:var(--accent)}

/* ===== toolbar ===== */
/* subnet search lives in the toolbar (topbar is normalized across pages) */
.toolbar .symbol input{height:28px;width:130px;font-size:13px}
.toolbar .symbol .dropdown{top:34px;z-index:60}
.toolbar{height:var(--toolbar);display:flex;align-items:center;gap:8px;padding:0 16px;
  background:var(--panel);border-bottom:1px solid var(--line)}
.sep{width:1px;height:18px;background:var(--line);margin:0 4px}
.spacer{flex:1}

/* Ant Segmented (timeframe + chart type) */
.tfs,.seg{display:inline-flex;gap:2px;padding:3px;background:var(--seg-track);border-radius:var(--radius);
  border:1px solid var(--line)}
.tfs button,.seg button{height:26px;min-width:32px;padding:0 12px;border-radius:5px;color:var(--muted);font-weight:500}
.tfs button:hover,.seg button:hover{color:var(--fg)}
.tfs button.on,.seg button.on{background:var(--seg-active);color:var(--seg-active-fg);font-weight:600;
  box-shadow:0 1px 4px rgba(0,0,0,.45)}

/* Ant default/text buttons */
.toolbar>button{height:30px;padding:0 12px;border-radius:var(--radius);color:var(--muted);font-weight:500}
.toolbar>button:hover{background:var(--hover);color:var(--fg)}
.toolbar>button.on{background:var(--accent-bg);color:var(--accent)}
/* MUI-style icon toggle buttons (news / on-chain / whale / trades / day-night / fit) */
.toolbar>button.tv-ico{width:34px;height:34px;padding:0;border-radius:50%;font-size:15px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--muted);
  transition:background .15s,color .15s,box-shadow .15s}
.toolbar>button.tv-ico svg{width:17px;height:17px;display:block}   /* flat one-colour line icons */
.toolbar>button.tv-ico.tv-brand svg{fill:currentColor;stroke:none;width:15px;height:15px}   /* X / Discord = filled brand marks */
.toolbar>button.tv-ico:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--fg)}
.toolbar>button.tv-ico:active{background:color-mix(in srgb,var(--accent) 22%,transparent)}
.toolbar>button.tv-ico.on{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 50%,transparent)}
.backfill-msg{color:var(--muted2);font-size:12px;font-variant-numeric:tabular-nums;
  margin-right:4px;white-space:nowrap}

/* transient toast (e.g. "Refreshed · 12:45 AM") */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(8px);
  background:var(--elevated);border:1px solid var(--line);border-radius:var(--radius);
  padding:9px 16px;color:var(--fg);font-size:13px;box-shadow:var(--shadow);z-index:100;
  opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.menu{position:relative}
.menu-pop{position:absolute;top:36px;left:0;background:var(--elevated);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:4px;min-width:290px;z-index:50;box-shadow:var(--shadow);display:none}
.menu-pop.open{display:block}
.menu-pop label{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--radius);
  cursor:pointer;color:var(--fg);transition:background .2s}
.menu-pop label:hover{background:var(--hover)}
.menu-pop input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px}

/* ===== chart view ===== */
#view{position:absolute;top:calc(var(--topbar) + var(--toolbar));left:0;right:0;bottom:0;background:var(--panel)}
.view-chart,.chartwrap{position:absolute;inset:0}
/* ---- multi-view: a grid of independent chart panes (iframes) ---- */
.view-multi{position:absolute;inset:0;display:grid;gap:2px;background:var(--line)}
.view-multi.lay-1x2{grid-template-columns:1fr 1fr}
.view-multi.lay-2x1{grid-template-rows:1fr 1fr}
.view-multi.lay-1x3{grid-template-columns:repeat(3,1fr)}
.view-multi.lay-2x2{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.view-multi iframe{width:100%;height:100%;border:0;display:block;background:var(--panel)}
.lay-seg button{font-size:11px;font-weight:700;padding:2px 8px;min-width:0}
/* parent page in multi-view: the fixed side panels would float over the grid — hide them */
body.multi-on .whalebar,body.multi-on .txscan,body.multi-on .wb-reopen,body.multi-on .ts-reopen{display:none!important}
/* a chart rendered AS A PANE (?pane=1): drop the nav, the layout switcher, and the side panels, so
   the cell is just its own toolbar + chart. --topbar:0 pulls #view up under the (now-top) toolbar. */
html.pane-mode{--topbar:0px}   /* 0px, NOT 0 — calc(var(--topbar) + var(--toolbar)) needs a length, or #view collapses to 0 height */
html.pane-mode .topbar{display:none}
html.pane-mode .whalebar,html.pane-mode .txscan,html.pane-mode .wb-reopen,html.pane-mode .ts-reopen{display:none!important}
/* pane toolbar: keep it minimal — ONLY the subnet UID input + the timeframe selector. Every other
   tool (chart type, layout switcher, indicators, news/whale/fit, backfill/refresh/fullscreen…) is
   hidden, since each pane is a focused read-only view driven from the main chart. */
html.pane-mode .toolbar > *{display:none!important}
html.pane-mode .toolbar > .symbol{display:block!important}
html.pane-mode .toolbar > #tfs{display:inline-flex!important}
html.pane-mode .trend-btn{display:none}   /* trend/emission open big overlay panels — not for a small pane */
html.pane-mode .draw-tools{display:none}  /* no drawing toolbox in a multi-view pane */
html.pane-mode #chart{left:0}             /* reclaim the 42px drawing rail so the chart fills the cell */
/* empty pane hint — shown until the user picks a subnet, so no chart is drawn (and no data fetched) up front */
.pane-ph{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;
  text-align:center;color:var(--muted2);font-size:13px;line-height:1.7;background:var(--panel)}
.pane-ph[hidden]{display:none}   /* the class's display:flex would otherwise override [hidden] and keep it covering the chart */
.pane-ph small{opacity:.6}
#chart{position:absolute;inset:0;left:42px}   /* 42px gutter = fixed drawing rail */
/* emission sub-pane (TradingView-style separate window below the price, its own axis).
   Hidden until the Emission indicator is on; then #chart shrinks and the pane fills the gap. */
#emis-pane{position:absolute;left:42px;right:0;bottom:0;height:170px;display:none;
  border-top:2px solid var(--line);background:var(--bg)}
.chartwrap.emis-on #emis-pane{display:block}
.chartwrap.emis-on #chart{bottom:170px}
.emis-lab{position:absolute;top:4px;left:8px;z-index:3;font-size:11px;color:#f0b90b;
  pointer-events:none;font-weight:600;letter-spacing:.02em}
.legend{position:absolute;top:8px;left:50px;z-index:8;pointer-events:none;font-size:12px;
  font-variant-numeric:tabular-nums;color:var(--fg);text-shadow:0 1px 2px rgba(0,0,0,.6);
  background:color-mix(in srgb, var(--panel) 45%, transparent);backdrop-filter:blur(2.5px);
  padding:4px 10px;border-radius:var(--radius)}
.legend .sym{font-weight:600;margin-right:10px}
.legend .lab{color:var(--muted2);margin:0 2px 0 8px}
.legend .ma{margin-left:10px}

/* price-axis A/L/% toggles */
/* price-scale mode buttons: small strict rectangles, sized to sit inside the axis column */
.axisbtns{position:absolute;right:4px;bottom:5px;z-index:6;display:flex;gap:2px}
/* timezone toggle: bottom-left corner of the timeline panel (TradingView-style) */
.tz-btn{position:absolute;left:50px;bottom:5px;z-index:6;height:24px;padding:0 9px;
  border-radius:var(--radius);background:var(--elevated);border:1px solid var(--border);
  color:var(--muted);font:600 11px/1 inherit}
.tz-btn:hover{color:var(--fg);border-color:var(--accent)}
.tz-btn.on{color:var(--accent);border-color:var(--accent)}
.axisbtns button{width:17px;height:16px;border-radius:0;background:var(--elevated);
  border:1px solid var(--border);color:var(--muted);font:600 9px/1 inherit;
  display:flex;align-items:center;justify-content:center;padding:0}
.axisbtns button:hover{color:var(--fg);border-color:var(--accent-hover)}
.axisbtns button.on{background:var(--accent-bg);color:var(--accent);border-color:var(--accent)}

/* news filter menu */
/* news filter dialog */
.nf-dlg{margin-top:16px;display:flex;flex-direction:column;gap:16px}
.nf-toggle{font-size:14px;font-weight:600;color:var(--fg)}
.nf-group{display:flex;flex-direction:column;gap:8px;padding-top:14px;border-top:1px solid var(--line)}
.nf-glabel{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted2);font-weight:600}
.nf-hint{text-transform:none;letter-spacing:0;font-weight:400;color:var(--muted2);opacity:.8}
.nf-dlg .chk-inline{font-size:14px;color:var(--fg)}
.nf-dlg .chk-inline input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.nf-group select{background:var(--panel);border:1px solid var(--border);color:var(--fg);
  border-radius:var(--radius);height:32px;padding:0 8px;font:inherit;font-size:14px;outline:none;max-width:220px}
.nf-group select:focus{border-color:var(--accent)}

/* backfill button: in-button circular progress + completed state */
#backfillBtn{display:inline-flex;align-items:center;gap:6px}
.bf-ring{width:14px;height:14px;transform:rotate(-90deg);flex:none}
.bf-ring circle{fill:none;stroke-width:2.5}
.bf-ring .bg{stroke:var(--border)}
.bf-ring .fg{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset .4s}
#backfillBtn.done{color:var(--up)}
#backfillBtn.fail{color:var(--down)}

/* drawing tools (trend / hline / ruler) */
.draw-canvas{position:absolute;inset:0;z-index:7;pointer-events:none}
.draw-tools{position:absolute;left:0;top:0;bottom:0;width:42px;z-index:9;
  display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 0;
  background:var(--panel);border-right:1px solid var(--line)}
.draw-tools button{width:30px;height:30px;border-radius:var(--radius);color:var(--muted);
  font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center}
.draw-tools button:hover{background:var(--hover);color:var(--fg)}
.draw-tools button.on{background:var(--accent-bg);color:var(--accent)}
.ruler-box{position:absolute;z-index:8;pointer-events:none;display:flex;flex-direction:column;gap:2px;
  background:var(--elevated);border:1px solid var(--line);border-radius:var(--radius);
  padding:6px 11px;font-size:12px;box-shadow:var(--shadow);font-variant-numeric:tabular-nums}
.ruler-box b.up{color:var(--up)} .ruler-box b.down{color:var(--down)}
.ruler-box span{color:var(--muted)}

/* news avatar markers along the timeline */
.news-layer{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:hidden}
.news-vline{position:absolute;top:0;bottom:0;width:0;z-index:5;pointer-events:none;
  border-left:1px dashed var(--accent);opacity:.7}
.news-mark{position:absolute;top:6px;transform:translateX(-50%);width:26px;height:26px;border-radius:50%;
  cursor:pointer;pointer-events:auto;box-shadow:0 1px 4px rgba(0,0,0,.55);transition:transform .1s}
/* on-chain lifecycle action marker: a ⛓ chip instead of an avatar, accent-ringed */
.news-mark.is-chain{background:var(--elevated);box-shadow:0 0 0 2px var(--accent),0 1px 4px rgba(0,0,0,.55)}
.news-chain-ic{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  border-radius:50%;font-size:13px;line-height:1}
/* price-reaction glow (no outline ring): 1–5% green, ≥5% gold */
.news-mark.glow-up{box-shadow:0 0 14px 5px rgba(38,166,154,.95), 0 1px 4px rgba(0,0,0,.55)}
.news-mark.glow-big{box-shadow:0 0 12px 4px rgba(255,193,7,.95), 0 1px 4px rgba(0,0,0,.55)}
/* manual golden mark: a solid gold ring (distinct from the soft price-reaction glow above) */
.news-mark.golden{box-shadow:0 0 0 2px #f5b301, 0 0 10px 3px rgba(245,179,1,.8), 0 1px 4px rgba(0,0,0,.55)}
/* glowing markers: the time stem becomes a colored, downward-flowing dashed beam */
.news-mark.glow-up::after,.news-mark.glow-big::after{
  border-left:0;width:2px;left:calc(50% - 1px);opacity:.6;
  background-size:2px 12px;background-repeat:repeat-y;
  animation:stemflow 1s linear infinite}
.news-mark.glow-up::after{
  background-image:linear-gradient(180deg, rgba(38,166,154,.95) 0 55%, transparent 55% 100%)}
.news-mark.glow-big::after{
  background-image:linear-gradient(180deg, rgba(255,193,7,.95) 0 55%, transparent 55% 100%)}
@keyframes stemflow{from{background-position-y:0}to{background-position-y:12px}}
/* time stem: drops from the avatar to mark the exact posted time on the graph */
.news-mark::after{content:"";position:absolute;left:50%;top:26px;width:0;height:100vh;
  border-left:1px dashed #4096ff;opacity:.35;pointer-events:none}
.news-mark.macro::after{border-left-color:#ffa726}
.news-mark:hover{transform:translateX(-50%) scale(1.18);z-index:3}
.news-mark:hover::after{opacity:.8}
/* flash: a marker jumped to from the collector pulses to draw the eye */
@keyframes newsflash{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.6)}}
.news-mark.flash{animation:newsflash .6s ease 3;z-index:4}
.news-mark img{width:26px;height:26px;min-width:26px;border-radius:50%;object-fit:cover;display:block}
/* source badge: which platform the message came from */
.news-badge{position:absolute;right:-3px;bottom:-3px;width:13px;height:13px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px rgba(0,0,0,.45);z-index:4}
.news-badge svg{width:9px;height:9px;fill:currentColor}
.nb-discord{color:#5865F2}
.nb-x{color:#000}
.nb-telegram{color:#229ED9}
.news-mark .nm-count{position:absolute;bottom:-4px;right:-4px;min-width:14px;height:14px;padding:0 3px;
  border-radius:8px;background:#4096ff;color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center}
.news-mark.macro .nm-count{background:#ffa726}

/* news modal message list */
.nm-list{margin-top:14px;display:flex;flex-direction:column;gap:12px;max-height:70vh;overflow:auto}
/* no title bar: ✕ sticks in the corner; each message's meta sticks while its content scrolls */
#news-modal-box{position:relative;padding-top:0;width:min(760px,94vw)}   /* wider — fits the signal-style two-column card */
/* card-only news dialog: the card is the frame, so keep the scrollbar INSIDE the message
   body — not on the transparent outer box / list, where it floated outside the card. */
#news-modal-box.card-only{overflow:visible;max-height:none}
#news-modal-box .nm-list{max-height:none;overflow:visible;margin-top:0}
#news-modal-box .mg-msg{max-height:min(66vh,560px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
#news-modal-box .mg-msg::-webkit-scrollbar{width:8px}
#news-modal-box .mg-msg::-webkit-scrollbar-track{background:transparent}
#news-modal-box .mg-msg::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px}
#news-modal-box .mg-msg::-webkit-scrollbar-thumb:hover{background:var(--muted2)}
.mb-head.nm-head{position:sticky;top:10px;height:0;margin:0;z-index:4;justify-content:flex-end;
  padding-right:16px}                              /* keep the ✕ clear of the scrollbar */
.nm-head .mb-close{background:var(--panel)}        /* opaque over scrolling content */
.nm-meta{position:sticky;top:0;z-index:2;background:var(--panel);padding:18px 0 6px}
.nm-list .nm-msg:first-child .nm-h{padding-right:26px}   /* keep clear of the ✕ */
.nm-msg{display:flex;gap:10px}
.nm-msg.is-golden{border-left:2px solid #f5b301;padding-left:9px;margin-left:-11px;border-radius:3px;
  background:linear-gradient(90deg,rgba(245,179,1,.07),transparent 55%)}
/* prominent golden toggle in the chart news popup (discoverable, unlike the compact feed star) */
.nm-goldbtn{font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;cursor:pointer;white-space:nowrap;
  border:1px solid var(--line);color:var(--muted);background:var(--panel);transition:all .12s}
.nm-goldbtn:hover{border-color:#f5b301;color:#e8b923}
.nm-goldbtn.on{border-color:#f5b301;color:#f5b301;background:rgba(245,179,1,.12);box-shadow:0 0 6px rgba(245,179,1,.35)}
.nm-av{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none;
  position:sticky;top:16px;align-self:flex-start}   /* sticks alongside the meta on scroll */
.nm-b{flex:1;min-width:0}
.nm-h{display:flex;align-items:center;gap:8px;font-size:13px}
.nm-h b{color:var(--fg)}
.nm-t{color:var(--muted2);font-size:11px;margin-left:auto}
.nm-link{color:var(--muted2);text-decoration:none}
.nm-link:hover{color:var(--accent)}
.nm-ch{color:var(--muted2);font-size:11px}
.nm-text{margin-top:3px;font-size:13px;line-height:1.5;word-break:break-word}
.nm-text a,.nm-text code{color:var(--accent)}

/* news markers tooltip on the chart */
.newstip{position:absolute;z-index:7;max-width:320px;background:var(--elevated);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:8px;pointer-events:none;font-size:12px}
.newstip .nt-item{display:flex;gap:7px;padding:4px 2px}
.newstip .nt-item + .nt-item{border-top:1px solid var(--line)}
.newstip img,.newstip .nt-av{width:22px;height:22px;border-radius:50%;flex:none;background:var(--hover)}
.newstip .nt-body{flex:1;min-width:0}               /* let long unbroken text (URLs) wrap, not overflow */
.newstip .nt-head{font-weight:600;color:var(--fg);margin-bottom:1px;overflow-wrap:anywhere}
.newstip .nt-text{color:var(--muted);line-height:1.4;max-height:54px;overflow:hidden;overflow-wrap:anywhere}
.newstip .nt-macro{font-size:10px;padding:0 5px;border-radius:8px;background:rgba(255,167,38,.18);color:#ffa726;font-weight:600}
.newstip .nt-moves{margin:4px 0 1px}
.newstip .nt-src{color:var(--muted2);font-size:11px;line-height:1.5;overflow-wrap:anywhere}
.newstip .nt-ch{font-size:10px;color:var(--muted2)}
.newstip .nt-more{color:var(--muted2);padding:3px 2px 0;font-size:11px}

.loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--panel);color:var(--muted2);z-index:8;transition:opacity .25s}
.loader.hide{opacity:0;pointer-events:none}

/* ===== overview (Ant Card grid) ===== */
.view-overview{position:absolute;inset:0;overflow:auto;padding:16px;background:var(--bg);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px;align-content:start}
.hidden{display:none}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px;
  cursor:pointer;transition:all .2s}
.card:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-1px)}
.card .n{font-weight:600;font-size:15px}
.card .p{font-variant-numeric:tabular-nums;margin-top:6px;color:var(--muted)}
.card .c.up{color:var(--up)} .card .c.down{color:var(--down)}
:fullscreen{background:var(--panel)}

/* ===== people registry page ===== */
.people-main{position:absolute;top:var(--topbar);left:0;right:0;bottom:0;overflow:auto;
  background:var(--bg);padding:16px}
/* servers page — news-source tabs (Discord / X / Telegram) */
.srv-main{position:absolute;top:var(--topbar);left:0;right:0;bottom:0;overflow:auto;background:var(--bg);padding:16px}
.srv-tabs{display:flex;gap:6px;margin-bottom:16px;border-bottom:1px solid var(--line);padding-bottom:0}
.srv-tab{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;font-size:14px;font-weight:600;
  background:transparent;border:0;border-bottom:2px solid transparent;color:var(--muted);cursor:pointer;margin-bottom:-1px}
.srv-tab:hover{color:var(--fg)}
.srv-tab.on{color:var(--fg);border-bottom-color:var(--accent)}
.srv-ic{display:inline-flex;line-height:0}
.srv-ic svg{width:17px;height:17px;fill:currentColor}
/* brand tint on the active tab's icon */
.srv-tab.on[data-src="discord"] .srv-ic{color:#5865F2}
.srv-tab.on[data-src="x"] .srv-ic{color:var(--fg)}
.srv-tab.on[data-src="telegram"] .srv-ic{color:#229ED9}
.srv-panel.hidden{display:none}
/* server rail (fixed, narrow) + channels (everything else). The channel list is the
   page's real content — 384 rows — so it gets the width, not the 2-card server list. */
.srv-grid{display:grid;grid-template-columns:280px minmax(0,1fr);gap:16px;align-items:start}
@media(max-width:1180px){.srv-grid{grid-template-columns:1fr}}
.srv-soon{max-width:520px;margin:40px auto;text-align:center;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:40px 28px}
.srv-soon-ic{line-height:0;margin-bottom:14px}
.srv-soon-ic svg{width:42px;height:42px;fill:var(--muted)}
.srv-soon h3{margin:0 0 8px;font-size:18px}
.srv-soon p{margin:0 0 16px;color:var(--muted);font-size:14px;line-height:1.5}
.list-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px}
.reg-h{margin:0 0 14px;font-size:15px;font-weight:600}
.reg-h .count{color:var(--muted2);font-weight:500;margin-left:4px}
.fld{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.fld>span{font-size:12px;color:var(--muted)}
.fld>span b{color:var(--down)}
.fld input,.fld select,.fld textarea{height:32px;background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);color:var(--fg);padding:4px 11px;outline:none;font:inherit;font-size:14px;transition:all .2s}
.fld textarea{height:auto;padding:8px 11px;resize:vertical}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:var(--accent-hover)}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg)}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fld-group{border:1px dashed var(--line);border-radius:var(--radius);padding:10px 12px 2px;margin-bottom:12px}
.grp-lab{display:block;font-size:11px;color:var(--muted2);text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px}
.fld.ico>span{font-size:12px;color:var(--muted)}
.chk{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--fg);margin:4px 0 14px;cursor:pointer}
.chk input{width:16px;height:16px;accent-color:var(--accent)}
.form-actions{display:flex;align-items:center;gap:12px}
.btn-primary{height:34px;padding:0 18px;border-radius:var(--radius);background:var(--accent);color:#fff;font-weight:600}
.btn-primary:hover{background:var(--accent-hover)}
.btn-ghost{height:34px;padding:0 14px;border-radius:var(--radius);color:var(--muted);border:1px solid var(--border)}
.btn-ghost:hover{background:var(--hover);color:var(--fg)}
.form-msg{font-size:12px;color:var(--down)}

.plist{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));grid-auto-rows:1fr;gap:10px}
/* group-by-subnet: full-width sections, each with its own card grid */
.plist:has(.pgrp){display:block}
.pgrp{margin-bottom:20px}
.pgrp-head{display:flex;align-items:center;gap:8px;position:sticky;top:0;z-index:1;
  padding:6px 2px 8px;margin-bottom:8px;font-size:14px;font-weight:700;color:var(--fg);
  border-bottom:1px solid var(--accent);background:var(--panel)}
.pgrp-n{display:inline-flex;min-width:20px;height:18px;padding:0 6px;align-items:center;justify-content:center;
  border-radius:999px;font-size:11px;font-weight:600;color:var(--muted);background:var(--hover)}
.pgrp-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
#ppl-group.on,#ppl-multi.on{color:var(--accent);border-color:var(--accent)}
#plist:not(.multi) .pc-check{display:none}        /* checkboxes only in multi-select mode */
.empty{color:var(--muted2);padding:24px;text-align:center;grid-column:1/-1}
.pcard{border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;background:var(--bg);
  display:flex;flex-direction:column;min-height:150px}
.pcard .pc-notes{margin-top:auto}                 /* pin notes to the bottom of the uniform card */
.pc-head{display:flex;align-items:center;gap:11px}
.pc-avs{display:flex;gap:7px;flex:0 0 auto}
.pc-id{flex:1;min-width:0}
.pc-line2{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-top:3px}
.pcard > .pc-line2{margin-top:9px}                /* chips row under the head (person cards) */
.pc-line2 .pc-role{margin-left:0}
.pc-line2 .pc-track,.pc-line2 .pc-untrack,.pc-line2 .pc-msgs{margin-left:0}
.pc-body{border-top:1px solid var(--line);margin-top:11px;padding-top:5px}
.pc-nameline{display:flex;align-items:baseline;min-width:0;flex:1}
.pc-name{font-weight:600;font-size:15px;flex:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-alias{color:var(--muted2);margin-left:7px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-alias::before{content:"“"}.pc-alias::after{content:"”"}
.pc-nameline .src-badge{flex:none;margin-left:7px}
.pc-role{margin-left:9px;font-size:11px;padding:1px 8px;border-radius:10px;background:var(--accent-bg);color:var(--accent);font-weight:600;white-space:nowrap}
.role-ceo{background:rgba(255,167,38,.18);color:#ffa726}
.role-owner{background:rgba(38,166,154,.18);color:#26a69a}
.role-moderator{background:rgba(171,71,188,.18);color:#c17ad6}
.role-subnet-support{background:rgba(64,150,255,.18);color:#4096ff}
.role-bittensor-community{background:rgba(102,187,106,.18);color:#66bb6a}
.pc-role.role-auto{opacity:.75;border:1px dashed currentColor}   /* auto-derived from Discord */
.role-checks{display:flex;flex-wrap:wrap;gap:8px 14px;padding:7px 0}
.role-checks label{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--fg);cursor:pointer}
.role-checks input{width:15px;height:15px;accent-color:var(--accent);cursor:pointer}
.pc-track{margin-left:9px;font-size:11px;color:var(--up);white-space:nowrap}
.pc-untrack{margin-left:9px;font-size:11px;color:var(--muted2);white-space:nowrap}
.pc-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tag{font-size:12px;padding:2px 9px;border-radius:var(--radius);background:var(--hover);color:var(--fg);border:1px solid var(--line)}
/* account = avatar + platform corner badge (details live in the read dialog / tooltip) */
.pav{position:relative;width:32px;height:32px;flex:0 0 auto;margin-right:2px}
.pav img,.pav .ph{width:32px;height:32px;border-radius:50%;object-fit:cover;display:flex;
  align-items:center;justify-content:center;border:1px solid var(--line)}
.pav .ph{background:var(--hover);color:var(--muted2);font-weight:600;font-size:14px}
.pav .pbadge{position:absolute;right:-4px;bottom:-4px;width:16px;height:16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;
  color:#fff;border:2px solid var(--panel)}
.pav .pbadge svg{width:9px;height:9px;fill:#fff}
.pb-x{background:#000}
.pb-discord{background:#5865F2}
.pb-telegram{background:#229ED9}

/* long messages collapse behind "Show more" (fade hints there's hidden content) */
.mg-clamp.clamp{max-height:300px;overflow:hidden;position:relative}
.mg-clamp.clamp::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;
  background:linear-gradient(transparent,var(--panel));pointer-events:none}
.mg-more{display:block;margin:3px auto 0;padding:0 10px;background:none;border:0;
  font-size:12px;font-weight:600;color:var(--muted);cursor:pointer}   /* bottom-center */
.mg-more:hover{color:var(--fg);text-decoration:underline}

/* link-card embeds: text left, side thumbnail right (rendered when there's no big image) */
.em-cols{display:flex;gap:12px;align-items:flex-start}
.em-cols .em-main{flex:1;min-width:0}
.em-thumb{width:76px;height:76px;border-radius:var(--radius);object-fit:cover;flex:none}

/* video attachment: thumbnail (click opens the video; the visible ⬇ downloads it) */
.att-vid{position:relative;display:inline-block}

/* classification evidence highlights — in the message body AND inside embed cards
   (retweeted/quoted tweets, X-Article). .ev-num/.ev-name are unique to markEvidence output. */
mark.ev-num{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);font-weight:600;
  border-radius:4px;padding:1px 5px}                                            /* trigger — accent wash */
mark.ev-name{background:color-mix(in srgb,var(--accent) 9%,transparent);color:var(--fg);font-weight:500;
  border-radius:4px;padding:1px 4px}                                            /* subnet name — fainter wash */
/* source-line evidence: the channel/server a subnet tag came from (posted/shared in) */
.mg-src .ev-src{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);border-radius:4px;padding:0 4px;font-weight:600}
.mg-src .ev-src bdi{color:inherit}

/* ---- managed highlight keywords (Signal page) ---- */
/* Soft-tint highlight system (picked from the Feed Highlight Picker, Sep 11): ONE device for
   every inline mark — a faint rounded wash with the text in the same hue. No borders, bars or
   glow. Subnet hits wash in the theme accent, keywords in their sentiment colour (tokens above,
   darker on the light themes), mentions in the neutral hover tint. */
/* @mention chip: a known (collected) user rendered inline with their avatar. Unknown
   handles stay plain @text. Click -> account dialog (shares .av-click). */
.mention-chip{display:inline-flex;align-items:center;gap:3px;vertical-align:middle;
  padding:0 6px 0 2px;border-radius:999px;background:var(--hover);color:var(--fg);
  font-weight:600;line-height:1;cursor:pointer;position:relative;top:-1px;
  transition:background .12s,box-shadow .12s}
.mention-chip img{width:15px;height:15px;border-radius:50%;object-fit:cover;flex:none;
  background:var(--hover)}
.mention-chip:hover{background:var(--accent);color:#fff;box-shadow:0 0 0 1px var(--accent)}
.mention-chip:hover img{box-shadow:0 0 0 1px #fff}
/* unknown handle (not collected): avatarless, muted — a chip but clearly secondary */
.mention-chip.mention-ext{padding:0 7px;background:var(--hover);color:var(--muted);
  font-weight:500;text-decoration:none}
.mention-chip.mention-ext:hover{background:var(--accent-bg);color:var(--accent);box-shadow:none}
mark.kw{border-radius:4px;padding:1px 5px;font-weight:600}
mark.kw-positive{background:color-mix(in srgb,var(--kw-pos) 12%,transparent);color:var(--kw-pos)}
mark.kw-negative{background:color-mix(in srgb,var(--kw-neg) 12%,transparent);color:var(--kw-neg)}
mark.kw-neutral{background:color-mix(in srgb,var(--kw-neu) 12%,transparent);color:var(--kw-neu)}
/* pill chips: per-signal match badges, toolbar list, and the manage dialog */
.kw-chip{display:inline-flex;align-items:center;gap:3px;border-radius:11px;padding:1px 8px;
  font-size:11px;font-weight:700;line-height:1.7;border:1px solid transparent}
.kw-chip.kw-positive{background:rgba(38,194,129,.16);color:#1e9e6d;border-color:rgba(38,194,129,.4)}
.kw-chip.kw-negative{background:rgba(239,83,80,.16);color:#e2504c;border-color:rgba(239,83,80,.4)}
.kw-chip.kw-neutral{background:rgba(255,179,0,.16);color:#c98a00;border-color:rgba(255,179,0,.4)}
.kw-hits{display:inline-flex;gap:4px;flex-wrap:wrap}
.kw-barchips{display:inline-flex;gap:5px;flex-wrap:wrap;align-items:center}
.kw-rm{background:none;border:none;color:inherit;cursor:pointer;font-size:13px;line-height:1;
  opacity:.6;padding:0 0 0 1px}
.kw-rm:hover{opacity:1}
.kw-sent{border-radius:7px;padding:5px 8px;border:1px solid var(--border);background:var(--panel);color:var(--fg)}
.kw-groups{display:flex;flex-direction:column;gap:12px;margin:6px 0 2px}
.kw-grouphd{font-weight:700;font-size:13px;margin-bottom:5px}
.kw-grouphd.kw-positive{color:#1e9e6d}.kw-grouphd.kw-negative{color:#e2504c}.kw-grouphd.kw-neutral{color:#c98a00}
.kw-chiprow{display:flex;gap:6px;flex-wrap:wrap}
.kw-chip.kw-editable{padding-right:5px}

/* per-message meta header: subnet tags + price-move chips, divided from the content */
.mg-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding-bottom:5px;margin-bottom:6px;border-bottom:1px solid var(--line)}

/* price-move chips: peak-high % after a news post (5m/1h/12h) */
.mg-moves{margin-top:4px}
.mvs{display:inline-flex;gap:5px;align-items:center;flex-wrap:wrap;margin-right:8px}
.mv{font-size:11px;padding:1px 7px;border-radius:9px;font-weight:600}
.mv-flat{background:var(--hover);color:var(--muted2)}          /* <1%: no change / minus */
.mv-up{background:rgba(38,166,154,.16);color:#26a69a}          /* 1–5%: normal bump */
.mv-big{background:rgba(38,166,154,.2);color:#26a69a;          /* ≥5%: BIG bump — still green */
  animation:mvglow 1.5s ease-in-out infinite}                  /* …with a pulsing golden glow */
@keyframes mvglow{0%,100%{box-shadow:0 0 2px 0 rgba(255,193,7,.5)}
  50%{box-shadow:0 0 5px 1px rgba(255,193,7,.85)}}
.mv-sn{font-size:11px;color:var(--muted2);margin-right:1px}
/* subnet meta table: [sn chip] | 5m 1h 12h — one aligned row per subnet */
.mv-grid{flex-basis:100%;display:grid;grid-template-columns:repeat(6,max-content);
  gap:6px 9px;align-items:center;justify-items:start;
  /* max-content columns are wider than a narrow (2-column live) feed — scroll the subnet row
     WITHIN the card instead of letting it spill out to the right and wreck the feed layout */
  min-width:0;max-width:100%;overflow-x:auto}
/* Signal feed only: a 7th column for the per-subnet trade button. Scoped, because the
   News modal (app.js) and collector still emit six cells into .mv-grid — widening the
   base rule would leave their rows one column short and wrap them into each other. */
.mv-grid-trd{grid-template-columns:repeat(7,max-content)}
/* trade cell sits immediately right of its sn chip — one per tagged subnet. Fixed width
   so Buy and Sell occupy the same box and the columns after it never shift when a
   position opens or closes. */
.mv-trd{display:flex;min-width:38px}
.mv-div{color:var(--muted2);opacity:.45;font-size:12px}
/* per-subnet evidence score (attribution confidence), colored by strength */
.ev-score{font-size:10px;font-weight:700;padding:1px 6px;border-radius:9px;font-variant-numeric:tabular-nums;cursor:default}
.ev-score.ev-strong{background:rgba(38,194,129,.22);color:#26c281}   /* ≥90% — channel/guild */
.ev-score.ev-good{background:rgba(64,150,255,.2);color:#4096ff}      /* 70–89% — text */
.ev-score.ev-mid{background:rgba(255,193,7,.2);color:#ffb300}        /* 50–69% — sighting */
.ev-score.ev-weak{background:var(--hover);color:var(--muted2)}       /* <50% — author guess */
.mv-none{background:none;color:var(--muted2);opacity:.5}
.tag.scope-global{background:rgba(255,167,38,.14);color:#ffa726;border-color:transparent}
.tag.kw{background:rgba(171,71,188,.14);color:#c17ad6;border-color:transparent}
.enrich-btn{float:right;height:26px;padding:0 10px;font-size:12px;margin-left:8px}
/* people page header filter */
.ppl-filter{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 4px;
  padding:8px 10px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg)}
.ppl-filter input{height:30px;background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);color:var(--fg);padding:0 10px;font-size:13px;outline:none}
.ppl-filter input[type=search]{width:240px}
.ppl-filter input[type=number]{width:90px}
.ppl-filter input:focus{border-color:var(--accent)}
.ppl-filter select{height:30px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  color:var(--fg);font-size:13px;padding:0 6px;outline:none}
.ppl-filter .chk-inline{font-size:13px;color:var(--muted)}
.ppl-filter .seg button{height:24px;min-width:0;padding:0 12px;font-size:12px}
/* role card (Discord mention target) */
.rolecard .role-pav .ph{background:rgba(88,101,242,.18);color:#5865F2;font-weight:700}
.role-idcode{font-size:11px;color:var(--muted2);background:var(--bg);padding:1px 6px;border-radius:4px}
.pc-notes{margin-top:8px;font-size:12px;color:var(--muted);font-style:italic;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.muted{color:var(--muted2);font-size:12px}
.pc-btns{display:flex;gap:4px}
.edit,.del{width:24px;height:24px;border-radius:var(--radius);color:var(--muted2);font-size:13px}
.edit:hover{background:var(--accent-bg);color:var(--accent)}
.del:hover{background:rgba(239,83,80,.15);color:var(--down)}
/* per-account source-quality mark (none / 🟢 mover / 🔴 noise) */
.src-mark{width:24px;height:24px;border-radius:var(--radius);font-size:12px;line-height:1;color:var(--muted2)}
.src-mark:hover{background:var(--accent-bg)}
.src-badge{font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;margin-left:7px;vertical-align:middle}
.sb-mover{color:#1f9d55;background:rgba(31,157,85,.13)}
.sb-noise{color:#e0574f;background:rgba(224,87,79,.13)}
.pcard.src-mover{border-left:3px solid #2fb66a}
.pcard.src-noise{border-left:3px solid #e0574f}
/* source-quality cycle button inside the shared profile dialog (People / feed / TradingView) */
.src-cycle{font-size:11px;font-weight:600;padding:2px 10px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);color:var(--muted);background:var(--panel);transition:all .12s}
.src-cycle:hover{border-color:var(--accent)}
.src-cycle.src-mover{color:#1f9d55;border-color:#2fb66a;background:rgba(31,157,85,.12)}
.src-cycle.src-noise{color:#e0574f;border-color:#e0574f;background:rgba(224,87,79,.12)}

/* ===== news collector ===== */
.coll-main{position:absolute;top:var(--topbar);left:0;right:0;bottom:0;overflow:auto;background:var(--bg);padding:0 16px 16px}
.coll-filters.is-disabled{opacity:.45}
.coll-head{position:sticky;top:0;z-index:5;background:var(--bg);margin:0 -16px 12px;
  padding:8px 16px;box-shadow:0 6px 10px -8px rgba(0,0,0,.5)}
.coll-bar{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.coll-bar[hidden]{display:none}   /* the flex display above otherwise overrides the [hidden] attribute */
.btn-danger{height:34px;padding:0 12px;border-radius:var(--radius);color:var(--down);
  border:1px solid var(--line);background:transparent;font-weight:500}
.btn-danger:hover{background:rgba(239,83,80,.12);border-color:var(--down)}
.collect-msg{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.stats{font-size:13px;color:var(--muted)}
.stats b{color:var(--fg)}
.src-direct{display:inline-flex;align-items:center;padding:0 6px;border-radius:999px;font-size:10.5px;
  font-weight:600;letter-spacing:.02em;color:var(--accent);border:1px solid var(--accent);opacity:.85}
/* Signal page — watchlist dialog */
/* watchlist/keyword dialogs: wide enough for handle + name + subnet chips + controls on
   one line, and tall enough that the list scrolls INSIDE rather than the whole dialog */
.modal-box.wl-big{width:1060px;max-width:94vw;max-height:92vh;
  display:flex;flex-direction:column;overflow:hidden}
/* chain-reaction dialog: the pile-on's signals stacked oldest→newest, scrolling inside */
.modal-box.wl-big>.chain-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;
  gap:11px;padding:4px 2px 6px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.modal-box.wl-big>.chain-list::-webkit-scrollbar{width:9px}
.modal-box.wl-big>.chain-list::-webkit-scrollbar-track{background:transparent}
.modal-box.wl-big>.chain-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px}
.modal-box.wl-big>.chain-list::-webkit-scrollbar-thumb:hover{background:var(--muted2)}
.chain-item{position:relative}
.chain-item .chain-n{position:absolute;left:-3px;top:-6px;z-index:6;font-family:var(--mono,ui-monospace,monospace);
  font-size:10px;font-weight:800;color:var(--accent);background:var(--panel);
  border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);border-radius:999px;
  min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px}
/* per-signal platform watermark (X / Discord), faint in the card's top-right */
.chain-item .mk-wms{position:absolute;inset:auto;top:8px;right:11px;z-index:2;pointer-events:none;
  display:flex;gap:3px;justify-content:flex-end}
.chain-item .mk-wm svg{width:22px;height:22px}
/* whichever list this dialog holds takes the leftover height and scrolls itself — the
   dialog clips, so a list without its own overflow would be unreachable */
.modal-box.wl-big>.wl-list,
.modal-box.wl-big>.gap-list,
.modal-box.wl-big>.flowlist,
.modal-box.wl-big>.trend-grid,
.modal-box.wl-big>.kw-groups{flex:1;min-height:0;overflow-y:auto}
.modal-box.wl-big>.wl-list{max-height:none}          /* height comes from the flex row now */
.wl-av{width:34px;height:34px;border-radius:50%;object-fit:cover;cursor:pointer;
  border:1px solid var(--line);transition:transform .12s,border-color .12s}
.wl-av:hover{transform:scale(1.1);border-color:var(--accent)}
.wl-av.no-person{cursor:help;opacity:.7}
.xt-chip img{width:16px;height:16px;border-radius:50%;object-fit:cover;margin-right:5px}
.wl-addrow{margin:2px 0 10px}
.wl-addrow #wl-in{width:300px}          /* look comes from .inp-search/.inp-add */
/* registered-account suggestions, anchored under the add field (reuses .ps-list rows) */
/* ===== Signal: X | Discord side by side =====================================
   Both trackers run independently server-side, so the page shows them as two
   self-contained columns. The PAGE does not scroll — each feed scrolls inside its
   own column, so a busy X feed can't push Discord out of view. */
.sig-main{display:flex;flex-direction:column;overflow:hidden;padding-bottom:12px}
.sig-main .coll-head{position:relative;margin-bottom:0;box-shadow:none;
  border-bottom:none;padding-bottom:0}
/* content rows ride ABOVE the backdrop canvas (the manage bar already does via its own
   position); without this the canvas would paint over the mark cards' backgrounds */
.sig-main .marks-strip,.sig-main .chain-badges{position:relative;z-index:1}
/* empty marks strip: no placeholder — the strip just holds its reserved height (min-height) */
.mk-empty{display:none}
.sig-main .coll-bar:last-child{margin-bottom:8px}
.sig-split{flex:1;min-height:0;display:grid;grid-template-columns:1fr 290px 1fr;gap:14px;padding-top:16px}
.sig-col{min-width:0;min-height:0;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg)}
.sig-col.is-live{border-color:var(--accent-bg)}
.sig-colhead{display:flex;align-items:center;gap:9px;padding:8px 11px;
  border-bottom:1px solid var(--line)}
.sig-colic{display:flex;align-items:center}
/* the platform icon is now the column's sole identifier (text titles removed) */
.sig-colic svg{width:19px;height:19px;fill:currentColor}
.sig-ic-x{color:var(--fg)}
.sig-ic-discord{color:#5865F2}
.sig-colhead .sig-live{margin-left:2px}
/* author's subnet affiliation, stacked UNDER their avatar — who this person speaks for,
   distinct from the message's own subnet tags. "m" = macro (network-wide voice). */
.sig-avwrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;flex:none;width:auto;min-width:38px}
/* 👑 watchlist crown — perched on the top-left corner of the avatar, tilted 45° */
.sig-crown{position:absolute;top:-7px;left:-7px;transform:rotate(-45deg);transform-origin:center;
  font-size:15px;line-height:1;pointer-events:none;z-index:2;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.6))}
.sig-avsubs{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;max-width:48px}
.sig-avsub{font-size:10px;font-weight:800;line-height:1;padding:2px 5px;border-radius:5px;
  border:1px solid rgba(171,71,188,.45);background:rgba(171,71,188,.22);color:#d79aea;
  font-variant-numeric:tabular-nums;cursor:default}
.sig-avsub.macro{border-color:rgba(255,179,0,.5);background:rgba(255,179,0,.22);color:#ffc233}  /* macro = amber */
.sig-avsub.more{border-color:var(--border);background:var(--hover);color:var(--muted2)}

/* current round-robin slot (hot1 / hot2 / normal1), a pill right after the countdown ring.
   amber = hot watchlist, cyan = rotating "normal" tail — colour-codes what's fetching now */
.sig-slotlabel{font-size:10px;font-weight:800;white-space:nowrap;letter-spacing:.04em;
  text-transform:uppercase;padding:2px 8px;border-radius:999px;
  font-variant-numeric:tabular-nums;border:1px solid transparent}
.sig-slotlabel:empty{display:none}
.sig-slotlabel.hot{color:#ffcf70;background:rgba(255,179,0,.14);border-color:rgba(255,179,0,.35)}
.sig-slotlabel.tail{color:#7ee7f5;background:rgba(34,211,238,.14);border-color:rgba(34,211,238,.35)}
.sig-trkbtn{height:28px;padding:0 11px;font-size:12px}
.sig-wl{height:28px;padding:0 10px;font-size:12px}
/* status chips now live at the RIGHT end of the filter row (row 2), not their own row */
.sig-colstat{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;margin-left:auto}
/* the feed fills the column and scrolls on its own (overrides the centred 768px page feed) */
.sig-col .feed{flex:1;min-height:0;overflow-y:auto;max-width:none;margin:0;padding:10px;gap:8px;
  background:var(--bg)}   /* recessed well so the --panel message cards read as raised above it */
.sig-col .gap-banner{margin:10px 10px 0}
/* narrow screens: stack, and let the page scroll again rather than squeezing columns */
@media (max-width:1180px){
  .sig-main{overflow:auto}
  .sig-split{grid-template-columns:1fr;height:auto}
  .sig-col{min-height:60vh}
  .sig-col .feed{overflow-y:visible}
}

/* ===== 10τ+ transaction ticker (Signal page right column) ============================ */
.sig-ic-tx{color:#a78bfa;font-size:15px}
.sig-tx-live{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;
  letter-spacing:.03em;color:var(--muted);text-transform:uppercase}
.sig-txcount{font-size:12px;font-variant-numeric:tabular-nums}
.sig-txbar{display:flex;align-items:center;gap:6px;padding:6px 11px;border-bottom:1px solid var(--line);font-size:11px}
.sig-txfl{height:20px;padding:0 8px;border-radius:999px;font-size:10px;font-weight:700;
  border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer}
.sig-txfl.on{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
.sig-txfeed{flex:1;min-height:0;overflow-y:auto;padding:6px;display:flex;flex-direction:column;gap:3px}
/* one compact scannable line per move: [dir] snN  size  impact | time */
.tx-chip{display:grid;grid-template-columns:1fr auto 22px;align-items:center;gap:6px;
  padding:3px 8px;border-radius:6px;font-size:12px;line-height:1.5;
  background:var(--panel);transition:background .1s}
.tx-chip:hover{background:var(--hover)}
/* FIXED column widths: every row is its own grid, so `auto` columns size to their own
   content and drift row-to-row — fixed tracks line the sn/τ/impact columns up vertically */
.tx-main{display:grid;grid-template-columns:10px 26px 44px 1fr;align-items:center;gap:5px;
  min-width:0;text-decoration:none;color:inherit}
/* 🛡️ MEV-protected (*_limit safe-staking) trade badge — overlaid at the LEFT of the impact cell's
   empty space (absolute, zero layout width) so it never squeezes the pnl %. Cool cyan = "protected". */
.tx-shield{position:absolute;left:0;top:50%;transform:translateY(-50%);pointer-events:none;
  display:inline-flex;align-items:center;justify-content:center;color:#4cc2ff}
.tx-shield svg{width:12px;height:12px}
/* transaction time -> links to the extrinsic on taostats */
.tx-time{font-size:10px;color:var(--muted2);font-variant-numeric:tabular-nums;
  text-decoration:none;white-space:nowrap}
a.tx-time:hover{color:var(--accent);text-decoration:underline}
.tx-dir{font-size:9px;text-align:center}
.tx-sn{font-weight:700;color:var(--fg);font-variant-numeric:tabular-nums}
.tx-tao{font-weight:800;font-variant-numeric:tabular-nums;text-align:right}
/* padding-left reserves the shield's overlay zone on EVERY row (right-aligned pnl can't enter it),
   so the 🛡️ never overlaps the % and all impacts stay aligned whether shielded or not */
.tx-imp{font-size:10px;color:var(--muted2);font-variant-numeric:tabular-nums;text-align:right;
  min-width:56px;white-space:nowrap;position:relative;padding-left:15px}
/* buy = green, sell = red — colour the direction glyph + the size (no left rail) */
.tx-buy .tx-dir,.tx-buy .tx-tao{color:var(--up)}
.tx-sell .tx-dir,.tx-sell .tx-tao{color:var(--down)}
.tx-move .tx-dir{color:var(--muted2)}
/* size tiers: bigger moves get a faint tint so they pop out of the noise */
.tx-chip.big{background:color-mix(in srgb,var(--accent) 6%,var(--panel))}
.tx-buy.big{background:color-mix(in srgb,var(--up) 9%,var(--panel))}
.tx-sell.big{background:color-mix(in srgb,var(--down) 9%,var(--panel))}
/* a market-moving single trade (>=0.5% impact): make the impact figure bold + coloured */
.tx-impact .tx-imp{font-weight:800;color:#ffb300}
/* the bot's OWN transactions — a distinct accent-tinted background with a slow shimmer sweep */
.tx-mine{position:relative;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 20%,var(--panel)),var(--panel) 74%);
  box-shadow:inset 3px 0 0 var(--accent),0 0 0 1px color-mix(in srgb,var(--accent) 26%,transparent)}
.tx-mine::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:6px;
  background:linear-gradient(100deg,transparent 34%,color-mix(in srgb,var(--accent) 24%,transparent) 50%,transparent 66%);
  background-size:220% 100%;animation:txmine 2.8s linear infinite}
.tx-mine > *{position:relative;z-index:1}
@keyframes txmine{from{background-position:120% 0}to{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){.tx-mine::after{animation:none}}
/* 2-min divider: everything above it is fresh (< 2 min), below is the older backlog */
.tx-divider{display:flex;align-items:center;gap:8px;margin:5px 2px 3px;
  font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted2)}
.tx-divider::before,.tx-divider::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--border),transparent)}
.tx-divider span{white-space:nowrap}
@media (max-width:1180px){ .sig-txcol{min-height:50vh} }

/* cycle overrunning its interval — the ring pulses instead of sitting at a stuck ⋯.
   CLASS selector: the split-column rings are .trk-ring (data-el="ring"); the old
   #trk-ring id no longer exists, so the pulse never fired and the ⋯ looked frozen. */
.trk-ring.busy{animation:trk-busy 1.4s ease-in-out infinite}
@keyframes trk-busy{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.trk-ring.busy{animation:none;opacity:.7}}
/* subnet group headers inside the watchlist (macro first, then 1→128, then untagged) */
.wl-gh{list-style:none;display:flex;align-items:center;gap:8px;margin:10px 0 2px;
  font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted2)}
.wl-gh:first-child{margin-top:0}
.wl-gh::after{content:"";flex:1;height:1px;background:var(--line)}
.wl-untracked{opacity:.62}
.wl-untracked:hover{opacity:1}
.wl-addbox{position:relative;display:inline-block}
.wl-sug{position:absolute;top:34px;left:0;z-index:60;width:420px;padding:6px;
  background:var(--elevated);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.wl-sug .xt-sn{margin-left:2px}
.wl-sug-on{opacity:.5;cursor:default}
.wl-sug-on:hover{background:none}
.wl-sug-tag{font-size:11px;color:var(--muted2);border:1px solid var(--line);
  border-radius:999px;padding:0 6px;white-space:nowrap}
.wl-list{list-style:none;margin:0;padding:0;max-height:min(62vh,660px);overflow-y:auto}
.wl-row{display:flex;align-items:center;gap:10px;padding:7px 4px;border-bottom:1px solid var(--line);font-size:13.5px}
.wl-row:last-child{border-bottom:none}
.wl-row{flex-direction:column;align-items:stretch;gap:6px}
.wl-head{display:flex;align-items:center;gap:6px}
/* 👑 Discord hot-watchlist row: gold accents */
.dw-crown{font-size:13px;line-height:1}
.dw-row-hot{background:rgba(255,179,0,.06);border-radius:6px}
.dw-hot-on{color:#ffb300;border-color:rgba(255,179,0,.5)}
/* Discord token-pool dialog */
.tok-open-btn{width:100%;justify-content:center;gap:6px;margin:0 0 12px;height:32px;font-size:12.5px}
.tok-list{list-style:none;margin:0;padding:0;max-height:300px;overflow:auto}
.tok-row{display:flex;align-items:center;gap:9px;padding:8px 4px;border-bottom:1px solid var(--line);font-size:13px}
.tok-row:last-child{border-bottom:none}
.tok-primary{background:rgba(255,179,0,.06);border-radius:6px;padding-left:6px}
.tok-acct{color:var(--muted2)}
.tok-mask{font-size:11.5px;color:var(--muted2);background:var(--hover);padding:1px 6px;border-radius:4px}
.tok-off{opacity:.5}
.form-msg.err{color:var(--down)}
.wl-head .wl-meta{font-size:12px}
.wl-row .wl-rm{height:24px;padding:0 9px;font-size:11.5px}
/* tier toggle: hot = amber (real-time watchlist), normal = cyan (rotating tail sweep) */
.wl-tier{height:24px;padding:0 10px;border-radius:999px;font-size:10px;font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;border:1px solid transparent;cursor:pointer}
.wl-tier.hot{color:#ffcf70;background:rgba(255,179,0,.14);border-color:rgba(255,179,0,.4)}
.wl-tier.tail{color:#7ee7f5;background:rgba(34,211,238,.14);border-color:rgba(34,211,238,.4)}
.wl-tier:hover{filter:brightness(1.2)}
.wl-row .wl-rm:hover{color:var(--down);border-color:var(--down)}
.wl-subs{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding-left:2px}
.wl-lbl{font-size:12px;color:var(--muted)}
.wl-sub{display:inline-flex;align-items:center;gap:4px;padding:2px 5px 2px 8px;border-radius:999px;
  font-size:12px;color:var(--accent);border:1px solid var(--accent);opacity:.9}
.wl-sub .wl-unlink{color:var(--muted);font-size:13px;line-height:1;padding:0 1px}
.wl-sub .wl-unlink:hover{color:var(--down)}
.wl-subs .wl-nu{width:56px;height:26px;padding:0 6px;border-radius:var(--radius);
  border:1px solid var(--border);background:transparent;color:var(--fg);font-size:12px}
.wl-subs .wl-link{height:26px;padding:0 10px;font-size:12px}
.xt-chip em{font-style:normal;margin-left:5px;padding:0 5px;border-radius:999px;font-size:10px;
  color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,transparent)}
.gap-banner{display:flex;align-items:center;gap:8px;margin:0 auto 14px;max-width:770px;
  padding:9px 14px;border-radius:var(--radius);font-size:13px;color:var(--fg);
  border:1px solid #8868c8;background:color-mix(in srgb,#8868c8 12%,transparent)}
.gap-banner[hidden]{display:none}
.nh-list{margin:8px 0 8px 18px;padding:0;font-size:13px;line-height:1.7}
.nh-list code{background:var(--hover);padding:1px 5px;border-radius:4px;font-size:12px;word-break:break-all}
#modal-box p{font-size:13px;line-height:1.55;margin:6px 0}
.gap-banner .gap-ic{font-size:16px}
.gap-banner .btn-ghost{height:26px;padding:0 10px;font-size:12px;margin-left:4px}
.gap-list{max-height:none;overflow-y:auto;padding-right:6px}
.sig-gap{font-size:11px;color:#a88ee0;white-space:nowrap}
.sig-move{font-size:11.5px;font-weight:700;white-space:nowrap;padding:1px 7px;border-radius:999px;
  font-variant-numeric:tabular-nums}
.sig-move.up{color:var(--up);background:color-mix(in srgb,var(--up) 14%,transparent)}
.sig-move.down{color:var(--down);background:color-mix(in srgb,var(--down) 14%,transparent)}
.sig-move.flat{color:var(--muted);background:var(--hover)}
/* live-tick flash: a glow ring that fades, shown in the DIRECTION the value moved. Uses
   box-shadow (not background) so it never wipes the chip's own tint. Applies to both the
   headline badge (.sig-move) and the per-subnet "now" chips (.mv). */
.sig-tagedit{margin-left:8px;font-size:11px;color:var(--muted2);opacity:0;transition:opacity .12s}
.sig-row:hover .sig-tagedit{opacity:.6}
.sig-tagedit:hover{opacity:1;color:var(--accent)}
.mv.sig-mv-up{color:var(--up)} .mv.sig-mv-down{color:var(--down)} .mv.sig-mv-flat{color:var(--muted2)}
/* per-column filter row (X / Discord each filter their own feed) */
.sig-colfilter{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:7px 11px;border-bottom:1px solid var(--line)}
.sig-colfilter .ps-btn{min-width:120px;max-width:190px}
.sig-netin{width:88px;height:30px;padding:0 10px;border-radius:var(--radius);
  border:1px solid var(--border);background:transparent;color:var(--fg);font-size:13px}
.sig-netin:hover{border-color:var(--accent-hover)}
.sig-netin:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg);outline:none}
/* find-a-message-by-dev-id box in the manage bar */
.devid-search{width:96px;height:30px;padding:0 10px;border-radius:var(--radius);font-size:13px;
  border:1px solid var(--border);background:transparent;color:var(--fg);
  font-variant-numeric:tabular-nums}
.devid-search::placeholder{color:var(--muted)}
.devid-search:hover{border-color:var(--accent-hover)}
.devid-search:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg);outline:none}
/* (the old .sig-srcs/.sig-src segmented toggle was replaced by real .srv-tabs tabs) */
/* avatars are circles on BOTH sources (the old discord-squircle override is gone) */
.sig-ago{font-size:11.5px;color:var(--accent);font-variant-numeric:tabular-nums;font-weight:600}
.sig-delay{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.sig-delay.fast{color:var(--up);font-weight:600}        /* caught within the tier's target */
.sig-delay.slow{color:#f0932b;font-weight:600}          /* slower than the target — orange */
/* X-repost lag chip (tweet posted → reported in Discord): eye-catching gold, glowing + pulsing */
.xr-delay{display:inline-flex;align-items:center;gap:3px;padding:1px 8px;border-radius:9px;
  font-size:11px;font-weight:800;letter-spacing:.02em;line-height:1.3;white-space:nowrap;cursor:help;
  color:#241400;background:linear-gradient(135deg,#fde047,#f59e0b);font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 1.5px rgba(251,191,36,.55),0 2px 12px rgba(245,158,11,.7);animation:xrpulse 1.4s ease-in-out infinite}
@keyframes xrpulse{0%,100%{box-shadow:0 0 0 1.5px rgba(251,191,36,.4),0 2px 8px rgba(245,158,11,.5)}
  50%{box-shadow:0 0 0 1.5px rgba(251,191,36,1),0 3px 18px rgba(245,158,11,1)}}
/* ---- DIRECT/real-time catches (X live session · Discord gateway/live store) ----------
   These bypass the laggy search index, so they get a ⚡ tag and a glowing emerald rail. */
.sig-livetag{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:800;
  letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;padding:1px 6px;
  border-radius:999px;color:#34d399;background:rgba(52,211,153,.14);
  border:1px solid rgba(52,211,153,.45)}
/* live-caught signals render identical to every other card — no emerald glow/rail/border,
   so a signal looks the same regardless of the account or how fast it was caught */
.sig-row.sig-livecaught{position:relative}
.sig-row.sig-livecaught::before{content:none}
[data-mode="light"] .sig-livetag{color:#0f8f6b;background:rgba(16,185,129,.12);
  border-color:rgba(16,185,129,.4)}
/* Signal page — live tracker */
.sig-live{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
  letter-spacing:.08em;color:var(--up)}
.sig-live[hidden]{display:none}
.sig-dot{width:8px;height:8px;border-radius:50%;background:var(--up);animation:sigpulse 1.6s ease-in-out infinite}
@keyframes sigpulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(38,166,154,.5)}50%{opacity:.55;box-shadow:0 0 0 5px rgba(38,166,154,0)}}
#notif-btn.on{color:var(--accent);border-color:var(--accent)}
#automark-btn.on{color:var(--accent);border-color:var(--accent);background:var(--accent-bg)}
/* icon-only toggle buttons (🔔 / ◆ / 💰) — dim when off, accent when on, red-pulse when LIVE */
/* MUI-style IconButtons: circular, borderless, soft circular hover overlay, no ripple.
   State is carried by the fill — accent tint when on, red tint + pulse when LIVE. */
.tgl-ico{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  font-size:16px;line-height:1;padding:0;border:none;border-radius:50%;background:transparent;
  color:var(--muted);cursor:pointer;opacity:.62;transition:background .18s,opacity .18s,color .18s;
  position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent}
.tgl-ico:active{transform:scale(.9)}                     /* tactile press */
/* MUI-style click ripple — spawned at the pointer on every .tgl-ico press (see signal.js) */
.tgl-ico .tgl-ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.4;
  transform:scale(0);pointer-events:none;animation:tglRipple .5s ease-out forwards}
@keyframes tglRipple{to{transform:scale(2.4);opacity:0}}
/* in-flight state: DISABLED + a spinner ring running around the button while it awaits the server */
.tgl-ico.pending{opacity:1;color:var(--accent);pointer-events:none;cursor:default}
.tgl-ico.pending svg{opacity:.28}                        /* dim the icon; the ring shows it's working */
.tgl-ico.pending::after{content:"";position:absolute;inset:1px;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--accent) 22%,transparent);border-top-color:var(--accent);
  animation:tglSpin .7s linear infinite}
@keyframes tglSpin{to{transform:rotate(360deg)}}
.tgl-ico svg{width:20px;height:20px}                    /* flat one-colour icons take currentColor */
.tgl-ico:hover{background:var(--hover);opacity:1}
.tgl-ico:active{background:color-mix(in srgb,var(--fg) 16%,transparent)}
.tgl-ico.on{opacity:1;color:var(--accent);background:var(--accent-bg)}
.tgl-ico.live{opacity:1;color:var(--down);background:color-mix(in srgb,var(--down) 16%,transparent);
  box-shadow:0 0 0 0 rgba(239,83,80,.55);animation:tglLive 1.3s ease-in-out infinite}
@keyframes tglLive{50%{box-shadow:0 0 0 6px rgba(239,83,80,0)}}
/* header tracker controls rendered as compact MUI icon buttons (Watchlist=eye · ⚙ · Start/Stop=play/pause) */
.sig-colhead .tgl-ico{width:34px;height:34px;padding:0}
.sig-colhead .tgl-ico svg{width:18px;height:18px}

/* ---- auto-* controls grouped in one bordered box (always visible) ---- */
.ctrl-box{display:inline-flex;align-items:center;gap:3px;padding:3px;
  border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel);
  box-shadow:0 1px 3px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.03)}
/* thin separators that group the box into buy-config · sell/ban · notify */
.ctrl-div{flex:0 0 auto;width:1px;height:22px;margin:0 1px;
  background:linear-gradient(transparent,var(--line) 22%,var(--line) 78%,transparent)}
/* inline auto-buy Σ-threshold stepper (lives in the ctrl-box, next to 💰) */
.ctrl-thr{display:inline-flex;align-items:center;gap:0;padding:2px;user-select:none;white-space:nowrap;
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.22);transition:border-color .2s,box-shadow .2s}
.ctrl-thr .thr-lbl{font-size:.66rem;font-weight:800;color:var(--muted);letter-spacing:.03em;
  padding:0 3px 0 4px;line-height:1}
.ctrl-thr .thr-ge{opacity:.7;font-weight:600}
.ctrl-thr .thr-step{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;
  border:none;background:transparent;color:var(--muted);font-size:15px;line-height:1;cursor:pointer;
  border-radius:50%;transition:background .12s,color .12s,transform .06s}
.ctrl-thr .thr-step:hover{background:var(--hover);color:var(--fg)}
.ctrl-thr .thr-step:active{transform:scale(.86)}
.ctrl-thr input{width:30px;height:24px;text-align:center;padding:0;border:none;background:transparent;
  font-size:.9rem;font-weight:800;color:var(--accent);-moz-appearance:textfield}
.ctrl-thr input::-webkit-outer-spin-button,.ctrl-thr input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ctrl-thr input:focus{outline:none}
.ctrl-thr:focus-within{border-color:var(--accent);box-shadow:inset 0 1px 2px rgba(0,0,0,.22),0 0 0 2px var(--accent-bg)}
.ctrl-thr.saved{border-color:var(--up);box-shadow:0 0 0 2px color-mix(in srgb,var(--up) 30%,transparent)}
.sig-row{margin-bottom:10px}
/* X direct-fetch watchlist (News/X tab) */
.xt-bar{flex-wrap:wrap;row-gap:6px}
.xt-chips{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center}
.xt-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 6px 3px 10px;border-radius:999px;
  border:1px solid var(--border);font-size:12.5px;color:var(--fg);background:var(--hover)}
.xt-x{color:var(--muted);font-size:14px;line-height:1;padding:0 2px;border-radius:50%}
.xt-x:hover{color:var(--down)}
#xt-input{width:130px;height:30px;padding:0 10px;border-radius:var(--radius);
  border:1px solid var(--border);background:transparent;color:var(--fg);font-size:13px}
/* subnets page */
.subnets-main{position:absolute;top:var(--topbar);left:0;right:0;bottom:0;overflow:auto;
  background:var(--bg);padding:16px}
.subnets-main .list-card{max-width:min(1480px,97vw);margin:0 auto}
.sn-search{float:right;height:28px;width:180px;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius);color:var(--fg);padding:0 10px;font-size:13px;outline:none}
.sn-search:focus{border-color:var(--accent)}
/* the wrap is the SCROLLER (not the page): an overflow-x ancestor silently breaks
   position:sticky on the header, so give it vertical scroll and stick the th to it */
.sn-wrap{overflow:auto;max-height:calc(100vh - var(--topbar) - 132px)}
.sn-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
/* separate+0 spacing instead of collapse: collapsed borders leave sub-pixel seams
   between cells at fractional browser zoom (125%/150%) — the user-visible 'gaps' */
.sn-table th{position:sticky;top:0;z-index:2;background:var(--panel);text-align:right;padding:8px 12px;
  color:var(--muted2);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.4px;
  box-shadow:inset 0 -1px 0 var(--border);cursor:pointer;user-select:none;white-space:nowrap}
.sn-table th:first-child{text-align:left}
.sn-table th.sort-asc::after{content:" ▲";font-size:9px}
.sn-table th.sort-desc::after{content:" ▼";font-size:9px}
.sn-table td{padding:7px 12px;text-align:right;vertical-align:middle}
/* one continuous divider per ROW (tr box-shadow) — per-cell borders snap to device
   pixels independently at 125%/150% zoom and the 1px step reads as a broken line */
.sn-table tbody tr{box-shadow:inset 0 -1px 0 var(--line)}
.sn-table td:first-child{text-align:left}
/* row background by category: closed=brown · immune&unclaimed=indigo · immune=green · risk=red · other=blue */
.sn-table tbody tr.cat-closed{background:rgba(150,95,45,.22)}
.sn-table tbody tr.cat-immune-unclaimed{background:rgba(110,110,245,.22)}
.sn-table tbody tr.cat-immune{background:rgba(38,166,154,.18)}
.sn-table tbody tr.cat-risk{background:rgba(239,83,80,.18)}
.sn-table tbody tr.cat-other{background:rgba(66,133,244,.12)}
.sn-table tbody tr.cat-closed:hover{background:rgba(150,95,45,.30)}
.sn-table tbody tr.cat-immune-unclaimed:hover{background:rgba(99,102,241,.30)}
.sn-table tbody tr.cat-immune:hover{background:rgba(38,166,154,.28)}
.sn-table tbody tr.cat-risk:hover{background:rgba(239,83,80,.28)}
.sn-table tbody tr.cat-other:hover{background:rgba(66,133,244,.22)}
.sn-table tbody tr:hover{background:var(--hover)}
/* the single lowest-EMA subnet (prune-next, big-bump-if-claimed): pulsing gold spotlight */
@keyframes primeGlow{0%,100%{background:rgba(245,179,1,.10)}50%{background:rgba(245,179,1,.30)}}
.sn-table tbody tr.sn-primed{animation:primeGlow 2.4s ease-in-out infinite}
.sn-table tbody tr.sn-primed td:first-child{box-shadow:inset 3px 0 0 0 #f5b301}
.sn-table tbody tr.sn-primed:hover{animation:none;background:rgba(245,179,1,.34)}
@keyframes primeBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.sn-primed-badge{margin-left:5px;display:inline-block;filter:drop-shadow(0 0 4px rgba(245,179,1,.7));
  animation:primeBounce 1.4s ease-in-out infinite}
/* ownerless / unclaimed marker — any subnet with no owner in People; indigo when immune */
.sn-unclaimed{display:inline-block;margin-left:6px;vertical-align:1px;font-size:10px;font-weight:700;
  letter-spacing:.02em;padding:1px 6px;border-radius:9px;cursor:default;
  color:#8a8f98;background:rgba(140,140,150,.14);border:1px solid rgba(140,140,150,.32)}
.sn-unclaimed.immune{color:#9a9aff;background:rgba(110,110,245,.18);border-color:rgba(110,110,245,.5)}
.sn-table .num{font-variant-numeric:tabular-nums}
.sn-table .up{color:var(--up)} .sn-table .down{color:var(--down)}
.sn-id{font-weight:600}
/* keep the td a real table-cell (flex would break row vertical centering);
   children align on the middle line instead */
.sn-cell{white-space:nowrap}
.sn-cell b{display:inline-block;vertical-align:middle;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.sn-cell .sn-id{vertical-align:middle;margin:0 2px 0 8px}
.sn-ico{width:22px;height:22px;border-radius:6px;object-fit:cover;vertical-align:middle;display:inline-block}
.sn-ico.ph{background:var(--hover)}
.sn-links a{color:var(--muted);text-decoration:none;margin-right:6px}
.sn-links a:hover{color:var(--accent)}
.sn-links svg{width:15px;height:15px;fill:currentColor;vertical-align:-3px}
.sn-ppl{white-space:nowrap}
.sn-pav{width:22px;height:22px;border-radius:50%;object-fit:cover;display:inline-flex;
  align-items:center;justify-content:center;margin-right:-7px;border:2px solid var(--panel);
  background:var(--hover);color:var(--muted2);font-size:10px;font-weight:600;vertical-align:middle}
.sn-msg{float:right;font-size:12px;margin-right:10px;line-height:26px}
.sn-act a{color:var(--muted2);text-decoration:none;font-size:12px}
.sn-act a:hover{color:var(--accent)}
.sn-table .empty{text-align:center;color:var(--muted2);padding:24px}

/* subnet detail dialog (row click) */
.sn-table tbody tr{cursor:pointer}
.sn-dlg-id{display:flex;align-items:center;gap:12px}
.sn-dlg-ico{width:52px;height:52px;border-radius:10px;object-fit:cover;background:var(--hover);flex:none}
.sn-dlg-fields{margin-top:14px;display:grid;gap:6px}
.mb-f .v a{color:var(--accent);text-decoration:none}
.mb-f .v a:hover{text-decoration:underline}
.sn-dlg-ppl{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px}
.sn-dlg-ppl .k{color:var(--muted2);margin-right:4px}
.sn-dlg-ppl .tag{display:inline-flex;align-items:center;gap:6px}
.sn-dlg-ppl .sn-pav{margin-right:0}
.sn-pav[data-pid]{cursor:pointer}
.sn-dlg-ppl .tag[data-pid]{cursor:pointer}
.sn-dlg-ppl .tag[data-pid]:hover{border-color:var(--accent)}
#sn-modal-box .tag.up{color:var(--up)} #sn-modal-box .tag.down{color:var(--down)}

/* filter strip: a bordered panel so it reads as its own tier, distinct from the action row */
.coll-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:7px 12px}
.fbar-lab{display:inline-flex;align-items:center;gap:6px;margin-right:2px;
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--muted2)}
.fbar-lab svg{width:12px;height:12px;fill:currentColor}
.fdiv{width:1px;align-self:stretch;margin:1px 4px;background:var(--line)}
.coll-filters .btn-ghost{height:30px;padding:0 12px;font-size:12px}
.coll-filters .apply-btn{height:30px}
.coll-filters input,.coll-filters select,.coll-filters .ps-btn,.coll-filters .dr-btn{background:var(--bg)}
.flab{font-size:12px;color:var(--muted2)}
.chk-inline{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--muted);cursor:pointer;user-select:none}
.coll-filters .chk-inline input{appearance:auto;width:15px;height:15px;min-width:0;margin:0;padding:0;border:0;
  background:none;cursor:pointer;accent-color:var(--accent)}
.coll-filters input,.coll-filters select{height:30px;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius);color:var(--fg);padding:2px 10px;outline:none;font:inherit;font-size:13px}
.coll-filters input{width:100px}
.coll-filters #f-pct{width:64px}
.coll-filters #f-q{width:160px}
/* searchable people filter (combobox) */
.psel{position:relative}
.ps-btn{height:30px;min-width:130px;max-width:210px;padding:0 26px 0 11px;text-align:left;position:relative;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);color:var(--fg);
  font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-btn::after{content:"▾";position:absolute;right:9px;top:50%;transform:translateY(-50%);
  color:var(--muted2);font-size:10px}
.ps-btn:hover{border-color:var(--accent-hover)}
.ps-btn.active{border-color:var(--accent);color:var(--accent)}
.ps-pop{position:absolute;top:34px;left:0;z-index:40;width:250px;padding:8px;
  background:var(--elevated);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
/* Search box inside the person picker. Styled on .ps-pop itself (NOT scoped to a page
   wrapper) — it used to be `.coll-filters .ps-pop input`, so the same picker on the
   Signal page fell through to the raw browser input: white box, default focus ring. */
/* Shared search-field look (people filter + the Signal dialogs). Defined once and
   applied by selector list so the two can't drift apart. */
.ps-pop input,.inp-search{height:30px;box-sizing:border-box;
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
  color:var(--fg);font:inherit;font-size:13px;padding:0 10px 0 28px;outline:none;
  transition:border-color .12s,box-shadow .12s;
  /* magnifier drawn as a background SVG so no extra markup is needed */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c8c8c' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.6-3.6'/></svg>");
  background-repeat:no-repeat;background-position:8px 50%;background-size:13px 13px}
.ps-pop input{width:100%;margin:0 0 7px}
.ps-pop input::placeholder,.inp-search::placeholder{color:var(--muted2)}
.ps-pop input:hover,.inp-search:hover{border-color:var(--accent-hover)}
.ps-pop input:focus,.inp-search:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg)}
/* the dialogs' fields ADD rather than search, so they carry a + glyph instead of the
   magnifier — same field styling, honest affordance */
.inp-add{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c8c8c' stroke-width='2.4' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>")}
.ps-list{list-style:none;margin:0;padding:0;max-height:262px;overflow:auto}
.ps-list li{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:var(--radius);
  cursor:pointer;font-size:13px}
.ps-list li:hover{background:var(--hover)}
.ps-list li b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-list li img,.ps-ph{width:20px;height:20px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;background:var(--hover);
  color:var(--muted2);font-size:11px;font-weight:600}
.ps-at{color:var(--muted2);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-none{color:var(--muted2);cursor:default}
.ps-list li[data-pid=""]{color:var(--muted)}

/* page-area loading overlay (restricted to its positioned host, not the full screen) */
.load-overlay{position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--bg) 62%, transparent);backdrop-filter:blur(2px);
  transition:opacity .18s}
.load-overlay.hide{opacity:0;pointer-events:none}
.lo-box{display:flex;flex-direction:column;align-items:center}   /* bare skeleton, no panel */
/* skeleton feed: ghost message cards shimmer + bob in a wave while news loads */
.lo-feed{display:flex;flex-direction:column;gap:11px;width:224px}
.lo-row{display:flex;gap:9px;align-items:flex-start;
  animation:lobob 1.25s ease-in-out infinite;animation-delay:var(--d)}
.lo-av{width:26px;height:26px;border-radius:50%;flex:0 0 auto}
.lo-lines{flex:1;display:flex;flex-direction:column;gap:6px;padding-top:2px}
.lo-lines i{display:block;height:8px;border-radius:4px}
.lo-av,.lo-lines i{background:linear-gradient(100deg,var(--hover) 30%,
  color-mix(in srgb, var(--accent) 26%, var(--hover)) 46%,var(--hover) 62%);
  background-size:300% 100%;animation:losheen 1.5s linear infinite}
.lo-cap{color:var(--muted);font-size:13px}
@keyframes losheen{from{background-position:110% 0}to{background-position:-190% 0}}
@keyframes lobob{0%,100%{transform:translateY(0);opacity:.65}50%{transform:translateY(-2px);opacity:1}}

/* deferred-apply: appears when a filter changed; pulses until clicked */
.apply-btn{height:30px;padding:0 16px;border-radius:var(--radius);background:var(--accent);color:#fff;
  font-weight:600;animation:applypulse 1.5s ease-in-out infinite}
.apply-btn:hover{background:var(--accent-hover);animation:none}
@keyframes applypulse{0%,100%{box-shadow:0 0 0 0 rgba(64,150,255,.5)}55%{box-shadow:0 0 0 7px rgba(64,150,255,0)}}

/* dedicated date-range picker */
.daterange{position:relative}
.dr-btn{height:30px;padding:0 12px;border-radius:var(--radius);background:var(--panel);
  border:1px solid var(--border);color:var(--fg);font-size:13px;white-space:nowrap}
.dr-btn:hover{border-color:var(--accent-hover)}
.dr-btn.active{border-color:var(--accent);color:var(--accent)}
.dr-pop{position:absolute;top:36px;left:0;z-index:60;width:252px;background:var(--elevated);
  border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:12px}
.dr-pop[hidden]{display:none}
.dr-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:13px;font-weight:600}
.dr-head button{width:26px;height:26px;border-radius:var(--radius);color:var(--muted)}
.dr-head button:hover{background:var(--hover);color:var(--fg)}
.dr-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
.dr-w{font-size:10px;color:var(--muted2);text-align:center;padding:2px 0}
.dr-d{text-align:center;font-size:12px;padding:6px 0;border-radius:4px;cursor:pointer;color:var(--fg);
  font-variant-numeric:tabular-nums}
.dr-d.empty{cursor:default}
.dr-d:not(.empty):hover{background:var(--hover)}
.dr-d.inrange{background:var(--accent-bg);border-radius:0}
.dr-d.sel{background:var(--accent);color:#fff}
.dr-d.sel.start{border-radius:4px 0 0 4px}
.dr-d.sel.end{border-radius:0 4px 4px 0}
.dr-d.sel.start.end{border-radius:4px}
.dr-foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.coll-filters input:focus,.coll-filters select:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg)}
.feed{display:flex;flex-direction:column;gap:8px;max-width:768px;width:100%;margin:0 auto}
/* accordion: one outlined collapsible panel per day */
.acc{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--bg);overflow:hidden}
.acc-head{display:flex;align-items:center;gap:8px;width:100%;padding:11px 14px;background:none;border:0;
  border-bottom:1px solid transparent;cursor:pointer;color:var(--muted2);font-size:11px;
  text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.acc-head:hover{color:var(--fg)}
.acc.open .acc-head{border-bottom-color:var(--border)}
.acc-chev{font-size:10px;transition:transform .15s}
.acc.open .acc-chev{transform:rotate(90deg)}
.acc-count{margin-left:auto;background:var(--hover);color:var(--muted);border-radius:9px;padding:1px 8px;
  font-size:11px;letter-spacing:0;text-transform:none;font-weight:500}
.acc-body{display:none;flex-direction:column;gap:10px;padding:12px 14px}
.acc.open>.acc-body{display:flex}
/* Grouped feed as paper cards: one avatar/header + stacked messages per card */
.msg-group{display:flex;gap:12px;padding:12px 14px;background:var(--panel);min-width:0;
  border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:0 1px 3px rgba(0,0,0,.28)}
.msg-group:hover{border-color:var(--border)}
.ni-av{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none}
/* on the 𝕏 watchlist -> crisp gold ring (pairs with the 👑) so watched authors pop */
.ni-av.watch-av{box-shadow:0 0 0 2px var(--panel),0 0 0 3px #ffb300}
/* author owns a subnet this message is tagged to -> gold ring + glow (highest-trust signal) */
.ni-av.owner-av{box-shadow:0 0 0 2px var(--panel),0 0 0 4px #ffb300,0 0 9px 1px rgba(255,179,0,.55)}
.ni-av[data-pid],.nm-av[data-pid]{cursor:pointer}
.ni-av[data-pid]:hover,.nm-av[data-pid]:hover{box-shadow:0 0 0 2px var(--accent)}
.mg-body{flex:1;min-width:0}
.mg-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  min-height:38px;margin-bottom:4px}   /* header spans the avatar; content starts at its bottom line */
/* source + "caught +Xs" ride the RIGHT edge: the author name is what you scan down the
   feed, so provenance/latency shouldn't push it around as the timestamp width changes */
.mg-headr{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  justify-content:flex-end;text-align:right}
.ni-author{font-weight:600;color:var(--fg);font-size:16px}
/* author owns a subnet this message is tagged to -> gold name + ◆ badge (matches .owner-av ring) */
.owner-name{color:#e8a200;font-weight:800;text-shadow:0 0 10px rgba(255,179,0,.35)}
.owner-badge{color:#ffb300;font-size:.82em;vertical-align:1px;filter:drop-shadow(0 0 4px rgba(255,179,0,.6));
  animation:ownerPulse 2.6s ease-in-out infinite}
@keyframes ownerPulse{0%,100%{opacity:.75}50%{opacity:1}}
.ni-ch{color:var(--muted2);font-size:12px}
.mg-htime{color:var(--muted2);font-size:11px;font-variant-numeric:tabular-nums}
/* message source line: server | #channel | date */
.mg-src,.nm-src{color:var(--muted2);font-size:13px}
.nm-src{margin:1px 0 3px}
.src-sep{opacity:.5;margin:0 1px}
.mg-msg{position:relative;padding:1px 0}
.mg-msg + .mg-msg{margin-top:14px}   /* breathing room between messages inside a burst group */
/* top-right button cluster (#id · ⚑ · ↗ · ✕) — pinned to the ROW's very top-right corner,
   ABOVE the header text line so the (right-aligned) timestamp can run to the edge beneath it.
   Only ✕ shows at rest; #id · ⚑ · ↗ are hidden and revealed on row hover — because the
   cluster sits above the timestamp, the reveal never overlaps it. */
.mg-corner{position:absolute;top:6px;right:8px;z-index:4;display:inline-flex;align-items:center;gap:3px}
.mg-corner .dev-id{position:static;opacity:0}
.mg-corner .mg-link{opacity:0}
.mg-corner .mg-pin{opacity:0}
.sig-row:hover .mg-corner .dev-id,.sig-row:hover .mg-corner .mg-link,
.sig-row:hover .mg-corner .mg-pin{opacity:1}
.sig-row .mg-head{padding-right:6px}     /* timestamp right-aligns to the edge (cluster is above it) */
.mg-time{font-size:10px;color:var(--muted2);opacity:0;transition:opacity .12s;
  font-variant-numeric:tabular-nums}
.mg-msg:hover .mg-time{opacity:1}
/* golden star: manual "this message moved price" mark — hidden until hover, gold when set */
.mg-edit{background:none;border:none;cursor:pointer;font-size:12px;line-height:1;padding:0;
  color:var(--muted2);opacity:0;transition:opacity .12s}
.mg-msg:hover .mg-edit{opacity:.55}
.mg-edit:hover{opacity:1;color:var(--accent);transform:scale(1.12)}
.te-title{margin:0 0 10px;font-size:15px}
.te-row{display:flex;align-items:center;gap:8px;margin-top:12px}
.te-row #te-n{width:110px;height:30px;padding:0 10px;border-radius:var(--radius);
  border:1px solid var(--border);background:transparent;color:var(--fg);font-size:13px}
.te-hint{font-size:12px;margin:10px 0 0}
.mg-star{background:none;border:none;cursor:pointer;font-size:13px;line-height:1;padding:0;
  color:var(--muted2);opacity:0;transition:opacity .12s,color .12s,transform .1s}
.mg-msg:hover .mg-star{opacity:.55}
/* Signal-page pin (⚑): mark a signal -> tracked in the marked strip with live PnL */
.mg-pin{background:none;border:0;padding:0 2px;font-size:12px;color:var(--muted2);cursor:pointer;opacity:0;transition:opacity .15s}
.sig-row:hover .mg-pin{opacity:.55}
.mg-pin:hover{opacity:1 !important}
.mg-pin.on{opacity:1;color:#f5b301}
/* deep-dive 🔍 corner button: hidden until row hover, same cluster as #id · ⚑ · ↗ */
.mg-corner .mg-deep{opacity:0}
.mg-deep{background:none;border:0;padding:0;line-height:1;cursor:pointer;color:var(--muted2);transition:opacity .15s}
.sig-row:hover .mg-corner .mg-deep{opacity:.75}
.mg-deep:hover{opacity:1 !important}
/* hide-signal ✕: rightmost of the top-right cluster, just after #id · ⚑ · ↗ */
/* extra top padding drops the header line lower so there's clear space beneath the
   top-pinned corner cluster (the cluster is absolute, so only the content moves down) */
.sig-row{position:relative;padding-top:33px}
.mg-close{width:18px;height:18px;flex:none;
  display:flex;align-items:center;justify-content:center;border-radius:5px;
  background:none;border:0;padding:0;font-size:11px;line-height:1;
  color:var(--muted2);cursor:pointer;transition:color .12s,background .12s}
.mg-close:hover{color:#fff;background:var(--down)}
/* ── message-corner cluster (⚑ · 🔍 · ↗ · ✕): MUI icon-button style — circular, flat single-colour
   icon, soft round hover fill — site-wide. The feed's opacity hover-reveal is left unchanged. ── */
.mg-corner .mg-pin,.mg-corner .mg-deep,.mg-corner .mg-link,.mg-corner .mg-close{
  width:24px;height:24px;padding:0;border-radius:50%;font-size:12.5px;
  display:inline-flex;align-items:center;justify-content:center;transition:background .15s,color .15s,opacity .15s}
.mg-corner .mg-pin svg,.mg-corner .mg-deep svg,.mg-corner .mg-link svg,.mg-corner .mg-close svg{
  width:16px;height:16px;display:block;fill:currentColor}
.mg-corner .mg-pin:hover,.mg-corner .mg-deep:hover,.mg-corner .mg-link:hover{
  background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--fg)}
.mg-corner .mg-pin:active,.mg-corner .mg-deep:active,.mg-corner .mg-link:active{
  background:color-mix(in srgb,var(--accent) 26%,transparent)}
.mg-corner .mg-pin.on:hover{background:color-mix(in srgb,#f5b301 18%,transparent)}
.mg-corner .mg-close:hover{background:color-mix(in srgb,var(--down) 18%,transparent);color:var(--down)}
/* the whole marking container is framed; it's hidden (marksEl.hidden) when there are no
   marks, so the border only shows while marks exist */
/* frosted-glass marking container: translucent panel + backdrop blur + inner sheen */
/* container frame REMOVED — the marks float directly on the sky; each chip carries its
   own surface (see the Mark-card themes), so the wrapping panel is no longer needed */
.marks-strip{display:flex;flex-direction:row;gap:8px;align-items:flex-start;margin-top:6px;
  min-height:64px;   /* reserve one row from first paint so the sky header doesn't grow when marks load */
  padding:0;border:0;border-radius:0;background:none;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none}
.marks-strip[hidden]{display:flex}   /* keep the reserved height even before JS marks the strip visible */
.mk-chips{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:11px;align-items:stretch;
  padding:5px 9px 1px 0;   /* room for the stacked-chain ghost cards (offset up-right) not to clip */
  scrollbar-width:thin;scrollbar-color:var(--border) transparent}
/* capped to one row + scrolled by capMarkChips() (JS sets max-height/overflow inline).
   Slim floating pill scrollbar with a transparent track, so it blends into the strip bg. */
.mk-chips::-webkit-scrollbar{width:9px}
.mk-chips::-webkit-scrollbar-track{background:transparent}
.mk-chips::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px;
  border:2px solid transparent;background-clip:padding-box}
.mk-chips::-webkit-scrollbar-thumb:hover{background:var(--muted2);background-clip:padding-box}
/* batch-select toolbar — a vertical column beside the chips (keeps the strip's height for the cards) */
.mk-tools{display:flex;flex-direction:column;align-items:center;gap:6px}
.mk-tool{font-size:11px;padding:3px 10px;border:1px solid var(--line);border-radius:8px;
  background:var(--bg);color:var(--fg);cursor:pointer;line-height:1.4}
.mk-tool:hover{border-color:var(--border);background:var(--hover)}
.mk-tool[disabled]{opacity:.4;cursor:default}
.mk-tool-sp{flex:1}
.mk-tool-unmark{color:var(--down,#ef5350);border-color:var(--down,#ef5350);font-weight:600}
/* the manage action button pops a floating GROUP of buttons to its right */
.mk-act{position:relative;display:flex}
.mk-menu{position:absolute;left:calc(100% + 9px);top:50%;transform:translateY(-50%);z-index:30;
  display:flex;flex-direction:column;align-items:center;gap:4px;padding:5px;border-radius:12px;
  background:var(--elevated,var(--panel));border:1px solid var(--border);
  box-shadow:var(--shadow,0 14px 34px rgba(0,0,0,.42));animation:mkMenuIn .13s ease-out}
.mk-menu::before{content:"";position:absolute;right:100%;top:50%;transform:translateY(-50%);
  border:6px solid transparent;border-right-color:var(--border)}
@keyframes mkMenuIn{from{opacity:0;transform:translateY(-50%) translateX(-5px)}to{opacity:1;transform:translateY(-50%) translateX(0)}}
/* pick state: while selecting, chips are pointer + a picked chip gets an accent ring */
.mk-selecting .mark-chip{cursor:pointer}
.mark-chip.sel{outline:2px solid var(--accent,#6c8cff);outline-offset:1px;background:color-mix(in srgb,var(--hover) 85%,transparent)}
/* layout: [avatar / elapsed] column  +  [sn·depth·pnl  /  buy|sell chip] column, ✕ top-right */
.mark-chip{position:relative;display:inline-flex;flex-direction:row;align-items:center;gap:9px;
  font-size:12px;padding:7px 22px 7px 9px;border:1px solid var(--border);border-radius:12px;
  /* frosted glass so the day/night sky shows through — kept dark enough that the light card text
     stays readable over the BRIGHT day sky (a lower opacity washed it out) */
  background:color-mix(in srgb,var(--panel) 80%,transparent);
  backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);
  white-space:nowrap;cursor:pointer}
.mark-chip:hover{border-color:var(--muted);background:color-mix(in srgb,var(--hover) 85%,transparent)}
/* DAY: mark cards flip to a LIGHT GLASS theme so they read as translucent tiles on the bright day
   sky (dark text stays legible, so the fill can be much more see-through than the night design).
   A scoped light palette -> every element inside adapts; a soft shadow + white rim give it depth. */
.sky-day .mark-chip{
  --fg:#17233f;--muted:#46587c;--muted2:#74849f;--panel:#f2f8ff;--line:#c7d5ea;
  --border:rgba(124,164,214,.48);--hover:#eaf3ff;
  color:var(--fg);
  background:color-mix(in srgb,var(--panel) 54%,transparent);
  box-shadow:0 4px 14px rgba(18,38,74,.14)}
.sky-day .mark-chip:hover{border-color:rgba(92,140,206,.78);background:color-mix(in srgb,var(--panel) 66%,transparent)}
/* DAY colour-fit: the internal labels / buttons / borders are tuned for a DARK card, so on the
   light day glass the pill text is light-on-light and the flow pill's white --border/divider
   vanish. Re-point the semantic tokens + pills at day-legible values (layout untouched). */
.sky-day .mark-chip{--up:#0f9d70;--down:#d23b2f;--accent:#2f6fd0}
/* buy/sell flow chip: give it a soft cool-glass fill + cool rim (was a bare outlined box that
   read as a dark-theme control on the light card) */
.sky-day .mark-chip .mk-flow{border-color:rgba(150,182,224,.6);background:rgba(236,244,253,.5)}
.sky-day .mark-chip .mk-sl{background:rgba(150,182,224,.6)}
/* Buy/Sell button: a fresher, lighter green/red so it sits on the pastel card instead of the
   deep dark-theme CTA colour */
.sky-day .mark-chip .mk-flow .sig-trd{background:#17ad80}
.sky-day .mark-chip .mk-flow .sig-trd-s{background:#e24b3e}
/* subnet badges: SOLID pastel chips (a clean light-theme label) + the pool-meter bars re-tinted
   to the matching dark-tier colour — the bars carried bright dark-theme hues (#5aa2ff / #2fd39a …)
   that washed out on the light card, which is what read as "not fitting". */
.sky-day .mark-chip .sub.sn-chip{background:#e3e9f3;color:#41527a}
.sky-day .mark-chip .sn-chip.pt-tiny{background:#fbe1df;color:#bd2f26}
.sky-day .mark-chip .sn-chip.pt-small{background:#f5ead2;color:#835c00}
.sky-day .mark-chip .sn-chip.pt-big{background:#dce9fb;color:#1b58cc}
.sky-day .mark-chip .sn-chip.pt-extreme{background:#d6f0e4;color:#0b7a52}
.sky-day .mark-chip .pt-bars.pt-tiny i.on{background:#bd2f26}
.sky-day .mark-chip .pt-bars.pt-small i.on{background:#835c00}
.sky-day .mark-chip .pt-bars.pt-big i.on{background:#1b58cc}
.sky-day .mark-chip .pt-bars.pt-extreme i.on{background:#0b7a52}
/* shadow (auto) mark: a paper trade the entry gate opened. Still gets a clear base outline so
   every card is distinguishable; the buy-worthy --up HALO is what sets over-threshold apart. */
.mark-chip.mk-auto{border-style:solid;border-color:var(--border)}
.mk-auto-b{font-size:9px;line-height:1;color:var(--accent,#6c8cff);opacity:.85}
/* Buy-worthy mark (Σ ≥ the auto-buy threshold): a refined green HALO — a crisp accent ring, a soft
   outer glow, and a faint inner line — instead of a flat outline. ONLY this state is outlined; every
   other mark keeps the plain base border. Colour tracks --up so it reads the same in light + dark. */
.mark-chip.mk-hot{border-color:color-mix(in srgb,var(--up) 55%,var(--line));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--up) 12%,transparent),
             0 0 0 1px color-mix(in srgb,var(--up) 26%,transparent),
             0 6px 22px -10px color-mix(in srgb,var(--up) 55%,transparent)}
.mark-chip.mk-hot:hover{border-color:color-mix(in srgb,var(--up) 78%,var(--line));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--up) 16%,transparent),
             0 0 0 1px color-mix(in srgb,var(--up) 40%,transparent),
             0 7px 26px -8px color-mix(in srgb,var(--up) 66%,transparent)}
/* ============================================================================
   MARK-CARD BACKGROUND THEMES (Appearance ▸ Mark cards) — 6 selectable surfaces.
   Default (no root class) = FROST (the .mark-chip + .sky-day rules above). Each
   html.mk-<id> class swaps the SURFACE only (background / border / blur / shadow);
   text colour keeps flowing from the day/night palette tokens, so every variant
   reads in both. Border + shadow are scoped :not(.mk-hot) so the buy-worthy green
   HALO always survives on top of whatever surface is chosen. */
/* 02 · SOLID TILE — opaque app panel + crisp hairline; most legible in any weather */
html.mk-solid .mark-chip{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none}
html.mk-solid .mark-chip:not(.mk-hot){border-color:var(--line);box-shadow:0 3px 9px rgba(0,0,0,.38)}
html.mk-solid.sky-day .mark-chip:not(.mk-hot){box-shadow:0 2px 7px rgba(20,40,80,.12)}
/* 03 · SKY-TINTED GLASS — borrows the sky hue: indigo by night, blue wash by day */
html.mk-tint .mark-chip{background:linear-gradient(180deg,rgba(70,92,160,.5),rgba(20,30,66,.5));
  backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px)}
html.mk-tint .mark-chip:not(.mk-hot){border-color:rgba(150,172,255,.22);
  box-shadow:inset 0 1px 0 rgba(180,200,255,.16),0 6px 20px rgba(0,0,0,.34)}
html.mk-tint.sky-day .mark-chip{background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(150,200,240,.34));
  backdrop-filter:blur(13px) saturate(1.5);-webkit-backdrop-filter:blur(13px) saturate(1.5)}
html.mk-tint.sky-day .mark-chip:not(.mk-hot){border-color:rgba(255,255,255,.6);
  box-shadow:0 6px 18px rgba(30,80,140,.2)}
/* 04 · GHOST OUTLINE — barely-there fill + one hairline; sky dominates, text lifted by shadow */
html.mk-ghost .mark-chip{background:rgba(255,255,255,.05);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);text-shadow:0 1px 6px rgba(0,0,0,.5)}
html.mk-ghost .mark-chip:not(.mk-hot){border-color:rgba(200,214,255,.3);
  box-shadow:0 10px 26px -6px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.42)}
html.mk-ghost.sky-day .mark-chip{background:rgba(255,255,255,.16);text-shadow:0 1px 2px rgba(255,255,255,.5)}
html.mk-ghost.sky-day .mark-chip:not(.mk-hot){border-color:rgba(22,42,78,.34);
  box-shadow:0 8px 22px -6px rgba(20,45,90,.38),0 2px 6px rgba(20,45,90,.2)}
/* buy-worthy (over-threshold) card on Ghost — an EDGE BAR: a slim green rail down the left edge,
   the card otherwise identical to its neighbours (same border + float). Clean + deliberate. */
html.mk-ghost .mark-chip.mk-hot{border-color:rgba(200,214,255,.3);padding-left:14px;
  box-shadow:0 10px 26px -6px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.42)}
html.mk-ghost.sky-day .mark-chip.mk-hot{border-color:rgba(22,42,78,.34);
  box-shadow:0 8px 22px -6px rgba(20,45,90,.38),0 2px 6px rgba(20,45,90,.2)}
html.mk-ghost .mark-chip.mk-hot::before{content:"";position:absolute;left:4px;top:8px;bottom:8px;width:3px;
  border-radius:3px;background:var(--up);box-shadow:0 0 10px -1px color-mix(in srgb,var(--up) 65%,transparent)}
/* 05 · ELEVATED PAPER — opaque, borderless, floats on a soft drop shadow (Material) */
html.mk-paper .mark-chip{background:color-mix(in srgb,var(--panel) 88%,#fff 12%);
  backdrop-filter:none;-webkit-backdrop-filter:none}
html.mk-paper .mark-chip:not(.mk-hot){border-color:transparent;
  box-shadow:0 12px 30px -8px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.4)}
html.mk-paper.sky-day .mark-chip{background:#ffffff}
html.mk-paper.sky-day .mark-chip:not(.mk-hot){border-color:transparent;
  box-shadow:0 8px 24px -6px rgba(20,45,90,.3),0 2px 6px rgba(20,45,90,.16)}
/* 06 · GRADIENT SHEEN — top-lit glass: a bright light-side edge fading down */
html.mk-sheen .mark-chip{background:linear-gradient(180deg,rgba(42,54,96,.84),rgba(15,23,48,.84));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
html.mk-sheen .mark-chip:not(.mk-hot){border-color:rgba(255,255,255,.08);
  border-top-color:rgba(190,205,255,.26);box-shadow:0 9px 24px rgba(0,0,0,.4)}
html.mk-sheen.sky-day .mark-chip{background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(214,234,251,.42))}
html.mk-sheen.sky-day .mark-chip:not(.mk-hot){border-color:rgba(255,255,255,.6);
  border-top-color:rgba(255,255,255,.9);box-shadow:0 5px 16px rgba(18,38,74,.18)}
.mk-side{display:flex;flex-direction:column;align-items:center;gap:3px;flex:none}
.mk-side .mk-ago{font-size:10px;color:var(--muted2);text-align:center}
/* one column PER SUBNET (pnl on top, its own flow below), divided so groups don't blur together */
.mk-main{display:flex;flex-direction:row;align-items:stretch;flex-wrap:wrap;gap:8px 0;min-width:0}
/* entry-score mini-scorecard: one row PER AXIS (fresh / pnl / auth) + their sum; a failing axis is red */
.mk-score{align-self:center;flex:none;margin-right:9px;display:flex;flex-direction:column;gap:1px;
  padding:3px 8px;border-radius:8px;font-size:9.5px;font-weight:600;font-variant-numeric:tabular-nums;
  line-height:1.4;background:var(--panel);border:1px solid var(--line);min-width:74px}
.mk-ax{display:flex;justify-content:space-between;gap:10px;color:var(--muted)}
/* the breakdown inside the chart's news dialog: inline block under the meta rows */
.nm-score{align-self:flex-start;margin:6px 0 2px}
.mk-ax i{font-style:normal}
.mk-ax i em{font-style:normal;font-weight:600;color:var(--muted2);margin-left:3px}   /* the RAW input */
.mk-ax b{font-weight:700;color:var(--fg)}
.mk-ax-fail,.mk-ax-fail b,.mk-ax-fail i em{color:var(--down)}
/* Σ (small) + value (11px) differ in size, so pin their cross-axis alignment or they read as
   mis-levelled. line-height:1 tightens each glyph box; baseline sits them on the same line. */
.mk-ax-tot{margin-top:1px;padding-top:2px;border-top:1px solid var(--line);align-items:baseline;line-height:1}
.mk-ax-tot i{color:var(--muted);line-height:1}
.mk-ax-tot b{font-weight:800;font-size:11px;color:var(--accent);line-height:1}
.mk-score-fail{border-color:rgba(239,83,80,.4)}
/* EASY SCORE mode (header Σ toggle): show ONLY the total on every breakdown panel — marked strip
   AND feed rows — so a tall 6-axis stack collapses to one line. CSS-only: no re-render needed. */
html.easy-score .mk-ax:not(.mk-ax-tot){display:none}                  /* hide every axis but the total */
html.easy-score .mk-ax-tot{margin-top:0;padding-top:0;border-top:0;justify-content:center;gap:3px}  /* lone Σ: no divider, packed */
html.easy-score .mk-score{justify-content:center;min-width:0}         /* was min-width:74px — collapse it */
/* FEED left column: strip the score PILL so the lone Σ is no wider than the avatar, making a TAGGED
   row's left gap before the content match an UNTAGGED one. Feed-only (.sig-score) — the marked strip
   keeps its pill (its layout is horizontal, so a compact pill there misaligns nothing). */
html.easy-score .sig-score{align-self:center;margin-right:0;padding:0;border:0;background:none}
/* SIMPLE-mode auto-marked card: the Σ total moves into the LEFT column as a compact chip, while the
   ◆ auto-pointer and the main-area breakdown are hidden — a tighter form. Full mode: chip hidden, ◆
   + breakdown return. Marked strip only (.mark-chip); the feed column is untouched. */
.mk-side-tot{display:none;align-items:baseline;gap:3px;font-size:11px;font-weight:800;line-height:1;
  white-space:nowrap;font-variant-numeric:tabular-nums;padding:2px 6px;border-radius:6px;
  color:var(--accent);background:var(--panel);border:1px solid var(--line)}
.mk-side-tot i{font-style:normal;color:var(--muted);font-size:9.5px}
.mk-side-tot.tot-buy{color:var(--up);border-color:rgba(38,166,154,.45)}
.mk-side-tot.tot-fail{color:var(--down);border-color:rgba(239,83,80,.45)}
html.easy-score .mark-chip .mk-auto-b{display:none}          /* drop the ◆ auto pointer */
html.easy-score .mark-chip .mk-score{display:none}           /* drop the main-area breakdown */
html.easy-score .mark-chip .mk-side-tot{display:inline-flex} /* show the compact Σ in its place */
.mk-score-fail .mk-ax-tot b{color:var(--down)}
/* Σ turns green when the total meets the auto-buy threshold (would buy at mark time) — wins over
   the fail-red above, since auto-buy keys off the total, not the per-axis gate. */
.mk-ax-tot.mk-tot-buy b{color:var(--up)}
/* per-subnet group: row 1 = sn + pnl, row 2 = ONE chip [ ▲buy | ▼sell | Buy/Sell ] */
.mk-sub{display:flex;flex-direction:column;gap:5px;justify-content:center;padding:0 11px}
.mk-sub:first-child{padding-left:0}
.mk-sub + .mk-sub{border-left:1px solid var(--line)}
/* marked-signal dialog (click a flag chip) */
.mkd-head{display:flex;align-items:center;gap:10px;margin:10px 0 12px}
.mkd-timing{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:12px;color:var(--muted2);margin:-4px 0 12px}
.mkd-timing b{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums}
.mkd-posted{color:var(--muted2)}
.mkd-av{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none}
.mkd-who{display:flex;flex-direction:column;gap:2px;font-size:13px;min-width:0}
/* render the click-through message like the FEED row: clean flowing text (renderText emits <br>,
   so NO pre-wrap), no boxed panel — just a hairline separating it from the header, like the feed. */
.mkd-text{font-size:14px;line-height:1.7;word-break:break-word;color:var(--fg);
  margin-top:6px;padding-top:12px;border-top:1px solid var(--line)}
/* mark dialog: caught / auto-mark / first-react delay chips — right-aligned on their own line
   in the header's right cluster, next to the corner toolbar */
.mkd-delays{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;flex-basis:100%;margin:3px 0 0}
.mkd-delay{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:2px 9px;border-radius:999px;
  background:color-mix(in srgb,var(--fg) 7%,transparent);color:var(--muted2);font-variant-numeric:tabular-nums;line-height:1.5}
.mkd-delay i{font-style:normal}
.mkd-delay b{color:var(--fg);font-weight:700}
.mkd-text .mg-txt{display:block;white-space:normal}
/* the click-through dialog renders the message as a VERBATIM feed row (renderRow) so it matches
   the feed byte-for-byte. Widen the modal so the multi-subnet mv-grid fits, and let the row own
   its card (drop the feed's bottom margin). */
.modal-box.mkd-box{width:min(640px,94vw)}
.mkd-feedrow{margin-top:12px}
.mkd-feedrow .msg-group{margin:0}
.mkd-feedrow .sig-row{margin-bottom:0}
.mkd-feedrow .mv-grid-trd{overflow-x:auto}
.mkd-loading{padding:28px;text-align:center}
.mkd-pnl{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.mk-row{display:flex;align-items:center;gap:6px}
.mk-row .spacer{flex:1;min-width:6px}
.mk-flowrow{margin-top:1px}
.mk-av{width:28px;height:28px;border-radius:50%;flex:none;object-fit:cover}
/* subnet + PnL as a plain label: "snXX" stays foreground-white, only the % is colored */
.mk-pnl{display:inline-flex;align-items:center;gap:5px;font-weight:700;color:var(--fg);
  text-decoration:none;font-variant-numeric:tabular-nums;font-size:12px}   /* row 1 a touch larger */
.mk-pnl.up .mk-pct{color:var(--up)}
.mk-pnl.down .mk-pct{color:var(--down)}
.mk-pnl:hover .mk-pct{text-decoration:underline;text-underline-offset:2px}
.mk-pnl:hover .sn-chip{filter:brightness(1.15)}   /* the pill brightens instead of underlining */
/* per-subnet untag ×: always visible but dim; red on hover */
.mk-untag{border:0;background:none;color:inherit;opacity:0;pointer-events:none;cursor:pointer;
  font-size:12px;line-height:1;padding:0 1px;margin-left:-1px;transition:opacity .15s}
.mark-chip:hover .mk-untag{opacity:.7;pointer-events:auto}
.mk-untag:hover{opacity:1;color:var(--down)}
.mk-rchain{border:0;background:none;color:var(--accent);opacity:.7;cursor:pointer;
  font-size:11px;line-height:1;padding:0 2px;margin-left:1px;font-variant-numeric:tabular-nums}
.mk-rchain:hover{opacity:1;text-decoration:underline}
/* chain-reaction badge on a mark's side — a clear ⛓count indicator (read-only) */
.mk-chain{display:inline-flex;align-items:center;gap:1px;font-size:10px;font-weight:800;line-height:1.5;
  color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:6px;padding:0 5px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* stacked pile-on: a chained mark shows accent-tinted ghost cards offset behind it,
   so an accumulating chain literally looks piled-on. Offset up-right (classic stack). */
/* !important so the stack wins over the higher-specificity card-style rules
   (html.mk-ghost .mark-chip.mk-hot etc.); a float shadow keeps the card elevated. */
.mark-chip.mk-chained{box-shadow:
  4px -4px 0 -1px color-mix(in srgb,var(--accent) 45%,var(--panel)),
  8px -8px 0 -2px color-mix(in srgb,var(--accent) 26%,var(--panel)),
  0 10px 26px -6px rgba(0,0,0,.5) !important}
/* DAY theme: --panel is near-white, so the ghost cards need a stronger accent tint to be seen. */
.sky-day .mark-chip.mk-chained{box-shadow:
  4px -4px 0 -1px color-mix(in srgb,var(--accent) 58%,#eaf1fb),
  8px -8px 0 -2px color-mix(in srgb,var(--accent) 36%,#eaf1fb),
  0 8px 22px -6px rgba(20,45,90,.38) !important}
.mk-pnl.mk-none{color:var(--muted2);font-weight:400}
/* chain-react HISTORY: the earlier posts that piled onto this subnet, as an OVERLAPPING card deck
   — newest in front ("on top"), oldest tucked behind. Display-only; click a card opens that post. */
.mk-hist{display:inline-flex;align-items:center;margin-left:8px;padding-left:8px;
  border-left:1px dashed var(--line)}
.mk-hist-lab{font-size:10px;font-weight:800;color:#f5b301;letter-spacing:.02em;
  white-space:nowrap;margin-right:4px;font-variant-numeric:tabular-nums}
.mk-hcard{position:relative;border:0;padding:0;background:none;cursor:pointer;flex:none;
  line-height:0;margin-left:-9px;transition:transform .1s}
.mk-hcard:first-of-type{margin-left:0}                 /* newest = leftmost, on top, no overlap */
.mk-hav{width:22px;height:22px;border-radius:50%;object-fit:cover;display:block;
  border:1.5px solid var(--bg,#0d0f14);box-shadow:0 0 0 1px var(--line)}
.mk-hcard:hover{transform:translateY(-2px);z-index:99!important}
.mk-hcard:hover .mk-hav{box-shadow:0 0 0 1px #f5b301,0 2px 6px rgba(0,0,0,.45)}
.mk-hage{display:none}                                 /* age lives in the card tooltip, deck stays compact */
/* per-subnet chain-react badge strip (Signal page) — click a badge to clear that subnet's chain */
.chain-badges{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.chain-lab{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.02em;margin-right:2px;white-space:nowrap}
.chain-badge{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:11px;font:inherit;
  font-size:12px;font-weight:700;cursor:pointer;color:var(--fg);border:1px solid var(--line);
  background:var(--elevated);transition:background .12s,border-color .12s,box-shadow .12s}
.chain-badge b{color:#f5b301;font-weight:800;font-variant-numeric:tabular-nums}
.chain-badge:hover{border-color:#f5b301;background:rgba(245,179,1,.12);box-shadow:0 0 0 1px rgba(245,179,1,.35)}
.mark-chip .mk-ago{color:var(--muted2)}
/* whale flow: buys (green) + sells (red) joined in ONE rounded chip, split by a divider */
/* row-2 chip: buy / sell (slash, NO vertical dividers) + a PRIMARY Buy/Sell button */
.mk-flow{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--border);border-radius:999px;
  padding:1px 3px 1px 9px;font-size:10px;font-weight:700;font-variant-numeric:tabular-nums;flex:none;
  align-self:stretch}   /* span the group width so the trade button can sit at the right edge */
.mk-fl{border:none;background:transparent;padding:0;font:inherit;cursor:pointer;line-height:1.7}
.mk-flow .fl-up{color:var(--up)}
.mk-flow .fl-dn{color:var(--down)}
.mk-flow .fl-zero{color:var(--muted2);font-weight:500}   /* no whale flow -> recede */
.mk-fl[data-flow]:hover{filter:brightness(1.35)}
/* buy | sell divider — full height of the pill (stretch + eat the 1px vertical padding) */
.mk-sl{width:1px;align-self:stretch;margin-block:-1px;background:var(--border);flex:none}
.mk-flow .sig-trd{border:none;border-radius:999px;margin-left:auto;height:auto;
  padding:2px 12px;font:inherit;font-weight:700;font-size:10px;cursor:pointer;
  background:color-mix(in srgb,var(--up) 62%,#0a1020);color:#fff}   /* muted, not the vivid raw --up */
.mk-flow .sig-trd-s{background:color-mix(in srgb,var(--down) 66%,#0a1020);color:#fff}   /* Sell (holding) — muted red */
.mk-flow .sig-trd-off{opacity:.5}
.mk-flow .sig-trd:hover{filter:brightness(1.12)}
/* flag-chip flow dialog: buys LEFT, sells RIGHT — each column oldest-first */
.flowsplit{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;align-items:start;
  max-height:60vh;overflow-y:auto;margin:8px 0;position:relative}
.fl-links{position:absolute;inset:0 auto auto 0;pointer-events:none}
.fl-links path{fill:none;stroke-width:1.5;opacity:.65}
.flowcol{display:flex;flex-direction:column;gap:2px;min-width:0}
.flowcol-h{font-size:12px;font-weight:700;padding:2px 6px 6px;position:sticky;top:0;background:var(--panel)}
.flowcol-h.up{color:var(--up)}.flowcol-h.down{color:var(--down)}
.flowlist{position:relative;padding-left:20px}       /* left gutter for the trace arcs */
.fl-row{display:grid;grid-template-columns:96px 78px 1fr minmax(22px,auto);gap:8px;
  align-items:center;padding:3px 6px;border-radius:6px;font-size:13px;font-variant-numeric:tabular-nums;
  cursor:pointer}
.fl-blk{display:flex;align-items:center;gap:8px;margin:2px 6px;
  font-size:10px;color:var(--muted2);font-variant-numeric:tabular-nums}
.fl-blk::after{content:"";flex:1;border-top:1px solid var(--line)}
.fl-blk:first-child{margin-top:0}
.fl-row.fl-sel{background:var(--hover)}
.flowlist.has-sel .fl-row:not(.fl-sel){opacity:.3}
.fl-links{position:absolute;left:0;top:0;pointer-events:none}
.fl-links path{fill:none;stroke-width:1.5;opacity:.85}
.fl-px{font-size:11px;color:var(--muted);text-align:right}
/* time-density gap label on a block divider after a quiet stretch */
.fl-gaplab{font-style:normal;font-size:10px;color:#f5b301;white-space:nowrap}
/* per-signal quick trade (hands off to the nav toolbox) — FILLED, toolbox-style */
.sig-trd{height:20px;padding:0 10px;margin-left:4px;border-radius:var(--radius);
  font-size:11px;font-weight:700;cursor:pointer;border:0;color:#fff}
.mv-trd .sig-trd{width:100%;margin:0;padding:0;height:18px;font-size:10px}
/* blocked because another subnet is held — dimmed but still clickable, so the click can
   toast the reason (see tradeBtnFor) */
.sig-trd-off{opacity:.38;filter:grayscale(.6)}
.sig-trd-b{background:color-mix(in srgb,var(--up) 62%,#0a1020)}          /* muted to match the cards, not the vivid raw token */
.sig-trd-s{background:color-mix(in srgb,var(--down) 66%,#0a1020)}
.sig-trd-swap{background:color-mix(in srgb,var(--accent) 62%,#0a1020)}   /* direct swap into this subnet (a different one is held) */
.mk-flow .sig-trd-swap{background:color-mix(in srgb,var(--accent) 62%,#0a1020);color:#fff}
.sig-trd:hover{filter:brightness(1.12)}
.sig-trd-off:hover{filter:grayscale(.6)}
.fl-mark .tx-nick{max-width:64px;font-size:10px}
.fl-mark{background:none;border:0;color:var(--muted2);cursor:pointer;font-size:13px;opacity:.45}
.fl-mark:hover{opacity:1}
.fl-mark.on{color:#f5b301;opacity:1}
/* ⚑-marked coldkey in the transaction scanner */
.tx-flag{color:#f5b301;font-size:10px;margin-right:1px;display:inline-flex;align-items:center;gap:2px}
.tx-nick{font-size:18px;font-weight:600;line-height:1;max-width:22px;overflow:visible;white-space:nowrap}
.tx-mark{background:none;border:0;padding:0;width:100%;min-width:0;font-size:10px;line-height:1;
  color:var(--muted2);cursor:pointer;opacity:0;transition:opacity .15s;
  display:inline-flex;align-items:center;gap:2px;justify-content:flex-start}
.tx-chip:hover .tx-mark{opacity:.6}
.tx-mark:hover{opacity:1 !important}
.tx-mark.on{opacity:1;color:#f5b301}
.fl-row:hover{background:var(--hover)}
.fl-row .up{color:var(--up)}.fl-row .down{color:var(--down)}
.fl-ck{cursor:pointer;background:var(--bg);padding:1px 6px;border-radius:4px}
.fl-ck:hover{color:var(--accent)}
/* OUR own fills, interleaved into the whale flow — highlighted so entries/exits stand out */
.fl-row.fl-mine{background:rgba(64,150,255,.10);box-shadow:inset 3px 0 0 var(--accent);cursor:default}
.fl-row.fl-mine:hover{background:rgba(64,150,255,.17)}
.fl-you{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
  letter-spacing:.04em;color:var(--accent)}
.fl-you-w{color:var(--muted);font-weight:600;letter-spacing:0}
.fl-pnl{font-size:11px;text-align:right;font-variant-numeric:tabular-nums}
/* auto-buy ban list dialog (right-click the 💰 toggle) */
.mkd-note{font-size:12.5px;line-height:1.5;margin:6px 0 14px}
.ban-add{display:flex;gap:8px;margin-bottom:12px}
.ban-add input{width:120px;padding:6px 10px;border:1px solid var(--line);border-radius:6px;
  background:var(--bg);color:var(--fg);font-size:13px;font-variant-numeric:tabular-nums}
.ban-list{display:flex;flex-wrap:wrap;gap:8px;min-height:26px}
.ban-chip{display:inline-flex;align-items:center;gap:2px;background:var(--panel);
  border:1px solid var(--line);border-radius:6px;padding:3px 4px 3px 10px;font-size:13px;
  font-variant-numeric:tabular-nums}
.ban-x{background:none;border:0;color:var(--muted2);cursor:pointer;font-size:15px;line-height:1;padding:0 4px}
.ban-x:hover{color:var(--down)}
/* whale wallets dialog (click a ▲/▼ chart marker → coldkeys that moved in that bar) */
.wd-list{display:flex;flex-direction:column;gap:5px;max-height:58vh;overflow-y:auto;margin-top:10px}
.wd-row{display:grid;grid-template-columns:92px 1fr auto;gap:10px;align-items:center;
  padding:6px 8px;border-radius:6px;font-size:13px;font-variant-numeric:tabular-nums}
.wd-row:hover{background:var(--hover)}
.wd-tao{font-weight:700}.wd-tao.up{color:var(--up)}.wd-tao.down{color:var(--down)}
.wd-ck{cursor:pointer;background:var(--bg);padding:2px 8px;border-radius:5px;font-size:12px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wd-ck:hover{color:var(--accent)}
.wd-mark{background:none;border:1px solid var(--line);border-radius:6px;color:var(--muted2);
  cursor:pointer;font-size:12px;padding:3px 9px;min-width:30px}
.wd-mark:hover{color:var(--fg);border-color:var(--muted2)}
.wd-mark.on{color:#f5b301;border-color:rgba(245,179,1,.5)}
/* ROLE GATE: non-admins keep read-only access — hide every write control (toggles, trackers,
   settings, watchlist editing, manual trade toolbox). Backend still enforces (403), this is
   only to declutter the UI. <html> gets .not-admin from the shared nav script. */
html.not-admin .ctrl-box,
html.not-admin #notif-btn,
html.not-admin #automark-btn,
html.not-admin #autobuy-btn,
html.not-admin #autobuy-bans,
html.not-admin #autosell-btn,
html.not-admin .mk-rchain,
html.not-admin .sig-trkbtn,
html.not-admin .sig-cog,
html.not-admin #wl-open,
html.not-admin #dw-open,
html.not-admin #dc-tokens,
html.not-admin .sig-trd,
html.not-admin .dl-vid,
html.not-admin #marks-strip,
html.not-admin #chain-badges,
html.not-admin .mk-score,
html.not-admin .tradebar{display:none !important}
/* the ban-list OPENER button (not a toggle) — always full-strength, never the dim off-state */
.tgl-ico.ab-bans{filter:none;opacity:.85}
.tgl-ico.ab-bans:hover{opacity:1}
.sig-txnet{width:44px;margin-left:auto}
.sig-txmk.on{color:#f5b301;border-color:#f5b301}
.sig-fwatch{padding:0 8px}
.sig-fwatch.on{color:#f5b301;border-color:#f5b301}
/* "advertise only" filter — green when active, matching the AD video badge */
.sig-fads{padding:0 8px;font-size:11px;font-weight:800;letter-spacing:.04em}
.sig-fads.on{color:var(--up);border-color:var(--up)}
/* ⚡ buy-cluster banner above the tx ticker */
.tx-clusters{display:flex;flex-direction:column;gap:3px;padding:5px 8px;
  border-bottom:1px solid var(--line)}
/* recent subnet lifecycle actions — independent card below the transaction scanner.
   The middle grid cell stacks two cards: the tx ticker (flexible) over this one. */
.sig-midstack{min-width:0;min-height:0;display:flex;flex-direction:column;gap:14px}
.sig-midstack .sig-txcol{flex:1;min-height:0}
.lc-card{flex-shrink:0;overflow:hidden}   /* sizes to content — the feed is capped at 8 rows */
.lc-card[hidden]{display:none}   /* .sig-col's display:flex would override [hidden] */
.lc-card.closed{max-height:none}
.lc-head{display:flex;align-items:center;gap:6px;font-size:12px;padding:8px 11px;
  cursor:pointer;user-select:none;color:var(--muted)}
.lc-panel:not(.closed) .lc-head{border-bottom:1px solid var(--line)}
.lc-head b{color:var(--fg)}
.lc-head:hover{background:rgba(255,255,255,.03)}
.lc-chev{transition:transform .15s}
.lc-panel.closed .lc-chev{transform:rotate(-90deg)}
.lc-panel.closed .lc-rows{display:none}
.lc-rows{flex:1;min-height:0;display:flex;flex-direction:column;gap:3px;
  padding:6px 8px 8px;overflow-y:auto;
  max-height:146px}   /* viewport ≈ 5 rows (24px + 3px gap each) — the rest scrolls */
/* fixed grid lanes (icon | sn | src | what | when) mirroring the tx scanner's .tx-chip,
   incl. its colored left accent — rows line up column-for-column */
.lc-row{display:grid;grid-template-columns:16px 42px minmax(0,1fr) max-content;
  align-items:center;gap:6px;font-size:12px;padding:3px 8px;border-radius:6px;
  line-height:1.5;background:var(--panel);cursor:pointer}   /* click -> description dialog */
.lc-row:hover{background:rgba(255,255,255,.05)}
/* on-chain action description dialog */
.lcd-body{display:flex;flex-direction:column;gap:7px;margin:12px 0 4px}
.lcd-line{display:flex;gap:10px;font-size:13px;align-items:baseline}
.lcd-k{flex:none;width:52px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted2);padding-top:1px}
.lcd-v{color:var(--fg);word-break:break-word;min-width:0}
.lcd-v .mono,.lcd-body .mono{font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-variant-numeric:tabular-nums}
.lcd-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.lcd-link{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 12px;border-radius:8px;
  border:1px solid var(--border);background:var(--panel);color:var(--accent);font-size:12.5px;font-weight:600;text-decoration:none}
.lcd-link:hover{border-color:var(--accent);background:var(--accent-bg)}
.lc-row .lc-ic{display:inline-flex;align-items:center;justify-content:center}
/* MUI one-color lifecycle icons — same tints as the daily-news edition */
.lc-i{width:15px;height:15px;fill:currentColor;color:var(--muted2);display:block}
.lc-i.up{color:var(--up)}
.lc-i.dn{color:var(--down)}
.lc-i.n{color:var(--accent)}
.lc-i.w{color:var(--warn,#c77d0a)}
.mb-name .lc-i{display:inline-block;vertical-align:-2px;margin-right:5px}
.lc-row .lc-sn{font-weight:700;color:var(--fg);cursor:pointer;white-space:nowrap}
.lc-row .lc-sn:hover{text-decoration:underline}
.lc-row .lc-what{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
/* overflow -> floating text ON HOVER: at rest the line ellipsizes; hovering the row
   slides the inner span back and forth so the whole line is readable (restarts from
   the left on every hover; ~1.2s holds at each end via the keyframe plateaus) */
.lc-row .lc-txt{display:inline-block;white-space:nowrap}
.lc-row:hover .lc-what.lc-float{text-overflow:clip}
.lc-row:hover .lc-what.lc-float .lc-txt{animation:lc-slide var(--lc-dur,9s) linear infinite alternate}
@keyframes lc-slide{0%,12%{transform:translateX(0)}88%,100%{transform:translateX(var(--lc-shift,-40px))}}
@media (prefers-reduced-motion: reduce){ .lc-row:hover .lc-what.lc-float .lc-txt{animation:none} }
.lc-row .lc-when{color:var(--muted);font-size:11px;white-space:nowrap;text-align:right}
.lc-row.lc-good .lc-what{color:var(--up)}
.lc-row.lc-bad .lc-what{color:var(--down)}
.cl-row{display:flex;align-items:center;gap:4px;font-size:12px;padding:4px 8px;
  border-radius:6px;border:1px solid rgba(245,179,1,.45);background:rgba(245,179,1,.08)}
.cl-row:hover{background:rgba(245,179,1,.16)}
.cl-row.cl-sell{border-color:rgba(224,87,79,.5);background:rgba(224,87,79,.08)}
.cl-row.cl-sell:hover{background:rgba(224,87,79,.16)}
.cl-row.cl-sell .cl-main b{color:var(--down)}
/* cluster jump: the cluster's block range outlined in the tx panel, flash then steady */
.tx-chip.tx-hl{outline:1px solid #f5b301;outline-offset:-1px;background:rgba(245,179,1,.09);
  animation:txhl-in .6s ease}
@keyframes txhl-in{from{background:rgba(245,179,1,.38);outline-color:#ffe08a}
  to{background:rgba(245,179,1,.09)}}
/* dead-token state: the LIVE dot goes red — running loop, failing auth */
.sig-col.token-dead .sig-live{color:var(--down)}
.sig-col.token-dead .sig-dot{background:var(--down);animation:none}
.sig-col.token-dead.is-live{border-color:var(--down)}   /* dead token must NOT read as a healthy green glow */
/* ET clock + 12s block ring in the Signal top bar */
.sig-clock{position:relative;display:inline-flex;align-items:center;gap:8px;font-size:21px;font-weight:600;
  color:var(--fg);font-variant-numeric:tabular-nums;padding-bottom:6px}
/* gradient underline under the 1st (clock) row — fades out at both ends */
.sig-clock::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--accent) 30%,#8be0ff 50%,var(--accent) 70%,transparent);
  box-shadow:0 0 6px rgba(107,166,255,.45)}
/* one-letter day-of-week chip: visually distinct from the digits; weekend days amber */
.sig-dow{font-style:normal;font-weight:800;font-size:15px;line-height:1;margin-right:7px;
  padding:3px 7px;border-radius:6px;color:var(--accent);background:var(--accent-bg)}
.sig-dow.wknd{color:#f5b301;background:rgba(245,179,1,.16)}
/* block dial: 12 ticks (one per second of the 12s block) filling clockwise; the live
   tick glows, and lit ticks heat amber in the last two seconds before the block seals */
.blk-tick{stroke:var(--line);stroke-width:2.6;stroke-linecap:round;transition:stroke .18s}
.blk-tick.on{stroke:var(--accent)}
.blk-tick.cur{filter:drop-shadow(0 0 3px var(--accent))}
.blk-tick.on.late{stroke:#f5b301}
.blk-tick.cur.late{filter:drop-shadow(0 0 3px #f5b301)}
.sig-clock .trk-ring{display:inline-flex}
.cl-main{flex:1;min-width:0;display:flex;align-items:center;gap:7px;text-decoration:none;
  color:var(--fg);white-space:nowrap;overflow:hidden}
.cl-ic{font-style:normal;font-size:14px}
.cl-sn{font-size:14px;font-weight:800;color:#f5b301}
.cl-row.cl-sell .cl-sn{color:var(--down)}
.cl-cnt{padding:1px 7px;border-radius:999px;border:1px solid;font-size:11px;font-weight:800}
.cl-cnt.up{color:var(--up);border-color:rgba(38,166,154,.4);background:rgba(38,166,154,.12)}
.cl-cnt.dn{color:var(--down);border-color:rgba(224,87,79,.4);background:rgba(224,87,79,.12)}
.cl-tao{font-size:13px;font-weight:800;color:var(--fg)}
.cl-meta{color:var(--muted2);font-size:11px}
/* fresh (<2min) alerts breathe until they cool off */
@keyframes clpulse{0%,100%{box-shadow:0 0 0 0 rgba(245,179,1,0)}50%{box-shadow:0 0 12px 1px rgba(245,179,1,.45)}}
.cl-row.cl-fresh{animation:clpulse 1.6s ease-in-out infinite}
@keyframes clpulse-red{0%,100%{box-shadow:0 0 0 0 rgba(224,87,79,0)}50%{box-shadow:0 0 12px 1px rgba(224,87,79,.5)}}
.cl-row.cl-sell.cl-fresh{animation:clpulse-red 1.6s ease-in-out infinite}
.cl-x,.cl-mk{background:none;border:0;padding:0 2px;color:var(--muted2);cursor:pointer;
  font-size:11px;opacity:0;transition:opacity .15s;flex:none}
.cl-row:hover .cl-x,.cl-row:hover .cl-mk{opacity:.6}
.cl-x:hover{opacity:1;color:var(--down)}
.cl-mk:hover{opacity:1}
.cl-mk.on{opacity:1;color:#f5b301}
/* trend assistor — the CHART's bottom-left, stacked above the timezone chip (a fixed
   viewport corner sat invisible on top of the whale panel) */
.trend-btn{position:absolute;left:50px;bottom:34px;z-index:6;width:34px;height:34px;
  border-radius:50%;border:0;cursor:pointer;font-size:16px;line-height:1;color:#fff;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#34d399 0%,#f0b90b 55%,#f97316 100%);
  box-shadow:0 3px 12px rgba(240,185,11,.45),0 0 0 0 rgba(240,185,11,.55);
  animation:trendPulse 2.4s ease-in-out infinite;
  transition:transform .16s ease,box-shadow .2s ease,filter .16s ease}
.trend-btn:hover{transform:scale(1.14) translateY(-1px);filter:brightness(1.08);
  box-shadow:0 6px 20px rgba(240,185,11,.6),0 0 0 4px rgba(240,185,11,.2);animation:none}
.trend-btn:active{transform:scale(1.04)}
@keyframes trendPulse{
  0%,100%{box-shadow:0 3px 12px rgba(240,185,11,.45),0 0 0 0 rgba(240,185,11,.55)}
  50%{box-shadow:0 3px 14px rgba(240,185,11,.5),0 0 0 8px rgba(240,185,11,0)}}
@media (prefers-reduced-motion:reduce){.trend-btn{animation:none}}
/* "new top gainer" badge — a pulsing red dot on the 📈 button until it's opened */
.trend-btn.trend-alert::after{content:"";position:absolute;top:-1px;right:-1px;width:12px;height:12px;
  border-radius:50%;background:#ef4444;border:2px solid var(--bg);
  box-shadow:0 0 0 0 rgba(239,68,68,.65);animation:trendBadge 1.3s ease-in-out infinite}
@keyframes trendBadge{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.65)}50%{box-shadow:0 0 0 6px rgba(239,68,68,0)}}
.trend-btn-fixed{position:fixed;left:14px;bottom:14px;z-index:40;width:40px;height:40px;font-size:18px}
/* persistent on-site "new top gainer" alert banner (bottom-LEFT, above the 📈 button) */
.trend-alert-bar{position:fixed;left:14px;bottom:62px;z-index:41;max-width:340px;
  display:none;align-items:flex-start;gap:9px;padding:11px 12px;cursor:pointer;
  border-radius:12px;color:var(--fg);border:1px solid rgba(240,185,11,.5);
  background:var(--elevated);box-shadow:0 8px 26px rgba(0,0,0,.4),0 0 0 3px rgba(240,185,11,.12);
  animation:trendBarIn .28s ease}
.trend-alert-bar.show{display:flex}
.trend-alert-bar .tab-ic{font-size:18px;line-height:1.2}
.trend-alert-bar .tab-txt{display:flex;flex-direction:column;gap:3px;font-size:12.5px}
.trend-alert-bar .tab-txt>b{font-size:12px;color:#f0b90b;letter-spacing:.02em}
.trend-alert-bar .tab-row{display:flex;align-items:center;gap:6px;white-space:nowrap}
.trend-alert-bar .tab-row i{font-style:normal;color:var(--muted2);font-size:11px;
  min-width:26px;text-align:right}
.trend-alert-bar .tab-x{position:absolute;top:4px;right:5px;width:18px;height:18px;border:0;
  background:none;color:var(--muted2);cursor:pointer;font-size:11px;line-height:1;border-radius:5px}
.trend-alert-bar .tab-x:hover{color:#fff;background:var(--down)}
@keyframes trendBarIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* EMISSION assistor ⚡ — sibling of the trend 📈 (chart bottom-left), one slot to its right,
   with a blue accent to distinguish it from the gold trend. Reuses the trend-btn / alert-bar
   layout; only position + accent colour differ. */
.trend-btn.emis-btn{left:88px}
.trend-btn.emis-btn.emis-alert::after{content:"";position:absolute;top:-1px;right:-1px;width:12px;height:12px;
  border-radius:50%;border:2px solid var(--bg);background:var(--accent);
  box-shadow:0 0 0 0 rgba(64,150,255,.65);animation:emisBadge 1.3s ease-in-out infinite}
@keyframes emisBadge{0%,100%{box-shadow:0 0 0 0 rgba(64,150,255,.65)}50%{box-shadow:0 0 0 6px rgba(64,150,255,0)}}
.emis-alert-bar{border-color:rgba(64,150,255,.5);
  box-shadow:0 8px 26px rgba(0,0,0,.4),0 0 0 3px rgba(64,150,255,.12)}
.emis-alert-bar .tab-txt>b{color:var(--accent)}
/* hub-and-spoke "molecule": 📈 hub + 5m/1h/1d top-subnet satellites (replaces the Signal
   page's plain 📈 button, which is hidden below) */
.trend-btn-fixed{display:none}                        /* the molecule replaces it on Signal */
/* premium glass cluster — theme-aware, reads as ONE floating element (size fixed at
   168x160 to match the JS-computed hub/satellite coordinates in MOL) */
/* pie (quarter-circle) glass container — the fan is corner-anchored, so one corner is rounded
   toward the screen interior. Draggable to any of the four corners (data-corner set by JS). */
.trend-molecule{position:fixed;z-index:40;width:276px;height:266px}
/* glass lives on ::before so the BACKDROP-FILTER + gradient can be MASKED to real transparency
   at the rim (masking the container itself would fade the node circles too). The mask makes the
   blur actually vanish toward the edge — a transparent background alone can't, because the
   backdrop-filter still blurs the whole shape. */
.trend-molecule::before{content:"";position:absolute;inset:0;
  border-radius:var(--mol-radius,100% 0 0 0);
  background:transparent;   /* no panel fill — the molecule sits directly on the sky (blur + fill removed) */
  /* glass opacity: 100% at the docked corner, held near 90% across the interior, then FEATHERED
     to 0 in the last ~18% so the rim melts into the chart instead of a hard edge. Ellipse +
     farthest-side follows the pie's actual (non-square) shape; centre sits on the pie corner. */
  -webkit-mask:radial-gradient(ellipse farthest-side at var(--mol-c,100% 100%),rgba(0,0,0,1) 0%,rgba(0,0,0,.9) 82%,rgba(0,0,0,0) 100%);
          mask:radial-gradient(ellipse farthest-side at var(--mol-c,100% 100%),rgba(0,0,0,1) 0%,rgba(0,0,0,.9) 82%,rgba(0,0,0,0) 100%)}
/* docked FLUSH into the screen corner — the pie's apex sits right in the corner, no margin
   (top corners flush under the nav so they don't cover it) */
.trend-molecule[data-corner="br"]{right:0;bottom:0;--mol-c:100% 100%;--mol-radius:100% 0 0 0}
.trend-molecule[data-corner="bl"]{left:0;bottom:0;--mol-c:0% 100%;--mol-radius:0 100% 0 0}
.trend-molecule[data-corner="tr"]{right:0;top:var(--topbar);--mol-c:100% 0%;--mol-radius:0 0 0 100%}
.trend-molecule[data-corner="tl"]{left:0;top:var(--topbar);--mol-c:0% 0%;--mol-radius:0 0 100% 0}
.trend-molecule .mol-hub{cursor:grab}
.trend-molecule.mol-dragging{opacity:.92;transition:none}
.trend-molecule.mol-dragging .mol-hub{cursor:grabbing}
.mol-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;color:var(--accent)}
/* main link: thin, round-capped, colour fades toward the satellite via the per-link gradient */
.mol-link{fill:none;stroke-width:1.4;stroke-linecap:round}
/* wider blurred under-glow gives the line a soft, luminous body instead of a hard hairline */
.mol-link-glow{fill:none;stroke:color-mix(in srgb,var(--accent) 24%,transparent);stroke-width:4.5;
  stroke-linecap:round;filter:blur(3px);opacity:.55}
/* hub + satellites are HTML circles positioned by their centre */
.mol-hub,.mol-sat{position:absolute;transform:translate(-50%,-50%);border-radius:50%}
/* sophisticated "core" hub: obsidian sphere, luminous accent rim + aura, deep inner shadow */
.mol-hub{display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;
  background:radial-gradient(circle at 50% 32%,
    color-mix(in srgb,var(--accent) 22%,#161a21) 0%,#0c0e13 56%,#070809 100%);
  box-shadow:0 0 17px color-mix(in srgb,var(--accent) 42%,transparent),
    inset 0 -10px 18px rgba(0,0,0,.62);
  transition:box-shadow .25s,transform .25s}
.mol-hub:hover{transform:translate(-50%,-50%) scale(1.05);
  box-shadow:0 0 28px color-mix(in srgb,var(--accent) 64%,transparent),
    inset 0 -10px 18px rgba(0,0,0,.62)}
/* trend glyph — a luminous accent line etched on the dark core */
.mol-hub-ic{width:52%;height:52%;fill:none;stroke:var(--accent);stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 4px color-mix(in srgb,var(--accent) 70%,transparent))}
.mol-hub:hover .mol-hub-ic{stroke:color-mix(in srgb,var(--accent) 65%,#fff);
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 85%,transparent))}
/* site-icon logo in the hub (img, not the etched SVG): fill more of the core, no distortion */
img.mol-hub-ic{width:70%;height:70%;object-fit:contain;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
/* trend panel hub: crystal logo + aura effect, but NO solid obsidian sphere behind it */
.trend-molecule .mol-hub,.trend-molecule .mol-hub:hover{background:none;box-shadow:none}
.trend-molecule .mol-hub::before{inset:-12px;box-shadow:0 0 40px color-mix(in srgb,var(--accent) 75%,transparent)}   /* stronger breathing glow around the bare crystal (no solid sphere) */
.trend-molecule img.mol-hub-ic{width:100%;height:100%;pointer-events:none;-webkit-user-drag:none;user-select:none}
/* base breathing halo kept behind EVERY hub, whatever effect is selected */
.mol-hub::before{content:"";position:absolute;inset:-4px;border-radius:50%;pointer-events:none;z-index:-1;
  box-shadow:0 0 20px color-mix(in srgb,var(--accent) 55%,transparent);animation:molBreath 2.8s ease-in-out infinite}
@keyframes molBreath{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
/* ── selectable hub aura: the chosen effect rides a sibling element BEHIND the hub sphere ── */
.mol-aura{position:absolute;transform:translate(-50%,-50%);z-index:1;pointer-events:none;border-radius:50%}
@keyframes molSpin{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.mol-aura.fx-conic{width:106px;height:106px;filter:blur(5px);animation:molSpin 5s linear infinite;
  background:conic-gradient(from 0deg,transparent 0deg,var(--accent) 55deg,transparent 130deg,var(--up) 205deg,transparent 275deg,var(--accent) 350deg,transparent 360deg);
  -webkit-mask:radial-gradient(circle,transparent 62%,#000 74%);mask:radial-gradient(circle,transparent 62%,#000 74%)}
.mol-aura.fx-sonar{width:74px;height:74px}
.mol-aura.fx-sonar::before,.mol-aura.fx-sonar::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent);animation:molSonar 2.6s ease-out infinite}
.mol-aura.fx-sonar::after{animation-delay:1.3s}
@keyframes molSonar{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.3);opacity:0}}
.mol-aura.fx-aurora{width:148px;height:148px;filter:blur(10px);animation:molAuroraBreath 3.2s ease-in-out infinite;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 62%,transparent) 0%,color-mix(in srgb,var(--violet,#b39dff) 32%,transparent) 44%,transparent 68%)}
@keyframes molAuroraBreath{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(.9)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.16)}}
.mol-aura.fx-comet{width:112px;height:112px;filter:blur(1.2px);animation:molSpin 2.3s linear infinite;
  background:conic-gradient(from 0deg,transparent 0deg,transparent 292deg,color-mix(in srgb,var(--accent) 30%,transparent) 320deg,var(--accent) 352deg,#eaf3ff 360deg);
  -webkit-mask:radial-gradient(circle,transparent 64%,#000 73%);mask:radial-gradient(circle,transparent 64%,#000 73%)}
.mol-aura.fx-orbit{width:150px;height:150px;animation:molSpin 7s linear infinite}
.mol-aura.fx-orbit i{position:absolute;top:50%;left:50%;border-radius:50%}
.mol-aura.fx-orbit i:nth-child(1){width:7px;height:7px;background:var(--accent);box-shadow:0 0 9px var(--accent);transform:translate(-50%,-50%) rotate(0deg) translateX(60px)}
.mol-aura.fx-orbit i:nth-child(2){width:5px;height:5px;background:var(--up);box-shadow:0 0 8px var(--up);transform:translate(-50%,-50%) rotate(140deg) translateX(50px)}
.mol-aura.fx-orbit i:nth-child(3){width:6px;height:6px;background:var(--violet,#b39dff);box-shadow:0 0 8px var(--violet,#b39dff);transform:translate(-50%,-50%) rotate(255deg) translateX(64px)}
.mol-aura.fx-shimmer{width:108px;height:108px;filter:blur(3px);animation:molSpin 3.6s linear infinite;
  background:conic-gradient(from 0deg,transparent 0deg,transparent 318deg,color-mix(in srgb,#fff 78%,var(--accent)) 350deg,transparent 360deg);
  -webkit-mask:radial-gradient(circle,transparent 63%,#000 72%);mask:radial-gradient(circle,transparent 63%,#000 72%)}
.mol-aura.fx-twinkle{width:150px;height:150px}
.mol-aura.fx-twinkle i{position:absolute;width:4px;height:4px;border-radius:50%;background:#eaf3ff;box-shadow:0 0 7px var(--accent);animation:molTwinkle 2.1s ease-in-out infinite}
.mol-aura.fx-twinkle i:nth-child(1){top:8%;left:52%;animation-delay:0s}
.mol-aura.fx-twinkle i:nth-child(2){top:26%;left:86%;animation-delay:.5s}
.mol-aura.fx-twinkle i:nth-child(3){top:72%;left:80%;animation-delay:.9s}
.mol-aura.fx-twinkle i:nth-child(4){top:88%;left:44%;animation-delay:.3s}
.mol-aura.fx-twinkle i:nth-child(5){top:64%;left:12%;animation-delay:1.1s}
.mol-aura.fx-twinkle i:nth-child(6){top:30%;left:16%;animation-delay:.7s}
@keyframes molTwinkle{0%,100%{opacity:.2;transform:scale(.6)}50%{opacity:1;transform:scale(1.25)}}
.mol-aura.fx-halo{width:98px;height:98px;animation:molSpin 4.5s linear infinite;
  background:conic-gradient(from 0deg,var(--accent),var(--up),var(--violet,#b39dff),var(--gold,#e2be6a),var(--accent));
  -webkit-mask:radial-gradient(circle,transparent 70%,#000 74%);mask:radial-gradient(circle,transparent 70%,#000 74%)}
.mol-aura.fx-none{display:none}
@media (prefers-reduced-motion:reduce){.mol-hub::before,.mol-aura,.mol-aura *,.mol-aura::before,.mol-aura::after{animation:none!important}}
.mol-sat{cursor:pointer;perspective:520px;z-index:3;transition:transform .12s}
.mol-sat:hover{transform:translate(-50%,-50%) scale(1.09)}
/* the 3D flip: front = netuid+pct, back = window label, revealed on hover */
.mol-flip{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.mol-sat:hover .mol-flip{transform:rotateY(180deg)}
.mol-face{position:absolute;inset:0;border-radius:50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;
  background:radial-gradient(circle at 34% 26%,color-mix(in srgb,var(--elevated) 92%,#fff 10%),var(--panel) 100%);
  border:1.5px solid var(--border);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 12%,transparent),0 5px 14px rgba(0,0,0,.32);
  backface-visibility:hidden;-webkit-backface-visibility:hidden}
.mol-front b{font-size:17px;font-weight:800;color:var(--fg);line-height:1;font-variant-numeric:tabular-nums}
/* depth tier colors the uid label (badge removed): tiny red · small amber · big blue · extreme green */
.mol-front b.pt-tiny{color:#ef7a77}
.mol-front b.pt-small{color:#f0b90b}
.mol-front b.pt-big{color:#5aa2ff}
.mol-front b.pt-extreme{color:#2fd39a}
.mol-front em{font-style:normal;font-size:11.5px;font-weight:800;color:var(--up);font-variant-numeric:tabular-nums}
.mol-back{transform:rotateY(180deg);color:#fff;font-size:16px;font-weight:800;letter-spacing:.03em;
  background:linear-gradient(140deg,var(--accent),color-mix(in srgb,var(--accent) 45%,#6366f1));
  border-color:transparent;box-shadow:0 5px 14px color-mix(in srgb,var(--accent) 40%,transparent)}
/* continuous gain heat: --heat (0..1, set inline from the PnL %) scales an inset up-coloured
   ring + an outer glow, so the effect tracks the % smoothly instead of in 3 fixed tiers */
.mol-front{box-shadow:
    inset 0 1px 0 color-mix(in srgb,#fff 12%,transparent),
    inset 0 0 0 calc(var(--heat,0) * 3px) var(--ring,var(--up)),
    0 0 calc(var(--heat,0) * 24px) color-mix(in srgb,var(--ring,var(--up)) 72%,transparent),
    0 5px 14px rgba(0,0,0,.32)}
/* the +pct text tracks the same heat colour, so a big mover reads hot end-to-end */
.mol-front em{color:var(--ring,var(--up))}
.mol-flat .mol-front b{color:var(--muted2)}
/* unclaimed owner: node stays at full brightness — the only cue is the small "?" owner orb */
/* locked (market-closed) subnet: just an amber lock badge at top-centre — no other change */
.mol-lock{position:absolute;bottom:-9px;left:-9px;z-index:5;
  width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--panel);border:1.5px solid #e0a23a;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.mol-lock svg{width:11px;height:11px;color:#e0a23a}
/* pool-depth badge (top-right), rendered in the SELECTED style: chip (T/S/M/X), dot, or bars.
   Tier colours: Tiny=red, Small=amber, Medium=blue, eXtreme=green. */
.mol-depth{position:absolute;top:-5px;right:-7px;z-index:5;line-height:1}
/* — chip (letter pill) — */
.mol-depth.dep-chip{font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  font-size:14px;font-weight:800;padding:3px 7px;border-radius:999px}
.mol-depth.dep-chip.pt-tiny   {color:#ef7a77;background:color-mix(in srgb,#ef7a77 20%,#0b0e14);box-shadow:0 0 0 1.5px #ef7a77,0 2px 6px rgba(0,0,0,.45)}
.mol-depth.dep-chip.pt-small  {color:#f0b90b;background:color-mix(in srgb,#f0b90b 20%,#0b0e14);box-shadow:0 0 0 1.5px #f0b90b,0 2px 6px rgba(0,0,0,.45)}
.mol-depth.dep-chip.pt-big {color:#5aa2ff;background:color-mix(in srgb,#5aa2ff 20%,#0b0e14);box-shadow:0 0 0 1.5px #5aa2ff,0 2px 6px rgba(0,0,0,.45)}
.mol-depth.dep-chip.pt-extreme{color:#2fd39a;background:color-mix(in srgb,#2fd39a 20%,#0b0e14);box-shadow:0 0 0 1.5px #2fd39a,0 2px 6px rgba(0,0,0,.45)}
/* — dot (solid glowing bead) — */
.mol-depth.dep-dot{width:21px;height:21px;border-radius:50%;border:2.5px solid var(--panel)}
.mol-depth.dep-dot.pt-tiny   {background:#ef7a77;box-shadow:0 0 11px #ef7a77}
.mol-depth.dep-dot.pt-small  {background:#f0b90b;box-shadow:0 0 11px #f0b90b}
.mol-depth.dep-dot.pt-big {background:#5aa2ff;box-shadow:0 0 11px #5aa2ff}
.mol-depth.dep-dot.pt-extreme{background:#2fd39a;box-shadow:0 0 11px #2fd39a}
/* — bars (4-bar meter chip) — */
/* bars badge: dark box with a tier-coloured OUTLINE ring (matches the preset design) */
.mol-depth.dep-bars{display:flex;align-items:center;padding:2px 4px;border-radius:5px;background:#0b0e14}
.mol-depth.dep-bars.pt-tiny   {box-shadow:0 0 0 1.5px #ef7a77,0 2px 6px rgba(0,0,0,.4)}
.mol-depth.dep-bars.pt-small  {box-shadow:0 0 0 1.5px #f0b90b,0 2px 6px rgba(0,0,0,.4)}
.mol-depth.dep-bars.pt-big    {box-shadow:0 0 0 1.5px #5aa2ff,0 2px 6px rgba(0,0,0,.4)}
.mol-depth.dep-bars.pt-extreme{box-shadow:0 0 0 1.5px #2fd39a,0 2px 6px rgba(0,0,0,.4)}
.mol-depth.dep-bars .pt-bars{margin-left:0;height:13px}
/* style picker: a subtle gear in the panel's inner corner + a popover of the presets */
.mol-gear{position:absolute;z-index:6;width:23px;height:23px;padding:0;display:flex;align-items:center;justify-content:center;
  border-radius:50%;cursor:pointer;color:var(--muted2,var(--muted));opacity:.4;
  background:color-mix(in srgb,var(--panel) 84%,transparent);border:1px solid var(--border);
  transition:opacity .2s,color .2s}
.trend-molecule:hover .mol-gear{opacity:.9}
.mol-gear:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
/* ============================================================================
   DAY + TOP-DOCK only: light-theme the trend molecule ONLY when it's docked in a TOP corner
   (tr/tl) during the day — there it overlaps the bright day sky. Docked low (br/bl) it sits over
   the dark feed, so it keeps the dark theme. Night / chart / bottom-dock all untouched.
   The token flip re-skins the token-based descendants (node faces, lines, gear) automatically; the
   hard-coded hub sphere + tier numbers are overridden with the same top-dock scope. */
.sky-day .trend-molecule:is([data-corner="tr"],[data-corner="tl"]){--elevated:#f0f5fd;--panel:#e2ecf8;--fg:#17233f;--muted:#46587c;--muted2:#74849f;
  --line:#c7d5ea;--border:rgba(120,152,204,.45);--accent:#2f6fd0;--up:#0f9d70;--down:#d23b2f}
.sky-day .trend-molecule:is([data-corner="tr"],[data-corner="tl"]) .mol-link-glow{stroke:color-mix(in srgb,var(--accent) 30%,transparent)}
.sky-day .trend-molecule:is([data-corner="tr"],[data-corner="tl"]) .mol-hub{background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--accent) 16%,#fff) 0%,#eaf1fb 58%,#cfddf0 100%);
  box-shadow:0 0 15px color-mix(in srgb,var(--accent) 26%,transparent),inset 0 -8px 15px rgba(60,90,140,.2)}
.sky-day .trend-molecule:is([data-corner="tr"],[data-corner="tl"]) .mol-hub-ic{filter:drop-shadow(0 0 2px color-mix(in srgb,var(--accent) 45%,transparent))}
.sky-day .trend-molecule:is([data-corner="tr"],[data-corner="tl"]) .mol-front b.pt-tiny{color:#c0362c}
.sky-day .trend-molecule:is([data-corner="tr"],[data-corner="tl"]) .mol-front b.pt-small{color:#8a6100}
.sky-day .trend-molecule:is([data-corner="tr"],[data-corner="tl"]) .mol-front b.pt-big{color:#1c5ad0}
.sky-day .trend-molecule:is([data-corner="tr"],[data-corner="tl"]) .mol-front b.pt-extreme{color:#0e8a5e}
.sky-day .trend-molecule:is([data-corner="tr"],[data-corner="tl"]) .mol-depth.dep-bars{background:#e6eef9}
.mol-gear svg{width:13px;height:13px}
.trend-molecule[data-corner="br"] .mol-gear{top:7px;left:7px}
.trend-molecule[data-corner="bl"] .mol-gear{top:7px;right:7px}
.trend-molecule[data-corner="tr"] .mol-gear{bottom:7px;left:7px}
.trend-molecule[data-corner="tl"] .mol-gear{bottom:7px;right:7px}
.mol-style-menu{position:absolute;z-index:7;min-width:158px;padding:6px;border-radius:12px;
  background:color-mix(in srgb,var(--elevated) 96%,transparent);border:1px solid var(--border);
  box-shadow:0 14px 34px rgba(0,0,0,.55);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  display:flex;flex-direction:column;gap:2px}
.mol-style-menu[hidden]{display:none}
.trend-molecule[data-corner="br"] .mol-style-menu{top:34px;left:7px}
.trend-molecule[data-corner="bl"] .mol-style-menu{top:34px;right:7px}
.trend-molecule[data-corner="tr"] .mol-style-menu{bottom:34px;left:7px}
.trend-molecule[data-corner="tl"] .mol-style-menu{bottom:34px;right:7px}
.msm-title{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:2px 6px 5px}
.mol-style-item{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;
  padding:5px 8px;border:0;border-radius:8px;background:transparent;color:var(--fg);
  font-family:inherit;font-size:12.5px;font-weight:600;text-align:left;cursor:pointer}
.mol-style-item:hover{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.mol-style-item.on{background:color-mix(in srgb,var(--accent) 22%,transparent)}
.mol-style-item .mss{font-family:var(--mono,monospace);font-size:9.5px;font-weight:500;color:var(--muted)}
/* orbiting mini-circles: owner avatar (top-left) + official subnet icon (bottom-right).
   Larger + crisp ring so they're recognisable; they pop bigger on hover for a clear look. */
.mol-orb{position:absolute;border-radius:50%;object-fit:cover;z-index:4;
  border:2px solid var(--panel);background:var(--elevated);
  box-shadow:0 0 0 1.5px var(--border),0 2px 7px rgba(0,0,0,.5);   /* crisp outline ring around each avatar */
  transition:transform .15s}
.mol-orb-owner{width:22px;height:22px;top:-9px;left:-9px}
.mol-orb-official{width:22px;height:22px;bottom:-9px;right:-9px}
.mol-orb-author{width:22px;height:22px;top:-9px;right:-9px}   /* extra circle: the signal's poster */
.mol-sat:hover .mol-orb{transform:scale(1.45);z-index:7}
.mol-orb-none{display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;color:var(--muted2);border-style:dashed}
/* news "sun-glint": a bright highlight sits ON the shining account circle (the signal AUTHOR's:
   the owner circle if the author is the owner, else the extra author circle) and gently sweeps
   back and forth the WHOLE time, like light reflecting off it; a steady accent ring also marks it. */
.mol-orb.has-news{cursor:pointer;box-shadow:0 0 0 2px var(--accent),
  0 0 11px color-mix(in srgb,var(--accent) 72%,transparent),0 2px 7px rgba(0,0,0,.5)}
.mol-shine{position:absolute;width:22px;height:22px;border-radius:50%;overflow:hidden;pointer-events:none;z-index:8}
.mol-shine-owner{top:-9px;left:-9px}
.mol-shine-author{top:-9px;right:-9px}
.mol-sat:hover .mol-shine{transform:scale(1.45)}
.mol-shine::before{content:"";position:absolute;top:-60%;width:80%;height:220%;transform:rotate(12deg);
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.55) 33%,rgba(255,255,255,.95) 50%,rgba(255,255,255,.55) 67%,transparent 100%);
  animation:molShine 1.2s ease-in-out infinite alternate}
@keyframes molShine{from{left:-32%}to{left:48%}}   /* stays over the orb — always a visible glint */
@media (prefers-reduced-motion:reduce){.mol-shine::before{animation:none;left:8%}}
/* big GENUINE bump -> a fire shimmer: the outer glow flickers orange->amber, ring pulses */
.mol-sat.mol-fire .mol-front{animation:molFire 1.5s ease-in-out infinite}
@keyframes molFire{
  0%,100%{box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 12%,transparent),
    inset 0 0 0 calc(var(--heat,0) * 3px) var(--ring,var(--up)),
    0 0 calc(var(--heat,0) * 22px) color-mix(in srgb,#ff7a18 78%,transparent),
    0 5px 14px rgba(0,0,0,.32)}
  50%{box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 14%,transparent),
    inset 0 0 0 calc(var(--heat,0) * 3.5px) var(--ring,var(--up)),
    0 0 calc(var(--heat,0) * 32px) color-mix(in srgb,#ffb020 92%,transparent),
    0 5px 14px rgba(0,0,0,.32)}}
@media (prefers-reduced-motion:reduce){.mol-sat.mol-fire .mol-front{animation:none}}
/* new-top-gainer pulse on the hub */
@media (max-width:760px){.trend-molecule{display:none}}
@media (prefers-reduced-motion:reduce){.mol-flip{transition:none}}
/* fullscreen trend dialog: all 5 windows × 16 subnets visible without scrolling */
/* the trend assistor is the only dialog that sits BELOW the nav bar (per request): its overlay
   drops under the topbar's z-index and starts beneath the bar so the bar stays visible and the
   panel is never clipped behind it. Every other modal still covers the bar. */
#modal:has(> #modal-box.trend-full){z-index:150;align-items:flex-start;padding-top:calc(var(--topbar) + 10px)}
.modal-box.trend-full{width:97vw;max-width:97vw;height:calc(100vh - var(--topbar) - 26px);max-height:calc(100vh - var(--topbar) - 26px);padding:14px 20px}
.trend-full .trend-row{padding:2px 8px 3px;gap:2px}
.trend-full .tr-line{gap:6px}
.trend-full .tr-info{font-size:9.5px}
.trend-full .trend-wcol{gap:1px}
.trend-full .trend-whead{margin-bottom:3px}
.trend-full .te-title{margin:0 0 4px}
.trend-full .trend-grid{margin-top:2px}
.trend-full .tr-bar{height:2px}
.trend-sep{border-top:1px solid var(--line);margin:5px 0 3px}
.trend-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px 16px;align-items:start;
  margin-top:6px}
.trend-wcol{display:flex;flex-direction:column;gap:2px;min-width:0}
.trend-whead{align-self:center;font-weight:800;font-size:12px;padding:2px 14px;
  margin-bottom:6px;color:var(--accent);background:rgba(22,119,255,.12);
  border:1px solid rgba(22,119,255,.4);border-radius:999px}
.trend-row{display:flex;flex-direction:column;gap:3px;padding:3px 8px 5px;border-radius:6px;
  font-size:13px;text-decoration:none;color:var(--fg);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.trend-row:hover{background:var(--hover)}
.trend-row .up{color:var(--up);font-weight:700}
.trend-row .down{color:var(--down);font-weight:700}
.tr-line{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tr-imm{font-style:normal;font-size:10px;margin-left:3px;vertical-align:1px}
.tr-info{font-size:10px;color:var(--muted2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-bar{display:block;height:3px;border-radius:2px;background:var(--hover);overflow:hidden}
.tr-bar i{display:block;height:100%;border-radius:2px}
.tr-bar.up i{background:var(--up)}
.tr-bar.dn i{background:var(--down)}

/* ⚡ face on a cluster mark-chip (no author avatar to show) */
.mk-av.mk-cl{display:inline-flex;align-items:center;justify-content:center;
  background:rgba(245,179,1,.15);color:#f5b301;font-size:10px}
.sig-txbar{position:relative}
.txmk-pop{position:absolute;top:100%;right:0;z-index:30;min-width:200px;margin-top:4px;
  background:var(--elevated);border:1px solid var(--border);border-radius:8px;padding:4px;
  display:flex;flex-direction:column;gap:1px;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.txmk-pop[hidden]{display:none}   /* display:flex above would defeat the hidden attribute */
.txmk-opt{padding:5px 9px;border-radius:5px;font-size:12px;cursor:pointer;white-space:nowrap}
.txmk-opt:hover{background:var(--hover)}
.txmk-opt.on{color:#f5b301}
.txmk-none{padding:5px 9px;font-size:12px;white-space:normal;max-width:220px}
.txmk-manage{border-top:1px solid var(--line);margin-top:2px;padding-top:6px;color:var(--muted)}
.txmk-manage:hover{color:var(--fg)}
/* ⚙ watchlist manager dialog */
.ckm-list{display:flex;flex-direction:column;gap:6px;max-height:52vh;overflow-y:auto;margin:2px 0 10px}
.ckm-row{display:grid;grid-template-columns:150px 1fr 26px;gap:8px;align-items:center}
.ckm-row .ckm-lbl{width:100%;min-width:0}
.ckm-ck{font-family:var(--mono,ui-monospace,monospace);font-size:11px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;text-decoration:none}
.ckm-ck:hover{color:var(--fg);text-decoration:underline;text-underline-offset:2px}
.ckm-x{border:0;background:none;color:var(--muted);cursor:pointer;font-size:13px;line-height:1;padding:2px}
.ckm-x:hover{color:var(--down)}
.ckm-ckin{flex:1;min-width:0}
.ckm-descin{flex:1;min-width:0}
/* description sits on its own line under nickname+address, spanning the row */
.ckm-note{grid-column:1/-1;width:100%;min-width:0;font-size:11px;color:var(--muted)}
.ckm-note:focus{color:var(--fg)}
.ckm-row{row-gap:3px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.ckm-row:last-child{border-bottom:0;padding-bottom:0}
/* no number-spinner arrows on the compact subnet inputs (tx scanner + trade toolbox) */
.sig-txnet::-webkit-outer-spin-button,.sig-txnet::-webkit-inner-spin-button,
.tradebar input::-webkit-outer-spin-button,.tradebar input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.sig-txnet,.tradebar input[type=number]{-moz-appearance:textfield;appearance:textfield}
/* ---- auto-buy transaction dialog: floats center-top while a real buy signs on-chain ---- */
#autobuy-tx{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:60;pointer-events:none}
html.not-admin #autobuy-tx{display:none !important}   /* trading UI is admin-only, like the toggles */
.abtx-card{pointer-events:auto;display:flex;align-items:center;gap:13px;position:relative;
  min-width:290px;max-width:min(92vw,420px);padding:14px 40px 14px 16px;border-radius:12px;
  background:var(--panel,#12151c);border:1px solid var(--border,#2a2f3a);
  box-shadow:0 12px 34px rgba(0,0,0,.5);animation:abtx-in .22s ease}
@keyframes abtx-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.abtx-spin{width:32px;height:32px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:17px;font-weight:800}
.abtx-spin.spinning{border:3px solid var(--border,#2a2f3a);border-top-color:var(--accent,#6c8cff);
  animation:mk-spin .7s linear infinite}
.abtx-spin.ok{background:rgba(38,166,91,.16);color:#26a65b;border:2px solid #26a65b}
.abtx-spin.fail{background:rgba(224,64,64,.15);color:var(--down,#e04040);border:2px solid var(--down,#e04040)}
.abtx-title{font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted2);
  display:flex;align-items:center;gap:6px}
.abtx-live{font-size:9px;font-weight:800;color:#fff;background:var(--down,#e04040);
  padding:1px 5px;border-radius:4px;letter-spacing:.5px}
.abtx-msg{font-size:14px;font-weight:700;color:var(--fg,#e8eaed);margin-top:1px}
.abtx-sub{font-size:11.5px;color:var(--muted2);margin-top:2px}
.abtx-close{position:absolute;top:6px;right:8px;background:none;border:0;padding:0;cursor:pointer;
  color:var(--muted2);font-size:12px;line-height:1;opacity:.6}
.abtx-close:hover{opacity:1;color:var(--down)}
.mk-x{position:absolute;top:4px;right:4px;z-index:3;width:16px;height:16px;display:inline-flex;
  align-items:center;justify-content:center;background:none;border:0;padding:0;border-radius:50%;
  color:var(--muted2);cursor:pointer;font-size:12px;line-height:1;opacity:0;pointer-events:none;
  transition:opacity .15s,background .15s,color .15s}
.mark-chip:hover .mk-x{opacity:.85;pointer-events:auto}
.mk-x:hover{opacity:1;color:var(--down);background:color-mix(in srgb,var(--down) 18%,transparent)}
/* unmark feedback: while the request is in flight the chip dims + shows a spinner (mk-deleting),
   then it collapses out (mk-removing) before the strip re-renders — so it reads as "deleting". */
.mark-chip.mk-deleting{opacity:.45;pointer-events:none;filter:grayscale(.4)}
.mark-chip.mk-deleting::after{content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;
  margin:-8px 0 0 -8px;border:2px solid var(--muted2);border-top-color:transparent;border-radius:50%;
  animation:mk-spin .6s linear infinite;z-index:2}
@keyframes mk-spin{to{transform:rotate(360deg)}}
.mark-chip.mk-removing{opacity:0 !important;max-width:0 !important;
  /* margin-left eats one flex `gap` (6px) so neighbours slide together with NO leftover space —
     the collapse ends exactly where the re-render lands, so there's no snap. */
  margin-left:-6px !important;padding-left:0 !important;padding-right:0 !important;
  padding-top:0 !important;padding-bottom:0 !important;border-width:0 !important;
  overflow:hidden;pointer-events:none;white-space:nowrap;
  transition:max-width .3s ease,opacity .22s ease,margin-left .3s ease,padding .3s ease}
.mg-star:hover{opacity:1;color:#e8b923;transform:scale(1.15)}
.mg-star.on{opacity:1;color:#f5b301;text-shadow:0 0 6px rgba(245,179,1,.55)}
.mg-msg.is-golden{border-left:2px solid #f5b301;padding-left:8px;margin-left:-10px;border-radius:3px;
  background:linear-gradient(90deg,rgba(245,179,1,.07),transparent 55%)}
.mg-c{font-size:13px;line-height:1.5;word-break:break-word}
/* platform-native type: a post reads in a face chosen for its source. X's Chirp and Discord's
   gg sans are proprietary, so each platform gets a chosen stand-in (picked from the specimen
   sheet, 9/8): Geist for X, Instrument Sans for Discord — both loaded from Google Fonts in
   _shell — ahead of the platform's own fallback chain. The row root carries data-plat. */
:root{--font-x:Geist,TwitterChirp,Chirp,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
      --font-discord:"Instrument Sans","gg sans","Noto Sans","Helvetica Neue",Helvetica,Arial,sans-serif}
[data-plat="x"] .mg-c,[data-plat="x"].mkd-text{font-family:var(--font-x)}
[data-plat="discord"] .mg-c,[data-plat="discord"].mkd-text{font-family:var(--font-discord)}
/* full per-axis score breakdown under the avatar — the .mk-score box does the styling; this just
   positions it in the avatar column (which grows to the box's width) */
.sig-score{margin:3px 0 0;align-self:stretch}
/* text is a block of its own so media (inline-block video/image anchors) never shares
   its line box — a 300px thumbnail otherwise drags the text to its baseline */
.mg-txt{display:block}
.mg-c a,.em-desc a{color:var(--accent);text-decoration:none}
.mg-c a:hover,.em-desc a:hover{text-decoration:underline}
.mg-c code,.em-desc code{background:var(--bg);padding:1px 4px;border-radius:3px;font-size:12px}
.mg-tags{display:inline-flex;gap:4px;vertical-align:middle}
.mg-link{color:var(--muted2);opacity:0;transition:opacity .12s}
.mg-link:hover{color:var(--accent)}
.mg-msg:hover .mg-link{opacity:1}
/* dev: copy a message's db id (news_id) — top-right chip, revealed on hover */
.dev-id{position:absolute;top:1px;right:2px;z-index:2;cursor:pointer;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;line-height:1;
  color:var(--muted2);background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:0 8px;height:22px;
  display:inline-flex;align-items:center;justify-content:center;   /* label vertically centred */
  opacity:0;transition:opacity .12s}
.mg-msg:hover .dev-id,.nm-msg:hover .dev-id{opacity:1}
.dev-id:hover{color:var(--fg);border-color:var(--accent)}
.dev-id.ok{color:var(--up);border-color:var(--up);opacity:1}
.nm-msg .dev-id{position:static;margin-left:auto}    /* modal: sits at the header's right end */
.d-emoji{width:18px;height:18px;vertical-align:-4px}
.d-time{background:var(--accent-bg);color:var(--accent);border-radius:3px;padding:0 4px}

/* discord-style link embed card */
.embed{margin-top:6px;max-width:460px;background:var(--bg);border:1px solid var(--line);
  border-left:4px solid var(--accent);border-radius:4px;padding:8px 12px}
.em-provider{font-size:10.5px;font-weight:700;letter-spacing:.02em;color:var(--muted);margin-bottom:3px;text-transform:uppercase}
.em-author{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-bottom:3px}
.em-author img{width:18px;height:18px;border-radius:50%}
.em-title{font-size:13px;font-weight:600;margin-bottom:3px}
.em-title a{color:var(--accent);text-decoration:none}
.em-desc{font-size:13px;line-height:1.45;color:var(--fg);white-space:pre-wrap}
.em-img{max-width:100%;max-height:300px;border-radius:4px;margin-top:8px;display:block}
.em-footer{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted2);margin-top:6px}
.em-footer img{width:16px;height:16px;border-radius:3px}
.att-img{max-width:400px;max-height:300px;border-radius:6px;margin-top:6px;display:block}
/* X rows: media laid out like a real tweet — full text width under the body, rounded and
   height-capped; two or more pictures form a two-column grid. Discord rows keep the native
   thumbnail above. Inside an X preview card the card's own media rules (later) apply. */
[data-plat="x"] .att-wrap{display:block;margin-top:10px;border-radius:14px;border:1px solid var(--line)}
[data-plat="x"] .att-vid{display:block}
[data-plat="x"] .att-img{width:100%;max-width:100%;max-height:460px;object-fit:cover;border-radius:13px;margin-top:0}
[data-plat="x"] .att-wrap:has(+ .att-wrap),[data-plat="x"] .att-wrap + .att-wrap{display:inline-block;vertical-align:top;width:calc(50% - 3px)}
[data-plat="x"] .att-wrap + .att-wrap{margin-left:6px}
[data-plat="x"] .att-wrap:has(+ .att-wrap) .att-img,[data-plat="x"] .att-wrap + .att-wrap .att-img{height:260px}
.att-file{display:inline-block;margin-top:6px;font-size:13px;color:var(--accent);text-decoration:none}
/* media download: round overlay button (revealed on hover for images) */
.att-wrap{position:relative;display:inline-block;max-width:100%}
/* picture / video embeds blur until clicked (shoulder-surf guard). --media-blur is the one
   knob to tune the strength; scale(1.06) + overflow clip the fuzzy blurred edges. */
.att-wrap.media-blur{--media-blur:14px;overflow:hidden}
.att-wrap.media-blur img{filter:blur(var(--media-blur));transform:scale(1.06);
  transition:filter .18s ease,transform .18s ease}
.att-wrap.media-blur.revealed img{filter:none;transform:none}
.att-wrap.media-blur:not(.revealed){cursor:pointer}
.att-wrap.media-blur:not(.revealed) .dl-btn{display:none}   /* no download until revealed */
.att-wrap.media-blur:not(.revealed)::after{content:"👁";position:absolute;
  inset:0;display:flex;align-items:center;justify-content:center;
  font-size:26px;text-shadow:0 1px 4px rgba(0,0,0,.7);
  background:rgba(0,0,0,.28);border-radius:inherit;pointer-events:none;z-index:1}
.dl-btn{position:absolute;right:8px;bottom:8px;width:30px;height:30px;display:flex;
  align-items:center;justify-content:center;border-radius:50%;background:rgba(0,0,0,.6);
  color:#fff;text-decoration:none;opacity:0;transition:opacity .12s,background .12s,transform .12s;
  backdrop-filter:blur(2px)}
.dl-btn svg{width:15px;height:15px}
/* body-link color rules (.mg-* a etc.) outrank .dl-btn's color — pin the icon white */
.att-wrap .dl-btn,.att-wrap .dl-btn:hover{color:#fff}
.att-wrap .dl-btn svg{stroke:#fff}
/* AD / JUNK classification badge on a video thumbnail (top-left, sharp over the blur) */
.att-wrap .vbadge{position:absolute;top:8px;left:8px;z-index:5;display:inline-flex;align-items:center;
  gap:5px;padding:3px 9px;border-radius:8px;font-size:11px;font-weight:900;letter-spacing:.08em;
  line-height:1.2;cursor:help;text-transform:uppercase}     /* hoverable → shows the confidence breakdown; images + videos */
.vbadge .vbadge-c{font-size:10px;font-weight:800;opacity:.92;letter-spacing:0}   /* the ad-confidence % */
/* AD — bold green, glowing + gently pulsing so it grabs the eye */
.vbadge-ad{color:#04160f;background:linear-gradient(135deg,#4ade80,#10b981);
  box-shadow:0 0 0 1.5px rgba(52,211,153,.55),0 2px 12px rgba(16,185,129,.7);
  animation:adpulse 1.5s ease-in-out infinite}
@keyframes adpulse{0%,100%{box-shadow:0 0 0 1.5px rgba(52,211,153,.5),0 2px 10px rgba(16,185,129,.55)}
  50%{box-shadow:0 0 0 1.5px rgba(52,211,153,.95),0 3px 20px rgba(16,185,129,1)}}
/* CONTENT — long-form (interview / AMA / demo): calm blue, distinct from the pulsing green AD */
.vbadge-content{color:#04121f;background:linear-gradient(135deg,#60a5fa,#3b82f6);
  box-shadow:0 0 0 1.5px rgba(96,165,250,.55),0 2px 12px rgba(59,130,246,.6)}
/* JUNK — muted grey, recedes */
.vbadge-junk{color:#d3d3db;background:rgba(60,60,70,.9);font-weight:700;letter-spacing:.04em;
  box-shadow:0 1px 3px rgba(0,0,0,.45)}
.att-wrap:hover .dl-btn{opacity:1}
.dl-btn:hover{background:rgba(0,0,0,.85)}
/* videos: a ▶ badge in the middle once revealed (the thumbnail opens the video — the blur
   guard's 👁 shows before the click) and the round ⬇ always visible in the corner, like on
   images — the Telegram-style preview look */
.att-wrap-vid .dl-btn{opacity:1}
.att-wrap-vid.revealed .att-vid::after{content:"▶";position:absolute;left:50%;top:50%;width:52px;height:52px;
  margin:-26px 0 0 -26px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:20px;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.att-filerow{display:inline-flex;align-items:center;gap:6px}
.att-filerow .dl-btn{position:static;opacity:.7;width:22px;height:22px;background:var(--chip,rgba(255,255,255,.06));color:var(--muted);margin-top:6px}
.att-filerow .dl-btn svg{width:12px;height:12px}
.att-filerow .dl-btn:hover{opacity:1;color:var(--fg)}
.sub{font-size:11px;padding:1px 7px;border-radius:10px;font-weight:600;background:var(--hover);color:var(--muted)}
.sub.m-channel{background:rgba(38,166,154,.18);color:#26a69a}
.sub.m-guild{background:rgba(64,150,255,.18);color:var(--accent)}
.sub.m-text{background:rgba(171,71,188,.18);color:#c17ad6}
.sub.m-author{background:var(--hover);color:var(--muted)}
.sub.sn-chip{background:rgba(171,71,188,.18);color:#c17ad6}   /* default: uniform indigo */
/* pool-depth tiers on the Signal feed's sn chips: colour + a signal-bar meter so the pool
   depth (tiny/small/big/extreme) of each tagged subnet reads at a glance */
.sn-chip.pt-tiny   {background:rgba(239,83,80,.16);color:#ef7a77}
.sn-chip.pt-small  {background:rgba(240,185,11,.16);color:#f0b90b}
.sn-chip.pt-big {background:rgba(64,150,255,.16);color:#5aa2ff}
.sn-chip.pt-extreme{background:rgba(38,194,129,.18);color:#2fd39a}
.pt-bars{display:inline-flex;align-items:flex-end;gap:1.5px;height:9px;margin-left:5px;vertical-align:-1px}
.pt-bars i{width:2.5px;border-radius:1px;background:var(--muted2);opacity:.3}
.pt-bars i:nth-child(1){height:3px}.pt-bars i:nth-child(2){height:5px}
.pt-bars i:nth-child(3){height:7px}.pt-bars i:nth-child(4){height:9px}
.pt-bars i.on{opacity:1}
/* the lit bars carry the tier colour, so the meter works on any chip (feed or PnL-coloured) */
.pt-bars.pt-tiny    i.on{background:#ef7a77}
.pt-bars.pt-small   i.on{background:#f0b90b}
.pt-bars.pt-big  i.on{background:#5aa2ff}
.pt-bars.pt-extreme i.on{background:#2fd39a}
/* trend dialog: an activated subnet lights up across every window column */
.trend-row.tr-active{background:rgba(245,179,1,.14);box-shadow:inset 0 0 0 1px rgba(245,179,1,.55)}
.trend-grid.has-sel .trend-row:not(.tr-active){opacity:.3}
.sub.s-macro{background:rgba(255,167,38,.18);color:#ffa726}
.sub.s-untagged{background:var(--hover);color:var(--muted2)}
a.sub{text-decoration:none;cursor:pointer;transition:filter .1s}
a.sub:hover{filter:brightness(1.35)}

/* ===== servers / channels manager ===== */
.hint{color:var(--muted2);font-weight:400}

/* --- left rail: server picker --- */
.srv-rail{position:sticky;top:0;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:14px}
.rail-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.rail-h{margin:0;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.rail-h .count{color:var(--muted2);font-weight:500;margin-left:4px}
.rail-add{width:26px;height:26px;padding:0;font-size:16px;line-height:1;flex:0 0 auto;border-radius:var(--radius)}
.glist{display:flex;flex-direction:column;gap:8px}
.gcard{border:1px solid var(--line);border-radius:var(--radius);padding:9px 10px;background:var(--bg);cursor:pointer;transition:border-color .15s}
.gcard:hover{border-color:var(--accent-hover)}
.gcard.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.gcard-id{display:flex;align-items:center;gap:9px;min-width:0}
.gcard-id>div{min-width:0}
.gcard-actions{display:flex;gap:2px;align-items:center;flex:0 0 auto;opacity:0;transition:opacity .15s}
.gcard:hover .gcard-actions,.gcard.sel .gcard-actions{opacity:1}
.gav{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:0 0 32px;background:var(--hover)}
.gav-ph{display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:var(--muted);border:1px solid var(--line)}
.gcard-gid{font-size:10px;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gcard .pc-row{margin-top:7px;gap:4px}
.gcard .pc-row .tag{font-size:10px;padding:1px 6px}

/* --- channels: the page's real content, so it gets the width --- */
.srv-chans{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:0 18px 18px}
.ch-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:14px 0 12px;margin-bottom:2px;background:var(--panel);border-bottom:1px solid var(--line)}
.ch-title{margin:0;font-size:15px;font-weight:600;white-space:nowrap}
.ch-stat{font-size:12px;color:var(--muted2);white-space:nowrap}
.ch-tools{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
.ch-search{width:200px;height:30px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
  color:var(--fg);padding:2px 10px;outline:none;font:inherit;font-size:13px}
.ch-search:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg)}
.ch-filters{display:flex;background:var(--seg-track);border-radius:var(--radius);padding:2px;gap:2px}
.ch-f{background:transparent;border:0;color:var(--muted);font:inherit;font-size:12px;font-weight:500;
  padding:4px 10px;border-radius:calc(var(--radius) - 2px);cursor:pointer;transition:all .15s}
.ch-f:hover{color:var(--fg)}
.ch-f.on{background:var(--panel);color:var(--fg);box-shadow:0 1px 2px rgba(0,0,0,.2)}
/* multi-column: 384 channels in one column is a scroll marathon */
.chlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:2px 14px;margin-top:4px;align-content:start}
.chlist .empty{grid-column:1/-1}
.ch-cat{grid-column:1/-1;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted2);
  margin:14px 0 4px;padding-bottom:3px;border-bottom:1px solid var(--line)}
.ch-cat:first-child{margin-top:6px}
.ch-row{display:grid;grid-template-columns:minmax(0,1fr) 62px 62px;align-items:center;gap:8px;
  padding:5px 8px;border-radius:var(--radius);transition:background .3s}
.ch-row:hover{background:var(--hover)}
.ch-row.saved{background:rgba(38,166,154,.16)}
.ch-row.hide{display:none}
.ch-name{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-ann{opacity:.7}
.ch-nuwrap{display:flex;align-items:center;gap:3px;font-size:11px;color:var(--muted2)}
.ch-nu{width:44px;height:26px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
  color:var(--fg);padding:2px 6px;outline:none;font:inherit;font-size:13px}
.ch-nu:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg)}
.ch-trkwrap{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted)}
.ch-trk{accent-color:var(--accent);width:14px;height:14px}

/* ===== read dialog (person detail) ===== */
.pcard{cursor:pointer}
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);padding:20px}
.modal[hidden]{display:none}
.modal-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  width:min(560px,100%);max-height:88vh;overflow:auto;box-shadow:var(--shadow);padding:20px}
/* a single message card as the WHOLE dialog: strip the modal's own frame/padding so only the
   card (already self-framed) shows — no outer wrapper, no double frame */
.modal-box.card-only{background:transparent;border:none;box-shadow:none;padding:0;width:min(760px,94vw)}
.modal-box.card-only .sig-row{margin-bottom:0}
/* ONE shorthand for the card padding — a separate padding-top rule gets reset by this shorthand
   (same specificity, later wins), which is what collided the header with the corner cluster */
.modal-box.card-only .msg-group{padding:38px 22px 16px}                   /* top-room for the corner cluster */
.modal-box.card-only .mg-corner{top:10px;right:14px;gap:3px}              /* un-cram the corner cluster */
.modal-box.card-only .mv-grid-trd{overflow-x:auto}
.mb-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.mb-name{font-weight:700;font-size:19px}
.mb-close{width:28px;height:28px;border-radius:var(--radius);color:var(--muted2);font-size:14px}
.mb-close:hover{background:var(--hover);color:var(--fg)}
/* ---- deep conversation dialog: live reply-thread collector (ephemeral, not saved) ---- */
.mb-deep{margin-left:auto;font-size:12px;font-weight:600;padding:3px 10px;border-radius:7px;
  color:var(--accent);background:var(--accent-bg);border:1px solid transparent;cursor:pointer;white-space:nowrap}
.mb-deep:hover{filter:brightness(1.15)}
.deep-meta{font-size:11px;font-variant-numeric:tabular-nums;margin-left:auto;margin-right:10px;white-space:nowrap;align-self:center}
.deep-root{font-size:12px;padding:2px 2px 8px;border-bottom:1px solid var(--line);margin-bottom:6px}
.deep-list{max-height:62vh;overflow-y:auto;display:flex;flex-direction:column;gap:2px;scrollbar-width:thin}
.deep-item{display:flex;gap:8px;padding:7px 6px;border-radius:8px}
.deep-item:hover{background:var(--hover)}
.deep-known{box-shadow:inset 2px 0 0 #f5b301;background:rgba(245,179,1,.05)}
.deep-av{width:30px;height:30px;border-radius:50%;flex:none;object-fit:cover}
.deep-body{min-width:0;flex:1}
.deep-h{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px}
.deep-hn{color:var(--fg);font-weight:700;text-decoration:none}
.deep-hn:hover{text-decoration:underline}
.deep-hh{color:var(--muted2)}
.deep-star{color:#f5b301}
.deep-fol{color:var(--muted2);font-size:11px}
.deep-fol::after{content:" fol"}
.deep-when{color:var(--muted2);font-size:11px;margin-left:auto}
.deep-txt{font-size:13px;color:var(--fg);line-height:1.4;margin:2px 0;word-break:break-word}
.deep-eng{font-size:11px;font-variant-numeric:tabular-nums}
.deep-tag{font-size:10px;font-weight:700;padding:1px 6px;border-radius:5px;white-space:nowrap;line-height:1.6}
.dt-reply{color:var(--muted2);background:var(--bg)}
.dt-quote{color:var(--accent);background:var(--accent-bg)}
.dt-rt{color:var(--up);background:rgba(38,166,154,.14)}
.deep-retweet .deep-txt{font-size:12px}       /* retweets carry no text — the muted "retweeted it" line is smaller */

/* ============ deep dialog: real-𝕏 timeline skin (scoped to #modal-box.x-modal) ============ */
/* X "Dim" palette, local vars so children inherit it; id+class specificity beats the base .modal-box / .deep-* rules */
#modal-box.x-modal{
  --xbg:#15202b; --xelev:#1e2732; --xink:#e7e9ea; --xmut:#8b98a5;
  --xline:#38444d; --xblue:#1d9bf0; --xgreen:#00ba7c; --xpink:#f91880;
  background:var(--xbg); color:var(--xink); border:1px solid var(--xline);
  padding:0; width:min(600px,100%); max-height:88vh; overflow:hidden;
  display:flex; flex-direction:column;
  font-family:var(--font-x);
}
#modal-box.x-modal .x-bar{                     /* sticky top bar: "Post" · live meta · ✕ */
  display:flex; align-items:center; gap:10px; padding:11px 16px; flex:none;
  border-bottom:1px solid var(--xline); position:sticky; top:0; z-index:2;
  background:rgba(21,32,43,.85); backdrop-filter:blur(6px);
}
#modal-box.x-modal .x-bartitle{font-size:19px;font-weight:800;letter-spacing:.2px;color:var(--xink)}
#modal-box.x-modal .deep-meta{color:var(--xmut);margin-left:auto;margin-right:0;font-size:12px}
#modal-box.x-modal .x-close{
  width:32px;height:32px;border-radius:50%;flex:none;font-size:15px;line-height:1;
  color:var(--xink);background:transparent;border:none;cursor:pointer;transition:background .12s;
}
#modal-box.x-modal .x-close:hover{background:rgba(239,243,244,.1)}
#modal-box.x-modal .x-repliesbar{               /* section label between root and the live thread */
  padding:11px 16px 9px;font-size:15px;font-weight:800;color:var(--xink);
  border-bottom:1px solid var(--xline);flex:none;
}
#modal-box.x-modal .x-repliesbar .muted{color:var(--xmut);font-weight:400}
#modal-box.x-modal .x-deep{                     /* the scroll region */
  max-height:none;flex:1;overflow-y:auto;display:block;padding:0;gap:0;scrollbar-width:thin;
}
#modal-box.x-modal .x-tweet{                    /* one post */
  padding:10px 16px 8px;border-bottom:1px solid var(--xline);transition:background .12s;
}
#modal-box.x-modal .x-tweet:hover{background:rgba(255,255,255,.03)}
#modal-box.x-modal .x-root{flex:none;padding:12px 16px}
#modal-box.x-modal .x-row{display:flex;gap:12px}
#modal-box.x-modal .x-av{width:40px;height:40px;border-radius:50%;flex:none;object-fit:cover;background:var(--xelev)}
#modal-box.x-modal .x-main{min-width:0;flex:1}
#modal-box.x-modal .x-head{display:flex;align-items:center;gap:4px;flex-wrap:wrap;line-height:1.3}
#modal-box.x-modal .x-name{
  color:var(--xink);font-weight:700;font-size:15px;text-decoration:none;
  white-space:nowrap;max-width:46%;overflow:hidden;text-overflow:ellipsis;
}
#modal-box.x-modal .x-name:hover{text-decoration:underline}
#modal-box.x-modal .x-star{color:#f5b301;font-size:12px}
#modal-box.x-modal .x-handle,
#modal-box.x-modal .x-dot,
#modal-box.x-modal .x-time,
#modal-box.x-modal .x-fol{color:var(--xmut);font-size:15px;white-space:nowrap}
#modal-box.x-modal .x-time{text-decoration:none}
#modal-box.x-modal .x-time:hover{text-decoration:underline}
#modal-box.x-modal .x-fol{font-size:13px}
#modal-box.x-modal .x-replyingto{               /* X's "Replying to @handle" line marks this a reply, not an original */
  color:var(--xmut);font-size:14px;line-height:1.3;margin:1px 0 1px;
}
#modal-box.x-modal .x-replyingto a{color:var(--xblue);text-decoration:none}
#modal-box.x-modal .x-replyingto a:hover{text-decoration:underline}
#modal-box.x-modal .x-text{
  color:var(--xink);font-size:15px;line-height:1.4;margin:2px 0;word-break:break-word;white-space:pre-wrap;
}
#modal-box.x-modal .x-text a{color:var(--xblue);text-decoration:none}
#modal-box.x-modal .x-text a:hover{text-decoration:underline}
#modal-box.x-modal .x-ctx{                      /* "reposted" / "quoted the post" context line */
  display:flex;align-items:center;gap:6px;color:var(--xmut);font-size:13px;font-weight:600;margin:0 0 3px 30px;
}
#modal-box.x-modal .x-ctx svg{width:15px;height:15px;fill:var(--xmut)}
#modal-box.x-modal .x-actions{                  /* reply · repost · like · views */
  display:flex;justify-content:space-between;max-width:340px;margin-top:8px;
}
#modal-box.x-modal .x-act{display:inline-flex;align-items:center;gap:6px;color:var(--xmut);font-size:13px;cursor:default;transition:color .12s}
#modal-box.x-modal .x-act svg{width:17px;height:17px;fill:currentColor}
#modal-box.x-modal .x-act b{font-weight:400;font-variant-numeric:tabular-nums}
#modal-box.x-modal .xa-reply:hover{color:var(--xblue)}
#modal-box.x-modal .xa-rt:hover{color:var(--xgreen)}
#modal-box.x-modal .xa-like:hover{color:var(--xpink)}
#modal-box.x-modal .xa-view:hover{color:var(--xblue)}
#modal-box.x-modal .x-reposthdr{                /* divider: timeless reposters grouped below the timed thread */
  display:flex;align-items:center;gap:8px;padding:12px 16px 10px;
  font-size:15px;font-weight:800;color:var(--xink);
  border-top:1px solid var(--xline);border-bottom:1px solid var(--xline);
  background:rgba(255,255,255,.02);position:sticky;top:0;z-index:1;
}
#modal-box.x-modal .x-reposthdr svg{width:18px;height:18px;fill:var(--xgreen)}
#modal-box.x-modal .x-rtitem{padding-bottom:8px}      /* reposter row: no body/actions */
#modal-box.x-modal .x-waiting{padding:28px 16px;text-align:center;color:var(--xmut);font-size:14px}
#modal-box.x-modal .x-badge{width:16px;height:16px;fill:var(--xblue);vertical-align:-2px}

/* 𝕏 tracker settings dialog */
.sig-cog{padding:0}
.modal-box.xt-set{width:440px;max-width:94vw}
.xt-set-intro{color:var(--muted2);font-size:12.5px;line-height:1.5;margin:8px 0 14px}
.xt-set-intro b{color:var(--fg)}
.xt-set-grid{display:flex;flex-direction:column;gap:12px}
.xt-set-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 10px}
.xt-set-row>span:first-child{font-size:14px;font-weight:600}
.xt-set-in{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13px}
.xt-set-in input{width:76px;height:34px;text-align:right;padding:0 8px;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--panel);color:var(--fg);font-size:15px;
  font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
/* hide the number-input spinner arrows */
.xt-set-in input::-webkit-outer-spin-button,
.xt-set-in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.xt-set-sub{grid-column:1/-1;font-size:11.5px;color:var(--muted2)}
.xt-set-est{margin:16px 0 4px;padding:10px 12px;border-radius:var(--radius);
  background:var(--hover);font-size:13.5px;color:var(--muted);text-align:center}
.xt-est-n{color:var(--fg);font-weight:700;font-variant-numeric:tabular-nums}
.xt-est-n.bad{color:var(--down)}
.xt-est-cap{color:var(--muted2);font-size:11.5px}
.xt-set-foot{display:flex;align-items:center;gap:8px;margin-top:14px}
.mb-btns{display:flex;align-items:center;gap:6px;flex:none}
.mb-edit{height:28px;padding:0 11px;font-size:12px}
.mb-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.mb-notes{margin-top:12px;font-size:13px;color:var(--muted);font-style:italic}
.mb-accs{margin-top:16px;display:flex;flex-direction:column;gap:12px}
.mb-acc{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg)}
.mb-banner{height:170px;background-size:cover;background-position:center}
.mb-acc-head{display:flex;align-items:center;gap:12px;padding:12px 14px 6px}
.mb-av{width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid var(--panel)}
.mb-av.ph{display:flex;align-items:center;justify-content:center;background:var(--hover);color:var(--muted);font-weight:700}
.mb-acc .mb-banner + .mb-acc-head .mb-av{margin-top:-52px}
.mb-plat{font-weight:600;font-size:14px}
.mb-unrich{font-size:12px;color:var(--muted2)}
.mb-fields{padding:4px 14px 14px;display:grid;grid-template-columns:1fr;gap:6px}
.mb-f{display:flex;gap:10px;font-size:13px}
.mb-f .k{width:96px;color:var(--muted2);flex:none}
.mb-f .v{color:var(--fg);word-break:break-all}
.mb-f .v .role-badge{display:inline-flex;margin:0 4px 4px 0}   /* held Discord roles */
.role-badge{font-size:11px;background:var(--hover);color:var(--muted)}
.role-badge.role-sub{background:rgba(64,150,255,.18);color:var(--accent);font-weight:600}
.role-badge.role-owner{background:rgba(255,179,0,.2);color:#ffb300;font-weight:700;
  box-shadow:inset 0 0 0 1px rgba(255,179,0,.5)}
.mb-f code{font-size:12px;color:var(--muted)}
.swatch{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:middle;margin-right:6px;border:1px solid var(--line)}

/* scrollbars (Ant-like) */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--muted2)}

/* ===== docs page ===== */
.docs-main{position:absolute;top:var(--topbar);left:0;right:0;bottom:0;overflow:auto;
  background:var(--bg);padding:20px 16px 60px;
  /* page-scoped semantic tones (Ant gold/red) for the workflow diagram */
  --warn:#d89614;--warn-bg:rgba(216,150,20,.14);
  --mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace}
[data-mode="light"] .docs-main{--warn:#d48806;--warn-bg:rgba(212,136,6,.12)}
.docs-wrap{max-width:1060px;margin:0 auto;display:grid;grid-template-columns:180px minmax(0,1fr);gap:32px}
@media (max-width:820px){.docs-wrap{grid-template-columns:minmax(0,1fr);gap:12px}
  .docs-toc{position:static;display:flex;flex-wrap:wrap;gap:2px 14px;padding:0 0 4px}
  .docs-toc-head{width:100%}}

.docs-toc{position:sticky;top:4px;align-self:start;font-size:13px;padding-top:6px}
.docs-toc-head{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted2);margin-bottom:8px}
.docs-toc a{display:block;color:var(--muted);text-decoration:none;padding:3px 8px;border-radius:var(--radius);transition:all .2s}
.docs-toc a:hover{color:var(--accent)}
.docs-toc a.on{color:var(--accent);background:var(--accent-bg)}

.docs-body{display:flex;flex-direction:column;gap:16px;min-width:0}
.docs-sec{scroll-margin-top:12px}
.docs-sec p,.docs-sec ul{max-width:76ch;color:var(--fg);margin:8px 0}
.docs-sec ul{padding-left:20px}
.docs-sec li{margin:4px 0}
.docs-sec li::marker{color:var(--accent)}
.docs-dim{color:var(--muted)}
.docs-h4{margin:20px 0 8px;font-size:13.5px;font-weight:600;color:var(--fg)}
.docs-sec code{font-family:var(--mono);font-size:.9em;background:var(--hover);
  padding:1px 5px;border-radius:4px}
.docs-badge{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--warn);background:var(--warn-bg);border-radius:999px;padding:2px 9px;margin-left:8px;vertical-align:2px}

.docs-code{background:var(--seg-track);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:12px 14px;overflow-x:auto;font-family:var(--mono);font-size:12.5px;line-height:1.6;margin:10px 0}
.docs-code code{background:none;padding:0;font-size:inherit}
.docs-code .c{color:var(--muted2)}

.docs-tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg);margin:10px 0}
.docs-tbl{border-collapse:collapse;width:100%;font-size:13px}
.docs-tbl th,.docs-tbl td{text-align:left;padding:8px 12px;border-top:1px solid var(--line);vertical-align:top}
.docs-tbl thead th{border-top:none;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted2);font-weight:600;white-space:nowrap}
.docs-tbl tbody tr:first-child td{border-top:none}
.docs-tbl thead+tbody tr:first-child td{border-top:1px solid var(--line)}
.docs-tbl td{color:var(--muted)}
.docs-tbl td b{color:var(--fg)}
.docs-tbl td:first-child{white-space:nowrap}
.docs-api td:first-child{font-family:var(--mono);font-size:12px;color:var(--fg)}
.docs-api .verb{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.05em;
  padding:1px 6px;border-radius:999px;border:1px solid var(--border);color:var(--muted);margin-right:7px;vertical-align:1px}
.docs-api .verb.post{border-color:var(--warn);color:var(--warn)}
.docs-api .verb.del{border-color:var(--down);color:var(--down)}

/* -- workflow diagram -- */
.wf-legend{display:flex;flex-wrap:wrap;gap:14px;margin:12px 0 16px;font-size:12px;color:var(--muted)}
.wf-legend span{display:inline-flex;align-items:center;gap:6px}
.wf-sw{width:13px;height:13px;border-radius:3px;border:1.5px solid var(--line);background:var(--panel);flex:none}
.wf-sw.proc{border-color:var(--accent)}
.wf-sw.store{background:var(--hover);border-style:dashed;border-color:var(--muted2)}
.wf-sw.guard{border-color:var(--warn);background:var(--warn-bg)}
.wf-sw.kill{border-color:var(--down);background:color-mix(in srgb,var(--down) 14%,transparent)}

.wf-lane{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--seg-track);padding:16px 16px 18px}
.wf-lane-head{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg);margin-bottom:14px}
.wf-lane-head .docs-dim{text-transform:none;letter-spacing:0;font-weight:500}

.wf-node{border:1.5px solid var(--line);border-radius:var(--radius-lg);background:var(--panel);
  padding:10px 14px;max-width:540px;position:relative}
.wf-node .t{font-size:13.5px;font-weight:600;color:var(--fg)}
.wf-node .t .n{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--accent);margin-right:4px}
.wf-node .d{font-size:12.5px;color:var(--muted);margin-top:2px;max-width:60ch}
.wf-node.proc{border-color:var(--accent)}
.wf-node.guard{border-color:var(--warn);background:linear-gradient(0deg,var(--warn-bg),var(--warn-bg)),var(--panel)}
.wf-node.guard .t .n{color:var(--warn)}
.wf-node.kill{border-color:var(--down);background:linear-gradient(0deg,color-mix(in srgb,var(--down) 10%,transparent),color-mix(in srgb,var(--down) 10%,transparent)),var(--panel)}
.wf-node.kill .t .n{color:var(--down)}
.wf-node.store{border-style:dashed;border-color:var(--muted2);background:var(--elevated)}
.wf-node.store .t{font-family:var(--mono);font-size:12px}
.wf-tag{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.07em;
  padding:1px 7px;border-radius:999px;border:1px solid var(--warn);color:var(--warn);margin-left:6px;vertical-align:1px}
.wf-tag.kill{border-color:var(--down);color:var(--down)}

.wf-arr{width:2px;height:18px;background:var(--border);margin-left:36px;position:relative}
.wf-arr::after{content:"";position:absolute;bottom:-1px;left:-4px;border:5px solid transparent;
  border-top-color:var(--border);border-bottom:none}
.wf-arr .lbl{position:absolute;left:12px;top:50%;transform:translateY(-58%);
  font-family:var(--mono);font-size:10.5px;color:var(--muted2);white-space:nowrap}
.wf-between{display:flex;align-items:center;gap:12px;margin:4px 0 4px 36px;padding:12px 0}
.wf-between .stem{width:2px;align-self:stretch;background:var(--border);position:relative;flex:none}
.wf-between .stem::after{content:"";position:absolute;bottom:-1px;left:-4px;border:5px solid transparent;
  border-top-color:var(--border);border-bottom:none}
.wf-between .why{font-family:var(--mono);font-size:11.5px;color:var(--muted)}

.wf-eps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.wf-ep{border:1.5px solid var(--accent);border-radius:var(--radius-lg);background:var(--panel);padding:10px 12px}
.wf-ep .m{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--accent);word-break:break-all}
.wf-ep .d{font-size:12px;color:var(--muted);margin-top:3px}
.docs-badge.live{color:var(--up);background:rgba(38,166,154,.14)}

.pc-msgs{color:var(--muted2);font-size:12px;margin-left:6px;font-variant-numeric:tabular-nums;white-space:nowrap}

.acc-btn{font-size:11px;padding:1px 8px;margin-left:8px;border:1px solid var(--line);
  border-radius:var(--radius);color:var(--muted);vertical-align:1px}
.acc-btn:hover{color:var(--accent);border-color:var(--accent)}
.sn-imm{white-space:nowrap;font-variant-numeric:tabular-nums}
.sn-imm .imm-ok{color:var(--up);cursor:default}
.sn-imm .imm-risk{color:var(--down);font-weight:600;cursor:default}

.sn-imm .imm-warn{color:#d89614;cursor:default}
[data-mode="light"] .sn-imm .imm-warn{color:#d48806}
.sn-imm .imm-safe{color:var(--muted2);cursor:default}

.sn-cell .imm-mark{margin-left:6px;font-size:12px;cursor:default;vertical-align:middle}
.mb-head .imm-mark{margin-left:8px;font-size:12px;cursor:default}

/* subnets: TMC-style coloring — SN id gold, name white, immune indigo, risk red */
.sn-cell .sn-id{color:#e7b416}
[data-mode="light"] .sn-cell .sn-id{color:#a87900}
.sn-cell b{color:#fff}
[data-mode="light"] .sn-cell b{color:rgba(20,26,34,.95)}
.imm-mark{display:inline-flex;align-items:center;gap:4px}
.imm-mark .imm-svg{width:14px;height:14px;vertical-align:-2px}
.imm-mark.imm-ok{color:#818cf8}
[data-mode="light"] .imm-mark.imm-ok{color:#4f46e5}
.imm-mark.imm-risk{color:var(--down)}
.sn-lock{white-space:nowrap;color:var(--muted)}

/* subnets: keep the name column from hogging the extra card width */
.sn-table{table-layout:fixed}
.sn-table th:nth-child(1){width:15%}
.sn-table th:nth-child(2){width:7%}
.sn-table th:nth-child(3){width:6%}
.sn-table th:nth-child(4){width:7%}
.sn-table th:nth-child(5){width:8%}
.sn-table th:nth-child(6){width:9%}
.sn-table th:nth-child(7){width:9%}
.sn-table th:nth-child(8){width:8%}
.sn-table th:nth-child(9){width:10%}
.sn-table th:nth-child(10){width:8%}
.sn-table th:nth-child(11){width:9%}
.sn-table th:nth-child(12){width:4%}
.sn-mcap{white-space:nowrap;color:var(--fg)}
.sn-spark .spark{display:block;margin-left:auto;opacity:.9}
.sn-pct{color:var(--muted2);font-size:11px}

/* TMC-style lock cells: dot + τvalue, '% of stake' beneath */
.sn-lock .lk{display:flex;align-items:center;justify-content:flex-end;gap:6px;color:var(--fg);
  font-variant-numeric:tabular-nums}
.sn-lock .lk-dot{width:7px;height:7px;border-radius:50%;flex:none}
.sn-lock .lk-dot.lk-low{background:#eab308}   /* 0-20%: warning */
.sn-lock .lk-dot.lk-mid{background:#a5b4fc}   /* 20-50%: medium */
.sn-lock .lk-dot.lk-high{background:#4ade80}  /* 50%+: high commitment */
.sn-lock .lk-dot.lk-na{background:var(--muted2)}
.sn-lock .lk-pct{color:var(--muted2);font-size:11px;margin-top:1px}

/* people column: one row per platform (discord, then X) */
.sn-ppl .pl-row{display:flex;align-items:center;gap:4px;min-height:22px}
.sn-ppl .pl-row + .pl-row{margin-top:3px}
.sn-ppl .pl-ico{width:12px;height:12px;flex:none;display:inline-flex;margin-right:2px}
.sn-ppl .pl-ico svg{width:12px;height:12px}
.sn-ppl .pl-d{color:#5865f2}
.sn-ppl .pl-x{color:var(--muted)}
[data-mode="light"] .sn-ppl .pl-x{color:rgba(20,26,34,.7)}
.sn-age{white-space:nowrap}
.sn-dage{display:flex;align-items:center;justify-content:flex-end;gap:3px;margin-top:2px;font-size:10px;color:#5865f2;opacity:.85}
.sn-dage svg{width:10px;height:10px;flex:none;fill:currentColor}

.imm-mark.imm-closed{color:#d89614}
[data-mode="light"] .imm-mark.imm-closed{color:#ad6800}

.lifecycle-msg{font-size:12px;margin-right:12px;white-space:nowrap;cursor:pointer}
.lifecycle-msg:hover .lc-closed{text-decoration:underline;text-underline-offset:2px}
.lifecycle-msg .lc-closed{color:#d89614;font-variant-numeric:tabular-nums}

.mcap-msg{color:var(--fg);font-size:15px;font-weight:700;margin-right:12px;white-space:nowrap;
  font-variant-numeric:tabular-nums;cursor:help;letter-spacing:.2px}

/* styled toolbar tooltip (replaces the slow native title) */
.tt-pop{position:fixed;z-index:200;background:var(--elevated);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:9px 12px;color:var(--fg);font-size:12px;line-height:1.55;
  white-space:pre;box-shadow:var(--shadow);pointer-events:none;max-width:420px}

/* ===== bots page ===== */
.bots-main{position:absolute;top:var(--topbar);left:0;right:0;bottom:0;overflow:auto;background:var(--bg);padding:16px}
.bots-card{max-width:1000px;margin:0 auto 16px}
.bot-hint{font-size:12px;font-weight:400;margin-left:10px}
.bot-card{border:1px solid var(--line);border-radius:var(--radius-lg);padding:14px 16px;margin-bottom:12px;background:var(--bg)}
.bot-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.bot-id{font-family:ui-monospace,monospace;font-size:13px;color:var(--accent);font-weight:600}
.bot-title{margin-left:8px;font-weight:600}
.bot-tag{margin-left:8px;font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;border:1px solid var(--line);color:var(--muted2)}
.bot-tag.tchainvalidated{border-color:var(--up);color:var(--up)}
.bot-tag.tneedseval{border-color:#d89614;color:#d89614}
.bot-desc{color:var(--muted);font-size:13px;margin:8px 0;max-width:78ch}
.bot-query{font-size:12px;color:var(--muted2);margin-bottom:8px}
.bot-query .k{text-transform:uppercase;letter-spacing:.08em;font-size:10px;margin-right:6px}
.bot-query code{background:var(--hover);padding:2px 6px;border-radius:4px;color:var(--fg)}
.bot-stats{display:flex;align-items:center;gap:14px;font-size:12px;color:var(--muted)}
.bot-stats .st b{color:var(--fg)}
.bot-stats .st.bad b{color:var(--down)}
.bot-btns .btn-ghost{margin-left:6px}
.bot-see{margin-left:auto;color:var(--accent)}
.bot-log{white-space:pre-wrap;font-family:ui-monospace,monospace;font-size:11.5px;color:var(--muted);
  background:var(--seg-track);border:1px solid var(--line);border-radius:var(--radius);padding:10px;margin-top:10px;max-height:170px;overflow:auto}
.res-row{border-top:1px solid var(--line);padding:10px 0}
.res-row.bad{background:rgba(239,83,80,.06)}
.res-meta{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted2)}
.res-author{color:var(--fg)}
.res-conf{margin-left:auto;font-variant-numeric:tabular-nums}
.res-fields{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0}
.pf{font-size:11.5px;background:var(--hover);border-radius:4px;padding:2px 7px;color:var(--fg)}
.pf .k{color:var(--muted2);margin-right:5px;text-transform:uppercase;font-size:9.5px;letter-spacing:.06em}
.res-note{color:var(--down);font-size:12px;margin:3px 0}
.res-text{color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}

.bot-off{color:var(--down);font-size:11px;border:1px solid var(--down);border-radius:999px;padding:1px 7px;margin-left:6px}
.bot-cfg{border:1px solid var(--line);border-radius:var(--radius);background:var(--seg-track);padding:12px;margin:8px 0}
.cfg-grid{display:grid;grid-template-columns:190px 240px 1fr;gap:8px 12px;align-items:center}
.cfg-row{display:contents}
.cfg-k{font-size:12px;color:var(--fg)}
.cfg-row.changed .cfg-k{color:var(--accent)}
.cfg-k i{color:var(--accent);font-style:normal}
.cfg-help{font-size:11.5px;color:var(--muted2)}
.bot-cfg input[type=text],.bot-cfg input[type=number]{width:100%;height:28px;background:var(--panel);
  border:1px solid var(--border);border-radius:var(--radius);color:var(--fg);padding:2px 8px;
  font-family:ui-monospace,monospace;font-size:12px}
.bot-cfg input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px}
.cfg-btns{display:flex;align-items:center;gap:8px;margin-top:10px}
.cfg-msg{font-size:12px}
.cfg-msg.ok{color:var(--up)} .cfg-msg.bad{color:var(--down)}

.bot-src{margin-left:8px;font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 8px;border-radius:999px;font-weight:600}
.bot-src.src-discord{background:rgba(88,101,242,.16);color:#8b95f5}
.bot-src.src-chain{background:rgba(38,166,154,.16);color:var(--up)}

/* platform: channel-change feed (renames carry subnet lifecycle meaning) */
.ch-changes{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--seg-track);
  padding:10px 12px;margin:12px 0;max-height:300px;overflow:auto}
.cg-head{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:8px}
.cg-close{margin-left:auto}
.cg-pill{font-size:11px;padding:2px 8px;border-radius:999px}
.cg-pill.dereg{background:rgba(239,83,80,.16);color:var(--down)}
.cg-pill.claim{background:rgba(38,166,154,.16);color:var(--up)}
/* fixed columns — a flex row let long channel names wrap the whole feed into a mess */
.cg-row{display:grid;grid-template-columns:16px 190px minmax(0,1fr) auto 140px;align-items:center;gap:12px;
  padding:6px 0;font-size:12.5px;border-top:1px solid var(--line)}
.cg-ico{text-align:center;font-weight:700}
.cg-row.dereg .cg-ico{color:var(--down)}
.cg-row.claim .cg-ico{color:var(--up)}
.cg-row.add .cg-ico{color:var(--accent)}
.cg-row.rem .cg-ico,.cg-row.ren .cg-ico{color:var(--muted2)}
.cg-sn{display:flex;align-items:center;gap:6px;min-width:0}
.cg-names{display:flex;align-items:center;gap:6px;min-width:0}
.cg-old,.cg-new{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cg-old{color:var(--muted2);text-decoration:line-through}
.cg-arr{color:var(--muted2);flex:0 0 auto;font-size:11px}   /* "came from" — current is left of it */
.cg-new{color:var(--fg);font-weight:500}
.cg-gone{color:var(--down);font-weight:500}                  /* removed: current state is "gone" */
.cg-what{color:var(--muted);white-space:nowrap}
.cg-when{color:var(--muted2);font-size:11px;white-space:nowrap;text-align:right}
.cg-sname{color:var(--fg);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:1400px){.cg-row{grid-template-columns:16px 170px minmax(0,1fr) 140px;}
  .cg-what{grid-column:2/4;color:var(--muted2);font-size:11px}}

/* People page: filter + batch bar stay pinned while the (long) card list scrolls.
   Both live in one sticky wrapper so the batch bar always sits directly under the
   filter row — the filter row flex-wraps at narrow widths, so a fixed offset for a
   separately-sticky batch bar would drift. Negative side margins let the background
   span the .list-card padding, so cards can't show through underneath. */
.ppl-sticky{position:sticky;top:0;z-index:5;background:var(--panel);
  margin:0 -18px;padding:14px 18px 0;
  box-shadow:0 8px 10px -9px rgba(0,0,0,.55)}
.ppl-sticky .ppl-filter{margin:0}
.ppl-sticky .pbatch-bar{margin:8px 0 0}
.ppl-sticky::after{content:"";display:block;height:10px}   /* breathing room before the grid */

/* Signal page: watchlist + keyword manage buttons on one compact row (the chip lists
   they used to sit beside are hidden — they live in the dialogs now). */
.sig-managebar{position:relative;display:flex;justify-content:center;align-items:flex-start;gap:8px}
.tools-center{position:relative;z-index:2}
/* living sky backdrop (sky.js) — fills the WHOLE header block, edge to edge, navbar down to
   the marks strip; a soft side/bottom fade blends it into the page and keeps content legible */
.sig-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.sig-bg canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* centered clock (row 1) + a 2nd row holding the Tools toggle and the TAO price.
   No card — just a soft backdrop blur on the cluster's footprint so it stays readable over
   the busy trading backdrop (tools-panel dropdown is position:absolute, so it floats free). */
.tools-center{display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:5px 14px;border-radius:14px;
  background:rgba(9,12,22,.30);                                  /* dark theme: dark tint so light text reads over a bright day sky */
  backdrop-filter:blur(10px) saturate(1.15);-webkit-backdrop-filter:blur(10px) saturate(1.15)}
[data-mode="light"] .tools-center{background:rgba(250,251,255,.46)}   /* light theme: light tint so dark text reads over a dark night sky */
.sig-clock,.tao-price{text-shadow:0 1px 3px rgba(0,0,0,.28)}
[data-mode="light"] .sig-clock,[data-mode="light"] .tao-price{text-shadow:0 1px 2px rgba(255,255,255,.55)}
/* 2nd row: Tools toggle + TAO price side by side */
.tools-row2{display:flex;align-items:center;gap:9px}
/* TAO price + 24h change — taostats style: price · colored change pill */
.tao-tick{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-variant-numeric:tabular-nums;line-height:1}
.tao-price{font-size:13px;font-weight:800;color:var(--accent)}
.tao-chg{display:inline-flex;align-items:center;gap:2px;font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;color:var(--muted2);font-variant-numeric:tabular-nums}
.tao-chg.up{color:#2fd39a;background:rgba(38,180,140,.22);box-shadow:inset 0 0 0 1px rgba(47,211,154,.3)}
.tao-chg.dn{color:#ff6a5c;background:rgba(232,90,80,.22);box-shadow:inset 0 0 0 1px rgba(255,106,92,.3)}
.tao-tick:hover .tao-price{color:var(--accent-hover)}
.tools-toggle{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border-radius:999px;
  border:1px solid var(--border);background:var(--panel);color:var(--muted);cursor:pointer;
  transition:color .18s,border-color .18s,background .18s}
.tools-toggle:hover{color:var(--fg);border-color:var(--accent-hover)}
.tools-toggle svg{width:15px;height:15px}
.tools-toggle.open{color:var(--accent);border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 26%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent)}
/* DAY (sky-day): the Tools toggle flips to a LIGHT pill with dark text so it reads on the bright
   sky and fits the day theme (its default dark-panel + muted text washed out). Clock stays dark. */
.sky-day .tools-toggle{background:rgba(255,255,255,.85);color:#3a4a6b;border-color:rgba(255,255,255,.7)}
.sky-day .tools-toggle:hover{color:#17233f;border-color:#fff;background:#fff}
.sky-day .tools-toggle.open{color:#2f6fd0;border-color:#2f6fd0;background:rgba(255,255,255,.92);box-shadow:0 0 0 1px rgba(47,111,208,.3)}
/* the dropdown toolbox — centered under the clock, hidden by default */
.tools-panel{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);z-index:60;
  min-width:min(700px,94vw);max-width:94vw;padding:12px 16px;border-radius:var(--radius-lg);
  background:var(--elevated);border:1px solid var(--border);box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:10px}
.tools-panel[hidden]{display:none}
.tools-sec{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tools-lab{flex:none;width:88px;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2)}
.tools-vdiv{height:1px;background:var(--line)}
/* non-admins have no automation controls — hide that whole section (and its divider) */
html.not-admin .tools-vdiv,
html.not-admin .tools-panel > .tools-sec:last-child{display:none}

/* ---- tracker status pills (icon + value, instead of one run-on sentence) ---- */
#trk-status{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.trk-chip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;
  border-radius:12px;background:var(--elevated);border:1px solid var(--line);
  font-size:12px;line-height:1;white-space:nowrap}
.trk-chip i{font-style:normal;font-size:11px;opacity:.75}
.trk-chip b{font-weight:700;font-variant-numeric:tabular-nums;color:var(--fg)}
.trk-chip.good{background:rgba(38,166,154,.14);border-color:rgba(38,166,154,.45)}
.trk-chip.good b{color:var(--up)}
.trk-chip.warn{background:rgba(255,179,0,.14);border-color:rgba(255,179,0,.45)}
.trk-chip.warn b{color:#c98a00}
.trk-chip.bad{background:rgba(239,83,80,.14);border-color:rgba(239,83,80,.45)}
.trk-chip.bad b{color:var(--down)}
.trk-chip.off{opacity:.7}
.trk-chip.muted b{color:var(--muted)}

/* ---- tracker cycle countdown ring ---- */
.trk-ring{position:relative;width:26px;height:26px;flex:none;display:inline-flex;
  align-items:center;justify-content:center;cursor:default}
.trk-ring svg{width:26px;height:26px;transform:rotate(-90deg)}   /* start the sweep at 12 o'clock */
.trk-ring circle{fill:none;stroke-width:3}
.trk-ring-bg{stroke:var(--line)}
/* emerald→teal gradient stroke + a soft green glow — reads as a live/healthy progress dial */
.trk-ring-fg{stroke:url(#trk-grad);stroke-linecap:round;
  filter:drop-shadow(0 0 3px rgba(20,184,166,.6));
  transition:stroke-dashoffset .2s linear}                       /* matches the 200ms ticker */
.trk-ring-t{position:absolute;font-size:9px;font-weight:800;color:var(--fg);
  font-variant-numeric:tabular-nums}
/* per-token rings (Discord): a small ring + account label per tracker token */
.sig-tokrings{display:inline-flex;align-items:center;gap:10px}
.tok-ring-wrap{display:inline-flex;flex-direction:column;align-items:center;gap:1px}
.sig-tokrings .tok-ring,.sig-tokrings .tok-ring svg{width:22px;height:22px}
.tok-ring-lbl{font-size:8px;font-weight:700;color:var(--muted2);max-width:56px;line-height:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* hot (primary) keeps the emerald→teal gradient; normal tokens get a distinct cyan stroke */
.tok-ring.tr-normal .trk-ring-fg{stroke:#38bdf8;filter:drop-shadow(0 0 3px rgba(56,189,248,.55))}

/* ---- retweet rendered in QUOTE FORM: retweeter heads the row, original nested ---- */
.rt-mark{font-size:11px;font-weight:700;color:var(--muted2);background:var(--hover);
  border-radius:9px;padding:1px 7px;white-space:nowrap;cursor:default}
/* reply-vs-original marker: an accent pill so a reply stands out from the grey retweet chip */
.reply-mark{font-size:11px;font-weight:700;color:var(--accent);background:var(--accent-bg);
  border-radius:9px;padding:1px 7px;white-space:nowrap;cursor:default}
.rt-quote{border:1px solid var(--line);border-radius:var(--radius-lg);padding:9px 11px;
  background:var(--bg);margin-top:2px}
.rt-quote:hover{border-color:var(--border)}
.rt-qhead{display:flex;align-items:center;gap:7px;margin-bottom:6px;min-width:0}
.rt-qav{width:22px;height:22px;border-radius:50%;object-fit:cover;flex:none}
.rt-qauthor{font-weight:700;font-size:13px;color:var(--fg);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.rt-qtime{color:var(--muted2);font-size:11px;white-space:nowrap;margin-left:auto}
.rt-qlink{color:var(--muted2);font-size:12px;text-decoration:none;flex:none}
.rt-qlink:hover{color:var(--accent)}
.rt-qbody{font-size:13.5px;line-height:1.5}
/* X preview card (renderEmbed / quoteCard → xPreviewCard): a nested tweet drawn like a
   Telegram / Discord link preview — accent bar, site line, bold "Name (@handle) on X" title,
   the text, then media (video poster + ▶) and the post time. One look for retweets (both
   storage forms) and quotes. */
.x-prev{max-width:none;border-left:3px solid var(--accent);border-radius:6px;padding:7px 12px 9px;
  background:var(--accent-bg);                                   /* fallback: the theme's accent wash */
  background:color-mix(in srgb,var(--accent) 9%,transparent)}   /* a faint tint of the bar colour, like Telegram */
.xp-site{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--accent);
  margin-bottom:2px;min-width:0}
.xp-kind{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--muted2);background:var(--hover);
  border-radius:9px;padding:1px 7px;white-space:nowrap;cursor:default}
.xp-title{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;margin-bottom:4px;min-width:0}
.xp-title a,.xp-title>span{color:var(--fg);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xp-title a:hover{text-decoration:underline}
.xp-av{width:18px;height:18px;border-radius:50%;object-fit:cover;flex:none}
.xp-body{font-size:13.5px;line-height:1.5;white-space:pre-wrap}
.xp-headline{font-size:15px;font-weight:700;line-height:1.3;margin:1px 0 5px}
.xp-headline a{color:var(--fg);text-decoration:none}
.xp-headline a:hover{text-decoration:underline}
.x-prev .att-wrap,.x-prev .att-vid{display:block;margin-top:8px;border-radius:6px}
.x-prev .att-vid{margin-top:0}
.x-prev .em-img,.x-prev .att-img{margin-top:0;width:100%;max-width:100%;max-height:360px;object-fit:cover;border-radius:6px}
.x-prev-article .att-wrap{margin-bottom:10px}         /* breathing room between an article cover and its text */
.x-prev .embed{max-width:none}                       /* a quote nested inside the card fills it */
/* clickable avatars -> account dialog */
.av-click{cursor:pointer;transition:box-shadow .12s}
.av-click:hover{box-shadow:0 0 0 2px var(--accent)}

/* ===== transaction in flight ===== */
/* A signed extrinsic waits for finalization (often 10-30s+), so the wait gets a blocking
   overlay with a live elapsed timer — a silent disabled button reads as "nothing happened"
   and invites a second click / tab close mid-transaction. */
@keyframes txspin{to{transform:rotate(360deg)}}
@keyframes txfade{from{opacity:0}to{opacity:1}}
.tx-overlay{position:fixed;inset:0;z-index:1300;display:flex;align-items:center;
  justify-content:center;background:rgba(0,0,0,.62);backdrop-filter:blur(2px);
  animation:txfade .15s ease}
.tx-box{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:26px 34px;text-align:center;min-width:290px;max-width:92vw}
.tx-spin{width:38px;height:38px;margin:0 auto 14px;border-radius:50%;
  border:3px solid var(--line);border-top-color:var(--accent);animation:txspin .8s linear infinite}
.tx-box.buy .tx-spin{border-top-color:var(--up)}
.tx-box.sell .tx-spin{border-top-color:var(--down)}
.tx-title{font-weight:700;font-size:15px;margin-bottom:5px}
.tx-sub{color:var(--muted);font-size:12.5px;line-height:1.5}
.tx-elapsed{font-variant-numeric:tabular-nums;font-weight:700;color:var(--fg)}
.tx-warn{margin-top:12px;font-size:11.5px;color:var(--muted2)}
/* nav-bar button spinner (inline, no overlay) */
.tb-btn.busy,.tb-swap-go.busy{position:relative;color:transparent!important}
.tb-btn.busy::after,.tb-swap-go.busy::after{content:"";position:absolute;inset:0;margin:auto;width:13px;height:13px;
  border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);
  animation:txspin .7s linear infinite}

/* ===== trade desk page (/trade) ===== */
.trade-main{position:absolute;top:var(--topbar);left:0;right:0;bottom:0;overflow:auto;
  background:var(--bg);padding:18px;display:flex;flex-direction:column;gap:18px}
.td-gate{max-width:620px;margin-inline:auto}
.td-gate code{background:var(--elevated);padding:1px 5px;border-radius:4px}
.td-mode{font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 8px;border-radius:9px;margin-left:8px;cursor:default}
.td-mode.dry{background:rgba(140,140,150,.18);color:var(--muted)}
.td-mode.armed{background:rgba(239,83,80,.18);color:var(--down)}
.td-stats{display:flex;gap:10px;flex-wrap:wrap}
.td-stat{flex:1;min-width:140px;background:var(--elevated);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:10px 12px;display:flex;flex-direction:column;gap:3px}
.td-stat .k{font-size:11px;color:var(--muted2);text-transform:uppercase;letter-spacing:.03em}
.td-stat b{font-size:17px;font-variant-numeric:tabular-nums}
.td-stat b.up{color:var(--up)} .td-stat b.down{color:var(--down)}
.td-buyrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.td-buyrow input{width:120px;height:32px;background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);color:var(--fg);padding:0 10px;font-size:14px;outline:none}
.td-buyrow input:focus{border-color:var(--accent)}
/* MUI table pass (trade page): airier rows, Material head, clean dividers + row hover */
.td-table td,.td-table th{vertical-align:middle}
.td-table{font-size:13px}
.td-table th{background:var(--panel);color:var(--muted2);font-size:10.5px;font-weight:600;cursor:default;
  text-transform:uppercase;letter-spacing:.06em;padding:11px 16px;box-shadow:inset 0 -1px 0 var(--border)}
.td-table td{padding:12px 16px}
.td-table th,.td-table td{text-align:left}                 /* text columns left … */
.td-table th.num,.td-table td.num{text-align:right}        /* … numbers right */
.td-table tbody tr{box-shadow:inset 0 -1px 0 var(--line);transition:background .12s}
.td-table tbody tr:hover{background:var(--hover)}
.td-table tbody tr:last-child{box-shadow:none}
.td-table .num{font-variant-numeric:tabular-nums}
.td-table .up{color:var(--up)} .td-table .down{color:var(--down)}
.td-table small{opacity:.8;color:var(--muted2)}
.td-idc{text-align:left}
.td-time{text-align:left;color:var(--muted2);font-variant-numeric:tabular-nums;white-space:nowrap}
/* the trade history reuses .sn-table but has its OWN 8 columns — set widths that override the
   subnets-page th:nth-child rules (which else leave a dead gap and collide the id with the time) */
.td-table thead th:nth-child(1){width:7%}    /* id   */
.td-table thead th:nth-child(2){width:15%}   /* time + hold chip */
.td-table thead th:nth-child(3){width:7%}    /* subnet */
.td-table thead th:nth-child(4){width:15%}   /* method */
.td-table thead th:nth-child(5){width:14%}   /* buy  */
.td-table thead th:nth-child(6){width:14%}   /* sell */
.td-table thead th:nth-child(7){width:9%}    /* pnl  */
.td-table thead th:nth-child(8){width:19%}   /* note */
.td-table td.td-idc{white-space:nowrap;padding-right:18px}
/* hold-time chip next to the trade time */
.td-held{display:inline-block;margin-left:6px;font-size:9.5px;font-weight:600;color:var(--muted);
  background:color-mix(in srgb,var(--muted2) 16%,transparent);border-radius:6px;padding:1px 6px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.td-ids{display:inline-flex;align-items:center;gap:8px;line-height:1.4}
.td-tid{font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums;letter-spacing:.06em;
  color:var(--fg);cursor:pointer;text-decoration:none;transition:color .12s}
.td-tid:hover{color:var(--accent)}
.td-tid-link:hover{text-decoration:underline}
.td-staked{line-height:1.25}
.td-staked small{font-size:11px}
.td-sell{height:26px;padding:0 12px;border-radius:var(--radius);font-size:12px}
.td-act{font-weight:700;text-transform:uppercase;font-size:11px;padding:1px 7px;border-radius:9px}
.td-act.td-buy{background:rgba(38,166,154,.18);color:var(--up)}
.td-act.td-sell{background:rgba(239,83,80,.18);color:var(--down)}
.td-failed{opacity:.65}
/* AUTO vs manual trade badge (history rows) */
.td-method{white-space:nowrap}
.td-src{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;padding:1px 6px;border-radius:5px;vertical-align:1px}
.td-src-auto{background:var(--accent-bg);color:var(--accent)}
.td-src-manual{background:color-mix(in srgb,var(--muted2) 20%,transparent);color:var(--muted)}
/* triggering-message dev id (news_id) on auto rows — click to copy */
.td-devid{font-family:var(--mono);font-size:10px;color:var(--muted2);background:none;border:0;
  cursor:pointer;padding:0 2px;vertical-align:1px}
.td-devid:hover{color:var(--accent);text-decoration:underline}
/* on-chain lifecycle trigger chip (auto rows with no news message) — click for the event dialog */
.td-trigger{font-family:var(--mono);font-size:10px;color:var(--accent);background:var(--accent-bg);
  border:0;border-radius:5px;padding:1px 6px;vertical-align:1px;white-space:nowrap;cursor:pointer}
.td-trigger:hover{filter:brightness(1.08);text-decoration:underline}
/* history day filter — small dropdown in the section header */
/* custom Material day-filter dropdown (native <select> can't theme its open menu) */
.td-daysel-wrap{position:relative;display:inline-block;margin-left:10px;vertical-align:middle}
/* ◀ ▶ day steppers flanking the day dropdown */
.td-daynav{border:1px solid var(--border);background:var(--panel);color:var(--muted);font-size:10px;line-height:1;
  width:24px;height:26px;border-radius:var(--radius);cursor:pointer;vertical-align:middle;
  display:inline-flex;align-items:center;justify-content:center}
.td-daynav:hover:not(:disabled){border-color:var(--accent);color:var(--fg)}
.td-daynav:disabled{opacity:.35;cursor:default}
#td-day-prev{margin-right:5px}
#td-day-next{margin-left:5px}
.td-daysel{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:12px;font-weight:500;
  padding:6px 10px;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg);color:var(--fg);
  cursor:pointer;transition:border-color .15s,box-shadow .15s}
.td-daysel:hover{border-color:var(--muted)}
.td-daysel[aria-expanded="true"]{outline:none;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.td-daysel-caret{opacity:.6;flex:none;transition:transform .15s}
.td-daysel[aria-expanded="true"] .td-daysel-caret{transform:rotate(180deg)}
.td-daysel-menu{position:absolute;top:calc(100% + 5px);left:0;min-width:190px;max-height:340px;overflow:auto;
  z-index:70;margin:0;padding:6px;list-style:none;background:var(--elevated);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:0 10px 28px -6px rgba(0,0,0,.5)}
.td-daysel-menu[hidden]{display:none}
.td-daysel-opt{padding:7px 12px;border-radius:var(--radius);font-size:12.5px;color:var(--fg);cursor:pointer;
  white-space:nowrap;transition:background .1s,color .1s}
.td-daysel-opt:hover{background:var(--hover)}
.td-daysel-opt.sel{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);font-weight:600}
.td-daysel-opt.sel:hover{background:color-mix(in srgb,var(--accent) 24%,transparent)}
.td-daysel-div{height:1px;background:var(--border);margin:5px 6px;padding:0}
/* per-day header row in the history table (date · N trades · day net PnL) */
.td-dayhdr td{background:transparent;font-weight:600;font-size:11.5px;color:var(--fg);
  border-top:1px solid var(--border);padding:15px 16px 7px}
.td-dayhdr .muted{font-weight:400;color:var(--muted2)}
.td-note{max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.td-histtog{margin-left:12px;font-size:12px;font-weight:400;color:var(--muted)}

/* ===== nav-bar manual trade form (renders only when TRADE_TOKEN is set) ===== */
.tradebar{display:flex;flex-direction:column;align-items:stretch;gap:0;
  margin:0 12px 0 auto;padding:0 12px;border:none;
  border-radius:var(--radius-lg);position:relative;isolation:isolate;
  /* 2.5D paper tile. On DARK the bar is near-black, so drop shadows are invisible —
     elevation has to come from the surface being LIGHTER than the background (Material
     dark-theme rule) plus a light edge rim. On light it's the opposite (drop shadow). */
  background:var(--elevated);                     /* fallback if color-mix() unsupported */
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--elevated) 72%, #fff) 0%,
    var(--elevated) 52%,
    color-mix(in srgb, var(--elevated) 82%, #000) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.09),        /* edge rim — separates the tile from the dark bar */
    inset 0 1px 0 rgba(255,255,255,.18),          /* bright raised top edge */
    inset 0 -1px 0 rgba(0,0,0,.40),               /* recessed bottom edge */
    0 4px 10px rgba(0,0,0,.55);                    /* lift (subtle on dark, real on lighter bars) */
  transition:box-shadow .15s,transform .15s}
[data-mode="light"] .tradebar{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(30,40,60,.10),
    0 2px 5px rgba(30,40,60,.14),
    0 10px 20px -6px rgba(30,40,60,.20)}
/* no static border — the 2.5D tile shadow defines the edge; dry/armed distinction is
   carried by the LIVE pill and the gold running streak */
/* two stacked rows; a hairline splits controls from the balance read-out */
.tb-row{display:flex;align-items:center;gap:8px}
.tb-main .tb-noswap{margin-left:auto}   /* push the lock + key settings pair to the right edge */
/* when the news button is shown it starts the right group (news + lock + key), so it takes the auto margin */
.tb-main .tb-news:not([hidden]),.tb-main .tb-lc:not([hidden]){margin-left:auto}
.tb-main .tb-news:not([hidden]) ~ .tb-noswap,.tb-main .tb-lc:not([hidden]) ~ .tb-noswap{margin-left:0}
.tb-main{height:30px}
/* a beveled crease between the rows (dark line + light lip below) for the tile look */
.tb-info{height:24px;gap:8px;border-top:1px solid rgba(0,0,0,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
[data-mode="light"] .tb-info{border-top-color:rgba(30,40,60,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}

/* ARMED = live trading. Dota-style autocast toggle: a highlight runs around the outline.
   Drawn as an SVG stroke dash rather than a rotating conic-gradient: a conic gradient
   turns at constant ANGULAR speed, so on a wide/short box the highlight crawls along the
   long horizontal edges (small radius) and whips around the ends (large radius). A dash
   travelling a path moves at constant LINEAR speed, so it looks even on every edge. */
.tradebar .tb-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  pointer-events:none;z-index:0;display:none}
/* the running outline only shows while a position is OPEN (JS toggles .pos-active) */
.tradebar.pos-active .tb-ring{display:block}
/* stroke colour / width / opacity are set PER LAYER in tradebar.js to build the gradient
   tail — don't set them here or every segment would look identical again */
.tb-ring rect{fill:none;stroke-linecap:round}
.tb-ring{filter:drop-shadow(0 0 5px rgba(245,179,1,.55))}   /* glow the whole streak once */
/* controls sit above the ring. MUST exclude .tb-ring: `>*` outranks `.tb-ring`, so it
   was overriding the SVG's position:absolute and laying the ring out as a flex item
   (which made the running outline invisible). */
.tradebar.armed>*:not(.tb-ring){position:relative;z-index:1}
.tradebar>.tb-row{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){                  /* respect motion sensitivity */
  .tb-ring rect{animation:none!important;opacity:.6}
}
/* balance-refresh countdown ring — small arc that sweeps over the poll interval */
.tb-poll{position:relative;width:14px;height:14px;flex:none;display:inline-flex;
  align-items:center;justify-content:center;cursor:default;z-index:1}
.tb-poll svg{width:14px;height:14px;transform:rotate(-90deg)}   /* start at 12 o'clock */
.tb-poll circle{fill:none;stroke-width:2.4}
.tb-poll-bg{stroke:var(--line)}
.tb-poll-fg{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset .1s linear}
.tradebar.armed .tb-poll-fg{stroke:var(--down)}   /* live: match the armed accent */

.tradebar input{width:60px;height:22px;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius);color:var(--fg);padding:0 8px;font-size:12px;outline:none}
.tradebar input:focus{border-color:var(--accent)}
.tradebar input[type=number]{-moz-appearance:textfield}
.tradebar input::-webkit-outer-spin-button,.tradebar input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* locked to the held subnet while a position is open — reads as a fixed label, not a field */
.tradebar input:read-only{background:var(--elevated);color:var(--muted);cursor:not-allowed;
  border-color:var(--line)}
.tradebar input:read-only:focus{border-color:var(--line)}
.tb-secs{font-size:10px;color:#34d399;font-variant-numeric:tabular-nums;white-space:nowrap;
  padding:1px 6px;border:1px solid rgba(52,211,153,.4);border-radius:999px}
.tb-btn{height:22px;padding:0 14px;border-radius:var(--radius);font-size:12px;font-weight:600;
  letter-spacing:.03em;text-transform:uppercase;border:0;color:#fff;cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.28);transition:filter .12s,box-shadow .12s}
/* Buy = green, Sell = red — muted (mixed with dark navy) to match the marked-card buttons, not the vivid raw token */
.tb-buy{background:color-mix(in srgb,var(--up) 62%,#0a1020)}
.tb-sell{background:color-mix(in srgb,var(--down) 66%,#0a1020)}
.tb-buy:hover,.tb-sell:hover{filter:brightness(1.1);box-shadow:0 2px 6px rgba(0,0,0,.34)}
/* SWAP control — the target sn# field and its ⇌ rotate button INTEGRATED into one MUI-style outlined
   box: same neutral outline + radius as the sn# input, accent border on focus, and the ⇌ as a trailing
   icon-button adornment with a Material hover (direct alpha rotation) */
.tb-swapchip{display:inline-flex;align-items:center;height:22px;overflow:hidden;
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);transition:border-color .15s}
.tb-swapchip:focus-within{border-color:var(--accent)}
.tb-swapchip .tb-swap-nu{width:40px;height:100%;border:0;background:transparent;border-radius:0;padding:0 2px 0 8px}
.tb-swap-go{align-self:stretch;width:24px;border:0;background:transparent;color:var(--accent);
  cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;transition:background .12s}
.tb-swap-go:hover{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.tb-swap-go:active{background:color-mix(in srgb,var(--accent) 26%,transparent)}
.tb-swap-go svg{width:15px;height:15px;display:block}
.tb-swapchip.dis{opacity:.4;pointer-events:none}   /* no open position -> nothing to swap */
.tb-btn:disabled{opacity:.5;cursor:default;filter:none}
.tb-key{height:22px;width:22px;border:0;border-radius:50%;background:transparent;color:var(--muted);
  cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;
  transition:background .12s,color .12s}
.tb-key:hover{background:color-mix(in srgb,var(--fg) 12%,transparent);color:var(--fg)}
.tb-key svg{width:16px;height:16px;display:block}
/* per-position AUTO-SWAP lock (Material IconButton): open padlock = auto-swap armed; .on = closed red padlock = LOCKED */
.tb-noswap{height:22px;width:22px;border:0;border-radius:50%;background:transparent;color:var(--muted);
  cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;
  transition:background .12s,color .12s}
.tb-noswap:hover{background:color-mix(in srgb,var(--fg) 12%,transparent);color:var(--fg)}
.tb-noswap.on{color:var(--down)}
.tb-noswap.on:hover{background:color-mix(in srgb,var(--down) 16%,transparent)}
.tb-noswap svg{width:16px;height:16px;display:block}
/* 'news' / 'event' buttons — what triggered an auto-position (accent so they stand out) */
.tb-news,.tb-lc{height:22px;width:22px;border:0;border-radius:50%;background:transparent;color:var(--accent);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.tb-news[hidden],.tb-lc[hidden]{display:none}
.tb-news:hover,.tb-lc:hover{background:var(--accent-bg)}
.tb-news svg,.tb-lc svg{width:16px;height:16px;display:block}
/* triggering-news dialog (opened from the toolbox news button) */
.tbnews-overlay{position:fixed;inset:0;z-index:450;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.5);padding:20px}
.tbnews-overlay[hidden]{display:none}
.tbnews-dialog{position:relative;width:min(460px,94vw);max-height:82vh;overflow:auto;padding:16px 16px 18px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.tbnews-x{position:absolute;top:8px;right:10px;width:26px;height:26px;border:0;background:none;
  color:var(--muted2);font-size:14px;border-radius:var(--radius);cursor:pointer}
.tbnews-x:hover{background:var(--hover);color:var(--fg)}
.tbnews-load{color:var(--muted);font-size:13px;text-align:center;padding:24px 0}
.tbnews-head{display:flex;gap:10px;align-items:center;margin-bottom:11px}
.tbnews-av{width:34px;height:34px;border-radius:50%;flex:none;object-fit:cover}
.tbnews-av-i{display:grid;place-items:center;background:var(--accent);color:#fff;font-weight:700;font-size:15px}
.tbnews-hb{min-width:0;flex:1}
.tbnews-au{font-weight:700;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbnews-meta{font-size:11px;color:var(--muted);margin-top:1px}
.tbnews-nid{margin-left:auto;flex:none;font-family:var(--mono);font-size:11px;color:var(--muted2)}
.tbnews-text{font-size:13.5px;line-height:1.55;color:var(--fg);white-space:pre-wrap;word-break:break-word;
  max-height:46vh;overflow-y:auto;padding-right:4px}
.tbnews-text::-webkit-scrollbar{width:8px}
.tbnews-text::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
.tbnews-link{display:inline-block;margin-top:12px;font-size:12.5px;color:var(--accent);text-decoration:none;font-weight:600}
.tbnews-link:hover{text-decoration:underline}
/* second-row position read-out: buy px · now px · pnl% · held  (+ the poll ring) */
.tb-bal{font-size:12px;color:var(--muted);white-space:nowrap;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px}
.tb-bal b,.tb-bal .tb-px{color:var(--fg);font-variant-numeric:tabular-nums;font-weight:600}
/* staked τ value (the amount at risk) + alpha held, shown ahead of the price pair */
.tb-bal .tb-val{color:var(--fg);font-weight:700;font-variant-numeric:tabular-nums}
.tb-bal.up .tb-val{color:var(--up)} .tb-bal.dn .tb-val{color:var(--down)}
.tb-amt{color:var(--muted2);font-size:.82em;font-variant-numeric:tabular-nums}
/* ± profit/loss in τ, next to the alpha */
.tb-bal .tb-plt{font-weight:700;font-size:.9em;font-variant-numeric:tabular-nums}
.tb-bal .tb-plt.up{color:var(--up)} .tb-bal .tb-plt.dn{color:var(--down)}
.tb-div{flex:none;width:1px;height:12px;background:var(--line);margin:0 3px}
.tb-pxlab{font-size:9px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted2);
  margin-left:2px}
.tb-pxlab:first-child{margin-left:0}
.tb-bal .tb-chg{font-weight:700;padding-left:2px}
.tb-bal.up .tb-chg{color:var(--up)} .tb-bal.dn .tb-chg{color:var(--down)}
.tb-bal .tb-chg.muted{color:var(--muted2);font-weight:500}
/* realizable ("net") PnL after own AMM impact — smaller/muted next to the spot % */
.tb-bal .tb-net{color:var(--muted2);font-weight:600;font-size:.82em;padding-left:5px;
  font-variant-numeric:tabular-nums;cursor:help}
.tb-held{color:var(--muted2);font-variant-numeric:tabular-nums;padding-left:1px}
.tb-flat{color:var(--muted2)}
.tb-err{color:var(--down);font-weight:600}

/* ===== People page: batch (multi-select) actions ===== */
/* the bar only takes space once something is selected */
.pbatch-bar{display:none;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px;
  padding:8px 10px;border:1px solid var(--accent);border-radius:var(--radius-lg);
  background:var(--accent-bg)}
.pbatch-bar.on{display:flex}
.pbatch-bar .spacer{flex:1}
.pb-count{font-weight:700;font-size:12px;color:var(--fg)}
.pb-sep{width:1px;height:18px;background:var(--border)}
.pbatch-bar button{height:28px;padding:0 10px;border-radius:var(--radius);font-size:12px}
.pc-check{width:16px;height:16px;flex:none;accent-color:var(--accent);cursor:pointer;margin-right:2px}
.pcard.pc-sel{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-bg)}

/* ===== whale activity left panel (chart page) — lightweight, theme-aware ===== */
:root{--whalebar:288px}
.whalebar{position:fixed;left:0;top:calc(var(--topbar) + var(--toolbar));bottom:0;
  width:var(--whalebar);background:var(--panel);border-right:1px solid var(--border);
  z-index:20;display:flex;flex-direction:column;transition:transform .18s ease}
body.wb-off .whalebar{transform:translateX(-100%)}
body.wb-on #view{left:var(--whalebar)}                    /* make room for the panel */
.wb-head{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line);flex:none}
.wb-title{font-weight:700;font-size:14px}
.wb-sub{color:var(--muted2);font-size:11px}
.wb-collapse{margin-left:auto;background:none;border:none;color:var(--muted);cursor:pointer;
  font-size:16px;line-height:1;padding:2px 7px;border-radius:5px}
.wb-collapse:hover{background:var(--hover);color:var(--fg)}
.wb-list{flex:1;overflow-y:auto;padding:8px;scrollbar-width:thin}
.wb-empty{color:var(--muted2);font-size:12px;padding:12px 6px}
.wb-row{display:block;width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;
  border:1px solid var(--line);border-left-width:3px;border-radius:9px;padding:8px 9px;
  margin-bottom:7px;background:var(--elevated);transition:background .1s,border-color .1s}
.wb-row:hover{border-color:var(--accent);background:var(--hover)}
.wb-row.buy{border-left-color:var(--up)}
.wb-row.sell{border-left-color:var(--down)}
.wb-row.flat{border-left-color:var(--muted2)}
.wb-row.new{box-shadow:inset 0 0 0 1px var(--accent-bg)}
.wb-top{display:flex;align-items:center;gap:7px}
.wb-ic{width:20px;height:20px;flex:none;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:700;background:var(--muted2);color:var(--panel)}
.wb-row.buy .wb-ic{background:var(--up);color:#06201a}
.wb-row.sell .wb-ic{background:var(--down);color:#2a0808}
.wb-ck{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.wb-amt{font-weight:700;font-size:13px;white-space:nowrap}
.wb-row.buy .wb-amt{color:var(--up)} .wb-row.sell .wb-amt{color:var(--down)}
.wb-bar{display:block;height:4px;border-radius:3px;background:var(--line);margin:6px 0 5px;overflow:hidden}
.wb-fill{display:block;height:100%;border-radius:3px;background:var(--muted2)}
.wb-row.buy .wb-fill{background:var(--up)} .wb-row.sell .wb-fill{background:var(--down)}
.wb-bot{display:flex;align-items:center;justify-content:space-between;gap:6px}
.wb-tag{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:150px}
.wb-meta{display:flex;align-items:center;gap:7px;flex:none}
.wb-imp{font-size:11px;font-weight:600}
.wb-imp.up{color:var(--up)} .wb-imp.dn{color:var(--down)}
.wb-ago{color:var(--muted2);font-size:11px;white-space:nowrap}
.wb-reopen{display:none;position:fixed;left:12px;bottom:14px;z-index:21;width:42px;height:42px;
  border-radius:50%;align-items:center;justify-content:center;font-size:19px;background:var(--elevated);
  border:1px solid var(--border);color:var(--fg);cursor:pointer;box-shadow:var(--shadow)}
body.wb-off .wb-reopen{display:flex}
/* narrow screens: hide the panel and reclaim the width (no mobile drawer — keeps it light) */
@media(max-width:900px){
  body.wb-on #view{left:0}
  .whalebar{transform:translateX(-100%)}
  body.wb-off .wb-reopen{display:none}
}

/* ===== position transaction scanner (chart page, RIGHT) — appears only while holding ===== */
:root{--txscan:300px}
.txscan{position:fixed;right:0;top:calc(var(--topbar) + var(--toolbar));bottom:0;
  width:var(--txscan);background:var(--panel);border-left:1px solid var(--border);
  z-index:20;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .18s ease}
body.ts-active.ts-open .txscan{transform:translateX(0)}
body.ts-active.ts-open #view{right:var(--txscan)}        /* make room for the panel */
.ts-head{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line);flex:none}
.ts-title{font-weight:700;font-size:14px;display:flex;align-items:center;gap:6px}
.ts-dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--up)}
body.ts-active.ts-open .ts-dot{animation:tspulse 1.8s ease-out infinite}   /* pulse only while live */
@keyframes tspulse{0%{box-shadow:0 0 0 0 rgba(38,166,154,.55)}70%{box-shadow:0 0 0 7px rgba(38,166,154,0)}100%{box-shadow:0 0 0 0 rgba(38,166,154,0)}}
.ts-sub{color:var(--muted2);font-size:11px}
.ts-collapse{margin-left:auto;background:none;border:none;color:var(--muted);cursor:pointer;
  font-size:16px;line-height:1;padding:2px 7px;border-radius:5px}
.ts-collapse:hover{background:var(--hover);color:var(--fg)}
.ts-list{flex:1;min-height:0;overflow-y:auto;padding:6px;scrollbar-width:thin;display:flex;flex-direction:column;gap:3px}
.ts-empty{color:var(--muted2);font-size:12px;padding:12px 6px}
/* reuse the Signal ticker's tx-chip rows; no ⚑ mark button here, so drop its 22px column */
.txscan .tx-chip{grid-template-columns:1fr auto}
/* owner-RELATIONSHIP overlay (mirrors the marked-signal flow-list, but on the RIGHT since the
   panel docks right): a recognition colour bar on each repeat owner's row + arcs linking them. */
.txscan .ts-list{position:relative;padding-right:16px}   /* right gutter holds the linking arcs */
.ts-links{position:absolute;top:0;right:0;pointer-events:none;overflow:visible}
.ts-links path{fill:none;stroke-width:1.5;opacity:.7;transition:opacity .1s}
.ts-links circle{opacity:.95;transition:opacity .1s}
.tx-chip[data-owner]{cursor:default}
/* hover a repeat-owner row → spotlight that owner, dim the rest (rows + other owners' arcs) */
.ts-list.ts-focus .tx-chip[data-ck]:not(.ts-hl){opacity:.32}
.tx-chip.ts-hl{background:var(--hover)}
.ts-list.ts-focus .ts-links path:not(.ts-on){opacity:.1}
.ts-list.ts-focus .ts-links circle:not(.ts-on){opacity:.12}
.ts-links path.ts-on{opacity:1;stroke-width:2}
.ts-row{display:block;width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;
  border:1px solid var(--line);border-left-width:3px;border-radius:9px;padding:8px 9px;
  margin-bottom:7px;background:var(--elevated);transition:background .1s,border-color .1s}
.ts-row:hover{border-color:var(--accent);background:var(--hover)}
.ts-row.buy{border-left-color:var(--up)}
.ts-row.sell{border-left-color:var(--down)}
.ts-row.flat{border-left-color:var(--muted2)}
.ts-row.new{box-shadow:inset 0 0 0 1px var(--accent-bg)}
.ts-top{display:flex;align-items:center;gap:7px}
.ts-ic{width:20px;height:20px;flex:none;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:700;background:var(--muted2);color:var(--panel)}
.ts-row.buy .ts-ic{background:var(--up);color:#06201a}
.ts-row.sell .ts-ic{background:var(--down);color:#2a0808}
.ts-ck{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.ts-amt{font-weight:700;font-size:13px;white-space:nowrap}
.ts-row.buy .ts-amt{color:var(--up)} .ts-row.sell .ts-amt{color:var(--down)}
.ts-bar{display:block;height:4px;border-radius:3px;background:var(--line);margin:6px 0 5px;overflow:hidden}
.ts-fill{display:block;height:100%;border-radius:3px;background:var(--muted2)}
.ts-row.buy .ts-fill{background:var(--up)} .ts-row.sell .ts-fill{background:var(--down)}
.ts-bot{display:flex;align-items:center;justify-content:space-between;gap:6px}
.ts-tag{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
.ts-meta{display:flex;align-items:center;gap:7px;flex:none}
.ts-imp{font-size:11px;font-weight:600}
.ts-imp.up{color:var(--up)} .ts-imp.dn{color:var(--down)}
.ts-ago{color:var(--muted2);font-size:11px;white-space:nowrap}
.ts-reopen{display:none;position:fixed;right:12px;bottom:14px;z-index:21;width:42px;height:42px;
  border-radius:50%;align-items:center;justify-content:center;font-size:19px;background:var(--elevated);
  border:1px solid var(--border);color:var(--fg);cursor:pointer;box-shadow:var(--shadow)}
body.ts-active:not(.ts-open) .ts-reopen{display:flex}
@media(max-width:900px){
  body.ts-active.ts-open #view{right:0}                  /* overlay instead of push on mobile */
}

/* retweet marker on the chart timeline + its tooltip label */
.news-mark.is-rt img{box-shadow:0 0 0 2px rgba(193,122,214,.85)}
.nt-rt{color:var(--muted2);font-weight:600;font-size:11px}

/* ---- auth: sign-in page + nav user chip + admin ---- */
.nav-user{color:var(--muted2);font-size:12px;margin-left:12px;align-self:center;
  max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.nav-admin{margin-left:8px}
.nav-logout{color:var(--muted)}
.nav-logout:hover{color:var(--accent)}

.auth-body{display:flex;min-height:100vh;align-items:center;justify-content:center}
.auth-wrap{width:100%;max-width:400px;padding:24px;display:flex;flex-direction:column;align-items:center;gap:14px}
.auth-card{width:100%;background:var(--panel);border:1px solid var(--border);border-radius:12px;
  padding:32px 28px;display:flex;flex-direction:column;gap:14px;align-items:stretch;
  box-shadow:0 8px 40px rgba(0,0,0,.35)}
.auth-logo{height:44px;width:auto;align-self:center;margin-bottom:2px}
.auth-title{margin:0;font-size:20px;font-weight:600;text-align:center;color:var(--fg)}
.auth-sub{margin:0 0 6px;font-size:13px;line-height:1.5;text-align:center;color:var(--muted)}
.auth-in{height:42px;padding:0 14px;background:var(--bg);border:1px solid var(--border);
  border-radius:8px;color:var(--fg);font-size:14px;outline:none}
.auth-in::placeholder{color:var(--muted2)}
.auth-in:hover{border-color:var(--accent-hover)}
.auth-in:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg)}
.auth-in:disabled{opacity:.6}
.auth-btn{height:42px;border:none;border-radius:8px;background:var(--accent);color:#fff;
  font-size:14px;font-weight:600;cursor:pointer;transition:background .12s}
.auth-btn:hover{background:var(--accent-hover)}
.auth-btn:disabled{opacity:.7;cursor:default}
.auth-msg{font-size:13px;line-height:1.5;padding:10px 12px;border-radius:8px;border:1px solid var(--border);
  background:var(--bg);color:var(--fg)}
.auth-msg.ok{border-color:#3f8f4f;background:rgba(63,143,79,.12)}
.auth-msg.err{border-color:#a44;background:rgba(170,68,68,.12)}
.auth-msg.info{border-color:var(--accent);background:var(--accent-bg)}
.auth-foot{margin:0;font-size:11px;color:var(--muted2);text-align:center}

.admin-main{max-width:900px;margin:0 auto;padding:28px 20px}
.admin-h1{margin:0 0 6px;font-size:22px;font-weight:600}
.admin-lede{margin:0 0 20px;font-size:13px;line-height:1.55;color:var(--muted);max-width:640px}
.admin-add{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.admin-add .auth-in{flex:1;min-width:220px}
.admin-sel{height:42px;padding:0 10px;background:var(--bg);border:1px solid var(--border);
  border-radius:8px;color:var(--fg)}
.admin-addbtn{width:auto;padding:0 20px}
.admin-tbl{width:100%;border-collapse:collapse;font-size:13px}
.admin-tbl th{text-align:left;padding:8px 10px;color:var(--muted2);font-weight:500;
  border-bottom:1px solid var(--border);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.admin-tbl td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
.admin-email{font-weight:500}
.admin-you{font-size:10px;color:var(--accent);background:var(--accent-bg);padding:1px 6px;border-radius:10px;margin-left:6px}
.admin-dim{color:var(--muted2);font-variant-numeric:tabular-nums;font-size:12px}
.admin-acts{text-align:right;white-space:nowrap}
.admin-act{height:26px;padding:0 10px;margin-left:6px;border:1px solid var(--border);border-radius:6px;
  background:var(--bg);color:var(--muted);font-size:12px;cursor:pointer}
.admin-act:hover{color:var(--accent);border-color:var(--accent)}
.admin-act.ok{color:#5cb96e;border-color:#3f8f4f}
.admin-act.danger:hover{color:#e06666;border-color:#a44}
.admin-empty{color:var(--muted2);padding:24px;text-align:center}
.pill{display:inline-block;padding:2px 9px;border-radius:11px;font-size:11px;font-weight:500}
.pill-ok{background:rgba(63,143,79,.18);color:#5cb96e}
.pill-warn{background:rgba(200,150,40,.18);color:#e0b050}
.pill-admin{background:var(--accent-bg);color:var(--accent)}
.pill-user{background:rgba(255,255,255,.08);color:var(--muted)}
.auth-link{color:var(--accent);text-decoration:none}
.auth-link:hover{text-decoration:underline}

/* ---- trend assistor: inline 7-day graph on subnet click ---- */
.trend-graph{margin:6px 0 10px;padding:10px 12px;background:var(--bg);border:1px solid var(--border);border-radius:8px}
.tg-head{display:flex;align-items:center;gap:10px;font-size:13px;margin-bottom:6px}
.tg-head .up{color:var(--up)}
.tg-head .down{color:var(--down)}
.tg-px{margin-left:auto;font-variant-numeric:tabular-nums}
.tg-open{height:24px;padding:0 10px;border:1px solid var(--border);border-radius:6px;
  background:var(--panel);color:var(--muted);font-size:12px;cursor:pointer}
.tg-open:hover{color:var(--accent);border-color:var(--accent)}
.tg-chart{width:100%}
.tg-svg{display:block;width:100%}

/* marked chip: retweet badge on the amplifier's avatar */
.mk-avwrap{position:relative;display:inline-flex}
.mk-rt{position:absolute;right:-3px;bottom:-3px;width:14px;height:14px;border-radius:50%;
  background:var(--panel);border:1px solid var(--border);color:var(--accent);
  font-size:9px;line-height:12px;text-align:center;font-weight:700}

/* trade page: today's row in the Daily PnL table */
.td-today td{background:var(--accent-bg)}

/* ===== trade dashboard: KPI row + daily PnL chart ===== */
.td-summary .reg-h{margin-bottom:12px}
/* MUI pass: Paper-style card elevation + Material (uppercase) buttons on the trade page */
.trade-main .list-card{box-shadow:0 1px 3px rgba(0,0,0,.14),0 1px 2px rgba(0,0,0,.22)}
.trade-main .btn-ghost{font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:12px;
  transition:background .15s,color .15s,border-color .15s}
.trade-main .btn-ghost:hover{border-color:var(--muted)}
.td-kpis{display:flex;gap:10px;flex-wrap:wrap}
.td-kpi{flex:1;min-width:150px;background:var(--elevated);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:14px 16px;display:flex;flex-direction:column;gap:5px;
  box-shadow:0 1px 2px rgba(0,0,0,.18);transition:box-shadow .16s,transform .16s}
.td-kpi:hover{box-shadow:0 4px 12px -2px rgba(0,0,0,.26);transform:translateY(-1px)}
.td-kpi-hero{flex:1.5;min-width:200px;border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
.td-kpi .k{font-size:11px;color:var(--muted2);text-transform:uppercase;letter-spacing:.03em;
  display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.td-kpi .k small{text-transform:none;letter-spacing:0;font-weight:400;color:var(--muted2)}
.td-kpi b{font-size:21px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.1}
.td-kpi b small{font-size:.55em;color:var(--muted2);font-weight:400;margin-left:1px}
.td-kpi b.up{color:var(--up)} .td-kpi b.down{color:var(--down)}
.td-kpi-hero b{font-size:30px}
.td-kpi .td-sub{font-size:11px;color:var(--muted2);font-variant-numeric:tabular-nums}
.td-kpi .td-pct{font-size:.62em;opacity:.75;margin-left:2px;font-weight:500}
.wl-bar{display:block;height:5px;border-radius:3px;background:rgba(239,83,80,.35);overflow:hidden}
#td-wlfill{display:block;height:100%;background:var(--up);border-radius:3px;transition:width .3s}

.td-legend{font-size:11px;color:var(--muted2);font-weight:400;display:inline-flex;gap:14px;align-items:center}
.td-legend .lg{display:inline-flex;align-items:center;gap:5px}
.td-legend .lg-up,.td-legend .lg-dn{width:8px;height:8px;border-radius:2px}
.td-legend .lg-up{background:var(--up)} .td-legend .lg-dn{background:var(--down)}
.td-legend .lg-line{width:16px;height:0;border-top:2px solid var(--accent)}

.td-chartwrap{position:relative;margin:4px 0 12px}
.td-chart{width:100%}
.tdc-svg{display:block;width:100%}
.tdc-bar.tdc-up{fill:var(--up)} .tdc-bar.tdc-dn{fill:var(--down)}
.tdc-zero{stroke:var(--border);stroke-width:1}
.tdc-cum{stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.tdc-dot{fill:var(--accent)}
.tdc-xl{fill:var(--muted2);font-size:10px}
.tdc-hit{fill:transparent;cursor:crosshair}
.td-chart-empty{padding:26px;text-align:center}
.td-tip{position:absolute;pointer-events:none;z-index:6;background:var(--panel);
  border:1px solid var(--border);border-radius:8px;padding:6px 9px;font-size:11px;line-height:1.55;
  white-space:nowrap;font-variant-numeric:tabular-nums;box-shadow:0 6px 20px rgba(0,0,0,.45)}
.td-tip .up{color:var(--up)} .td-tip .down{color:var(--down)}

/* expert two-panel chart: equity curve (grid + area + line + HWM) over daily bars */
.tdc-grid{stroke:var(--line);stroke-width:1;opacity:.5}
.tdc-yl{fill:var(--muted2);font-size:9px;font-variant-numeric:tabular-nums}
.tdc-pl{fill:var(--muted2);font-size:9px;letter-spacing:.03em;text-transform:uppercase;opacity:.85}
.tdc-eqarea{fill:var(--accent);opacity:.10}
.tdc-eq{stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.tdc-hwm{stroke:var(--muted2);stroke-width:1;stroke-dasharray:3 3;opacity:.5}
.tdc-cross{stroke:var(--fg);stroke-width:1;opacity:.3}

/* collapsible daily-breakdown toggle on the trade page */
.td-tabtoggle{display:inline-flex;align-items:center;gap:6px;margin-top:2px;padding:4px 8px;
  background:none;border:none;color:var(--muted);font-size:12px;font-weight:500;cursor:pointer;border-radius:6px}
.td-tabtoggle:hover{color:var(--accent);background:var(--hover)}
.td-tabtoggle .td-caret{font-size:10px;color:var(--muted2)}
.td-tabtoggle:hover .td-caret{color:var(--accent)}

/* the three trade cards live inside #td-body, so the gap must be HERE (not on .trade-main).
   :not([hidden]) keeps the pre-load display:none intact. */
#td-body:not([hidden]){display:flex;flex-direction:column;gap:18px;width:100%;max-width:1100px;margin-inline:auto}

/* ---- Daily movers dialog (📊 Daily) ---- */
.dm-body{max-height:60vh;overflow-y:auto;margin:.5rem 0;display:flex;flex-direction:column;gap:.5rem}
.dm-count{font-size:.8rem;padding:.1rem .1rem .35rem}
.dm-loading,.dm-empty{padding:1.2rem;text-align:center;line-height:1.6}
.dm-row{display:flex;gap:.75rem;align-items:stretch;padding:.55rem .65rem;
  background:var(--elevated);border:1px solid var(--line);border-radius:var(--radius-lg)}
.dm-l{flex:1 1 auto;min-width:0}
.dm-head{display:flex;align-items:center;gap:.4rem;font-size:.82rem}
.dm-plat{width:15px;height:15px;border-radius:3px;flex:none;opacity:.9}
.dm-sn{font-weight:600;color:var(--accent)}
.dm-time{color:var(--muted);font-size:.75rem;white-space:nowrap}
.dm-who{color:var(--muted);font-size:.78rem;margin:.15rem 0}
.dm-text{font-size:.82rem;line-height:1.35;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.dm-r{flex:none;display:flex;flex-direction:column;gap:.28rem;justify-content:center;
  min-width:96px;padding-left:.6rem;border-left:1px solid var(--line)}
.dm-win{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.dm-lab{color:var(--muted);font-size:.72rem;font-weight:600}
.dm-pct{font-variant-numeric:tabular-nums;font-size:.82rem;font-weight:600}
.dm-up{color:var(--up)} .dm-dn{color:var(--down)} .dm-na{color:var(--muted);opacity:.55}
.dm-hi{color:var(--up);font-weight:800}
.dm-peak{padding:0 .3rem;border-radius:4px;background:var(--accent-bg)}

/* ---- feed filter loading spinner ---- */
.feed-loading{display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:2.2rem 1rem;color:var(--muted);font-size:.85rem}
.sig-spin{width:16px;height:16px;flex:none;border-radius:50%;display:inline-block;
  border:2px solid var(--line);border-top-color:var(--accent);animation:mk-spin .7s linear infinite}

/* ===== Heat map (signal page): day × hour-of-day max-capturable-move grid ===== */
.heat-modal.modal-box{display:flex;flex-direction:column}
.heat-ctrls{display:flex;align-items:center;gap:10px;margin:2px 0 8px;flex-wrap:wrap}
.heat-sel{height:28px;border-radius:7px;border:1px solid var(--border);background:var(--bg);
  color:var(--fg);font-size:12.5px;padding:0 8px;cursor:pointer}
.heat-seg button{min-width:40px}
.heat-legend{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted2)}
.hl-bar{width:120px;height:9px;border-radius:5px;border:1px solid var(--line)}
.hl-lab{font-variant-numeric:tabular-nums}
.heat-note{font-size:12px;margin:0 0 8px;line-height:1.5}
.heat-note b{color:var(--fg)}
.heat-body{overflow:auto;flex:1;min-height:0}
/* ---- Analyze dialog: top-gainer-per-slot graph for a chosen day (MUI-style controls) ---- */
.an-ctrls{display:flex;align-items:center;gap:10px;margin:2px 0 10px;flex-wrap:wrap}
/* MUI IconButton: circular, transparent, hover/active tint overlay */
.an-nav{width:34px;height:34px;border-radius:50%;border:0;background:transparent;color:var(--muted);
  font-size:19px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s}
.an-nav:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--fg)}
.an-nav:active{background:color-mix(in srgb,var(--accent) 24%,transparent)}
.an-nav:disabled{opacity:.35;cursor:default;background:transparent}
/* MUI outlined text field */
.an-date{height:34px;border-radius:8px;border:1px solid var(--border);background:transparent;
  color:var(--fg);padding:0 10px;font-size:12.5px;font-family:var(--mono);color-scheme:dark;
  transition:border-color .15s,box-shadow .15s}
.an-date:hover{border-color:var(--muted)}
.an-date:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 22%,transparent)}
/* MUI ToggleButtonGroup: outlined, connected, selected = primary tint */
.an-seg{display:inline-flex;height:34px;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:transparent}
.an-seg button{min-width:42px;padding:0 14px;border:0;background:transparent;color:var(--muted);
  font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;
  transition:background .15s,color .15s}
.an-seg button + button{border-left:1px solid var(--border)}
.an-seg button:hover{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--fg)}
.an-seg button.on{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
.an-peak{font-family:var(--mono);font-size:12px;color:var(--up);font-weight:700}
.an-peak b{color:var(--up)}
.an-wrap{position:relative;flex:1;min-height:220px;display:flex}
.an-cv{display:block;width:100%;height:100%;min-height:220px}
/* loading overlay with a MUI CircularProgress-style spinner */
.an-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:11px;
  font-size:13px;color:var(--muted);background:color-mix(in srgb,var(--elevated) 45%,transparent);
  -webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);transition:opacity .15s}
.an-msg.dm-loading::before{content:"";width:22px;height:22px;border-radius:50%;flex:none;
  border:2.6px solid color-mix(in srgb,var(--accent) 22%,transparent);border-top-color:var(--accent);
  animation:an-spin .7s linear infinite}
@keyframes an-spin{to{transform:rotate(360deg)}}
.an-msg.dm-empty{background:color-mix(in srgb,var(--elevated) 60%,transparent)}
@media (prefers-reduced-motion:reduce){.an-msg.dm-loading::before{animation-duration:1.6s}}
.an-tip{position:absolute;pointer-events:none;transform:translate(-50%,-115%);z-index:5;
  background:rgba(10,16,28,.96);border:1px solid var(--border);border-radius:8px;padding:6px 9px;
  font-size:11.5px;line-height:1.35;white-space:nowrap;box-shadow:0 8px 22px rgba(0,0,0,.4);opacity:0;transition:opacity .1s}
.an-tip.on{opacity:1}
.an-tip .sn{font-weight:800;color:var(--accent);font-family:var(--mono)}
.an-tip .pc{font-weight:800;color:var(--up);font-family:var(--mono)}
.an-tip .tm{color:var(--muted2);font-size:10.5px}
.an-modal{display:flex;flex-direction:column}
.heat-grid{display:grid;gap:2px;align-items:stretch;min-width:640px}
.hh{font-size:9px;color:var(--muted2);text-align:center;align-self:end;line-height:1;padding-bottom:2px;font-variant-numeric:tabular-nums}
.hh-corner{font-size:9px;color:var(--muted2);text-align:center;align-self:end;padding-bottom:2px}
.hrl{font-size:10.5px;color:var(--muted2);text-align:right;padding-right:6px;align-self:center;white-space:nowrap;font-variant-numeric:tabular-nums}
.hrl-hot{color:#f5b301;font-weight:700}
.hrl-wd{color:var(--muted);opacity:.85}
.hrl-hot .hrl-wd{color:#f5b301;opacity:1}
/* week separator: a full-width line at each Sun→Mon boundary */
.hweek{grid-column:1/-1;height:0;border-top:2px solid rgba(255,255,255,.28);margin:1px 0}
.hrl-strip{color:var(--muted);font-style:italic}
.hrm{font-size:10px;text-align:right;align-self:center;font-variant-numeric:tabular-nums;font-weight:600;padding-left:4px}
.hc{min-height:14px;border-radius:2px;cursor:default}
.hc-na{background:repeating-linear-gradient(45deg,transparent,transparent 3px,rgba(255,255,255,.03) 3px,rgba(255,255,255,.03) 6px)}
.hc-peak{box-shadow:0 0 0 2px var(--panel),0 0 0 3px #fff}
.hc-strip{min-height:16px}
.hc:hover{outline:1px solid rgba(255,255,255,.4);outline-offset:-1px}
/* --- weekday × hour (pattern) view: bigger cells, direct numbers, marginal bars --- */
.heat-grid-wk{gap:3px;min-width:560px}
.heat-grid-wk .hh{font-size:10px}
.hh-hot{color:#f5b301;font-weight:800}
.hc-lg{min-height:30px;display:flex;align-items:center;justify-content:center}
.hc-num{font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;pointer-events:none;line-height:1}
.hrl-wdrow{font-size:12.5px;font-weight:600;color:var(--fg);text-align:right;padding-right:8px}
.hrl-wdrow.hrl-hot{color:#f5b301}
.hrm-bar{display:flex;align-items:center;justify-content:flex-end;padding:0 6px;border-radius:3px;
  font-size:10px;font-weight:700;color:var(--fg);font-variant-numeric:tabular-nums;min-height:30px}

/* enrichment bot token panel (People page) */
.enrich-tok{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px;
  padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.enrich-tok .et-lab{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.enrich-tok .et-status{font-size:12px;color:var(--muted2);white-space:nowrap}
.enrich-tok .et-status.ok{color:var(--up)}
.enrich-tok .et-status.bad{color:var(--down)}
.enrich-tok .et-status.off{color:var(--muted2)}
.enrich-tok #et-input{flex:1;min-width:180px;height:26px;padding:0 8px;font-size:12px;
  background:var(--bg);color:var(--fg);border:1px solid var(--border);border-radius:4px}
.enrich-tok button{height:26px;padding:0 10px;font-size:12px}

/* ===== theme picker popover (theme.js, opened from the ◐ button) ===== */
.theme-pop{position:fixed;z-index:1000;min-width:230px;padding:6px;border-radius:var(--radius-lg);
  background:var(--elevated);border:1px solid var(--border);box-shadow:var(--shadow);
  max-height:min(72vh,600px);overflow-y:auto}
.theme-pop[hidden]{display:none}
.theme-sec{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted2);padding:8px 10px 4px}
.theme-opt{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border-radius:var(--radius);
  color:var(--fg);text-align:left}
.theme-opt:hover{background:var(--hover)}
.theme-opt.on{background:var(--accent-bg)}
.theme-sw{width:22px;height:22px;border-radius:6px;flex:none;display:grid;place-items:center;
  border:1px solid var(--line)}
.theme-sw i{width:9px;height:9px;border-radius:50%;display:block}
.theme-nm{flex:1;font-size:13px;font-weight:500}
.theme-tick{color:var(--accent);font-weight:800;opacity:0}
.theme-opt.on .theme-tick{opacity:1}
/* trend-panel style rows in the same picker (share the theme-opt look) */
.mol-opt{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border-radius:var(--radius);
  color:var(--fg);text-align:left}
.mol-opt:hover{background:var(--hover)}
.mol-opt.on{background:var(--accent-bg)}
.mol-opt.on .theme-tick{opacity:1}
.mol-sw{background:radial-gradient(circle at 50% 34%,color-mix(in srgb,var(--accent) 30%,var(--elevated)),var(--panel))}
.mol-sw i{background:var(--accent);box-shadow:0 0 6px var(--accent)}
.mol-desc{display:block;font-family:var(--mono,ui-monospace,monospace);font-size:10px;font-weight:500;color:var(--muted2);margin-top:1px}

/* platform watermark(s) behind a mark card — faint X / Discord logo; both if a chain spans both */
.mk-wms{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;
  gap:5px;padding-right:14px;pointer-events:none;z-index:0;overflow:hidden;border-radius:12px}
.mark-chip > .mk-side,.mark-chip > .mk-main{position:relative;z-index:1}
.mk-wm svg{width:34px;height:34px;display:block}
.mk-wm-x svg{fill:var(--fg);opacity:.13}
.mk-wm-discord svg{fill:#5865F2;opacity:.22}
[data-mode="light"] .mk-wm-x svg{opacity:.16}
[data-mode="light"] .mk-wm-discord svg{opacity:.26}

/* multi-select toolbar (marksToolbar): MUI-style circular IconButtons — no border, a soft
   circular hover overlay, no ripple. Select-all uses the real MUI checkbox icons. */
.mk-tools{gap:4px}
.mk-tool.mk-ic{width:34px;height:34px;padding:0;border:none;border-radius:50%;
  background:transparent;display:inline-flex;align-items:center;justify-content:center;
  position:relative;color:var(--muted);transition:background .18s,color .18s}
.mk-ic svg{width:20px;height:20px}
.mk-ic.mk-sum{font-size:17px;font-weight:800;font-family:var(--mono,ui-monospace,monospace)}   /* Σ easy-score toggle */
.mk-ic.mk-sum.on{color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,transparent)}
.mk-ic:hover:not([disabled]){background:var(--hover);color:var(--fg)}
.mk-ic:active:not([disabled]){background:color-mix(in srgb,var(--fg) 16%,transparent)}
.mk-ic.mk-danger{color:var(--down)}
.mk-ic.mk-danger:hover:not([disabled]){color:var(--down);
  background:color-mix(in srgb,var(--down) 13%,transparent)}
.mk-cnt{position:absolute;top:2px;right:2px;min-width:15px;height:15px;padding:0 3px;
  border-radius:8px;background:var(--down);color:#fff;font-size:9px;font-weight:800;
  line-height:1;display:flex;align-items:center;justify-content:center}
.mk-ic[disabled]{opacity:.38}
.mk-ic[disabled] .mk-cnt{display:none}
/* DAY: the marks toolbar (manage + Σ) rides on the BRIGHT sky, not a card, so its muted icons
   wash out. Give the two buttons a frosted chip + dark icon + soft shadow so they stay notable. */
.sky-day .mk-tools > .mk-act > .mk-ic,
.sky-day .mk-tools > .mk-sum{color:#2b3d61;
  background:color-mix(in srgb,#ffffff 46%,transparent);box-shadow:0 2px 7px rgba(18,38,74,.16);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sky-day .mk-tools > .mk-act > .mk-ic:hover:not([disabled]),
.sky-day .mk-tools > .mk-sum:hover:not([disabled]){color:#16233f;
  background:color-mix(in srgb,#ffffff 66%,transparent)}
.sky-day .mk-tools > .mk-sum.on{color:#2f6fd0;background:color-mix(in srgb,#2f6fd0 20%,#ffffff 52%)}
/* Select-all checkbox: MUI colours — muted when blank, accent when checked/indeterminate */
.mk-cb{color:var(--muted)}
.mk-cb.on,.mk-cb.ind{color:var(--accent)}
.mk-cb:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}

/* managebar (Keywords / Daily / Heat): MUI PRIMARY buttons — accent-tonal fill + accent
   border/label, one-colour icons (currentColor = accent). Distinct from the flat toggles. */
.sig-managebar .btn-ghost.mk-primary{display:inline-flex;align-items:center;gap:7px;font-weight:600;
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:8px;
  background:var(--accent-bg);color:var(--accent);transition:background .18s,border-color .18s}
.sig-managebar .btn-ghost.mk-primary:hover{color:var(--accent);border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 22%,transparent)}
.sig-managebar .btn-ghost.mk-primary:active{background:color-mix(in srgb,var(--accent) 30%,transparent)}
.sig-managebar .btn-ghost.mk-primary svg{width:15px;height:15px}
/* the dev-id search field: flat pill to match */
.sig-managebar .devid-search{border:1px solid var(--line);background:var(--bg);border-radius:8px}
.sig-managebar .devid-search:focus{border-color:var(--accent);outline:none}

/* ================= appearance dialog (theme.js ◐) — preview gallery ================= */
.thd-overlay{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;
  background:rgba(4,6,12,.55);backdrop-filter:blur(3px)}
.thd-overlay[hidden]{display:none}   /* display:flex would otherwise override [hidden] */
.thd-box{width:min(680px,94vw);max-height:88vh;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow)}
.thd-head{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);
  font-size:14px;color:var(--fg)}
.thd-x{border:0;background:none;color:var(--muted);cursor:pointer;font-size:14px;padding:4px 8px;border-radius:6px}
.thd-x:hover{background:var(--hover);color:var(--fg)}
.thd-body{overflow-y:auto;padding:6px 16px 16px}
.thd-sec{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:14px 2px 8px}
.thd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:10px}
.thd-molgrid{grid-template-columns:repeat(3,1fr)}   /* trend styles: fixed 3×3 */
/* ---- sky backdrop: live preview + look knobs ---- */
.thd-secnote{font-size:10px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted2)}
.thd-sky{display:flex;flex-direction:column;gap:12px}
.thd-skywrap{position:relative;width:100%;aspect-ratio:8/1;min-height:64px;border-radius:10px;overflow:hidden;
  border:1px solid var(--line);background:#0a0f1a}
.thd-skycanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.thd-skyclock{position:absolute;top:8px;left:50%;transform:translateX(-50%);font-family:var(--mono,ui-monospace,monospace);
  font-size:11px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);background:rgba(9,12,22,.36);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:3px 10px;border-radius:8px;pointer-events:none}
.thd-skyrow{display:flex;align-items:center;gap:10px}
.thd-skylive{flex:none;height:28px;padding:0 12px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel);color:var(--muted);font:inherit;font-size:11px;font-weight:700;cursor:pointer}
.thd-skylive.on{color:var(--fg);border-color:var(--up);background:color-mix(in srgb,var(--up) 16%,transparent)}
.thd-skyphase{flex:none;font-size:11px;font-weight:700;color:var(--muted);min-width:76px;text-align:right}
.thd-skyopts{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.thd-skyopt{display:flex;flex-direction:column;gap:8px;font-size:10.5px;font-weight:800;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em}
.thd-skyopt>span{display:flex;justify-content:space-between;align-items:baseline}
.thd-skyopt b{color:var(--accent);font-family:var(--mono,ui-monospace,monospace);text-transform:none;letter-spacing:0}
.thd-skyseg{display:flex;gap:6px}
.thd-skyseg button{flex:1;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--panel);
  color:var(--muted);font:inherit;font-size:11px;font-weight:700;cursor:pointer;transition:border-color .15s,color .15s}
.thd-skyseg button:hover{color:var(--fg)}
.thd-skyseg button.on{color:var(--fg);border-color:var(--accent);background:var(--accent-bg)}
.thd-sky input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:999px;
  background:var(--line);outline:none;cursor:pointer}
.thd-sky input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;
  background:var(--accent);border:2px solid var(--bg);box-shadow:0 1px 4px rgba(0,0,0,.4);cursor:pointer}
.thd-sky input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--accent);
  border:2px solid var(--bg);cursor:pointer}
.thd-sky .thd-skytime{flex:1;min-width:0;
  background:linear-gradient(90deg,#0a1230,#14306a 22%,#4f86d6 42%,#cfe6ff 50%,#4f86d6 58%,#ff9a5a 72%,#101a30)}
.thd-card{position:relative;display:flex;flex-direction:column;gap:0;padding:0;text-align:left;cursor:pointer;
  border:1.5px solid var(--line);border-radius:10px;overflow:hidden;background:var(--elevated,var(--panel));
  transition:border-color .15s,transform .12s}
.thd-card:hover{transform:translateY(-1px);border-color:var(--border)}
.thd-card.on{border-color:var(--accent)}
.thd-nm{display:flex;flex-direction:column;gap:1px;padding:7px 9px;font-size:12px;font-weight:600;color:var(--fg)}
.thd-nm em{font-style:normal;font-weight:400;font-size:10px;color:var(--muted)}
.thd-tick{position:absolute;top:6px;right:8px;font-size:12px;color:var(--accent);opacity:0;transition:opacity .15s}
.thd-card.on .thd-tick{opacity:1}
/* — theme card: a miniature of the app painted with the CARD's own data-theme vars — */
.thd-prev{display:block;height:74px;background:var(--bg);border-bottom:1px solid var(--line);position:relative}
.thd-topbar{position:absolute;inset:0 0 auto 0;height:16px;display:flex;align-items:center;gap:4px;
  padding:0 7px;background:var(--panel);border-bottom:1px solid var(--line)}
.thd-brand{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.thd-navchip{width:22px;height:5px;border-radius:3px;background:var(--accent-bg)}
.thd-navchip.dim{background:var(--line)}
.thd-pane{position:absolute;left:7px;right:7px;top:23px;bottom:7px;background:var(--panel);
  border:1px solid var(--line);border-radius:5px;padding:4px 6px;display:flex;flex-direction:column;gap:3px}
.thd-spark{width:100%;height:22px;fill:none}
.thd-spark polyline{stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.thd-bars{display:flex;gap:3px;align-items:flex-end}
.thd-bars i{width:14px;height:5px;border-radius:2px}
.thd-bars i.u{background:var(--up)} .thd-bars i.d{background:var(--down)}
.thd-bars i.s{opacity:.45;width:10px}
/* — trend-panel card: the REAL hub + fx classes at ~.6 scale — */
.thd-molprev{height:92px;background:#0a0d13;overflow:hidden}
.thd-molcard[data-mol] .thd-prev{border-bottom:1px solid var(--line)}
/* Mark-card theme gallery: each preview is a day|night split with a sample chip
   carrying that variant's real surface, so the picker shows the actual treatment. */
.thd-mkgrid{grid-template-columns:repeat(3,1fr)}
.thd-mkprev{display:flex;padding:0}
.thd-mkprev .mkp{flex:1;display:grid;place-items:center}
.thd-mkprev .mkp.day{background:linear-gradient(180deg,#3f86d4,#a9d3f2)}
.thd-mkprev .mkp.night{background:linear-gradient(180deg,#0a1230,#1f2b56)}
.mkp-chip{width:40px;height:22px;border-radius:6px;border:1px solid transparent}
.mkp-frost.day .mkp-chip{background:color-mix(in srgb,#f1f7ff 58%,transparent);border-color:rgba(255,255,255,.6);box-shadow:0 3px 8px rgba(18,38,74,.16)}
.mkp-frost.night .mkp-chip{background:color-mix(in srgb,#131d34 76%,transparent);border-color:rgba(255,255,255,.12);box-shadow:0 4px 10px rgba(0,0,0,.3)}
.mkp-solid.day .mkp-chip{background:#f4f9ff;border-color:#ccd9ec;box-shadow:0 2px 6px rgba(20,40,80,.14)}
.mkp-solid.night .mkp-chip{background:#141d31;border-color:#2c3b5e;box-shadow:0 3px 8px rgba(0,0,0,.4)}
.mkp-tint.day .mkp-chip{background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(150,200,240,.4));border-color:rgba(255,255,255,.6)}
.mkp-tint.night .mkp-chip{background:linear-gradient(180deg,rgba(80,102,170,.6),rgba(20,30,66,.6));border-color:rgba(150,172,255,.25)}
.mkp-ghost.day .mkp-chip{background:rgba(255,255,255,.18);border-color:rgba(22,42,78,.38)}
.mkp-ghost.night .mkp-chip{background:rgba(255,255,255,.06);border-color:rgba(200,214,255,.34)}
.mkp-paper.day .mkp-chip{background:#fff;box-shadow:0 6px 16px -4px rgba(20,45,90,.34),0 1px 3px rgba(20,45,90,.2)}
.mkp-paper.night .mkp-chip{background:#20293f;box-shadow:0 8px 18px -4px rgba(0,0,0,.6),0 1px 4px rgba(0,0,0,.5)}
.mkp-sheen.day .mkp-chip{background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(214,234,251,.45));border-color:rgba(255,255,255,.6);border-top-color:rgba(255,255,255,.95)}
.mkp-sheen.night .mkp-chip{background:linear-gradient(180deg,rgba(48,60,104,.9),rgba(15,23,48,.9));border-color:rgba(255,255,255,.1);border-top-color:rgba(190,205,255,.3)}
.thd-molanchor{position:absolute;left:50%;top:56%;transform:scale(.6)}
.thd-hub{position:absolute;left:0;top:0;width:44px;height:44px;border-radius:50%;
  transform:translate(-50%,-50%)}
.thd-hub:hover{transform:translate(-50%,-50%)}   /* previews don't grow on hover */
.thd-molanchor .mol-depth{top:-34px;right:auto;left:12px}