:root {
  color-scheme: light;
  --bg: #f7f9fc;
  --surface: #fff;
  --soft: #f1f4f9;
  --ink: #071b42;
  --text: #142747;
  --muted: #52627b;
  --border: #dce4ef;
  --green: #087638;
  --primary: #078139;
  --mint: #e3f5e9;
  --indigo: #edf0fc;
  --indigo-ink: #354b8b;
  --gold: #e8b42c;
  --gold-soft: #fff3d3;
  --gold-ink: #72500a;
  --danger: #912b30;
  --danger-bg: #fff0ee;
  --nav: #fff;
  --shadow: 0 4px 15px #071b4207;
  --nav-height: 65px;
  --review-height: 78px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-synthesis: none;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #091324;
  --surface: #15243a;
  --soft: #101d30;
  --ink: #f2f6ff;
  --text: #e1eafa;
  --muted: #abbad0;
  --border: #30425c;
  --green: #82e5ab;
  --primary: #078139;
  --mint: #19392f;
  --indigo: #233251;
  --indigo-ink: #bdcefa;
  --gold-soft: #382e1d;
  --gold-ink: #f7d687;
  --danger: #ffd2cf;
  --danger-bg: #49252d;
  --nav: #101d30;
  --shadow: 0 4px 15px #0002;
}

