@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap');
:root { --ink:#25231e; --paper:#f2ebde; --card:#faf6ed; --red:#b84831; --olive:#667057; --line:#cfc5b4; --muted:#786f62; }
* { box-sizing:border-box; }
html { background:var(--paper); color:var(--ink); font-family:'DM Sans',sans-serif; }
body { margin:0; min-height:100vh; display:flex; flex-direction:column; }
.grain { position:fixed; inset:0; opacity:.12; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); }
.topbar, footer { position:relative; display:flex; justify-content:space-between; align-items:center; padding:22px clamp(24px,5vw,72px); border-bottom:1px solid var(--line); }
.brand { color:inherit; text-decoration:none; display:flex; align-items:center; gap:11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:13px; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--red); color:white; font-family:'Fraunces',serif; font-size:20px; }
.user-area { display:flex; align-items:center; gap:18px; font-size:14px; }
.staff-link { color:var(--muted); font-size:12px; font-weight:600; letter-spacing:.04em; text-decoration:none; white-space:nowrap; }.staff-link:hover { color:var(--red); }
.app-nav { display:flex; gap:4px; margin-left:auto; margin-right:24px; }.nav-button { border:0; background:transparent; color:var(--muted); padding:9px 13px; border-bottom:2px solid transparent; }.nav-button.active { color:var(--ink); border-color:var(--red); }
main { position:relative; width:min(1180px,calc(100% - 40px)); margin:auto; padding:50px 0 70px; }
.login-shell { min-height:560px; display:grid; place-items:center; }
.login-copy h1,.page-heading h1 { font-family:'Fraunces',serif; font-size:clamp(52px,6.5vw,92px); line-height:.95; letter-spacing:-.045em; margin:12px 0 28px; }
.login-copy h1 em { color:var(--red); font-weight:600; }
.login-copy>p:last-child,.page-heading>p { max-width:530px; color:var(--muted); line-height:1.65; }
.eyebrow { font-size:12px; font-weight:600; letter-spacing:.18em; color:var(--red); }
.paper-card { background:var(--card); border:1px solid var(--line); box-shadow:8px 8px 0 rgba(81,71,55,.12); position:relative; }
.login-card { padding:50px; width:min(100%,440px); }
.login-card h2 { font-family:'Fraunces'; font-size:30px; margin:0 0 36px; }
.card-number { position:absolute; right:22px; top:18px; color:var(--muted); font-size:12px; }
label { display:block; font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; }
input { width:100%; border:0; border-bottom:1px solid var(--ink); background:transparent; padding:13px 2px; margin:6px 0 25px; font:500 18px 'DM Sans'; color:var(--ink); outline:none; border-radius:0; }
input:focus { border-color:var(--red); box-shadow:0 2px 0 -1px var(--red); }
input::placeholder { color:#aaa092; }
button,.secondary { font:600 13px 'DM Sans'; letter-spacing:.04em; cursor:pointer; }
button:disabled { opacity:.45; cursor:not-allowed; }
.primary { width:100%; border:0; background:var(--ink); color:white; padding:18px 22px; display:flex; justify-content:space-between; align-items:center; }
.primary:hover { background:var(--red); }
.primary span { font-size:20px; }
.text-button,.icon-button,.pagination button { border:0; background:none; color:var(--ink); padding:6px; }
.form-message { min-height:20px; margin:16px 0 0; font-size:13px; }
.error { color:#a42f24; }
.hidden { display:none !important; }
.app-view { max-width:1000px; margin:auto; }
.page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:42px; }
.page-heading h1 { font-size:clamp(48px,7vw,78px); margin-bottom:0; }
.page-heading>p { max-width:390px; margin-bottom:5px; }
.entry-card { display:grid; grid-template-columns:44px 1fr 44px 1fr; gap:20px; padding:48px; align-items:start; }
.entry-card label { font-size:13px; }
.entry-card input { font-size:24px; margin-bottom:8px; }
.entry-card small { color:var(--muted); text-transform:none; letter-spacing:0; font-weight:400; }
.field-index { width:32px; height:32px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; color:var(--muted); font-size:11px; }
.entry-card .large { grid-column:2/5; margin-top:24px; font-size:15px; }
.result-message { grid-column:2/5; min-height:24px; font-size:14px; }
.result-message.success { color:#4e6745; }.result-message.duplicate,.result-message.known { color:#9a641f; }
.ticket-field,.receipt-field { border:0; padding:0; margin:0; min-width:0; }
.ticket-field legend,.field-label { display:block; font-size:13px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; margin-bottom:13px; }.field-label b { color:var(--red); }
.ticket-count { display:flex; gap:8px; overflow-x:auto; padding:2px 2px 9px; scrollbar-width:thin; }
.ticket-option { flex:0 0 52px; height:52px; border:1px solid var(--line); border-radius:50%; color:var(--ink); background:transparent; font-size:17px; }
.ticket-option.active { color:white; background:var(--red); border-color:var(--red); }
.receipt-actions { display:flex; gap:8px; flex-wrap:wrap; }.receipt-actions button { flex:1; white-space:nowrap; }
.receipt-field small { display:block; color:var(--muted); margin-top:10px; }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden; clip:rect(0 0 0 0); }
.receipt-preview { position:relative; width:100px; height:72px; margin-top:10px; border:1px solid var(--line); }.receipt-preview img { width:100%; height:100%; object-fit:cover; }.receipt-preview button { position:absolute; right:-10px; top:-10px; width:27px; height:27px; border:0; border-radius:50%; color:white; background:var(--red); font-size:18px; }
.entry-status { min-height:300px; padding:48px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; animation:status-in .22s ease-out; }
.status-icon { width:78px; height:78px; display:grid; place-items:center; border:2px solid currentColor; border-radius:50%; font-size:43px; font-weight:500; margin-bottom:22px; }
.entry-status.success { color:#4e6745; }.entry-status.error { color:#a44232; }
.entry-status h2 { font:600 34px 'Fraunces',serif; color:var(--ink); margin:0 0 9px; }.entry-status p { color:var(--muted); margin:0; font-size:15px; }
@keyframes status-in { from { opacity:0; transform:translateY(7px) scale(.99); } to { opacity:1; transform:none; } }
.trust-row { display:flex; gap:32px; color:var(--muted); font-size:10px; letter-spacing:.12em; margin:26px 0; justify-content:center; }
.list-heading { align-items:center; }.total-count { display:inline-flex; align-items:center; vertical-align:top; white-space:nowrap; margin:5px 0 0 6px; padding:6px 10px; border:1px solid var(--red); border-radius:999px; color:var(--red); font:600 12px 'DM Sans',sans-serif; letter-spacing:0; }
.actions { display:flex; gap:10px; }.secondary,.danger { padding:12px 16px; border:1px solid var(--line); background:transparent; color:var(--ink); text-decoration:none; }.danger { color:#9e3426; border-color:#bb887e; }
.toolbar { display:grid; grid-template-columns:minmax(260px,1fr) 40px; align-items:center; gap:5px 16px; margin-bottom:20px; padding-bottom:10px; border-bottom:1px solid var(--line); }.toolbar .search { grid-column:1; min-width:0; display:flex; align-items:center; gap:10px; }.search span { flex:0 0 auto; font-size:25px; }.search input { min-width:0; border:0; margin:0; font-size:15px; }.toolbar .icon-button { grid-column:2; grid-row:1; font-size:22px; }.toolbar .receipt-filter { grid-column:1/3; grid-row:2; justify-self:start; }
.receipt-filter { display:flex; align-items:center; gap:8px; white-space:nowrap; cursor:pointer; color:var(--muted); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }.receipt-filter input { appearance:none; flex:0 0 18px; width:18px; height:18px; min-height:0; margin:0; border:1px solid var(--line); background:var(--card); }.receipt-filter input:checked { background:var(--red); border-color:var(--red); box-shadow:inset 0 0 0 4px var(--card); }
.table-wrap { background:rgba(250,246,237,.5); border-top:2px solid var(--ink); overflow-x:auto; }
table { width:100%; border-collapse:collapse; }th { text-align:left; color:var(--muted); font-size:10px; letter-spacing:.13em; text-transform:uppercase; padding:15px 12px; }td { border-top:1px solid var(--line); padding:17px 12px; font-size:14px; white-space:nowrap; }td:first-child { min-width:180px; }td small { display:block; color:var(--muted); margin-top:3px; }.barista-badge { border:1px solid var(--line); border-radius:20px; padding:5px 9px; font-size:11px; }.delete-row { border:0; background:none; color:var(--muted); font-size:22px; }.delete-row:hover { color:var(--red); }
.empty { text-align:center; color:var(--muted); padding:70px 20px; }.pagination { display:flex; justify-content:flex-end; align-items:center; gap:24px; padding-top:20px; font-size:12px; }.pagination button { font-size:12px; }
.row-actions { display:flex; align-items:center; gap:7px; }.show-receipt { border:1px solid var(--line); background:transparent; color:var(--red); padding:7px 9px; }
.inline-receipt-row>td { padding:0; border-top:0; }.inline-receipt { display:flex; justify-content:center; padding:18px; background:rgba(37,35,30,.055); border-top:1px dashed var(--line); border-bottom:1px solid var(--line); }.inline-receipt img { display:block; width:auto; max-width:min(100%,520px); max-height:520px; object-fit:contain; border:1px solid var(--line); background:white; }.inline-receipt span { color:var(--muted); padding:15px; }
footer { border-top:1px solid var(--line); border-bottom:0; color:var(--muted); font-size:10px; letter-spacing:.1em; }
.ticket-cabinet { width:min(920px,calc(100% - 40px)); padding-top:70px; }
.cabinet-heading { text-align:center; margin:0 auto 36px; max-width:720px; }.cabinet-heading h1 { font:600 clamp(58px,9vw,100px)/.95 'Fraunces',serif; letter-spacing:-.05em; margin:12px 0 25px; }.cabinet-heading>p:last-child { color:var(--muted); line-height:1.65; max-width:560px; margin:0 auto; }
.cabinet-card { width:min(520px,100%); margin:0 auto; padding:38px; }.cabinet-card input { font-size:24px; }
.ticket-results { margin-top:55px; }.ticket-results-heading { text-align:center; }.ticket-results-heading h2 { font:600 40px 'Fraunces',serif; margin:8px 0 25px; }
.ticket-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; }.ticket { position:relative; min-height:155px; padding:22px; border:1px solid var(--line); background:var(--card); box-shadow:5px 5px 0 rgba(81,71,55,.1); overflow:hidden; }.ticket::after { content:'G'; position:absolute; right:-5px; bottom:-28px; color:rgba(184,72,49,.09); font:700 125px 'Fraunces',serif; }.ticket>span { color:var(--red); font-size:10px; letter-spacing:.18em; }.ticket strong { display:block; position:relative; z-index:1; font:600 49px 'Fraunces',serif; margin:12px 0 15px; }.ticket time { position:relative; z-index:1; color:var(--muted); font-size:12px; }.no-tickets { grid-column:1/-1; text-align:center; color:var(--muted); padding:40px; border:1px solid var(--line); background:rgba(250,246,237,.5); }
dialog { border:0; padding:0; background:transparent; }dialog::backdrop { background:rgba(37,35,30,.55); }.dialog-card { width:min(450px,calc(100vw - 32px)); background:var(--card); padding:35px; border:1px solid var(--line); }.dialog-card h2 { font:600 30px 'Fraunces'; margin:0; }.dialog-card p { color:var(--muted); line-height:1.5; }.dialog-card>div { display:flex; justify-content:flex-end; gap:10px; }
.media-dialog { width:min(680px,calc(100vw - 24px)); max-width:none; }.camera-card,.receipt-card { position:relative; background:#171612; padding:12px; }.camera-card video { display:block; width:100%; max-height:72vh; object-fit:contain; background:#000; }.camera-permission { padding:52px 28px 30px; display:block; color:white; text-align:center; }.camera-symbol { display:block; font-size:52px; }.camera-permission h2 { font:600 31px 'Fraunces',serif; margin:15px 0 10px; }.camera-permission p { max-width:440px; margin:0 auto 28px!important; color:#cfc5b4; line-height:1.55; }.camera-permission .primary { width:min(100%,360px); margin:auto; }.camera-preview>div { display:flex; gap:10px; padding-top:12px; }.camera-preview>div>* { flex:1; }.camera-card .primary { justify-content:center; }.camera-card .secondary { color:#fff; border-color:#d8d0c4; background:#34312b; }.camera-card .secondary:hover { background:#4a463e; border-color:#fff; }.camera-error:not(:empty) { margin:12px!important; padding:12px 14px; border:1px solid #e08b7a; background:#54271f; color:#fff1ed; text-align:center; line-height:1.45; }.camera-close { display:block; margin:10px auto 2px; padding:10px 18px; color:#fff; text-decoration:underline; text-underline-offset:3px; }.camera-close:hover { color:#f2b2a5; }.receipt-card img { display:block; width:100%; max-height:85vh; object-fit:contain; }.receipt-card>button { position:absolute; z-index:1; right:18px; top:18px; width:38px; height:38px; border:0; border-radius:50%; background:rgba(0,0,0,.7); color:white; font-size:25px; }
@media (max-width:760px) {
  body { min-height:100dvh; }
  .topbar { padding:12px 16px; flex-wrap:wrap; gap:8px; position:sticky; top:0; z-index:10; background:rgba(242,235,222,.96); }
  .brand span:last-child,.user-area span { display:none; }
  .brand-mark { width:32px; height:32px; }
  .app-nav { order:3; width:100%; margin:0; border-top:1px solid var(--line); padding-top:6px; }
  .nav-button { flex:1; min-height:40px; font-size:14px; }
  main { width:calc(100% - 24px); padding:22px 0 42px; margin:0 auto auto; }
  .login-shell { min-height:calc(100dvh - 145px); padding:0; }
  .login-card { padding:32px 22px; box-shadow:5px 5px 0 rgba(81,71,55,.12); }
  .login-card h2 { font-size:28px; margin-bottom:28px; }
  input { font-size:16px; min-height:50px; }
  .page-heading { display:block; margin-bottom:22px; }
  .page-heading h1 { font-size:42px; line-height:1; margin-top:8px; }
  .page-heading>p { display:none; }
  .entry-card { display:block; padding:24px 18px; box-shadow:5px 5px 0 rgba(81,71,55,.12); }
  .entry-status { min-height:360px; padding:32px 20px; box-shadow:5px 5px 0 rgba(81,71,55,.12); }
  .status-icon { width:72px; height:72px; font-size:40px; }
  .field-index { display:none; }
  .entry-card label { margin-bottom:22px; }
  .ticket-field,.receipt-field { margin-bottom:24px; }
  .entry-card input { font-size:20px; margin-bottom:4px; }
  .entry-card .large { min-height:56px; margin-top:8px; }
  .result-message { margin-top:14px; min-height:20px; line-height:1.4; }
  .trust-row { display:none; }
  .list-heading .actions { margin-top:18px; flex-wrap:wrap; }
  .list-heading .actions>* { flex:1; text-align:center; }
  .toolbar { position:sticky; top:105px; z-index:5; grid-template-columns:1fr 40px; gap:5px 10px; padding:6px 0 10px; background:var(--paper); }
  .toolbar .search { grid-column:1; width:100%; }.toolbar .search input { width:100%; font-size:16px; }.toolbar .icon-button { grid-column:2; grid-row:1; }.toolbar .receipt-filter { grid-column:1/3; grid-row:2; justify-self:start; min-height:36px; }
  .table-wrap { background:none; border-top:0; overflow:visible; }
  table,tbody,tr,td { display:block; width:100%; }
  thead { display:none; }
  tr { position:relative; background:var(--card); border:1px solid var(--line); margin-bottom:10px; padding:14px 14px 10px; }
  tr.participant-row:has(+ .inline-receipt-row) { margin-bottom:0; }
  tr.inline-receipt-row { display:block; margin-top:0; padding:0; border-top:0; }.inline-receipt-row td { display:block; padding:0; }.inline-receipt-row td::before { display:none; }.inline-receipt { padding:10px; }.inline-receipt img { max-height:70vh; }
  td { display:flex; justify-content:space-between; align-items:center; gap:16px; border:0; border-bottom:1px solid rgba(207,197,180,.65); padding:9px 0; white-space:normal; text-align:right; }
  td:first-child { min-width:0; padding-top:0; font-size:17px; text-align:left; }
  td:last-child { border:0; padding-bottom:0; }
  td[data-label]::before { content:attr(data-label); color:var(--muted); font-size:10px; letter-spacing:.1em; text-transform:uppercase; text-align:left; }
  td:first-child strong { margin-left:auto; }
  td:nth-child(2) strong { margin-left:auto; }
  .delete-row { margin-left:auto; min-width:44px; min-height:38px; }
  .pagination { justify-content:space-between; padding:12px 4px 0; }
  .pagination button { min-height:44px; }
  footer { display:none; }
  .public-topbar { flex-wrap:nowrap; }.public-topbar .brand span:last-child { display:inline; }.public-topbar .staff-link { margin-left:auto; }
  .ticket-cabinet { width:calc(100% - 24px); padding-top:32px; }.cabinet-heading h1 { font-size:55px; }.cabinet-heading>p:last-child { font-size:14px; }.cabinet-card { padding:27px 19px; }.cabinet-card input { font-size:20px; }.ticket-results { margin-top:38px; }.ticket-grid { grid-template-columns:1fr 1fr; gap:10px; }.ticket { min-height:130px; padding:16px; }.ticket strong { font-size:37px; }.ticket time { font-size:10px; }
}
@media (max-width:400px) { .ticket-grid { grid-template-columns:1fr; } }