:root {
  color-scheme: dark;
  --bg: #06110c;
  --surface: #0b1b13;
  --surface-2: #10251a;
  --line: #244334;
  --text: #eefaf3;
  --muted: #91aa9d;
  --green: #5df08f;
  --green-2: #18b85a;
  --gold: #ffd665;
  --danger: #ff8e8e;
  --radius: 20px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 12% -10%, rgba(44, 185, 102, .18), transparent 35rem),
    radial-gradient(circle at 100% 18%, rgba(255, 214, 101, .08), transparent 28rem),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.install-app {
  align-self: center;
  border-color: #56e39f;
  background: linear-gradient(135deg, #19b86b, #087a4b);
  color: #ffffff;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(25, 184, 107, .2);
}

.install-app:hover { filter: brightness(1.08); }
button, input, select { font: inherit; }
button, select, input {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
}
button {
  min-height: 46px;
  padding: 0 18px;
  cursor: pointer;
  font-weight: 700;
}
button:hover { border-color: var(--green); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary {
  background: linear-gradient(135deg, var(--green), var(--green-2));
  border: 0;
  color: #03200e;
  box-shadow: 0 12px 30px rgba(24, 184, 90, .22);
}
input, select { min-height: 46px; padding: 0 12px; width: 100%; }
label { display: grid; gap: 7px; color: var(--muted); font-size: .88rem; }

.shell { width: min(1120px, calc(100% - 28px)); margin: 0 auto; padding: 34px 0 54px; }
.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 14px 2px 25px; }
.hero h1 { margin: 8px 0 9px; max-width: 760px; font-size: clamp(2rem, 6vw, 4rem); line-height: 1.02; letter-spacing: -.045em; }
.hero p { margin: 0; max-width: 720px; color: var(--muted); line-height: 1.55; }
.eyebrow, .kicker { color: var(--green); font-size: .74rem; font-weight: 800; letter-spacing: .13em; }
.freshness, .local-badge { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--muted); font-size: .82rem; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 14px var(--green); }
.game-tabs { display: flex; gap: 8px; margin: 0 0 16px; position: sticky; top: 8px; z-index: 4; }
.game-tabs a { padding: 11px 15px; border: 1px solid var(--line); border-radius: 999px; background: rgba(8,24,16,.94); color: var(--text); text-decoration: none; font-weight: 800; backdrop-filter: blur(12px); }
.game-tabs a:hover { border-color: var(--green); }

