:root {
  color-scheme: dark;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background: #07141f;
  color: #f4f8fb;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 80% 5%, rgba(35, 196, 131, .19), transparent 30rem),
    linear-gradient(160deg, #07141f 0%, #0b1e2c 65%, #0a2730 100%);
}

.shell {
  width: min(100% - 2rem, 38rem);
  margin: 0 auto;
  padding: max(3.5rem, env(safe-area-inset-top)) 0 max(2rem, env(safe-area-inset-bottom));
}

header { margin-bottom: 2.5rem; }
.eyebrow { color: #80e4bb; font-size: .72rem; font-weight: 750; letter-spacing: .13em; }
h1 { margin: .35rem 0 0; font-size: clamp(2.3rem, 11vw, 4.2rem); line-height: .95; letter-spacing: -.05em; }
h1 span { color: #36d399; }
.subtitle { margin: .8rem 0 0; color: #9db0bd; }

.card {
  padding: 1.4rem;
  border: 1px solid rgba(164, 205, 220, .18);
  border-radius: 1.25rem;
  background: rgba(10, 28, 40, .82);
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .22);
  backdrop-filter: blur(1rem);
}

.card[hidden] { display: none; }
h2 { margin: 0 0 .55rem; font-size: 1.3rem; }
.card p { color: #aebdc7; line-height: 1.7; }
label { display: block; margin: 1.25rem 0 .45rem; color: #ced9df; font-size: .9rem; }
input, select, button { width: 100%; min-height: 3.1rem; border-radius: .8rem; font: inherit; }
input { border: 1px solid #385262; padding: 0 1rem; background: #071722; color: #fff; outline: none; }
select { border: 1px solid #385262; padding: 0 1rem; background: #071722; color: #fff; outline: none; }
input:focus { border-color: #36d399; box-shadow: 0 0 0 3px rgba(54, 211, 153, .14); }
button { margin-top: .85rem; border: 0; background: #36d399; color: #052016; font-weight: 800; cursor: pointer; }
button.secondary { background: #203744; color: #e7eff3; }
output { display: block; min-height: 1.5rem; padding-top: .75rem; color: #ff9b9b; font-size: .9rem; }
.status-line { display: flex; align-items: center; gap: .55rem; margin-bottom: 1.2rem; color: #80e4bb; font-size: .85rem; }
.status-line i { width: .55rem; height: .55rem; border-radius: 50%; background: #36d399; box-shadow: 0 0 .8rem #36d399; }
.private-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.private-head .status-line { margin: 0; }
button.text-button { width: auto; min-height: 2.2rem; margin: 0; padding: 0 .8rem; background: #203744; color: #dbe7ec; font-size: .82rem; }
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; margin: 1rem 0; }
button.tab { min-height: 2.65rem; margin: 0; padding: .45rem; background: #172e3c; color: #aabcc6; font-size: .85rem; }
button.tab.active { background: #36d399; color: #052016; }
.sync { margin: .75rem 0; font-size: .82rem; }
.content-panel { display: none; }
.content-panel.active { display: block; }
.empty { padding: 1.2rem; border: 1px dashed #385262; border-radius: .9rem; text-align: center; color: #9db0bd; }
.match-card, .ticket-card, .ledger-card { margin-top: .8rem; padding: 1rem; border: 1px solid rgba(164, 205, 220, .14); border-radius: 1rem; background: rgba(5, 19, 29, .65); }
.match-head, .ticket-head, .ledger-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .7rem; }
.match-num, .muted, .meta { color: #91a7b4; font-size: .78rem; }
.teams { margin: .25rem 0; color: #f6fbfd; font-size: 1.05rem; font-weight: 760; }
.badge { flex: none; padding: .28rem .5rem; border-radius: 999px; background: rgba(54, 211, 153, .13); color: #7ce4b8; font-size: .7rem; font-weight: 750; }
.badge.warn { background: rgba(255, 171, 64, .13); color: #ffc171; }
.market { margin-top: .9rem; }
.market h3 { margin: 0 0 .4rem; color: #b9c8d0; font-size: .78rem; font-weight: 650; }
.prob-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.prob-grid.goals { grid-template-columns: repeat(4, 1fr); }
.prob { padding: .48rem .25rem; border-radius: .55rem; background: #102735; text-align: center; }
.prob small { display: block; color: #8399a5; font-size: .68rem; }
.prob strong { display: block; margin-top: .12rem; color: #eff8f5; font-size: .84rem; }
.factors { margin: .7rem 0 0; padding: .65rem; border-radius: .6rem; background: #0d2330; color: #9db0bd; font-size: .75rem; line-height: 1.55; }
.ticket-card.empty-ticket { opacity: .78; }
.ticket-title { margin: 0; font-size: 1rem; }
.ticket-card ul { margin: .7rem 0 0; padding-left: 1.15rem; color: #cad6dc; font-size: .82rem; line-height: 1.7; }
.numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin-top: .8rem; }
.number { padding: .55rem .3rem; border-radius: .55rem; background: #102735; text-align: center; }
.number small { display: block; color: #8399a5; font-size: .65rem; }
.number strong { display: block; margin-top: .12rem; font-size: .85rem; }
.profit-positive { color: #62e6a8; }
.profit-negative { color: #ff9090; }
.section-title { margin: 1.2rem 0 .3rem; font-size: 1.05rem; }

@media (min-width: 48rem) {
  .shell { padding-top: 6rem; }
  .card { padding: 2rem; }
}