/* ============================================================================
   MIB 79 PRO — WEB  ·  mib.css
   The deck's design language, ported. Same palette, same Consolas face, same
   flat borders and card stacking, so the site reads as the decks rather than
   as a generic dashboard bolted onto them.
   ==========================================================================*/

:root{
  --panel:#0f151e;  --bord:#465a78;  --card:#131b26;  --ink:#080c12;
  --bull:#40e0d0;   --mag:#b450eb;   --gold:#f0d25a;  --warn:#ff6e50;
  --dim:#6e8098;    --ok:#00eba5;    --bg:#0a0e14;    --txt:#c8d4e4;
  --mono:"Consolas","DejaVu Sans Mono","Menlo",monospace;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--txt);
  font-family:var(--mono); font-size:13px; line-height:1.45;
  padding-bottom:64px;
}
a{color:var(--bull);text-decoration:none}

/* ---- header ---------------------------------------------------------------*/
.hdr{
  position:sticky;top:0;z-index:50;
  background:var(--panel);border-bottom:1px solid var(--bord);
  padding:8px 12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.hdr .brand{font-family:"Arial Black",Arial,sans-serif;color:var(--gold);
  font-size:14px;letter-spacing:.3px}
.hdr .sp{flex:1}
.badge{font-size:11px;padding:2px 7px;border:1px solid var(--bord);
  border-radius:2px;white-space:nowrap}
.badge.ok{color:var(--ok);border-color:var(--ok)}
.badge.bad{color:var(--warn);border-color:var(--warn)}
.badge.warn{color:var(--gold);border-color:var(--gold)}

/* ---- nav ------------------------------------------------------------------*/
.nav{display:flex;gap:0;background:var(--panel);
  border-bottom:1px solid var(--bord);overflow-x:auto}
.nav a{
  padding:9px 16px;color:var(--dim);font-size:12px;letter-spacing:.5px;
  border-bottom:2px solid transparent;white-space:nowrap
}
.nav a.on{color:var(--bull);border-bottom-color:var(--bull)}

.wrap{padding:12px;max-width:1400px;margin:0 auto}

/* ---- cards ----------------------------------------------------------------*/
.card{background:var(--card);border:1px solid var(--bord);padding:10px;
  margin-bottom:10px}
.card h3{margin:0 0 8px;font-size:11px;color:var(--dim);
  letter-spacing:1px;font-weight:normal;text-transform:uppercase}

.banner{
  padding:9px;text-align:center;font-family:"Arial Black",Arial,sans-serif;
  font-size:14px;color:var(--ink);margin-bottom:10px;letter-spacing:.5px
}
.b-ok{background:var(--ok)} .b-warn{background:var(--gold)}
.b-bad{background:var(--warn)} .b-dim{background:var(--dim)}
.b-buy{background:var(--bull)} .b-sell{background:var(--mag)}

/* ---- rows -----------------------------------------------------------------*/
.row{display:flex;justify-content:space-between;align-items:baseline;
  padding:3px 0;gap:10px}
.row .k{color:var(--dim);font-size:11px}
.row .v{text-align:right}

.grid{display:grid;gap:10px}
.g2{grid-template-columns:repeat(2,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.g2,.g4{grid-template-columns:1fr}}

/* ---- colour utilities -----------------------------------------------------*/
.buy{color:var(--bull)} .sell{color:var(--mag)} .flat{color:var(--dim)}
.gold{color:var(--gold)} .warn{color:var(--warn)} .ok{color:var(--ok)}
.dim{color:var(--dim)}
.big{font-size:22px;font-family:"Arial Black",Arial,sans-serif}
.mid{font-size:16px}
.sm{font-size:11px}

/* ---- bars -----------------------------------------------------------------*/
.bar{height:6px;background:#1c2534;overflow:hidden;margin:4px 0}
.bar > i{display:block;height:100%}

/* Dual-ring gauge: your self-imposed governor inside, FTMO's real static limit
   outside. A comfortable inner reading must never be able to hide an outer
   problem, so both are always drawn. */
.gauge{position:relative;height:16px;background:#1c2534;border:1px solid var(--bord)}
.gauge > .self{position:absolute;left:0;top:0;bottom:0;background:var(--gold);opacity:.85}
.gauge > .firm{position:absolute;left:0;top:0;bottom:0;background:var(--warn);opacity:.35}
.gauge > .lbl{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-size:10px;color:#fff;text-shadow:0 0 3px #000}

/* ---- table ----------------------------------------------------------------*/
table{width:100%;border-collapse:collapse;font-size:12px}
th{color:var(--dim);font-weight:normal;text-align:left;font-size:10px;
  letter-spacing:.5px;padding:5px 6px;border-bottom:1px solid var(--bord)}
td{padding:4px 6px;border-bottom:1px solid #1a2230}
tr:hover td{background:#151d29}
.num{text-align:right;font-variant-numeric:tabular-nums}

/* ---- buttons --------------------------------------------------------------*/
button,.btn{
  font-family:var(--mono);font-size:12px;padding:8px 14px;cursor:pointer;
  background:var(--card);color:var(--txt);border:1px solid var(--bord)
}
button:active{opacity:.7}
.btn-kill{color:var(--warn);border-color:var(--warn)}
.btn-rel{color:var(--ok);border-color:var(--ok)}
.btn-wide{width:100%}

/* ---- misc -----------------------------------------------------------------*/
.pill{display:inline-block;font-size:10px;padding:1px 6px;border:1px solid var(--bord)}
.stale{opacity:.45}
.hidden{display:none}
.muted{color:var(--dim);font-size:11px;padding:14px;text-align:center}
details summary{cursor:pointer;color:var(--dim);font-size:11px;padding:6px 0}
.n-small{color:var(--gold)}   /* flags a sample too small to trust */