* { margin: 0; padding: 0; box-sizing: border-box; }

/* ── 主题变量 ── */
:root {
    --bg-page: #f5f0e8;
    --bg-card: #fdf8f0;
    --bg-card-alt: #f8f3ea;
    --text-primary: #3d3428;
    --text-secondary: #6b5e4f;
    --text-muted: #9a8d7e;
    --border-color: #e8dfd2;
    --border-light: #f0e9de;
    --input-bg: #fdf8f0;
    --input-border: #ddd3c4;
    --hover-bg: #fef5e6;
    --shadow-card: 0 15px 30px rgba(80,60,20,0.08);
    --modal-bg: #fdf8f0;
    --toast-bg: #fdf8f0;
}
:root[data-theme="dark"] {
    --bg-page: #1a1a2e;
    --bg-card: #16213e;
    --bg-card-alt: #1a1a40;
    --text-primary: #eee;
    --text-secondary: #ccc;
    --text-muted: #888;
    --border-color: #2a2a4a;
    --border-light: #1e1e3a;
    --input-bg: #1a1a2e;
    --input-border: #333;
    --hover-bg: rgba(250,142,25,0.08);
    --shadow-card: 0 15px 30px rgba(0,0,0,0.3);
    --modal-bg: #16213e;
    --toast-bg: #16213e;
}

body { font-family: Tahoma, "微软雅黑", "Microsoft YaHei", sans-serif; background: var(--bg-page); color: var(--text-primary); min-height: 100vh; font-size: 14px; transition: background 0.3s, color 0.3s; }

