/* Black Alpaca palette. Surfaces and dividers use only palette transparencies. */
:root { --bg:#020002; --red:#EE4131; --yellow:#F9FE52; --green:#29A97C; --purple:#A883FD; --blue:#2472EE; --pale-blue:#D3EEF5; --ink:#fff; --muted:var(--pale-blue); --line:rgb(211 238 245 / .18); --surface:rgb(211 238 245 / .035); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--ink); font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background:radial-gradient(ellipse at 95% 0%,rgb(168 131 253 / .08),transparent 45%); }
a { color:var(--yellow); text-underline-offset:4px; }
button,input,select,textarea { font:inherit; }
button,.button { display:inline-flex; justify-content:center; align-items:center; gap:14px; min-height:48px; border:1px solid transparent; border-radius:8px; padding:11px 18px; cursor:pointer; background:var(--yellow); color:var(--bg); font-weight:750; text-decoration:none; line-height:1.35; transition:background .15s, border-color .15s; }
button:hover,.button:hover { background:var(--pale-blue); }
button.secondary,.button.secondary { background:var(--pale-blue); color:var(--bg); }
button.secondary:hover,.button.secondary:hover { background:var(--purple); }
button.ghost { background:transparent; border:1px solid var(--line); color:var(--pale-blue); }
button.ghost:hover { background:rgb(211 238 245 / .08); border-color:var(--pale-blue); }
button.danger,.button.danger { background:var(--red); color:var(--bg); }
.danger-link { color:var(--red); }
button:disabled { opacity:.55; cursor:wait; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.table-wrap:focus-visible { outline:3px solid var(--yellow); outline-offset:4px; }
.shell { width:min(100% - 64px,1200px); margin:auto; position:relative; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:28px; padding:24px 0; border-bottom:1px solid var(--line); }
.brand { color:var(--ink); font-size:1.15rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; flex-shrink:0; }
.brand span { color:var(--red); }
.brand small { display:block; color:var(--pale-blue); font-size:.65rem; letter-spacing:.1em; margin-top:2px; }
.header-tag { color:var(--pale-blue); font-size:.8rem; }
.nav { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.nav a { color:var(--pale-blue); font-size:.88rem; text-decoration:none; padding:12px 14px; border-radius:8px; }
.nav a:hover { background:var(--surface); }
.nav a[aria-current] { background:rgb(249 254 82 / .1); color:var(--yellow); }
.nav form { margin:0 0 0 8px; }
.nav button { font-size:.88rem; }
.page { padding:48px 0 72px; }
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.page-heading>.button { flex-shrink:0; }
.eyebrow { color:var(--purple); font-size:.72rem; font-weight:750; letter-spacing:.14em; text-transform:uppercase; margin:0 0 12px; }
.title { margin:0 0 20px; font-size:clamp(2.2rem,5.4vw,4.1rem); line-height:1.08; letter-spacing:-.045em; overflow-wrap:anywhere; }
.intro { max-width:650px; color:var(--pale-blue); margin:0; }
h2 { margin:0 0 12px; font-size:1.3rem; line-height:1.3; letter-spacing:-.025em; }
h3 { font-size:1.25rem; }
p { margin:0 0 14px; }
.grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:20px; margin:32px 0 24px; }
.card { min-width:0; grid-column:span 12; padding:28px; background:var(--surface); border:1px solid var(--line); border-radius:14px; }
.stat { grid-column:span 4; border-top:3px solid var(--purple); display:flex; flex-direction:column; justify-content:center; }
.stat strong { display:block; font-size:4rem; line-height:1.1; color:var(--yellow); letter-spacing:-.05em; margin:10px 0 14px; }
.next-step { grid-column:span 8; display:flex; flex-direction:column; justify-content:center; }
.scan-card { grid-column:span 7; }
.privacy-card { grid-column:span 5; border-top:3px solid var(--green); }
.privacy-card p { color:var(--pale-blue); }
.scan-guide { grid-column:span 5; display:flex; flex-direction:column; gap:20px; }
.scan-guide .steps { margin-bottom:0; }
label { display:block; margin:20px 0 8px; font-size:.9rem; font-weight:650; }
input,select,textarea { width:100%; min-height:48px; background:var(--bg); border:1px solid rgb(211 238 245 / .4); border-radius:8px; padding:11px 12px; color:var(--ink); }
input:hover,select:hover,textarea:hover { border-color:var(--pale-blue); }
input::placeholder,textarea::placeholder { color:rgb(211 238 245 / .6); }
input[aria-invalid] { border-color:var(--red); }
textarea { min-height:90px; resize:vertical; }
select { color-scheme:dark; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; align-items:center; }
.full-width { width:100%; }
.notice { margin:20px 0; padding:16px 18px; border-left:3px solid var(--yellow); background:rgb(249 254 82 / .05); border-radius:0 8px 8px 0; overflow-wrap:anywhere; }
.error { border-color:var(--red); color:var(--ink); background:rgb(238 65 49 / .08); }
.login-layout { display:grid; grid-template-columns:1.15fr 1fr; align-items:center; gap:72px; padding:72px 0 88px; min-height:calc(100svh - 180px); }
.login-story .title { font-size:clamp(2.6rem,4.4vw,4rem); }
.login-story .title span { color:var(--yellow); }
.login { padding:32px; background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--yellow); border-radius:14px; }
.login h2 { font-size:1.75rem; }
.password-field { position:relative; }
.password-field input { padding-right:100px; }
.password-toggle { position:absolute; right:5px; top:5px; min-height:38px; padding:6px 10px; font-size:.8rem; }
.help-text { font-size:.82rem; line-height:1.6; color:var(--pale-blue); margin:10px 0 0; }
.steps { list-style:none; padding:0; margin:30px 0; display:grid; gap:18px; }
.steps li { display:flex; align-items:baseline; gap:14px; color:var(--pale-blue); font-size:.9rem; }
.steps span { color:var(--purple); font-weight:750; font-size:.8rem; }
.privacy-line { border-top:1px solid var(--line); padding-top:20px; margin:24px 0 0; font-size:.8rem; color:var(--pale-blue); }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:20px; }
.section-heading h2 { margin:0; }
.count-badge { display:inline-flex; white-space:nowrap; padding:5px 10px; border:1px solid var(--line); border-radius:6px; font-size:.75rem; color:var(--purple); }
table { width:100%; border-collapse:collapse; font-size:.87rem; }
th,td { padding:16px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { color:var(--pale-blue); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; background:rgb(211 238 245 / .035); }
td { color:var(--pale-blue); overflow-wrap:anywhere; }
tr:last-child td { border-bottom:0; }
tbody tr:hover { background:rgb(211 238 245 / .025); }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:10px; }
.table-wrap table { min-width:680px; }
#lead-table { min-width:1050px; }
.contact-name { color:var(--ink); font-weight:650; min-width:140px; }
.time-cell { white-space:nowrap; }
.lead-note { min-width:220px; }
.lead-note textarea { min-height:72px; font-size:.85rem; }
.lead-note button { min-height:40px; padding:8px 12px; margin-top:8px; font-size:.8rem; }
.lead-note [role=status] { display:block; }
.search-label { margin-top:0; }
#lead-search { max-width:520px; }
#search-status { margin-bottom:20px; }
.table-hint { display:none; font-size:.78rem; color:var(--pale-blue); }
.muted { color:var(--muted); }
.status { padding:5px 9px; display:inline-block; font-size:.75rem; font-weight:750; border-radius:6px; }
.status.on { background:var(--green); color:var(--bg); }
.status.off { background:var(--red); color:var(--bg); }
.empty-state { text-align:center; padding:40px 16px; }
.empty-state p { max-width:480px; margin:0 auto 24px; }
.empty-symbol { display:inline-flex; justify-content:center; align-items:center; width:54px; height:54px; background:rgb(168 131 253 / .1); color:var(--purple); border:1px solid var(--purple); border-radius:12px; font-size:1.7rem; }
.result { margin-top:20px; display:none; }
.result.show { display:block; }
.result.ok { border-left:4px solid var(--green); }
.result.warn { border-left:4px solid var(--yellow); }
.result.bad { border-left:4px solid var(--red); }
.result strong { font-size:1.1rem; }
.result p { margin:12px 0 0; overflow-wrap:anywhere; }
.camera { width:100%; min-height:260px; display:flex; align-items:center; justify-content:center; background:var(--bg); border:1px solid rgb(168 131 253 / .35); border-radius:10px; margin:20px 0 0; overflow:hidden; }
.camera video { display:block; width:100%; max-height:420px; object-fit:cover; }
.camera-placeholder { padding:28px; text-align:center; max-width:360px; }
.camera-placeholder strong { display:block; font-size:.95rem; }
.camera-placeholder p { margin:10px 0 0; font-size:.82rem; color:var(--pale-blue); }
.qr-frame { display:block; color:var(--purple); font-size:3.5rem; line-height:1; margin-bottom:24px; }
.camera-actions { margin-top:16px; }
.manual-entry { border-top:1px solid var(--line); margin-top:24px; padding-top:4px; }
.manual-fields { display:flex; gap:10px; margin-top:12px; }
.manual-fields input { min-width:0; }
.text-link { display:inline-block; padding:10px 0; }
.company-removal { max-width:760px; margin:auto; }
.company-removal .intro+.intro { margin-top:16px; }
.company-removal .card { margin-top:24px; }
.company-removal .confirmation { display:flex; align-items:flex-start; gap:12px; }
.company-removal .confirmation input { width:22px; min-height:22px; flex-shrink:0; accent-color:var(--red); margin-top:3px; }
#scan-followup { border-top:1px solid var(--line); margin-top:24px; padding-top:4px; }
#scan-followup>.help-text { margin:20px 0; }
.eventbrite-sync { padding:22px; margin:28px 0 0; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.eventbrite-sync .actions { margin-top:0; }
.admin-tables>.card { margin-top:24px; }
.table-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; min-width:230px; }
.table-actions a { padding:10px 4px; font-size:.8rem; }
.table-actions button { font-size:.8rem; }
.admin-create { grid-template-columns:1fr 1fr; }
.admin-create>.card { grid-column:auto; }
.footer { display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); padding:24px 0; color:var(--pale-blue); font-size:.75rem; }
.skip-link { position:fixed; top:12px; left:12px; transform:translateY(-200%); background:var(--yellow); color:var(--bg); padding:12px 18px; z-index:10; }
.skip-link:focus { transform:translateY(0); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:1000px) { .login-layout { gap:36px; } .table-hint { display:block; } }
@media(max-width:760px) { .shell { width:calc(100% - 32px); } .topbar { flex-direction:column; align-items:flex-start; gap:18px; padding:20px 0; } .nav { width:100%; gap:4px; } .nav a { padding:10px; font-size:.8rem; } .nav form { margin-left:auto; } .nav button { padding:9px 12px; min-height:44px; } .page { padding:32px 0 48px; } .page-heading { flex-direction:column; align-items:flex-start; } .page-heading>.button { width:100%; } .grid { gap:16px; margin-top:24px; } .stat,.next-step,.scan-card,.privacy-card,.scan-guide { grid-column:span 12; } .card { padding:22px; } .login-layout { grid-template-columns:1fr; gap:28px; padding:36px 0 48px; min-height:0; } .login-story .title { font-size:2.5rem; } .login-story .steps,.login-story .privacy-line { display:none; } .login { padding:24px; } .header-tag { font-size:.75rem; } .admin-create { grid-template-columns:1fr; } .footer { flex-direction:column; gap:6px; } .section-heading { flex-wrap:wrap; } .camera { min-height:240px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; scroll-behavior:auto !important; } }