.prediction-card, .panel {
  background: linear-gradient(145deg, rgba(17, 42, 29, .94), rgba(8, 24, 16, .96));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 20px 55px rgba(0, 0, 0, .22);
}
.prediction-card { padding: clamp(20px, 5vw, 38px); overflow: hidden; position: relative; }
.prediction-card::after { content: ""; position: absolute; width: 260px; height: 260px; right: -110px; top: -120px; border-radius: 50%; background: rgba(93, 240, 143, .08); pointer-events: none; }
.panel { padding: 24px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.section-head.compact { align-items: flex-start; }
.section-head h2 { margin: 6px 0 0; font-size: clamp(1.2rem, 3vw, 1.7rem); }
.score-ring { width: 74px; height: 74px; border: 5px solid rgba(93, 240, 143, .22); border-top-color: var(--green); border-radius: 50%; display: grid; place-content: center; text-align: center; flex: 0 0 auto; }
.score-ring span { font-size: 1.25rem; font-weight: 800; line-height: 1; }
.score-ring small { color: var(--muted); font-size: .68rem; }
.score-ring.weak { border-color: rgba(255, 214, 101, .22); border-top-color: var(--gold); }

.balls-row { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 3vw, 24px); margin: 30px 0; }
.balls { display: flex; gap: clamp(7px, 1.6vw, 14px); }
.ball { width: clamp(45px, 8vw, 72px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg, #f8fff9, #bde9ca); color: #092113; font-size: clamp(1.1rem, 3vw, 1.7rem); font-weight: 900; box-shadow: inset -8px -10px 18px rgba(12, 79, 40, .18), 0 10px 25px rgba(0,0,0,.24); }
.ball.empty { background: transparent; color: transparent; border: 2px dashed var(--line); box-shadow: none; }
.euro .ball { background: linear-gradient(145deg, #fff6bc, #f2bd3f); box-shadow: inset -8px -10px 18px rgba(126, 75, 0, .18), 0 10px 25px rgba(0,0,0,.24); }
.euro .ball.empty { background: transparent; border: 2px dashed var(--line); box-shadow: none; }
.plus { color: var(--muted); font-size: 1.65rem; font-weight: 900; }

.controls { display: grid; grid-template-columns: minmax(180px, 1fr) auto auto; align-items: end; gap: 10px; }
.progress { height: 7px; margin-top: 16px; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--green-2), var(--green)); transition: width .2s; }
.status, .note { color: var(--muted); font-size: .86rem; line-height: 1.5; }
.status { margin: 13px 0 0; }
.note { margin: 15px 0 0; }
.verdict { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; font-weight: 700; }
.verdict.neutral { color: var(--muted); }
.verdict.good { color: var(--green); border-color: rgba(93,240,143,.45); background: rgba(93,240,143,.07); }
.verdict.warn { color: var(--gold); border-color: rgba(255,214,101,.4); background: rgba(255,214,101,.06); }

.grid.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.panel { margin-top: 16px; }
.grid .panel { margin-top: 0; }
.alternatives, .explanation { margin-top: 18px; }
.empty-state { color: var(--muted); min-height: 82px; display: grid; place-items: center; text-align: center; border: 1px dashed var(--line); border-radius: 14px; padding: 18px; }
.alternative { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.alternative:last-child { border-bottom: 0; }
.mini-balls { display: flex; flex-wrap: nowrap; align-items: center; gap: 5px; min-width: 0; }
.mini-ball { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #dff8e7; color: #0a2614; font-size: .78rem; font-weight: 800; }
.mini-ball.euro { background: var(--gold); }
.rank { color: var(--muted); font-weight: 800; width: 28px; }
.alt-score { color: var(--green); font-size: .84rem; white-space: nowrap; }
.reason { display: grid; grid-template-columns: 42px 1fr; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.reason:last-child { border-bottom: 0; }
.reason strong { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: rgba(93, 240, 143, .14); color: var(--green); }
.reason span { color: var(--muted); font-size: .87rem; line-height: 1.45; }

.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; }
.metrics > div { background: rgba(255,255,255,.035); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: grid; gap: 5px; }
.metrics span, .metrics small { color: var(--muted); }
.metrics strong { font-size: 1.15rem; color: var(--green); line-height: 1.25; }
.metrics strong.good { color: var(--green); }
.metrics strong.warn { color: var(--gold); font-size: 1rem; }
.metrics strong.neutral { color: var(--muted); font-size: 1rem; }
#data-staleness, #keno-staleness { margin: 0 0 14px; }
#portfolio-meta, #keno-portfolio-meta { margin-top: 8px; margin-bottom: 8px; }

.draw-form { display: grid; grid-template-columns: 160px 1fr 220px auto; gap: 10px; align-items: end; margin-top: 20px; }
.intuition-slots { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 24px 0 12px; }
.slot-group { display: grid; grid-template-columns: repeat(5, minmax(44px, 62px)); gap: 8px; }
.slot-group.euro { grid-template-columns: repeat(2, minmax(44px, 62px)); }
.slot { width: 100%; aspect-ratio: 1; padding: 0; border-radius: 10px; background: transparent; font-size: 1.15rem; }
.slot.active { border-color: var(--green); box-shadow: 0 0 0 2px rgba(93,240,143,.18); }
.slot.filled { background: var(--green); border-color: var(--green); color: #052010; }
.slot.euro.filled { background: var(--gold); border-color: var(--gold); }
.number-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; margin-top: 14px; }
.number-grid button { min-height: 42px; padding: 0; }
.number-grid button.used { opacity: .25; }

.keno-panel { scroll-margin-top: 74px; border-color: #514078; background: linear-gradient(145deg, rgba(32, 23, 50, .97), rgba(9, 22, 17, .97)); }
.keno-kicker { color: #c5a8ff; }
.keno-dot { background: #b68cff; box-shadow: 0 0 14px #b68cff; }
.keno-actions { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 22px; }
.keno-tickets { margin-top: 18px; }
.keno-ticket { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.keno-ticket:last-child { border-bottom: 0; }
.keno-ticket-numbers { display: grid; grid-template-columns: repeat(10, minmax(28px, 1fr)); gap: 6px; }
.keno-ball { aspect-ratio: 1; min-width: 28px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(145deg, #e6dcff, #ad8bef); color: #21143a; font-weight: 900; font-size: .82rem; }
.keno-tag { color: #c5a8ff; font-size: .82rem; white-space: nowrap; }

footer { color: var(--muted); font-size: .78rem; text-align: center; padding: 28px 16px 0; }
footer a { color: var(--green); }

@media (max-width: 760px) {
  .shell { width: min(100% - 18px, 680px); padding-top: 18px; }
  .hero { align-items: flex-start; flex-direction: column; }
  .grid.two { grid-template-columns: 1fr; }
  .controls { grid-template-columns: 1fr 1fr; }
  .controls label { grid-column: 1 / -1; }
  .draw-form { grid-template-columns: 1fr 1fr; }
  .draw-form .wide { grid-column: 1 / -1; }
  .draw-form button { grid-column: 1 / -1; }
  .balls-row { gap: 8px; }
  .balls { gap: 5px; }
  .ball { width: clamp(40px, 12vw, 58px); }
  .keno-ticket { grid-template-columns: 24px minmax(0, 1fr); }
  .keno-tag { grid-column: 2; }
}

@media (max-width: 480px) {
  .prediction-card, .panel { border-radius: 16px; padding: 17px; }
  .section-head { align-items: flex-start; }
  .score-ring { width: 62px; height: 62px; }
  .balls-row { justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; }
  .ball { width: 42px; flex: 0 0 42px; }
  .controls { grid-template-columns: 1fr; }
  .controls label { grid-column: auto; }
  .metrics { grid-template-columns: 1fr; }
  .draw-form { grid-template-columns: 1fr; }
  .draw-form .wide, .draw-form button { grid-column: auto; }
  .intuition-slots { justify-content: flex-start; flex-wrap: wrap; }
  .slot-group { width: 100%; grid-template-columns: repeat(5, 1fr); }
  .slot-group.euro { width: 42%; }
  .number-grid { grid-template-columns: repeat(5, 1fr); }
  .alternative { grid-template-columns: 22px minmax(0, 1fr); }
  .mini-ball { width: 27px; height: 27px; flex: 0 0 27px; font-size: .72rem; }
  .mini-balls { gap: 3px; }
  .mini-balls .plus { font-size: 1rem; }
  .alt-score { grid-column: 2; justify-self: start; }
  .game-tabs { overflow-x: auto; }
  .game-tabs a { white-space: nowrap; }
  .keno-actions { grid-template-columns: 1fr; }
  .keno-ticket-numbers { grid-template-columns: repeat(5, 1fr); }
}