@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --ink:#18211f; --muted:#77817a; --paper:#f5f1e8; --panel:#fffdf8; --sage:#66816e; --mint:#dce9dd; --coral:#e57b5c; --line:#e6e1d6; }
* { box-sizing:border-box; }
html,body { overflow-x:hidden; }
body { width:100%; margin:0; background:var(--paper); color:var(--ink); font-family:Manrope,"Microsoft YaHei",sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; }
.admin-page { width:100%; min-height:100vh; overflow-x:hidden; background:radial-gradient(circle at 90% 0%, #e3ebdd 0, transparent 28%), var(--paper); }
.topbar { height:92px; padding:0 clamp(22px,5vw,72px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(24,33,31,.08); }
.icon-button,.close-button { border:0; background:transparent; color:var(--ink); font-size:34px; line-height:1; width:42px; height:42px; padding:0; }
.icon-button:hover,.close-button:hover { color:var(--coral); }
.brand-lockup { text-align:center; }
.eyebrow,.section-kicker,.event-type { display:block; margin:0 0 4px; font:500 10px/1.2 "DM Mono",monospace; letter-spacing:1.7px; color:var(--sage); }
.brand-lockup h1 { margin:0; font-size:18px; letter-spacing:.5px; }
.online-indicator { width:10px; height:10px; border-radius:50%; background:var(--sage); box-shadow:0 0 0 5px var(--mint); margin-right:6px; }
.content-shell { max-width:680px; margin:0 auto; padding:28px 16px 48px; }
.welcome-row { display:flex; justify-content:space-between; align-items:end; margin-bottom:32px; }
.welcome-row h2 { font-size:27px; line-height:1.25; margin:8px 0 0; letter-spacing:-1.2px; }
time { color:var(--muted); font:500 11px "DM Mono",monospace; }
.panel { min-width:0; background:rgba(255,253,248,.82); border:1px solid var(--line); border-radius:8px; padding:27px; box-shadow:0 12px 35px rgba(67,72,55,.045); }
.panel-heading { display:flex; align-items:center; gap:11px; margin-bottom:28px; }
.panel-heading span { color:var(--coral); font:500 11px "DM Mono",monospace; }
.panel-heading h3 { margin:0; font-size:14px; letter-spacing:.3px; }
.profile-row { display:flex; align-items:center; padding-bottom:28px; border-bottom:1px solid var(--line); }
.avatar,.attendee-avatar { width:64px; height:64px; display:grid; place-items:center; border-radius:50%; background:var(--sage); color:#fff; font-size:25px; font-weight:700; margin-right:16px; }
.profile-info { display:flex; flex-direction:column; gap:5px; }
.profile-info strong { font-size:20px; }
.profile-info span { color:var(--muted); font-size:12px; }
.info-list { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:23px 0 0; }
dt { color:var(--muted); font-size:11px; margin-bottom:7px; } dd { margin:0; font-size:12px; font-weight:600; overflow-wrap:anywhere; }
.event-panel { position:relative; overflow:hidden; background:var(--ink); color:#fffdf8; border-color:var(--ink); }
.event-panel:after { content:""; position:absolute; right:-48px; top:-56px; width:170px; height:170px; border:1px solid rgba(255,255,255,.12); border-radius:50%; box-shadow:0 0 0 22px rgba(255,255,255,.035),0 0 0 44px rgba(255,255,255,.025); }
.event-panel .panel-heading span,.event-panel .event-type { color:#edaa90; }
.event-panel h2 { font-size:30px; margin:8px 0 13px; letter-spacing:-.8px; }
.event-meta { display:flex; align-items:center; gap:12px; margin:0; color:#b9c4bc; font-size:12px; }
.event-meta i { width:3px; height:3px; border-radius:50%; background:var(--coral); }
.stats-row { display:flex; gap:30px; margin:31px 0 26px; }
.stat { display:flex; flex-direction:column; gap:4px; min-width:68px; }
.stat strong { font-size:29px; line-height:1; }
.stat span { color:#aab5ad; font-size:11px; }
.scan-button { position:relative; z-index:1; display:flex; align-items:center; gap:11px; width:100%; padding:14px 17px; border:0; border-radius:4px; background:var(--coral); color:#fff; text-align:left; font-weight:700; font-size:13px; transition:transform .2s,background .2s; }
.scan-button:hover { transform:translateY(-2px); background:#ef8a6c; }
.scan-button b { margin-left:auto; font-size:20px; font-weight:400; }
.qr-mark { font-size:23px; line-height:0; }
.sign-actions { position:relative; z-index:1; display:grid; gap:9px; }
.manual-sign-button { width:100%; padding:12px 17px; border:1px solid rgba(255,255,255,.25); border-radius:4px; background:transparent; color:#fff; font-size:13px; font-weight:700; }
.manual-sign-button:hover { border-color:var(--coral); color:#edaa90; }
.attendees-panel { margin-top:18px; }
.attendees-heading { display:flex; justify-content:space-between; align-items:flex-start; }
.list-summary { display:flex; align-items:center; gap:18px; color:var(--muted); font-size:11px; }
.list-summary strong { color:var(--ink); font-size:12px; }
.list-summary span { white-space:nowrap; }
.list-summary b { color:var(--ink); }
.filter-button { border:0; padding:5px 7px; border-radius:4px; background:transparent; color:var(--muted); font-size:11px; white-space:nowrap; }
.filter-button:hover,.filter-button.active { background:var(--mint); color:var(--ink); }
.filter-button.active b { color:var(--ink); }
.dot { display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:5px; }.checked-dot{background:var(--sage)}.pending-dot{background:var(--coral)}
.attendee-list { display:grid; grid-template-columns:1fr; }
.list-message { grid-column:1 / -1; margin:0; padding:25px 0; color:var(--muted); font-size:12px; text-align:center; }
.pagination { display:flex; align-items:center; justify-content:center; gap:18px; margin-top:18px; color:var(--muted); font:500 11px "DM Mono",monospace; }
.page-button { border:1px solid var(--line); border-radius:4px; padding:8px 12px; background:var(--panel); color:var(--ink); font-size:11px; }
.page-button:hover:not(:disabled) { border-color:var(--sage); color:var(--sage); }
.page-button:disabled { cursor:not-allowed; opacity:.45; }
.manual-modal { display:none; position:fixed; inset:0; z-index:12; align-items:center; justify-content:center; padding:20px; background:rgba(24,33,31,.72); backdrop-filter:blur(8px); }
.manual-modal.open { display:flex; }
.manual-dialog { width:min(100%,420px); padding:25px; border-radius:10px; background:var(--panel); }
.manual-status { min-height:18px; margin:0 0 13px; color:var(--muted); font-size:12px; }
.manual-form { display:flex; gap:8px; }
.manual-form input { width:100%; min-width:0; border:1px solid var(--line); border-radius:4px; padding:10px 12px; outline:none; background:#fff; font-size:16px; }
.manual-form input:focus { border-color:var(--sage); }
.manual-form button { flex:0 0 auto; min-width:58px; border:0; border-radius:4px; padding:0 16px; background:var(--sage); color:#fff; font-size:13px; font-weight:700; white-space:nowrap; }
.attendee-item { display:flex; align-items:center; justify-content:space-between; min-width:0; padding:16px 0; border-top:1px solid var(--line); }
.attendee-left { display:flex; align-items:center; min-width:0; }.attendee-avatar { flex:0 0 42px; width:42px; height:42px; font-size:16px; margin-right:12px; background:#d8e4d9; color:var(--sage); }.attendee-info { min-width:0; display:flex; flex-direction:column; gap:4px; }.attendee-name { font-size:13px; font-weight:700; }.attendee-meta { color:var(--muted); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.status-badge { font:500 10px "DM Mono",monospace; white-space:nowrap; }.status-badge.checked { color:var(--sage); }.status-badge.pending { color:var(--coral); }
.scanner-modal { display:none; position:fixed; inset:0; z-index:10; align-items:center; justify-content:center; padding:20px; background:rgba(24,33,31,.75); backdrop-filter:blur(8px); }.scanner-modal.open { display:flex; }.scanner-dialog { width:min(100%,460px); padding:25px; border-radius:10px; background:var(--panel); }.scanner-header { display:flex; align-items:flex-start; justify-content:space-between; }.scanner-header h2 { margin:5px 0 22px; font-size:25px; }.camera-frame { position:relative; height:min(62vh,390px); overflow:hidden; border-radius:5px; background:#101614; }.camera-frame video { width:100%; height:100%; object-fit:cover; }.camera-frame p { position:absolute; right:0; bottom:14px; left:0; margin:0; color:#fff; text-align:center; font-size:11px; }.scan-corners { position:absolute; inset:20% 15%; border:2px solid rgba(255,255,255,.9); clip-path:polygon(0 0,25% 0,25% 4%,4% 4%,4% 25%,0 25%,0 0,100% 0,100% 25%,96% 25%,96% 4%,75% 4%,75% 0,100% 0,100% 100%,75% 100%,75% 96%,96% 96%,96% 75%,100% 75%,100% 100%,0 100%,0 75%,4% 75%,4% 96%,25% 96%,25% 100%,0 100%); }.scan-line { position:absolute; left:17%; right:17%; top:50%; height:2px; background:var(--coral); box-shadow:0 0 12px var(--coral); animation:scan 2.3s ease-in-out infinite; }.scanner-status { min-height:18px; margin:13px 0; color:var(--sage); font-size:12px; }.manual-entry { padding-top:16px; border-top:1px solid var(--line); }.manual-entry label { display:block; margin-bottom:8px; color:var(--muted); font-size:11px; }.manual-entry div { display:flex; gap:8px; }.manual-entry input { width:100%; min-width:0; border:1px solid var(--line); border-radius:4px; padding:10px 12px; outline:none; background:#fff; font-size:16px; }.manual-entry input:focus { border-color:var(--sage); }.manual-entry button { flex:0 0 auto; min-width:58px; border:0; border-radius:4px; padding:0 18px; background:var(--sage); color:#fff; font-size:13px; font-weight:700; white-space:nowrap; }
.toast { position:fixed; z-index:20; left:50%; bottom:25px; padding:12px 18px; border-radius:4px; background:var(--ink); color:#fff; font-size:12px; opacity:0; pointer-events:none; transform:translate(-50%,15px); transition:.25s; }.toast.show { opacity:1; transform:translate(-50%,0); }
.result-modal { display:none; position:fixed; inset:0; z-index:15; align-items:center; justify-content:center; padding:20px; background:rgba(24,33,31,.72); backdrop-filter:blur(8px); }.result-modal.open { display:flex; }.result-dialog { width:min(100%,440px); padding:27px; border-radius:10px; background:var(--panel); }.result-dialog h2 { margin:7px 0 18px; font-size:25px; }.result-dialog pre { max-height:42vh; overflow:auto; margin:0 0 22px; padding:15px; border:1px solid var(--line); border-radius:5px; background:#f5f1e8; color:var(--ink); font:12px/1.7 "DM Mono",monospace; white-space:pre-wrap; overflow-wrap:anywhere; }.result-close { width:100%; border:0; border-radius:4px; padding:13px; background:var(--sage); color:#fff; font-size:13px; font-weight:700; }
 .sign-user-info { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin:0 0 18px; overflow:hidden; border:1px solid var(--line); border-radius:5px; background:var(--line); }
.sign-user-info div { display:flex; flex-direction:column; gap:5px; min-width:0; padding:11px 12px; background:var(--panel); }
.sign-user-info span { color:var(--muted); font-size:11px; }
.sign-user-info strong { overflow-wrap:anywhere; font-size:13px; }
@keyframes scan { 0%,100%{transform:translateY(-100px);opacity:.3} 50%{transform:translateY(100px);opacity:1} }
@media (min-width:701px) { .content-shell{max-width:1120px;padding:46px 28px 70px}.welcome-row h2{font-size:40px}.attendee-list{grid-template-columns:1fr 1fr;column-gap:44px} }
@media (max-width:700px) { .topbar{height:70px;padding:0 16px}.content-shell{padding:28px 16px 45px}.welcome-row{display:block;margin-bottom:25px}.welcome-row time{display:block;margin-top:14px}.panel{padding:21px}.event-panel h2{font-size:26px}.attendees-heading{display:block}.list-summary{margin:-10px 0 17px;gap:12px}.attendee-item{padding:13px 0}.scanner-dialog{padding:20px}.camera-frame{height:58vh} }
@media (max-width:700px) { .result-dialog{padding:20px}.sign-user-info{grid-template-columns:1fr} }
