/* ==========================================================================
   SolTerm « Nebula » : fond spatial animé (fibres de lumière), panneaux en verre,
   titres en Inter (gras, dégradé), accents violet → cyan, micro-animations partout.
   Chargé après app.css : redéfinit les tokens et habille chaque composant.
   ========================================================================== */
:root {
  --ground: #05040b;
  --surface: rgba(16, 13, 30, 0.66);
  --surface-solid: #0e0c1a;
  --raised: rgba(255, 255, 255, 0.05);
  --border: rgba(255, 255, 255, 0.075);
  --rule: rgba(255, 255, 255, 0.05);
  --control: rgba(255, 255, 255, 0.12);
  --text: #f4f2ff;
  --muted: #8f8aa8;
  --accent: #9d7bff;
  --accent2: #46d4ff;
  --positive: #3ee6a4;
  --negative: #ff5c8a;
  --warning: #ffc46b;
  --grad: linear-gradient(120deg, #c4b5fd 0%, #8b5cf6 38%, #6366f1 62%, #22d3ee 100%);
  --grad-soft: linear-gradient(120deg, rgba(167, 139, 250, 0.22), rgba(34, 211, 238, 0.16));
  --pill-positive-bg: rgba(62, 230, 164, 0.1); --pill-positive-ink: #5df0b8;
  --pill-negative-bg: rgba(255, 92, 138, 0.1); --pill-negative-ink: #ff7aa0;
  --pill-warning-bg: rgba(255, 196, 107, 0.1); --pill-warning-ink: #ffd08a;
  --pill-neutral-bg: rgba(255, 255, 255, 0.055); --pill-neutral-ink: #c9c4e0;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 60px -28px rgba(0, 0, 0, 0.8);
  --float: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 40px 120px -20px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(157, 123, 255, 0.08);
  --radius-card: 16px;
  --radius-chip: 7px;
  --font: "Inter", "Public Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --rail: 68px;
  --header: 60px;
  --status: 30px;
}

body { background: var(--ground); letter-spacing: -0.005em; }
::selection { background: rgba(157, 123, 255, 0.4); }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(157, 123, 255, 0.35); }

/* ---------- fond animé ---------- */
#bg { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; display: block; will-change: contents; }
.bg-glow { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(124, 92, 255, 0.18), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(34, 211, 238, 0.08), transparent 60%),
    radial-gradient(600px 400px at 50% 120%, rgba(157, 123, 255, 0.08), transparent 70%);
}
body.calm #bg { display: none; }

/* ---------- verre ---------- */
/* Les grands panneaux restent quasi opaques (pas de flou recalculé à chaque image du fond animé :
   le terminal reste fluide) ; le vrai verre est réservé à ce qui flotte. */
