:root {
  --bg: #f6f7f8;
  --surface: #ffffff;
  --surface-2: #f0f2f4;
  --text: #111315;
  --muted: #6f767f;
  --line: #e4e7ea;
  --accent: #111315;
  --success: #15803d;
  --warning: #a16207;
  --danger: #b42318;
  --shadow: 0 8px 30px rgba(16, 24, 40, .06);
  --radius: 18px;
  --red-ball: #d9363e;
  --blue-ball: #3266c8;
  --green-ball: #278a5d;
  --safe-bottom: max(14px, env(safe-area-inset-bottom));
}

[data-theme="dark"] {
  --bg: #0f1113;
  --surface: #17191c;
  --surface-2: #202329;
  --text: #f6f7f8;
  --muted: #9ca3ad;
  --line: #2a2e34;
  --accent: #f6f7f8;
  --success: #4ade80;
  --warning: #facc15;
  --danger: #fb7185;
  --shadow: 0 8px 30px rgba(0, 0, 0, .22);
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button { color: inherit; }
.app-shell { width: min(100%, 760px); margin: 0 auto; min-height: 100dvh; padding-bottom: 92px; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  min-height: 72px; padding: 12px 16px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(18px); border-bottom: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
}
.brand { border: 0; background: transparent; display: flex; align-items: center; gap: 10px; padding: 0; text-align: left; cursor: pointer; }
.brand-mark {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px;
  background: var(--text); color: var(--bg); font-weight: 850; letter-spacing: -.04em;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text strong { font-size: 15px; }
.brand-text small { margin-top: 5px; color: var(--muted); font-size: 10px; letter-spacing: .02em; }
.top-actions { display: flex; gap: 7px; }
.icon-btn { width: 38px; height: 38px; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.02); }
.view { padding: 10px 16px 32px; }
.bottom-nav {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 30;
  width: min(100%, 760px); display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 8px 10px var(--safe-bottom); background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(18px); border-top: 1px solid var(--line);
}
.nav-item { border: 0; background: transparent; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; cursor: pointer; }
.nav-item span { font-size: 19px; height: 22px; }
.nav-item b { font-size: 11px; font-weight: 650; }
.nav-item.active { color: var(--text); }
.section { margin-top: 18px; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin: 0 2px 10px; }
.section-head h2 { margin: 0; font-size: 17px; letter-spacing: -.02em; }
.section-head p, .section-head small { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.link-btn { border: 0; background: transparent; color: var(--muted); padding: 0; cursor: pointer; font-size: 12px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.hero { padding: 17px; }
.lottery-tabs { display: flex; gap: 8px; overflow: auto; padding: 2px 0 12px; scrollbar-width: none; }
.lottery-tabs::-webkit-scrollbar { display: none; }
.tab-chip { white-space: nowrap; border: 1px solid var(--line); background: var(--surface); color: var(--muted); padding: 8px 11px; border-radius: 999px; cursor: pointer; font-size: 12px; }
.tab-chip.active { background: var(--text); color: var(--bg); border-color: var(--text); }
.hero-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.eyebrow { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .11em; }
.issue { margin-top: 4px; font-size: 25px; font-weight: 780; letter-spacing: -.04em; }
.status { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 9px; font-size: 10px; font-weight: 750; background: var(--surface-2); }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.balls { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; margin: 20px 0 11px; }
.ball-wrap { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.ball {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; border: 0; cursor: pointer;
  font-weight: 820; font-size: 14px; box-shadow: inset 0 -4px 8px rgba(0,0,0,.12), 0 5px 14px rgba(0,0,0,.08);
}
.ball.special { width: 38px; height: 38px; }
.ball-label { color: var(--muted); font-size: 10px; }
.plus { color: var(--muted); font-weight: 800; margin: 0 -2px; }
.ball.red { background: var(--red-ball); }
.ball.blue { background: var(--blue-ball); }
.ball.green { background: var(--green-ball); }
.hero-footer { display: flex; justify-content: space-between; gap: 12px; padding-top: 13px; margin-top: 10px; border-top: 1px solid var(--line); }
.source-line { color: var(--muted); font-size: 11px; line-height: 1.5; }
.source-line strong { color: var(--text); font-weight: 650; }
.primary-btn, .secondary-btn, .danger-btn {
  border-radius: 12px; padding: 10px 13px; cursor: pointer; font-weight: 700; font-size: 12px;
}
.primary-btn { border: 1px solid var(--text); background: var(--text); color: var(--bg); }
.secondary-btn { border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.danger-btn { border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--line)); background: transparent; color: var(--danger); }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.metric { padding: 13px 8px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.metric b { display: block; font-size: 15px; }
.metric small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.toolbar { display: flex; gap: 8px; overflow: auto; scrollbar-width: none; }
.toolbar::-webkit-scrollbar { display: none; }
.segment { border: 1px solid var(--line); background: var(--surface); color: var(--muted); padding: 7px 10px; border-radius: 10px; font-size: 11px; cursor: pointer; white-space: nowrap; }
.segment.active { color: var(--text); border-color: var(--text); }
.heatmap { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.heat-cell {
  aspect-ratio: 1; border: 1px solid var(--line); border-radius: 10px; display: grid; place-items: center; cursor: pointer;
  background: var(--surface); color: var(--text); font-size: 11px; font-weight: 720; position: relative; overflow: hidden;
}
.heat-cell::after { content: ""; position: absolute; inset: auto 0 0; height: var(--heat, 0%); background: color-mix(in srgb, var(--text) 10%, transparent); }
.heat-cell span { position: relative; z-index: 1; }
.draw-list { overflow: hidden; }
.draw-row { display: grid; grid-template-columns: 72px 1fr auto; gap: 10px; align-items: center; padding: 13px 14px; border-bottom: 1px solid var(--line); }
.draw-row:last-child { border-bottom: 0; }
.draw-meta b { display: block; font-size: 12px; }
.draw-meta small { color: var(--muted); font-size: 10px; }
.mini-balls { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.mini-ball { width: 25px; height: 25px; border-radius: 50%; color: white; display: grid; place-items: center; font-size: 9px; font-weight: 750; cursor: pointer; }
.mini-ball.red { background: var(--red-ball); }.mini-ball.blue { background: var(--blue-ball); }.mini-ball.green { background: var(--green-ball); }
.row-arrow { color: var(--muted); border: 0; background: transparent; cursor: pointer; }
.page-title { margin: 8px 2px 18px; }
.page-title h1 { margin: 0; font-size: 27px; letter-spacing: -.04em; }
.page-title p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.filter-line { display: flex; gap: 8px; margin-bottom: 10px; overflow: auto; }
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.detail-item { padding: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.detail-item small { color: var(--muted); font-size: 10px; }
.detail-item b { display: block; margin-top: 4px; font-size: 17px; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { border-bottom: 1px solid var(--line); padding: 11px 12px; text-align: left; font-size: 11px; }
.data-table th { color: var(--muted); font-weight: 600; }
.data-table tr:last-child td { border-bottom: 0; }
.bar-row { display: grid; grid-template-columns: 34px 1fr 42px; gap: 9px; align-items: center; margin: 10px 0; }
.bar-track { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; background: var(--text); }
.bar-row small { color: var(--muted); font-size: 10px; text-align: right; }
.input, .select, .textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); padding: 10px 11px; outline: none; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.number-dialog { width: min(calc(100% - 24px), 520px); border: 1px solid var(--line); border-radius: 22px; background: var(--surface); color: var(--text); padding: 18px; box-shadow: 0 24px 80px rgba(0,0,0,.24); }
.number-dialog::backdrop { background: rgba(0,0,0,.35); backdrop-filter: blur(3px); }
.dialog-close { position: absolute; right: 14px; top: 12px; border: 0; background: var(--surface-2); color: var(--text); border-radius: 10px; width: 32px; height: 32px; cursor: pointer; }
.number-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.number-big { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 24px; font-weight: 850; }
.number-copy h3 { margin: 0; font-size: 24px; }.number-copy p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.toast { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 18px); opacity: 0; pointer-events: none; z-index: 90; padding: 9px 12px; border-radius: 10px; background: var(--text); color: var(--bg); font-size: 11px; transition: .2s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.empty { padding: 28px; text-align: center; color: var(--muted); font-size: 12px; }
.mono { font-variant-numeric: tabular-nums; }
.divider { height: 1px; background: var(--line); margin: 14px 0; }

@media (min-width: 650px) {
  .view { padding-left: 24px; padding-right: 24px; }
  .topbar { padding-left: 24px; padding-right: 24px; }
  .ball { width: 46px; height: 46px; font-size: 17px; }
  .ball.special { width: 50px; height: 50px; }
  .heatmap { gap: 8px; }
}


/* V0.2 refinement */
.hero-v2 { padding: 18px; overflow: hidden; position: relative; }
.hero-v2::after { content:""; position:absolute; right:-45px; top:-55px; width:150px; height:150px; border-radius:50%; background: color-mix(in srgb, var(--text) 3%, transparent); pointer-events:none; }
.time-pill { position: relative; z-index: 1; white-space: nowrap; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); border-radius: 999px; padding: 6px 9px; font-size: 10px; font-variant-numeric: tabular-nums; }
.insight-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.insight-card { border:1px solid var(--line); background:var(--surface); border-radius:15px; padding:13px; min-width:0; }
.insight-card > small { color:var(--muted); font-size:10px; }
.number-pills { display:flex; gap:6px; margin-top:10px; }
.number-pill { width:29px; height:29px; border-radius:50%; border:0; color:white; font-size:10px; font-weight:800; cursor:pointer; }
.number-pill.red,.dot.red { background:var(--red-ball); }.number-pill.blue,.dot.blue { background:var(--blue-ball); }.number-pill.green,.dot.green { background:var(--green-ball); }
.analysis-number-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.analysis-number { border:1px solid var(--line); background:var(--surface); color:var(--text); border-radius:14px; padding:12px; display:grid; grid-template-columns:10px 34px 1fr; align-items:center; gap:8px; text-align:left; cursor:pointer; }
.analysis-number .dot { width:8px; height:8px; border-radius:50%; }
.analysis-number b { font-size:14px; }
.analysis-number small { color:var(--muted); font-size:10px; text-align:right; }
.trend-grid { display:grid; grid-template-columns:1fr; gap:10px; }
.trend-card { padding:15px; overflow:hidden; }
.trend-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.trend-head small { display:block; color:var(--muted); font-size:10px; }
.trend-head strong { display:block; margin-top:4px; font-size:24px; letter-spacing:-.04em; }
.trend-delta { border-radius:999px; background:var(--surface-2); color:var(--muted); padding:5px 8px; font-size:10px; font-variant-numeric:tabular-nums; }
.trend-delta.up { color:var(--success); }.trend-delta.down { color:var(--danger); }
.sparkline { width:100%; height:88px; margin-top:8px; overflow:visible; }
.spark-base { stroke:var(--line); stroke-width:1; vector-effect:non-scaling-stroke; }
.spark-line { fill:none; stroke:var(--text); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.sparkline circle { fill:var(--surface); stroke:var(--text); stroke-width:1.5; vector-effect:non-scaling-stroke; }
.trend-foot { display:flex; justify-content:space-between; color:var(--muted); font-size:9px; margin-top:-2px; }
.structure-strip { display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden; }
.structure-strip > div { padding:15px 8px; text-align:center; border-right:1px solid var(--line); }
.structure-strip > div:last-child { border-right:0; }
.structure-strip small { color:var(--muted); display:block; font-size:10px; }
.structure-strip b { display:block; margin-top:5px; font-size:18px; }
@media (min-width:650px){ .trend-grid{grid-template-columns:1fr 1fr;} }
/* V0.3 product tools */
.hero-actions { display:flex; gap:8px; align-items:center; }
.lottery-dashboard { display:grid; grid-template-columns:1fr; gap:8px; }
.lottery-card { width:100%; border:1px solid var(--line); background:var(--surface); color:var(--text); border-radius:16px; padding:13px; display:flex; flex-direction:column; gap:11px; text-align:left; cursor:pointer; box-shadow:var(--shadow); }
.lottery-card.active { border-color:color-mix(in srgb,var(--text) 34%,var(--line)); }
.lottery-card > div:first-child { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.lottery-card b { font-size:13px; }
.lottery-card small { color:var(--muted); font-size:9px; }
.lottery-card-balls { display:flex; gap:4px; align-items:center; min-width:0; }
.lottery-card-balls i { width:24px; height:24px; border-radius:50%; color:#fff; display:grid; place-items:center; font-style:normal; font-size:8px; font-weight:800; flex:0 0 auto; }
.lottery-card-balls i.red { background:var(--red-ball); }
.lottery-card-balls i.blue { background:var(--blue-ball); }
.lottery-card-balls i.green { background:var(--green-ball); }
.lottery-card-balls .special-dot { margin-left:6px; position:relative; }
.lottery-card-balls .special-dot::before { content:'+'; position:absolute; left:-10px; color:var(--muted); font-weight:800; }

.tool-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.tool-card { border:1px solid var(--line); background:var(--surface); color:var(--text); border-radius:15px; padding:14px; min-height:78px; text-align:left; cursor:pointer; display:flex; flex-direction:column; justify-content:space-between; gap:8px; }
.tool-card b { font-size:13px; }
.tool-card small { color:var(--muted); font-size:9px; line-height:1.45; }
.favorite-strip { display:flex; gap:8px; overflow:auto; padding-bottom:2px; scrollbar-width:none; }
.favorite-strip::-webkit-scrollbar { display:none; }
.favorite-card { min-width:132px; border:1px solid var(--line); border-radius:15px; background:var(--surface); color:var(--text); padding:10px; display:flex; align-items:center; gap:9px; text-align:left; cursor:pointer; }
.favorite-card span:last-child { min-width:0; }
.favorite-card b { display:block; font-size:11px; }
.favorite-card small { display:block; color:var(--muted); font-size:9px; margin-top:2px; }
.row-actions { display:flex; align-items:center; gap:3px; }
.row-share { width:32px; height:32px; border:0; border-radius:9px; background:transparent; color:var(--muted); cursor:pointer; font-size:16px; }

.search-card { padding:14px; margin-bottom:10px; }
.calendar-card { padding: 12px; }
.calendar-week, .calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }
.calendar-week { margin-bottom:6px; color:var(--muted); font-size:11px; text-align:center; }
.calendar-day, .calendar-empty { min-height:42px; border-radius:10px; }
.calendar-day { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; background:var(--surface-2); color:var(--text); }
.calendar-day b { font-size:13px; }
.calendar-day small { color:var(--muted); font-size:9px; }
button.calendar-day { border:1px solid var(--line); background:var(--surface); cursor:pointer; }
button.calendar-day:hover, button.calendar-day:focus-visible { border-color:var(--accent); outline:none; }
button.calendar-day.has-draw b { color:var(--accent); }
.search-main { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px; }
.search-structure { border-top:1px solid var(--line); margin-top:10px; padding-top:12px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.search-structure > label { display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:9px; }
.search-structure > label:last-child { grid-column:1/-1; }
.range-pair { display:grid; grid-template-columns:1fr 1fr; gap:8px; }

.filter-panel { padding:15px; }
.filter-group { padding:12px 0; border-bottom:1px solid var(--line); }
.filter-group:first-child { padding-top:0; }
.filter-group:last-of-type { border-bottom:0; }
.filter-label { color:var(--muted); font-size:10px; font-weight:700; margin-bottom:8px; }
.filter-chips { display:flex; flex-wrap:wrap; gap:6px; }
.filter-chip { border:1px solid var(--line); border-radius:999px; background:var(--surface-2); color:var(--text); padding:7px 10px; font-size:10px; cursor:pointer; }
.filter-chip.active { background:var(--text); color:var(--bg); border-color:var(--text); }
.number-result-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; padding:12px; }
.result-number { border:0; background:transparent; color:var(--text); padding:4px 0; display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; min-width:0; }
.result-number small { color:var(--muted); font-size:8px; white-space:nowrap; }
.coverage-metrics { grid-template-columns:repeat(2,1fr); }

.heat-cell { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
.heat-cell small { display:block; font-size:7px; opacity:.62; font-variant-numeric:tabular-nums; }

.number-page-hero { display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; padding:14px 2px 8px; }
.number-page-hero h1 { margin:1px 0; font-size:36px; line-height:1; letter-spacing:-.05em; }
.number-page-hero p { margin:5px 0 0; color:var(--muted); font-size:10px; }
.favorite-btn { width:42px; height:42px; border:1px solid var(--line); border-radius:13px; background:var(--surface); color:var(--muted); font-size:22px; cursor:pointer; }
.favorite-btn.active { color:#d59a13; }
.attribute-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.attribute-item { min-height:67px; border:1px solid var(--line); background:var(--surface); border-radius:14px; padding:10px; display:flex; flex-direction:column; justify-content:space-between; }
.attribute-item small { color:var(--muted); font-size:8px; }
.attribute-item b { font-size:12px; }
.quick-stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:12px 0; }
.quick-stat-grid > div { border:1px solid var(--line); background:var(--surface-2); border-radius:12px; padding:10px; text-align:center; }
.quick-stat-grid small { display:block; color:var(--muted); font-size:8px; }
.quick-stat-grid b { display:block; margin-top:4px; font-size:15px; }
.quick-attrs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.quick-attrs span { border:1px solid var(--line); background:var(--surface-2); border-radius:999px; padding:6px 8px; color:var(--muted); font-size:9px; }

.trend-toolbar { margin:4px 0 12px; }
.special-timeline { display:flex; gap:8px; overflow:auto; scrollbar-width:none; padding-bottom:2px; }
.special-timeline::-webkit-scrollbar { display:none; }
.special-timeline button { min-width:84px; border:1px solid var(--line); background:var(--surface); color:var(--text); border-radius:14px; padding:9px; display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; }
.special-timeline small { color:var(--muted); font-size:8px; }
.special-timeline b { font-size:9px; font-weight:650; }

.sticky-result { position:fixed; z-index:72; left:50%; top:68px; width:min(calc(100% - 20px),740px); transform:translate(-50%,-12px); opacity:0; pointer-events:none; transition:.18s ease; }
.sticky-result.show { opacity:1; transform:translate(-50%,0); pointer-events:auto; }
.sticky-result button { width:100%; height:50px; border:1px solid var(--line); border-radius:15px; background:color-mix(in srgb,var(--surface) 94%,transparent); color:var(--text); box-shadow:0 10px 35px rgba(0,0,0,.12); backdrop-filter:blur(16px); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:0 12px; cursor:pointer; }
.sticky-result b { font-size:11px; }
.sticky-result span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:10px; font-variant-numeric:tabular-nums; }
.sticky-result i { font-style:normal; color:var(--muted); }

.share-dialog { width:min(calc(100% - 24px),480px); max-height:calc(100vh - 36px); border:1px solid var(--line); border-radius:22px; background:var(--surface); color:var(--text); padding:16px; box-shadow:0 24px 80px rgba(0,0,0,.26); }
.share-dialog::backdrop { background:rgba(0,0,0,.42); backdrop-filter:blur(4px); }
.share-dialog-body { padding-top:22px; }
.page-title.compact { margin:0 0 12px; }
.page-title.compact h2 { margin:0; font-size:18px; }
.page-title.compact p { margin:4px 0 0; color:var(--muted); font-size:10px; }
.share-preview { width:100%; display:block; border:1px solid var(--line); border-radius:16px; background:var(--bg); }
.share-actions { margin-top:12px; }
.button-link { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }

@media (max-width: 649px) {
  .number-dialog.quick-mode { width:100%; max-width:none; margin:auto 0 0; border-radius:22px 22px 0 0; border-left:0; border-right:0; border-bottom:0; padding:18px 18px calc(18px + env(safe-area-inset-bottom)); }
}
@media (max-width: 430px) {
  .search-main { grid-template-columns:1fr; }
  .search-structure { grid-template-columns:1fr 1fr; }
  .number-result-grid { grid-template-columns:repeat(7,1fr); gap:4px; padding:9px 7px; }
  .result-number .mini-ball { width:30px; height:30px; }
  .result-number small { font-size:7px; }
  .attribute-grid { grid-template-columns:repeat(4,1fr); gap:5px; }
  .attribute-item { padding:8px; min-height:62px; }
}
@media (min-width: 650px) {
  .lottery-dashboard { grid-template-columns:1fr 1fr; }
  .coverage-metrics { grid-template-columns:repeat(4,1fr); }
  .number-result-grid { grid-template-columns:repeat(10,1fr); }
  .search-structure { grid-template-columns:1fr 1fr 2fr; }
  .search-structure > label:last-child { grid-column:auto; }
}

/* V0.4 data-layer + usability refinements */
.data-freshness{margin:12px -2px -2px;padding:10px 2px 0;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--muted);font-size:9px}
.refresh-btn{border:0;background:transparent;color:var(--muted);font:inherit;font-weight:700;padding:6px 2px;cursor:pointer}
.refresh-btn:hover,.refresh-btn:focus-visible{color:var(--text);outline:none}
.history-window{margin:4px 0 12px;overflow:auto;flex-wrap:nowrap;scrollbar-width:none}
.history-window::-webkit-scrollbar{display:none}
.appearance-list{overflow:hidden}
.appearance-row{width:100%;border:0;border-bottom:1px solid var(--line);background:var(--surface);color:var(--text);display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:11px 12px;text-align:left;cursor:pointer}
.appearance-row:last-child{border-bottom:0}
.appearance-row>div{min-width:0;display:flex;flex-direction:column;gap:3px}
.appearance-row b{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.appearance-row small{color:var(--muted);font-size:8px}
.role-pill{border:1px solid var(--line);border-radius:999px;padding:5px 7px;color:var(--muted);font-size:8px;white-space:nowrap}
.role-pill.special-role{border-color:color-mix(in srgb,var(--accent) 28%,var(--line));color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
@media (max-width:430px){.appearance-row{grid-template-columns:1fr auto auto;padding:10px}.role-pill{padding:4px 6px}}