:root{
  --bg:#EEF1F6; --surface:#FFFFFF; --field:#F6F8FB; --ink:#18223A; --muted:#56627C; --line:#D4DAE5;
  --pencil:#F2B705; --on-pencil:#2B2000; --seat-free:#AFB9CC; --seat-taken:#18223A;
  --ok:#1D7348; --ok-bg:#E3F3EA; --warn:#A63D1A; --warn-bg:#FBEAE3; --margin:#D9534A; --focus:#2F6FEB;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0F1528; --surface:#18213A; --field:#121A30; --ink:#E7ECF6; --muted:#9AA7C3; --line:#2A3555;
    --pencil:#F5C431; --on-pencil:#231A00; --seat-free:#4A5679; --seat-taken:#DCE3F2;
    --ok:#5CCB8F; --ok-bg:#16342A; --warn:#F08A63; --warn-bg:#3A2219; --margin:#E8736A; --focus:#7FA7FF;
    color-scheme:dark;
  }
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:16px;line-height:1.55;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.wrap{max-width:1140px;margin:0 auto;padding:32px 20px 72px}
h1,h2,h3{font-family:"Bricolage Grotesque","Atkinson Hyperlegible",system-ui,sans-serif;line-height:1.1;margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
a{color:inherit}

.masthead{border-left:4px solid var(--margin);padding:4px 0 4px 20px;margin-bottom:28px;display:flex;flex-wrap:wrap;gap:16px 32px;align-items:flex-end;justify-content:space-between}
.masthead h1{font-size:clamp(2.6rem,7vw,4.6rem);font-weight:800;letter-spacing:-0.03em}
.masthead .event{margin:10px 0 0;font-family:"Bricolage Grotesque","Atkinson Hyperlegible",system-ui,sans-serif;font-weight:600;font-size:clamp(1.15rem,2.6vw,1.5rem);line-height:1.2}
.masthead .desc{margin:10px 0 0;color:var(--muted);max-width:60ch}
.facts{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-weight:700}
.status{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-weight:700;border:1.5px solid var(--line);background:var(--surface);white-space:nowrap}
.status .dot{width:10px;height:10px;border-radius:50%;background:var(--seat-free)}
.status.open{border-color:var(--ok)} .status.open .dot{background:var(--ok)}
.status.soon{border-color:var(--pencil)} .status.soon .dot{background:var(--pencil)}

.grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:880px){.grid{grid-template-columns:1fr} .grid .side{order:-1}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px}
.panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.panel-head h2{font-size:1.45rem;font-weight:800}
.total{color:var(--muted);font-variant-numeric:tabular-nums} .total b{color:var(--ink)}

.row{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:14px;align-items:center;padding:13px 0;border-top:1px solid var(--line)}
.row:first-of-type{border-top:none}
.row .name{font-weight:700}
.row .yours{display:block;font-weight:400;font-size:.85rem;color:var(--muted)}
.row.mine .name{color:var(--ink)}
.row.mine{box-shadow:inset 4px 0 0 var(--pencil);padding-left:12px}
.desks{display:flex;flex-wrap:wrap;gap:6px}
.desk{width:24px;height:19px;border-radius:7px 7px 3px 3px;border:2px solid var(--seat-free);display:inline-block}
.desk.taken{background:var(--seat-taken);border-color:var(--seat-taken)}
.desk.over{background:var(--warn);border-color:var(--warn)}
.free{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap;text-align:right}
.free.full{color:var(--muted);font-weight:400}
.legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend .desk{width:18px;height:14px}
@media (max-width:560px){.row{grid-template-columns:minmax(0,1fr) auto}.row .desks{grid-column:1 / -1;order:3}}

.side{position:sticky;top:calc(env(safe-area-inset-top,0px) + 16px)}
@media (max-width:880px){.side{position:static}}
.side h2{font-size:1.45rem;font-weight:800;margin-bottom:8px}
.side p{margin:0 0 14px;color:var(--muted)}
.side p strong{color:var(--ink)}
.field{display:block;margin-bottom:14px}
.field > span{display:block;font-weight:700;margin-bottom:6px;font-size:.95rem}
.field small{font-weight:400;color:var(--muted)}
input[type=text],input[type=email],input[type=number],input[type=search],input[type=datetime-local],select,textarea{width:100%;padding:11px 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--field)}
input.code{font-size:1.8rem;letter-spacing:.4em;text-align:center;font-variant-numeric:tabular-nums;font-weight:700}
textarea{min-height:76px;resize:vertical}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:10px;border:1.5px solid transparent;cursor:pointer;font-weight:700;text-decoration:none}
.btn.primary{background:var(--pencil);color:var(--on-pencil);width:100%}
.btn.ghost{background:transparent;border-color:var(--line)}
.btn.danger{background:transparent;border-color:var(--line);color:var(--warn)}
.btn.small{padding:7px 12px;font-size:.9rem}
.btn.link{background:none;border:none;padding:0;color:var(--muted);text-decoration:underline;font-weight:400}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.actions{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:12px}
.ticket{border:2px dashed var(--pencil);border-radius:14px;padding:16px;margin-bottom:16px}
.ticket .big{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:1.6rem;font-weight:800;line-height:1.15}
.ticket .when{color:var(--muted);font-size:.92rem;margin-top:4px}
.countdown{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:2.4rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-0.02em;margin:4px 0 14px}
.note{padding:12px 14px;border-radius:10px;margin:0 0 14px;font-size:.95rem}
.note.ok{background:var(--ok-bg);color:var(--ok)}
.note.warn{background:var(--warn-bg);color:var(--warn)}
.note.plain{background:var(--field);color:var(--muted)}
.who{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:.9rem;color:var(--muted)}
.ts{margin:0 0 14px;min-height:65px}

/* Admin */
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.tab{background:none;border:none;border-bottom:3px solid transparent;padding:10px 14px;cursor:pointer;font-weight:700;color:var(--muted)}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--pencil)}
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:28px}
@media (max-width:1400px){.cols{grid-template-columns:1fr}}
.check{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;cursor:pointer}
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--pencil);flex:none}
.radios{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.radios label{display:inline-flex;gap:8px;align-items:center;padding:8px 12px;border:1.5px solid var(--line);border-radius:10px;cursor:pointer}
.radios input{accent-color:var(--pencil)}
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-weight:700;color:var(--muted);font-size:.88rem}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.quota-tbl input[type=text]{min-width:120px}
.quota-tbl input[type=number]{width:80px}
.foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-top:14px}
.group-title{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;font-size:1.1rem;margin:22px 0 6px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.group-title:first-child{margin-top:0}
.group-title span{font-family:"Atkinson Hyperlegible",system-ui,sans-serif;font-weight:400;font-size:.92rem;color:var(--muted)}
.empty,.muted{color:var(--muted)}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;margin-bottom:10px}
.stats{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 16px}
.stats div{font-variant-numeric:tabular-nums}