.pcol, .dtable, .tk-left, .tk-right, .card, .htable, .kpis, .tr-wallets, .tr-feed, .rw-banner, .wv-card {
  background: linear-gradient(180deg, rgba(22, 18, 40, 0.82), rgba(12, 10, 22, 0.86));
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.modal, .menu, .toast {
  background: var(--surface);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--border);
  box-shadow: var(--float);
}
.pcol, .dtable, .tk-left, .tk-right, .htable, .kpis, .tr-wallets, .tr-feed { position: relative; }
/* liseré lumineux en haut des panneaux */
.pcol::before, .dtable::before, .tk-left::before, .tk-right::before, .htable::before, .kpis::before, .tr-feed::before, .tr-wallets::before, .modal::before, .wv-card::before {
  content: ""; position: absolute; left: 10%; right: 10%; top: -1px; height: 1px; pointer-events: none; z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(196, 181, 253, 0.55), rgba(70, 212, 255, 0.45), transparent);
  opacity: 0.55;
}
.modal { position: relative; border-radius: 20px; background: rgba(14, 11, 26, 0.86); }
.kpi, .icell { background: transparent; }
.kpis, .igrid { background: var(--surface); gap: 0; }
.kpi + .kpi { border-left: 1px solid var(--rule); }
.igrid { border: 1px solid var(--border); }
.icell { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.drow.head, .trow.head, .sg-row.head { background: #120f22; }

/* ---------- rail ---------- */
.side { background: rgba(9, 7, 18, 0.92); border-right: 1px solid var(--border); padding: 14px 0; gap: 6px; }
.brand { width: 44px; height: 44px; margin-bottom: 18px; border-radius: 14px; position: relative;
  background: radial-gradient(circle at 30% 20%, rgba(196, 181, 253, 0.35), rgba(99, 102, 241, 0.15) 50%, transparent 75%); }
.brand { box-shadow: 0 0 22px -4px rgba(157, 123, 255, 0.55); }
.cursor-blink { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.nav { gap: 6px; }
.nav a { width: 44px; height: 44px; border-radius: 13px; transition: color 0.2s, background 0.25s var(--ease), transform 0.2s var(--ease); }
.nav a:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-1px); }
.nav a.active { color: #fff; background: var(--grad-soft); box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.25), 0 8px 24px -8px rgba(124, 92, 255, 0.6); }
.nav a.active::after { right: -12px; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: var(--grad); box-shadow: 0 0 12px rgba(157, 123, 255, 0.9); }
.nav a::before { content: attr(title); position: absolute; left: calc(100% + 12px); top: 50%; transform: translate(-4px, -50%); opacity: 0; pointer-events: none; white-space: nowrap;
  font: 500 12px var(--font); color: var(--text); padding: 6px 10px; border-radius: 8px; background: rgba(20, 16, 36, 0.95); border: 1px solid var(--border); transition: opacity 0.15s, transform 0.2s var(--ease); z-index: 50; }
.nav a:hover::before { opacity: 1; transform: translate(0, -50%); }
.side-btn { width: 44px; height: 44px; border-radius: 13px; transition: background 0.2s, color 0.2s; }
.side-btn:hover { background: rgba(255, 255, 255, 0.05); }

/* ---------- en-tête ---------- */
.header { background: rgba(9, 7, 18, 0.88); border-bottom: 1px solid var(--border); gap: 14px; }
.product { font: 700 18px/1 var(--font); letter-spacing: -0.02em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 4px; }
.search-btn { height: 38px; border-radius: 12px; background: rgba(255, 255, 255, 0.035); border-color: var(--border); transition: border-color 0.2s, background 0.2s, box-shadow 0.3s; }
.search-btn:hover { border-color: rgba(157, 123, 255, 0.45); background: rgba(157, 123, 255, 0.06); box-shadow: 0 0 0 4px rgba(157, 123, 255, 0.08); }
.chip, .paper-toggle, .icon-btn, .btn, .qb-input, .hidden-toggle, .mcap-max { border-color: var(--control); background: rgba(255, 255, 255, 0.025); transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.15s var(--ease), box-shadow 0.25s; }
.chip:hover, .icon-btn:hover, .btn:hover, .hidden-toggle:hover { border-color: rgba(196, 181, 253, 0.45); background: rgba(157, 123, 255, 0.07); }
.icon-btn.on { color: var(--warning); border-color: rgba(255, 196, 107, 0.4); }
.btn-primary, .btn.blue, .btn-blue-full {
  position: relative; overflow: hidden; background: #fff; color: #0b0718; border: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 10px 30px -10px rgba(196, 181, 253, 0.8);
  transition: transform 0.2s var(--ease), box-shadow 0.3s;
}
.btn-primary:hover, .btn.blue:hover, .btn-blue-full:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 0 0 1px #fff, 0 14px 40px -10px rgba(196, 181, 253, 1); }
.btn-primary::after, .btn.blue::after, .btn-blue-full::after, .big-btn::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
}
.btn-primary:hover::after, .btn.blue:hover::after, .btn-blue-full:hover::after, .big-btn:hover::after { animation: sheen 0.9s var(--ease); }
@keyframes sheen { to { transform: translateX(120%); } }
body.paper .header { border-bottom-color: rgba(255, 196, 107, 0.4); box-shadow: 0 1px 24px -6px rgba(255, 196, 107, 0.35); }
.menu { border-radius: 16px; background: rgba(14, 11, 26, 0.92); animation: pop 0.22s var(--ease); }

/* ---------- titres de pages ---------- */
.page-head { padding: 22px 26px 16px; }
.page-head h1 { font: 700 28px/1.1 var(--font); letter-spacing: -0.03em; background: linear-gradient(120deg, #fff 20%, #c4b5fd 60%, #67e8f9); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 6px; }
.tabs button { font: 600 20px/1.2 var(--font); letter-spacing: -0.02em; transition: color 0.2s; }
.tabs button.on { background: linear-gradient(120deg, #fff, #c4b5fd 70%, #67e8f9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section-title { font: 600 18px/1.3 var(--font); letter-spacing: -0.01em; color: var(--text); margin: 14px 0 -6px; }
.modal h2 { font: 600 20px/1.3 var(--font); letter-spacing: -0.02em; }

/* ---------- sélection : liseré dégradé lumineux ---------- */
.seg button.on::after, .tabs button.on::after, .tk-tabs > button.on::after, .bs button.on::after, .drow.head button.on::after, .col-filter.on::after, .status .pp button.on::after {
  height: 2px; border-radius: 2px; background: var(--grad); box-shadow: 0 0 10px rgba(157, 123, 255, 0.8);
}
.seg button, .tk-tabs > button, .bs button { transition: color 0.2s; }

/* ---------- entrées en scène ---------- */
/* Entrée courte (0,25 s) : l'interface doit paraître instantanée */
.page > *, .pulse-grid > .pcol, .tk > *, .tr-grid > *, .pf > * { animation: rise 0.25s var(--ease) both; }
@keyframes rise { from { opacity: 0.4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.overlay { background: rgba(3, 2, 8, 0.6); animation: fade 0.15s ease-out; }
.modal { animation: pop 0.2s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(0.97); } }

/* ---------- Pulse ---------- */
.pulse-grid { gap: 18px; padding: 0 26px 22px; }
.pcol { border-radius: 18px; }
.pcol-head { height: 56px; padding: 0 18px; }
.pcol-head h3 { font: 600 16px/1 var(--font); letter-spacing: -0.01em; }
.pcol-head .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--col); box-shadow: 0 0 0 0 var(--col); animation: ping 2.2s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--col) 70%, transparent); } 80%, 100% { box-shadow: 0 0 0 9px transparent; } }
.pcol-head .count { padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); }
.pcol-head .paused { color: var(--warning); font-weight: 500; align-items: center; gap: 4px; }
.pcol.hovering .paused { display: inline-flex; }
.pcol-head .paused svg { width: 11px; height: 11px; }
.pcard { margin: 6px 8px; padding: 13px 14px 16px; border-radius: 14px; border: 1px solid transparent; border-bottom: 1px solid transparent; transition: background 0.25s var(--ease), border-color 0.25s, transform 0.25s var(--ease), box-shadow 0.3s; }
.pcard:hover { background: rgba(255, 255, 255, 0.045); border-color: rgba(196, 181, 253, 0.18); transform: translateY(-1px); box-shadow: 0 12px 30px -16px rgba(124, 92, 255, 0.55); }
.pcard.enter { animation: cardin 0.7s var(--ease); }
@keyframes cardin {
  0% { opacity: 0.35; transform: translateY(-10px) scale(0.98); background: rgba(157, 123, 255, 0.18); box-shadow: 0 0 0 1px rgba(196, 181, 253, 0.5), 0 0 40px -6px rgba(157, 123, 255, 0.7); }
  60% { opacity: 1; transform: none; }
  100% { background: transparent; box-shadow: none; }
}
.pcard .av { width: 52px; height: 52px; }
.pcard .av img, .pcard .av .ph { border-radius: 14px; }
.av.ring::before { content: ""; position: absolute; inset: -3px; border-radius: 17px; background: conic-gradient(var(--pc, var(--accent)) calc(var(--p, 0) * 1%), rgba(255, 255, 255, 0.07) 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 2px; }
.pcard .pc-l1 .sym { font-size: 15px; letter-spacing: -0.01em; }
.pc-r .mc b { font-size: 17px; }
.pc-r .mc b.flash-up { animation: flashUp 0.9s var(--ease); }
.pc-r .mc b.flash-down { animation: flashDown 0.9s var(--ease); }
@keyframes flashUp { 0% { color: var(--positive); text-shadow: 0 0 14px rgba(62, 230, 164, 0.9); } }
@keyframes flashDown { 0% { color: var(--negative); text-shadow: 0 0 14px rgba(255, 92, 138, 0.9); } }
.pc-curve { left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.pc-curve i { border-radius: 2px; background: linear-gradient(90deg, #6366f1, #a78bfa); transition: width 0.8s var(--ease); }
.pc-curve.hot i { background: linear-gradient(90deg, #22d3ee, #3ee6a4); box-shadow: 0 0 10px rgba(62, 230, 164, 0.8); }
.txbar { border-radius: 2px; overflow: hidden; background: var(--negative); }

/* ---------- badges (icônes fines, couleur = signal) ---------- */
.bdg, .shield { height: 21px; padding: 0 7px; gap: 4px; border-radius: 7px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); color: #b9b3d6; font-weight: 500; }
.bdg svg, .shield svg { width: 12px; height: 12px; opacity: 0.9; }
.bdg.good { color: var(--pill-positive-ink); background: var(--pill-positive-bg); border-color: rgba(62, 230, 164, 0.16); }
.bdg.bad { color: var(--pill-negative-ink); background: var(--pill-negative-bg); border-color: rgba(255, 92, 138, 0.18); }
.bdg.warn { color: var(--pill-warning-ink); background: var(--pill-warning-bg); border-color: rgba(255, 196, 107, 0.18); }
.shield.good { color: var(--pill-positive-ink); background: var(--pill-positive-bg); border-color: rgba(62, 230, 164, 0.16); }
.shield.mid { border-color: rgba(255, 196, 107, 0.18); }
.shield.bad { border-color: rgba(255, 92, 138, 0.18); }
.stat svg { opacity: 0.85; }

/* ---------- boutons d'achat ---------- */
.qbuy { height: 28px; padding: 0 12px; border-color: rgba(196, 181, 253, 0.28); background: rgba(157, 123, 255, 0.08); color: #e9e4ff; }
.qbuy:hover { background: var(--grad); color: #0b0718; border-color: transparent; box-shadow: 0 8px 22px -8px rgba(157, 123, 255, 0.95); }
.qbuy svg { color: #c4b5fd; }
.qbuy:hover svg { color: #0b0718; }
.big-btn { position: relative; overflow: hidden; height: 48px; border-radius: 14px; font-size: 15px; letter-spacing: -0.01em; }
.big-btn.buy { background: linear-gradient(120deg, #34d399, #3ee6a4 45%, #67e8f9); color: #03140d; box-shadow: 0 14px 36px -14px rgba(62, 230, 164, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.big-btn.sell { background: linear-gradient(120deg, #fb7185, #ff5c8a 50%, #c084fc); color: #fff; box-shadow: 0 14px 36px -14px rgba(255, 92, 138, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.big-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
body.paper .big-btn.buy { background: linear-gradient(120deg, #fbbf24, #ffc46b 50%, #fde68a); }
.amts button { border-radius: 12px; height: 38px; background: rgba(255, 255, 255, 0.025); transition: border-color 0.2s, background 0.2s, transform 0.15s var(--ease); }
.amts button:hover { border-color: rgba(196, 181, 253, 0.45); transform: translateY(-1px); }
.amts button.on { border-color: transparent; background: var(--grad-soft); box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.6), 0 0 18px -4px rgba(157, 123, 255, 0.6); }
.field, .fee-edit label { background: rgba(255, 255, 255, 0.03); border-color: var(--control); border-radius: 12px; transition: border-color 0.2s, box-shadow 0.25s; }
.field:focus-within, .fee-edit label:focus-within { border-color: rgba(196, 181, 253, 0.6); box-shadow: 0 0 0 4px rgba(157, 123, 255, 0.12); }

/* ---------- Discover / tableaux ---------- */
.dtable { margin: 0 26px 22px; border-radius: 18px; }
.drow { border-bottom-color: var(--rule); }
.drow.item, .frow, .drow2, .sg-row, .hrow:not(.head) { transition: background 0.2s; }
.drow.item:hover, .frow:hover, .drow2:hover { background: linear-gradient(90deg, rgba(157, 123, 255, 0.08), rgba(70, 212, 255, 0.03) 60%, transparent); }
.dtable.fresh .drow.item { animation: rowfade 0.5s var(--ease) both; }
@keyframes rowfade { from { opacity: 0; transform: translateX(-6px); } }
.pair .av img, .pair .av .ph { border-radius: 11px; }

/* ---------- page token ---------- */
.tk { gap: 18px; padding: 0 26px 22px; }
.tk-left, .tk-right { border-radius: 18px; }
.tk-name .sym { font: 700 22px/1 var(--font); letter-spacing: -0.02em; }
.tk-id .av { width: 46px; height: 46px; }
.tk-id .av img, .tk-id .av .ph { border-radius: 13px; }
.tk-stat.big .v { font-size: 30px; background: linear-gradient(120deg, #fff, #ddd6fe); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tk-stat .v.flash-up { animation: flashUp 0.9s var(--ease); }
.tk-stat .v.flash-down { animation: flashDown 0.9s var(--ease); }
.live-pill i { box-shadow: 0 0 0 0 rgba(62, 230, 164, 0.7); animation: ping2 1.8s infinite; }
@keyframes ping2 { 0% { box-shadow: 0 0 0 0 rgba(62, 230, 164, 0.7); } 80%, 100% { box-shadow: 0 0 0 7px transparent; } }
.trow.new { animation: tradein 0.8s var(--ease); }
@keyframes tradein { 0% { background: rgba(157, 123, 255, 0.16); transform: translateY(-4px); opacity: 0; } 40% { opacity: 1; transform: none; } 100% { background: transparent; } }
.trow.new.buy { animation-name: tradeinBuy; }
.trow.new.sell { animation-name: tradeinSell; }
@keyframes tradeinBuy { 0% { background: rgba(62, 230, 164, 0.18); opacity: 0; transform: translateY(-4px); } 40% { opacity: 1; transform: none; } 100% { background: transparent; } }
@keyframes tradeinSell { 0% { background: rgba(255, 92, 138, 0.18); opacity: 0; transform: translateY(-4px); } 40% { opacity: 1; transform: none; } 100% { background: transparent; } }
.score-ring { border: 0; position: relative; background: radial-gradient(circle, rgba(255, 255, 255, 0.03), transparent 70%); }
.score-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 3px; background: conic-gradient(var(--c, var(--positive)) calc(var(--s, 100) * 1%), rgba(255, 255, 255, 0.07) 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: drop-shadow(0 0 6px var(--c, var(--positive))); }
.prog, .pnl-bars .bar, .hbar { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.prog i { background: var(--grad); border-radius: 4px; box-shadow: 0 0 12px rgba(157, 123, 255, 0.7); transition: width 0.8s var(--ease); }
.pnl-pct { font-size: 34px; }
.pnl-hero.win .pnl-pct { text-shadow: 0 0 24px rgba(62, 230, 164, 0.45); }
.pnl-hero.loss .pnl-pct { text-shadow: 0 0 24px rgba(255, 92, 138, 0.4); }

/* ---------- portefeuille ---------- */
/* Les blocs gardent leur hauteur : c'est la page qui défile, pas les blocs qui s'écrasent */
.pf > *, .sn-side > *, .tr-wallets > * { flex-shrink: 0; }
.kpis { border-radius: 18px; }
.kpi .v { font-size: 24px; }
.htable { border-radius: 18px; }

/* ---------- statut ---------- */
.status { background: rgba(9, 7, 18, 0.9); border-top: 1px solid var(--border); }
.status .dot.on { box-shadow: 0 0 8px var(--positive); }

/* ---------- toasts ---------- */
.toast { border-radius: 14px; background: rgba(18, 14, 34, 0.9); animation: tin 0.35s var(--ease); }
@keyframes tin { from { opacity: 0; transform: translateX(20px) scale(0.97); } }
.toast.ok { box-shadow: var(--float), inset 2px 0 0 var(--positive); }
.toast.err { box-shadow: var(--float), inset 2px 0 0 var(--negative); }

/* ---------- liens wallet ---------- */
.link { cursor: pointer; transition: color 0.15s; }
.link:hover { color: #c4b5fd !important; text-decoration: underline; text-underline-offset: 3px; }

.loader.tiny { width: 10px; height: 10px; border-width: 1.5px; vertical-align: -1px; margin-right: 4px; }

/* ---------- squelettes ---------- */
.wv-skel, .skel { height: 160px; border-radius: 12px; background: linear-gradient(100deg, rgba(255, 255, 255, 0.03) 30%, rgba(255, 255, 255, 0.07) 50%, rgba(255, 255, 255, 0.03) 70%); background-size: 300% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -200% 0; } }

/* ==========================================================================
   Fiche wallet (façon Axiom)
   ========================================================================== */
.modal.wv { width: min(1280px, calc(100vw - 48px)); height: min(860px, calc(100vh - 48px)); max-height: none; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.wv-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--rule); flex: none; }
.wv-name { font: 600 18px/1 var(--font); letter-spacing: -0.01em; }
.wv-addr { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.wv-addr:hover { color: var(--text); }
.wv-addr svg { width: 12px; height: 12px; }
.wv-bal { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; }
.wv-ranges { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); margin-left: 6px; }
.wv-ranges button { height: 28px; padding: 0 12px; border-radius: 8px; color: var(--muted); font-weight: 500; transition: background 0.2s, color 0.2s; }
.wv-ranges button:hover { color: var(--text); }
.wv-ranges button.on { color: #fff; background: var(--grad-soft); box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.35); }
.wv-head .close { margin-left: 4px; }
.wv-top { display: grid; grid-template-columns: 1.15fr 1.25fr 1fr; gap: 14px; padding: 16px 20px; flex: none; }
.wv-card { position: relative; border-radius: 16px; padding: 16px 18px; min-height: 240px; background: rgba(255, 255, 255, 0.025); -webkit-backdrop-filter: none; backdrop-filter: none; }
.wv-ctitle { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 12px; }
.wv-chart { display: flex; flex-direction: column; }
#wvChart { flex: 1; min-height: 170px; }
.wv-empty { position: absolute; inset: 50px 0 0; display: grid; place-items: center; pointer-events: none; }
.wv-bal-grid { display: grid; grid-template-columns: auto minmax(180px, 1fr); gap: 18px; align-items: start; }
.wv-card .l { color: var(--muted); font-size: 12px; }
.wv-card .v { font: 500 15px var(--mono); margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wv-card .v.big { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; }
.wv-bal-foot { display: flex; gap: 22px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); flex-wrap: wrap; }
.wv-heat { display: grid; grid-template-columns: 10px repeat(24, minmax(0, 1fr)); gap: 2px; align-self: center; width: 100%; }
.wv-heat i { aspect-ratio: 1; border-radius: 2px; background: rgba(157, 123, 255, var(--a, 0)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03); }
.wv-heat i.d { background: none; box-shadow: none; font: normal 500 8px/1 var(--mono); color: var(--muted); display: grid; place-items: center; aspect-ratio: auto; }
.wv-card .kv { height: 26px; }
.wv-buckets { display: grid; gap: 6px; margin-top: 10px; font-size: 12px; }
.wv-buckets > div { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: center; color: var(--muted); }
.wv-buckets i { width: 7px; height: 7px; border-radius: 50%; }
.wv-buckets b { color: var(--text); font-weight: 500; }
.wv-ratio { display: flex; gap: 4px; height: 4px; margin-top: 12px; }
.wv-ratio i { border-radius: 4px; box-shadow: 0 0 10px currentColor; }
.wv-tabs { display: flex; align-items: center; gap: 12px; padding: 4px 20px 0; border-bottom: 1px solid var(--rule); flex: none; height: 50px; }
.wv-tabs .count { color: var(--muted); font: 500 11px var(--mono); }
.wv-search { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.03); color: var(--muted); }
.wv-search:focus-within { border-color: rgba(196, 181, 253, 0.5); }
.wv-search svg { width: 13px; height: 13px; }
.wv-search input { background: transparent; border: 0; outline: 0; width: 200px; font-size: 12px; }
.wv-list { flex: 1; overflow-y: auto; transition: opacity 0.2s; }
.wv-list.loading { opacity: 0.45; }
.wrow { display: grid; grid-template-columns: minmax(220px, 2fr) 1fr 1fr 1fr 1.1fr .7fr 44px; gap: 14px; align-items: center; padding: 0 20px; min-height: 60px; border-bottom: 1px solid var(--rule); font: 13px var(--mono); }
.wrow.act { grid-template-columns: 80px minmax(200px, 2fr) 1fr 1fr .6fr 44px; }
.wrow .pair { font-family: var(--font); }
.wrow.head { min-height: 38px; color: var(--muted); font: 12px var(--font); position: sticky; top: 0; background: rgba(14, 11, 26, 0.96); z-index: 1; }
.wrow.item { cursor: pointer; transition: background 0.2s; animation: rowfade 0.45s var(--ease) both; }
.wrow.item:hover { background: linear-gradient(90deg, rgba(157, 123, 255, 0.08), transparent); }
.wrow .cell-sub { font-size: 11px; }
.wrow > span:last-child { text-align: right; }

/* calendrier PnL */
.modal.cal-modal { width: min(820px, calc(100vw - 32px)); padding: 20px 22px; }
.cal-head { display: flex; align-items: center; gap: 10px; }
.cal-head b { font: 600 18px/1 var(--font); }
.cal-month { min-width: 130px; text-align: center; font-weight: 600; text-transform: capitalize; }
.cal-total { font: 600 18px var(--mono); margin-top: 14px; }
.cal-bar { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; font: 500 12px var(--mono); margin: 8px 0 16px; }
.cal-bar div { display: flex; gap: 3px; height: 3px; }
.cal-bar i { border-radius: 3px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-grid .dow { text-align: center; color: var(--muted); font-size: 11px; padding-bottom: 4px; }
.cal-day { height: 76px; border-radius: 12px; padding: 8px; display: flex; flex-direction: column; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.03); transition: transform 0.2s var(--ease); }
.cal-day:hover { transform: translateY(-2px); }
.cal-day .n { font-size: 11px; color: var(--muted); }
.cal-day b { margin: auto; font: 600 14px var(--mono); color: var(--muted); }
.cal-day.win { background: rgba(62, 230, 164, var(--a)); border-color: rgba(62, 230, 164, 0.2); }
.cal-day.win b { color: var(--positive); }
.cal-day.loss { background: rgba(255, 92, 138, var(--a)); border-color: rgba(255, 92, 138, 0.2); }
.cal-day.loss b { color: var(--negative); }
.cal-day.fut { opacity: 0.35; }
.cal-foot { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 16px; font-size: 12px; color: var(--muted); }
.cal-foot .pill { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); }
.cal-foot .pill b { color: var(--text); }
.cal-brand { font: 700 16px var(--font); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ==========================================================================
   Filtres (façon Axiom)
   ========================================================================== */
.modal.flt { width: min(560px, calc(100vw - 32px)); padding: 0; }
.flt-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px 0; }
.flt-head h2 { margin: 0; }
.flt-tabs { display: flex; gap: 4px; padding: 14px 22px 0; border-bottom: 1px solid var(--rule); }
.flt-tabs button { position: relative; padding: 10px 12px; color: var(--muted); font-weight: 500; }
.flt-tabs button.on { color: var(--text); }
.flt-tabs button.on::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--grad); box-shadow: 0 0 10px rgba(157, 123, 255, 0.8); }
.flt-tabs .n { font: 500 10px var(--mono); margin-left: 5px; padding: 1px 5px; border-radius: 6px; background: rgba(157, 123, 255, 0.25); color: #ddd6fe; }
.flt-body { padding: 16px 22px; max-height: 56vh; overflow-y: auto; display: grid; gap: 14px; }
.flt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.flt-row .cap { grid-column: 1 / -1; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.flt-row .cap svg { width: 13px; height: 13px; }
.flt-row .field { height: 38px; }
.flt-cell { display: grid; gap: 8px; }
.flt-cell .cap { grid-column: auto; }
.flt-row .field input { font: 500 13px var(--mono); }
.flt-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.flt-chip { height: 32px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--control); color: var(--muted); display: inline-flex; align-items: center; gap: 7px; transition: all 0.2s; }
.flt-chip svg { width: 13px; height: 13px; }
.flt-chip.on { color: #fff; border-color: rgba(196, 181, 253, 0.6); background: var(--grad-soft); box-shadow: 0 0 16px -6px rgba(157, 123, 255, 0.9); }
.flt-foot { display: flex; gap: 8px; padding: 14px 22px 18px; border-top: 1px solid var(--rule); align-items: center; }
.flt-foot .btn { height: 40px; padding: 0 16px; }
.flt-foot .btn-blue-full { margin: 0; height: 40px; width: auto; flex: 1; }
.flt-btn { height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--control); color: var(--muted); font-weight: 500; font-size: 12px; background: rgba(255, 255, 255, 0.025); transition: all 0.2s; }
.flt-btn:hover { color: var(--text); border-color: rgba(196, 181, 253, 0.45); }
.flt-btn.on { color: #fff; border-color: rgba(196, 181, 253, 0.5); background: var(--grad-soft); }
.flt-btn svg { width: 13px; height: 13px; }
.flt-btn .n { font: 600 11px var(--mono); }

/* ==========================================================================
   Sniper
   ========================================================================== */
.sn-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); gap: 18px; padding: 0 26px 22px; overflow-y: auto; }
.sn-side { display: flex; flex-direction: column; gap: 18px; min-height: 0; }
.sn-main, .sn-side .card { border-radius: 18px; position: relative; }
.sn-hero { display: flex; align-items: center; gap: 18px; padding: 18px; margin: -4px -4px 8px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); }
.sn-hero.on { background: linear-gradient(120deg, rgba(62, 230, 164, 0.1), rgba(70, 212, 255, 0.06)); border-color: rgba(62, 230, 164, 0.25); }
.sn-state { font: 600 20px/1.2 var(--font); letter-spacing: -0.02em; }
.sn-orb { position: relative; width: 46px; height: 46px; flex: none; }
.sn-orb i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(196, 181, 253, 0.4); }
.sn-orb i:nth-child(2) { inset: 9px; border-color: rgba(196, 181, 253, 0.6); }
.sn-orb i:nth-child(3) { inset: 19px; background: var(--muted); border: 0; }
.sn-hero.on .sn-orb i { border-color: rgba(62, 230, 164, 0.6); animation: radar 2s var(--ease) infinite; }
.sn-hero.on .sn-orb i:nth-child(2) { animation-delay: 0.4s; }
.sn-hero.on .sn-orb i:nth-child(3) { background: var(--positive); box-shadow: 0 0 14px var(--positive); animation: none; }
@keyframes radar { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
.switch.big { width: 46px; height: 26px; }
.switch.big i { width: 20px; height: 20px; top: 2px; left: 2px; }
.switch.big.on i { transform: translateX(20px); }
.switch.on { background: linear-gradient(120deg, #34d399, #22d3ee); border-color: transparent; box-shadow: 0 0 16px -2px rgba(62, 230, 164, 0.7); }
.sn-real { margin-top: 16px; }
.sn-alert { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 13px; }
.sn-log { flex: 1; min-height: 240px; overflow-y: auto; }
.sn-line { display: grid; grid-template-columns: 36px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 12px; }
.sn-line.buy a { color: var(--positive); }
.sn-line.err a { color: var(--negative); }
.impact { display: flex; flex-wrap: wrap; gap: 4px 12px; font: 500 12px var(--mono); margin: -4px 0 12px; color: var(--muted); min-height: 16px; }
.impact b { color: var(--text); font-weight: 600; }
.impact .warn { color: var(--warning); }
.impact .bad { color: var(--negative); }
.tk-bell { opacity: 1; }

.stale-bar { position: fixed; left: 50%; top: 70px; transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 12px; font-size: 13px; background: rgba(40, 30, 10, 0.95); border: 1px solid rgba(255, 196, 107, 0.5); color: #ffe2b0; box-shadow: var(--float); max-width: calc(100vw - 32px); }
.stale-bar svg { width: 15px; height: 15px; color: var(--warning); flex: none; }

/* ---------- graphique : menu Affichage ---------- */
.chart-bar { position: relative; }
.disp-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 9px; color: var(--muted); font-weight: 500; font-size: 12px; border: 1px solid transparent; transition: all 0.2s; }
.disp-btn:hover { color: var(--text); border-color: var(--control); }
.disp-btn svg { width: 13px; height: 13px; }
.disp-pop { position: absolute; top: calc(100% + 6px); left: 20px; z-index: 30; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px; border-radius: 16px; width: 460px; max-width: calc(100vw - 60px);
  background: rgba(16, 13, 30, 0.94); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid var(--border); box-shadow: var(--float); animation: pop 0.18s var(--ease); }
.disp-pop[hidden] { display: none; }
.disp-col { background: rgba(255, 255, 255, 0.025); border: 1px solid var(--rule); border-radius: 12px; padding: 8px 10px; }
.disp-col h6 { margin: 2px 0 6px; font: 600 12px var(--font); color: var(--text); }
.disp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 12px; color: var(--muted); cursor: pointer; }
.disp-row:hover { color: var(--text); }

.tilt-flag { display: inline-flex; align-items: center; gap: 6px; color: var(--negative); font-weight: 600; }
.tilt-flag svg { width: 12px; height: 12px; }
.tilt-on { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 12px; border-radius: 12px; background: rgba(255, 92, 138, 0.1); border: 1px solid rgba(255, 92, 138, 0.3); font-size: 12px; }
.tilt-on svg { width: 16px; height: 16px; color: var(--negative); flex: none; }
.tilt-on .btn { margin-left: auto; }
.card h4 .switch { margin-left: 0; }

/* ---------- panneau d'ordre : limite, crayon ---------- */
.bs { align-items: center; }
.bs .ot { margin-bottom: 10px; }
.amt-line { display: flex; gap: 8px; align-items: center; }
.amt-line .field { flex: 1; }
.icon-btn.pencil { width: 40px; height: 40px; border-radius: 12px; }
.icon-btn.pencil.on { color: var(--positive); border-color: rgba(62, 230, 164, 0.5); }
.amts.editing { gap: 8px; }
.amt-edit input { width: 100%; height: 38px; border-radius: 12px; border: 1px solid rgba(196, 181, 253, 0.5); background: rgba(157, 123, 255, 0.08); text-align: center; font: 600 13px var(--mono); outline: 0; }
.limit-box { margin-top: 12px; }
.limit-box .label { margin-top: 0; }
.lim-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.lim-quick .btn { justify-content: center; height: 28px; }
.lim-hint { font-size: 11px; margin-top: 8px; }
.lim-list { margin-top: 14px; border-top: 1px solid var(--rule); padding-top: 4px; }
.lim-row { display: grid; grid-template-columns: 1fr auto 28px; gap: 10px; align-items: center; font-size: 12px; padding: 5px 0; }

.tr-sort { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--rule); font-size: 12px; }
.wperf { display: flex; flex-direction: column; align-items: flex-end; font: 600 13px var(--mono); }
.wperf span { font: 400 10px var(--mono); }

/* ---------- Instant Trade (panneau flottant, façon Axiom) ---------- */
.instant { position: fixed; z-index: 45; width: 300px; padding: 10px 12px 12px; border-radius: 16px; background: rgba(16, 13, 30, 0.95); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(196, 181, 253, 0.25); box-shadow: var(--float); animation: pop 0.2s var(--ease); }
.it-head { display: flex; align-items: center; gap: 6px; cursor: grab; user-select: none; margin-bottom: 8px; }
.it-head:active { cursor: grabbing; }
.it-presets { display: flex; gap: 2px; }
.it-presets button { height: 24px; padding: 0 8px; border-radius: 7px; font: 600 12px var(--font); color: var(--muted); }
.it-presets button.on { color: #fff; background: var(--grad-soft); box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.4); }
.it-head .icon-btn.on { color: var(--positive); }
.it-token { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); margin-bottom: 8px; font-size: 13px; }
.it-token .mono { font-size: 11px; }
.it-row { display: flex; align-items: center; gap: 6px; font-size: 11px; margin: 6px 0 5px; }
.it-k { font-weight: 600; font-size: 12px; }
.it-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.it-grid button, .it-edit { height: 32px; border-radius: 999px; font: 600 12px var(--mono); display: inline-flex; align-items: center; justify-content: center; transition: all 0.15s; }
.it-edit { width: 100%; text-align: center; border: 1px solid rgba(196, 181, 253, 0.5); background: rgba(157, 123, 255, 0.08); outline: 0; }
.it-buy { color: #7ff0c4; border: 1px solid rgba(62, 230, 164, 0.45); }
.it-buy:hover { background: var(--positive); color: #03140d; }
.it-sell { color: #ff9ab4; border: 1px solid rgba(255, 92, 138, 0.45); }
.it-sell:hover:not(:disabled) { background: var(--negative); color: #fff; }
.it-sell:disabled { opacity: 0.35; cursor: not-allowed; }
.it-info { display: flex; gap: 10px; margin: 7px 2px 2px; font: 500 10px var(--mono); color: var(--muted); }
.it-info span { display: inline-flex; align-items: center; gap: 3px; }
.it-info svg { width: 10px; height: 10px; }
.it-info .on { color: var(--positive); }
.it-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 10px; border-top: 1px solid var(--rule); padding-top: 8px; }
.it-stats div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.it-stats div + div { border-left: 1px solid var(--rule); }
.it-stats span { font-size: 10px; color: var(--muted); }
.it-stats b { font: 600 12px var(--mono); }
.it-stats small { font-size: 9px; }
.it-empty { font-size: 12px; line-height: 1.5; padding: 6px 2px; }
.instant-btn svg { color: #c4b5fd; }

.mw-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); margin-bottom: 6px; }
.mw-row.on { border-color: rgba(196, 181, 253, 0.5); background: var(--grad-soft); }
.mw-active { font: 600 10px var(--font); color: #ddd6fe; background: rgba(157, 123, 255, 0.25); padding: 2px 6px; border-radius: 6px; vertical-align: 1px; }
.mw-row .btn.blue { height: 28px; }

.modal.replay-modal { width: min(620px, calc(100vw - 32px)); }
.replay-modal h2 { gap: 8px; justify-content: flex-start; }
.replay-modal h2 > svg { width: 18px; height: 18px; color: #c4b5fd; }
.rp-stage { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); }
.rp-stage canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; background: #05040b; }
.rp-busy { position: absolute; inset: 0; display: flex; gap: 12px; align-items: center; justify-content: center; padding: 30px; text-align: center; color: var(--muted); background: rgba(5, 4, 11, 0.85); }

/* infobulle des bulles de trades (les bulles sont dessinées dans le graphique) */
.bub-tip { position: absolute; z-index: 5; pointer-events: none; max-width: 250px; padding: 7px 9px; border-radius: 10px; font: 500 11px/1.5 var(--font);
  background: rgba(14, 11, 26, 0.95); border: 1px solid var(--border); box-shadow: var(--float); }
.bub-tip[hidden] { display: none; }

/* bilan de position façon Axiom */
.ps-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, 0.02); }
.ps-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px; text-align: center; }
.ps-cell + .ps-cell { border-left: 1px solid var(--rule); }
.ps-cell .l { font-size: 11px; color: var(--muted); }
.ps-cell b { font: 600 14px var(--mono); }
.ps-cell .s { font: 500 10px var(--mono); color: var(--muted); display: inline-flex; align-items: center; gap: 3px; }
.ps-cell.pnl { background: rgba(255, 255, 255, 0.025); }
.ps-sub { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: 11px; color: var(--muted); }
.ps-sub b { font: 600 11px var(--mono); color: var(--text); }
.ps-sub b.up { color: var(--positive); }
.ps-sub b.down { color: var(--negative); }
#tkPos h4 .icon-btn { margin-left: 4px; }

/* interrupteur protection MEV */
.mev-row { display: flex; align-items: center; gap: 8px; width: 100%; margin: -6px 0 14px; font-size: 12px; color: var(--muted); text-align: left; }
.mev-row.on { color: var(--text); }
.mev-row .switch { pointer-events: none; }

/* import du Tracker par fichier */
.import-file { width: 100%; justify-content: center; height: 36px; margin-top: 8px; border-style: dashed; cursor: pointer; }

/* ---------- Scan ---------- */
.drow { grid-template-columns: minmax(260px, 2.2fr) 1fr 1fr 1fr 1fr minmax(250px, 1.7fr) 150px; }
.pc-acts { display: flex; gap: 6px; justify-content: flex-end; align-items: center; margin-top: 6px; }
.pc-r .pc-acts .qbuy { margin-top: 0; }
.qsell { height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(255, 92, 138, 0.4); color: #ff9ab4; font: 600 11px var(--mono); background: rgba(255, 92, 138, 0.08); transition: all 0.2s; }
.qsell:hover { background: var(--negative); color: #fff; }
.qsell.loading { opacity: 0.5; }
.scan-btn { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--control); color: var(--muted); font: 600 11px var(--font); transition: all 0.2s; white-space: nowrap; }
.scan-btn svg { width: 12px; height: 12px; }
.scan-btn:hover { color: #fff; border-color: rgba(196, 181, 253, 0.6); background: rgba(157, 123, 255, 0.12); }
.tk-name .scan-btn { margin-left: 4px; }
.modal.scan-modal { width: min(680px, calc(100vw - 32px)); }
.scan-modal h2 { gap: 8px; justify-content: flex-start; }
.scan-modal h2 > svg { width: 18px; height: 18px; color: #c4b5fd; }
.sc-loading { display: flex; gap: 14px; align-items: center; padding: 40px 10px; line-height: 1.6; }
.sc-head { display: flex; gap: 18px; align-items: center; margin: 6px 0 16px; }
.sc-head .score-ring { width: 84px; height: 84px; }
.sc-head .score-ring b { font-size: 28px; }
.sc-verdict { font: 700 18px var(--font); letter-spacing: -0.01em; margin-bottom: 6px; }
.sc-verdict.good { color: var(--positive); }
.sc-verdict.mid { color: var(--warning); }
.sc-verdict.bad { color: var(--negative); }
.sc-verdict.neutral { color: var(--text); }
.sc-sum { color: var(--muted); font-size: 13px; line-height: 1.55; }
.sc-sec { border-top: 1px solid var(--rule); padding: 12px 0; }
.sc-sec h5 { margin: 0 0 8px; font: 600 12px var(--font); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.sc-sec ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; line-height: 1.5; }
.sc-sec.ok h5 { color: var(--positive); }
.sc-sec.mid h5 { color: var(--warning); }
.sc-sec.bad h5 { color: var(--negative); }
.sc-item { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; font-size: 13px; padding: 4px 0; }
.sc-ev { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; padding: 5px 0; line-height: 1.5; }
.sc-ev b { display: inline-flex; align-items: center; gap: 5px; min-width: 96px; color: var(--muted); font-weight: 600; }
.sc-ev b svg { width: 12px; height: 12px; }
.sc-ev a { color: #c4b5fd; }
.tk-bell:hover { color: #c4b5fd; }

/* ---------- mobile ---------- */
@media (max-width: 1250px) {
  .drow { grid-template-columns: minmax(200px, 2fr) 1fr 1fr 1fr 150px; }
}
@media (max-width: 1100px) {
  .sn-grid { grid-template-columns: 1fr; }
  .wv-top { grid-template-columns: 1fr 1fr; }
  .wv-top > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .side { background: rgba(8, 6, 16, 0.85); }
  .nav a::before { display: none; }
  .nav a.active::after { left: 14px; right: 14px; top: -1px; height: 2px; width: auto; }
  .nav a { border-radius: 12px; height: 52px; }
  .page-head h1 { font-size: 34px; }
  .pulse-grid, .tk, .tr-grid { padding: 0 12px 12px; }
  .dtable { margin: 0 12px 12px; }
  .modal.wv { width: 100vw; height: 100vh; border-radius: 0; overflow-y: auto; display: block; }
  .wv-list { overflow: visible; }
  .wv-head { flex-wrap: wrap; }
  .wv-top { grid-template-columns: 1fr; padding: 12px; }
  .wv-tabs { overflow-x: auto; }
  .wv-search { display: none; }
  .wrow, .wrow.act { grid-template-columns: 1.6fr 1fr 1fr; padding: 8px 12px; }
  .wrow > span:nth-child(n+4) { display: none; }
  .wrow.act > span:nth-child(4), .wrow > span:nth-child(5) { display: block; }
  .cal-day { height: 54px; padding: 5px; }
  .cal-day b { font-size: 10px; }
  .flt-row { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  #bg { display: none; }
}