:root {
  --bg: #f2f4f6;
  --panel: #ffffff;
  --text: #1f272e;
  --muted: #6b7780;
  --line: #dfe4e8;
  --red: #d7273d;
  --red-dark: #b8172d;
  --gold: #efb92f;
  --teal: #178d89;
  --charcoal: #17191d;
  --sidebar: #20252a;
  --shadow: 0 12px 30px rgba(31, 39, 46, 0.08);
}

* { box-sizing: border-box; letter-spacing: 0; }
html, body { min-width: 1180px; min-height: 100%; margin: 0; }
body { color: var(--text); background: var(--bg); font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
[hidden] { display: none !important; }

#confetti-canvas { position: fixed; z-index: 100; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.app-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; padding: 24px 16px 18px; color: #fff; background: var(--sidebar); }
.brand { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 9px 22px; border-bottom: 1px solid rgba(255,255,255,.1); }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 6px; color: #27231a; background: var(--gold); font-size: 21px; font-weight: 900; }
.brand strong, .brand span { display: block; }
.brand strong { font-size: 18px; }
.brand span { margin-top: 3px; color: #aeb7bf; font-size: 12px; }
.main-nav { display: grid; gap: 7px; margin-top: 25px; }
.nav-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 14px; border: 0; border-radius: 5px; color: #bac3ca; background: transparent; text-align: left; }
.nav-item svg { width: 19px; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.07); }
.nav-item.active { color: #fff; background: var(--red); font-weight: 700; }
.sidebar-meta { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 14px 10px; border-top: 1px solid rgba(255,255,255,.1); }
.sidebar-meta strong, .sidebar-meta span { display: block; }
.sidebar-meta strong { font-size: 13px; }
.sidebar-meta span { margin-top: 3px; color: #9faab3; font-size: 11px; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #45c897; box-shadow: 0 0 0 4px rgba(69,200,151,.13); }

.workspace { min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; height: 84px; padding: 0 32px; border-bottom: 1px solid var(--line); background: #fff; }
.topbar h1 { margin: 3px 0 0; font-size: 23px; }
.eyebrow { margin: 0; color: var(--red); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.topbar time { margin-right: 10px; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.content { padding: 24px 32px 36px; }
.view { min-height: calc(100vh - 144px); }

.icon-button { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 5px; color: #53606a; background: #fff; }
.icon-button:hover { border-color: #aeb8bf; color: var(--text); }
.icon-button svg { width: 18px; }
.primary-button, .secondary-button, .danger-button, .text-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 16px; border-radius: 5px; font-weight: 700; }
.primary-button { border: 1px solid var(--red); color: #fff; background: var(--red); }
.primary-button:hover { border-color: var(--red-dark); background: var(--red-dark); }
.secondary-button { border: 1px solid #ccd3d8; color: #44515a; background: #fff; }
.secondary-button:hover { border-color: #9da9b1; color: var(--text); }
.danger-button { border: 1px solid var(--red); color: #fff; background: var(--red); }
.text-button { padding: 0; border: 0; color: var(--red); background: transparent; }
.primary-button svg, .secondary-button svg, .text-button svg { width: 17px; }

.lottery-stage { position: relative; display: grid; grid-template-rows: auto minmax(350px, 1fr) auto; min-height: calc(100vh - 208px); overflow: hidden; border-radius: 6px; color: #fff; background: var(--charcoal); box-shadow: var(--shadow); }
.lottery-stage::before { position: absolute; inset: 0; content: ""; opacity: .3; background-image: repeating-linear-gradient(135deg, transparent 0, transparent 22px, rgba(255,255,255,.025) 22px, rgba(255,255,255,.025) 23px); pointer-events: none; }
.lottery-stage::after { position: absolute; top: 0; right: 0; left: 0; height: 4px; content: ""; background: linear-gradient(90deg, var(--red) 0 45%, var(--gold) 45% 72%, var(--teal) 72% 100%); }
.stage-topline, .stage-actions, .draw-display { position: relative; z-index: 1; }
.stage-topline { display: flex; justify-content: space-between; gap: 24px; padding: 34px 40px 20px; }
.stage-kicker { color: var(--gold); font-size: 12px; font-weight: 900; }
.stage-topline h2 { margin: 8px 0 5px; font-size: 31px; }
.stage-topline p { margin: 0; color: #b8c0c6; }
.stage-stats { display: flex; align-items: center; gap: 12px; }
.stage-stats div { min-width: 110px; padding: 11px 16px; border: 1px solid rgba(255,255,255,.14); border-radius: 5px; background: rgba(255,255,255,.04); }
.stage-stats span, .stage-stats strong { display: block; }
.stage-stats span { color: #aeb7bd; font-size: 12px; }
.stage-stats strong { margin-top: 3px; color: var(--gold); font-size: 24px; }
.draw-display { display: grid; place-items: center; min-height: 350px; padding: 18px 40px; }
.idle-state { display: grid; justify-items: center; gap: 10px; }
.lucky-seal { display: grid; place-items: center; width: 88px; height: 88px; border: 2px solid var(--gold); border-radius: 50%; color: var(--gold); background: #202126; box-shadow: 0 0 0 12px rgba(239,185,47,.07); }
.lucky-seal svg { width: 38px; height: 38px; }
.idle-state strong { margin-top: 12px; font-size: 27px; }
.idle-state span { color: #9da7ae; }
.name-stream { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; width: min(980px, 100%); }
.stream-name { display: grid; place-items: center; min-height: 64px; padding: 10px; border: 1px solid rgba(255,255,255,.13); border-radius: 5px; color: #d6dce0; background: #202328; text-align: center; font-size: 16px; font-weight: 700; }
.stream-name.hot { border-color: var(--gold); color: #2e2614; background: var(--gold); transform: scale(1.03); }
.winner-reveal { width: min(1100px, 100%); text-align: center; }
.winner-heading span { color: var(--gold); font-size: 12px; font-weight: 900; }
.winner-heading h3 { margin: 5px 0 20px; font-size: 32px; }
.winner-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.winner-card { position: relative; display: grid; place-items: center; min-height: 150px; padding: 20px 13px; overflow: hidden; border: 1px solid rgba(239,185,47,.7); border-radius: 6px; color: #2a251a; background: #fff8df; opacity: 0; transform: translateY(18px) scale(.94); }
.winner-card.revealed { animation: reveal-winner .48s ease forwards; }
.winner-card::before { position: absolute; top: 0; right: 0; left: 0; height: 5px; content: ""; background: var(--gold); }
.winner-card small { color: #9a7011; font-weight: 800; }
.winner-card strong { margin-top: 10px; overflow-wrap: anywhere; font-size: 19px; line-height: 1.45; }
@keyframes reveal-winner { to { opacity: 1; transform: translateY(0) scale(1); } }
.stage-actions { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 20px 40px 34px; }
.stage-actions p { position: absolute; left: 40px; margin: 0; color: #98a2aa; font-size: 13px; }
.stage-actions p strong { color: #fff; }
.draw-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 200px; height: 56px; border: 0; border-radius: 6px; color: #fff; background: var(--red); box-shadow: 0 10px 22px rgba(215,39,61,.26); font-size: 18px; font-weight: 900; }
.draw-button:hover { background: #eb2c43; transform: translateY(-1px); }
.draw-button.stop { color: #302714; background: var(--gold); box-shadow: 0 10px 22px rgba(239,185,47,.2); }
.draw-button svg { width: 21px; }
.ghost-stage-button { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 1px solid rgba(255,255,255,.25); border-radius: 5px; color: #fff; background: transparent; }
.ghost-stage-button:hover { background: rgba(255,255,255,.08); }
.ghost-stage-button svg { width: 17px; }
.lottery-footer-strip { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 28px; min-height: 72px; padding: 12px 22px; border: 1px solid var(--line); border-top: 0; background: #fff; }
.lottery-footer-strip div span, .lottery-footer-strip div strong { display: block; }
.lottery-footer-strip div span { color: var(--muted); font-size: 12px; }
.lottery-footer-strip div strong { margin-top: 4px; font-size: 14px; }

.section-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.section-toolbar h2 { margin: 0; font-size: 23px; }
.section-toolbar p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.toolbar-actions { display: flex; gap: 9px; }
.summary-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.metric { padding: 20px 22px; border: 1px solid var(--line); border-top: 3px solid #778690; border-radius: 6px; background: #fff; }
.metric.accent { border-top-color: var(--teal); }
.metric.warm { border-top-color: var(--gold); }
.metric span, .metric strong, .metric em { display: block; }
.metric span { color: var(--muted); font-size: 13px; }
.metric strong { margin: 8px 0 4px; font-size: 29px; }
.metric em { color: #99a2a8; font-size: 12px; font-style: normal; }
.table-panel { border: 1px solid var(--line); border-radius: 6px; background: #fff; box-shadow: 0 8px 22px rgba(31,39,46,.04); }
.table-filter { display: flex; align-items: end; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--line); background: #fafbfc; }
.table-filter label:not(.search-field) { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.table-filter select { min-width: 132px; height: 38px; padding: 0 10px; border: 1px solid #ccd4d9; border-radius: 4px; color: var(--text); background: #fff; }
.search-field { display: flex; align-items: center; width: 300px; height: 38px; padding: 0 11px; border: 1px solid #ccd4d9; border-radius: 4px; background: #fff; }
.search-field:focus-within { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(23,141,137,.12); }
.search-field svg { width: 17px; color: #8e9aa2; }
.search-field input { flex: 1; min-width: 0; height: 100%; margin-left: 8px; border: 0; outline: 0; }
.table-filter .secondary-button { margin-left: auto; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
th, td { padding: 14px 16px; border-bottom: 1px solid #e8ecef; color: #4b5861; text-align: left; font-size: 13px; overflow-wrap: anywhere; }
th { color: #33414a; background: #f5f7f8; font-weight: 800; }
tbody tr:hover { background: #fbfcfd; }
.align-right { text-align: right; }
.row-actions { display: flex; justify-content: flex-end; gap: 7px; }
.row-action { height: 30px; padding: 0 9px; border: 1px solid #ccd5da; border-radius: 4px; color: #52616a; background: #fff; font-size: 12px; }
.row-action:hover { border-color: var(--teal); color: var(--teal); }
.row-action.danger:hover { border-color: var(--red); color: var(--red); }
.status-badge { display: inline-flex; align-items: center; gap: 6px; min-width: 68px; padding: 4px 8px; border-radius: 4px; color: #13706d; background: #e5f5f3; font-size: 12px; font-weight: 700; }
.status-badge::before { width: 6px; height: 6px; border-radius: 50%; content: ""; background: var(--teal); }
.status-badge.disabled { color: #7a858c; background: #eef1f3; }
.status-badge.disabled::before { background: #8c989f; }
.table-empty { padding: 60px 20px; color: var(--muted); text-align: center; }

.record-list { display: grid; gap: 12px; padding: 18px; }
.record-item { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(340px, 1.7fr) 140px 160px; align-items: center; gap: 18px; padding: 18px; border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 5px; }
.record-item.void { border-left-color: #9ba5ab; background: #fafbfb; opacity: .72; }
.record-meta strong, .record-meta span { display: block; }
.record-meta span { margin-top: 5px; color: var(--muted); font-size: 12px; }
.record-winners { display: flex; flex-wrap: wrap; gap: 7px; }
.winner-tag { padding: 5px 8px; border-radius: 4px; color: #7b5811; background: #fff3ca; font-size: 12px; font-weight: 700; }
.record-state { color: var(--teal); font-size: 13px; font-weight: 800; }
.record-state.void { color: #7b858b; }

.settings-layout { display: grid; gap: 16px; max-width: 980px; }
.settings-section { padding: 24px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.settings-heading { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 22px; }
.settings-heading > svg { width: 22px; color: var(--red); }
.settings-heading h3, .settings-heading p { margin: 0; }
.settings-heading h3 { font-size: 17px; }
.settings-heading p { margin-top: 5px; color: var(--muted); font-size: 12px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form-grid label, .dialog-body > label:not(.switch-row) { display: grid; gap: 7px; color: #44515a; font-size: 13px; font-weight: 700; }
.form-grid input, .dialog-body input:not([type="checkbox"]) { width: 100%; height: 42px; padding: 0 12px; border: 1px solid #ccd4d9; border-radius: 4px; outline: 0; }
.form-grid input:focus, .dialog-body input:focus { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(23,141,137,.12); }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; padding: 12px 0; border-top: 1px solid #e8ecef; }
.switch-row:first-of-type { border-top: 0; }
.switch-row strong, .switch-row span { display: block; }
.switch-row strong { font-size: 14px; }
.switch-row span { margin-top: 4px; color: var(--muted); font-size: 12px; }
.switch-row input { position: relative; width: 44px; height: 24px; margin: 0; appearance: none; border-radius: 12px; background: #bec7cd; transition: .2s; cursor: pointer; }
.switch-row input::after { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; content: ""; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: .2s; }
.switch-row input:checked { background: var(--teal); }
.switch-row input:checked::after { transform: translateX(20px); }
.switch-row.compact { min-height: 62px; margin-top: 4px; padding-bottom: 0; }
.settings-actions { display: flex; justify-content: flex-end; }
.primary-button.large { min-width: 150px; height: 44px; }

dialog { padding: 0; border: 0; }
dialog::backdrop { background: rgba(20,24,28,.55); }
.form-dialog { width: 500px; border-radius: 6px; box-shadow: 0 24px 60px rgba(0,0,0,.25); }
.form-dialog header { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.form-dialog header h2, .form-dialog header p { margin: 0; }
.form-dialog header h2 { font-size: 19px; }
.form-dialog header p { margin-top: 4px; color: var(--muted); font-size: 12px; }
.dialog-body { display: grid; gap: 17px; padding: 22px; }
.form-dialog footer { display: flex; justify-content: flex-end; gap: 9px; padding: 15px 22px; border-top: 1px solid var(--line); background: #fafbfc; }
.confirm-dialog { width: 410px; padding: 28px; border-radius: 6px; text-align: center; }
.confirm-dialog .confirm-icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%; color: var(--red); background: #fdebed; }
.confirm-dialog h2 { margin: 0; font-size: 19px; }
.confirm-dialog p { margin: 10px 0 22px; color: var(--muted); line-height: 1.7; }
.confirm-dialog > div:last-child { display: flex; justify-content: center; gap: 9px; }

.toast-region { position: fixed; z-index: 300; top: 20px; right: 24px; display: grid; gap: 9px; }
.toast { min-width: 260px; padding: 13px 16px; border-left: 4px solid var(--teal); border-radius: 4px; color: #fff; background: #283138; box-shadow: 0 12px 30px rgba(0,0,0,.18); animation: toast-in .24s ease; }
.toast.error { border-left-color: var(--red); }
.login-page { min-height: 100vh; display: grid; place-items: center; background: #f1f4f6; }
.login-form { width: min(400px, calc(100vw - 40px)); display: grid; gap: 18px; padding: 36px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.login-form h1 { margin: 0; font-size: 28px; }
.login-form p { margin: 0; color: var(--muted); }
.login-form label { display: grid; gap: 8px; }
.login-form a { color: #1764be; text-align: center; }
.login-form #login-error { color: #bb253b; }
.login-form button { justify-content: center; }
@keyframes toast-in { from { opacity: 0; transform: translateX(16px); } }

body.presentation-mode .sidebar, body.presentation-mode .topbar, body.presentation-mode .lottery-footer-strip { display: none; }
body.presentation-mode .app-shell { display: block; }
body.presentation-mode .content { padding: 0; }
body.presentation-mode .lottery-stage { min-height: 100vh; border-radius: 0; }
body.presentation-mode .stage-topline { padding: 48px 64px 22px; }
body.presentation-mode .stage-actions { padding-bottom: 48px; }
body.presentation-mode .stage-topline h2 { font-size: 40px; }
body.presentation-mode .winner-card { min-height: 190px; }
body.presentation-mode .winner-card strong { font-size: 23px; }

@media (max-height: 760px) {
  .lottery-stage { grid-template-rows: auto minmax(280px, 1fr) auto; }
  .draw-display { min-height: 280px; }
  .stage-topline { padding-top: 25px; }
  .winner-card { min-height: 120px; }
}