*, *::before, *::after { box-sizing: border-box; }
html, body, #shell { min-height: 100vh; min-height: 100dvh; }
body { margin: 0; background: var(--bg); color: var(--text); min-width: 280px; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .54; }
button[aria-busy="true"] { opacity: .7; cursor: progress; }
button, summary, input, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
main:focus { outline: none; }
svg { flex: none; vertical-align: middle; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3, strong { color: var(--ink); }
h1 { font-size: clamp(1.82rem, 6.9vw, 2.55rem); letter-spacing: -.05em; line-height: 1.11; }
h2 { font-size: 1.09rem; line-height: 1.25; letter-spacing: -.024em; }
h3 { font-size: .92rem; line-height: 1.35; }
p, small { line-height: 1.45; }
small { display: block; color: var(--muted); font-size: .75rem; }
.sr-only, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.skip:focus { position: fixed; top: 8px; left: 8px; z-index: 20; padding: 14px; color: var(--ink); background: var(--surface); }
.wrap { width: min(100%, 980px); margin-inline: auto; padding-inline: 18px; }
.app-header { background: var(--surface); border-bottom: 1px solid var(--border); padding-top: env(safe-area-inset-top); }
.topbar { min-height: 65px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.brand { padding: 0; border: 0; background: transparent; color: var(--ink); display: flex; align-items: center; gap: 7px; min-height: 44px; font-size: 1.29rem; font-weight: 850; letter-spacing: -.06em; }
.brand b { color: var(--green); font-weight: inherit; }
.brand-mark { position: relative; display: block; width: 40px; height: 36px; overflow: hidden; border-radius: 8px; flex: none; background: #fff; }
.brand-mark img { position: absolute; width: 70px; max-width: none; height: 70px; left: -16px; top: -10px; }
.header-meta, .secure { display: flex; align-items: center; gap: 7px; }
.header-meta { gap: 10px; }
.secure { color: var(--muted); font-size: .72rem; font-weight: 650; white-space: nowrap; }
.secure svg { color: var(--green); }
.header-separator { height: 16px; border-left: 1px solid var(--border); }
.tag { display: inline-flex; align-items: center; width: max-content; max-width: 100%; gap: 5px; line-height: 1.2; padding: 5px 8px; font-size: .66rem; font-weight: 800; border-radius: 100px; white-space: nowrap; }
.demo { background: var(--gold-soft); color: var(--gold-ink); letter-spacing: .08em; }
.main { padding-top: 23px; padding-bottom: calc(var(--nav-height) + 26px + env(safe-area-inset-bottom)); }
.main.has-review { padding-bottom: calc(var(--nav-height) + var(--review-height) + 20px + env(safe-area-inset-bottom)); }
.page-heading { display: grid; gap: 7px; }
.page-heading p { color: var(--muted); font-size: .92rem; }
.eyebrow { display: flex; align-items: center; gap: 6px; color: var(--green); font-weight: 850; font-size: .65rem; letter-spacing: .14em; }
.eyebrow i { display: block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.home-layout { display: grid; gap: 18px; }
.wallet { position: relative; isolation: isolate; overflow: hidden; padding: 17px; border-radius: 19px; background: linear-gradient(117deg, #071b42 30%, #102953 100%); color: #fff; box-shadow: 0 9px 22px #071b421c; }
.wallet-label { display: flex; align-items: center; gap: 8px; color: #e2eafa; font-size: .81rem; font-weight: 700; }
.wallet-label svg { color: #b6c5df; }
.wallet-label .demo { color: #ffe5a1; background: #ffffff19; }
.wallet-amount { margin-top: 6px; margin-bottom: 13px; font-size: clamp(2.05rem, 9vw, 3rem); line-height: 1.12; letter-spacing: -.06em; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wallet-amount span { color: #c9d6eb; letter-spacing: 0; font-size: .97rem; font-weight: 650; }
.orbit { position: absolute; inset: 0 0 0 auto; width: 48%; overflow: hidden; z-index: -1; pointer-events: none; }
.orbit-ring { position: absolute; width: 179px; height: 78px; border: 1px solid #b2ecd150; border-radius: 50%; transform: rotate(-31deg); right: -38px; top: 56px; box-shadow: 0 0 0 13px #91c5e519, 0 0 0 28px #91c5e510; }
.orbit-ball { position: absolute; top: 42px; right: 29px; width: 78px; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; color: #bcf0d2; background: radial-gradient(circle at 31% 22%, #299c63, #0c583d 75%); border: 1px solid #b2ecd178; box-shadow: inset -6px -8px 14px #082a29a0, 0 5px 20px #051c34a1; font-size: 1.75rem; font-weight: 800; transform: rotate(-13deg); }
.orbit svg { position: absolute; right: 17px; top: 26px; color: #e8b42c; fill: #e8b42c; }
.button { min-height: 46px; padding: 9px 14px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: .88rem; line-height: 1.22; font-weight: 750; text-align: center; border: 1px solid transparent; }
.primary { background: var(--primary); color: white; }
.primary:hover:not(:disabled), .wallet-button:hover { background: #096c35; }
.secondary { background: var(--soft); color: var(--ink); border-color: var(--border); }
.secondary:hover, .chip:hover, .game-card:hover { border-color: var(--green); }
.wallet-button { background: #078139; color: white; min-width: 161px; justify-content: space-between; }
.wide { width: 100%; }
.card, .game-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); }
.section-head { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.section-head > span { color: var(--muted); font-size: .73rem; font-weight: 650; }
.text-button { display: inline-flex; align-items: center; justify-content: center; text-align: start; gap: 4px; min-height: 44px; padding: 0 3px; color: var(--green); background: none; border: 0; font-size: .77rem; font-weight: 780; }
.text-button:hover { text-decoration: underline; }
.games { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.game-card { position: relative; min-height: 94px; display: grid; align-content: center; justify-items: start; gap: 3px; padding: 9px 10px; text-align: start; color: var(--muted); }
.game-card strong { font-size: .91rem; }
.game-card > span:not(.game-icon, .game-arrow) { font-size: .71rem; }
.game-icon, .tile { display: inline-grid; flex: none; place-items: center; border-radius: 11px; width: 36px; height: 36px; }
.game-icon { width: 32px; height: 32px; margin-bottom: 2px; }
.game-arrow { position: absolute; right: 7px; top: 17px; }
.bolet .game-icon, .mint { background: var(--mint); color: var(--green); }
.maryaj .game-icon, .indigo { background: var(--indigo); color: var(--indigo-ink); }
.loto3 .game-icon, .gold { background: var(--gold-soft); color: var(--gold-ink); }
.game-card.selected { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.draw-card { padding: 13px; display: grid; gap: 9px; }
.draw-head, .draw-identity, .draw-foot { display: flex; align-items: center; gap: 8px; }
.draw-head, .draw-foot { justify-content: space-between; }
.draw-identity strong { font-size: .9rem; }
.draw-identity small { font-size: .69rem; }
.source-results { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.source-results > div { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 2px 5px; padding: 7px 8px; border-radius: 9px; background: var(--soft); }
.source-results span { font-size: .68rem; color: var(--muted); }
.source-results strong { font-size: .91rem; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.lot-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center; gap: 6px; }
.lot-row small { font-weight: 700; margin-top: 2px; }
.ball { width: 46px; height: 46px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 1.16rem; font-weight: 800; background: var(--indigo); color: var(--indigo-ink); border: 1px solid var(--border); }
.ball-1 { background: var(--mint); color: var(--green); }
.ball-2 { background: var(--gold-soft); color: var(--gold-ink); }
.draw-foot { padding-top: 7px; border-top: 1px solid var(--border); font-size: .69rem; color: var(--muted); }
.draw-status { background: var(--soft); color: var(--muted); }
.draw-status i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.draw-status.open, .draw-status.verified { background: var(--mint); color: var(--green); }
.draw-status.closing_soon, .draw-status.awaiting_results, .draw-status.corrected { background: var(--gold-soft); color: var(--gold-ink); }
.draw-status.closed, .draw-status.cancelled { background: var(--danger-bg); color: var(--danger); }
.list-card { padding-inline: 12px; }
.list-row { display: flex; align-items: center; gap: 9px; min-height: 46px; }
.list-card .list-row { padding-block: 9px; }
.list-row + .list-row { border-top: 1px solid var(--border); }
.list-row strong { font-size: .85rem; }
.grow { flex: 1; min-width: 0; }
.activity-amount { text-align: end; }
.activity-amount.positive strong { color: var(--green); }
.footnote { display: flex; align-items: flex-start; gap: 7px; color: var(--muted); font-size: .74rem; }
.footnote svg { color: var(--green); }

.bottom-nav, .review-bar { position: fixed; left: 0; right: 0; z-index: 3; background: var(--nav); border-top: 1px solid var(--border); }
.bottom-nav { bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
.nav-inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; min-height: var(--nav-height); padding-top: 5px; padding-bottom: 4px; }
.nav-item { border: 0; border-radius: 12px; color: var(--muted); background: transparent; display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 49px; font-size: .72rem; font-weight: 720; }
.nav-item.active { color: var(--green); background: var(--mint); }
.review-bar { bottom: calc(var(--nav-height) + env(safe-area-inset-bottom)); }
.review-inner { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: var(--review-height); padding-block: 8px; }
.review-inner strong { font-size: 1.27rem; line-height: 1.2; display: block; overflow-wrap: anywhere; }
.review-inner strong span { font-size: .78rem; }
.review-inner .button { flex: none; }
.keyboard-open .review-bar, .keyboard-open .bottom-nav { visibility: hidden; }

.flow { display: grid; gap: 13px; width: min(100%, 615px); margin-inline: auto; }
.flow > .text-button { justify-self: start; }
.form-card { padding: 14px; display: grid; gap: 10px; }
.step-head { display: flex; gap: 8px; align-items: center; }
.step-head h2 { flex: 1; }
.step { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; background: var(--mint); color: var(--green); font-size: .75rem; font-weight: 800; flex: none; }
.field-pair, .input-action { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.input-action { grid-template-columns: minmax(0, 1fr) auto; margin-top: 4px; }
label { display: block; color: var(--muted); font-size: .79rem; font-weight: 650; }
input:not([type=checkbox]), select { display: block; min-height: 46px; width: 100%; min-width: 0; color: var(--ink); padding: 8px 10px; background: var(--soft); border: 1px solid var(--border); border-radius: 10px; font-size: 1rem; }
select { margin-top: 4px; }
input::placeholder { color: var(--muted); }
input[readonly] { opacity: .8; }
.cutoff, .note { display: flex; gap: 7px; align-items: center; justify-content: space-between; padding: 8px; background: var(--soft); border-radius: 10px; font-size: .77rem; color: var(--muted); }
.cutoff > div { display: flex; align-items: center; gap: 5px; }
.countdown { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 850; }
.hint, .muted, .ticket-meta { color: var(--muted); font-size: .79rem; }
.inline-actions, .chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.inline-actions .text-button { margin-right: 6px; }
.inline-panel { background: var(--soft); border: 1px solid var(--border); border-radius: 11px; padding: 10px; display: grid; gap: 6px; font-size: .85rem; }
.composer-fields { margin-block: 4px; }
.composer-fields input { margin-top: 4px; }
.chip { min-height: 44px; min-width: 44px; padding: 5px 9px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); color: var(--ink); font-size: .86rem; font-weight: 720; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.chip.picked { background: var(--mint); border-color: var(--green); color: var(--green); }
.number-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); gap: 4px; }
.number-grid .chip { padding-inline: 4px; }
.subsection { border-top: 1px solid var(--border); }
.selected-balls { display: grid; gap: 7px; padding-top: 10px; }
.selected-balls h3 span { color: var(--green); background: var(--mint); border-radius: 20px; font-size: .71rem; padding: 2px 6px; }
.stake-row { display: flex; align-items: center; justify-content: space-between; padding-block: 5px; }
.stake-row + .stake-row { border-top: 1px solid var(--border); }
.stake-row span { display: flex; align-items: center; gap: 5px; }
.stake-row input { width: min(115px, 42vw); text-align: right; }
.note { justify-content: flex-start; padding: 10px; }
.note strong { font-size: .8rem; }
.note svg { color: var(--green); }
.note p { margin-top: 2px; }
.warning, .error { color: var(--danger); background: var(--danger-bg); border-radius: 10px; padding: 9px; font-size: .82rem; }
.warning:empty { display: none; }
.error { margin-bottom: 10px; }
.review-lines .list-row { justify-content: space-between; font-size: .85rem; }
.total-row { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding-top: 10px; border-top: 1px solid var(--border); font-size: .9rem; }
.balance-row { color: var(--muted); font-size: .8rem; }
.receipt, .empty { text-align: center; justify-items: center; }
.receipt p, .empty p { color: var(--muted); font-size: .85rem; }
.empty { padding: 20px 10px; display: grid; gap: 7px; }
.segments { display: flex; gap: 4px; border: 1px solid var(--border); border-radius: 12px; padding: 3px; background: var(--soft); }
.segments button { flex: 1; min-height: 44px; min-width: 0; color: var(--muted); border: 1px solid transparent; background: transparent; padding: 4px 2px; border-radius: 9px; font-size: .8rem; font-weight: 750; }
.segments button[aria-pressed=true] { background: var(--surface); color: var(--green); border-color: var(--border); box-shadow: var(--shadow); }
.appearance button svg { margin-inline-end: 3px; }
.profile-summary { display: flex; align-items: center; gap: 8px; padding: 13px; }
.ticket-card summary { display: flex; align-items: center; gap: 7px; padding: 9px; min-height: 55px; cursor: pointer; list-style: none; }
.ticket-card summary::-webkit-details-marker { display: none; }
.ticket-card summary strong { display: flex; align-items: center; gap: 5px; }
.ticket-card summary .demo { font-size: .57rem; padding: 4px; }
.ticket-card[open] summary > svg { transform: rotate(90deg); }
.ticket-amount { font-size: .76rem; font-weight: 750; }
.ticket-details { padding: 0 11px 10px; }
.ticket-details .hint { margin-block: 4px; }
.gate { width: min(100%, 420px); margin: 8vh auto 0; }
.gate-card { padding: 20px; gap: 13px; }
.gate-card .step-head { justify-content: space-between; }
.gate-card p { color: var(--muted); font-size: .88rem; }
.age-check { display: flex; align-items: center; gap: 8px; min-height: 48px; font-size: .9rem; color: var(--ink); }
.age-check input { width: 20px; height: 20px; accent-color: var(--primary); }

@media (min-width: 740px) {
  .wrap { padding-inline: 24px; }
  .main { padding-top: 32px; }
  .home-layout { grid-template-columns: 1.2fr 1fr; gap: 18px 21px; align-items: start; }
  .home-layout .page-heading, .footnote { grid-column: 1 / -1; }
  .wallet { grid-column: 1; grid-row: 2; }
  .games-section { grid-column: 1; grid-row: 3; }
  .result-section { grid-column: 2; grid-row: 2 / span 2; }
  .activity-section { grid-column: 1 / -1; }
  .result-section .section-head { margin-top: -8px; }
  .review-inner { width: min(100%, 663px); }
}
@media (max-width: 350px) {
  .wrap { padding-inline: 12px; }
  .header-separator, .secure span, .game-arrow { display: none; }
  .game-card { padding: 7px; }
  .review-inner .button { font-size: .77rem; padding-inline: 7px; }
}