:root {
  --bg: #0b1220;
  --bg2: #0f1a2b;
  --text: #e6e6e6;
  --muted: #9aa4b2;
  --accent-gold: #d4af37;
  --accent-gold-2: #b9932f;
  --accent-neon: #2dd4ff;
  --accent-neon-2: #0ea5e9;
  --card-bg: #111827;
  --card-border: #1f2937;
  --shadow: rgba(0,0,0,0.35);
}

body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 0; background: radial-gradient(1200px 600px at 50% -200px, #10203a 0%, var(--bg) 45%, #070d18 100%); color: var(--text); }
header { background: linear-gradient(180deg, #0e1b2d 0%, #0b1425 100%); color: var(--text); padding: 18px; border-bottom: 1px solid rgba(212,175,55,0.25); box-shadow: 0 6px 24px var(--shadow); }
header h1 { margin: 0; letter-spacing: 0.5px; color: var(--accent-gold); text-shadow: 0 0 6px rgba(212,175,55,0.35); }
main { padding: 20px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; align-items: stretch; }
.card { display: block; padding: 18px; background: linear-gradient(180deg, var(--card-bg) 0%, #0d1626 100%); border-radius: 12px; text-decoration: none; color: var(--text); border: 1px solid var(--card-border); box-shadow: 0 8px 24px var(--shadow); text-align:center; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(14,165,233,0.35), 0 6px 18px var(--shadow); border-color: var(--accent-neon-2); text-shadow: 0 0 8px rgba(45,212,255,0.6); }
form { background: linear-gradient(180deg, var(--card-bg) 0%, #0d1626 100%); padding: 16px; border-radius: 12px; box-shadow: 0 8px 24px var(--shadow); max-width: 560px; border: 1px solid var(--card-border); color: var(--text); }
label { display:block; margin: 8px 0 4px; color: var(--muted); }
input, select { width: 100%; padding: 10px; box-sizing: border-box; border-radius: 8px; background: #0a1322; border: 1px solid #1f2a3a; color: var(--text); outline: none; }
input::placeholder { color: #718096; }
select { appearance: none; }
input:focus, select:focus { border-color: var(--accent-neon-2); box-shadow: 0 0 0 3px rgba(14,165,233,0.2); }
button { margin-top: 12px; padding: 10px 16px; background: linear-gradient(180deg, var(--accent-gold) 0%, var(--accent-gold-2) 100%); color:#0b0b0b; border:none; border-radius: 8px; cursor:pointer; box-shadow: 0 6px 18px rgba(212,175,55,0.35); font-weight: 600; }
button:hover { filter: brightness(1.08); box-shadow: 0 10px 28px rgba(212,175,55,0.5); }
.msg { margin-top: 12px; color: var(--muted); }
.header-actions { float: right; }
.header-actions select { padding: 6px 8px; border-radius: 8px; border: 1px solid #243042; background: #0a1322; color: var(--text); }
.balls-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(36px, 1fr)); gap: 8px; max-width: 560px; margin: 12px 0; }
.ball { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; user-select: none; border: 2px solid #2a3648; background: #0f1a2b; color: var(--text); transition: transform .14s ease, box-shadow .14s ease; position: relative; overflow: hidden; }
.ball.red { border-color: #e74c3c; color: #e74c3c; }
.ball.blue { border-color: var(--accent-neon-2); color: var(--accent-neon-2); }
.ball.digit { border-color: #6c757d; color: #bfc6cf; }
.ball.selected { background: currentColor; color: #0a0a0a; box-shadow: 0 0 12px currentColor; transform: scale(1.04); }
.pos-group { margin-bottom: 12px; }
.pos-title { margin-bottom: 6px; font-weight: 600; color: var(--text); }

/* 3D ball styling and animations */
.ball-3d { background: radial-gradient(120% 120% at 30% 30%, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.06) 20%, rgba(255,255,255,0.02) 38%, transparent 60%), linear-gradient(180deg, #0f1a2b 0%, #0a1322 100%); box-shadow: inset 0 4px 8px rgba(255,255,255,0.06), inset 0 -6px 12px rgba(0,0,0,0.35), 0 6px 14px rgba(0,0,0,0.45); }
.ball-3d::after { content:''; position:absolute; top:6px; left:8px; width:12px; height:6px; border-radius:50%; background: rgba(255,255,255,0.18); filter: blur(1px); }

@keyframes spin3d { 0% { transform: rotateY(0deg) rotateX(0deg); } 50% { transform: rotateY(180deg) rotateX(12deg); } 100% { transform: rotateY(360deg) rotateX(0deg); } }
@keyframes bounceIn { 0% { transform: translateY(-10px) scale(0.9); } 60% { transform: translateY(4px) scale(1.08); } 100% { transform: translateY(0) scale(1.0); } }
@keyframes glowPulse { 0% { box-shadow: 0 0 0 rgba(0,0,0,0); } 50% { box-shadow: 0 0 14px currentColor; } 100% { box-shadow: 0 0 0 rgba(0,0,0,0); } }

.spin { animation: spin3d 0.7s ease-in-out both; }
.bounce { animation: bounceIn 0.28s ease-out both; }
.glow { animation: glowPulse 0.9s ease-in-out 1; }

.reveal-wrap { padding: 8px; border: 1px solid var(--card-border); border-radius: 10px; background: linear-gradient(180deg, #0b1425 0%, #0f1a2b 100%); box-shadow: 0 8px 24px var(--shadow); }

/* Ticket preview */
.ticket { display:none; background:#fff; color:#000; padding:10px; font-size:14px; border:1px dashed #999; width:336px; line-height:1.6; }
.ticket h3 { margin:0 0 6px; font-size:17px; text-align:center; }
.ticket .row { display:flex; justify-content:space-between; }
.ticket .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.ticket hr { border:none; border-top:1px dashed #ccc; margin:6px 0; }
.ticket .qr img { width:144px; height:144px; }

/* Print preview overlay */
.preview-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display:flex; align-items:center; justify-content:center; z-index: 9999; }
.preview-modal { background:#0f1a2b; color: var(--text); padding:12px; border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,0.5); border:1px solid var(--card-border); width:408px; }
.preview-modal h3 { margin:0 0 8px; font-size:16px; color: var(--accent-gold); }
.preview-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }
.preview-actions button { background:#1f2a3a; color: var(--text); }
.preview-actions button.primary { background: linear-gradient(180deg, var(--accent-neon) 0%, var(--accent-neon-2) 100%); color:#041018; }

@media print {
  /* Only print ticket */
  body *:not(.ticket):not(.ticket *) { display: none !important; }
  body { background: #fff; }
  .ticket { display:block !important; width:58mm; margin:0; font-size:14px; line-height:1.6; }
}
/* 管理员后台板块导航 */
.panel-nav { display:flex; gap:8px; flex-wrap:wrap; }
.panel-nav button { padding:6px 10px; border:1px solid #ccc; background:#f7f7f7; cursor:pointer; }
.panel-nav button.active { background:#2775ff; color:#fff; border-color:#2775ff; }

/* 统计汇总子导航与概览样式 */
.panel-subnav { display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 12px; }
.panel-subnav button { padding:6px 10px; border:1px solid #ccc; background:#f0f0f0; cursor:pointer; border-radius:6px; }
.panel-subnav button.active { background:#1e90ff; color:#fff; border-color:#1e90ff; }
.stats-overview-cards { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.stat-card { flex:1 1 160px; background:#f7f7f7; color:#222; border:1px solid #ddd; border-radius:10px; padding:12px; box-shadow:0 2px 8px rgba(0,0,0,0.08); }
.stat-card .stat-label { font-size:12px; color:#666; }
.stat-card .stat-value { font-size:20px; font-weight:700; margin-top:6px; }

/* Rules module visuals */
.rules-body { padding: 8px 10px; }
.rules-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.rules-table th, .rules-table td { border: 1px solid var(--card-border); padding: 6px 8px; text-align: left; }
.rules-table th.odds, .rules-table td.odds { text-align: right; white-space: nowrap; }
.rules-visual { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.balls-grid.small { grid-template-columns: repeat(auto-fit, minmax(28px, 1fr)); gap: 6px; max-width: 360px; }
.balls-grid.small .ball { width: 28px; height: 28px; font-size: 12px; }
.pos-axis { display: flex; align-items: center; gap: 6px; }
.pos-axis .connector { width: 24px; height: 2px; background: #2a3648; border-radius: 2px; }
.legend { font-size: 12px; color: var(--muted); }

/* 首页宣传 Hero */
.hero { position: relative; padding: 28px 20px; border-radius: 16px; background: linear-gradient(180deg, rgba(10,19,34,0.8) 0%, rgba(15,26,43,0.9) 100%); border: 1px solid rgba(212,175,55,0.25); box-shadow: 0 12px 40px rgba(0,0,0,0.45); overflow: hidden; display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; align-items: center; }
.hero::before { content:""; position:absolute; inset:-40% -20% auto -20%; height: 120%; background: radial-gradient(600px 300px at 30% 30%, rgba(45,212,255,0.18) 0%, rgba(14,165,233,0.06) 35%, transparent 70%); filter: blur(26px); pointer-events:none; }
.hero-content h2 { margin:0; font-size: 28px; color: var(--accent-gold); text-shadow: 0 0 10px rgba(212,175,55,0.45); }
.hero-content p { margin:8px 0 12px; color: var(--muted); font-size: 15px; }
.hero-points { display:flex; gap:10px; flex-wrap: wrap; margin: 8px 0 12px; }
.hero-points .pill { padding:6px 10px; border:1px solid var(--card-border); background:#0a1322; border-radius: 999px; font-size: 12px; color:#b7c3d1; }
.hero-cta { display:flex; gap:10px; flex-wrap:wrap; }
.hero-cta a { padding:10px 14px; border-radius:10px; text-decoration:none; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,0.35); }
.hero-cta a.primary { background: linear-gradient(180deg, var(--accent-neon) 0%, var(--accent-neon-2) 100%); color:#06131f; border:1px solid rgba(14,165,233,0.35); }
.hero-cta a.secondary { background: linear-gradient(180deg, var(--card-bg) 0%, #0d1626 100%); color: var(--text); border:1px solid var(--card-border); }
.hero-visual { position: relative; min-height: 260px; display:flex; align-items:center; justify-content:center; }
/* 数字瀑布 */
.hero-rain { position:absolute; inset:0; display:grid; grid-template-columns: repeat(10, 1fr); opacity: 0.85; }
.rain-col { position:relative; overflow:hidden; }
.rain-col .digit { position:absolute; top:-40px; left:50%; transform: translateX(-50%); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 14px; color: rgba(255,255,255,0.55); text-shadow: 0 0 8px rgba(14,165,233,0.35); animation: rainScroll 4.5s linear infinite; animation-play-state: paused; }
.hero-visual.in-view .rain-col .digit { animation-play-state: running; }
@keyframes rainScroll { 0% { transform: translate(-50%, -40px); opacity: 0; } 10% { opacity: 0.8; } 50% { transform: translate(-50%, 140px); opacity: 0.8; } 90% { opacity: 0.2; } 100% { transform: translate(-50%, 320px); opacity: 0; } }

/* 收束与落位区域 */
.hero-converge { position:absolute; width: 360px; height: 200px; display:flex; align-items:center; justify-content:center; flex-wrap: wrap; gap: 8px; pointer-events:none; }
.hero-converge .ball { position:relative; margin: 0 0; width: 32px; height: 32px; font-size: 13px; }
.hero-spot { position:absolute; width: 320px; height: 320px; border-radius:50%; background: radial-gradient(160px 160px at 50% 50%, rgba(212,175,55,0.28) 0%, rgba(212,175,55,0.06) 40%, transparent 70%); filter: blur(10px); animation: pulseSpot 6s ease-in-out infinite; }

/* Hero particles sweep layer */
.hero-particles { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.hero-particles .particle { position:absolute; width:6px; height:6px; border-radius:50%; background: radial-gradient(6px 6px at 50% 50%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.35) 50%, transparent 100%); filter: blur(0.4px); opacity: 0.8; animation: drift 8s linear infinite; }
@keyframes drift { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 0.8; } 50% { transform: translate(40px, -20px); } 90% { opacity: 0.2; } 100% { transform: translate(80px, -40px); opacity: 0; } }

.hero-cta a.tertiary { background: transparent; color: var(--muted); border:1px dashed var(--card-border); }

/* Blue-Gold theme option */
.theme-blue-gold {
  --bg: #0a1020;
  --bg2: #0d1730;
  --text: #eaf2ff;
  --muted: #a8b5c9;
  --accent-gold: #e6c65b;
  --accent-gold-2: #c9aa48;
  --accent-neon: #3b82f6;
  --accent-neon-2: #0ea5e9;
  --card-bg: #0c1326;
  --card-border: #18243a;
}
/* 深蓝/钛金主题 */
.theme-deep-titanium {
  --bg: #0a1222;
  --bg2: #0c1628;
  --text: #e8eaf0;
  --muted: #9aa4b2;
  --accent-gold: #c9b26a; /* 钛金柔光 */
  --accent-gold-2: #b39b54;
  --accent-neon: #4fb6ff; /* 深蓝系高光 */
  --accent-neon-2: #1f8fff;
  --card-bg: #0e1626;
  --card-border: #1f2a3a;
}
.theme-deep-titanium header h1 { color: var(--accent-gold); text-shadow: 0 0 8px rgba(201,178,106,0.35); }
.theme-deep-titanium .hero-content h2 { color: var(--accent-gold); text-shadow: 0 0 12px rgba(201,178,106,0.45); }
.theme-deep-titanium .hero-spot { background: radial-gradient(160px 160px at 50% 50%, rgba(79,182,255,0.22) 0%, rgba(79,182,255,0.06) 40%, transparent 70%); }
.theme-deep-titanium .hero-converge .ball.gold { color: var(--accent-gold); border-color: var(--accent-gold); }

/* 黑曜/青蓝主题 */
.theme-obsidian-cyan {
  --bg: #060b14;
  --bg2: #0a1322;
  --text: #e6f6ff;
  --muted: #9cc3d6;
  --accent-gold: #63e6ff; /* 用青蓝作主高光 */
  --accent-gold-2: #2dd4ff;
  --accent-neon: #88f2ff;
  --accent-neon-2: #36c6ff;
  --card-bg: #0a1424;
  --card-border: #122035;
}
.theme-obsidian-cyan header h1 { color: var(--accent-neon-2); text-shadow: 0 0 10px rgba(54,198,255,0.5); }
.theme-obsidian-cyan .hero-content h2 { color: var(--accent-neon-2); text-shadow: 0 0 12px rgba(54,198,255,0.5); }
.theme-obsidian-cyan .hero-spot { background: radial-gradient(160px 160px at 50% 50%, rgba(136,242,255,0.26) 0%, rgba(136,242,255,0.08) 40%, transparent 70%); }
.theme-obsidian-cyan .hero-converge .ball.gold { color: var(--accent-neon-2); border-color: var(--accent-neon-2); }
.theme-blue-gold header h1 { color: var(--accent-neon-2); text-shadow: 0 0 8px rgba(14,165,233,0.45); }
.theme-blue-gold .hero-content h2 { color: var(--accent-neon-2); text-shadow: 0 0 10px rgba(14,165,233,0.45); }
.theme-blue-gold .hero-converge .ball.gold { color: var(--accent-neon-2); border-color: var(--accent-neon-2); }
.theme-blue-gold .hero-spot { background: radial-gradient(160px 160px at 50% 50%, rgba(14,165,233,0.28) 0%, rgba(14,165,233,0.06) 40%, transparent 70%); }

@keyframes rotate360 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pulseSpot { 0% { transform: scale(0.95); opacity: 0.85; } 50% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(0.95); opacity: 0.85; } }

/* 扫码核验弹窗 */
.scan-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display:flex; align-items:center; justify-content:center; z-index: 9999; }
.scan-modal { background:#0f1a2b; color: var(--text); padding:12px; border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,0.5); border:1px solid var(--card-border); width: 480px; max-width: 90vw; }
.scan-modal h3 { margin:0 0 8px; font-size:16px; color: var(--accent-gold); }
.scan-video { width:100%; height: 280px; background:#000; border-radius:10px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.scan-video video { width:100%; height:100%; object-fit: cover; }
.scan-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }
.scan-actions button { background:#1f2a3a; color: var(--text); }
.scan-actions button.primary { background: linear-gradient(180deg, var(--accent-neon) 0%, var(--accent-neon-2) 100%); color:#041018; }

@media (max-width: 900px){ .hero { grid-template-columns: 1fr; } .hero-visual { min-height: 180px; } }