/* ═══════════════════════════════════════════════════════════
     WHALE TRACKER — design system
     Deux langages de couleur cohabitent :
       · bleu marine / bleu clair  = identité (marque, navigation, interaction)
       · vert / rouge / ambre      = signal (données de marché)
     ═══════════════════════════════════════════════════════════ */

  /* ── THÈME NUIT (défaut) ─────────────────── */
  :root {
    --bg: #05080d;
    --bg2: #0a1017;
    --bg3: #101a24;
    --bg4: #18242f;
    --border: #1b2836;
    --border-soft: rgba(40,62,84,.5);
    /* marque */
    --brand: #0B2E4F;
    --brand-lite: #3B8FD9;
    --brand-ink: #6fb3ee;      /* texte/icône de marque lisible sur fond sombre */
    --brand-veil: rgba(11,46,79,.55);
    /* signal */
    --accent: #00ff88;         /* accent UI fonctionnel (validation, actif) */
    --accent2: #00c4ff;
    --up: #24e08c;             /* data : hausse */
    --down: #ff5470;           /* data : baisse */
    --amber: #ffb340;          /* magnitude (volume) — neutre vs direction */
    --yellow: #ffcc00;
    --text: #e8eff7;
    --text2: #93a7bb;
    --muted: #5c748a;
    --dim: #3f5567;
    /* profondeur */
    --card-bg: rgba(11,17,25,.66);
    --card-grad: linear-gradient(158deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.008) 40%, rgba(59,143,217,.045) 100%);
    --card-blur: blur(14px) saturate(125%);
    --hairline: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand-lite) 55%, transparent), transparent);
    --shadow-card: inset 0 1px 0 rgba(255,255,255,.055), 0 10px 30px -18px rgba(0,0,0,.85);
    --shadow-hover: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 38px -20px rgba(0,0,0,.9), 0 0 0 1px color-mix(in srgb, var(--brand-lite) 22%, transparent);
    --shadow-float: inset 0 1px 0 rgba(255,255,255,.06), 0 30px 70px -24px rgba(0,0,0,.85);
    --glow-a: rgba(59,143,217,.10);
    --glow-b: rgba(0,196,255,.045);
    --row-hover: color-mix(in srgb, var(--brand-lite) 8%, transparent);
    --row-zebra: rgba(255,255,255,.012);
    --track: rgba(255,255,255,.055);
    --btn-ink: #04121f;
    --ease: cubic-bezier(.22,1,.36,1);
    --ease-soft: cubic-bezier(.4,0,.2,1);
    --sp1: #8fb4c9; --sp2: #ffd54a; --sp3: #ffb340; --sp4: #ff8f4d;
    --overlay: rgba(3,7,12,.7);
    --mono: 'Space Mono', ui-monospace, 'JetBrains Mono', monospace;
    --sans: 'Syne', system-ui, -apple-system, sans-serif;
    /* Serif éditorial du site vitrine — n'est utilisé QUE par le panneau de
       connexion anonyme, pour que la continuité avec le site et le tunnel de
       paiement soit visible. Le reste du dashboard reste en Syne. */
    --serif-ed: 'Newsreader', Georgia, 'Times New Roman', serif;
  }
  /* ── THÈME JOUR (crème) — contrastes validés ≥ 4.6:1 ── */
  :root[data-theme="light"] {
    --bg: #f4f0e6;
    --bg2: #fbf8f1;
    --bg3: #efeadd;
    --bg4: #e6e0d0;
    --border: #ddd4c0;
    --border-soft: rgba(190,178,152,.5);
    --brand: #0B2E4F;
    --brand-lite: #1d5f9e;
    --brand-ink: #0B2E4F;
    --brand-veil: rgba(11,46,79,.08);
    --accent: #0a7343;
    --accent2: #0b6f9e;
    --up: #0a7343;
    --down: #c31f38;
    --amber: #835206;
    --yellow: #8a6206;
    --text: #241f18;
    --text2: #5c5548;
    --muted: #736a5c;
    --dim: #9a917f;
    --card-bg: rgba(255,253,248,.72);
    --card-grad: linear-gradient(158deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.3) 45%, rgba(11,46,79,.045) 100%);
    --card-blur: blur(12px) saturate(115%);
    --hairline: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand) 30%, transparent), transparent);
    --shadow-card: inset 0 1px 0 rgba(255,255,255,.85), 0 6px 18px -12px rgba(90,74,42,.35);
    --shadow-hover: inset 0 1px 0 rgba(255,255,255,.9), 0 14px 30px -16px rgba(90,74,42,.4), 0 0 0 1px color-mix(in srgb, var(--brand) 18%, transparent);
    --shadow-float: inset 0 1px 0 rgba(255,255,255,.9), 0 26px 60px -22px rgba(90,74,42,.4);
    --glow-a: rgba(11,46,79,.06);
    --glow-b: rgba(11,111,158,.04);
    --row-hover: color-mix(in srgb, var(--brand) 7%, transparent);
    --row-zebra: rgba(120,100,60,.03);
    --track: rgba(90,74,42,.12);
    --btn-ink: #fbf8f1;
    --sp1: #4a6b7d; --sp2: #8a6206; --sp3: #9a4f06; --sp4: #a83a12;
    --overlay: rgba(58,48,30,.42);
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  body { background:var(--bg); color:var(--text); font-family:var(--sans); min-height:100vh; -webkit-font-smoothing:antialiased;
         transition:background .35s var(--ease), color .35s var(--ease); }
  body::before {
    content:''; position:fixed; inset:0;
    background: radial-gradient(ellipse 70% 45% at 12% -10%, var(--glow-a) 0%, transparent 60%),
                radial-gradient(ellipse 55% 48% at 92% 108%, var(--glow-b) 0%, transparent 58%);
    pointer-events:none; z-index:0;
  }
  ::selection { background:color-mix(in srgb, var(--brand-lite) 30%, transparent); }
  .container { max-width:1800px; margin:0 auto; padding:0 28px; position:relative; z-index:1; }
  svg.ic { width:1em; height:1em; flex-shrink:0; }

  /* ── HEADER ─────────────────────────────── */
  header {
    position:relative; padding:20px 0 19px; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  }
  header::after { content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--hairline); }
  .logo { display:flex; align-items:center; gap:15px; animation:cardIn .6s var(--ease) both; }
  .logo-tile {
    width:48px; height:48px; border-radius:13px; flex-shrink:0; position:relative; overflow:hidden;
    background:#04070d url('/static/logo-256.png') center 47% / 122% no-repeat;
    border:1px solid color-mix(in srgb, var(--brand-lite) 30%, transparent);
    box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 6px 20px -8px color-mix(in srgb, var(--brand-lite) 55%, transparent);
    transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .logo-tile::after {
    content:''; position:absolute; inset:0; border-radius:inherit;
    background:linear-gradient(160deg, rgba(255,255,255,.13), transparent 55%);
  }
  .logo:hover .logo-tile { transform:translateY(-1px) scale(1.03); box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 10px 26px -8px color-mix(in srgb, var(--brand-lite) 75%, transparent); }
  .logo h1 { font-family:var(--sans); font-size:19px; font-weight:800; letter-spacing:3.4px; text-transform:uppercase; line-height:1;
             background:linear-gradient(96deg, var(--text) 30%, var(--brand-ink)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .logo h1 em { font-style:normal; font-weight:500; letter-spacing:2.2px; font-size:13px; color:var(--brand-ink); -webkit-text-fill-color:var(--brand-ink); }
  .logo .tagline { font-family:var(--mono); font-size:9.5px; color:var(--muted); display:block; letter-spacing:1.1px; margin-top:7px; }
  .header-right { display:flex; align-items:center; gap:10px; animation:cardIn .6s var(--ease) .08s both; }
  .theme-btn { display:inline-flex; align-items:center; gap:8px; background:var(--bg3); border:1px solid var(--border); color:var(--text2);
    padding:7px 14px; border-radius:20px; font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:1.4px; cursor:pointer;
    transition:border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease); }
  .theme-btn:hover { border-color:color-mix(in srgb, var(--brand-lite) 55%, transparent); color:var(--brand-ink); }
  .theme-btn svg { width:13px; height:13px; }
  .live-badge { display:flex; align-items:center; gap:9px; font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:1.5px;
    padding:7px 15px; border-radius:20px; border:1px solid; transition:all .35s var(--ease); }
  .live-badge.active { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 22%, transparent); background:color-mix(in srgb, var(--accent) 6%, transparent); }
  .live-badge.inactive { color:var(--muted); border-color:var(--border); background:color-mix(in srgb, var(--muted) 6%, transparent); }
  .live-dot { width:7px; height:7px; background:currentColor; border-radius:50%; position:relative; }
  .live-badge.active .live-dot::after { content:''; position:absolute; inset:-4px; border-radius:50%; border:1px solid currentColor; animation:ping 2s var(--ease) infinite; }
  @keyframes ping { 0%{transform:scale(.5);opacity:.85} 100%{transform:scale(1.7);opacity:0} }

  /* ── PANNEAU ANONYME ────────────────────── */
  /* Aligné sur la direction artistique du site vitrine et du tunnel de paiement
     (/premium/subscribe) : deux volets séparés par un FILET, pas par du relief.
     Le reste du dashboard garde ses cartes en verre — ce panneau-ci est le seul
     écran que voit quelqu'un venu du site, il doit lui ressembler. Les tokens
     restent ceux du thème (var(--bg2), var(--border)…), donc le panneau suit
     automatiquement le mode nuit comme le mode crème. */
  .anon-panel {
    position:relative; display:grid; grid-template-columns:1fr; margin:22px 0;
    background:var(--bg2); border:1px solid var(--border); border-radius:2px;
    animation:cardIn .6s var(--ease) both;
  }
  .anon-panel-text { padding:30px 28px; background:var(--bg3); }
  .anon-panel-text .eyebrow { font-family:var(--mono); font-size:10px; letter-spacing:.15em;
    text-transform:uppercase; color:var(--muted); margin-bottom:11px; }
  .anon-panel-text h2 { font-family:var(--serif-ed); font-size:27px; font-weight:600; letter-spacing:-.012em;
    line-height:1.18; margin-bottom:14px; color:var(--text); }
  .anon-panel-text h2 em { font-style:italic; color:var(--brand-ink); }
  .anon-panel-text p { font-family:var(--serif-ed); font-size:14.5px; line-height:1.6; color:var(--text2); }

  /* Sous 830px l'ACTION passe avant l'argumentaire — même raisonnement que sur
     /premium/subscribe : empiler la présentation au-dessus repousse les boutons
     de connexion loin sous le pli. Seul l'ordre VISUEL change ; le volet de
     gauche ne contient aucun élément focusable, la tabulation suit le DOM. */
  .anon-panel-text { order:2; }
  .anon-panel-login { order:1; }
  @media (min-width:830px) {
    .anon-panel { grid-template-columns:1.04fr .96fr; }
    .anon-panel-text { order:1; }
    .anon-panel-login { order:2; border-top:0; border-left:1px solid var(--border); }
  }

  .anon-panel-login { display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:0; padding:30px 28px; border-top:1px solid var(--border); }
  .anon-login-label { font-family:var(--mono); font-size:10px; font-weight:400; letter-spacing:.15em;
    text-transform:uppercase; color:var(--muted); align-self:flex-start; }
  .anon-login-title { font-family:var(--serif-ed); font-size:23px; font-weight:600; letter-spacing:-.012em;
    line-height:1.18; color:var(--text); align-self:flex-start; margin-top:11px; }
  .anon-login-lede { font-family:var(--serif-ed); font-size:14.5px; line-height:1.6; color:var(--text2);
    align-self:flex-start; margin-top:11px; }
  .anon-login-slot { width:100%; max-width:264px; display:flex; justify-content:center;
    min-height:40px; margin-top:24px; }
  .anon-login-sep { display:flex; align-items:center; gap:11px; width:100%; max-width:264px; margin:15px 0; }
  .anon-login-sep::before, .anon-login-sep::after { content:''; flex:1; height:1px; background:var(--border); }
  .anon-login-sep span { font-family:var(--mono); font-size:10px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--dim); }
  .anon-login-hint { font-family:var(--serif-ed); font-size:12.5px; line-height:1.5; color:var(--dim);
    text-align:center; max-width:240px; }
  .anon-login-hint code { font-family:var(--mono); color:var(--brand-ink); }
  /* Le bouton Google garde un fond blanc et une encre fixes dans les deux
     thèmes : c'est une marque tierce, la recolorer la rendrait méconnaissable. */
  .google-login-btn { display:flex; align-items:center; justify-content:center; gap:10px;
    width:100%; max-width:264px; height:40px; background:#fff; border:1px solid var(--border);
    color:#3c4043; border-radius:4px; font-family:var(--serif-ed); font-size:14.5px; font-weight:600;
    text-decoration:none; transition:border-color .22s var(--ease), box-shadow .22s var(--ease); }
  .google-login-btn:hover { border-color:var(--muted); box-shadow:0 1px 0 rgba(36,31,24,.08); }

  .anon-login-tg-link { display:flex; align-items:center; justify-content:center;
    width:100%; max-width:264px; height:40px; background:#2AABEE; border:1px solid #2AABEE;
    color:#fff; border-radius:4px; font-family:var(--serif-ed); font-size:14.5px; font-weight:600;
    text-decoration:none; transition:background .22s var(--ease); }
  .anon-login-tg-link:hover { background:#1e96d6; }

  /* ── DASHBOARD ABONNÉ ───────────────────── */
  .subscriber-wrap { margin:14px 0 22px; }
  .subscriber-wrap thead tr.hcol th { position:sticky; top:0; }

  /* ── STATS ──────────────────────────────── */
  .stats-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; padding:22px 0 6px; }
  .stat-card {
    position:relative; overflow:hidden;
    background:var(--card-grad), var(--card-bg);
    -webkit-backdrop-filter:var(--card-blur); backdrop-filter:var(--card-blur);
    border:1px solid var(--border-soft); border-radius:14px; padding:15px 17px 16px;
    box-shadow:var(--shadow-card);
    transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
    animation:cardIn .55s var(--ease) both;
  }
  .stat-card::before { content:''; position:absolute; top:0; left:12%; right:12%; height:1px; background:var(--hairline); opacity:.7; }
  .stats-grid .stat-card:nth-child(1){animation-delay:40ms}   .stats-grid .stat-card:nth-child(2){animation-delay:75ms}
  .stats-grid .stat-card:nth-child(3){animation-delay:110ms}  .stats-grid .stat-card:nth-child(4){animation-delay:145ms}
  .stats-grid .stat-card:nth-child(5){animation-delay:180ms}  .stats-grid .stat-card:nth-child(6){animation-delay:215ms}
  .stats-grid .stat-card:nth-child(7){animation-delay:250ms}  .stats-grid .stat-card:nth-child(8){animation-delay:285ms}
  .stats-grid .stat-card:nth-child(9){animation-delay:320ms}  .stats-grid .stat-card:nth-child(10){animation-delay:355ms}
  .stats-grid .stat-card:nth-child(11){animation-delay:390ms} .stats-grid .stat-card:nth-child(12){animation-delay:425ms}
  .stats-grid .stat-card:nth-child(13){animation-delay:460ms}
  @keyframes cardIn { from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)} }
  .stat-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-hover); border-color:color-mix(in srgb, var(--brand-lite) 30%, transparent); }
  .stat-label { font-size:9.5px; font-family:var(--sans); font-weight:600; color:var(--muted); letter-spacing:1.5px; text-transform:uppercase;
                margin-bottom:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .stat-value { font-family:var(--mono); font-size:22px; font-weight:700; color:var(--text); line-height:1; font-variant-numeric:tabular-nums; white-space:nowrap; letter-spacing:-.5px; }
  .stat-value .unit { font-family:var(--sans); font-size:10px; font-weight:600; color:var(--muted); margin-left:5px; letter-spacing:.6px; }
  .stat-value.green { color:var(--up); }
  .stat-value.red { color:var(--down); }
  .stat-value.blue { color:var(--brand-ink); }
  .stat-value.amber { color:var(--amber); }
  .num-flash { animation:numFlash .6s var(--ease); }
  @keyframes numFlash { 0%{filter:brightness(1.5)} 100%{filter:brightness(1)} }

  /* ── WIDGET POST-ALERTE ─────────────────── */
  .badge-premium{font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;
    padding:2px 5px;border-radius:3px;margin-left:6px;vertical-align:middle;
    background:var(--accent-soft,#17293d);color:var(--accent,#5FA8E8);font-weight:700}
  .halloc-body{display:grid;gap:14px;padding:4px 2px 2px}
  .halloc-line{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
    font-family:'Space Mono',monospace;font-size:.86rem}
  .halloc-line b{font-weight:700}
  .halloc-bar{height:8px;border-radius:4px;background:var(--rule,#2a3a4d);overflow:hidden}
  .halloc-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,#3B8FD9,#00c4ff);
    transition:width .5s ease}
  .halloc-axes{display:flex;gap:8px;flex-wrap:wrap;font-family:'Space Mono',monospace;font-size:.78rem}
  .halloc-axes span{padding:3px 9px;border-radius:3px;background:var(--panel-2,#182b41)}
  .halloc-axes span.hot{background:#17293d;color:#5FA8E8;font-weight:700}
  .halloc-note{font-size:.78rem;opacity:.7;line-height:1.5}

  .post-widget {
    position:relative; overflow:hidden;
    background:var(--card-grad), var(--card-bg);
    -webkit-backdrop-filter:var(--card-blur); backdrop-filter:var(--card-blur);
    border:1px solid var(--border-soft); border-radius:16px; padding:20px 22px 18px; margin:14px 0 22px;
    box-shadow:var(--shadow-card);
    animation:cardIn .6s var(--ease) .26s both;
  }
  .post-widget::before { content:''; position:absolute; top:0; left:6%; right:6%; height:1px; background:var(--hairline); }
  .post-widget-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:12px; }
  .pw-heading { display:flex; align-items:center; gap:9px; font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--text); }
  .pw-heading svg { color:var(--brand-ink); width:15px; height:15px; }
  .pw-caption { font-size:11.5px; color:var(--muted); margin-top:7px; letter-spacing:.1px; }
  .pw-controls { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
  .seg { display:flex; background:var(--bg3); border:1px solid var(--border); border-radius:9px; padding:3px; gap:3px; }
  .seg-btn { padding:6px 14px; border-radius:6px; font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:1.1px; color:var(--muted); cursor:pointer;
             transition:color .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease); }
  .seg-btn:hover { color:var(--text2); }
  .seg-btn.active { background:var(--bg2); color:var(--text); box-shadow:var(--shadow-card); }
  .seg-btn.seg-pump.active { color:var(--up); }
  .seg-btn.seg-dump.active { color:var(--down); }
  .spike-filters { display:flex; gap:6px; flex-wrap:wrap; }
  .spike-filter { background:var(--bg3); border:1px solid var(--border); color:var(--muted); padding:6px 13px; border-radius:7px;
                  font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:1.1px; cursor:pointer; transition:all .22s var(--ease); }
  .spike-filter:hover { border-color:color-mix(in srgb, var(--brand-lite) 45%, transparent); color:var(--brand-ink); }
  .spike-filter.active { border-color:color-mix(in srgb, var(--brand-lite) 70%, transparent); color:var(--brand-ink); background:color-mix(in srgb, var(--brand-lite) 12%, transparent); }
  .post-bars { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
  .post-bar { position:relative; background:var(--row-zebra); border:1px solid var(--border-soft); border-radius:12px; padding:14px 15px 13px;
              transition:border-color .25s var(--ease), background .25s var(--ease); }
  .post-bar:hover { border-color:color-mix(in srgb, var(--brand-lite) 25%, transparent); }
  .pb-top { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:4px; }
  .post-bar-label { font-family:var(--sans); font-size:10.5px; font-weight:700; color:var(--text2); letter-spacing:1.4px; }
  .pb-n { font-family:var(--mono); font-size:9.5px; color:var(--dim); }

  /* jauge demi-cercle : intensité + sens du mouvement moyen */
  .gauge { position:relative; margin:2px auto 0; max-width:190px; }
  .gauge-svg { display:block; width:100%; height:auto; overflow:visible; }
  .g-track { fill:none; stroke:var(--track); stroke-width:7; stroke-linecap:round; }
  .g-arc { fill:none; stroke-width:7; stroke-linecap:round; stroke-dasharray:0 1; opacity:0;
           transition:stroke-dasharray .6s var(--ease), opacity .3s var(--ease); }
  .g-arc.pos { stroke:var(--up); }
  .g-arc.neg { stroke:var(--down); }
  .g-tick { stroke:color-mix(in srgb, var(--text) 45%, transparent); stroke-width:1.6; }
  .g-needle { transform-box:view-box; transform-origin:60px 58px; transition:transform .65s var(--ease), opacity .3s var(--ease); }
  .g-needle line { stroke:var(--text); stroke-width:2; stroke-linecap:round; }
  .g-needle circle { fill:var(--text); }
  .g-needle.off { opacity:.28; }
  .gauge-val { position:absolute; left:0; right:0; bottom:2px; text-align:center; }
  .post-bar-value { font-family:var(--mono); font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1; letter-spacing:-.6px; }
  .post-bar-value.up { color:var(--up); }
  .post-bar-value.down { color:var(--down); }
  .post-bar-value.neutral { color:var(--dim); }
  .pw-scale { display:flex; justify-content:space-between; font-family:var(--mono); font-size:8.5px; color:var(--dim); margin-top:4px; }
  .post-bar-sub { font-size:10.5px; color:var(--text2); margin-top:10px; padding-top:9px; border-top:1px solid var(--border-soft);
                  display:flex; align-items:center; gap:6px; }
  .post-bar-sub svg { width:11px; height:11px; }
  .post-bar-sub.up { color:var(--up); } .post-bar-sub.down { color:var(--down); }
  .pw-footer { margin-top:15px; padding-top:14px; border-top:1px solid var(--border-soft); font-size:11.5px; color:var(--text2);
               display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .pw-footer b { color:var(--text); font-weight:700; }
  .pw-footer .sep { color:var(--dim); }
  .pw-footer svg { color:var(--brand-ink); }

  /* ── TOOLBAR ────────────────────────────── */
  .toolbar { display:flex; align-items:center; gap:9px; padding:2px 0 16px; flex-wrap:wrap; }
  .filter-btn, .queue-filter-btn { background:var(--bg3); border:1px solid var(--border); color:var(--text2); padding:8px 15px; border-radius:8px;
                font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:1px; cursor:pointer; transition:all .22s var(--ease); }
  .filter-btn:hover, .queue-filter-btn:hover { border-color:color-mix(in srgb, var(--brand-lite) 45%, transparent); color:var(--brand-ink); }
  .filter-btn.active, .queue-filter-btn.active { border-color:color-mix(in srgb, var(--brand-lite) 75%, transparent); color:var(--brand-ink); background:color-mix(in srgb, var(--brand-lite) 12%, transparent); }
  .search-wrap { position:relative; display:flex; align-items:center; }
  .search-wrap svg { position:absolute; left:11px; width:12px; height:12px; color:var(--muted); pointer-events:none; }
  .search-input { background:var(--bg3); border:1px solid var(--border); color:var(--text); padding:8px 13px 8px 30px; border-radius:8px;
                  font-family:var(--mono); font-size:11px; width:200px; outline:none; transition:border-color .22s, box-shadow .22s; }
  .search-input:focus { border-color:var(--brand-lite); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-lite) 14%, transparent); }
  .search-input::placeholder { color:var(--muted); }
  /* Liste déroulante des versions — un seul choix aujourd'hui (v1.0), d'autres
     s'ajouteront en <option> à mesure que de nouvelles versions sortiront. */
  .era-select { background:var(--bg3); border:1px solid var(--border); color:var(--text2); padding:8px 13px; border-radius:8px;
                font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:1px; cursor:pointer; outline:none; }
  .era-select:hover { border-color:color-mix(in srgb, var(--brand-lite) 45%, transparent); color:var(--brand-ink); }
  .refresh-btn { margin-left:auto; display:inline-flex; align-items:center; gap:8px; background:color-mix(in srgb, var(--accent) 7%, transparent);
    border:1px solid color-mix(in srgb, var(--accent) 28%, transparent); color:var(--accent); padding:8px 15px; border-radius:8px;
    font-family:var(--sans); font-size:10.5px; font-weight:700; letter-spacing:1px; cursor:pointer; transition:all .22s var(--ease); }
  .refresh-btn:hover { background:color-mix(in srgb, var(--accent) 14%, transparent); }
  .refresh-btn:active { transform:scale(.97); }
  .refresh-btn svg { width:12px; height:12px; }
  .refresh-btn.loading svg { animation:spin .7s linear infinite; }
  @keyframes spin { to { transform:rotate(360deg); } }

  /* ── TABLE ──────────────────────────────── */
  .section-header { display:flex; align-items:center; gap:10px; padding:2px 0 10px; }
  .section-title { font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:2.2px; text-transform:uppercase; color:var(--text2); }
  .section-count { background:var(--bg3); border:1px solid var(--border); color:var(--brand-ink); padding:2px 9px; border-radius:6px; font-family:var(--mono); font-size:10px; }
  .legend { margin-left:auto; display:flex; gap:14px; font-family:var(--sans); font-size:10px; font-weight:500; color:var(--muted); }
  .legend i { display:inline-block; width:7px; height:7px; border-radius:2px; margin-right:5px; vertical-align:0px; }
  /* Zone de défilement indépendante (comme un tableur) : le scroll s'arrête
     toujours net sur une limite de ligne, jamais à cheval sous l'en-tête collant. */
  .table-wrap {
    overflow:auto; max-height:min(72vh, 900px); border-radius:12px;
    border:1px solid var(--border-soft);
    scroll-snap-type:y mandatory; overscroll-behavior:contain;
    scrollbar-width:thin; scrollbar-color:var(--border) transparent;
  }
  .table-wrap::-webkit-scrollbar { width:9px; height:9px; }
  .table-wrap::-webkit-scrollbar-track { background:transparent; }
  .table-wrap::-webkit-scrollbar-thumb { background:var(--border); border-radius:5px; }
  .table-wrap::-webkit-scrollbar-thumb:hover { background:var(--muted); }
  .table-wrap tbody { transition:opacity .16s var(--ease-soft); }
  .table-wrap.fading tbody { opacity:.2; }
  table { width:100%; border-collapse:collapse; font-size:12px; }
  /* rangée 1 : groupes */
  thead tr.hgroup th { position:sticky; top:0; z-index:3; background:var(--bg); font-family:var(--sans); font-size:9px; font-weight:600;
    letter-spacing:1.8px; text-transform:uppercase; color:var(--dim); padding:10px 12px 5px; text-align:left; white-space:nowrap; }
  thead tr.hgroup th.g { color:var(--text2); border-bottom:1px solid var(--border-soft); }
  thead tr.hgroup th.g.key { color:var(--brand-ink); }
  /* rangée 2 : colonnes */
  thead tr.hcol th { position:sticky; top:var(--hgroup-h, 29px); z-index:3; background:var(--bg); font-family:var(--sans); font-size:10px;
    font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--text2); padding:7px 12px 10px; text-align:left;
    border-bottom:1px solid var(--border); white-space:nowrap; }
  thead tr.hcol th.dim { color:var(--muted); font-weight:400; }
  .gsep { border-left:1px solid var(--border-soft); }
  /* en-têtes triables */
  /* pas de position:relative ici : ça l'emporterait sur le position:sticky de la règle de base
     (spécificité [data-sort] > .hcol th) et briserait le collant de toute la ligne. sticky
     fournit déjà un contexte de positionnement pour le ::after (flèche de tri). */
  thead tr.hcol th[data-sort] { cursor:pointer; user-select:none; transition:color .18s var(--ease); }
  thead tr.hcol th[data-sort]:hover { color:var(--brand-ink); }
  thead tr.hcol th[data-sort]::after {
    content:'↕'; margin-left:5px; opacity:0; font-size:9px; transition:opacity .18s; }
  thead tr.hcol th[data-sort]:hover::after { opacity:.45; }
  thead tr.hcol th.sorted { color:var(--brand-ink); }
  thead tr.hcol th.sorted::after { content:'↓'; opacity:1; }
  thead tr.hcol th.sorted.asc::after { content:'↑'; }
  .tb-sep { width:1px; height:22px; background:var(--border); margin:0 3px; }
  .sort-chip { display:none; align-items:center; gap:6px; font-family:var(--mono); font-size:9.5px; letter-spacing:.3px;
    color:var(--brand-ink); background:color-mix(in srgb, var(--brand-lite) 12%, transparent);
    border:1px solid color-mix(in srgb, var(--brand-lite) 32%, transparent); padding:3px 8px; border-radius:6px; }
  .sort-chip.on { display:inline-flex; }
  .sort-chip button { background:none; border:none; color:inherit; cursor:pointer; font:inherit; opacity:.7; padding:0 0 0 2px; }
  .sort-chip button:hover { opacity:1; }
  .rsi-cell { font-family:var(--mono); font-size:11.5px; font-weight:700; font-variant-numeric:tabular-nums; }
  .rsi-cell.hot { color:var(--down); }
  .rsi-cell.cold { color:var(--accent2); }
  .rsi-cell.mid { color:var(--text2); }
  body.public-mode tbody tr { cursor:default; }
  tbody tr {
    border-bottom:1px solid var(--border-soft); cursor:pointer;
    transition:background .25s var(--ease-soft), box-shadow .25s var(--ease-soft);
    scroll-snap-align:start; scroll-margin-top:var(--thead-h, 63px);
  }
  tbody tr:nth-child(even) { background:var(--row-zebra); }
  tbody tr:hover { background:linear-gradient(90deg, var(--row-hover), color-mix(in srgb, var(--brand-lite) 2%, transparent) 50%, transparent);
                   box-shadow:inset 2px 0 0 var(--brand-lite); }
  tbody td { padding:11px 12px; white-space:nowrap; vertical-align:middle; }
  tbody td.dim { color:var(--muted); }
  tr.row-enter { animation:rowIn .42s var(--ease) both; }
  @keyframes rowIn { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }
  tr.row-new > td { animation:rowNew 1.1s ease-out 2; }
  @keyframes rowNew { 0%{background:color-mix(in srgb, var(--accent) 12%, transparent)} 100%{background:transparent} }
  .na { color:var(--dim); font-family:var(--mono); font-size:11px; }

  .symbol-cell { display:flex; align-items:center; gap:10px; }
  .symbol-icon { width:32px; height:32px; background:color-mix(in srgb, var(--brand) 22%, var(--bg3));
    border:1px solid color-mix(in srgb, var(--brand-lite) 22%, transparent); border-radius:9px; display:flex; align-items:center; justify-content:center;
    font-size:9px; font-weight:700; color:var(--brand-ink); font-family:var(--mono); flex-shrink:0; }
  .symbol-line { display:flex; align-items:center; gap:7px; }
  .symbol-name { font-weight:700; font-size:14px; letter-spacing:.3px; }
  .symbol-rank { font-size:9.5px; font-family:var(--mono); color:var(--muted); margin-top:2px; }
  .side-badge { display:inline-flex; align-items:center; gap:3px; padding:2px 6px; border-radius:5px; font-family:var(--sans); font-size:9px;
    font-weight:700; letter-spacing:.7px; border:1px solid; }
  .side-badge svg { width:8px; height:8px; }
  .side-buy  { color:var(--accent2); border-color:color-mix(in srgb, var(--accent2) 35%, transparent); background:color-mix(in srgb, var(--accent2) 8%, transparent); }
  .side-sell { color:var(--amber); border-color:color-mix(in srgb, var(--amber) 35%, transparent); background:color-mix(in srgb, var(--amber) 8%, transparent); }

  .num { font-family:var(--mono); font-size:11.5px; font-weight:700; font-variant-numeric:tabular-nums; }
  .num.up { color:var(--up); }
  .num.down { color:var(--down); }
  .num.flat { color:var(--text2); }
  /* colonne clé : le déclencheur 1 min */
  td.key .num { font-size:13px; }
  /* colonnes secondaires : présentes mais en retrait */
  td.soft .num { font-weight:400; color:var(--text2); font-size:11px; }
  td.soft .num.up { color:color-mix(in srgb, var(--up) 70%, transparent); }
  td.soft .num.down { color:color-mix(in srgb, var(--down) 70%, transparent); }

  /* extrêmes DD/RU — données les plus importantes : traitées en pastille */
  .xt { display:inline-flex; flex-direction:column; gap:5px; min-width:88px; padding:6px 9px 7px; border-radius:8px; border:1px solid; }
  .xt.dn { background:color-mix(in srgb, var(--down) 7%, transparent); border-color:color-mix(in srgb, var(--down) 20%, transparent); }
  .xt.up { background:color-mix(in srgb, var(--up) 7%, transparent); border-color:color-mix(in srgb, var(--up) 20%, transparent); }
  .xt .num { font-size:13.5px; letter-spacing:-.3px; }
  .ibar { height:3px; border-radius:2px; background:var(--track); overflow:hidden; }
  .ibar i { display:block; height:100%; border-radius:2px; transition:width .5s var(--ease); }
  .ibar.dn i { background:var(--down); }
  .ibar.up i { background:var(--up); }

  /* bulle volume — magnitude en ambre (neutre vs direction) */
  .spike-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border-radius:7px; font-family:var(--mono); font-size:10.5px;
    font-weight:700; border:1px solid; font-variant-numeric:tabular-nums; }
  .spike-badge .lv { display:flex; gap:1.5px; align-items:flex-end; height:9px; }
  .spike-badge .lv b { width:2px; border-radius:1px; background:currentColor; opacity:.28; }
  .spike-badge .lv b.on { opacity:1; }
  .spike-badge .lv b:nth-child(1){height:3px} .spike-badge .lv b:nth-child(2){height:5px}
  .spike-badge .lv b:nth-child(3){height:7px} .spike-badge .lv b:nth-child(4){height:9px}
  .sp1 { color:var(--sp1); border-color:color-mix(in srgb, var(--sp1) 30%, transparent); background:color-mix(in srgb, var(--sp1) 8%, transparent); }
  .sp2 { color:var(--sp2); border-color:color-mix(in srgb, var(--sp2) 32%, transparent); background:color-mix(in srgb, var(--sp2) 8%, transparent); }
  .sp3 { color:var(--sp3); border-color:color-mix(in srgb, var(--sp3) 35%, transparent); background:color-mix(in srgb, var(--sp3) 9%, transparent); }
  .sp4 { color:var(--sp4); border-color:color-mix(in srgb, var(--sp4) 45%, transparent); background:color-mix(in srgb, var(--sp4) 13%, transparent); }

  /* bulle statut */
  .status-badge { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:7px; font-size:9.5px; font-family:var(--sans);
    letter-spacing:.7px; font-weight:700; border:1px solid; min-width:98px; }
  .status-badge svg { width:10px; height:10px; }
  .status-traded { color:var(--up); border-color:color-mix(in srgb, var(--up) 32%, transparent); background:color-mix(in srgb, var(--up) 10%, transparent); }
  .status-skipped { color:var(--muted); border-color:var(--border); background:color-mix(in srgb, var(--muted) 10%, transparent); }
  .status-pending { color:var(--yellow); border-color:color-mix(in srgb, var(--yellow) 28%, transparent); background:color-mix(in srgb, var(--yellow) 8%, transparent); }
  .status-missed { color:var(--down); border-color:color-mix(in srgb, var(--down) 30%, transparent); background:color-mix(in srgb, var(--down) 9%, transparent); }

  /* plan de trade (étape 5) — même esprit que .xt : petite carte teintée par sens */
  .plan-cell { display:inline-flex; flex-direction:column; gap:3px; padding:6px 9px 7px; border-radius:8px; border:1px solid var(--border-soft); background:var(--bg3); min-width:118px; }
  .plan-cell .pl-dir { font-family:var(--sans); font-size:9px; font-weight:700; letter-spacing:.6px; }
  .plan-cell .pl-dir.long { color:var(--up); }
  .plan-cell .pl-dir.short { color:var(--down); }
  .plan-cell .pl-row { display:flex; justify-content:space-between; gap:8px; font-family:var(--mono); font-size:10.5px; color:var(--text2); }
  .plan-cell .pl-rr { font-size:9px; color:var(--dim); margin-top:1px; }
  .plan-sub { font-size:9px; color:var(--dim); font-family:var(--mono); margin-top:3px; text-align:center; }

  /* Densité de la table admin — voir #table-density-seg. Colonnes secondaires
     marquées .opt-col (th ET td du même index) : masquées en mode compact,
     dépliables via le toggle. Un th de groupe (colspan) n'a pas besoin d'être
     recalculé : une colonne dont TOUTES les cellules sont display:none
     s'effondre déjà à largeur nulle, le groupe visible se réaligne seul. */
  .table-wrap.compact .opt-col { display:none; }

  .time-cell { font-family:var(--mono); font-size:10.5px; color:var(--muted); }

  /* ── MODAL ──────────────────────────────── */
  .modal-overlay { position:fixed; inset:0; background:transparent; -webkit-backdrop-filter:blur(0px); backdrop-filter:blur(0px); z-index:100;
    display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none;
    transition:opacity .3s var(--ease), backdrop-filter .35s var(--ease), background .3s var(--ease); }
  .modal-overlay.open { opacity:1; pointer-events:all; background:var(--overlay); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
  .modal { background:var(--card-grad), var(--bg2); border:1px solid var(--border); border-radius:20px; width:600px; max-width:95vw; max-height:90vh;
    overflow-y:auto; padding:26px 28px 28px; box-shadow:var(--shadow-float);
    transform:scale(.94) translateY(18px); opacity:0;
    transition:transform .38s var(--ease), opacity .28s var(--ease); }
  .modal-overlay.open .modal { transform:scale(1) translateY(0); opacity:1; }
  .modal-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:18px; }
  .modal-title { font-size:22px; font-weight:800; display:flex; align-items:center; gap:10px; letter-spacing:.4px; }
  .modal-subtitle { font-family:var(--mono); font-size:10px; color:var(--muted); margin-top:7px; }
  .modal-close { background:none; border:1px solid var(--border); color:var(--muted); width:32px; height:32px; border-radius:9px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .22s var(--ease); }
  .modal-close svg { width:12px; height:12px; }
  .modal-close:hover { border-color:var(--text2); color:var(--text); transform:rotate(90deg); }

  .modal-section { margin-bottom:14px; background:var(--row-zebra); border:1px solid var(--border-soft); border-radius:14px; padding:15px 16px; }
  .modal-section-title { font-family:var(--sans); font-size:9.5px; font-weight:700; letter-spacing:1.9px; text-transform:uppercase; color:var(--text2);
    margin-bottom:12px; display:flex; align-items:center; gap:7px; }
  .modal-section-title svg { width:11px; height:11px; color:var(--brand-ink); }
  .modal-info-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
  .kv { background:var(--bg3); border:1px solid var(--border-soft); border-radius:9px; padding:10px 11px; }
  .kv .label { font-size:9px; font-family:var(--sans); font-weight:600; color:var(--muted); letter-spacing:1px; text-transform:uppercase; margin-bottom:6px; }
  .kv .value { font-family:var(--mono); font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }

  .rsi-wrap { margin-top:11px; background:var(--bg3); border:1px solid var(--border-soft); border-radius:9px; padding:11px 12px; }
  .rsi-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
  .rsi-row .label { font-size:9px; font-family:var(--sans); font-weight:600; color:var(--muted); letter-spacing:1px; text-transform:uppercase; }
  .rsi-val { font-family:var(--mono); font-size:14px; font-weight:700; }
  .rsi-val.hot { color:var(--down); } .rsi-val.cold { color:var(--accent2); } .rsi-val.mid { color:var(--text); }
  .rsi-track { position:relative; height:7px; border-radius:4px; background:var(--track); overflow:hidden; }
  .rsi-zone { position:absolute; top:0; bottom:0; }
  .rsi-zone.lo { left:0; width:30%; background:color-mix(in srgb, var(--accent2) 14%, transparent); }
  .rsi-zone.hi { right:0; width:30%; background:color-mix(in srgb, var(--down) 14%, transparent); }
  .rsi-cursor { position:absolute; top:-2px; bottom:-2px; width:2px; background:var(--text); border-radius:1px; transition:left .55s var(--ease); z-index:2; }
  .rsi-legend { display:flex; justify-content:space-between; font-family:var(--mono); font-size:8px; color:var(--dim); margin-top:5px; }

  .post-alert-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
  .pa-item { background:var(--bg3); border:1px solid var(--border-soft); border-radius:10px; padding:11px 10px; text-align:center; }
  .pa-item .delay { font-size:9px; font-family:var(--sans); font-weight:600; color:var(--muted); letter-spacing:1px; margin-bottom:7px; }
  .pa-item .pa-price { font-size:10px; font-family:var(--mono); color:var(--dim); margin-bottom:5px; }
  .pa-item .pa-change { font-family:var(--mono); font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; }
  .pa-item .pa-change.up { color:var(--up); }
  .pa-item .pa-change.down { color:var(--down); }
  .pa-item .pa-change.wait { color:var(--dim); font-size:13px; }
  .pa-item .ibar { margin-top:8px; }
  .xt-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
  /* Widgets "Vue d'ensemble" (3 tuiles) et "Performance du plan de trade"
     (4 tuiles, admin uniquement — voir la note HTML) — côte à côte via
     .widget-row — même carte .xt-card que les extrêmes du modal. auto-fit
     plutôt que 2 colonnes fixes : un abonné ne voit que "Vue d'ensemble"
     (Performance est data-admin), elle doit alors prendre toute la largeur
     plutôt que de rester collée à gauche sur 50%. */
  .widget-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(420px, 1fr)); gap:16px; align-items:start; margin:14px 0 22px; }
  .widget-row .post-widget { margin:0; }
  .ov-grid   { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
  .perf-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
  .xt-card .v.hero { font-size:26px; }
  .xt-card { background:var(--bg3); border:1px solid var(--border-soft); border-radius:10px; padding:12px; }
  .xt-card.dn { border-color:color-mix(in srgb, var(--down) 22%, transparent); background:color-mix(in srgb, var(--down) 5%, var(--bg3)); }
  .xt-card.up { border-color:color-mix(in srgb, var(--up) 22%, transparent); background:color-mix(in srgb, var(--up) 5%, var(--bg3)); }
  .xt-card .hd { display:flex; align-items:center; gap:6px; font-size:9px; font-family:var(--sans); font-weight:600; color:var(--muted); letter-spacing:1px; margin-bottom:7px; }
  .xt-card .hd svg { width:10px; height:10px; }
  .xt-card .v { font-family:var(--mono); font-size:19px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.5px; }
  .xt-card .meta { font-size:9.5px; color:var(--dim); margin-top:5px; font-family:var(--mono); }
  .edge-tag { display:inline-block; margin-top:8px; font-family:var(--sans); font-size:9px; font-weight:600; letter-spacing:.7px; padding:3px 7px;
    border-radius:5px; border:1px solid color-mix(in srgb, var(--brand-lite) 35%, transparent); color:var(--brand-ink);
    background:color-mix(in srgb, var(--brand-lite) 10%, transparent); }

  .status-select { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px; }
  .stype-btn { padding:10px 6px; border-radius:9px; border:1px solid var(--border); background:var(--bg3); color:var(--muted);
    font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:.6px; cursor:pointer; transition:all .22s var(--ease); text-align:center;
    display:flex; align-items:center; justify-content:center; gap:5px; }
  .stype-btn svg { width:11px; height:11px; }
  .stype-btn:hover { border-color:var(--text2); color:var(--text2); }
  .stype-btn.sel-traded { border-color:var(--up); background:color-mix(in srgb, var(--up) 9%, transparent); color:var(--up); }
  .stype-btn.sel-skipped { border-color:var(--text2); background:color-mix(in srgb, var(--muted) 12%, transparent); color:var(--text); }
  .stype-btn.sel-missed { border-color:var(--down); background:color-mix(in srgb, var(--down) 9%, transparent); color:var(--down); }
  .stype-btn.sel-pending { border-color:var(--yellow); background:color-mix(in srgb, var(--yellow) 9%, transparent); color:var(--yellow); }

  .form-row { display:flex; gap:10px; margin-bottom:11px; }
  .form-group { flex:1; display:flex; flex-direction:column; gap:5px; }
  .form-group label { font-size:9.5px; font-family:var(--sans); font-weight:600; color:var(--muted); letter-spacing:1px; text-transform:uppercase; }
  .form-group input, .form-group select, .form-group textarea { background:var(--bg3); border:1px solid var(--border); color:var(--text);
    padding:9px 12px; border-radius:9px; font-family:var(--mono); font-size:11px; outline:none; transition:border-color .2s, box-shadow .2s; width:100%; }
  .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--brand-lite); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-lite) 13%, transparent); }
  .form-group select option { background:var(--bg2); }
  .form-group textarea { resize:vertical; min-height:54px; font-family:var(--sans); font-size:12px; }

  .modal-actions { display:flex; gap:10px; margin-top:16px; }
  .btn-save { flex:1; padding:12px; background:var(--brand-lite); border:none; border-radius:9px;
    color:var(--btn-ink); font-family:var(--sans); font-size:11px; font-weight:800; letter-spacing:1.2px; cursor:pointer; transition:all .22s var(--ease); }
  .btn-save:hover { filter:brightness(1.1); box-shadow:0 8px 22px -10px color-mix(in srgb, var(--brand-lite) 80%, transparent); }
  .btn-save:active { transform:scale(.985); }
  .btn-cancel { padding:12px 18px; background:var(--bg3); border:1px solid var(--border); border-radius:9px; color:var(--muted);
    font-family:var(--sans); font-size:11px; font-weight:600; cursor:pointer; transition:all .22s var(--ease); }
  .btn-cancel:hover { border-color:var(--text2); color:var(--text); }

  .empty-state { text-align:center; padding:70px 20px; color:var(--muted); }
  .empty-state svg { width:40px; height:40px; margin-bottom:16px; opacity:.5; }
  .empty-state p { font-family:var(--sans); font-size:11.5px; font-weight:500; letter-spacing:1.2px; }

  footer { padding:26px 0 34px; margin-top:22px; border-top:1px solid var(--border-soft); display:flex; align-items:center; gap:10px;
           font-family:var(--sans); font-size:10px; font-weight:500; letter-spacing:1.3px; color:var(--dim); text-transform:uppercase; }
  footer .mark { width:20px; height:20px; border-radius:6px; background:#04070d url('/static/logo-256.png') center 47% / 122% no-repeat;
                 border:1px solid color-mix(in srgb, var(--brand-lite) 25%, transparent); }
  footer .dot { color:var(--border); }

  .toast { position:fixed; bottom:24px; right:24px; background:var(--card-grad), var(--bg2);
    border:1px solid color-mix(in srgb, var(--brand-lite) 40%, transparent); color:var(--brand-ink); padding:12px 19px; border-radius:11px;
    font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.4px; z-index:200; transform:translateY(20px); opacity:0;
    transition:all .35s var(--ease); box-shadow:var(--shadow-float); }
  .toast.show { transform:translateY(0); opacity:1; }

  /* ── File d'attente de contenu (threads X / Shorts YouTube) ────────────── */
  .queue-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:14px; margin-top:14px; }
  .queue-card { background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:10px; }
  .queue-card-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .queue-badge { font-family:var(--sans); font-size:9.5px; font-weight:700; letter-spacing:1.3px; text-transform:uppercase;
    padding:3px 9px; border-radius:6px; }
  .queue-badge.pf-x { color:var(--accent2); background:color-mix(in srgb, var(--accent2) 14%, transparent); }
  .queue-badge.pf-youtube { color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, transparent); }
  .queue-meta { font-family:var(--mono); font-size:11px; color:var(--muted); }
  .queue-meta b { color:var(--text2); font-weight:600; }
  .queue-card video { width:100%; border-radius:8px; background:#000; max-height:400px; }
  .queue-card textarea { width:100%; min-height:110px; background:var(--bg3); border:1px solid var(--border); color:var(--text);
    border-radius:8px; padding:9px 11px; font-family:var(--sans); font-size:12.5px; line-height:1.5; resize:vertical; }
  .queue-card textarea:focus { border-color:var(--brand-lite); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-lite) 13%, transparent); }
  .queue-actions { display:flex; gap:8px; flex-wrap:wrap; }
  .queue-actions button { flex:1; min-width:110px; padding:9px 10px; border-radius:8px; border:1px solid var(--border);
    background:var(--bg3); color:var(--text2); font-family:var(--sans); font-size:10.5px; font-weight:700; letter-spacing:.7px;
    text-transform:uppercase; cursor:pointer; transition:all .15s var(--ease-soft); }
  .queue-actions button:hover { border-color:var(--text2); color:var(--text); }
  .queue-actions .qa-save { background:var(--brand-lite); border-color:transparent; color:#04121f; }
  .queue-actions .qa-save:hover { filter:brightness(1.1); }
  .queue-actions .qa-posted { border-color:color-mix(in srgb, var(--up) 55%, transparent); color:var(--up); }
  .queue-actions .qa-posted:hover { background:color-mix(in srgb, var(--up) 12%, transparent); }
  .queue-actions .qa-reject { border-color:color-mix(in srgb, var(--down) 55%, transparent); color:var(--down); }
  .queue-actions .qa-reject:hover { background:color-mix(in srgb, var(--down) 12%, transparent); }
  .queue-status { font-family:var(--mono); font-size:10px; letter-spacing:.5px; text-transform:uppercase; }
  .queue-status.st-posted { color:var(--up); }
  .queue-status.st-rejected { color:var(--down); }
  .queue-status.st-pending { color:var(--yellow); }
  /* "Prête à poster" : catégorie à part, la seule pensée pour attirer l'œil —
     pastille pleine plutôt qu'un simple texte de couleur (demande Max). */
  .queue-status.st-ready { color:#04120b; background:var(--accent); font-weight:700;
    padding:3px 8px; border-radius:5px; box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent); }
  .queue-card:has(.st-ready) { border-color:color-mix(in srgb, var(--accent) 55%, transparent); }

  @media (max-width: 1500px) { .stats-grid { grid-template-columns:repeat(4,1fr); } }
  @media (max-width: 1100px) { .stats-grid { grid-template-columns:repeat(2,1fr); } .post-bars { grid-template-columns:repeat(2,1fr); } .ov-grid { grid-template-columns:1fr; } }
  @media (max-width: 480px)  { .perf-grid { grid-template-columns:1fr; } }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.001s !important; transition-duration:.001s !important; }
  }