/* Pilot dashboard — Peel palette, one hue per chart, tables beside every chart. */
:root { --bg:#080b12; --panel:#0f1520; --panel2:#121a27; --line:#263040; --ink:#e6edf5; --muted:#b0bbca; --dim:#919fb2; --teal:#82decf; --blue:#75b7ff; --amber:#f5a623; --ok:#4cc38a; --bad:#ff7b72; }
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--ink); font:14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
a { color:var(--blue); text-decoration:none; } a:hover { text-decoration:underline; }
.top { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px max(20px, calc((100vw - 1240px)/2)); border-bottom:1px solid rgba(155,180,210,.14); }
.brand { color:var(--ink); font-size:19px; font-weight:700; letter-spacing:-.03em; } .brand .mark { color:var(--teal); font-size:24px; margin-right:6px; } .brand .byline { color:var(--dim); font-weight:400; font-size:14px; }
.top nav { display:flex; gap:14px; align-items:center; font-size:13px; } .top nav a { color:var(--muted); }
.lang-toggle { border:1px solid var(--line); border-radius:999px; padding:3px 11px; }
main { max-width:1240px; margin:0 auto; padding:22px 20px 60px; }
.controls { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 16px; font-size:13px; color:var(--dim); }
.controls select, .controls input, .controls button { background:var(--panel2); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:6px 10px; font-size:13px; }
.controls button { cursor:pointer; } .controls button:hover { border-color:var(--teal); }
.gate { padding:40px 20px; text-align:center; color:var(--muted); }
.gate a { color:var(--teal); }
.tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; margin:0 0 18px; }
.tile { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.tile .k { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
.tile .v { font-size:26px; font-weight:700; letter-spacing:-.02em; margin-top:2px; font-variant-numeric:tabular-nums; }
.tile .s { font-size:12px; color:var(--dim); }
.tile.bad .v { color:var(--bad); } .tile.ok .v { color:var(--ok); }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
@media (max-width:900px) { .grid { grid-template-columns:1fr; } }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px; min-width:0; }
.card h2 { font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin:0 0 10px; display:flex; justify-content:space-between; align-items:center; }
.card h2 button { background:transparent; border:1px solid var(--line); color:var(--dim); border-radius:6px; font-size:11px; padding:2px 8px; cursor:pointer; text-transform:none; letter-spacing:0; }
.chart { position:relative; width:100%; height:150px; }
.chart svg { width:100%; height:100%; overflow:visible; }
.chart rect.bar { fill:var(--teal); rx:2; } .chart rect.bar:hover { fill:#a2ecdf; }
.chart rect.hit { fill:transparent; }
.chart .axis { fill:var(--dim); font-size:10px; } .chart .grid line { stroke:var(--line); stroke-dasharray:2 3; }
.tip { position:absolute; pointer-events:none; background:#0a0f18; border:1px solid var(--line); border-radius:8px; padding:6px 9px; font-size:12px; color:var(--ink); white-space:nowrap; transform:translate(-50%, -100%); display:none; }
.funnel { display:grid; gap:8px; }
.funnel .row { display:grid; grid-template-columns:150px 1fr 60px; gap:10px; align-items:center; font-size:13px; }
.funnel .bar { height:14px; background:var(--panel2); border-radius:4px; overflow:hidden; } .funnel .bar i { display:block; height:100%; background:var(--teal); border-radius:4px; }
.funnel .n { text-align:right; color:var(--muted); font-variant-numeric:tabular-nums; }
table { width:100%; border-collapse:collapse; font-size:12.5px; }
th, td { text-align:left; padding:6px 8px; border-top:1px solid var(--line); vertical-align:top; white-space:nowrap; }
th { color:var(--dim); font-weight:600; font-size:11px; letter-spacing:.06em; text-transform:uppercase; position:sticky; top:0; background:var(--panel); }
td.num { text-align:right; font-variant-numeric:tabular-nums; }
.scroll { max-height:420px; overflow:auto; }
.status { display:inline-block; min-width:34px; text-align:center; border-radius:6px; padding:1px 6px; font-size:11px; font-weight:600; }
.s2 { background:rgba(76,195,138,.15); color:var(--ok); } .s3 { background:rgba(117,183,255,.15); color:var(--blue); } .s4 { background:rgba(245,166,35,.15); color:var(--amber); } .s5 { background:rgba(255,123,114,.15); color:var(--bad); }
.props { color:var(--dim); font-family:ui-monospace, Menlo, monospace; font-size:11px; white-space:normal; }
.badge { display:inline-block; font-size:10px; padding:1px 6px; border-radius:999px; border:1px solid var(--line); color:var(--dim); margin-left:4px; }
.badge.ok { color:var(--ok); border-color:rgba(76,195,138,.5); }
.hidden { display:none !important; }
.site-footer { border-top:1px solid rgba(155,180,210,.14); color:var(--dim); font-size:12px; padding:18px max(20px, calc((100vw - 1240px)/2)); }
.site-footer nav { display:flex; flex-wrap:wrap; gap:14px; margin-top:6px; } .site-footer a { color:var(--dim); }