:root{
  --bg:#0b1117;
  --card:#101a24;
  --muted:#8aa0b3;
  --text:#e8f0f7;
  --line:rgba(255,255,255,.08);
  --accent:#8cbc57;
  --warn:#ffcc66;
  --bad:#ff6b6b;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: radial-gradient(900px 500px at 20% -10%, rgba(140,188,87,.20), transparent 60%), var(--bg);
  color:var(--text);
}
.wrap{max-width:1180px;margin:0 auto;padding:18px}
.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:38px;height:38px;border-radius:12px;background:rgba(140,188,87,.18);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--accent);border:1px solid rgba(140,188,87,.35)}
.title{font-size:20px;font-weight:750;letter-spacing:.2px}
.sub{font-size:12px;color:var(--muted);margin-top:1px}
.link{color:#dfe9f4;text-decoration:none;border-bottom:1px solid rgba(223,233,244,.25)}
.link:hover{color:var(--accent);border-bottom-color:rgba(140,188,87,.55)}

.card{background:linear-gradient(180deg, rgba(255,255,255,.03), transparent 60%), var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:14px;box-shadow:0 12px 26px rgba(0,0,0,.18)}
.card-h{font-size:13px;letter-spacing:.3px;text-transform:uppercase;color:#cfe0ef;margin-bottom:10px}

.controls{display:flex;flex-direction:column;gap:10px}
.search{display:flex;gap:10px}
input{
  width:100%;
  background:rgba(0,0,0,.22);
  border:1px solid var(--line);
  border-radius:12px;
  padding:11px 12px;
  color:var(--text);
  outline:none;
}
input:focus{border-color:rgba(140,188,87,.55);box-shadow:0 0 0 3px rgba(140,188,87,.10)}
.btn{background:rgba(140,188,87,.18);border:1px solid rgba(140,188,87,.45);color:var(--text);padding:11px 14px;border-radius:12px;cursor:pointer;font-weight:650}
.btn:hover{background:rgba(140,188,87,.25)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.trending{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;align-items:center}
.trend-label{color:var(--muted);font-size:13px;margin-right:6px}
.trend-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:var(--text);font-size:13px;cursor:pointer;user-select:none}
.trend-pill:hover{border-color:rgba(140,188,87,.45);box-shadow:0 0 0 2px rgba(140,188,87,.12) inset}
.trend-pill .tq{opacity:.95}
.trend-pill .tc{color:var(--muted);font-size:12px}
.trend-pill .td{font-size:11px;padding:2px 6px;border-radius:999px;background:rgba(140,188,87,.12);border:1px solid rgba(140,188,87,.22);color:#bfe39a}
.trend-pill .tdown{background:rgba(255,120,120,.10);border-color:rgba(255,120,120,.20);color:#ffb0b0}
.chip{padding:7px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.02);color:#d8e7f6;font-size:12px;cursor:pointer}
.chip:hover{border-color:rgba(140,188,87,.45)}
.chip.on{background:rgba(140,188,87,.18);border-color:rgba(140,188,87,.55);color:#f3faef}

.meta{font-size:12px;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width: 980px){.grid{grid-template-columns:1fr}}

.list{display:flex;flex-direction:column;gap:10px}
.row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:10px;border:1px solid var(--line);border-radius:12px;background:rgba(0,0,0,.16)}
.row .t{font-weight:650;font-size:13px;line-height:1.25}
.row .m{color:var(--muted);font-size:12px;margin-top:4px}
.kpis{min-width:120px;text-align:right}
.kpi{font-size:12px;color:#dfe9f4}
.kpi b{font-size:14px}

.table-wrap{overflow:auto;border-radius:12px;border:1px solid var(--line)}
.tbl{width:100%;border-collapse:collapse;min-width:720px}
.tbl th,.tbl td{padding:10px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font-size:12px;color:#cfe0ef;text-transform:uppercase;letter-spacing:.3px;background:rgba(0,0,0,.16)}
.tbl td{font-size:13px}
.tbl tr:last-child td{border-bottom:none}
.num{text-align:right;white-space:nowrap}

.combo{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.combo-stats{font-size:12px;color:#d8e7f6;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(0,0,0,.14)}
.pill b{font-size:13px}
.pill.bad{border-color:rgba(255,107,107,.45);background:rgba(255,107,107,.10)}

.combo-controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ctrl{display:flex;gap:8px;align-items:center}
.lbl{font-size:12px;color:var(--muted)}
.sel{background:rgba(0,0,0,.22);border:1px solid var(--line);border-radius:10px;padding:7px 10px;color:var(--text);outline:none;font-size:12px}
.sel:focus{border-color:rgba(140,188,87,.55);box-shadow:0 0 0 3px rgba(140,188,87,.10)}
/* Improve dropdown readability (browser support varies) */
.sel option{background:#0b1220;color:#e8f0f7}
.checks{gap:10px}
.ck{font-size:12px;color:#d8e7f6;display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none}
.ck input{accent-color: var(--accent)}

.qhi{color:var(--accent)}
.qmed{color:var(--warn)}
.qlo{color:var(--bad)}

.tag{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:999px;font-size:11px;border:1px solid var(--line);color:#dfe9f4}
.tag.pm{border-color:rgba(113,197,255,.35)}
.tag.ka{border-color:rgba(255,204,102,.35)}
.tag.pi{border-color:rgba(255,107,107,.35)}
.tag.mix{border-color:rgba(140,188,87,.45)}

.foot{margin-top:10px;color:var(--muted);font-size:12px}
.footer{margin-top:16px;color:var(--muted);font-size:12px;text-align:center}

.seo-body p{margin:0 0 10px 0;color:#d8e7f6;line-height:1.45}
.faq details{border:1px solid var(--line);border-radius:12px;padding:10px;background:rgba(0,0,0,.14);margin-top:8px}
.faq summary{cursor:pointer;font-weight:650;color:#dfe9f4}
.faq p{margin:8px 0 0 0;color:var(--muted)}

/* ---- Phase 2: odds history + alerts ---- */
.btn.btn-sm{ padding:6px 10px; font-size:12px; border-radius:10px; }
.ctrl.alerts{ display:flex; flex-wrap:wrap; gap:10px 12px; align-items:center; justify-content:flex-end; }
.ctrl.alerts .mini{ font-size:12px; color:var(--muted); display:flex; gap:6px; align-items:center; }
.ctrl.alerts .mini-in{ width:64px; padding:6px 8px; border-radius:10px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); color:var(--text); }

.spark{ width:96px; height:18px; display:inline-block; vertical-align:middle; }
.spark polyline{ fill:none; stroke:rgba(255,255,255,.75); stroke-width:1.6; }
.spark .base{ stroke:rgba(255,255,255,.18); }

.toast{ position:fixed; right:14px; bottom:14px; z-index:9999; max-width:420px; }
.toast .t{ background:rgba(14,18,28,.92); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:10px 12px; box-shadow:0 8px 26px rgba(0,0,0,.35); margin-top:10px; }
.toast .t b{ color:var(--text); }
.toast .t .m{ color:var(--muted); font-size:12px; margin-top:4px; }

/* ---- Mobile polish ---- */
@media (max-width: 640px){
  .wrap{padding:12px}
  .top{gap:10px}
  .title{font-size:18px}
  .search{flex-direction:column}
  .btn{width:100%}

  .combo{flex-direction:column;align-items:stretch}
  .combo-controls{flex-direction:column;align-items:stretch}
  .ctrl{flex-wrap:wrap;justify-content:flex-start}
  .sel{width:100%}

  /* Make toggles finger-friendly on iOS */
  .ck{padding:6px 0}
  .ck input{width:18px;height:18px}

  .ctrl.alerts{justify-content:flex-start}
  .ctrl.alerts .mini{width:auto}

  .pill{padding:5px 9px}
  .pill b{font-size:12px}

  /* Table remains scrollable but smoother */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
}