/* Hallmark · macrostructure: Workbench · tone: utilitarian · anchor hue: green
 * genre: modern-minimal · theme: existing brand · nav: N9 adapted app header · footer: Ft2 existing credit
 * pre-emit critique: P5 H4 E4 S5 R5 V4
 * audience: event staff · use: continuous scan and manual check-in · enrichment: none
 */
@import url("/tokens.css");
:root{--bg:#f4f6f3;--ink:#19392e;--muted:#66776f;--accent:#246d50;--line:#dfe6de;--white:#fff;--pale:#eaf3e6;--red:#a23930}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}button,input,select{font:inherit}button,.button{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:10px 17px;background:#fff;color:var(--ink);cursor:pointer;text-decoration:none;font-weight:600}button:hover,.button:hover{background:var(--pale)}button:disabled{opacity:.45;cursor:not-allowed}.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.primary:hover{background:#1b543d}input,select{border:1px solid #cdd8ce;border-radius:8px;background:#fff;padding:11px 12px;color:var(--ink);min-width:0}input:focus,select:focus,button:focus-visible{outline:3px solid #c4dbc1;outline-offset:2px}label{display:grid;gap:8px;font-weight:600}h1,h2,h3,p{margin:0 0 12px}h1{font-size:30px;letter-spacing:-.6px}h2{font-size:21px}h3{font-size:17px}.muted,small{color:var(--muted);font-size:13px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700;color:var(--muted);margin-bottom:8px}.brand{display:block;text-decoration:none;color:inherit;font-size:30px;font-weight:800;letter-spacing:-1px}.brand small{display:block;font-size:10px;font-weight:500;letter-spacing:2px}.login-layout{min-height:100vh;display:grid;grid-template-columns:1.15fr 1fr;align-items:center;max-width:1240px;margin:auto;padding:60px;gap:100px}.login-intro .brand{margin-bottom:90px}.login-intro h1{font-size:46px;line-height:1.45;margin:18px 0 26px}.login-intro>p:not(.eyebrow){color:var(--muted);line-height:2}.steps{display:flex;gap:25px;margin-top:60px;font-size:12px;color:var(--muted)}.login-card{background:#fff;padding:38px;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 60px #19392e08;display:grid;gap:20px}.login-card h2{font-size:26px;margin:0}.login-card p{margin:0}.error{color:var(--red)}[hidden]{display:none!important}aside{position:fixed;inset:0 auto 0 0;width:216px;background:#fff;border-right:1px solid var(--line);padding:30px 20px;display:flex;flex-direction:column}aside .brand{padding:0 13px}nav{display:grid;gap:8px;margin-top:48px}nav button{justify-content:flex-start;border:0;background:transparent;padding:13px 16px;font-size:14px}nav button.active{background:var(--pale);color:var(--accent)}.aside-bottom{margin-top:auto;padding:20px 10px 0;display:grid;gap:12px;color:var(--muted);font-size:13px}.aside-bottom small{font-size:10px}.text-button{padding:0;justify-content:flex-start;background:none;border:0;font-size:13px}.workspace-main{margin-left:216px;max-width:1600px;padding:38px 42px 60px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:28px;border-bottom:1px solid var(--line);margin-bottom:24px}.topbar h1{margin:0 0 5px}.badge{font-size:12px;font-weight:600;padding:5px 10px;border-radius:20px;background:var(--pale);white-space:nowrap}.badge.warn{background:#f9ead7;color:#8e5c1b}.notice{border:1px solid #e4dcbf;background:#fcf8eb;border-radius:8px;padding:12px 16px;font-size:13px;color:#786132;margin-bottom:24px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 18px}.section-heading h2{margin:0}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:30px}.stats article{background:#fff;border:1px solid var(--line);padding:21px 24px;border-radius:12px}.stats p{font-size:13px;color:var(--muted);margin:0}.stats strong{display:block;font-size:42px;line-height:1.5;font-weight:650;font-variant-numeric:tabular-nums}.stats em{font-size:22px;font-style:normal}.stats .accent{background:var(--ink);color:#fff;border-color:var(--ink)}.stats .accent p,.stats .accent small{color:#bcd0c2}.panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px}.toolbar{display:flex;gap:10px;align-items:center;margin:18px 0;flex-wrap:wrap}.toolbar input{flex:1;min-width:150px}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;font-size:13px;text-align:left}th{font-weight:500;color:var(--muted);background:#f7f9f5}th,td{padding:15px 12px;border-bottom:1px solid var(--line);white-space:nowrap}td small{display:block;font-size:11px}td button{font-size:12px;padding:6px 10px;margin:2px}.pagination{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:18px}.pagination button{font-size:12px;padding:6px 10px;margin-left:6px}.empty{padding:35px;text-align:center;color:var(--muted)}.scan-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.candidate{padding:14px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:14px}.candidate p{margin:0}.result{padding:18px;border-radius:10px;background:var(--pale);margin-top:12px}.result.already{background:#fff0d8}.result.error{background:#fff0ec}.result strong{display:block;font-size:22px}.upload-zone{display:block;background:#f6f9f3;border:1px dashed #a9c0a7;border-radius:10px;padding:35px 25px;margin:22px 0}.upload-zone input{display:block;margin-top:16px;max-width:100%;background:#fff}.form-panel{max-width:680px;display:grid;gap:20px}.check-label{display:flex;align-items:center;gap:10px}.form-panel button{justify-self:start}blockquote{margin:22px 0;padding:20px;border-left:3px solid var(--accent);background:var(--bg);font-size:14px;word-break:break-word}#toast{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:20;background:var(--ink);color:#fff;border-radius:10px;padding:14px 24px;box-shadow:0 8px 30px #0002;max-width:90vw}#toast.error{background:var(--red)}dialog{border:1px solid var(--line);border-radius:14px;padding:28px;max-width:480px;width:calc(100% - 30px);color:var(--ink)}dialog::backdrop{background:#162b2466}dialog form{margin-top:18px}dialog h3{font-size:22px}dialog a{color:var(--accent)}.ticket-body{display:grid;place-items:center;min-height:100vh;padding:20px}.ticket{width:100%;max-width:420px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:35px 24px}.ticket img{display:block;width:100%;max-width:320px;height:auto;margin:18px auto}.ticket h1{font-size:24px}.ticket h2{font-size:26px}#reader{overflow:hidden;border-radius:10px}#reader:empty{min-height:150px;background:var(--bg)}#reader video{max-width:100%}
@media(max-width:950px){.workspace-main{padding:28px 24px;margin-left:180px}aside{width:180px;padding:25px 12px}.stats{grid-template-columns:repeat(2,1fr)}.scan-grid{grid-template-columns:1fr}.login-layout{padding:35px;gap:40px}.login-intro h1{font-size:35px}.steps{gap:12px}}
@media(max-width:650px){aside{position:static;width:100%;padding:15px 18px;border-right:0;border-bottom:1px solid var(--line)}aside .brand{font-size:23px;padding:0}aside .brand small{display:none}nav{display:flex;gap:4px;overflow:auto;margin-top:12px}nav button{white-space:nowrap;padding:8px 12px;font-size:12px}.aside-bottom{position:absolute;top:20px;right:18px;margin:0;padding:0;display:flex;align-items:center;gap:12px}.aside-bottom small{display:none}.workspace-main{margin-left:0;padding:22px 16px}.topbar{align-items:flex-start;padding-bottom:18px}.topbar h1{font-size:23px}.stats{gap:10px;margin-bottom:22px}.stats article{padding:16px}.stats strong{font-size:34px}.panel{padding:17px}.section-heading{flex-wrap:wrap}.section-heading h2{font-size:18px}.toolbar button{padding:10px 13px}.login-layout{display:block;padding:35px 22px}.login-intro .brand{margin-bottom:35px}.login-intro h1{font-size:30px}.login-intro>.eyebrow,.steps,.login-intro>p:not(.eyebrow){display:none}.login-card{padding:25px;margin-top:30px}.pagination{flex-wrap:wrap}}

.roster-notice,.walkin-entry{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:20px}.roster-notice p,.walkin-entry p{margin:4px 0 0}.walkin-entry{padding:20px;border:1px solid #bfd5bb;background:var(--pale);border-radius:12px}.walkin-entry h3{margin:0}.walkin-form{display:grid;gap:14px}#attendance-breakdown{margin:-12px 0 22px}@media(max-width:650px){.roster-notice,.walkin-entry{align-items:stretch;flex-direction:column}.roster-notice button,.walkin-entry button{width:100%}}
/* Mobile operation layer; existing desktop stylesheet stays intact. */
:root{--bg:var(--color-paper);--ink:var(--color-ink);--muted:var(--color-muted);--accent:var(--color-accent);--line:var(--color-rule);--white:var(--color-surface);--pale:var(--color-pale);--red:var(--color-error)}
html,body{overflow-x:clip}
body{font-family:var(--font-body)}
h1,h2,h3{font-family:var(--font-display);font-style:normal;overflow-wrap:anywhere;min-width:0}
button,.button{white-space:nowrap;min-height:48px;min-width:48px;touch-action:manipulation;transition:transform var(--dur-short) var(--ease-out)}
button:active:not(:disabled),.button:active{transform:translateY(1px)}
input,select{font-size:var(--text-body);min-height:48px}
input[type=checkbox]{min-height:24px;min-width:24px;accent-color:var(--accent)}
button:focus-visible,.button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
button[aria-busy=true]{cursor:progress}
button:disabled{opacity:.55}
.field-label{flex-basis:100%;font-size:var(--text-sm);margin-bottom:calc(-1 * var(--space-3xs))}
#camera-status{min-height:1.65em;margin-bottom:var(--space-2xs);overflow-wrap:anywhere}
#camera-status[data-state=error]{color:var(--color-error)}
#camera-status[data-state=ready]{color:var(--accent)}
.camera-controls{margin:var(--space-xs) 0 var(--space-2xs)}
.camera-controls button{flex:1}
.camera-panel>p{margin-bottom:var(--space-2xs)}
.scan-grid{grid-template-columns:minmax(0,1fr)}
.scan-grid>.panel,.candidate>div,.topbar>div{min-width:0}
.candidate>div{overflow-wrap:anywhere}
.candidate button{flex-shrink:0}
.result{overflow-wrap:anywhere}
.result:empty{display:none}
#reader:empty{min-height:112px}
#reader video{width:100%!important;max-height:36svh;object-fit:contain}
#reader{background:var(--bg)}
dialog{max-height:calc(100dvh - 32px);overflow:auto;overflow-wrap:anywhere}
dialog .primary{width:100%}
#toast{overflow-wrap:anywhere}
.login-layout,.ticket-body{min-height:100dvh}
#workspace aside{position:static;width:100%;padding:var(--space-2xs) max(var(--space-sm),env(safe-area-inset-left));display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-3xs) var(--space-xs);border-right:0;border-bottom:1px solid var(--line)}
#workspace aside .brand{padding:0;font-size:23px;align-self:center}
#workspace aside .brand small{display:none}
#workspace .aside-bottom{position:static;grid-column:2;grid-row:1;display:flex;justify-content:flex-end;align-items:center;gap:var(--space-2xs);margin:0;padding:0;font-size:12px}
#workspace .aside-bottom small{display:none}
#workspace .text-button{min-height:44px;font-size:12px;padding:var(--space-2xs)}
#workspace nav{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:var(--space-3xs);margin:0;overflow:visible}
#workspace nav button{flex:1 0 auto;justify-content:center;padding:var(--space-2xs) var(--space-xs);font-size:13px;min-height:44px}
#workspace .workspace-main{margin-left:0;padding:var(--space-sm) max(var(--space-sm),env(safe-area-inset-right)) max(var(--space-lg),env(safe-area-inset-bottom))}
#workspace .topbar{padding-bottom:var(--space-xs);margin-bottom:var(--space-xs);gap:var(--space-2xs);align-items:flex-start}
#workspace .topbar h1{font-size:var(--text-heading)}
#workspace .topbar p{font-size:var(--text-sm);margin-bottom:0;overflow-wrap:anywhere}
#workspace .notice{padding:var(--space-2xs) var(--space-xs);margin-bottom:var(--space-sm);font-size:12px;background:var(--color-warning-paper);color:var(--color-warning)}
#workspace .section-heading{flex-direction:column;align-items:flex-start;gap:var(--space-3xs);margin-bottom:var(--space-xs)}
#workspace .section-heading h2{font-size:18px}
#workspace .panel{padding:var(--space-sm)}
#workspace[data-tab=scan] .topbar{border-bottom:0;padding-bottom:0}
#workspace[data-tab=scan] #scan>.section-heading{display:none}
#workspace[data-tab=scan] .notice{margin-bottom:var(--space-xs)}
#workspace[data-tab=scan] .scan-grid{gap:var(--space-sm)}
#tail-form{margin:var(--space-xs) 0;flex-wrap:wrap}
#tail-form input{width:0;flex:1;min-width:0}
#tail-form button{flex-shrink:0}
#search-form input{width:100%;flex-basis:100%;min-width:0}
#guest-rows,#guest-rows tr,#guest-rows td{display:block;white-space:normal}
.table-wrap:has(#guest-rows) thead{display:none}
#guest-rows tr{border-bottom:1px solid var(--line);padding:var(--space-xs) 0}
#guest-rows td{border:0;padding:var(--space-3xs) 0;overflow-wrap:anywhere}
#guest-rows td[data-label]::before{content:attr(data-label) "：";color:var(--muted)}
#guest-rows .guest-actions{display:flex;flex-wrap:wrap;gap:var(--space-2xs);margin-top:var(--space-2xs)}
#guest-rows button,.pagination button{min-height:44px}
#guest-rows .empty{padding:var(--space-md) var(--space-2xs)}
#import-result,#sms-counts{overflow:auto}
#search-form select{flex:1;min-width:0}
@media(min-width:48rem){.scan-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}#search-form input{width:auto;flex:1}#workspace .section-heading{flex-direction:row;align-items:center}#guest-rows{display:table-row-group}#guest-rows tr{display:table-row;padding:0}#guest-rows td{display:table-cell;white-space:nowrap;padding:15px 12px;border-bottom:1px solid var(--line)}.table-wrap:has(#guest-rows) thead{display:table-header-group}#guest-rows td[data-label]::before{content:none}#guest-rows .guest-actions{display:table-cell;margin:0}}
@media(min-width:60rem){#workspace aside{position:fixed;width:216px;padding:30px 20px;display:flex;gap:0;border-right:1px solid var(--line);border-bottom:0}#workspace aside .brand{font-size:30px;padding:0 13px;align-self:stretch}#workspace aside .brand small{display:block}#workspace nav{display:grid;margin-top:48px;gap:8px}#workspace nav button{justify-content:flex-start}#workspace .aside-bottom{display:grid;margin-top:auto;padding:20px 10px 0;justify-content:stretch;font-size:13px}#workspace .aside-bottom small{display:block}#workspace .text-button{justify-content:flex-start}#workspace .workspace-main{margin-left:216px;padding:38px 42px 60px}#workspace .topbar h1{font-size:30px}#workspace .panel{padding:24px}#workspace .topbar{padding-bottom:28px;margin-bottom:24px}#reader video{max-height:420px}}
@media(orientation:landscape) and (max-height:32rem) and (min-width:40rem){#workspace aside{padding-block:var(--space-3xs);grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-2xs)}#workspace nav{grid-column:2;grid-row:1}#workspace .aside-bottom{grid-column:3}#workspace .aside-bottom span{display:none}#workspace .workspace-main{padding-top:var(--space-2xs)}#workspace[data-tab=scan] .scan-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}#reader video{max-height:36svh}.camera-panel>p:not(#camera-status){display:none}#workspace[data-tab=scan] .camera-panel h3{font-size:16px;margin-bottom:0}}
@media(prefers-reduced-motion:reduce){button,.button{transition:none}button:active:not(:disabled),.button:active{transform:none}}
/* Keep scanning first when the shared roster and walk-in entry are present. */
#scan{display:flex;flex-direction:column;gap:var(--space-sm)}
#scan .scan-grid{order:-1}
#scan .roster-notice,#scan .walkin-entry{margin-bottom:0;min-width:0}
#source-filter{min-width:0;flex:1}
@media(min-width:60rem){#scan{display:block}#scan .roster-notice,#scan .walkin-entry{margin-bottom:20px}}