: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: 38px; height: 38px; border-radius: 50%; display: flex; flex-direction:column; align-items:center; justify-content:center; color: #fff; border: 0; cursor: pointer;
  line-height:1; box-shadow: inset 0 -4px 8px rgba(0,0,0,.12), 0 5px 14px rgba(0,0,0,.08);
}
.ball.special { width: 42px; height: 42px; }
.ball-number { display:block; font-weight:850; font-size:13px; line-height:1; }
.ball-zodiac { display:block; margin-top:2px; font-weight:750; font-size:8px; line-height:1; opacity:.95; }
.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: 30px; height: 30px; border-radius: 50%; color: white; display: flex; flex:0 0 auto; flex-direction:column; align-items:center; justify-content:center; line-height:1; border:0; padding:0; cursor: pointer; }
.mini-ball .ball-number { font-size:9px; }
.mini-ball .ball-zodiac { margin-top:1px; font-size:6px; }
.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: flex; flex-direction:column; align-items:center; justify-content:center; color: #fff; }
.number-big .ball-number { font-size:23px; }
.number-big .ball-zodiac { font-size:12px; margin-top:4px; }
.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: 50px; height: 50px; }
  .ball .ball-number { font-size:16px; }
  .ball .ball-zodiac { font-size:9px; }
  .ball.special { width: 54px; height: 54px; }
  .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:32px; height:32px; border-radius:50%; border:0; padding:0; color:white; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; cursor:pointer; }
