/* Fable — terminal quantitativo. Referência: Bloomberg moderno / Linear.
   Explicitamente NÃO cassino: sem verde neon, sem brilho, sem exclamação. */

:root {
  --bg: #08090b;
  --panel: #0f1114;
  --panel-2: #14171c;
  --line: #1e2229;
  --text: #e6e8ec;
  --muted: #8b929e;
  --dim: #5c626d;
  --accent: #4fd1c5;
  --warn: #e0a458;
  --bad: #d4707a;
  --good: #7fc8a9;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;
  --sans: ui-sans-serif, -apple-system, "Segoe UI", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ topo */

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #0d0f12, #08090b);
  position: sticky; top: 0; z-index: 10;
}

.brand { display: flex; align-items: baseline; gap: 12px; }
.mark {
  font-family: var(--mono); font-size: 19px; font-weight: 600;
  letter-spacing: 0.22em; color: var(--text);
}
.sub {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.28em;
  color: var(--dim); text-transform: uppercase;
}

.status { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
.dot.live { background: var(--accent); box-shadow: 0 0 0 3px rgba(79, 209, 197, 0.14); }
.dot.down { background: var(--bad); }

.banner {
  margin: 0; padding: 10px 24px;
  background: rgba(224, 164, 88, 0.08);
  border-bottom: 1px solid rgba(224, 164, 88, 0.22);
  color: #e8c391; font-size: 12.5px;
}
.banner strong { color: var(--warn); }

/* ------------------------------------------------------------------ kpis */

.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px; background: var(--line);
  border-bottom: 1px solid var(--line);
}
.kpi { background: var(--panel); padding: 16px 20px; }
.kpi h3 {
  margin: 0 0 6px; font-size: 10px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dim); font-family: var(--mono);
}
.kpi p { margin: 0; font-family: var(--mono); font-size: 26px; font-weight: 300; }
.kpi p.small { font-size: 12px; color: var(--muted); line-height: 1.6; }

/* ----------------------------------------------------------------- lista */

main { padding: 24px; max-width: 1500px; margin: 0 auto; }
.section-head { margin-bottom: 18px; }
.section-head h2 {
  margin: 0; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); font-family: var(--mono); font-weight: 500;
}
.hint { margin: 6px 0 0; color: var(--dim); font-size: 12.5px; max-width: 70ch; }
.hint em { color: var(--muted); font-style: normal; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.empty { color: var(--dim); font-family: var(--mono); font-size: 12px; }

.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 16px; cursor: pointer; transition: border-color 0.15s, transform 0.15s;
}
.card:hover { border-color: #2b313a; transform: translateY(-1px); }
.card.level-WATCH { border-left: 2px solid var(--muted); }
.card.level-STRONG { border-left: 2px solid var(--accent); }
.card.level-ELITE { border-left: 2px solid var(--warn); }

.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.fixture { font-size: 14.5px; font-weight: 500; }
.competition { color: var(--dim); font-size: 11px; font-family: var(--mono); letter-spacing: 0.05em; }
.clock { font-family: var(--mono); font-size: 12px; color: var(--muted); text-align: right; white-space: nowrap; }
.clock .score { display: block; font-size: 17px; color: var(--text); }

.row { display: flex; gap: 18px; margin-top: 14px; }
.metric { flex: 1; }
.metric h4 {
  margin: 0 0 3px; font-size: 9.5px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--dim); font-family: var(--mono); font-weight: 500;
}
.metric p { margin: 0; font-family: var(--mono); font-size: 19px; font-weight: 300; }
.metric p.tiny { font-size: 13px; color: var(--muted); }
.edge-pos { color: var(--good); }
.edge-neg { color: var(--bad); }

.bar { height: 3px; background: var(--panel-2); border-radius: 2px; margin-top: 10px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--accent); }

.tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em;
  padding: 3px 7px; border-radius: 4px; background: var(--panel-2);
  color: var(--muted); border: 1px solid var(--line);
}
.tag.level { color: var(--bg); font-weight: 600; }
.tag.level-WATCH { background: var(--muted); }
.tag.level-STRONG { background: var(--accent); }
.tag.level-ELITE { background: var(--warn); }
.tag.blocked { color: var(--dim); }

.verdict {
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--muted);
}
.verdict strong { color: var(--text); font-weight: 500; }

/* ---------------------------------------------------------------- drawer */

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 92vw);
  background: var(--panel); border-left: 1px solid var(--line);
  padding: 24px; overflow-y: auto; z-index: 20;
  box-shadow: -24px 0 48px rgba(0, 0, 0, 0.5);
}
.close {
  position: absolute; top: 14px; right: 16px; background: none; border: none;
  color: var(--dim); font-size: 24px; cursor: pointer; line-height: 1;
}
.close:hover { color: var(--text); }

.drawer h3 { margin: 0 0 2px; font-size: 16px; }
.drawer h4 {
  margin: 22px 0 8px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dim); font-family: var(--mono); font-weight: 500;
}
.kv { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.kv span:last-child { font-family: var(--mono); color: var(--text); }
.kv span:first-child { color: var(--muted); }

.gate-item { display: flex; gap: 9px; padding: 5px 0; font-size: 12px; align-items: baseline; }
.gate-item .ok { color: var(--good); font-family: var(--mono); }
.gate-item .no { color: var(--bad); font-family: var(--mono); }
.gate-item .code { font-family: var(--mono); font-size: 10.5px; color: var(--muted); min-width: 132px; }
.gate-item .detail { color: var(--dim); font-size: 11.5px; }

.push-btn {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
  font-family: var(--mono); font-size: 11px; padding: 5px 10px; border-radius: 6px;
  cursor: pointer; margin-right: 10px;
}
.push-btn:hover { color: var(--text); border-color: #2b313a; }
.push-btn.on { color: var(--accent); border-color: rgba(79, 209, 197, 0.4); }

.proof {
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  padding: 18px 20px;
}
.proof-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.proof-verdict {
  font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: 0.1em;
  padding: 5px 12px; border-radius: 6px;
}
.proof-verdict.AGUARDANDO { background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); }
.proof-verdict.PROVADO { background: rgba(127, 200, 169, 0.14); color: var(--good); border: 1px solid rgba(127, 200, 169, 0.4); }
.proof-verdict.REPROVADO { background: rgba(212, 112, 122, 0.12); color: var(--bad); border: 1px solid rgba(212, 112, 122, 0.35); }
.proof-count { font-family: var(--mono); font-size: 22px; font-weight: 300; }
.proof-count span { color: var(--dim); font-size: 14px; }
.proof-bar { height: 5px; background: var(--panel-2); border-radius: 3px; margin: 14px 0 12px; overflow: hidden; }
.proof-bar span { display: block; height: 100%; background: var(--accent); transition: width 0.4s; }
.proof-summary { margin: 0 0 10px; font-size: 13px; color: var(--text); max-width: 90ch; }
.proof-checks { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; font-family: var(--mono); }
.proof-checks .ok { color: var(--good); }
.proof-checks .no { color: var(--bad); }
.proof-checks .na { color: var(--dim); }
.proof-criterion { margin: 12px 0 0; font-size: 11px; color: var(--dim); font-family: var(--mono); }

.perf { display: grid; gap: 14px; }
.perf-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.perf-kpis .kpi { padding: 13px 16px; }
.perf-kpis .kpi p { font-size: 20px; }
.perf table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.perf th { text-align: left; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); padding: 7px 10px; border-bottom: 1px solid var(--line); font-weight: 500; }
.perf td { padding: 7px 10px; border-bottom: 1px solid var(--line); font-family: var(--mono); }
.perf .warn-sample { color: var(--warn); font-size: 12px; }

footer {
  padding: 22px 24px 34px; color: var(--dim); font-size: 11.5px;
  border-top: 1px solid var(--line); margin-top: 30px; max-width: 90ch;
}