/* ── 全局自定义滚动条 ── */
* { scrollbar-width: thin; scrollbar-color: rgba(150,150,150,0.3) transparent; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(150,150,150,0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(150,150,150,0.5); }
[data-theme="dark"] * { scrollbar-color: rgba(120,140,170,0.3) transparent; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(120,140,170,0.3); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(120,140,170,0.5); }
a { color: #fa8e19; text-decoration: none; }
a:hover { color: #f44a07; }

/* ── 主题切换按钮 ── */
.theme-toggle {
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 5px 10px;
    border-radius: 6px;
    background: rgba(255,255,255,0.25);
    border: 1px solid rgba(255,255,255,0.4);
    color: #fff;
    transition: background 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
}
.theme-toggle:hover { background: rgba(255,255,255,0.4); }

/* ── Header ── */
.header { background: #fa8e19; padding: 0 20px; }
.header .container { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; height: 60px; }
.header .logo { font-size: 22px; font-weight: bold; color: #fff; margin-right: 30px; letter-spacing: 2px; }
.header .logo span { color: #ffe082; }
.header nav { display: flex; align-items: center; }
.header nav a { color: rgba(255,255,255,0.85); margin: 0 14px; font-size: 15px; padding: 8px 0; border-bottom: 2px solid transparent; transition: all 0.2s; }
.header nav a:hover, .header nav a.active { color: #fff; border-bottom-color: #fff; }
.header .user-area { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.header .user-area a { color: #fff; font-size: 14px; }
.header .user-area .balance { color: #ffe082; font-weight: bold; }

/* ── Banner ── */
.banner { background: linear-gradient(135deg, #f5a623, #e87d0d); padding: 45px 20px; text-align: center; }
.banner h1 { font-size: 32px; color: #fff; margin-bottom: 10px; text-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.banner p { color: rgba(255,255,255,0.85); font-size: 15px; }

/* ── Notice Bar ── */
.notice-bar { background: var(--bg-card); padding: 10px 20px; border-bottom: 1px solid var(--border-color); }
.notice-bar .tag { background: #de0846; color: #fff; padding: 3px 10px; border-radius: 3px; font-size: 12px; margin-right: 15px; white-space: nowrap; }
.notice-bar .text { color: var(--text-secondary); font-size: 13px; overflow: hidden; white-space: nowrap; }

/* ── Container ── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ── Section Title ── */
.section-title { font-size: 20px; color: var(--text-primary); margin: 25px 0 18px; padding-left: 12px; border-left: 4px solid #fa8e19; }

/* ── Game Cards ── */
.game-grid { display: grid; gap: 18px; margin-bottom: 30px; }
.game-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 6px; padding: 28px 20px; text-align: center; cursor: pointer; transition: all 0.3s; }
.game-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: #fa8e19; z-index: 2; }
.game-card .icon { font-size: 44px; margin-bottom: 12px; }
.game-card h3 { font-size: 18px; margin-bottom: 6px; color: var(--text-primary); }
.game-card p { color: var(--text-muted); font-size: 12px; }
.game-card .status { display: inline-block; margin-top: 10px; padding: 3px 14px; border-radius: 3px; font-size: 12px; }
.game-card .status.live { background: #de0846; color: #fff; }

/* ── Draw Results (Index) ── */
.draw-results { background: var(--bg-card); border-radius: 6px; padding: 18px; margin: 16px 0; border: 1px solid var(--border-color); }
.draw-results h3 { color: var(--text-primary); margin-bottom: 12px; font-size: 16px; }
.draw-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 6px 0; border-bottom: 1px solid var(--border-light); }
.draw-row .issue-label { color: var(--text-muted); font-size: 12px; width: 100px; }

/* ── Balls ── */
.ball {
    display: inline-flex; width: 42px; height: 42px; border-radius: 50%;
    align-items: center; justify-content: center;
    font-weight: bold; font-size: 16px; color: #fffbe6; margin: 0 2px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    box-shadow: inset 0 -3px 6px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);
    position: relative; overflow: hidden;
}
.ball.red { background: radial-gradient(circle at 35% 30%, #ff9e9e, #d94040 50%, #b02e2e); }
.ball.blue { background: radial-gradient(circle at 35% 30%, #7ba4f0, #2a5cc8 50%, #1a4aaa); }
.ball.green { background: radial-gradient(circle at 35% 30%, #6de0a0, #1a9e55 50%, #0e7a40); }
.ball.special { border: 2px solid #fa8e19; box-shadow: inset 0 -3px 6px rgba(0,0,0,0.25), 0 0 8px rgba(250,142,25,0.5); }
.ball + .plus { color: #de0846; font-size: 16px; margin: 0 4px; font-weight: bold; }

/* ── Ball rolling animation ── */
.ball.rolling {
    overflow: hidden;
}
.ball.rolling .roll-strip {
    display: flex; flex-direction: column; align-items: center;
    animation: rollNumbers 0.3s linear infinite;
}
.ball.rolling .roll-strip span {
    height: 42px; line-height: 42px; flex-shrink: 0;
    color: #fffbe6; text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
@keyframes rollNumbers {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-420px); }
}

/* ── Features ── */
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 25px 0 40px; }
.feature-item { background: var(--bg-card); border-radius: 6px; padding: 25px; text-align: center; border: 1px solid var(--border-color); transition: box-shadow 0.3s; }
.feature-item:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
.feature-item .icon { font-size: 36px; margin-bottom: 10px; }
.feature-item h4 { color: #fa8e19; margin-bottom: 8px; }
.feature-item p { color: var(--text-muted); font-size: 12px; }

/* ── Footer ── */
.footer { background: #3d3428; padding: 20px; text-align: center; color: #a89880; font-size: 13px; margin-top: 0; }

/* ── Auth Modal ── */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 2000; justify-content: center; align-items: center; }
.modal-overlay.active { display: flex; }
.modal { background: var(--modal-bg); border-radius: 8px; padding: 30px; width: 380px; box-shadow: 0 18px 30px rgba(0,0,0,0.18); }
.modal h2 { color: var(--text-primary); margin-bottom: 20px; text-align: center; font-size: 20px; }
.modal input { width: 100%; padding: 12px; margin-bottom: 12px; border: 1px solid var(--input-border); border-radius: 4px; background: var(--input-bg); color: var(--text-primary); font-size: 14px; }
.modal input:focus { outline: none; border-color: #fa8e19; }
.modal .btn { width: 100%; padding: 12px; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; margin-bottom: 8px; }
.btn-primary { background: #de0846; color: #fff; }
.btn-primary:hover { background: #c60740; }
.btn-secondary { background: var(--bg-card-alt); color: var(--text-secondary); }
.btn-secondary:hover { opacity: 0.85; }
.modal .switch { text-align: center; color: var(--text-muted); font-size: 13px; margin-top: 10px; }

/* ── Toast ── */
.toast { position: fixed; top: 20px; right: 20px; background: var(--toast-bg); border-left: 4px solid #fa8e19; padding: 15px 25px; border-radius: 4px; color: var(--text-primary); z-index: 9999; display: none; box-shadow: 0 4px 12px rgba(0,0,0,0.15); animation: slideIn 0.3s ease; }
.toast.error { border-left-color: #de0846; }
.toast.success { border-left-color: #0b924a; }
@keyframes slideIn { from { transform: translateX(100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ── Dark mode 柔和色调 ── */
[data-theme="dark"] a { color: #7ab0d0; }
[data-theme="dark"] a:hover { color: #9ac8e0; }
[data-theme="dark"] .header { background: #1a2a4a; }
[data-theme="dark"] .header .logo span { color: #7ab0d0; }
[data-theme="dark"] .banner { background: linear-gradient(135deg, #1a2a4a, #16213e); }
[data-theme="dark"] .notice-bar .tag { background: #8a3a50; }
[data-theme="dark"] .section-title { border-left-color: #2d6a8a; }
[data-theme="dark"] .game-card:hover { border-color: #2d6a8a; }
[data-theme="dark"] .game-card .status.live { background: #8a3a50; }
[data-theme="dark"] .ball.special { border-color: #7ab0d0; box-shadow: inset 0 -3px 6px rgba(0,0,0,0.25), 0 0 8px rgba(122,176,208,0.4); }
[data-theme="dark"] .ball + .plus { color: #d4a0b0; }
[data-theme="dark"] .feature-item h4 { color: #7ab0d0; }
[data-theme="dark"] .modal input:focus { border-color: #7ab0d0; }
[data-theme="dark"] .btn-primary { background: #2d6a8a; }
[data-theme="dark"] .btn-primary:hover { background: #3a8ab0; }
[data-theme="dark"] .toast { border-left-color: #2d6a8a; }
[data-theme="dark"] .toast.error { border-left-color: #8a3a50; }

/* ── Draw info bar dark ── */
[data-theme="dark"] .draw-info-bar { background: #16213e; }

@media (max-width: 768px) {
    .game-grid { grid-template-columns: 1fr !important; }
    .features { grid-template-columns: repeat(2, 1fr); }
}