/* app.css */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@400;500&family=Barlow+Condensed:wght@400;600;700&display=swap');

:root {
  --bg:     #1a1a1a;
  --s1:     #222222;
  --s2:     #2a2a2a;
  --s3:     #333333;
  --border: #3a3a3a;
  --cyan:   #00e5ff;
  --red:    #ff4455;
  --gold:   #ffbb33;
  --green:  #00e676;
  --yellow: #ffe600;
  --text:   #ffffff;
  --muted:  #888888;
  --dim:    #555555;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Barlow Condensed', sans-serif;
  min-height: 100vh;
  font-size: 15px;
}

/* ===== TOPNAV ===== */
.topnav {
  position: sticky; top:0; z-index:200;
  background: #222;
  border-bottom: 2px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px; height: 54px;
}
.nav-logo {
  font-family:'Bebas Neue',sans-serif; font-size:20px; letter-spacing:3px;
  color: var(--cyan); text-decoration:none;
}
.nav-logo span { color: var(--gold); }
.nav-links { display:flex; gap:4px; }
.nav-links a {
  font-family:'DM Mono',monospace; font-size:11px; letter-spacing:1px;
  color: var(--muted); text-decoration:none;
  padding: 7px 14px; border-radius:3px;
  transition: all .15s; border: 1px solid transparent;
}
.nav-links a:hover { color:#fff; background:rgba(255,255,255,.07); }
.nav-links a.active { color:var(--cyan); border-color:rgba(0,229,255,.35); background:rgba(0,229,255,.09); }

/* ===== PAGE WRAP ===== */
.page { max-width:1260px; margin:0 auto; padding:32px 24px; }

/* ===== PAGE HEADER ===== */
.ph { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:28px; gap:16px; }
.ph-title { font-family:'Bebas Neue',sans-serif; font-size:36px; letter-spacing:3px; color:#fff; line-height:1; }
.ph-sub { font-family:'DM Mono',monospace; font-size:11px; color:var(--muted); margin-top:6px; letter-spacing:1px; }

/* ===== CARD ===== */
.card { background:var(--s1); border:1px solid var(--border); border-radius:6px; overflow:hidden; }
.card-head {
  background:var(--s2); border-bottom:1px solid var(--border);
  padding:11px 16px; display:flex; align-items:center; justify-content:space-between;
  font-family:'DM Mono',monospace; font-size:10px; color:var(--muted); letter-spacing:1px;
}
.card-head b { font-size:13px; color:#fff; font-weight:600; }

/* ===== TABLE ===== */
.tbl { width:100%; border-collapse:collapse; }
.tbl th {
  font-family:'DM Mono',monospace; font-size:10px; letter-spacing:1.5px; color:var(--muted);
  padding:10px 14px; text-align:left; background:var(--s2); border-bottom:1px solid var(--border);
  font-weight:500; text-transform:uppercase;
}
.tbl th.r, .tbl td.r { text-align:right; }
.tbl th.c, .tbl td.c { text-align:center; }
.tbl td { padding:10px 14px; border-bottom:1px solid var(--border); font-size:14px; color:#fff; }
.tbl tr:last-child td { border-bottom:none; }
.tbl tbody tr { transition:background .1s; }
.tbl tbody tr:hover { background:rgba(255,255,255,.05); }
.tbl .pts { font-family:'Bebas Neue',sans-serif; font-size:22px; color:#fff; }
.tbl .pos { font-family:'DM Mono',monospace; font-size:12px; color:var(--muted); }
.tbl .pos.g1 { color:var(--gold); font-weight:700; }
.tbl .sg-p { color:var(--green); }
.tbl .sg-n { color:var(--red); }
.tbl tr.row-gold td { background:rgba(255,187,51,.06); }
.tbl tr.row-cyan td { background:rgba(0,229,255,.04); }

/* ===== BADGE HUMOR ===== */
.bh { font-family:'DM Mono',monospace; font-size:10px; padding:3px 8px; border-radius:3px; display:inline-block; font-weight:500; }
.bh-motivado { color:#00e676; background:rgba(0,230,118,.15); border:1px solid rgba(0,230,118,.4); }
.bh-normal   { color:#aaa;    background:rgba(255,255,255,.07); border:1px solid var(--border); }
.bh-abatido  { color:#ff4455; background:rgba(255,68,85,.15);   border:1px solid rgba(255,68,85,.4); }

/* ===== BOTÕES ===== */
.btn {
  font-family:'Bebas Neue',sans-serif; letter-spacing:2px; font-size:15px;
  border:none; border-radius:4px; cursor:pointer; padding:9px 20px;
  display:inline-flex; align-items:center; gap:6px; transition:all .15s;
}
.btn-cyan  { background:transparent; border:1px solid var(--cyan); color:var(--cyan); }
.btn-cyan:hover:not(:disabled) { background:var(--cyan); color:#111; }
.btn-red   { background:transparent; border:1px solid var(--red); color:var(--red); }
.btn-red:hover:not(:disabled)  { background:var(--red); color:#fff; }
.btn-ghost { background:transparent; border:1px solid var(--border); color:#aaa; }
.btn-ghost:hover:not(:disabled) { border-color:#fff; color:#fff; }
.btn:disabled { opacity:.3; cursor:not-allowed; }

/* ===== INPUT ===== */
.inp {
  background:var(--s2); border:1px solid var(--border); border-radius:4px;
  color:#fff; font-family:'Barlow Condensed',sans-serif; font-size:15px;
  padding:9px 12px; outline:none; transition:border-color .15s; width:100%;
}
.inp:focus { border-color:var(--cyan); }
.inp::placeholder { color:var(--dim); }
.lbl { font-family:'DM Mono',monospace; font-size:10px; color:#aaa; letter-spacing:1px; display:block; margin-bottom:6px; text-transform:uppercase; }

input[type=range] { width:100%; accent-color:var(--cyan); cursor:pointer; }

/* ===== TOAST ===== */
#toast {
  position:fixed; bottom:22px; right:22px; z-index:9999;
  font-family:'DM Mono',monospace; font-size:12px;
  padding:12px 20px; border-radius:5px;
  opacity:0; transform:translateY(6px); transition:all .22s; pointer-events:none;
}
#toast.show { opacity:1; transform:translateY(0); }
#toast.ok  { background:#1c2e1c; border:1px solid var(--green); color:var(--green); }
#toast.err { background:#2e1c1c; border:1px solid var(--red);   color:var(--red); }

/* ===== ATTR BAR ===== */
.ab { display:flex; align-items:center; gap:8px; }
.ab-bar { flex:1; height:5px; background:var(--border); border-radius:3px; overflow:hidden; }
.ab-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,var(--cyan),var(--gold)); }
.ab-val { font-family:'DM Mono',monospace; font-size:12px; color:#fff; width:24px; text-align:right; }

/* ===== PULSE ===== */
.pulse { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 8px var(--red); animation:blink 1s infinite; }
@keyframes blink { 0%,100%{opacity:1}50%{opacity:.2} }

/* ===== MATCH CARD ===== */
.match-card {
  background:var(--s1); border:1px solid var(--border);
  border-radius:6px; overflow:hidden; transition:border-color .2s;
}
.match-card.live { border-color:var(--red); }
.match-card.done { opacity:.6; }

.mc-top {
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 12px; background:var(--s2); border-bottom:1px solid var(--border);
  font-family:'DM Mono',monospace; font-size:10px; color:var(--muted);
}
.mc-top.live { color:var(--red); }

.mc-meta {
  display:flex; justify-content:space-between; align-items:center;
  padding:5px 12px; background:var(--s3); border-bottom:1px solid var(--border);
}
.mc-body { padding:11px 12px; }
.mc-teams { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.mc-team  { display:flex; align-items:center; gap:6px; flex:1; }
.mc-team.away { flex-direction:row-reverse; text-align:right; }
.mc-flag  { font-size:18px; }
.mc-name  { font-size:13px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:88px; }
.mc-score { font-family:'Bebas Neue',sans-serif; font-size:28px; color:#fff; display:flex; align-items:center; gap:6px; flex-shrink:0; }
.mc-sep   { color:var(--dim); font-size:18px; }
.mc-prog  { margin-top:8px; height:2px; background:var(--border); border-radius:2px; overflow:hidden; }
.mc-prog-f{ height:100%; background:linear-gradient(90deg,var(--red),var(--gold)); width:0; transition:width .3s; }
.mc-ev    { margin-top:7px; font-family:'DM Mono',monospace; font-size:10px; color:var(--muted); min-height:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mc-ev.gol             { color:var(--gold); }
.mc-ev.cartao_amarelo  { color:var(--yellow); }
.mc-ev.cartao_vermelho { color:var(--red); }
.mc-ev.chance          { color:var(--cyan); }

.mando-tag { font-family:'DM Mono',monospace; font-size:9px; color:var(--gold); background:rgba(255,187,51,.12); border:1px solid rgba(255,187,51,.35); padding:2px 6px; border-radius:3px; }

@keyframes goalFlash { 0%{background:rgba(255,187,51,.2)}100%{background:transparent} }
.goal-flash { animation:goalFlash .9s ease-out; }

/* ===== TAGS ===== */
.tag { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.5px; padding:3px 9px; border-radius:3px; display:inline-block; }
.tag-cyan  { color:var(--cyan);  background:rgba(0,229,255,.1);  border:1px solid rgba(0,229,255,.35); }
.tag-gold  { color:var(--gold);  background:rgba(255,187,51,.1); border:1px solid rgba(255,187,51,.35); }
.tag-green { color:var(--green); background:rgba(0,230,118,.1);  border:1px solid rgba(0,230,118,.35); }
.tag-red   { color:var(--red);   background:rgba(255,68,85,.1);  border:1px solid rgba(255,68,85,.35); }
.tag-dim   { color:#aaa;         background:rgba(255,255,255,.06); border:1px solid var(--border); }

/* ===== EMPTY STATE ===== */
.empty { padding:48px 24px; text-align:center; font-family:'DM Mono',monospace; font-size:12px; color:var(--muted); line-height:2.2; }
.empty-icon { font-size:38px; display:block; margin-bottom:12px; }