:root {
  /* Identité Milord : thème terminal sombre, accent ambre/or (Predict = vert néon).
     --green reste le nom de la variable « accent/positif » dans tout le CSS hérité ;
     on la repeint en or ici → logo, nav active, KPIs, PnL positif passent en ambre,
     sans toucher au reste des règles. --red garde le négatif. */
  --bg: #0c0b08;
  --bg2: #14110a;
  --panel: #181408;
  --line: #2a2310;
  --green: #ffb627;       /* accent principal (or) */
  --green-dim: #9a7a2e;   /* accent atténué */
  --cyan: #f0c75e;        /* secondaire (jaune pâle) */
  --text: #e6dcc0;
  --muted: #8a8060;
  --red: #ff5a5a;
  --amber: #ff8c42;       /* alerte / SIMU (orange) */
  --btc: #b48cff;
  --elon: #6ee787;
  --paper: #5a9bff;
  --arb: #ff5ad8;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 "JetBrains Mono", "Consolas", ui-monospace, monospace;
}
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
.cursor { color: var(--green); animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Header */
header {
  display: flex; align-items: center; gap: 24px;
  padding: 12px 24px; background: var(--bg2);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.logo { color: var(--green); font-weight: 700; letter-spacing: 2px; font-size: 18px; }
nav { display: flex; gap: 2px; flex-wrap: wrap; }
nav a {
  color: var(--muted); padding: 6px 14px; border-radius: 4px;
  letter-spacing: 1px; font-size: 12px;
}
nav a:hover { color: var(--text); text-decoration: none; background: var(--panel); }
nav a.active { color: var(--green); background: var(--panel); }

/* Menus déroulants (Météo, Analyse) : ouverts au survol ET au focus (clic clavier/tactile),
   sans JS. tabindex sur le groupe → un clic sur le titre le focus et garde le menu ouvert. */
.nav-group { position: relative; outline: none; }
.nav-trigger {
  display: inline-block; cursor: pointer; color: var(--muted);
  padding: 6px 14px; border-radius: 4px; letter-spacing: 1px; font-size: 12px;
}
.nav-group:hover .nav-trigger,
.nav-group:focus-within .nav-trigger { color: var(--text); background: var(--panel); }
.nav-trigger.active { color: var(--green); background: var(--panel); }
.nav-menu {
  position: absolute; top: 100%; left: 0; display: none; flex-direction: column;
  min-width: 150px; margin-top: 2px; padding: 4px; z-index: 20;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 4px;
}
.nav-group:hover .nav-menu,
.nav-group:focus-within .nav-menu { display: flex; }
.nav-menu a { padding: 7px 12px; white-space: nowrap; }
.user { margin-left: auto; color: var(--muted); font-size: 12px; }

main { padding: 24px 32px; max-width: 1500px; margin: 0 auto; }
h2 { color: var(--green); font-weight: 600; letter-spacing: 1px; margin: 0 0 20px; }
h3 { color: var(--cyan); font-size: 13px; letter-spacing: 1px; margin: 0 0 14px; text-transform: uppercase; }

.live-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--green); margin-left: 8px; vertical-align: middle;
  box-shadow: 0 0 8px var(--green); animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .3; } }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.kpi {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 6px;
}
.kpi .v { color: var(--green); font-size: 26px; font-weight: 700; }
.kpi .v.pos { color: var(--green); }
.kpi .v.neg { color: var(--red); }
.kpis.kpis6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1100px) { .kpis.kpis6 { grid-template-columns: repeat(3, 1fr); } }
.kpi .k { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }

/* Tables */
table { width: 100%; border-collapse: collapse; background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; font-weight: 500; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--bg2); }
td.r, th.r { text-align: right; }
td.market { color: var(--text); max-width: 360px; }
td.edge { color: var(--green); }
.pos { color: var(--green); }
.neg { color: var(--red); }

