:root {
  --red: #c31731;
  --red-dark: #7f0b20;
  --red-bright: #ef2945;
  --blue: #135dcc;
  --blue-dark: #0b3478;
  --gold: #f3bd42;
  --ink: #1b1d24;
  --muted: #70717a;
  --paper: #f7f3ea;
  --white: #fff;
  --line: #e5e2dc;
  --shadow: 0 16px 50px rgba(61, 27, 22, .12);
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; color: var(--ink); font-family: "Microsoft YaHei UI", "PingFang SC", sans-serif; background: #f7f5f1; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .52; }
.eyebrow { color: var(--red); font-size: 12px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.eyebrow.light { color: #ffd5dc; }
.back-link { color: #746f6b; font-size: 14px; }
.as-link { display: inline-flex; align-items: center; justify-content: center; }
.primary-btn, .secondary-btn, .ghost-btn, .danger-btn, .draw-button {
  border: 0; border-radius: 12px; padding: 12px 18px; font-weight: 750; transition: transform .18s, box-shadow .18s, background .18s;
}
.primary-btn { color: white; background: linear-gradient(135deg, var(--red-bright), var(--red-dark)); box-shadow: 0 8px 22px rgba(195, 23, 49, .25); }
.primary-btn:hover:not(:disabled), .draw-button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(195, 23, 49, .32); }
.secondary-btn { color: var(--red-dark); background: #fdebf0; }
.ghost-btn { color: #55525a; background: #f0eeea; }
.danger-btn { color: #b5182e; background: transparent; border: 1px solid #e6aab3; }
.wide { width: 100%; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 30px); z-index: 1000; padding: 12px 20px; border-radius: 999px; color: white; background: #24242b; opacity: 0; pointer-events: none; box-shadow: var(--shadow); transition: .25s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: #b3122b; }
.empty-note { padding: 32px 18px; text-align: center; color: var(--muted); }

/* Landing */
.landing-page { min-height: 100vh; background: radial-gradient(circle at 20% 10%, #fff 0, #faf3e7 36%, #f3e7d7 100%); }
.landing-shell { width: min(1120px, calc(100% - 36px)); margin: 0 auto; padding: 56px 0 40px; }
.hero-card { position: relative; overflow: hidden; min-height: 340px; padding: 58px 60px; color: white; border-radius: 30px; background: linear-gradient(124deg, #8d0c22 0%, #d51c38 55%, #f04358 100%); box-shadow: 0 28px 70px rgba(112, 8, 25, .28); }
.hero-card::before, .hero-card::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; }
.hero-card::before { width: 460px; height: 460px; right: -110px; top: -190px; }
.hero-card::after { width: 300px; height: 300px; right: 30px; top: -92px; }
.hero-card .eyebrow { color: #ffd7dd; }
.hero-card h1 { margin: 16px 0 18px; font-size: clamp(40px, 7vw, 76px); line-height: 1.02; letter-spacing: -.04em; }
.hero-card h1 span { color: #ffe3a1; }
.hero-card p { max-width: 610px; margin: 0; color: #ffecef; font-size: 18px; line-height: 1.75; }
.hero-balls { position: absolute; right: 55px; bottom: 38px; display: flex; gap: 8px; transform: rotate(-6deg); }
.hero-balls i, .red-ball, .blue-ball, .round-logo, .mini-red-ball, .mini-blue-ball {
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: white; font-style: normal; font-weight: 900; background: radial-gradient(circle at 34% 28%, #ff8b9b, #d01431 42%, #83091e 100%); box-shadow: inset -5px -8px 13px rgba(72,0,10,.28), inset 4px 4px 9px rgba(255,255,255,.3), 0 8px 14px rgba(70,0,10,.22); }
.hero-balls i { width: 54px; height: 54px; }
.hero-balls .blue, .blue-ball, .mini-blue-ball { background: radial-gradient(circle at 34% 28%, #78b4ff, #1a64d8 45%, #092b69 100%); }
.portal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 22px; }
.portal-card { display: flex; flex-direction: column; min-height: 170px; padding: 24px; border: 1px solid rgba(255,255,255,.8); border-radius: 20px; background: rgba(255,255,255,.8); box-shadow: 0 12px 35px rgba(73, 43, 27, .08); transition: .2s; }
.portal-card:hover { transform: translateY(-4px); box-shadow: 0 18px 42px rgba(73,43,27,.14); }
.portal-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 24px; border-radius: 13px; font-size: 19px; color: white; background: var(--red); }
.portal-card.gold .portal-icon { background: #d99616; }.portal-card.blue .portal-icon { background: var(--blue); }.portal-card.ink .portal-icon { background: #35343b; }
.portal-card strong { font-size: 18px; }.portal-card small { margin-top: 8px; color: var(--muted); line-height: 1.5; }
.lan-hint { margin: 22px 8px 0; text-align: center; color: #69645e; }

/* Common pages */
.simple-page { min-height: 100vh; background: linear-gradient(145deg, #fbf8f2, #f2e7da); }
.center-card { width: min(440px, calc(100% - 32px)); margin: 8vh auto; padding: 34px; border-radius: 24px; background: white; box-shadow: var(--shadow); }
.login-card .round-logo { width: 58px; height: 58px; margin-top: 36px; }
.center-card h1 { margin: 18px 0 7px; }.center-card p { color: var(--muted); }
.stack-form { display: grid; gap: 16px; margin-top: 28px; }.stack-form label { display: grid; gap: 8px; color: #56535b; font-size: 14px; }
.stack-form input, .operator-box input, .package-table input { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; outline: none; background: white; }
.stack-form input:focus, .operator-box input:focus, .package-table input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(195,23,49,.09); }
.form-error { color: #b8122b; font-size: 14px; }
.mobile-shell { width: min(720px, 100%); min-height: 100vh; margin: 0 auto; padding: 28px 20px 50px; }
.page-header.compact { padding: 8px 2px 24px; }.page-header h1 { margin: 10px 0 8px; font-size: 34px; }.page-header p { margin: 0; color: var(--muted); }
.station-grid { display: grid; gap: 10px; }
.station-card { display: flex; align-items: center; gap: 15px; padding: 15px; border-radius: 16px; background: white; border: 1px solid #eee8df; box-shadow: 0 6px 18px rgba(67, 44, 29, .06); }
.station-card:hover { border-color: #e8adb7; }.station-number { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: 0 0 auto; border-radius: 50%; color: white; font-weight: 900; background: var(--red); }
.station-card > span:nth-child(2) { display: grid; flex: 1; gap: 4px; }.station-card small { color: var(--muted); }.station-card > b { color: #b4aaa1; font-size: 28px; }

/* Entry */
.entry-page { background: #f5f2ed; }.entry-shell { padding-top: 14px; padding-bottom: 110px; }
.entry-topbar { display: flex; justify-content: space-between; align-items: center; padding: 4px 0 16px; }.entry-topbar > span { color: var(--muted); font-size: 13px; }
.entry-hero { display: flex; align-items: center; gap: 18px; padding: 22px; border-radius: 20px; color: white; background: linear-gradient(125deg, #941028, #db2944); }
.red-ball.large { width: 76px; height: 76px; flex: 0 0 auto; font-size: 24px; }.entry-hero .eyebrow { color: #ffd3da; }.entry-hero h1 { margin: 5px 0; font-size: 24px; }.entry-hero p { margin: 0; color: #ffe7eb; font-size: 13px; line-height: 1.55; }
.operator-box { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; padding: 14px; border-radius: 16px; background: white; }
.operator-box label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.entry-summary { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 10px; padding: 9px 13px; color: #6d6560; font-size: 13px; }.entry-summary b { color: var(--red); }.entry-summary em { color: var(--red); font-style: normal; font-weight: 700; }
.student-entry-list { display: grid; gap: 8px; }.student-entry { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; border-radius: 15px; background: white; border: 1px solid #ece8e2; }
.student-entry.disabled { opacity: .58; background: #efede9; }.student-identity { display: flex; align-items: center; gap: 11px; min-width: 0; }.student-identity > span { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; color: white; font-weight: 800; background: var(--blue); }
.student-identity > div { display: grid; gap: 3px; }.student-identity small { color: var(--muted); white-space: nowrap; }
.stepper { display: grid; grid-template-columns: 38px 54px 38px; align-items: center; border: 1px solid #ded9d2; border-radius: 12px; overflow: hidden; }.stepper button { width: 38px; height: 42px; border: 0; color: var(--red); background: #fbf5f6; font-size: 20px; }.stepper input { width: 54px; height: 42px; padding: 0; border: 0; text-align: center; font-weight: 800; outline: none; -moz-appearance: textfield; }.stepper input::-webkit-inner-spin-button { display: none; }
.sticky-save { position: fixed; left: 50%; bottom: 0; z-index: 20; width: min(720px, 100%); padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: linear-gradient(transparent, #f5f2ed 18%, #f5f2ed); }

/* Admin */
.admin-page, .results-page { background: #f6f5f2; }.admin-nav { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 28px; min-height: 62px; padding: 0 max(24px, calc((100% - 1200px)/2)); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.92); backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 850; }.brand span { color: var(--red); }.admin-nav nav { display: flex; gap: 22px; margin-left: auto; color: #5f5d63; font-size: 14px; }.admin-nav form { margin: 0; }.text-btn { border: 0; color: var(--muted); background: none; }
.admin-shell, .results-shell { width: min(1200px, calc(100% - 40px)); margin: 0 auto; padding: 38px 0 70px; }.admin-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }.admin-heading h1 { margin: 8px 0; font-size: 36px; }.admin-heading p { margin: 0; color: var(--muted); }
.status-pill { max-width: 360px; padding: 10px 15px; border-radius: 999px; color: #5c5552; background: #ebe8e3; font-size: 13px; font-weight: 700; text-align: center; }.status-pill.ready { color: #167044; background: #dcf5e7; }.status-pill.warning { color: #9a6110; background: #fff0c9; }.status-pill.active { color: #0b4c9c; background: #dbeaff; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }.stat-card { display: grid; gap: 5px; padding: 20px; border-radius: 17px; background: white; border: 1px solid #ebe8e3; }.stat-card span { color: var(--muted); font-size: 13px; }.stat-card b { font-size: 32px; }.stat-card b i { color: #aaa5a0; font-size: 16px; font-style: normal; }.stat-card small { color: #95908c; }
.admin-section { margin-top: 18px; padding: 24px; border-radius: 20px; background: white; border: 1px solid #ebe8e3; }.section-heading { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; margin-bottom: 20px; }.section-heading h2, .action-section h2 { margin: 0 0 5px; font-size: 20px; }.section-heading p, .action-section p { margin: 0; color: var(--muted); font-size: 14px; }
.attendance-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }.attendance-card { padding: 12px; border: 1px solid #e7e3dd; border-radius: 14px; }.attendance-card.present { border-color: #9ed6ba; background: #f5fff9; }.attendance-card.absent { opacity: .66; background: #f0eeeb; }.attendance-toggle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-top: 10px; padding: 3px; border-radius: 8px; background: #eeece8; }.attendance-toggle button { padding: 5px 2px; border: 0; border-radius: 6px; color: #85807b; background: transparent; font-size: 11px; }.attendance-toggle button.selected { color: white; background: #57545a; }.attendance-card.present .attendance-toggle button.selected { background: #23865a; }.attendance-card.absent .attendance-toggle button.selected { background: #8b8580; }
.table-wrap { overflow-x: auto; }.package-table { width: 100%; min-width: 900px; border-collapse: collapse; }.package-table th { padding: 10px 8px; color: var(--muted); font-size: 12px; font-weight: 650; text-align: left; border-bottom: 1px solid var(--line); }.package-table td { padding: 10px 8px; vertical-align: middle; border-bottom: 1px solid #f0ede8; }.package-table tr:last-child td { border-bottom: 0; }.package-table input { padding: 8px 9px; }.pkg-name { font-weight: 700; }.pkg-content { margin-top: 5px; font-size: 12px; }.stock-input { max-width: 72px; text-align: center; }.package-table td > small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.mini-red-ball, .mini-blue-ball { width: 36px; height: 36px; font-size: 12px; }.progress-line { width: 92px; height: 6px; overflow: hidden; border-radius: 999px; background: #ece9e4; }.progress-line i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--red), #ef586e); }
.action-section { display: flex; align-items: center; justify-content: space-between; gap: 20px; }.danger-zone { margin-top: 20px; padding: 16px 20px; border: 1px solid #e8c4ca; border-radius: 14px; color: #75444b; }.danger-zone summary { cursor: pointer; font-weight: 700; }.danger-zone p { color: #866c70; font-size: 13px; }

/* Draw screen */
.draw-page { min-width: 1040px; min-height: 100vh; overflow-x: auto; color: white; background: radial-gradient(circle at 50% 40%, #4b1019, #21070b 58%, #0e0507 100%); }
.draw-shell { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; padding: 22px 28px 18px; background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: 32px 32px; }
.draw-header { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 18px; border-bottom: 1px solid rgba(255,255,255,.12); }.draw-header h1 { margin: 4px 0 0; font-size: clamp(22px, 2.3vw, 36px); letter-spacing: .04em; }.draw-header-actions { display: flex; align-items: center; gap: 18px; }.draw-header-actions > a { color: #caaeb2; font-size: 13px; }.phase-badge { padding: 8px 13px; border: 1px solid rgba(255,215,126,.35); border-radius: 999px; color: #ffe2a2; background: rgba(255,192,61,.09); font-size: 12px; }.phase-badge.done { color: #b8f4d5; border-color: #3eb97a; }.phase-badge.waiting { color: #ddd; border-color: #777; }
.draw-layout { display: grid; grid-template-columns: minmax(235px, 19vw) minmax(520px, 1fr) minmax(270px, 22vw); gap: 18px; min-height: 0; padding: 18px 0; }.package-panel, .weight-panel { min-height: 0; padding: 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: rgba(11,5,7,.45); box-shadow: inset 0 1px rgba(255,255,255,.06); }.panel-title { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }.panel-title span { display: inline-flex; align-items: center; justify-content: center; height: 24px; padding: 0 8px; border-radius: 999px; color: #ffcad2; background: rgba(213,28,56,.25); font-size: 11px; }.panel-title strong { font-size: 14px; }
.package-ball-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.package-orb { position: relative; display: grid; place-items: center; aspect-ratio: 1; min-width: 0; border-radius: 50%; background: radial-gradient(circle at 33% 27%, #ff9aa9, #d6203b 42%, #790b1c 100%); box-shadow: inset -7px -10px 17px rgba(50,0,7,.38), inset 5px 5px 9px rgba(255,255,255,.24), 0 6px 12px rgba(0,0,0,.24); transition: .25s; }.package-orb span { font-weight: 900; font-size: clamp(15px, 1.5vw, 24px); }.package-orb b { position: absolute; right: 1px; top: 0; display: grid; place-items: center; min-width: 25px; height: 25px; padding: 0 5px; border-radius: 999px; color: #6c0716; background: #ffe9ad; font-size: 11px; box-shadow: 0 3px 8px rgba(0,0,0,.3); }.package-orb small { position: absolute; bottom: -18px; max-width: 72px; overflow: hidden; color: #bda6aa; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }.package-orb:nth-child(-n+9) { margin-bottom: 14px; }.package-orb.empty { filter: grayscale(1); opacity: .22; }.package-orb.selected { z-index: 2; transform: scale(1.13); outline: 3px solid #ffd569; box-shadow: 0 0 28px rgba(255,203,78,.7); }.legend { margin-top: 19px; color: #a99195; font-size: 10px; }.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }.red-dot { background: var(--red-bright); }
.machine-panel { display: grid; grid-template-rows: auto minmax(270px, 1fr) auto auto; min-width: 0; }.round-meta { display: flex; justify-content: space-between; color: #c7aeb1; font-size: 12px; }.round-meta b { color: #ffe099; letter-spacing: .08em; }.lottery-machine { position: relative; min-height: 270px; margin: 10px auto 8px; width: min(100%, 630px); border: 7px solid #bd8a37; border-radius: 50% 50% 28% 28%; background: radial-gradient(circle at 50% 44%, rgba(255,255,255,.18), rgba(255,255,255,.035) 52%, rgba(0,0,0,.28) 53%); box-shadow: inset 0 0 45px rgba(255,255,255,.08), 0 0 0 5px #4b2a0f, 0 18px 40px rgba(0,0,0,.38); overflow: hidden; }.machine-shine { position: absolute; z-index: 2; width: 28%; height: 70%; left: 10%; top: 2%; border-radius: 50%; background: linear-gradient(90deg, rgba(255,255,255,.15), transparent); transform: rotate(24deg); pointer-events: none; }.candidate-field { position: absolute; inset: 0 0 45px; overflow: hidden; }.machine-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.28); font-size: clamp(34px, 5vw, 76px); font-weight: 900; letter-spacing: .15em; }.machine-placeholder.spinning { animation: breathe .55s infinite alternate; }.machine-base { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 14px; align-items: center; height: 45px; color: #4e2508; background: linear-gradient(#ffd475, #a76c20); box-shadow: 0 -3px 15px rgba(0,0,0,.25); }.machine-base span { width: 60px; height: 2px; background: rgba(71,35,8,.4); }
.candidate-ball { position: absolute; left: var(--x); top: var(--y); z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: white; background: radial-gradient(circle at 34% 28%, #86baff, #1d64d0 44%, #082b69 100%); box-shadow: inset -6px -8px 12px rgba(0,19,69,.4), inset 4px 4px 8px rgba(255,255,255,.25), 0 0 var(--glow) rgba(47,126,255,.45); transform: translate(-50%, -50%) scale(var(--scale)); animation: floatBall 2.2s var(--delay) infinite ease-in-out alternate; transition: .12s; }.candidate-ball b { font-size: 18px; }.candidate-ball small { margin-top: -8px; color: #d9eaff; font-size: 7px; }.candidate-ball.active { z-index: 6; outline: 4px solid #ffe47f; filter: brightness(1.35); transform: translate(-50%, -50%) scale(calc(var(--scale) * 1.22)); }
.winner-stage { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; width: min(100%, 680px); margin: 0 auto; padding: 11px 22px; border: 1px solid rgba(255,255,255,.11); border-radius: 16px; background: rgba(0,0,0,.2); }.selected-package, .selected-student { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: center; justify-content: center; gap: 2px 12px; }.selected-package > span, .selected-student > span { grid-column: 2; color: #bfa7ab; font-size: 10px; }.selected-package .red-ball, .selected-student .blue-ball { grid-row: 1 / 3; width: 56px; height: 56px; font-size: 17px; }.selected-package strong, .selected-student strong { max-width: 220px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.arrow-mark { color: #d6a954; font-size: 26px; }.winner-pop { animation: winnerPop .8s ease both !important; }
.draw-controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 10px; }.draw-button { min-width: 180px; color: #5d2507; background: linear-gradient(180deg, #ffe497, #e8a72c); box-shadow: 0 8px 25px rgba(220,153,29,.24); }.auto-switch { display: flex; align-items: center; gap: 8px; color: #c5adb1; font-size: 12px; cursor: pointer; }.auto-switch input { position: absolute; opacity: 0; }.auto-switch span { position: relative; width: 38px; height: 21px; border-radius: 999px; background: #4c3a3d; transition: .2s; }.auto-switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 15px; height: 15px; border-radius: 50%; background: #bcaeb0; transition: .2s; }.auto-switch input:checked + span { background: var(--red); }.auto-switch input:checked + span::after { left: 20px; background: white; }
.weight-explanation { padding: 10px 11px; border-radius: 10px; color: #d7c1c4; background: rgba(255,255,255,.05); font-size: 10px; line-height: 1.6; }.weight-list { max-height: calc(100vh - 255px); margin-top: 10px; overflow-y: auto; scrollbar-color: #64313a transparent; }.weight-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; padding: 7px 4px; border-bottom: 1px solid rgba(255,255,255,.06); transition: .12s; }.weight-row .mini-blue-ball { width: 32px; height: 32px; font-size: 10px; }.weight-row > div { min-width: 0; }.weight-row strong { display: block; overflow: hidden; color: #d8c3c6; font-size: 9px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }.weight-row i { display: block; height: 4px; margin-top: 4px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }.weight-row i em { display: block; height: 100%; background: #4384e5; }.weight-row > b { color: #9dbbe8; font-size: 9px; }.weight-row.active { border-radius: 8px; background: rgba(255,214,105,.14); }.weight-row.active > b { color: #ffe287; }
.draw-footer { display: grid; grid-template-columns: auto auto 1fr; gap: 10px; align-items: center; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.1); }.draw-footer > div:not(.ticker) { display: flex; align-items: baseline; gap: 5px; min-width: 100px; }.draw-footer b { color: #ffe09c; font-size: 24px; }.draw-footer span { color: #ac979a; font-size: 10px; }.ticker { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; overflow: hidden; }.ticker > strong { color: #c9b4b7; font-size: 11px; }.ticker > span { display: flex; gap: 12px; overflow: hidden; white-space: nowrap; }.ticker span span { color: #d8c6c9; }.ticker i { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; color: white; background: var(--red); font-style: normal; }
.celebration { position: fixed; inset: 0; z-index: 100; overflow: hidden; pointer-events: none; }.celebration i { position: absolute; left: var(--x); top: -20px; width: 7px; height: 14px; opacity: 0; background: var(--color); transform: rotate(var(--spin)); }.celebration.show i { animation: confetti 1.6s var(--delay) ease-in both; }

/* Results */
.result-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.result-card { padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: white; }.result-card.complete { border-color: #f0ca72; background: linear-gradient(135deg, white, #fff9e9); }.result-student { display: flex; align-items: center; gap: 10px; }.result-student > span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: white; background: var(--blue); font-weight: 900; }.result-student > div { display: grid; gap: 3px; }.result-student small { color: var(--muted); }.result-prizes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }.result-prizes span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 999px; color: #6d3039; background: #fde9ed; font-size: 12px; }.result-prizes i { font-style: normal; font-weight: 900; }.result-prizes em { color: var(--muted); font-size: 12px; }
.result-materials { margin-top: 14px; padding-top: 11px; border-top: 1px dashed #e8ded8; }.result-materials > strong { display: block; margin-bottom: 7px; color: #8a6b36; font-size: 11px; }.result-materials > div { display: flex; flex-wrap: wrap; gap: 6px; }.result-materials span { display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; border-radius: 8px; color: #5d534d; background: #f5f0e8; font-size: 11px; }.result-materials b { color: #9f1128; font-weight: 800; }

@keyframes floatBall { to { margin-left: 18px; margin-top: -16px; } }
@keyframes breathe { to { opacity: .55; transform: scale(1.04); } }
@keyframes winnerPop { 0% { transform: scale(.65); } 45% { transform: scale(1.45); box-shadow: 0 0 60px #58a0ff; } 100% { transform: scale(1); } }
@keyframes confetti { 0% { opacity: 1; transform: translateY(-20px) rotate(0); } 100% { opacity: 0; transform: translateY(105vh) rotate(var(--spin)); } }

@media (max-width: 900px) {
  .portal-grid { grid-template-columns: 1fr 1fr; }.hero-card { padding: 42px 32px; }.hero-balls { opacity: .4; right: 20px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }.attendance-grid { grid-template-columns: repeat(2, 1fr); }.admin-heading, .section-heading, .action-section { align-items: stretch; flex-direction: column; }.result-card-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .landing-shell { width: min(100% - 24px, 1120px); padding-top: 18px; }.hero-card { min-height: 310px; padding: 32px 24px; border-radius: 23px; }.hero-card h1 { font-size: 43px; }.hero-card p { font-size: 15px; }.hero-balls { right: 12px; bottom: 20px; }.hero-balls i { width: 38px; height: 38px; font-size: 11px; }.portal-grid { grid-template-columns: 1fr; }.portal-card { min-height: 116px; padding: 18px; }.portal-icon { margin-bottom: 12px; }
  .operator-box { grid-template-columns: 1fr; }.student-entry { padding: 11px 10px; }.student-identity > span { width: 36px; height: 36px; }.student-identity small { font-size: 10px; }.stepper { grid-template-columns: 34px 48px 34px; }.stepper button { width: 34px; }.stepper input { width: 48px; }
  .admin-nav { padding: 0 16px; }.admin-nav nav { display: none; }.admin-shell, .results-shell { width: min(100% - 24px, 1200px); padding-top: 24px; }.admin-heading h1 { font-size: 30px; }.stats-grid { gap: 8px; }.stat-card { padding: 15px; }.attendance-grid { grid-template-columns: 1fr; }.admin-section { padding: 17px; }.result-card-grid { grid-template-columns: 1fr; }
}

/* Draw screen v2 — simplified physical lottery machine */
.draw-v2 { min-width: 1120px; overflow: hidden; background: #08090d; }
.draw-v2 [hidden] { display: none !important; }
.draw-shell-v2 { min-height: 100vh; display: grid; grid-template-rows: 66px 1fr; color: #f8f3e8; background: radial-gradient(circle at 54% 44%, #272936 0, #13141b 43%, #090a0e 78%); }
.draw-shell-v2::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .35; background: linear-gradient(115deg, transparent 0 46%, rgba(255,255,255,.025) 46% 46.2%, transparent 46.2%), radial-gradient(circle at 20% 10%, rgba(188,21,49,.2), transparent 30%); }
.draw-topbar { position: relative; z-index: 5; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 28px; border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(4,5,8,.54); backdrop-filter: blur(18px); }
.draw-brand { display: flex; align-items: center; gap: 12px; }.draw-brand > span { display: grid; place-items: center; width: 46px; height: 28px; border-radius: 7px; color: #ffe3a4; background: #a81029; font-size: 11px; font-weight: 900; letter-spacing: .06em; }.draw-brand strong { font-size: 16px; letter-spacing: .06em; }
.draw-progress { display: flex; align-items: center; gap: 18px; color: #8e9099; font-size: 11px; }.draw-progress > b { color: #fff4da; font-size: 15px; }.draw-progress span { display: flex; gap: 4px; align-items: baseline; }.draw-progress i { color: #fff; font-size: 15px; font-style: normal; font-weight: 800; }
.draw-top-actions { justify-self: end; display: flex; align-items: center; gap: 14px; }.draw-top-actions em { padding: 7px 11px; border-radius: 999px; color: #ffe0a1; background: rgba(206,155,53,.13); border: 1px solid rgba(243,189,66,.25); font-size: 11px; font-style: normal; }.draw-top-actions a { color: #858791; font-size: 12px; }
.draw-stage-v2 { position: relative; z-index: 1; display: grid; grid-template-columns: 182px minmax(650px, 1fr) 264px; gap: 22px; min-height: 0; padding: 20px 24px 22px; }

.package-rack-v2 { padding: 14px 13px; border-right: 1px solid rgba(255,255,255,.08); }.package-rack-v2 h2 { margin: 0 0 13px 2px; color: #90919a; font-size: 11px; font-weight: 700; letter-spacing: .24em; }
.package-balls-v2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 9px; }.package-orb-v2 { position: relative; display: grid; place-items: center; aspect-ratio: 1; min-height: 64px; border-radius: 50%; background: radial-gradient(circle at 32% 24%, #ffb0bb 0, #e32944 25%, #a50e27 62%, #550714 100%); box-shadow: inset -7px -10px 15px rgba(38,0,8,.48), inset 4px 4px 8px rgba(255,255,255,.28), 0 7px 18px rgba(0,0,0,.35); transition: transform .22s, opacity .22s, filter .22s; }
.package-orb-v2 b { font-size: 19px; text-shadow: 0 2px 3px rgba(0,0,0,.35); }.package-orb-v2 > span { position: absolute; right: 0; top: 0; display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; color: #4b2c08; background: #ffd978; font-size: 10px; font-weight: 900; box-shadow: 0 3px 8px rgba(0,0,0,.4); }.package-orb-v2 small { position: absolute; left: 50%; bottom: -6px; max-width: 70px; transform: translateX(-50%); padding: 2px 5px; overflow: hidden; border-radius: 4px; color: #c7b8ba; background: #15151b; font-size: 8px; white-space: nowrap; text-overflow: ellipsis; }
.package-orb-v2.empty { filter: grayscale(1); opacity: .2; }.package-orb-v2.selected { z-index: 3; transform: scale(1.12); outline: 3px solid #ffd669; box-shadow: 0 0 0 6px rgba(255,214,105,.13), 0 0 32px rgba(255,195,61,.55); }

.machine-zone-v2 { display: grid; grid-template-rows: auto minmax(390px, 1fr) auto auto; min-width: 0; min-height: 0; }
.selected-package-v2 { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 11px; width: min(680px, 100%); margin: 0 auto 6px; }.red-ball-v2 { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: white; background: radial-gradient(circle at 32% 24%, #ff9eac, #d51d39 42%, #6f081b); box-shadow: inset -5px -7px 10px rgba(50,0,8,.4), 0 7px 16px rgba(0,0,0,.28); font-size: 15px; font-weight: 900; }.selected-package-v2 > div:nth-child(2) { display: grid; gap: 3px; }.selected-package-v2 span { color: #7e8089; font-size: 9px; letter-spacing: .16em; }.selected-package-v2 strong { font-size: 15px; }.selected-package-v2 em { padding: 5px 8px; border-radius: 6px; color: #d7b971; background: rgba(208,163,69,.08); font-size: 9px; font-style: normal; }

.machine-assembly-v2 { position: relative; width: min(680px, 100%); min-height: 390px; margin: 0 auto; padding: 22px 48px 30px; }
.machine-crown { position: absolute; z-index: 5; left: 50%; top: 0; display: flex; align-items: center; justify-content: center; gap: 12px; width: 260px; height: 36px; transform: translateX(-50%); border: 2px solid #8e6927; border-radius: 10px 10px 4px 4px; color: #382304; background: linear-gradient(180deg, #ffe29b, #bd8125); box-shadow: 0 6px 15px rgba(0,0,0,.35); font-size: 10px; letter-spacing: .17em; }.machine-crown i { width: 34px; height: 1px; background: rgba(61,35,4,.4); }
.machine-glass-v2 { position: relative; width: 100%; height: 100%; min-height: 350px; overflow: hidden; border: 9px solid #a67828; border-radius: 48% 48% 42% 42% / 45% 45% 50% 50%; background: radial-gradient(circle at 42% 36%, rgba(255,255,255,.12), rgba(136,155,187,.05) 40%, rgba(16,20,29,.36) 73%); box-shadow: inset 0 0 0 2px rgba(255,229,162,.36), inset 0 -26px 55px rgba(0,0,0,.36), 0 0 0 4px #3e2a0c, 0 18px 38px rgba(0,0,0,.42), 0 0 55px rgba(205,150,42,.08); }
.machine-glass-v2 canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }.glass-glare { position: absolute; z-index: 4; left: 9%; top: 9%; width: 17%; height: 62%; border-radius: 50%; background: linear-gradient(100deg, rgba(255,255,255,.17), rgba(255,255,255,.015)); transform: rotate(21deg); pointer-events: none; }.machine-idle { position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.09); font-size: 58px; font-weight: 900; letter-spacing: .14em; transition: opacity .2s; }.machine-idle.hidden { opacity: 0; }
.air-jet { position: absolute; z-index: 1; bottom: -25px; width: 110px; height: 110px; border-radius: 50%; opacity: .16; background: repeating-conic-gradient(from 0deg, #8cc3ff 0 7deg, transparent 7deg 25deg); filter: blur(4px); }.air-jet.left { left: 22%; }.air-jet.right { right: 22%; animation-delay: -.2s; }.mixing .air-jet { opacity: .48; animation: airSpin .36s linear infinite; }
.machine-rotor { position: absolute; z-index: 3; left: 50%; bottom: 23px; width: 72px; height: 72px; transform: translateX(-50%); border: 7px solid #72531d; border-radius: 50%; background: radial-gradient(circle, #ffe095 0 15%, #9c6b1c 16% 25%, #3d2a0e 26%); box-shadow: 0 5px 14px rgba(0,0,0,.45); }.machine-rotor i { position: absolute; left: 50%; top: 50%; width: 29px; height: 7px; transform-origin: 0 50%; border-radius: 99px; background: linear-gradient(90deg, #d8a63c, #5f4316); }.machine-rotor i:nth-child(2) { transform: rotate(90deg); }.machine-rotor i:nth-child(3) { transform: rotate(180deg); }.machine-rotor i:nth-child(4) { transform: rotate(270deg); }.mixing .machine-rotor { animation: rotorSpin .3s linear infinite; }
.exit-port { position: absolute; z-index: 7; right: 9px; top: 28%; width: 72px; height: 54px; border: 5px solid #755219; border-left: 0; border-radius: 0 24px 24px 0; background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(120,147,182,.08)); box-shadow: 9px 8px 18px rgba(0,0,0,.34); }.exit-port span { position: absolute; right: -17px; top: 12px; width: 20px; height: 22px; border-radius: 0 8px 8px 0; background: #c28b2b; }
.traveling-ball { position: fixed; z-index: 120; display: none; place-items: center; pointer-events: none; border-radius: 50%; opacity: 0; color: white; background: radial-gradient(circle at 33% 26%, #d9ebff 0, #68aaff 20%, #1760ca 58%, #07255c 100%); border: 1px solid rgba(255,255,255,.48); box-shadow: inset -7px -9px 14px rgba(0,15,55,.45), inset 4px 4px 8px rgba(255,255,255,.22), 0 0 30px rgba(70,147,255,.72); font-weight: 900; line-height: 1; will-change: left, top, width, height; }.traveling-ball.active { display: grid; opacity: 1; }
.machine-foot { position: absolute; z-index: 6; left: 50%; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 16px; width: 390px; height: 43px; transform: translateX(-50%); border-radius: 8px 8px 20px 20px; color: #3d2504; background: linear-gradient(180deg, #f6cc6e, #9e691e); box-shadow: 0 11px 23px rgba(0,0,0,.38); font-size: 11px; letter-spacing: .2em; }.machine-foot span { width: 60px; height: 1px; background: rgba(56,32,4,.45); }

.weight-ribbon { display: flex; align-items: center; gap: 10px; width: min(760px, 100%); min-height: 38px; margin: 5px auto 0; overflow: hidden; }.weight-hint { flex: 0 0 auto; color: #747680; font-size: 9px; }.weight-chips { display: flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; }.weight-chips > span { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; padding: 5px 7px; border-radius: 7px; color: #aeb5c2; background: rgba(255,255,255,.05); font-size: 8px; }.weight-chips span b { color: #75aaf2; }.weight-chips span em { color: #e3c477; font-style: normal; }.weight-chips > i { flex: 0 0 auto; color: #696b73; font-size: 8px; font-style: normal; }
.draw-controls-v2 { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; }.draw-button-v2, .cancel-draw-v2 { min-width: 154px; padding: 12px 22px; border: 0; border-radius: 10px; font-weight: 800; }.draw-button-v2 { color: #432606; background: linear-gradient(180deg, #ffe19a, #d99a29); box-shadow: 0 7px 20px rgba(224,157,36,.18); }.cancel-draw-v2 { min-width: 110px; color: #ffd5db; background: rgba(204,29,55,.2); border: 1px solid rgba(235,74,99,.36); }.auto-switch-v2 { display: flex; align-items: center; gap: 7px; margin-left: 4px; color: #898b93; font-size: 10px; cursor: pointer; }.auto-switch-v2 input { position: absolute; opacity: 0; }.auto-switch-v2 span { position: relative; width: 34px; height: 19px; border-radius: 99px; background: #34353c; transition: .2s; }.auto-switch-v2 span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 13px; height: 13px; border-radius: 50%; background: #8a8b92; transition: .2s; }.auto-switch-v2 input:checked + span { background: #a9122b; }.auto-switch-v2 input:checked + span::after { left: 18px; background: white; }

.winner-panel-v2 { align-self: center; min-height: 490px; padding: 22px 18px; text-align: center; border-left: 1px solid rgba(255,255,255,.08); }.winner-label { color: #7e8089; font-size: 10px; letter-spacing: .24em; }.winner-ball-v2 { display: grid; place-items: center; width: 112px; height: 112px; margin: 20px auto 16px; border-radius: 50%; color: white; background: radial-gradient(circle at 33% 27%, #d9ebff, #3a87e7 34%, #1152af 62%, #061d48 100%); box-shadow: inset -11px -15px 22px rgba(0,13,52,.5), inset 7px 7px 13px rgba(255,255,255,.24), 0 12px 28px rgba(0,0,0,.34); font-size: 38px; font-weight: 900; transition: opacity .16s, filter .16s, box-shadow .3s; }.winner-panel-v2 h2 { min-height: 42px; margin: 0; font-size: 30px; letter-spacing: .08em; }.winner-panel-v2 > p { min-height: 36px; margin: 6px 0 12px; color: #7f828c; font-size: 10px; line-height: 1.6; }.winner-package-v2 { min-height: 35px; padding: 9px 8px; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); color: #d8bb77; font-size: 10px; }.winner-panel-v2.receiving .winner-ball-v2 { opacity: .1; filter: saturate(0); }.winner-panel-v2.revealed .winner-ball-v2 { animation: winnerSettleV2 .34s ease-out both; box-shadow: inset -11px -15px 22px rgba(0,13,52,.5), 0 0 0 8px rgba(255,213,105,.1), 0 0 54px rgba(79,151,255,.5); }.winner-panel-v2.revealed h2 { color: #fff3d0; }
.recent-title { margin: 24px 0 8px; color: #696b74; font-size: 9px; letter-spacing: .2em; text-align: left; }.recent-list-v2 { display: grid; gap: 2px; text-align: left; }.recent-list-v2 > span { padding: 14px 0; color: #5d5f67; font-size: 10px; }.recent-list-v2 > div { display: grid; grid-template-columns: 25px 1fr; grid-template-rows: auto auto; gap: 1px 8px; padding: 7px 3px; border-bottom: 1px solid rgba(255,255,255,.05); }.recent-list-v2 div > span { grid-row: 1/3; display: grid; place-items: center; width: 24px; height: 24px; align-self: center; border-radius: 50%; color: #f5bdc6; background: rgba(196,23,48,.18); font-size: 8px; }.recent-list-v2 b { overflow: hidden; color: #d5d6da; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }.recent-list-v2 small { color: #64666e; font-size: 8px; }

@keyframes rotorSpin { to { transform: translateX(-50%) rotate(360deg); } }
@keyframes airSpin { to { transform: rotate(360deg); } }
@keyframes winnerSettleV2 { 0% { transform: scale(1); } 55% { transform: scale(1.06); } 100% { transform: scale(1); } }

@media (max-height: 760px) {
  .draw-stage-v2 { padding-top: 12px; padding-bottom: 12px; }.machine-glass-v2 { min-height: 310px; }.machine-assembly-v2 { min-height: 350px; }.winner-panel-v2 { min-height: 430px; padding-top: 12px; }.winner-ball-v2 { width: 94px; height: 94px; margin-top: 14px; font-size: 32px; }.recent-title { margin-top: 15px; }
}

.winner-panel-v2.receiving .winner-ball-v2 { opacity: 0; }

/* Sticker artwork for package recognition */
.package-orb-v2 { aspect-ratio: auto; min-height: 78px; padding: 6px 3px 4px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.035); box-shadow: inset 0 1px rgba(255,255,255,.04), 0 6px 14px rgba(0,0,0,.18); }
.package-sticker-thumb { position: relative; display: grid; place-items: center; width: 56px; height: 56px; overflow: hidden; isolation: isolate; border-radius: 15px; background: linear-gradient(145deg, #fffdf6, #f3eadc); box-shadow: 0 5px 12px rgba(0,0,0,.28), inset 0 0 0 1px rgba(114,82,34,.12); }
.package-sticker-thumb img { width: 50px; height: 50px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(55,38,17,.14)); }
.package-sticker-thumb img[src$="03.jpg"] { transform: scale(1.34); mix-blend-mode: multiply; filter: none; }
.package-sticker-thumb > b { position: absolute; left: 2px; top: 2px; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; color: white; background: #b4112b; box-shadow: 0 2px 6px rgba(89,4,18,.38); font-size: 8px; }
.package-sticker-thumb > span { position: absolute; right: 2px; top: 2px; display: grid; place-items: center; min-width: 21px; height: 21px; padding: 0 4px; border-radius: 999px; color: #3f2908; background: #ffd773; box-shadow: 0 2px 6px rgba(72,42,4,.28); font-size: 8px; font-weight: 900; }
.package-orb-v2 small { position: static; left: auto; bottom: auto; max-width: 68px; margin-top: 2px; padding: 0; color: #aaa2a1; background: transparent; font-size: 8px; transform: none; }
.package-orb-v2.selected { transform: translateY(-2px); outline: 2px solid #ffd669; background: rgba(255,210,100,.1); box-shadow: 0 0 0 4px rgba(255,214,105,.08), 0 0 24px rgba(255,195,61,.28); }
.package-orb-v2.empty { filter: grayscale(.75); opacity: .25; }

.selected-sticker-v2 { position: relative; display: grid; place-items: center; width: 50px; height: 50px; overflow: hidden; isolation: isolate; border-radius: 14px; background: linear-gradient(145deg, #fffdf6, #eee3d3); box-shadow: 0 6px 14px rgba(0,0,0,.3); }
.selected-sticker-v2 img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(55,38,17,.16)); }
.selected-sticker-v2 img[src$="03.jpg"] { transform: scale(1.34); mix-blend-mode: multiply; filter: none; }
.selected-sticker-v2 img:not([src]) { display: none; }
.selected-sticker-v2 > b { position: absolute; left: 2px; bottom: 2px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 999px; color: white; background: #b4112b; box-shadow: 0 2px 6px rgba(89,4,18,.38); font-size: 8px; }
.winner-package-v2 { display: flex; align-items: center; justify-content: center; gap: 8px; }
.winner-package-v2 img { width: 30px; height: 30px; padding: 2px; object-fit: contain; border-radius: 8px; background: #fffaf0; }
.winner-package-v2 img[src$="03.jpg"] { transform: none; mix-blend-mode: multiply; filter: none; }

/* Rule explanation — projector-first guided demo */
.portal-card.explain { grid-column: span 2; color: white; border-color: rgba(255,255,255,.25); background: linear-gradient(125deg, #951027, #d51d39 58%, #e7a82c); }
.portal-card.explain .portal-icon { color: #8d1025; background: #ffe4a2; }
.portal-card.explain small { color: #ffe8d7; }

.explain-page { min-height: 100vh; color: #f9f3e8; background: #090a0e; }
.explain-page button { color: inherit; }
.explain-shell { min-height: 100vh; overflow: hidden; background: radial-gradient(circle at 56% 45%, #252735 0, #14151d 45%, #090a0e 78%); }
.explain-shell::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .34; background: radial-gradient(circle at 13% 8%, rgba(192,20,48,.38), transparent 29%), linear-gradient(115deg, transparent 0 49%, rgba(255,255,255,.026) 49% 49.15%, transparent 49.15%); }
.explain-topbar { position: relative; z-index: 5; display: grid; grid-template-columns: 1fr minmax(220px, 340px) 1fr; align-items: center; min-height: 66px; padding: 0 28px; border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(4,5,8,.56); backdrop-filter: blur(18px); }
.explain-brand { display: flex; align-items: center; gap: 12px; }
.explain-brand > span { display: grid; place-items: center; width: 46px; height: 29px; border-radius: 7px; color: #ffe3a4; background: #a81029; font-size: 11px; font-weight: 900; }
.explain-brand strong { font-size: 16px; letter-spacing: .08em; }
.explain-top-progress { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
.explain-top-progress b { color: #f1d28a; font-size: 12px; letter-spacing: .12em; }
.explain-top-progress > i { height: 3px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.1); }
.explain-top-progress em { display: block; width: 25%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #d4223d, #f2c865); transition: width .35s ease; }
.explain-top-actions { justify-self: end; display: flex; align-items: center; gap: 9px; }
.explain-top-actions button, .explain-top-actions a { padding: 8px 12px; border: 1px solid rgba(255,255,255,.13); border-radius: 8px; color: #bbb9bd; background: rgba(255,255,255,.04); font-size: 11px; }
.explain-top-actions a { color: #3d2605; border-color: #d9a441; background: linear-gradient(#ffe49d, #d99d2d); font-weight: 800; }

.explain-stage { position: relative; z-index: 1; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(1500px, calc(100% - 42px)); height: calc(100vh - 66px); min-height: 650px; margin: 0 auto; padding: 17px 0 15px; }
.explain-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: min(780px, 66vw); margin: 0 auto 14px; padding: 4px; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; background: rgba(255,255,255,.035); }
.explain-steps button { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 8px; color: #6f717a; background: transparent; font-size: 11px; transition: .25s; }
.explain-steps button i { font-style: normal; font-weight: 900; }
.explain-steps button.active { color: #fff1cf; background: linear-gradient(110deg, rgba(175,20,44,.62), rgba(210,153,43,.28)); box-shadow: inset 0 0 0 1px rgba(255,215,127,.18); }

.explain-grid { display: grid; grid-template-columns: minmax(265px, .78fr) minmax(430px, 1.38fr) minmax(260px, .72fr); gap: clamp(18px, 2.1vw, 36px); align-items: center; min-height: 0; }
.explain-copy { align-self: center; padding: 4px 0 4px 10px; }
.explain-copy > p:first-child { margin: 0 0 12px; color: #e0b85d; font-size: 11px; font-weight: 900; letter-spacing: .24em; }
.explain-copy h1 { margin: 0; font-size: clamp(33px, 3.25vw, 54px); line-height: 1.08; letter-spacing: -.045em; }
.explain-copy h1 span { color: #ffd576; }
.explain-copy > p:nth-of-type(2) { max-width: 390px; margin: 22px 0 14px; color: #d0c6c5; font-size: clamp(14px, 1.18vw, 18px); line-height: 1.8; }
.explain-copy ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; color: #8e8e96; font-size: 12px; line-height: 1.55; }
.explain-copy li { position: relative; padding-left: 18px; }
.explain-copy li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: #c81d38; box-shadow: 0 0 0 4px rgba(200,29,56,.12); }
.explain-callout { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; margin-top: 23px; padding: 13px 14px; border: 1px solid rgba(237,193,92,.2); border-radius: 11px; color: #bcb2ac; background: rgba(216,163,54,.065); font-size: 11px; line-height: 1.55; }
.explain-callout b { padding: 2px 6px; border-radius: 4px; color: #3b2505; background: #e2b651; font-size: 9px; }

.explain-demo { position: relative; align-self: center; display: grid; justify-items: center; min-width: 0; }
.demo-package-strip { display: flex; justify-content: center; gap: 5px; width: 100%; margin-bottom: 8px; transition: opacity .3s, transform .3s; }
.demo-package-strip button { position: relative; width: clamp(28px, 2.65vw, 39px); height: clamp(28px, 2.65vw, 39px); padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; background: rgba(255,255,255,.055); opacity: .48; transition: .25s; }
.demo-package-strip button > span { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; border-radius: inherit; isolation: isolate; }
.demo-package-strip img { width: 84%; height: 84%; object-fit: contain; }
.demo-package-strip img[src$="03.jpg"] { width: 100%; height: 100%; transform: scale(1.34); mix-blend-mode: multiply; }
.demo-package-strip button > b { position: absolute; right: -1px; bottom: -1px; z-index: 2; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; color: #fff; background: #a7132a; font-size: 6px; }
.demo-package-strip button.selected { z-index: 2; opacity: 1; transform: translateY(-3px) scale(1.12); border-color: #ffd46f; box-shadow: 0 0 0 3px rgba(255,212,111,.12), 0 0 22px rgba(221,165,56,.35); }

.explain-wheel-wrap { position: relative; width: min(43vh, 440px, 35vw); aspect-ratio: 1; margin: 1px auto 8px; filter: drop-shadow(0 18px 25px rgba(0,0,0,.35)); }
.explain-wheel-wrap canvas { display: block; width: 100%; height: 100%; transform: rotate(var(--wheel-rotation, 0deg)); will-change: transform; }
.explain-wheel-glow { position: absolute; inset: 7.3%; z-index: -1; border-radius: 50%; box-shadow: 0 0 50px rgba(205,146,40,.13); }
.demo-package-detail { position: absolute; inset: 7%; z-index: 7; display: grid; grid-template-columns: 37% 1fr; gap: 18px; align-items: center; padding: 25px; border: 1px solid rgba(255,215,126,.28); border-radius: 28px; opacity: 0; pointer-events: none; transform: scale(.94); color: #f5ecdc; background: radial-gradient(circle at 22% 20%, rgba(189,35,57,.23), transparent 35%), linear-gradient(145deg, #252631, #121319); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 20px 44px rgba(0,0,0,.4); transition: opacity .3s, transform .3s; }
.demo-detail-sticker { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border: 2px solid rgba(255,219,137,.44); border-radius: 24px; isolation: isolate; background: linear-gradient(145deg, #fffdf7, #eadfcd); box-shadow: 0 12px 27px rgba(0,0,0,.28); }
.demo-detail-sticker img { width: 88%; height: 88%; object-fit: contain; }
.demo-detail-sticker img[src$="03.jpg"] { width: 100%; height: 100%; transform: scale(1.34); mix-blend-mode: multiply; }
.demo-detail-sticker b { position: absolute; left: 8px; top: 8px; display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; color: white; background: #aa132b; box-shadow: 0 4px 10px rgba(0,0,0,.28); font-size: 9px; }
.demo-detail-copy { min-width: 0; }
.demo-detail-copy > p { margin: 0 0 6px; color: #d4ad56; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.demo-detail-copy h2 { margin: 0 0 15px; color: #fff5dd; font-size: clamp(26px, 2.35vw, 34px); line-height: 1.18; }
.demo-detail-items { display: grid; gap: 7px; }
.demo-detail-items span { display: block; padding: 9px 11px; border: 1px solid rgba(255,255,255,.07); border-radius: 8px; color: #e5dfd8; background: rgba(255,255,255,.05); font-size: 12px; line-height: 1.45; }
.demo-detail-items b { margin-right: 8px; color: #edc565; font-size: 11px; }
.demo-detail-copy > small { display: block; margin-top: 13px; color: #8a8c94; font-size: 10px; }

.demo-quota-stage { position: absolute; inset: 2%; z-index: 7; display: grid; grid-template-rows: auto auto minmax(100px, 1fr) auto auto; gap: 6px; padding: 15px 17px; overflow: hidden; border: 1px solid rgba(255,215,126,.27); border-radius: 25px; opacity: 0; pointer-events: none; transform: scale(.94); background: radial-gradient(circle at 50% 5%, rgba(41,108,200,.2), transparent 34%), linear-gradient(145deg, #242631, #111217); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 20px 44px rgba(0,0,0,.42); transition: opacity .3s, transform .3s; }
.quota-head { display: grid; grid-template-columns: 38px 1fr auto; gap: 9px; align-items: center; }
.quota-head > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: white; background: radial-gradient(circle at 34% 26%, #91c5ff, #286ec7 55%, #0b326d); box-shadow: inset -4px -5px 8px rgba(0,18,63,.42), 0 6px 13px rgba(0,0,0,.3); font-size: 13px; font-weight: 900; }
.quota-head > div { display: grid; gap: 1px; }.quota-head small { color: #777a83; font-size: 8px; }.quota-head strong { color: #f9efd9; font-size: 14px; }
.quota-count { position: relative; width: 65px; height: 34px; overflow: hidden; color: #e8bd55; font-style: normal; font-size: 18px; font-weight: 900; }
.quota-count i { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; font-style: normal; }
.quota-source { display: flex; justify-content: center; align-items: center; gap: 7px; color: #9b9da5; font-size: 8px; letter-spacing: .12em; }.quota-source i { width: 24px; height: 1px; background: linear-gradient(90deg, transparent, #d5a642); }.quota-source span { color: #e3b850; font-size: 16px; animation: quotaArrow 1s ease-in-out infinite alternate; }
.quota-slots-animated { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; align-items: stretch; min-height: 0; }
.quota-slot { position: relative; display: grid; min-width: 0; place-items: center; align-content: end; padding: 6px 3px; overflow: visible; border: 2px dashed #4a4c55; border-radius: 13px; color: #62646d; background: rgba(0,0,0,.15); }
.quota-slot > small { margin-top: 7px; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.quota-fill { position: relative; z-index: 2; display: grid; place-items: center; align-content: center; width: min(76px, 82%); height: auto; aspect-ratio: 1; border-radius: 50%; opacity: 0; color: white; background: radial-gradient(circle at 34% 27%, #ff9cac, #d8223f 44%, #720b1d); box-shadow: inset -7px -9px 13px rgba(54,0,9,.42), inset 4px 4px 7px rgba(255,255,255,.24), 0 10px 20px rgba(0,0,0,.38); }
.quota-fill-two { background: radial-gradient(circle at 34% 27%, #ffdc8a, #d29524 46%, #704509); }.quota-fill-three { background: radial-gradient(circle at 34% 27%, #8fc7ff, #286fc9 46%, #0b326d); }
.quota-fill i { font-size: 23px; font-style: normal; font-weight: 900; line-height: 1; }.quota-fill b { max-width: 70px; margin-top: 5px; overflow: hidden; font-size: 7px; white-space: nowrap; text-overflow: ellipsis; }
.quota-complete { display: flex; justify-content: center; align-items: center; gap: 9px; min-height: 31px; padding: 6px 10px; border: 1px solid rgba(240,195,88,.35); border-radius: 9px; opacity: 0; transform: translateY(8px); color: #4a2d04; background: linear-gradient(90deg, #f8d77e, #d99a2e); box-shadow: 0 7px 20px rgba(218,153,42,.2); }
.quota-complete b { font-size: 14px; }.quota-complete span { font-size: 9px; font-weight: 800; }
.demo-quota-stage > button { justify-self: center; padding: 2px 9px; border: 0; color: #8e9098; background: transparent; font-size: 8px; }
.explain-pointer { position: absolute; z-index: 8; left: 50%; top: -9px; width: 46px; height: 62px; transform: translateX(-50%); filter: drop-shadow(0 5px 7px rgba(0,0,0,.5)); }
.explain-pointer::before { content: ""; position: absolute; left: 50%; top: 0; width: 26px; height: 26px; transform: translateX(-50%); border: 5px solid #5e3d0e; border-radius: 50%; background: radial-gradient(circle at 36% 28%, #fff1b4, #d89d2f 55%, #845510); }
.explain-pointer i { position: absolute; left: 50%; top: 18px; width: 0; height: 0; transform: translateX(-50%); border-left: 17px solid transparent; border-right: 17px solid transparent; border-top: 39px solid #efc761; }
.explain-pointer i::after { content: ""; position: absolute; left: -6px; top: -36px; width: 12px; height: 25px; clip-path: polygon(50% 100%, 0 0, 100% 0); background: #8b5b13; }
.explain-wheel-center { position: absolute; left: 50%; top: 50%; z-index: 5; display: grid; place-items: center; align-content: center; width: 34%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 7px solid #b98125; border-radius: 50%; color: #51320a; background: radial-gradient(circle at 35% 26%, #fff7cc, #e2b54f 58%, #9d6a1c); box-shadow: inset 3px 4px 6px rgba(255,255,255,.6), 0 5px 18px rgba(0,0,0,.4); text-align: center; }
.explain-wheel-center small { font-size: clamp(7px, .65vw, 10px); letter-spacing: .14em; }
.explain-wheel-center strong { font-size: clamp(25px, 3vw, 42px); line-height: 1; }
.explain-wheel-center em { max-width: 80%; margin-top: 4px; overflow: hidden; font-size: clamp(7px, .63vw, 9px); font-style: normal; white-space: nowrap; text-overflow: ellipsis; }

.demo-candidates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; width: min(590px, 100%); transition: opacity .3s, transform .3s; }
.demo-candidate { display: grid; grid-template-columns: 31px 1fr; grid-template-rows: auto auto; gap: 4px 7px; align-items: center; min-width: 0; padding: 7px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: rgba(255,255,255,.04); }
.demo-candidate > span { grid-row: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: white; background: var(--candidate, #185eba); font-size: 10px; font-weight: 900; }
.demo-candidate:nth-child(2) > span { --candidate: #b81732; }.demo-candidate:nth-child(3) > span { --candidate: #b47b1d; }
.demo-candidate > div:nth-child(2) { min-width: 0; }.demo-candidate > div:nth-child(2) > b { display: block; font-size: 10px; }.demo-candidate small { display: block; color: #6f717a; font-size: 7px; white-space: nowrap; }.demo-candidate small i { color: #d9b65f; font-style: normal; font-weight: 900; }.demo-candidate small em { color: #8eb9f0; font-style: normal; }
.demo-stepper { grid-column: 1 / -1; display: grid; grid-template-columns: 25px 1fr 25px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 7px; }
.demo-stepper button { height: 22px; border: 0; color: #e2c57f; background: rgba(255,255,255,.035); font-size: 14px; line-height: 1; }.demo-stepper b { display: grid; place-items: center; color: #d9d7d8; font-size: 9px; }

.explain-side { display: grid; align-content: center; gap: 12px; padding-right: 8px; }
.demo-formula, .demo-prize-card, .demo-pick-card { padding: 17px; border: 1px solid rgba(255,255,255,.085); border-radius: 15px; background: rgba(255,255,255,.04); transition: .3s; }
.demo-formula > span, .demo-prize-card > span, .demo-pick-card > span { color: #777981; font-size: 9px; letter-spacing: .18em; }
.demo-pick-card { display: none; border-color: rgba(239,194,88,.3); background: linear-gradient(145deg, rgba(179,24,49,.15), rgba(218,160,40,.07)); }
.demo-pick-card strong { display: block; margin: 10px 0 8px; color: #f4d37e; font-size: 17px; }
.demo-pick-card p { margin: 0; color: #a8a1a0; font-size: 10px; line-height: 1.7; }
.demo-formula > strong { display: block; margin: 9px 0; color: #f0e5cd; font-size: 16px; }.demo-formula > strong i { color: #f0c65f; font-size: 23px; font-style: normal; }
.demo-formula p { margin: 0; color: #92939a; font-size: 9px; line-height: 1.7; }.demo-formula p b { color: #f0c85e; }
.demo-formula small { display: block; margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.07); color: #c7a75c; font-size: 9px; line-height: 1.55; }
.demo-prize-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 14px 0 11px; }
.demo-prize-slots i { display: grid; place-items: center; align-content: center; aspect-ratio: 1; border: 1px dashed #4d4e56; border-radius: 12px; color: #55565e; background: rgba(0,0,0,.12); font-style: normal; transition: .35s; }
.demo-prize-slots i.filled { color: #4a2d06; border: 0; background: radial-gradient(circle at 35% 27%, #fff0a9, #dfa83b 60%, #976018); box-shadow: 0 5px 14px rgba(0,0,0,.28); }
.demo-prize-slots b { font-size: 19px; }.demo-prize-slots small { margin-top: 2px; font-size: 7px; }
.demo-prize-card p { margin: 0; color: #8c8e96; font-size: 9px; line-height: 1.55; }
.demo-spin-button { display: grid; gap: 3px; padding: 13px 16px; border: 0; border-radius: 12px; color: #422905; background: linear-gradient(180deg, #ffe49b, #dca131); box-shadow: 0 8px 22px rgba(221,157,43,.16); font-weight: 900; }
.demo-spin-button small { color: #785316; font-size: 8px; font-weight: 600; }.demo-spin-button:disabled { opacity: .7; }

.explain-controls { display: grid; grid-template-columns: 140px 1fr 190px; align-items: center; margin-top: 12px; padding: 10px 10px 0; border-top: 1px solid rgba(255,255,255,.075); }
.explain-controls > button { padding: 10px 15px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; color: #888a92; background: rgba(255,255,255,.035); font-size: 11px; }
.explain-controls > button:last-child { justify-self: end; min-width: 160px; color: #faf0d8; border-color: rgba(215,166,61,.28); background: rgba(190,130,27,.14); font-weight: 800; }
.explain-controls > button span { margin-left: 8px; color: #e5b752; }
.explain-dots { display: flex; justify-content: center; gap: 7px; }.explain-dots i { width: 6px; height: 6px; border-radius: 99px; background: #3e3f46; transition: .25s; }.explain-dots i.active { width: 24px; background: #d6a53e; }

.explain-shell.step-1 .demo-formula, .explain-shell.step-2 .demo-prize-card, .explain-shell.step-3 .demo-prize-card { border-color: rgba(239,194,88,.36); box-shadow: 0 0 30px rgba(218,160,40,.08); }
.explain-shell.step-0 .demo-package-detail { opacity: 1; pointer-events: auto; transform: scale(1); }
.explain-shell.step-0 .explain-wheel-wrap canvas,
.explain-shell.step-0 .explain-pointer,
.explain-shell.step-0 .explain-wheel-center,
.explain-shell.step-2 .explain-wheel-wrap canvas,
.explain-shell.step-2 .explain-pointer,
.explain-shell.step-2 .explain-wheel-center { opacity: 0; pointer-events: none; }
.explain-shell.step-0 .demo-candidates,
.explain-shell.step-2 .demo-candidates { visibility: hidden; opacity: 0; }
.explain-shell.step-2 .demo-quota-stage { opacity: 1; pointer-events: auto; transform: scale(1); }
.explain-side > .demo-pick-card,
.explain-side > .demo-formula,
.explain-side > .demo-prize-card,
.explain-side > .demo-spin-button { display: none; }
.explain-shell.step-0 .demo-pick-card,
.explain-shell.step-2 .demo-prize-card,
.explain-shell.step-3 .demo-prize-card { display: block; }
.explain-shell.step-1 .demo-formula { display: block; }
.explain-shell.step-1 .demo-spin-button { display: grid; }
.explain-shell.step-1 .demo-candidates { transform: translateY(-2px); }
.explain-shell.step-2 .demo-prize-slots i, .explain-shell.step-3 .demo-prize-slots i { color: #4a2d06; border: 0; background: radial-gradient(circle at 35% 27%, #fff0a9, #dfa83b 60%, #976018); box-shadow: 0 5px 14px rgba(0,0,0,.28); }
.explain-shell.step-3 .demo-prize-slots i:last-child { animation: explainPrizePulse 1.25s ease-in-out infinite alternate; }
.explain-shell.spinning .explain-pointer { animation: explainPointerTick .12s ease-in-out infinite alternate; }
.demo-candidate.winner { border-color: #f2cb69; background: rgba(213,161,51,.14); box-shadow: 0 0 20px rgba(225,171,53,.18); }

.explain-shell.step-2 .demo-quota-stage.playing .quota-fill-one { animation: quotaLandOne 7.2s ease-in-out infinite; }
.explain-shell.step-2 .demo-quota-stage.playing .quota-fill-two { animation: quotaLandTwo 7.2s ease-in-out infinite; }
.explain-shell.step-2 .demo-quota-stage.playing .quota-fill-three { animation: quotaLandThree 7.2s ease-in-out infinite; }
.explain-shell.step-2 .demo-quota-stage.playing .quota-count i:nth-child(1) { animation: quotaCountZero 7.2s linear infinite; }
.explain-shell.step-2 .demo-quota-stage.playing .quota-count i:nth-child(2) { animation: quotaCountOne 7.2s linear infinite; }
.explain-shell.step-2 .demo-quota-stage.playing .quota-count i:nth-child(3) { animation: quotaCountTwo 7.2s linear infinite; }
.explain-shell.step-2 .demo-quota-stage.playing .quota-count i:nth-child(4) { animation: quotaCountThree 7.2s linear infinite; }
.explain-shell.step-2 .demo-quota-stage.playing .quota-complete { animation: quotaComplete 7.2s ease-in-out infinite; }

@keyframes explainPointerTick { to { transform: translateX(-50%) rotate(3deg); } }
@keyframes explainPrizePulse { to { transform: scale(1.07); box-shadow: 0 0 28px rgba(244,193,79,.45); } }
@keyframes quotaArrow { to { transform: translateY(4px); } }
@keyframes quotaLandOne {
  0%, 5% { opacity: 0; transform: translate(95px, -135px) scale(.48) rotate(-18deg); }
  14%, 96% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0); }
  100% { opacity: 0; transform: translate(0, 8px) scale(.92); }
}
@keyframes quotaLandTwo {
  0%, 17% { opacity: 0; transform: translate(0, -135px) scale(.48) rotate(15deg); }
  26%, 96% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0); }
  100% { opacity: 0; transform: translate(0, 8px) scale(.92); }
}
@keyframes quotaLandThree {
  0%, 29% { opacity: 0; transform: translate(-95px, -135px) scale(.48) rotate(-15deg); }
  38%, 96% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0); }
  100% { opacity: 0; transform: translate(0, 8px) scale(.92); }
}
@keyframes quotaCountZero { 0%, 13% { opacity: 1; } 14%, 100% { opacity: 0; } }
@keyframes quotaCountOne { 0%, 13%, 25%, 100% { opacity: 0; } 14%, 24% { opacity: 1; } }
@keyframes quotaCountTwo { 0%, 25%, 37%, 100% { opacity: 0; } 26%, 36% { opacity: 1; } }
@keyframes quotaCountThree { 0%, 37%, 97%, 100% { opacity: 0; } 38%, 96% { opacity: 1; } }
@keyframes quotaComplete { 0%, 38% { opacity: 0; transform: translateY(8px) scale(.96); } 46%, 94% { opacity: 1; transform: translateY(0) scale(1); } 98%, 100% { opacity: 0; transform: translateY(4px) scale(.98); } }

@media (max-height: 760px) and (min-width: 1051px) {
  .explain-stage { min-height: 590px; padding-top: 10px; }.explain-steps { margin-bottom: 7px; }.explain-wheel-wrap { width: min(40vh, 365px, 31vw); }.explain-copy > p:nth-of-type(2) { margin-top: 14px; }.explain-callout { margin-top: 14px; }.demo-formula, .demo-prize-card { padding: 13px; }.explain-controls { margin-top: 5px; }
}
@media (max-width: 1050px) {
  .explain-shell { overflow: auto; }.explain-topbar { grid-template-columns: 1fr auto; }.explain-top-progress { display: none; }.explain-stage { width: min(920px, calc(100% - 30px)); height: auto; min-height: calc(100vh - 66px); }.explain-grid { grid-template-columns: minmax(240px, .75fr) minmax(400px, 1.25fr); }.explain-side { grid-column: 1 / -1; grid-template-columns: 1fr 1fr auto; align-items: stretch; padding: 0; }.demo-spin-button { align-content: center; }.explain-wheel-wrap { width: min(43vh, 420px, 50vw); }
}
@media (max-width: 720px) {
  .portal-card.explain { grid-column: span 1; }
  .explain-topbar { padding: 0 14px; }.explain-brand strong { font-size: 13px; }.explain-top-actions button { display: none; }.explain-top-actions a { padding: 7px 9px; }
  .explain-stage { width: min(100% - 22px, 620px); padding-top: 12px; }.explain-steps { width: 100%; }.explain-steps button { padding: 8px 4px; }.explain-steps button span { display: none; }
  .explain-grid { display: flex; flex-direction: column; gap: 16px; }.explain-copy { align-self: stretch; padding: 8px 5px 0; }.explain-copy h1 { font-size: 36px; }.explain-copy > p:nth-of-type(2) { margin: 13px 0 10px; }.explain-callout { margin-top: 14px; }
  .explain-demo { width: 100%; }.explain-wheel-wrap { width: min(88vw, 400px); }.demo-package-strip { gap: 3px; }.demo-package-strip button { width: 7vw; height: 7vw; max-width: 34px; max-height: 34px; }
  .demo-package-detail { inset: 5%; grid-template-columns: 34% 1fr; gap: 12px; padding: 17px; border-radius: 22px; }.demo-detail-copy h2 { margin-bottom: 9px; font-size: 22px; }.demo-detail-items { gap: 5px; }.demo-detail-items span { padding: 6px 7px; font-size: 10px; }.demo-detail-copy > small { margin-top: 8px; font-size: 9px; }
  .demo-quota-stage { inset: 3%; padding: 16px; border-radius: 22px; }.quota-fill { width: 68px; height: 68px; }.quota-fill i { font-size: 19px; }.quota-head strong { font-size: 14px; }.quota-slots-animated { min-height: 125px; }
  .explain-side { display: grid; grid-template-columns: 1fr; width: 100%; }.demo-spin-button { order: -1; }
  .explain-controls { position: sticky; bottom: 0; z-index: 10; grid-template-columns: 90px 1fr 135px; width: calc(100% + 22px); margin-left: -11px; padding: 10px 11px calc(10px + env(safe-area-inset-bottom)); background: rgba(9,10,14,.92); backdrop-filter: blur(14px); }.explain-controls > button:last-child { min-width: 132px; }
}
.winner-package-v2 img:not([src]) { display: none; }

/* Draw screen v3 — probability wheel */
.wheel-assembly-v3 { position: relative; display: grid; place-items: center; align-content: center; min-height: 390px; width: min(680px, 100%); margin: 0 auto; padding: 28px 24px 22px; isolation: isolate; }
.wheel-assembly-v3::before { content: ""; position: absolute; z-index: -1; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(54,112,214,.18), rgba(31,53,94,.08) 50%, transparent 72%); filter: blur(15px); }
.wheel-heading-v3 { position: absolute; z-index: 6; left: 50%; top: 2px; display: flex; align-items: center; justify-content: center; gap: 12px; width: 280px; height: 31px; transform: translateX(-50%); border: 1px solid rgba(255,218,128,.42); border-radius: 999px; color: #f4d88d; background: linear-gradient(180deg, rgba(66,48,18,.92), rgba(25,21,15,.92)); box-shadow: 0 8px 22px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.08); font-size: 9px; letter-spacing: .19em; }
.wheel-heading-v3 i { width: 34px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,220,137,.55)); }.wheel-heading-v3 i:last-child { transform: scaleX(-1); }
.wheel-stage-v3 { position: relative; width: min(420px, calc(100vh - 285px)); min-width: 350px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #222a3a, #090c14 72%); box-shadow: 0 24px 55px rgba(0,0,0,.48), 0 0 0 1px rgba(255,225,158,.12), 0 0 46px rgba(50,107,210,.12); }
.wheel-stage-v3 canvas { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; border-radius: 50%; filter: saturate(1.08); }
.wheel-pointer-v3 { position: absolute; z-index: 8; left: 50%; top: -9px; width: 48px; height: 64px; transform: translateX(-50%); filter: drop-shadow(0 7px 8px rgba(0,0,0,.55)); pointer-events: none; }
.wheel-pointer-v3::before { content: ""; position: absolute; left: 50%; top: 0; width: 32px; height: 32px; transform: translateX(-50%); border: 4px solid #714809; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fff0b1, #e8ae35 48%, #8c5710 100%); box-shadow: inset 2px 2px 5px rgba(255,255,255,.35); }
.wheel-pointer-v3 i { position: absolute; left: 50%; top: 24px; width: 0; height: 0; transform: translateX(-50%); border-left: 18px solid transparent; border-right: 18px solid transparent; border-top: 35px solid #f3bd42; }
.wheel-pointer-v3 i::after { content: ""; position: absolute; left: -9px; top: -32px; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 21px solid #fff0a9; }
.wheel-center-v3 { position: absolute; z-index: 5; left: 50%; top: 50%; display: grid; place-items: center; align-content: center; width: 132px; height: 132px; transform: translate(-50%, -50%); border: 8px solid rgba(255,220,133,.88); border-radius: 50%; color: white; background: radial-gradient(circle at 38% 28%, #2b3852, #111827 60%, #070b12); box-shadow: inset 0 0 0 2px rgba(72,42,8,.65), 0 7px 24px rgba(0,0,0,.52), 0 0 22px rgba(255,199,71,.26); text-align: center; pointer-events: none; }
.wheel-center-v3 span { color: #dfc179; font-size: 8px; font-weight: 800; letter-spacing: .15em; }.wheel-center-v3 strong { max-width: 105px; margin: 5px 0 3px; overflow: hidden; color: #fff7de; font-size: 22px; white-space: nowrap; text-overflow: ellipsis; }.wheel-center-v3 em { max-width: 108px; color: #8f96a5; font-size: 8px; font-style: normal; line-height: 1.35; }
.wheel-sheen-v3 { position: absolute; z-index: 4; inset: 11%; border-radius: 50%; background: linear-gradient(125deg, rgba(255,255,255,.14), transparent 32%, transparent 65%, rgba(0,0,0,.12)); mix-blend-mode: screen; pointer-events: none; }
.wheel-caption-v3 { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 25px; margin-top: 7px; color: #777b87; font-size: 9px; letter-spacing: .06em; }.wheel-caption-v3 span { width: 38px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.16)); }.wheel-caption-v3 span:last-child { transform: scaleX(-1); }
.wheel-assembly-v3.revealing .wheel-center-v3 { animation: wheelCenterBreathe 1.1s ease-in-out infinite; }.wheel-assembly-v3.revealing .wheel-caption-v3 b { color: #d6ba79; }
.wheel-assembly-v3.spinning .wheel-stage-v3 { box-shadow: 0 24px 55px rgba(0,0,0,.48), 0 0 0 1px rgba(255,225,158,.15), 0 0 65px rgba(52,111,226,.28); }
.wheel-assembly-v3.landed .wheel-center-v3 { box-shadow: inset 0 0 0 2px rgba(72,42,8,.65), 0 7px 24px rgba(0,0,0,.52), 0 0 0 9px rgba(255,211,91,.09), 0 0 48px rgba(255,197,60,.48); }.wheel-assembly-v3.landed .wheel-center-v3 strong { color: #ffe69a; }

.wheel-assembly-v3.batching { min-height: 390px; padding-left: 12px; padding-right: 12px; }
.wheel-assembly-v3.batching .wheel-heading-v3 { color: #ffe19b; border-color: rgba(255,218,128,.6); box-shadow: 0 8px 22px rgba(0,0,0,.32), 0 0 22px rgba(255,188,52,.18), inset 0 1px rgba(255,255,255,.08); }
.slot-stage-v4 { position: relative; display: grid; align-content: center; width: min(680px, 100%); min-height: 365px; padding: 22px 0 8px; }
.slot-stage-top { display: flex; align-items: center; justify-content: space-between; margin: 0 10px 10px; color: #f6d98f; font-size: 11px; letter-spacing: .12em; }.slot-stage-top em { padding: 4px 8px; border: 1px solid rgba(255,211,108,.26); border-radius: 999px; color: #aab0bd; background: rgba(255,255,255,.05); font-size: 9px; font-style: normal; letter-spacing: 0; }
.slot-grid-v4 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; width: 100%; }
.slot-card-v4 { position: relative; display: grid; grid-template-columns: 38px 1fr; grid-template-rows: 31px 76px 28px; column-gap: 8px; min-height: 155px; padding: 9px 8px 8px; overflow: hidden; border: 1px solid rgba(255,218,128,.22); border-radius: 13px; background: linear-gradient(145deg, rgba(42,48,65,.96), rgba(12,16,26,.96)); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.3); }
.slot-card-v4::after { content: ""; position: absolute; z-index: 4; left: -45%; top: -40%; width: 30%; height: 190%; transform: rotate(24deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); pointer-events: none; opacity: 0; }
.slot-card-v4.spinning::after { opacity: 1; animation: slotSheen .62s linear infinite; }.slot-card-v4.landed { border-color: rgba(255,220,117,.82); box-shadow: inset 0 1px rgba(255,255,255,.12), 0 0 0 3px rgba(255,212,92,.08), 0 0 28px rgba(255,190,58,.23); }
.slot-package-v4 { display: grid; grid-row: 1 / 3; align-content: center; justify-items: center; gap: 3px; isolation: isolate; }.slot-package-v4 img { width: 36px; height: 36px; padding: 2px; object-fit: contain; border-radius: 10px; background: #fff9ed; box-shadow: 0 4px 10px rgba(0,0,0,.28); }.slot-package-v4 img[src$="03.jpg"] { mix-blend-mode: multiply; filter: none; }.slot-package-v4 small { max-width: 38px; overflow: hidden; color: #b8a77b; font-size: 8px; white-space: nowrap; text-overflow: ellipsis; }
.slot-package-v4 { grid-row: 1 / 4; }
.slot-window-v4 { position: relative; grid-column: 2; height: 82px; overflow: hidden; border: 2px solid #b7832c; border-radius: 8px; background: linear-gradient(180deg, #080b13, #28324a 50%, #080b13); box-shadow: inset 0 0 15px rgba(0,0,0,.8), 0 2px 8px rgba(0,0,0,.35); }.slot-window-v4::before, .slot-window-v4::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; height: 14px; pointer-events: none; }.slot-window-v4::before { top: 0; background: linear-gradient(#0b0e18, transparent); }.slot-window-v4::after { bottom: 0; background: linear-gradient(transparent, #0b0e18); }
.slot-window-v4 { grid-row: 1 / 3; }
.slot-reel-v4 { display: grid; align-content: start; transform: translateY(0); }.slot-reel-v4 span { display: grid; place-items: center; height: 26px; color: #8f97a7; font-size: 13px; font-weight: 800; white-space: nowrap; transition: color .2s, font-size .2s, text-shadow .2s; }.slot-card-v4.landed .slot-reel-v4 .slot-reel-winner-v4 { color: #ffe79b; font-size: 16px; font-weight: 900; text-shadow: 0 0 12px rgba(255,211,97,.55); }
.slot-winner-v4 { grid-column: 2; grid-row: 3; overflow: hidden; color: #aeb5c2; font-size: 10px; font-weight: 800; text-align: center; text-overflow: ellipsis; white-space: nowrap; }.slot-card-v4.landed .slot-winner-v4 { color: #fff1c2; }.slot-meta-v4 { position: absolute; right: 8px; bottom: 3px; left: 54px; overflow: hidden; color: #6f7686; font-size: 8px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.slot-stage-note { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 24px; margin-top: 7px; color: #7f8591; font-size: 9px; letter-spacing: .05em; }.slot-stage-note i { width: 38px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.18)); }.slot-stage-note i:last-child { transform: scaleX(-1); }
@keyframes slotSheen { to { left: 130%; } }

@keyframes wheelCenterBreathe { 50% { transform: translate(-50%, -50%) scale(1.04); box-shadow: inset 0 0 0 2px rgba(72,42,8,.65), 0 7px 24px rgba(0,0,0,.52), 0 0 34px rgba(255,199,71,.42); } }

@media (max-height: 760px) {
  .wheel-assembly-v3 { min-height: 350px; padding-top: 24px; padding-bottom: 15px; }
  .wheel-stage-v3 { width: min(370px, calc(100vh - 280px)); min-width: 330px; }
  .wheel-center-v3 { width: 116px; height: 116px; border-width: 7px; }.wheel-center-v3 strong { font-size: 19px; }
  .wheel-caption-v3 { margin-top: 3px; }
  .slot-stage-v4 { min-height: 330px; padding-top: 16px; }.slot-card-v4 { min-height: 138px; grid-template-rows: 26px 66px 24px; padding: 7px 6px; }.slot-window-v4 { height: 67px; }.slot-reel-v4 span { height: 21px; font-size: 12px; }.slot-card-v4.landed .slot-reel-v4 .slot-reel-winner-v4 { font-size: 14px; }.slot-package-v4 img { width: 32px; height: 32px; }
}

/* Student-first volunteer entry */
.student-list-shell { padding-bottom: 50px; }
.student-list-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.student-list-summary > span { display: flex; align-items: baseline; justify-content: center; gap: 4px; padding: 12px 6px; border-radius: 13px; background: white; border: 1px solid #ebe6de; }
.student-list-summary b { color: var(--red); font-size: 22px; }.student-list-summary small { color: var(--muted); font-size: 10px; }.student-list-summary em { grid-column: 1 / -1; padding: 8px; border-radius: 10px; color: #9b6510; background: #fff0c9; font-size: 12px; font-style: normal; text-align: center; }
.student-list-tools { position: sticky; top: 0; z-index: 12; padding: 9px 0; background: rgba(247,245,241,.94); backdrop-filter: blur(12px); }
.student-list-tools > input { width: 100%; padding: 11px 13px; border: 1px solid #ddd8d1; border-radius: 12px; outline: none; background: white; }.student-list-tools > input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(195,23,49,.08); }
.student-filter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-top: 8px; padding: 3px; border-radius: 10px; background: #eae6e0; }.student-filter button { padding: 7px 4px; border: 0; border-radius: 8px; color: #817b76; background: transparent; font-size: 12px; }.student-filter button.selected { color: white; background: #3e3c42; }
.student-select-list { display: grid; gap: 8px; margin-top: 5px; }.student-select-card { display: grid; grid-template-columns: 42px 1fr auto 18px; align-items: center; gap: 10px; padding: 12px; border: 1px solid #e8e3dc; border-radius: 14px; background: white; box-shadow: 0 4px 13px rgba(67,44,29,.05); }.student-select-card.locked { pointer-events: none; opacity: .58; }.student-select-code { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: white; background: var(--blue); font-weight: 800; }.student-select-card > div { display: grid; gap: 3px; }.student-select-card small { color: var(--muted); }.student-select-card em { padding: 5px 8px; border-radius: 999px; color: #8e6316; background: #fff0c9; font-size: 10px; font-style: normal; }.student-select-card.complete em { color: #157047; background: #dcf5e7; }.student-select-card.absent { opacity: .66; }.student-select-card.absent em { color: #68635f; background: #ebe8e4; }.student-select-card.partial em { color: #a14c13; background: #ffe4d1; }.student-select-card > b { color: #b4aaa1; font-size: 23px; }

.student-entry-page { min-height: 100vh; background: #f5f2ed; }.per-student-shell { padding-top: 14px; padding-bottom: 110px; }
.student-entry-hero { display: flex; align-items: center; gap: 15px; padding: 19px; border-radius: 19px; color: white; background: linear-gradient(125deg, #173f87, #2570d6); box-shadow: 0 10px 26px rgba(20,74,154,.2); }.student-entry-hero > span { display: grid; place-items: center; width: 64px; height: 64px; flex: 0 0 auto; border-radius: 50%; color: #174584; background: #e4f0ff; font-size: 23px; font-weight: 900; box-shadow: inset -5px -7px 12px rgba(36,91,164,.16), 0 6px 15px rgba(0,0,0,.18); }.student-entry-hero .eyebrow { color: #c6dcff; }.student-entry-hero h1 { margin: 4px 0; font-size: 27px; }.student-entry-hero p { margin: 0; color: #d7e7ff; font-size: 12px; }
.student-entry-controls { display: grid; gap: 14px; margin: 13px 0; padding: 15px; border-radius: 16px; background: white; }.student-entry-controls > label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }.student-entry-controls input { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; outline: none; }.student-entry-controls input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(19,93,204,.08); }
.attendance-question { display: grid; gap: 9px; }.attendance-question > strong { font-size: 14px; }.attendance-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.attendance-choice button { min-height: 46px; border: 1px solid #ddd8d1; border-radius: 11px; color: #68635f; background: #faf9f7; font-size: 13px; font-weight: 700; }.attendance-choice button[data-attendance="present"].selected { color: #11623e; border-color: #69c398; background: #e6f8ee; box-shadow: 0 0 0 2px rgba(49,158,104,.1); }.attendance-choice button[data-attendance="absent"].selected { color: #805258; border-color: #c9a4aa; background: #f5e9eb; }
.student-sticker-section { margin-top: 12px; }.student-sticker-heading { display: flex; align-items: flex-end; justify-content: space-between; padding: 5px 2px 10px; }.student-sticker-heading h2 { margin: 0 0 3px; font-size: 18px; }.student-sticker-heading p { margin: 0; color: var(--muted); font-size: 11px; }.student-sticker-heading > span { color: var(--red); font-size: 12px; font-weight: 700; }
.student-sticker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.student-sticker-card { display: grid; grid-template-columns: 50px 1fr; gap: 8px; padding: 10px; border: 1px solid #e7e2db; border-radius: 15px; background: white; box-shadow: 0 5px 14px rgba(67,44,29,.05); }.student-sticker-art { position: relative; display: grid; place-items: center; width: 50px; height: 50px; overflow: hidden; border-radius: 12px; background: linear-gradient(145deg, #fffdf7, #f1e8da); }.student-sticker-art img { width: 45px; height: 45px; object-fit: contain; }.student-sticker-art img[src$="03.jpg"] { transform: scale(1.7) translateY(2px); mix-blend-mode: multiply; }.student-sticker-art span { position: absolute; left: 2px; top: 2px; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; color: white; background: var(--red); font-size: 7px; font-weight: 900; }.student-sticker-name { display: grid; align-content: center; gap: 3px; min-width: 0; }.student-sticker-name strong { font-size: 13px; }.student-sticker-name small { overflow: hidden; color: var(--muted); font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }.compact-stepper { grid-column: 1 / -1; grid-template-columns: 34px 1fr 34px; width: 100%; }.compact-stepper input { width: 100%; }.absent-note { padding: 28px 18px; border: 1px solid #e2d5d1; border-radius: 15px; color: #786a67; background: #f3ebe9; text-align: center; }

@media (max-width: 430px) {
  .student-sticker-grid { gap: 7px; }.student-sticker-card { grid-template-columns: 44px 1fr; gap: 6px; padding: 8px; }.student-sticker-art { width: 44px; height: 44px; }.student-sticker-art img { width: 40px; height: 40px; }.student-sticker-name strong { font-size: 12px; }
}

/* Keep the JPG sticker treatment consistent after responsive overrides. */
.package-sticker-thumb,
.selected-sticker-v2,
.winner-package-v2,
.slot-package-v4,
.student-sticker-art { isolation: isolate; }
.package-sticker-thumb img[src$="03.jpg"],
.selected-sticker-v2 img[src$="03.jpg"],
.slot-package-v4 img[src$="03.jpg"],
.student-sticker-art img[src$="03.jpg"] { transform: scale(1.34); mix-blend-mode: multiply; filter: none; }
.winner-package-v2 img[src$="03.jpg"] { transform: none; mix-blend-mode: multiply; filter: none; }