:root { --ink:#202b3a; --muted:#687587; --line:#dfe5ea; --paper:#f4f6f5; --white:#fff; --navy:#153049; --teal:#197d7a; --mint:#dff2ed; --gold:#f4b544; --rose:#fff1e9; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font:15px "Noto Sans TC",Arial,sans-serif; }
.sidebar { position:fixed; inset:0 auto 0 0; width:244px; padding:30px 18px; background:var(--navy); color:#dce7ef; display:flex; flex-direction:column; z-index:2; }
.brand { color:#fff; font-size:18px; font-weight:700; display:flex; align-items:center; gap:10px; padding:0 10px 37px; }.brand-mark { display:grid; place-items:center; width:29px; height:29px; background:#4eb9a8; border-radius:7px; font-size:15px; }
nav { display:grid; gap:5px; }.nav-item { color:#aebec9; text-decoration:none; padding:12px 13px; border-radius:6px; font-weight:500; }.nav-item span { display:inline-block; width:24px; color:#8fabbc; font-size:17px; }.nav-item:hover,.nav-item.active { color:#fff; background:rgba(255,255,255,.11); }.nav-item.active span { color:#6cdbc7; }.sidebar-note { margin-top:auto; padding:14px 11px; border-top:1px solid rgba(255,255,255,.14); color:#c7d5de; line-height:1.8; }.sidebar-note small { color:#8ca1af; }.dot { display:inline-block; width:7px; height:7px; background:#6cdbc7; border-radius:50%; margin-right:7px; }.dot.connecting { background:#f4b544; }.dot.offline { background:#e8886e; }
main { margin-left:244px; max-width:1470px; padding:42px clamp(25px,5vw,78px) 64px; }.topbar,.section-heading,.form-actions,.weekly-actions { display:flex; align-items:center; justify-content:space-between; gap:20px; }.topbar { margin-bottom:31px; }h1,h2,p { margin:0; } h1 { margin-top:2px; font-size:28px; letter-spacing:0; } h2 { font-size:20px; letter-spacing:0; }.eyebrow { color:var(--teal); font-size:12px; font-weight:700; letter-spacing:0; }.date-block { color:var(--muted); font-size:14px; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px; }.metric { min-height:151px; padding:23px; border:1px solid var(--line); border-radius:7px; background:var(--white); display:flex; flex-direction:column; }.metric-label { color:var(--muted); font-size:13px; }.metric strong { margin:13px 0 auto; font-size:31px; line-height:1.1; }.metric.amber { background:#fffaf1; border-color:#f2dfb8; }.metric.teal { background:#f0faf7; border-color:#cfece4; }.metric.amber strong,.metric.teal strong { font-size:21px; }.metric-note { color:#7a8796; font-size:12px; }
.workspace-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(280px,1fr); gap:22px; margin-bottom:22px; }.panel { background:var(--white); border:1px solid var(--line); border-radius:7px; padding:27px; }.required { color:#86919e; font-size:12px; }.field-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:23px 0 16px; } label { display:grid; gap:7px; color:#405063; font-size:13px; font-weight:600; }select,input,textarea { width:100%; border:1px solid #cfd8df; border-radius:5px; padding:11px 12px; color:var(--ink); background:#fff; font:14px inherit; outline:none; }select:focus,input:focus,textarea:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(25,125,122,.12); }textarea { resize:vertical; }.form-actions { margin-top:19px; }.form-actions span { color:var(--teal); font-size:13px; }button { border:0; border-radius:5px; padding:11px 17px; background:var(--teal); color:#fff; font:600 14px inherit; cursor:pointer; transition:transform .15s,background .15s; }button:hover { background:#126966; transform:translateY(-1px); }button span { margin-left:7px; }.weekly-card { position:relative; overflow:hidden; background:var(--navy); border-color:var(--navy); color:#fff; }.weekly-card h2 { color:#fff; }.weekly-card .eyebrow { color:#6cdbc7; }.status-tag { border-radius:12px; padding:4px 9px; color:#bdf1e6; background:rgba(108,219,199,.14); font-size:11px; }.calendar-icon { width:78px; margin:27px 0 18px; overflow:hidden; border-radius:6px; background:#fff; color:var(--navy); text-align:center; }.calendar-icon span { display:block; padding:3px; color:#fff; background:#e66c59; font-size:10px; font-weight:700; }.calendar-icon strong { display:block; padding:7px; font-size:29px; }.weekly-card p { max-width:360px; color:#c9d7df; font-size:13px; line-height:1.75; }.weekly-actions { margin-top:20px; align-items:center; }.secondary-button { color:#fff; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.23); }.secondary-button:hover { background:rgba(255,255,255,.2); }.weekly-actions span { color:#92a9b7; font-size:11px; }
.records-panel { margin-bottom:22px; }.search { display:flex; align-items:center; gap:5px; border:1px solid #d4dde3; border-radius:5px; padding:0 9px; }.search input { width:180px; border:0; padding:8px 2px; box-shadow:none; }.search span { color:#7c8b96; font-size:19px; }.table-wrap { overflow-x:auto; margin-top:20px; }table { width:100%; border-collapse:collapse; text-align:left; }th { color:#7a8794; padding:0 12px 10px; border-bottom:1px solid var(--line); font-size:11px; font-weight:600; }td { padding:13px 12px; border-bottom:1px solid #edf0f2; color:#435265; font-size:13px; }.penalty-badge { display:inline-block; padding:4px 8px; border-radius:4px; color:#a54f22; background:var(--rose); font-size:12px; }.delete-button { padding:3px 7px; color:#a55c59; background:none; font-size:13px; }.delete-button:hover { background:#fff1f0; }.empty-state { display:none; padding:27px 0 6px; color:#7f8b97; text-align:center; }
.late-field { margin:0 0 16px; max-width:calc(50% - 8px); }.students-panel { margin-bottom:22px; }.student-total { color:#6e7e8c; font-size:13px; }.student-manager { display:grid; grid-template-columns:280px 1fr; gap:28px; margin-top:21px; }.student-form { display:grid; align-content:start; gap:14px; padding-right:28px; border-right:1px solid var(--line); }.student-actions { display:flex; align-items:center; gap:10px; margin-top:2px; }.text-button { padding:7px 2px; color:#687787; background:transparent; }.text-button:hover { color:var(--teal); background:transparent; }.roster-content { min-width:0; }.csv-import { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; padding:12px 14px; border:1px solid #d8e9e5; border-radius:5px; background:#f4fbf9; }.csv-import strong,.csv-import span { display:block; }.csv-import strong { color:#365c5a; font-size:13px; }.csv-import span { margin-top:2px; color:#718785; font-size:11px; }.file-input { display:block; cursor:pointer; }.file-input input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }.file-input span { margin:0; padding:8px 11px; border:1px solid #9ccfc4; border-radius:4px; color:#196d66; background:#fff; font-size:12px; font-weight:600; white-space:nowrap; }.file-input:hover span { background:#e6f6f1; }.student-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.student-row { display:flex; align-items:center; gap:10px; padding:12px; border:1px solid #e2e8eb; border-radius:5px; }.student-avatar { display:grid; flex:0 0 auto; place-items:center; width:32px; height:32px; color:#176e68; background:#dff2ed; border-radius:50%; font-size:13px; font-weight:700; }.student-info { min-width:0; margin-right:auto; }.student-info strong,.student-info span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.student-info strong { font-size:13px; }.student-info span { color:#7c8a97; font-size:11px; }.edit-student { padding:5px 7px; color:#437470; background:transparent; font-size:12px; }.edit-student:hover { background:#e8f6f2; }
.lottery-section { min-height:244px; display:grid; grid-template-columns:1.4fr 1fr; overflow:hidden; border-radius:7px; background:#dff2ed; }.lottery-copy { padding:31px; }.lottery-copy h2 { margin:3px 0 11px; font-size:23px; }.lottery-copy > p:not(.eyebrow) { max-width:520px; color:#55706e; line-height:1.75; font-size:13px; }.lottery-copy button { margin-top:18px; background:#167b75; }.draw-result { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:25px; background:#cae9e1; text-align:center; }.result-label { color:#39736b; font-size:12px; }.draw-result strong { color:#176e68; font-size:52px; line-height:1.25; }.draw-result p { color:#4f7773; font-size:12px; }.toast { position:fixed; right:28px; bottom:28px; transform:translateY(20px); opacity:0; padding:12px 17px; border-radius:5px; background:#1e3344; color:#fff; box-shadow:0 8px 22px rgba(19,40,57,.2); transition:.25s; pointer-events:none; }.toast.show { transform:translateY(0); opacity:1; }
.lottery-section { position:relative; min-height:274px; border:0; border-radius:8px; background:#122842; box-shadow:0 12px 27px rgba(20,38,58,.12); }.lottery-copy { position:relative; padding:35px 39px; color:#fff; }.lottery-copy .eyebrow { color:#71dac8; }.lottery-copy h2 { margin:9px 0 9px; color:#fff; font-size:27px; }.lottery-copy > p:not(.eyebrow) { color:#b5c6d3; }.lottery-copy button { background:#f5bb48; color:#182d45; }.lottery-copy button:hover { background:#ffd26e; }.participant-count { display:block; margin-top:12px; color:#92dacf; font-size:12px; }.lottery-heading { display:flex; align-items:center; gap:9px; }.ticket-mark { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; color:#1c3955; background:#7bddc8; }.draw-result { position:relative; overflow:hidden; background:#e9f8f3; }.draw-result::before { content:""; position:absolute; inset:17px; border:1px solid #b5e6d9; border-radius:5px; }.draw-result > * { position:relative; }.draw-result strong { color:#0b716a; }.draw-overlay { position:fixed; inset:0; z-index:10; display:grid; place-items:center; overflow:hidden; background:#091d33; color:#fff; }.draw-overlay[hidden] { display:none; }.draw-stage { position:relative; z-index:1; display:flex; min-height:100vh; width:min(720px,100%); flex-direction:column; align-items:center; justify-content:center; padding:44px 24px; text-align:center; }.draw-kicker { color:#79e2ce; font-size:12px; font-weight:700; letter-spacing:2px; }.draw-stage h2 { margin:8px 0 24px; color:#fff; font-size:34px; }.stage-lights i { position:absolute; top:-15vh; width:18vw; height:135vh; background:#155567; opacity:.24; transform-origin:top; }.stage-lights i:nth-child(1) { left:4%; transform:rotate(-22deg); }.stage-lights i:nth-child(2) { left:26%; transform:rotate(18deg); }.stage-lights i:nth-child(3) { left:48%; transform:rotate(-7deg); }.stage-lights i:nth-child(4) { left:70%; transform:rotate(23deg); }.stage-lights i:nth-child(5) { left:88%; transform:rotate(-18deg); }.lottery-machine { position:relative; display:grid; place-items:center; width:226px; height:226px; margin:3px 0 22px; border:8px solid #2d6775; border-radius:50%; background:#173b55; box-shadow:0 0 0 12px rgba(115,222,202,.12),0 23px 55px rgba(0,0,0,.27); }.machine-ring { position:absolute; inset:13px; border:2px dashed #79dfcf; border-radius:50%; animation:spin 9s linear infinite; }.draw-ball { display:grid; position:relative; place-items:center; width:134px; height:134px; border-radius:50%; color:#1d3046; background:#f6bf52; box-shadow:inset -10px -12px 0 rgba(182,105,34,.14),inset 12px 12px 0 rgba(255,255,255,.37); font-size:26px; font-weight:700; transition:.13s ease; }.draw-ball.rolling { animation:ball-shake .16s linear infinite; }.draw-state { min-height:25px; color:#b8d0dc; font-size:14px; }.winner-card { width:min(500px,100%); margin-top:16px; padding:17px; border:1px solid #73dcca; border-radius:6px; background:rgba(28,70,87,.78); animation:reveal .45s ease-out; }.winner-card span,.winner-card p { color:#bde7dc; font-size:13px; }.winner-card strong { display:block; margin:4px 0; color:#fff6ca; font-size:29px; }.close-draw { position:absolute; z-index:2; top:22px; right:24px; width:38px; height:38px; padding:0; border:1px solid rgba(255,255,255,.35); border-radius:50%; background:transparent; color:#fff; font-size:27px; font-weight:400; }.close-draw:hover { background:rgba(255,255,255,.13); }.draw-overlay.complete .lottery-machine { animation:success-pulse 1s ease-in-out infinite alternate; }.draw-overlay.complete .draw-ball { background:#7bdec9; }.draw-overlay.complete .machine-ring { animation-duration:2s; }@keyframes spin { to { transform:rotate(360deg); } }@keyframes ball-shake { 25% { transform:translate(-5px,3px) rotate(-7deg); } 75% { transform:translate(5px,-3px) rotate(7deg); } }@keyframes reveal { from { transform:translateY(12px); opacity:0; } to { transform:translateY(0); opacity:1; } }@keyframes success-pulse { to { box-shadow:0 0 0 18px rgba(115,222,202,.16),0 23px 55px rgba(0,0,0,.27); } }
@media (max-width:950px) { .sidebar { width:72px; padding:24px 10px; }.brand { padding:0 10px 32px; }.brand > span:last-child,.nav-item:not(.active)::after,.nav-item { font-size:0; }.nav-item span { font-size:19px; text-align:center; width:100%; }.sidebar-note { display:none; }main { margin-left:72px; }.stats-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:650px) { .sidebar { position:static; width:auto; height:61px; padding:12px 16px; flex-direction:row; align-items:center; }.brand { padding:0; }.brand > span:last-child { display:inline; font-size:16px; }nav { margin-left:auto; display:flex; gap:2px; }.nav-item { display:grid; place-items:center; padding:7px; }.nav-item span { font-size:17px; }main { margin:0; padding:28px 17px 40px; }.topbar { align-items:flex-start; }.date-block { max-width:100px; text-align:right; }.stats-grid,.workspace-grid,.lottery-section,.student-manager { grid-template-columns:1fr; }.panel { padding:21px; }.field-grid { grid-template-columns:1fr; }.late-field { max-width:none; }.section-heading { align-items:flex-start; }.search { max-width:150px; }.search input { width:105px; }.student-form { padding:0 0 20px; border-right:0; border-bottom:1px solid var(--line); }.csv-import { align-items:flex-start; flex-direction:column; }.student-list { grid-template-columns:1fr; }.lottery-section { min-height:auto; }.draw-result { min-height:190px; } }
.all-results { display:grid; gap:6px; max-height:190px; margin-top:13px; padding-top:12px; overflow-y:auto; border-top:1px solid rgba(184,231,220,.25); text-align:left; }.result-row { display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; padding:8px 10px; border-radius:4px; background:rgba(7,31,49,.38); }.result-student strong,.result-student span { display:block; margin:0; font-size:12px; }.result-student span { color:#9ec2c5; font-size:10px; }.result-penalty { color:#fff2ba; font-size:12px; font-weight:600; }.result-penalty.pending { color:#91aebb; font-weight:400; }
.draw-result-cell { color:#24766e; font-size:12px; font-weight:600; white-space:normal; }
.test-data-button { padding:8px 10px; border:1px solid rgba(255,255,255,.25); color:#cce9e1; background:rgba(255,255,255,.06); font-size:11px; }.test-data-button:hover { color:#fff; background:rgba(255,255,255,.14); }
.main-results { display:grid; gap:5px; width:100%; max-height:120px; margin-top:12px; padding-top:10px; overflow-y:auto; border-top:1px solid #b5e6d9; text-align:left; }.main-results .result-row { padding:6px 8px; background:#d9f1ea; }.main-results .result-penalty { color:#196c65; font-size:11px; }.main-results .result-student strong { color:#285c59; font-size:11px; }.main-results .result-student span { color:#678783; font-size:9px; }
.conditional-fields { min-height:0; }.conditional-fields:not(:has(label:not([hidden]))) { display:none; }
.calculation-preview { display:grid; grid-template-columns:auto auto 1fr; align-items:center; gap:8px 12px; margin-top:16px; padding:12px 14px; border-left:3px solid var(--gold); background:#fffaf0; }.calculation-preview span { color:#6e7885; font-size:12px; }.calculation-preview strong { color:#a66716; font-size:22px; }.calculation-preview small { color:#9a8665; font-size:11px; }.calculation-preview b { grid-column:1 / -1; color:#8b5b18; font-size:12px; }
.rules-panel { margin-bottom:22px; }.rule-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:20px; }.rule-grid article { padding:13px; border-left:3px solid #67cabb; background:#f3faf8; }.rule-grid strong,.rule-grid span { display:block; }.rule-grid strong { color:#275b58; font-size:13px; }.rule-grid span { margin-top:5px; color:#6b807f; font-size:11px; line-height:1.5; }.reward-list { display:grid; grid-template-columns:110px 1fr; gap:16px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); color:#71808b; font-size:12px; }.reward-list ol { display:grid; grid-template-columns:repeat(2,1fr); gap:7px 30px; margin:0; padding-left:20px; color:#435565; line-height:1.6; }
@media (max-width:900px) { .rule-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:650px) { .reward-list { grid-template-columns:1fr; gap:8px; }.reward-list ol { grid-template-columns:1fr; } }
.draw-ball { padding:14px; font-size:16px; line-height:1.35; text-align:center; }
.rules-link { color:var(--teal); text-decoration:none; font-size:12px; font-weight:600; }
.roster-page main { max-width:1320px; }.back-link { color:var(--teal); text-decoration:none; font-weight:600; }.roster-hero { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; padding:30px 34px; border:1px solid #cce9e1; border-radius:8px; background:linear-gradient(110deg,#e8f8f3,#f7fcfb); }.roster-hero h2 { margin:6px 0 8px; font-size:26px; }.roster-hero p:not(.eyebrow) { color:#64807c; font-size:13px; }.roster-hero > strong { color:#126e68; font-size:46px; line-height:1; }.roster-hero > strong small { font-size:14px; font-weight:500; }.roster-layout { display:grid; grid-template-columns:280px minmax(0,1fr); gap:22px; }.roster-layout .panel { min-width:0; }.roster-layout form { display:grid; gap:15px; margin-top:22px; }.roster-list-panel .student-list { grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:15px; }.roster-list-panel .csv-import { margin-top:20px; }.roster-list-panel .student-row { background:#fbfcfc; }.roster-page .student-actions { display:flex; align-items:center; gap:10px; }.roster-page .student-actions .text-button { padding:7px 2px; color:#687787; background:transparent; }.roster-page .student-actions .text-button:hover { color:var(--teal); }.roster-page .search { max-width:210px; }
@media (max-width:1000px) { .roster-list-panel .student-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:650px) { .roster-hero { align-items:flex-start; padding:23px; }.roster-hero > strong { font-size:32px; }.roster-layout { grid-template-columns:1fr; }.roster-list-panel .student-list { grid-template-columns:1fr; }.roster-page .section-heading { flex-wrap:wrap; }.roster-page .search { max-width:none; width:100%; } }