.token { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 3px; }
.token.yes { color: var(--green); background: rgba(57,255,20,.12); }
.token.no { color: var(--red); background: rgba(255,90,90,.12); }
.token.neutral { color: var(--btc); background: rgba(180,140,255,.12); }
.tag { font-size: 10px; padding: 2px 6px; border-radius: 3px; letter-spacing: .5px; }
.tag.simu { color: var(--amber); border: 1px solid var(--amber); }
.tag.reel { color: var(--green); border: 1px solid var(--green); }
.tag.warn { color: #1a1208; background: var(--amber); border: 1px solid var(--amber); font-weight: 700; }

/* Badges chain (Live / Détections / Ratés) — couleur par réseau, palette maquette */
.chain { font-size: 10px; padding: 1px 7px; border-radius: 4px; border: 1px solid currentColor;
  letter-spacing: .5px; white-space: nowrap; }
.chain.sol { color: #b48cff; }
.chain.base { color: #5a9bff; }
.chain.bsc { color: var(--green); }
.chain.eth { color: #9fb4ff; }
.chain.hyper { color: #4dd0c0; }
.chain.avax { color: #ff6b6b; }
.chain.other { color: var(--muted); }

/* Rôle statique d'un agent (sous son nom, onglet BTC) */
.agent-role { color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.35;
  margin-top: 3px; max-width: 46ch; }
#btc-agents-table td { vertical-align: top; }

/* Pastille « agent vivant » : anneau qui se propage (couleur selon le verdict).
   Abstention = respiration lente (l'agent calcule mais conclut « rien à faire ») ;
   vote/veto/prudence = pulsation rapide + ligne teintée. Moteur off → tout figé. */
.agent-pulse { position: relative; display: inline-block; width: 9px; height: 9px;
  border-radius: 50%; margin-right: 9px; vertical-align: middle; }
.agent-pulse::after { content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 1px solid currentColor; animation: agentRing 1.5s ease-out infinite; }
@keyframes agentRing { from { transform: scale(.55); opacity: .85; }
  to { transform: scale(2.1); opacity: 0; } }
@keyframes agentBreath { 50% { opacity: .25; } }
.agent-pulse.abst { background: var(--green-dim); color: var(--green-dim);
  animation: agentBreath 3s ease-in-out infinite; }
.agent-pulse.abst::after { animation-duration: 3s; }
.agent-pulse.up { background: var(--green); color: var(--green); box-shadow: 0 0 8px var(--green); }
.agent-pulse.down { background: var(--red); color: var(--red); box-shadow: 0 0 8px var(--red); }
.agent-pulse.veto { background: var(--red); color: var(--red); box-shadow: 0 0 10px var(--red); }
.agent-pulse.veto::after { animation-duration: .9s; }
.agent-pulse.caution { background: var(--amber); color: var(--amber); box-shadow: 0 0 8px var(--amber); }
tr.agent-on td { background: rgba(57,255,20,.035); }
tr.agent-row td:first-child { border-left: 2px solid transparent; }
tr.agent-on td:first-child { border-left-color: var(--green-dim); }
#btc-root[data-available="0"] .agent-pulse,
#btc-root[data-available="0"] .agent-pulse::after { animation: none; opacity: .45; box-shadow: none; }

/* Moteurs dry run (onglet Santé) */
.dry-list { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin: 8px 0 4px; }
.dry-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.dry-row:last-child { border-bottom: none; }
.dry-ctl { display: flex; align-items: center; gap: 10px; }
.dstate { font-size: 11px; font-weight: 700; letter-spacing: .5px; padding: 2px 8px; border-radius: 3px; }
.dstate.on { color: var(--green); border: 1px solid var(--green); }
.dstate.off { color: var(--muted); border: 1px solid var(--line); }
button.dry-toggle { font: inherit; font-size: 12px; cursor: pointer; padding: 4px 12px;
  background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 4px; }
button.dry-toggle:hover { border-color: var(--green); color: var(--green); }
button.dry-toggle:disabled { opacity: .4; cursor: not-allowed; }

/* Onglet Admin */
.admin-form { display: flex; flex-direction: column; gap: 12px; }
.admin-form label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 12px; }
.admin-form input { padding: 9px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 4px; color: var(--text); font: inherit; }
.admin-form input:focus { outline: none; border-color: var(--green); }
.admin-msg { margin: 2px 0 0; font-size: 12px; min-height: 16px; }
.admin-msg.err { color: var(--red); }
button.dbtn { font: inherit; font-size: 12px; cursor: pointer; padding: 8px 14px; align-self: flex-start;
  background: var(--green); color: #04210a; border: none; border-radius: 4px; font-weight: 700; }
button.dbtn:hover { background: #5fff44; }
button.dbtn.danger { background: var(--panel); color: var(--red); border: 1px solid var(--line);
  padding: 4px 12px; font-weight: 500; }
button.dbtn.danger:hover { border-color: var(--red); }
.hdr-clock { margin-left: auto; color: var(--cyan); font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.refresh-global { margin-left: 16px; align-self: center; padding: 6px 12px; }
.refresh-global + .user { margin-left: 16px; }
button.dbtn:disabled { opacity: .55; cursor: progress; }

/* Hero topologie swarm (onglet BTC) */
.swarm-hero { display: grid; grid-template-columns: 280px 1fr 280px; gap: 16px; margin: 24px 0; }
.swarm-rail { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; }
.swarm-rail h4 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--muted); font-weight: 600; }
.feed-list { list-style: none; margin: 0; padding: 0; }
.feed-list li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0;
  border-bottom: 1px solid var(--line); font-size: 12px; }
.feed-list li:last-child { border-bottom: none; }
.feed-k { color: var(--muted); }
.feed-v { color: var(--text); font-weight: 600; white-space: nowrap; }
.rail-note { margin: 12px 0 0; font-size: 10.5px; color: var(--muted); line-height: 1.45; }
.swarm-stage { position: relative; border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  background: radial-gradient(circle at 50% 45%, rgba(46,230,214,.05), transparent 60%), var(--bg); min-height: 430px; }
#btc-swarm { width: 100%; height: 430px; display: block; }
.swarm-legend { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center;
  gap: 16px; font-size: 10.5px; color: var(--muted); }
.swarm-legend i.lg { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px;
  vertical-align: middle; }
.lg.confirm { background: var(--green); } .lg.veto { background: var(--red); }
.lg.caution { background: var(--amber); } .lg.abst { background: var(--muted); }
.gauge-row { display: flex; justify-content: space-between; font-size: 12px; margin: 6px 0 4px; }
.gauge .bar { height: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 4px;
  overflow: hidden; margin-bottom: 8px; }
.gauge .fill { display: block; height: 100%; transition: width .6s ease; }
.gauge .fill.up { background: var(--green); } .gauge .fill.down { background: var(--red); }
/* Jauge near-lock (P que le move tient) : cyan, vert pulsant >= 97 % */
.gauge .fill.lock { background: #2ee6d6; }
.gauge .fill.lock.hot { background: var(--green); animation: lockPulse 1.6s ease-in-out infinite; }
@keyframes lockPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
/* Badge modèle actif (TABLE EMPIRIQUE / Φ) : flash à la bascule */
#btc-calib-badge { transition: color .3s ease; }
#btc-calib-badge.badge-flash { animation: badgeFlash .9s ease; }
@keyframes badgeFlash { 0% { background: rgba(46,230,214,.35); } 100% { background: transparent; } }
.gauge-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; }
.gauge-meta div { display: flex; flex-direction: column; gap: 2px; }
.gauge-meta span { color: var(--muted); font-size: 10.5px; }
.gauge-meta b { font-size: 14px; }
@media (max-width: 900px) { .swarm-hero { grid-template-columns: 1fr; } #btc-swarm { height: 300px; } }

/* BTC 1h Pulse (prix live dans la fenêtre) */
.pulse { background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 14px 18px; margin: 16px 0; }
.pulse-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pulse-head h3 { margin: 0; }
.pulse-head .skip { font-size: 12px; }
.pulse-link { font-size: 11px; color: var(--cyan); text-decoration: none;
  border: 1px solid rgba(34, 211, 238, .35); border-radius: 999px; padding: 2px 10px; }
.pulse-link:hover { background: rgba(34, 211, 238, .12); }
.pulse-count { margin-left: auto; font-size: 24px; font-weight: 700; color: var(--cyan);
  font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.pulse-grid { display: grid; grid-template-columns: 190px 1fr 130px; gap: 18px; margin-top: 12px; }
.pulse-meta { display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.pulse-meta .pm span { display: block; color: var(--muted); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 1px; }
.pulse-meta .pm b { font-size: 20px; font-variant-numeric: tabular-nums; }
.pulse-meta .pm .delta { font-size: 13px; margin-left: 6px; }
#btc-pulse { width: 100%; height: 190px; display: block; }
.pulse-tiles { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.ptile { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; text-align: center;
  background: var(--bg); }
.ptile span { display: block; color: var(--muted); font-size: 10.5px; letter-spacing: 1px; }
.ptile b { font-size: 26px; font-variant-numeric: tabular-nums; }
.ptile.up { border-color: rgba(57,255,20,.35); } .ptile.up b { color: var(--green); }
.ptile.down { border-color: rgba(255,90,90,.35); } .ptile.down b { color: var(--red); }
@media (max-width: 900px) { .pulse-grid { grid-template-columns: 1fr; }
  .pulse-meta, .pulse-tiles { flex-direction: row; gap: 16px; } .pulse-tiles .ptile { flex: 1; } }

/* Onglet Elon — Near-lock Pulse */
#elon-canvas { width: 100%; height: 230px; display: block; }
.pulse-age { font-size: 10.5px; color: var(--green-dim); font-variant-numeric: tabular-nums; }
.pulse-age.warn { color: var(--amber); }
.pulse-age.late { color: var(--red); font-weight: 700; }
.pulse-right { margin-left: auto; display: flex; align-items: baseline; gap: 10px; }
.pulse-right em { font-style: normal; font-size: 10.5px; letter-spacing: 1.5px; color: var(--muted); }
.pulse-right .pulse-count { margin-left: 0; }
.pulse-count.hot { color: var(--green); }
.ptile.lock { border-color: rgba(46, 230, 214, .4); }
.ptile.lock b { color: var(--cyan); font-size: 17px; }
.action-band.sleep h3 span { color: var(--amber); font-variant-numeric: tabular-nums; }
.weekbar { position: relative; height: 10px; margin-top: 12px; border: 1px solid var(--line);
  border-radius: 999px; overflow: hidden; background: var(--bg); }
.weekbar i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(46, 230, 214, .35); }
.weekbar em { position: absolute; right: 0; top: 0; bottom: 0; background: rgba(57, 255, 20, .25); }
.weekbar-lbl { display: flex; justify-content: space-between; color: var(--muted);
  font-size: 10.5px; margin-top: 4px; }

/* Bandeau EXECUTE (décision trade) */
.action-band.exec { border-color: var(--green); border-left-color: var(--green);
  animation: execGlow 1.6s ease-in-out infinite; }
.action-band.exec h3 { color: var(--green); }
@keyframes execGlow { 0%, 100% { box-shadow: 0 0 0 rgba(57,255,20,0); }
  50% { box-shadow: 0 0 18px rgba(57,255,20,.22); } }
.payout { display: block; width: fit-content; margin-top: 12px; padding: 6px 14px; border: 1px solid rgba(57,255,20,.4);
  border-radius: 6px; background: rgba(57,255,20,.07); color: var(--green);
  font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.payout small { display: block; font-size: 9.5px; color: var(--muted); font-weight: 400;
  text-transform: uppercase; letter-spacing: 1px; }

/* Shimmer (reflet traversant) sur jauges et barres de profondeur */
.gauge .fill, .depthbar i { position: relative; overflow: hidden; }
.gauge .fill::after, .depthbar i::after { content: ""; position: absolute; top: 0; bottom: 0;
  width: 45%; left: -45%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  animation: shimmer 2.6s linear infinite; }
@keyframes shimmer { to { left: 145%; } }

/* Flash de ligne quand le verdict d'un agent change */
@keyframes rowFlash { from { background: rgba(255,180,84,.16); } to { background: transparent; } }
tr.row-flash td { animation: rowFlash 1.2s ease-out; }

/* Journal du swarm (console des changements de verdict, onglet BTC) */
.journal-box { background: var(--bg2); border: 1px solid var(--line); border-radius: 8px;
  max-height: 260px; overflow-y: auto; margin-bottom: 28px; }
.journal { list-style: none; margin: 0; padding: 8px 0; font-size: 12px; }
.journal .j-row { display: grid; grid-template-columns: 70px 110px 130px 1fr auto;
  gap: 10px; padding: 4px 14px; align-items: baseline; border-left: 2px solid transparent; }
.journal .j-row:hover { background: var(--panel); }
.journal .j-ts { color: var(--muted); }
.journal .j-agent { font-weight: 700; letter-spacing: .5px; }
.journal .j-msg { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.journal .j-ago { color: var(--muted); font-size: 11px; white-space: nowrap; }
.journal .j-veto { border-left-color: var(--red); }
.journal .j-veto .j-verdict { color: var(--red); font-weight: 700; }
.journal .j-vote.j-up { border-left-color: var(--green); }
.journal .j-vote.j-up .j-verdict { color: var(--green); }
.journal .j-vote.j-down { border-left-color: var(--red); }
.journal .j-vote.j-down .j-verdict { color: var(--red); }
.journal .j-caution { border-left-color: var(--amber); }
.journal .j-caution .j-verdict { color: var(--amber); }
.journal .j-abst .j-verdict { color: var(--muted); }
.journal .j-trade { border-left-color: var(--green); background: rgba(57,255,20,.05); }
.journal .j-trade .j-verdict { color: var(--green); font-weight: 700; }
.journal .j-win { border-top: 1px dashed var(--line); margin-top: 4px; padding-top: 7px; }
.journal .j-win .j-agent, .journal .j-win .j-verdict { color: var(--cyan); }
.journal .j-empty { padding: 10px 14px; }
@keyframes jNew { from { background: rgba(46,230,214,.18); } to { background: transparent; } }
.journal .j-new { animation: jNew 2.5s ease-out; }
@media (max-width: 640px) {
  .journal .j-row { grid-template-columns: 60px 1fr auto; }
  .journal .j-msg, .journal .j-ago { display: none; }
}

/* Barres de profondeur du carnet */
.depthbar { position: relative; min-width: 110px; height: 16px; background: var(--bg);
  border-radius: 3px; overflow: hidden; }
.depthbar i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; transition: width .6s ease; }
.depthbar.up i { background: rgba(57,255,20,.25); } .depthbar.down i { background: rgba(255,90,90,.25); }
.depthbar b { position: relative; display: block; text-align: right; font-size: 11px;
  line-height: 16px; padding-right: 6px; font-weight: 600; }

/* Pastille module (1re colonne) */
td.c, th.c { text-align: center; width: 22px; padding-left: 8px; padding-right: 0; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }
.dot.weather { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.dot.wc { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.dot.btc { background: var(--btc); box-shadow: 0 0 6px var(--btc); }
.dot.elon { background: var(--elon); box-shadow: 0 0 6px var(--elon); }
tr.hot { background: rgba(110,231,135,.08); }
tr.hot td:first-child { box-shadow: inset 2px 0 0 var(--elon); }
.dot.arb { background: var(--arb); box-shadow: 0 0 6px var(--arb); }
.dot.bpaper { background: var(--paper); box-shadow: 0 0 6px var(--paper); }

/* Onglets de filtre module */
.filters { display: flex; gap: 6px; margin-bottom: 14px; }
.ftab { background: var(--panel); border: 1px solid var(--line); color: var(--muted);
  padding: 6px 14px; border-radius: 6px; font-family: inherit; font-size: 12px; cursor: pointer; letter-spacing: .5px; }
.ftab:hover { color: var(--text); }
.ftab.active { color: var(--bg); background: var(--text); border-color: var(--text); font-weight: 700; }
.ftab.wt.active { background: var(--cyan); border-color: var(--cyan); }
.ftab.wc.active { background: var(--amber); border-color: var(--amber); }
.ftab.btc.active { background: var(--btc); border-color: var(--btc); }
.ftab.elon.active { background: var(--elon); border-color: var(--elon); }
.ftab.arb.active { background: var(--arb); border-color: var(--arb); }
.ftab.wt::before { content: "● "; color: var(--cyan); }
.ftab.wc::before { content: "● "; color: var(--amber); }
.ftab.btc::before { content: "● "; color: var(--btc); }
.ftab.elon::before { content: "● "; color: var(--elon); }
.ftab.arb::before { content: "● "; color: var(--arb); }
.ftab.active::before { color: var(--bg); }

/* Lien externe + PnL USDC */
.ext { text-decoration: none; font-size: 13px; opacity: .8; }
.ext:hover { opacity: 1; }
.usdc { color: var(--muted); font-size: 11px; }

.res { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 3px; }
.res.won { color: var(--green); background: rgba(57,255,20,.12); }
.res.lost { color: var(--red); background: rgba(255,90,90,.12); }

.empty { color: var(--muted); padding: 30px; text-align: center;
  background: var(--panel); border: 1px dashed var(--line); border-radius: 8px; }

#filter { width: 100%; margin-bottom: 14px; padding: 10px 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  color: var(--text); font-family: inherit; }
#filter:focus { outline: none; border-color: var(--green-dim); }

/* Stats cards */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 20px; }
.srow { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); }
.srow:last-child { border-bottom: none; }
.srow span { color: var(--muted); }
.srow b { color: var(--text); }
.srow.sub { padding: 6px 0; font-size: 12px; }
.subhead { margin-top: 16px; margin-bottom: 4px; color: var(--cyan); font-size: 11px;
  text-transform: uppercase; letter-spacing: 1px; }
.card table.city { margin-top: 14px; }
.chart { color: var(--green-dim); background: var(--bg); padding: 12px; border-radius: 6px;
  margin-top: 14px; overflow-x: auto; font-size: 12px; }

/* Login */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 36px; width: 320px; display: flex; flex-direction: column; gap: 14px; }
.login h1 { color: var(--green); margin: 0; letter-spacing: 2px; }
.login .sub { color: var(--muted); margin: -8px 0 8px; font-size: 12px; }
.login label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 12px; }
.login input { padding: 10px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 6px; color: var(--text); font-family: inherit; }
.login input:focus { outline: none; border-color: var(--green-dim); }
.login button { margin-top: 8px; padding: 11px; background: var(--green); color: #04210a;
  border: none; border-radius: 6px; font-weight: 700; font-family: inherit; cursor: pointer; letter-spacing: 1px; }
.login button:hover { background: #5fff44; }
.error { color: var(--red); background: rgba(255,90,90,.1); padding: 8px 12px; border-radius: 6px; font-size: 12px; }

/* Opportunités + meta */
.skip { color: var(--muted); font-size: 11px; }
.pnl-usdc { color: var(--muted); font-size: 11px; white-space: nowrap; }
.meta { color: var(--muted); font-size: 12px; margin: 0 0 12px; }

/* Graphique SVG multi-lignes */
.chart-svg { width: 100%; height: 200px; display: block; }
.chart-svg .axis { stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 4; }
.chart-svg .line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-svg .line.ml-g { stroke: var(--green); }
.chart-svg .line.ml-w { stroke: var(--cyan); }
.chart-svg .line.ml-c { stroke: var(--amber); }
.chart-svg .line.ml-btc { stroke: var(--btc); }
.chart-svg .line.ml-elon { stroke: var(--elon); }
.chart-svg .line.ml-bp { stroke: var(--paper); }
.legend { display: flex; gap: 20px; flex-wrap: wrap; margin: -4px 0 14px; font-size: 12px; }
.legend .lg { color: var(--muted); display: flex; align-items: center; gap: 6px; }
.legend .lg b { color: var(--text); }
.legend .lg-dot { width: 18px; height: 3px; border-radius: 2px; display: inline-block; }
.lg-dot.ml-g { background: var(--green); }
.lg-dot.ml-w { background: var(--cyan); }
.lg-dot.ml-c { background: var(--amber); }
.lg-dot.ml-btc { background: var(--btc); }
.lg-dot.ml-elon { background: var(--elon); }
.lg-dot.ml-bp { background: var(--paper); }

/* Boutons refresh (opportunités) + reset (archive) */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-head h3 { margin: 0; }
.rfs { background: var(--bg); border: 1px solid var(--line); color: var(--cyan);
  width: 26px; height: 26px; border-radius: 6px; cursor: pointer; font-size: 14px;
  font-family: inherit; line-height: 1; padding: 0; }
.rfs:hover:not(:disabled) { border-color: var(--cyan); }
.rfs:disabled { opacity: .5; cursor: default; }
.rfs.spin { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.o-msg { display: block; color: var(--red); font-size: 10px; margin-top: 2px; max-width: 90px; }
.o-msg.diverge { color: var(--amber); }
.diverge { color: var(--amber); font-size: 11px; }
.upd { animation: flash 1s ease-out; }

/* Filtres des opportunités */
.oppo-filters { display: flex; align-items: center; gap: 18px; margin: 0 0 12px;
  color: var(--muted); font-size: 12px; flex-wrap: wrap; }
.oppo-filters select { background: var(--bg); border: 1px solid var(--line);
  color: var(--text); font-family: inherit; font-size: 12px; padding: 5px 8px; border-radius: 6px; }
.oppo-filters select:focus { outline: none; border-color: var(--green-dim); }
.oppo-filters .chk { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.oppo-filters input[type=checkbox] { accent-color: var(--green); }
.oppo-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 10px 2px 0;
  color: var(--muted); font-size: 11px; }
.oppo-legend b { color: var(--muted); font-weight: 600; }
.oppo-legend b.lg-sig { color: var(--green); }
.skip[title], .res[title] { cursor: help; }
@keyframes flash { from { color: var(--amber); } to { color: inherit; } }
.rst { background: transparent; border: 1px solid var(--line); color: var(--muted);
  padding: 4px 10px; border-radius: 6px; cursor: pointer; font-family: inherit;
  font-size: 11px; letter-spacing: .5px; }
.rst:hover:not(:disabled) { color: var(--red); border-color: var(--red); }
.rst:disabled { opacity: .5; cursor: default; }
h2 .rst { margin-left: 10px; vertical-align: middle; }

/* Barres win rate hebdo */
.wbar { display: flex; align-items: center; gap: 12px; padding: 5px 0; }
.wbar .wk { color: var(--muted); font-size: 12px; width: 90px; }
.wbar .bar { flex: 1; height: 14px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.wbar .fill { height: 100%; background: var(--green); border-radius: 4px; }
.wbar .wv { color: var(--text); font-size: 12px; width: 80px; text-align: right; }
.wbar .wv em { color: var(--muted); font-style: normal; font-size: 11px; }

/* Santé */
.health-banner { display: flex; align-items: center; gap: 14px; padding: 16px 20px;
  border-radius: 8px; margin-bottom: 18px; font-weight: 700; letter-spacing: 1px;
  background: var(--panel); border: 1px solid var(--line); }
.health-banner.on { color: var(--green); }
.health-banner.off { color: var(--red); }
.health-banner .sub { margin-left: auto; color: var(--muted); font-weight: 400; letter-spacing: 0; }
.hdot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.hdot.on { background: var(--green); box-shadow: 0 0 8px var(--green); animation: pulse 1.6s ease-in-out infinite; }
.hdot.off { background: var(--red); }

/* Cadran du jour */
.action-band { background: var(--panel); border: 1px solid var(--amber); border-left: 3px solid var(--amber);
  border-radius: 4px; padding: 12px 16px; margin: 0 0 18px; }
.action-band h3 { color: var(--amber); margin: 0 0 8px; font-size: 14px; letter-spacing: 1px; }
.action-band ul { margin: 0; padding-left: 18px; }
.action-band li { margin: 3px 0; color: var(--text); }
.action-band.empty-band { color: var(--muted); border-color: var(--line); border-left-color: var(--line); }
tr.clk-action td { background: rgba(255, 180, 84, 0.07); }
tr.clk-action td:first-child { border-left: 2px solid var(--amber); }
tr.clk-locked td:first-child { border-left: 2px solid var(--green); }
tr.clk-early { color: var(--muted); }

@media (max-width: 760px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .cards, .cards3 { grid-template-columns: 1fr; }
  header { gap: 12px; padding: 12px; }
  td.market { max-width: 160px; }
}

/* Accent couleur par module (cartes Stats / Santé) */
.card.mod-weather { border-top: 2px solid var(--cyan); }
.card.mod-wc { border-top: 2px solid var(--amber); }
.card.mod-btc { border-top: 2px solid var(--btc); }
.card.mod-elon { border-top: 2px solid var(--elon); }
.card.mod-arb { border-top: 2px solid var(--arb); }
.card.mod-bpaper { border-top: 2px solid var(--paper); }
h2 .dot { width: 12px; height: 12px; margin-right: 2px; }

/* Finitions globales */
.card { transition: border-color .2s ease; }
.card:hover { border-color: var(--green-dim); }
tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .015); }
tbody tr:hover td { background: rgba(57, 255, 20, .045); }
.empty { text-align: center; padding: 36px 20px; color: var(--muted);
  border: 1px dashed var(--line); border-radius: 8px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--green-dim); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

@media (max-width: 640px) {
  main { padding: 14px; }
  .kpi .v { font-size: 20px; }
  .kpis.kpis6 { grid-template-columns: repeat(2, 1fr); }
  table { display: block; overflow-x: auto; white-space: nowrap;
          -webkit-overflow-scrolling: touch; }
  th, td { padding: 8px 10px; }
  button.dry-toggle, button.dbtn { padding: 8px 14px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LIVE — dashboard "vivant" (heartbeat, ticker, KPIs animés, cards positions,
   jauges cross-source). @keyframes spin / rowFlash réutilisés depuis le haut.
   ══════════════════════════════════════════════════════════════════════════ */

/* Hero : titre + heartbeat */
.live-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 4px; }
.live-hero h2 { margin: 0; }
.heartbeat { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.hb-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--elon);
  box-shadow: 0 0 10px var(--elon); animation: hb 1.4s ease-in-out infinite; }
.heartbeat.stale { color: var(--amber); }
.heartbeat.stale .hb-dot { background: var(--amber); box-shadow: 0 0 10px var(--amber);
  animation-duration: 2.6s; }
@keyframes hb { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.55); opacity: .4; } }

/* Ticker d'activité */
.ticker { display: flex; align-items: center; gap: 14px; margin: 12px 0 20px;
  background: linear-gradient(90deg, var(--panel), var(--bg2)); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 16px; overflow: hidden; }
.ticker .lbl { color: var(--green); font-size: 11px; letter-spacing: 1px; flex: none;
  display: flex; align-items: center; gap: 6px; }
.ticker .rot { display: inline-block; animation: spin 2.4s linear infinite; }
.ticker .stream { flex: 1; overflow: hidden; height: 19px; position: relative; }
.ticker .stream span { position: absolute; left: 0; white-space: nowrap; animation: tickerIn .5s ease both; }
@keyframes tickerIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tk-ok { color: var(--elon); } .tk-info { color: var(--cyan); }
.tk-warn { color: var(--amber); } .tk-mut { color: var(--muted); }

/* KPIs : accent or + flash "bump" au changement */
.kpi.accent .v { text-shadow: 0 0 14px rgba(255, 182, 39, .35); }
.kpi { overflow: hidden; }
.kpi.bump { animation: kbump .6s ease; }
@keyframes kbump { 0% { box-shadow: inset 0 0 0 rgba(255,182,39,0); }
  30% { box-shadow: inset 0 0 26px rgba(255,182,39,.25); }
  100% { box-shadow: inset 0 0 0 rgba(255,182,39,0); } }
.kpi .v { font-variant-numeric: tabular-nums; }

/* Layout 2 colonnes */
.live-grid { display: grid; grid-template-columns: 1fr 360px; gap: 18px; align-items: start; }
.live-grid .col-main, .live-grid .col-side { display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 1100px) { .live-grid { grid-template-columns: 1fr; } }
.card > h3 { margin: 0 0 12px; font-size: 12px; letter-spacing: 1.5px; color: var(--green-dim);
  text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.card > h3 .count { font-weight: 400; }

/* Flash d'une nouvelle ligne de détection (réutilise @keyframes rowFlash) */
tr.flash td { animation: rowFlash 1.6s ease-out; }

/* Cards positions "qui brillent" : bordure or qui tourne quand PnL > 0 */
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.pos-card { position: relative; border-radius: 10px; padding: 1px; background: var(--line); }
.pos-card.live { background: conic-gradient(from var(--a, 0deg), var(--green),
  transparent 25%, transparent 75%, var(--green)); animation: posrotate 4s linear infinite; }
@keyframes posrotate { to { --a: 360deg; } }
.pos-card + .pos-card { margin-top: 0; }
.pos-card .inner { background: var(--panel); border-radius: 9px; padding: 12px 14px; }
.pos-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pos-sym b { font-weight: 700; }
.pos-pnl { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pos-mc { font-size: 11px; color: var(--muted); margin-top: 3px; }
.pos-mc b { color: var(--text); }
.spark { width: 100%; height: 34px; display: block; margin: 9px 0 6px; }
.spark-empty { font-size: 10px; margin: 12px 0 8px; }
.exitbar { height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; margin-top: 6px; }
.exitbar i { display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--elon), var(--amber)); transition: width 1s linear; }
.exitbar.done i { background: var(--amber); }
.exit-lbl { font-size: 10px; color: var(--muted); margin-top: 3px;
  display: flex; justify-content: space-between; gap: 8px; }

/* Jauge cross-source en construction */
.cross-row { display: flex; align-items: center; gap: 10px; margin: 9px 0; }
.cross-row .sym { width: 150px; font-size: 12px; flex: none; overflow: hidden; text-overflow: ellipsis; }
.cgauge { flex: 1; height: 16px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 4px; display: flex; gap: 2px; padding: 2px; }
.cgauge i { flex: 1; border-radius: 2px; background: var(--line); transition: background .5s; }
.cgauge i.on { background: var(--green); box-shadow: 0 0 6px rgba(255, 182, 39, .5); }
.cross-row .sc { width: 40px; text-align: right; font-size: 12px; color: var(--green); flex: none; }

@media (max-width: 1100px) { .cross-row .sym { width: 120px; } }

/* ── Onglet Digest ──────────────────────────────────────────────────────────── */
.dg-grid { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
.dg-list { display: flex; flex-direction: column; gap: 6px; }
.dg-item { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--panel);
  text-decoration: none; color: var(--text); }
.dg-item:hover { border-color: var(--green-dim); text-decoration: none; }
.dg-item.active { border-color: var(--green); box-shadow: 0 0 0 1px var(--green) inset; }
.dg-item b { font-size: 13px; }
.dg-view { min-height: 200px; }
.digest-body { white-space: pre-wrap; word-break: break-word; margin: 8px 0 0;
  font: 12.5px/1.55 "JetBrains Mono", "Consolas", ui-monospace, monospace;
  color: var(--text); max-height: 70vh; overflow: auto; }
@media (max-width: 900px) { .dg-grid { grid-template-columns: 1fr; } }

/* ── Onglet Guide ───────────────────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chip { font-size: 12px; padding: 2px 9px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); white-space: nowrap; }
.chip.add { border-color: var(--green-dim); }
.chip.off { opacity: .5; text-decoration: line-through; }
.chip.off .dbtn { text-decoration: none; }
.dbtn.sm { font-size: 10px; padding: 1px 6px; margin-left: 4px; }
.watch-add { display: flex; gap: 8px; margin-top: 12px; max-width: 420px; }
.watch-add input { flex: 1; background: var(--bg2); border: 1px solid var(--line);
  color: var(--text); padding: 6px 9px; border-radius: 6px; font: inherit; }

/* ── Onglets Recherche CA / Tendance / Alertes ──────────────────────────────── */
.searchbar { display: flex; gap: 8px; margin: 6px 0 16px; max-width: 520px; }
.searchbar input { flex: 1; background: var(--bg2); border: 1px solid var(--line);
  color: var(--text); padding: 7px 10px; border-radius: 6px; font: inherit; }
.cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start;
  margin-bottom: 16px; }
.cards2 h4 { margin: 14px 0 6px; }
@media (max-width: 760px) { .cards2 { grid-template-columns: 1fr; } }