.number-pill .ball-number { font-size:9px; }.number-pill .ball-zodiac { font-size:6px; margin-top:1px; }
.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:30px 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;} }
/* Europe Cai motion result component */
.motion-card { overflow:hidden; }
.motion-embed-card { padding-bottom: 2px; }
.motion-iframe { display:block; width:100%; height:560px; border:0; background:#10191c; }
.motion-card-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; padding:16px 16px 0; }
.motion-card-head strong { display:block; margin-top:5px; font-size:18px; letter-spacing:-.03em; }
.motion-card-head small { display:block; margin-top:5px; color:var(--muted); font-size:10px; }
.motion-kicker { color:var(--muted); font-size:9px; letter-spacing:.14em; }
.motion-badge { white-space:nowrap; color:var(--success); background:color-mix(in srgb,var(--success) 10%,transparent); border-radius:999px; padding:6px 8px; font-size:9px; }
.motion-stage { position:relative; min-height:220px; margin:15px; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:radial-gradient(circle at 50% 40%, color-mix(in srgb,var(--text) 12%,var(--surface)), var(--surface-2) 68%); display:grid; place-items:center; }
.motion-chamber { position:relative; width:min(90%,430px); height:145px; border:1px solid color-mix(in srgb,var(--text) 20%,var(--line)); border-radius:75px 75px 25px 25px; background:color-mix(in srgb,var(--surface) 82%,transparent); box-shadow:inset 0 0 30px color-mix(in srgb,var(--text) 7%,transparent), 0 15px 30px rgba(0,0,0,.06); display:grid; place-items:center; z-index:2; }
.motion-chamber-light { position:absolute; inset:10px 25%; height:4px; border-radius:999px; background:color-mix(in srgb,var(--text) 18%,transparent); filter:blur(2px); }
.motion-slots { display:flex; align-items:center; justify-content:center; gap:7px; padding:30px 12px 0; }
.motion-ball { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:transparent; background:var(--surface-2); border:1px solid var(--line); font-size:10px; font-weight:850; box-shadow:0 4px 10px rgba(0,0,0,.1); transform:translateY(14px) scale(.72); opacity:.45; }
.motion-ball.special-slot { width:35px; height:35px; border:2px solid var(--warning); }
.motion-plus { color:var(--muted); font-weight:800; }
.motion-stage.is-playing .motion-ball { animation:motionDrop 760ms cubic-bezier(.2,.75,.2,1) var(--motion-delay) both; }
.motion-stage.is-playing .motion-ball:nth-of-type(1), .motion-stage.is-playing .motion-ball:nth-of-type(3), .motion-stage.is-playing .motion-ball:nth-of-type(5) { animation-name:motionDropLeft; }
.motion-stage.is-complete .motion-ball { color:#fff; background:var(--text); border-color:var(--text); transform:none; opacity:1; }
.motion-stage.is-complete .motion-ball.special-slot { background:var(--warning); border-color:var(--warning); }
.motion-status { position:absolute; left:14px; bottom:12px; color:var(--muted); font-size:10px; z-index:3; }
.motion-orbit { position:absolute; border:1px dashed color-mix(in srgb,var(--text) 15%,transparent); border-radius:50%; opacity:.7; }
.orbit-a { width:260px; height:110px; transform:rotate(-13deg); animation:motionOrbit 8s linear infinite; }
.orbit-b { width:340px; height:150px; transform:rotate(18deg); animation:motionOrbit 11s linear infinite reverse; }
.motion-controls { display:flex; gap:8px; padding:0 16px; }
.motion-controls .primary-btn { flex:1; }
.motion-note { margin:10px 16px 16px; color:var(--muted); font-size:10px; line-height:1.6; }
@keyframes motionDrop { 0%{transform:translateY(-42px) scale(.4);opacity:0} 55%{transform:translateY(9px) scale(1.08);opacity:1} 78%{transform:translateY(-3px) scale(.96)} 100%{transform:translateY(0) scale(1);opacity:1;color:#fff;background:var(--text);border-color:var(--text)} }
@keyframes motionDropLeft { 0%{transform:translate(-18px,-38px) scale(.4);opacity:0} 55%{transform:translate(4px,8px) scale(1.08);opacity:1} 100%{transform:translateY(0) scale(1);opacity:1;color:#fff;background:var(--text);border-color:var(--text)} }
@keyframes motionOrbit { from{transform:rotate(0deg) scale(1)} to{transform:rotate(360deg) scale(1.03)} }
@media (prefers-reduced-motion:reduce){ .orbit-a,.orbit-b{animation:none}.motion-stage.is-playing .motion-ball{animation:none;transform:none;opacity:1;color:#fff;background:var(--text)} }
@media (max-width:420px){ .motion-slots{gap:4px}.motion-ball{width:26px;height:26px;font-size:9px}.motion-ball.special-slot{width:30px;height:30px}.motion-stage{min-height:205px} }
@media (max-width:650px){ .motion-iframe{height:520px;} }
.broadcast-preview{padding:20px;min-width:0}.broadcast-preview .section-head{margin-top:0}.machine-poster{height:240px;border-radius:14px;background:radial-gradient(ellipse at 50% 30%,#346b67,#102a2b 70%);color:#ded4ae;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;margin-bottom:18px;letter-spacing:.22em}.poster-orb{width:112px;height:112px;border:2px solid #afc9b8;border-radius:50%;display:grid;place-items:center;font-size:42px;box-shadow:inset 0 0 25px #b7e4d12b}.machine-poster small{font-size:9px}.home-broadcast{display:grid;gap:20px}.home-broadcast .hero{align-self:start}.draw-layout{display:grid;gap:20px}.draw-sidebar{padding:20px;min-width:0}.draw-sidebar p{color:var(--muted);font-size:12px}.draw-player{padding:16px;min-width:0}.draw-status-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted);padding:8px 0}.draw-status-row strong{color:var(--text)}.draw-stage{height:440px;position:relative;overflow:hidden;background:radial-gradient(ellipse,#234847,#102a2b);border-radius:14px;margin:12px 0}.draw-canvas{width:100%;height:100%}.draw-canvas canvas{display:block;width:100%;height:100%}.draw-overlay{position:absolute;top:18px;left:18px;color:#fff;display:flex;flex-direction:column;pointer-events:none}.draw-overlay b{font-size:38px}.draw-overlay span{font-size:11px}.draw-stage [data-fallback]{position:absolute;top:45%;left:10%;right:10%;text-align:center;color:#e0e9e4;line-height:1.7}.draw-rack{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:18px 0}.draw-slot{display:grid;text-align:center;gap:6px}.draw-slot b{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:#18665f;color:white;margin:auto;font-size:16px}.draw-slot.special b{background:#aa782e}.draw-slot small{font-size:9px;color:var(--muted)}.draw-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.draw-controls label{font-size:12px}.draw-note{font-size:11px;color:var(--muted);line-height:1.7}.draw-layout .draw-sidebar{order:2}.draw-layout .draw-player{order:1}.draw-player{margin-bottom:24px}.broadcast-preview details{font-size:11px;color:var(--muted);margin-top:14px}.motion-iframe{height:660px}
@media(min-width:1000px){.app-shell.broadcast-wide{width:min(1180px,100%)}.home-broadcast{grid-template-columns:1fr 1.05fr;align-items:start}.draw-layout{grid-template-columns:minmax(300px,.7fr) minmax(0,1.3fr);align-items:start}.draw-layout .draw-sidebar{order:1}.draw-layout .draw-player{order:2}.draw-stage{height:510px}.broadcast-wide .bottom-nav{max-width:760px;left:50%;transform:translateX(-50%);width:100%}.home-broadcast .section{margin-top:0}}
@media(max-width:420px){.draw-player{padding:10px}.draw-stage{height:360px}.draw-rack{gap:2px}.draw-slot b{width:30px;height:30px;font-size:13px}.draw-controls{gap:6px}.broadcast-preview{padding:14px}.machine-poster{height:210px}}
.is-lightweight .draw-stage{height:140px}.is-lightweight .draw-overlay{display:none}.is-lightweight .draw-stage [data-fallback]{top:50%;margin:0;transform:translateY(-50%)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* 开奖页以舞台为主；窄屏保持单栏，避免播放器留下固定高度空白。 */
.result-waiting{display:none;color:var(--muted);font-size:12px;line-height:1.6}
.result-concealed .result-waiting{display:block}
.result-concealed .result-balls{visibility:hidden}
.draw-layout{gap:14px}
.draw-sidebar{padding:16px;align-self:start}
.draw-player{padding:14px}
.draw-stage{width:100%;height:auto;min-height:300px;aspect-ratio:16/10}
@media(min-width:1000px){.app-shell.broadcast-wide{width:min(1240px,100%)}.draw-layout{grid-template-columns:minmax(220px,.42fr) minmax(0,1.58fr)}.draw-stage{height:auto;min-height:430px;aspect-ratio:16/9}}
@media(max-width:420px){.draw-stage{height:auto;min-height:280px}.draw-player{padding:10px}}
/* 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:30px; height:30px; border-radius:50%; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; font-style:normal; flex:0 0 auto; }
.lottery-card-balls i .ball-number { font-size:9px; }.lottery-card-balls i .ball-zodiac { font-size:6px; margin-top:1px; }
.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}}

/* ==========================================================================
   V0.6.2 桌面信息架构与开奖现场
   1) 全站容器宽度阶梯（1180 / 1280 / 1320），废弃 .broadcast-wide 特例
   2) 顶栏全宽 + 桌面业务导航；底部导航限制为移动端
   3) 首页首屏「最新开奖 / 开奖现场」平衡双栏，开奖现场为主视觉
   4) 今日开奖 / 本期概览 / 工具区完整网格，消除半宽与大面积留白
   5) 开奖现场轻量自动播放窗口（.lw-*）
   ========================================================================== */

.app-frame { min-height: 100dvh; }
.topbar { display: block; padding: 0; min-height: 0; }
.topbar-inner {
  width: min(100%, 760px); margin: 0 auto; padding: 12px 16px; min-height: 72px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.top-nav { display: none; }

/* 开奖现场轻量自动播放窗口 */
.live-card { padding: 16px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.live-card .section-head { margin: 0; align-items: center; }
.live-badge { white-space: nowrap; border-radius: 999px; padding: 6px 10px; font-size: 10px; font-weight: 750; background: var(--surface-2); color: var(--muted); }
.live-badge.live { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); }
.live-badge.waiting { background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--warning); }
.lw-stage {
  position: relative; overflow: hidden; border-radius: 16px; min-height: 168px;
  background: radial-gradient(ellipse at 50% 32%, #346b67, #102a2b 72%);
  display: grid; place-items: center; flex: 1 1 auto;
}
.lw-orb { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #e6efe9; z-index: 2; }
.lw-orb b { font-size: 44px; font-weight: 850; letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1; }
.lw-orb small { font-size: 10px; letter-spacing: .18em; opacity: .78; }
.lw-ring { width: 96px; height: 96px; border: 1px solid #afc9b866; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 26px #b7e4d12b; }
.lw-ring.is-revealing b { animation: lwPop 520ms cubic-bezier(.2,.8,.2,1); }
.lw-track { position: absolute; left: 0; right: 0; bottom: 12px; height: 3px; display: flex; gap: 6px; padding: 0 18px; }
.lw-track span { flex: 1; height: 3px; border-radius: 999px; background: #afc9b833; overflow: hidden; }
.lw-track span::after { content: ""; display: block; height: 100%; width: 0; background: #afc9b8aa; transition: width .5s ease; }
.lw-track span.done::after { width: 100%; }
@keyframes lwPop { 0% { transform: scale(.72); opacity: .2 } 60% { transform: scale(1.08); opacity: 1 } 100% { transform: scale(1) } }
.lw-rack { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.lw-slot { display: grid; gap: 5px; text-align: center; }
.lw-slot b {
  width: 34px; height: 34px; margin: auto; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); font-size: 14px; font-weight: 800;
  font-variant-numeric: tabular-nums; transition: .18s ease;
}
.lw-slot.revealed b { background: #18665f; color: #fff; border-color: #18665f; }
.lw-slot.special.revealed b { background: #aa782e; border-color: #aa782e; }
.lw-slot small { color: var(--muted); font-size: 9px; }
.lw-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 11px; }
.lw-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.lw-actions button { flex: 1 1 auto; }
.lw-note { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.live-card[data-mode="live"] .lw-stage { background: radial-gradient(ellipse at 50% 32%, #1f5f57, #0b2224 72%); }

/* 首页模块编组 */
.home-secondary { display: grid; gap: 18px; }
.home-tools { display: grid; gap: 18px; }

@media (min-width: 650px) {
  .topbar-inner { padding-left: 24px; padding-right: 24px; }
}

/* ---- 桌面（≥1000px） ---- */
@media (min-width: 1000px) {
  .app-shell, .app-shell.broadcast-wide { width: min(100% - 48px, 1180px); }
  .topbar-inner { width: min(100% - 48px, 1180px); min-height: 80px; }
  .top-nav { display: flex; align-items: center; gap: 6px; }
  .top-nav .nav-item {
    flex-direction: row; gap: 8px; padding: 9px 15px; border-radius: 999px;
    border: 1px solid transparent; font-size: 13px;
  }
  .top-nav .nav-item span { font-size: 15px; height: auto; }
  .top-nav .nav-item b { font-size: 13px; font-weight: 650; }
  .top-nav .nav-item:hover { color: var(--text); background: var(--surface-2); }
  .top-nav .nav-item.active { color: var(--bg); background: var(--text); border-color: var(--text); }
  .bottom-nav { display: none; }
  .view { padding: 16px 0 44px; }
  .app-shell { padding-bottom: 32px; }

  /* 首屏：最新开奖与开奖现场平衡双栏，开奖现场为主视觉 */
  .home-broadcast { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: 18px; align-items: stretch; }
  .home-broadcast .hero { align-self: stretch; display: flex; flex-direction: column; }
  .home-broadcast .hero .hero-footer { margin-top: auto; }
  .home-broadcast .live-card { align-self: stretch; }
  .home-broadcast .lw-stage { min-height: 232px; }

  /* 今日开奖 / 本期概览 / 工具区使用完整网格 */
  .home-secondary { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .home-secondary > .section { margin-top: 22px; }
  .home-tools { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .home-tools > .section { margin-top: 22px; }
  .lottery-dashboard { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; }
  .lottery-card { padding: 16px 18px; }
  .lottery-card-balls .ball-label { font-size: 10px; }
  .metrics { gap: 10px; }
  .metric { padding: 18px 12px; }
  .metric b { font-size: 21px; }
  .metric small { font-size: 11px; }
  .insight-grid { gap: 10px; }
  .insight-card { padding: 18px; min-height: 118px; }
  .tool-grid { gap: 10px; }
  .tool-card { padding: 18px; }
  .heatmap { gap: 8px; }
  .heat-cell { aspect-ratio: auto; min-height: 64px; font-size: 13px; }
  .draw-row { grid-template-columns: 96px 1fr auto; padding: 15px 18px; }
  .draw-meta b { font-size: 13px; }
  .section-head h2 { font-size: 19px; }
  .section-head p, .section-head small { font-size: 12px; }
  .issue { font-size: 30px; }
  .page-title h1 { font-size: 32px; }
  .primary-btn, .secondary-btn, .danger-btn { padding: 12px 18px; font-size: 13px; border-radius: 13px; }
  .tab-chip { padding: 9px 14px; font-size: 13px; }
  .sticky-result { top: 92px; width: min(calc(100% - 64px), 1180px); }

  /* 开奖页：主舞台为主，侧栏收窄 */
  .draw-layout { grid-template-columns: minmax(280px, .34fr) minmax(0, 1.66fr); gap: 18px; }
  .draw-sidebar { padding: 20px; }
  .draw-player { padding: 18px; }
  .draw-stage { min-height: 470px; aspect-ratio: 16/9; }
  .lw-slot b { width: 42px; height: 42px; font-size: 17px; }
}

@media (min-width: 1280px) {
  .app-shell, .app-shell.broadcast-wide { width: min(100% - 56px, 1280px); }
  .topbar-inner { width: min(100% - 56px, 1280px); }
  .sticky-result { width: min(calc(100% - 72px), 1280px); }
  .ball { width: 52px; height: 52px; }
  .ball .ball-number { font-size: 17px; }
  .ball.special { width: 56px; height: 56px; }
  .draw-stage { min-height: 560px; }
}

@media (min-width: 1680px) {
  .app-shell, .app-shell.broadcast-wide { width: min(100% - 96px, 1320px); }
  .topbar-inner { width: min(100% - 96px, 1320px); }
  .sticky-result { width: min(calc(100% - 112px), 1320px); }
  .draw-stage { min-height: 620px; }
}

/* ---- 移动端（≤999px）：底部导航仅移动端，且不遮挡最后内容 ---- */
@media (max-width: 999px) {
  .bottom-nav { max-width: 760px; left: 50%; transform: translateX(-50%); width: 100%; }
  .app-shell { padding-bottom: 104px; }
}

/* ==========================================================================
   v0.7.2 — Broadcast-first UI + draw visualization rework
   This layer intentionally overrides the historical component styling above.
   ========================================================================== */
:root {
  --bg: #f4f5f6;
  --surface: #ffffff;
  --surface-2: #eef0f2;
  --surface-3: #e8ebed;
  --text: #15191d;
  --muted: #737b84;
  --line: #e2e5e8;
  --accent-soft: #e9edef;
  --shadow: 0 10px 34px rgba(20, 28, 34, .055);
  --radius: 20px;
}
[data-theme="dark"] {
  --bg: #0d1012;
  --surface: #15191c;
  --surface-2: #1d2226;
  --surface-3: #242a2f;
  --text: #f2f4f5;
  --muted: #9ba3aa;
  --line: #293036;
  --accent-soft: #20262a;
  --shadow: 0 16px 46px rgba(0,0,0,.22);
}
body { letter-spacing: -.005em; }
.card { border-color: color-mix(in srgb,var(--line) 78%,transparent); box-shadow: var(--shadow); }
.topbar { border-bottom-color: color-mix(in srgb,var(--line) 55%,transparent); }
.brand-mark { border-radius: 14px; box-shadow: 0 7px 20px rgba(15,20,24,.12); }
.icon-btn,.tab-chip,.metric,.tool-card,.insight-card,.detail-item { box-shadow: none; }
.primary-btn,.secondary-btn,.danger-btn { min-height: 42px; transition: transform .16s ease,background-color .16s ease,border-color .16s ease; }
.primary-btn:active,.secondary-btn:active,.danger-btn:active { transform: scale(.98); }
.section-head h2,.page-title h1,.issue { text-wrap: balance; }
.home-broadcast { gap: 16px; }
.hero-v2,.live-card { overflow: hidden; }
.hero-v2 { background: linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface-2) 22%,var(--surface))); }

/* Home live window: broadcast summary, not a miniature 3D scene. */
.live-card { background: linear-gradient(160deg,#10191d,#152428 56%,#10191d); color: #f4f6f6; border-color: #26383b; box-shadow: 0 18px 44px rgba(10,20,22,.15); }
.live-card .section-head p,.live-card .lw-meta,.live-card .lw-note,.live-card .lw-slot small { color: #9eb0b1; }
.live-card .section-head h2 { color:#f4f6f6; }
.live-card .live-badge { background:#ffffff12;color:#c8d4d3;border:1px solid #ffffff14; }
.live-card .live-badge.live { color:#8fe0bb;background:#57d69a18;border-color:#62dca025; }
.live-card .live-badge.waiting { color:#e0c889;background:#d1ad4c16;border-color:#d8b95f22; }
.live-card .lw-stage { min-height: 190px; background: radial-gradient(circle at 50% 38%,#29494a 0,#16282b 42%,#0e171a 78%); border:1px solid #ffffff0f; box-shadow: inset 0 0 70px #00000020; }
.live-card .lw-ring { width:112px;height:112px;border-color:#d9c9944f;box-shadow:0 0 0 10px #ffffff05,inset 0 0 30px #cfe5df17; }
.live-card .lw-orb b { font-size:52px;color:#f7f4e9; }
.live-card .lw-track span { background:#ffffff12; }
.live-card .lw-track span::after { background:#d8c58b99; }
.live-card .lw-slot b { width:40px;height:40px;background:#ffffff0c;border-color:#ffffff14;color:#8fa0a1;font-size:15px; }
.live-card .lw-slot.revealed b { background:#236d61;border-color:#3b887b;color:white; }
.live-card .lw-slot.special.revealed b { background:#a17a3e;border-color:#b58e4e; }
.live-card .primary-btn { background:#f0eee6;color:#131b1e;border-color:#f0eee6; }
.live-card .secondary-btn { background:#ffffff0b;color:#edf2f1;border-color:#ffffff1a; }

/* Full draw page: one stage surface instead of card-inside-card visual nesting. */
.draw-layout { align-items:start; }
.draw-player { overflow:hidden; background: linear-gradient(160deg,#0d1518,#111d20 58%,#0d1518); color:#f4f6f6; border-color:#263338; box-shadow:0 22px 58px rgba(9,17,20,.18); }
.draw-experience-v2 { display:grid; gap:14px; min-width:0; }
.draw-broadcast-head { display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:2px 2px 0; }
.draw-broadcast-title { display:flex;flex-direction:column;gap:5px;min-width:0; }
.draw-broadcast-title strong { font-size:16px;letter-spacing:-.02em;color:#f3f5f5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.draw-kicker { color:#8d9fa2;font-size:9px;letter-spacing:.18em;font-weight:750; }
.draw-connection { flex:0 0 auto;border:1px solid #ffffff14;background:#ffffff0b;color:#b9c6c7;border-radius:999px;padding:6px 9px;font-size:9px;font-weight:700; }
.draw-experience-v2.is-offline .draw-connection { color:#f0bd9f;border-color:#e98c6228;background:#e98c6212; }

.draw-stage { position:relative; width:100%; height:clamp(390px,56svh,610px); min-height:390px; aspect-ratio:auto; overflow:hidden; margin:0; border:1px solid #ffffff0e; border-radius:18px; background:
  radial-gradient(circle at 48% 35%,#29484a 0,#1a3033 28%,#111f22 56%,#0b1417 100%); isolation:isolate; }
.draw-stage::before { content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(180deg,#ffffff08,transparent 28%,transparent 70%,#00000022); }
.draw-canvas { position:absolute;inset:0;z-index:0; }
.draw-canvas canvas { width:100%;height:100%;display:block; }
.draw-current-hud { position:absolute;z-index:3;top:18px;right:18px;width:min(44%,210px);min-height:172px;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;text-align:right;pointer-events:none; }
.draw-current-hud span { color:#c7d1d1;font-size:11px;font-weight:680;letter-spacing:.06em; }
.draw-current-hud b { display:block;color:#718083;font-size:clamp(64px,18vw,112px);line-height:.92;letter-spacing:-.075em;font-weight:850;font-variant-numeric:tabular-nums;text-shadow:0 8px 30px rgba(0,0,0,.28);transition:color .2s ease,transform .2s ease; }
.draw-current-hud b.is-number { color:#f7f5ed;transform:translateY(-1px); }
.draw-current-hud b.is-number.red { text-shadow:0 7px 34px rgba(217,75,82,.25); }
.draw-current-hud b.is-number.blue { text-shadow:0 7px 34px rgba(77,121,216,.25); }
.draw-current-hud b.is-number.green { text-shadow:0 7px 34px rgba(52,160,111,.25); }
.draw-current-hud strong { margin-top:8px;color:#94a4a6;font-size:10px;font-weight:620;line-height:1.45;max-width:180px; }
.draw-stage-progress { position:absolute;z-index:3;left:18px;right:18px;bottom:14px;display:grid;grid-template-columns:repeat(7,1fr);gap:6px; }
.draw-stage-progress i { height:3px;border-radius:999px;background:#ffffff12;overflow:hidden; }
.draw-stage-progress i::after { content:"";display:block;height:100%;width:0;background:#d4c28b;transition:width .35s ease; }
.draw-stage-progress i.done::after { width:100%; }
.draw-fallback { position:absolute;z-index:4;left:10%;right:10%;top:50%;transform:translateY(-50%);margin:0;text-align:center;color:#d7dfde;font-size:12px;line-height:1.75; }
.draw-dev-metric { position:absolute;z-index:5;left:12px;top:10px;color:#819092;font-size:8px;letter-spacing:.04em; }

.draw-result-head { display:flex;align-items:center;justify-content:space-between;color:#b7c3c4;font-size:10px;padding:0 2px; }
.draw-result-head small { color:#78898c;font-variant-numeric:tabular-nums; }
.draw-rack { display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:0;padding:12px 10px;border-radius:16px;background:#ffffff08;border:1px solid #ffffff0d; }
.draw-slot { min-width:0;display:grid;text-align:center;gap:7px;align-content:start; }
.draw-slot b { width:48px;height:48px;display:grid;place-items:center;border-radius:50%;margin:auto;background:#ffffff0b;color:#819092;border:1px solid #ffffff12;font-size:17px;font-weight:850;font-variant-numeric:tabular-nums;box-shadow:none;transition:transform .2s ease,background-color .2s ease,border-color .2s ease,color .2s ease; }
.draw-slot.revealed b { color:#fff;transform:translateY(-1px);box-shadow:inset 0 -6px 12px rgba(0,0,0,.12),0 7px 18px rgba(0,0,0,.14); }
.draw-slot.revealed b.red { background:#c9424a;border-color:#d85a61; }
.draw-slot.revealed b.blue { background:#426bc4;border-color:#5a80d1; }
.draw-slot.revealed b.green { background:#26865e;border-color:#3b9a73; }
.draw-slot.special b { outline:1px solid #c8ad6540;outline-offset:2px; }
.draw-slot small { color:#859598;font-size:8px;white-space:nowrap; }
.draw-controls { display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0; }
.draw-player .primary-btn { background:#f1efe7;border-color:#f1efe7;color:#121a1d; }
.draw-player .secondary-btn { background:#ffffff0a;border-color:#ffffff18;color:#e7eceb; }
.draw-motion-toggle { margin-left:auto;display:flex;align-items:center;gap:7px;color:#91a0a2;font-size:10px;white-space:nowrap; }
.draw-motion-toggle input { accent-color:#d0bd80; }
.draw-runtime-meta { display:flex;align-items:center;justify-content:space-between;gap:10px;color:#77878a;font-size:9px;line-height:1.45; }
.draw-runtime-meta [data-note] { text-align:right; }
.is-lightweight .draw-stage { height:240px;min-height:240px; }
.is-lightweight .draw-current-hud,.is-lightweight .draw-stage-progress { opacity:.38; }
.is-lightweight .draw-canvas { display:none; }
.is-reduced-motion .draw-current-hud,.is-reduced-motion .draw-stage-progress i::after { transition-duration:.01ms; }

/* History/sidebar stays factual and quiet next to the broadcast stage. */
.draw-sidebar { box-shadow:none;background:color-mix(in srgb,var(--surface) 96%,var(--bg)); }
.draw-sidebar h2 { margin-top:0;font-size:16px; }
.draw-sidebar > p { line-height:1.6; }

@media(max-width:429px){
  .draw-stage { height:clamp(410px,58svh,540px);min-height:410px;border-radius:16px; }
  .draw-current-hud { top:14px;right:14px;width:52%;min-height:158px; }
  .draw-current-hud b { font-size:clamp(68px,22vw,92px); }
  .draw-stage-progress { left:14px;right:14px;bottom:12px;gap:4px; }
  .draw-rack { grid-template-columns:repeat(4,minmax(0,1fr));row-gap:12px;padding:12px 8px; }
  .draw-slot b { width:50px;height:50px;font-size:18px; }
  .draw-slot.special { grid-column:auto; }
  .draw-motion-toggle { width:100%;margin-left:0;justify-content:flex-end; }
  .draw-runtime-meta { align-items:flex-start;flex-direction:column; }
  .draw-runtime-meta [data-note] { text-align:left; }
}
@media(min-width:430px) and (max-width:599px){
  .draw-stage { height:clamp(430px,58svh,580px);min-height:430px; }
}
@media(min-width:600px) and (max-width:999px){
  .draw-stage { height:clamp(500px,58svh,650px);min-height:500px; }
  .draw-current-hud { top:26px;right:28px;width:32%;min-height:210px; }
  .draw-current-hud b { font-size:clamp(84px,13vw,112px); }
  .draw-rack { padding:14px 18px;gap:10px; }
  .draw-slot b { width:54px;height:54px;font-size:19px; }
}
@media(min-width:1000px){
  .draw-layout { grid-template-columns:minmax(230px,.34fr) minmax(0,1.66fr);gap:18px; }
  .draw-player { padding:20px; }
  .draw-stage { height:clamp(520px,58vh,660px);min-height:520px; }
  .draw-current-hud { top:34px;right:38px;width:28%;min-height:230px; }
  .draw-current-hud span { font-size:12px; }
  .draw-current-hud b { font-size:clamp(96px,8vw,128px); }
  .draw-current-hud strong { font-size:11px; }
  .draw-rack { padding:16px 20px;gap:12px; }
  .draw-slot b { width:58px;height:58px;font-size:20px; }
  .draw-slot small { font-size:9px; }
}
@media(min-width:1280px){
  .draw-stage { height:620px;min-height:620px; }
}
@media(prefers-reduced-motion:reduce){
  .draw-stage-progress i::after,.draw-current-hud b,.draw-slot b { transition-duration:.01ms!important; }
}
.live-card .lw-slot.revealed b.red { background:#c9424a;border-color:#d85a61; }
.live-card .lw-slot.revealed b.blue { background:#426bc4;border-color:#5a80d1; }
.live-card .lw-slot.revealed b.green { background:#26865e;border-color:#3b9a73; }

/* v0.7.2 global polish: reduce card nesting and make information hierarchy calmer. */
.section { margin-top: 24px; }
.section-head { margin-bottom: 12px; align-items: center; }
.section-head h2 { font-weight: 760; letter-spacing: -.035em; }
.section-head p,.section-head small { line-height: 1.5; }
.lottery-card,.metric,.insight-card,.tool-card,.heat-cell,.detail-item { border-color: color-mix(in srgb,var(--line) 75%,transparent); background: color-mix(in srgb,var(--surface) 94%,var(--surface-2)); }
.lottery-card,.tool-card,.heat-cell { transition: transform .16s ease,border-color .16s ease,background-color .16s ease; }
@media(hover:hover){
  .lottery-card:hover,.tool-card:hover { transform: translateY(-1px); border-color: color-mix(in srgb,var(--text) 16%,var(--line)); }
  .heat-cell:hover { background: var(--surface); border-color: color-mix(in srgb,var(--text) 18%,var(--line)); }
}
.draw-list { box-shadow:none; }
.draw-row { background:var(--surface); }
.draw-row:hover { background:color-mix(in srgb,var(--surface-2) 45%,var(--surface)); }
.page-title { margin-top:12px; }
.page-title h1 { font-weight:780; }
.tab-chip { background:color-mix(in srgb,var(--surface) 92%,var(--surface-2));border-color:color-mix(in srgb,var(--line) 82%,transparent); }
.tab-chip.active { box-shadow:0 7px 18px rgba(15,20,24,.08); }
.bottom-nav { box-shadow:0 -12px 28px rgba(17,24,28,.04); }
@keyframes v072ResultLock { 0%{transform:translateY(5px) scale(.88);opacity:.35} 62%{transform:translateY(-2px) scale(1.06);opacity:1} 100%{transform:translateY(-1px) scale(1);opacity:1} }
.draw-slot.just-locked b { animation:v072ResultLock .42s cubic-bezier(.2,.78,.2,1); }
@media(prefers-reduced-motion:reduce){ .draw-slot.just-locked b { animation:none!important; } }
@media(max-width:429px){
  .live-card .lw-rack { gap:4px; }
  .live-card .lw-slot b { width:34px;height:34px;font-size:13px; }
  .live-card .lw-slot small { font-size:7px; }
  .hero-v2 .balls { gap:4px; }
  .hero-v2 .ball { width:34px;height:34px; }
  .hero-v2 .ball.special { width:38px;height:38px; }
  .hero-v2 .ball-number { font-size:12px; }
  .hero-v2 .ball-zodiac { font-size:7px; }
}

/* ==========================================================================
   v0.7.2 R3 visual closure — readability, mechanical stage and broadcast polish
   ========================================================================== */
.draw-player {
  border-radius:24px;
  background:
    linear-gradient(160deg,#0b1114 0%,#111a1e 52%,#0b1114 100%);
  border-color:#253137;
  box-shadow:0 24px 68px rgba(7,14,17,.22);
}
.draw-broadcast-head { padding:4px 2px 2px; }
.draw-broadcast-title strong { font-size:17px;font-weight:760;letter-spacing:-.035em; }
.draw-kicker { color:#7f9094;letter-spacing:.16em; }
.draw-connection { padding:7px 10px;background:#ffffff0a;border-color:#ffffff13; }

.draw-stage {
  background:
    radial-gradient(circle at 48% 31%,rgba(94,133,134,.28) 0,rgba(30,52,56,.16) 28%,transparent 52%),
    radial-gradient(ellipse at 50% 100%,rgba(180,161,108,.08),transparent 43%),
    linear-gradient(180deg,#131c20 0%,#0b1215 72%,#080d0f 100%);
  border-color:#ffffff12;
  box-shadow:inset 0 1px 0 #ffffff08,inset 0 -50px 90px #00000024;
}
.draw-stage::before {
  background:
    linear-gradient(180deg,#ffffff08,transparent 19%,transparent 72%,#00000025),
    radial-gradient(circle at 50% 47%,transparent 0 42%,#00000016 78%,#0000002f 100%);
}
.draw-stage::after {
  content:"";position:absolute;z-index:1;left:12%;right:12%;bottom:-12%;height:34%;pointer-events:none;
  border-radius:50%;transform:perspective(500px) rotateX(67deg);
  background:radial-gradient(ellipse,#ffffff09 0,#ffffff03 42%,transparent 70%);
  border:1px solid #ffffff08;
}

/* Current number is a broadcast ball, not a tiny text label floating over the machine. */
.draw-current-hud {
  top:18px;right:18px;width:176px;min-height:214px;padding:14px 14px 13px;
  align-items:center;justify-content:flex-start;text-align:center;
  border:1px solid #ffffff12;border-radius:20px;
  background:linear-gradient(160deg,#10191dcf,#0d1518a8);
  box-shadow:0 16px 42px rgba(0,0,0,.22),inset 0 1px 0 #ffffff08;
  backdrop-filter:blur(12px);
}
.draw-current-hud span { color:#aebbbd;font-size:10px;letter-spacing:.08em;text-transform:none; }
.draw-current-hud b {
  width:112px;height:112px;margin-top:9px;border-radius:50%;display:grid;place-items:center;
  color:#6f7e82;background:#ffffff08;border:1px solid #ffffff10;
  font-size:48px;line-height:1;letter-spacing:-.06em;font-weight:880;
  box-shadow:inset 0 -12px 24px rgba(0,0,0,.17),0 12px 30px rgba(0,0,0,.18);
  text-shadow:none;
}
.draw-current-hud b.is-number { color:#fff;transform:none;border-color:#ffffff28; }
.draw-current-hud b.is-number.red { background:radial-gradient(circle at 35% 28%,#ec7479 0,#ca414a 42%,#9e2e36 100%);box-shadow:inset 0 -15px 24px #6f1d2538,0 14px 34px #d94b5230; }
.draw-current-hud b.is-number.blue { background:radial-gradient(circle at 35% 28%,#7597e5 0,#426bc4 42%,#2d4e9d 100%);box-shadow:inset 0 -15px 24px #1d377038,0 14px 34px #4d79d830; }
.draw-current-hud b.is-number.green { background:radial-gradient(circle at 35% 28%,#63ba8e 0,#27875f 42%,#176744 100%);box-shadow:inset 0 -15px 24px #0f4a3038,0 14px 34px #34a06f30; }
.draw-current-hud strong { margin-top:10px;max-width:150px;color:#a4b1b3;font-size:10px;line-height:1.45; }

.draw-stage-progress { z-index:4; }
.draw-stage-progress i { height:4px;background:#ffffff10; }
.draw-stage-progress i::after { background:linear-gradient(90deg,#a99460,#e0d29f); }

.draw-result-head { padding:3px 3px 0;color:#c7d0d1;font-size:11px; }
.draw-result-head small { color:#87979a; }
.draw-rack {
  position:relative;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;
  padding:14px 12px 13px;border-radius:18px;
  background:linear-gradient(180deg,#ffffff09,#ffffff05);border-color:#ffffff0f;
  box-shadow:inset 0 1px 0 #ffffff07;
}
.draw-slot { position:relative;gap:8px; }
.draw-slot b {
  width:52px;height:52px;font-size:18px;background:#ffffff08;border-color:#ffffff12;
  box-shadow:inset 0 -8px 16px rgba(0,0,0,.08);
}
.draw-slot.revealed b { border-color:#ffffff25;box-shadow:inset 0 -9px 17px rgba(0,0,0,.14),0 8px 20px rgba(0,0,0,.14); }
.draw-slot.revealed b.red { background:radial-gradient(circle at 35% 28%,#e86b72,#c9424a 48%,#a32f37); }
.draw-slot.revealed b.blue { background:radial-gradient(circle at 35% 28%,#7092dd,#426bc4 48%,#30509f); }
.draw-slot.revealed b.green { background:radial-gradient(circle at 35% 28%,#5fb486,#26865e 48%,#176947); }
.draw-slot.special { padding-left:6px; }
.draw-slot.special::before { content:"+";position:absolute;left:-7px;top:17px;color:#86979a;font-size:14px;font-weight:760; }
.draw-slot.special b { outline:1px solid #d6bd7440;outline-offset:3px; }
.draw-slot small { color:#8d9da0;font-size:9px; }

.draw-controls { padding-top:1px; }
.draw-player .primary-btn,.draw-player .secondary-btn { border-radius:13px;min-height:40px; }
.draw-player .primary-btn { background:#eeeae0;border-color:#eeeae0;color:#11191c; }
.draw-player .secondary-btn { background:#ffffff08;border-color:#ffffff14;color:#e5ebea; }
.draw-runtime-meta { padding:0 2px;color:#819194; }

@media(max-width:429px){
  .draw-player { padding:10px;border-radius:20px; }
  .draw-experience-v2 { gap:12px; }
  .draw-stage { height:clamp(430px,59svh,555px);min-height:430px;border-radius:18px; }
  .draw-current-hud { top:12px;right:12px;width:132px;min-height:172px;padding:10px 9px;border-radius:17px; }
  .draw-current-hud b { width:88px;height:88px;margin-top:7px;font-size:40px; }
  .draw-current-hud strong { margin-top:7px;font-size:9px;max-width:114px; }
  .draw-stage-progress { left:12px;right:12px;bottom:11px; }
  .draw-rack { grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 4px;padding:13px 7px 12px; }
  .draw-slot b { width:52px;height:52px;font-size:19px; }
  .draw-slot.special { padding-left:0; }
  .draw-slot.special::before { left:-3px;top:17px; }
}
@media(min-width:430px) and (max-width:599px){
  .draw-current-hud { width:148px;min-height:184px; }
  .draw-current-hud b { width:96px;height:96px;font-size:43px; }
  .draw-slot b { width:54px;height:54px;font-size:19px; }
}
@media(min-width:600px) and (max-width:999px){
  .draw-current-hud { top:24px;right:24px;width:184px;min-height:224px; }
  .draw-current-hud b { width:118px;height:118px;font-size:52px; }
  .draw-slot b { width:58px;height:58px;font-size:20px; }
}
@media(min-width:1000px){
  .draw-current-hud { top:28px;right:30px;width:196px;min-height:236px; }
  .draw-current-hud b { width:128px;height:128px;font-size:56px; }
  .draw-slot b { width:62px;height:62px;font-size:21px; }
}
@media(min-width:430px) and (max-width:599px){
  .draw-rack { grid-template-columns:repeat(4,minmax(0,1fr));gap:11px 6px;padding:14px 12px 13px; }
  .draw-slot.special { padding-left:0; }
  .draw-slot.special::before { left:-4px;top:18px; }
}
.live-card .lw-ring { border-color:#ffffff12;background:#ffffff05; }
.live-card .lw-orb { width:82px;height:82px;border-radius:50%;justify-content:center;background:#ffffff08;border:1px solid #ffffff12;box-shadow:inset 0 -10px 20px rgba(0,0,0,.12); }
.live-card .lw-orb.red { background:radial-gradient(circle at 35% 28%,#eb7379,#c9424a 48%,#9f3038);border-color:#ffffff25; }
.live-card .lw-orb.blue { background:radial-gradient(circle at 35% 28%,#7596e2,#426bc4 48%,#2f4f9e);border-color:#ffffff25; }
.live-card .lw-orb.green { background:radial-gradient(circle at 35% 28%,#62b88a,#26865e 48%,#176947);border-color:#ffffff25; }
.live-card .lw-orb b { font-size:38px;color:#f8f7f1;text-shadow:0 3px 10px rgba(0,0,0,.16); }
.live-card .lw-orb small { letter-spacing:.06em;font-size:8px; }
.live-card .lw-stage { background:radial-gradient(circle at 50% 38%,#263b3f 0,#152327 42%,#0c1417 78%); }