@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@400;500;600;700&display=swap');

/* ── LIGHT THEME (default) ── */
:root {
  --bg:#f0f4f8; --s1:#ffffff; --s2:#e8eef5; --s3:#dde5f0;
  --gold:#d97706; --g2:#f59e0b;
  --gdim:rgba(217,119,6,.08); --gring:rgba(217,119,6,.22);
  --grn:#059669; --gndim:rgba(5,150,105,.08); --gnring:rgba(5,150,105,.22);
  --red:#dc2626; --rdim:rgba(220,38,38,.08); --rring:rgba(220,38,38,.22);
  --blue:#3b82f6;
  --text:#0f172a; --t2:#475569; --muted:#94a3b8;
  --bdr:rgba(0,0,0,.07); --bhi:rgba(0,0,0,.13);
  --shadow:0 1px 3px rgba(0,0,0,.07),0 1px 8px rgba(0,0,0,.04);
  --shadow-md:0 4px 16px rgba(0,0,0,.1);
  --r:14px; --rs:10px;
}

/* ── DARK THEME ── */
body.dark {
  --bg:#080d18; --s1:#0f1829; --s2:#162035; --s3:#1d2c46;
  --gold:#f59e0b; --g2:#fbbf24;
  --gdim:rgba(245,158,11,.10); --gring:rgba(245,158,11,.22);
  --grn:#10b981; --gndim:rgba(16,185,129,.10); --gnring:rgba(16,185,129,.25);
  --red:#ef4444; --rdim:rgba(239,68,68,.10); --rring:rgba(239,68,68,.22);
  --text:#e8edf5; --t2:#7a90ab; --muted:#354d66;
  --bdr:rgba(255,255,255,.07); --bhi:rgba(255,255,255,.13);
  --shadow:0 1px 3px rgba(0,0,0,.3),0 1px 8px rgba(0,0,0,.2);
  --shadow-md:0 4px 16px rgba(0,0,0,.4);
}

/* ── RESET ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; overscroll-behavior:none; }
button { font-family:inherit; cursor:pointer; }
input,select,textarea { font-family:inherit; }

/* ── SHELL ── */
body { font-family:'DM Sans',-apple-system,sans-serif; background:var(--bg); color:var(--text); }

/* ── APP GRID ── */
#app {
  display:grid; height:100vh;
  grid-template-areas:'main' 'nav';
  grid-template-rows:1fr auto;
  grid-template-columns:1fr;
}
@media(min-width:640px) {
  #app { grid-template-areas:'nav main'; grid-template-rows:1fr; grid-template-columns:200px 1fr; }
}
@media(min-width:1024px) {
  #app { grid-template-areas:'nav main detail'; grid-template-columns:220px 1fr 300px; }
}

/* ── SIDEBAR / BOTTOM NAV ── */
#sidebar {
  grid-area:nav; background:var(--s1); border-top:1px solid var(--bdr);
  display:flex; flex-direction:row; z-index:10;
  box-shadow:0 -2px 12px rgba(0,0,0,.06);
}
@media(min-width:640px) {
  #sidebar {
    flex-direction:column; border-top:none; border-right:1px solid var(--bdr);
    padding:20px 0; box-shadow:2px 0 12px rgba(0,0,0,.04);
  }
}

.nav-logo { display:none; padding:0 16px 20px; border-bottom:1px solid var(--bdr); margin-bottom:12px; }
.nav-logo-text { font-family:'Bebas Neue',sans-serif; font-size:28px; color:var(--gold); letter-spacing:2px; }
.nav-logo-sub  { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); }
@media(min-width:640px) { .nav-logo { display:block; } }

.nav-item {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:10px 4px 8px; flex:1;
  background:none; border:none; color:var(--muted);
  font-size:clamp(8px,2vw,9.5px); font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  transition:color .15s; position:relative;
}
.nav-item.on { color:var(--gold); }
.nav-item.on::before { content:''; position:absolute; top:0; left:20%; right:20%; height:2px; background:var(--gold); border-radius:0 0 3px 3px; }
.nav-ico   { font-size:clamp(18px,5vw,21px); line-height:1; }
.nav-label {}

@media(min-width:640px) {
  .nav-item { flex-direction:row; gap:10px; padding:10px 16px; flex:none; justify-content:flex-start; font-size:12px; border-radius:0; }
  .nav-item.on { background:var(--gdim); }
  .nav-item.on::before { left:0; right:auto; top:0; bottom:0; width:3px; border-radius:0 3px 3px 0; }
  .nav-ico { font-size:18px; }
  .nav-spacer { flex:1; }
  .nav-code-chip { padding:10px 16px; margin:0 8px 8px; background:var(--s2); border-radius:var(--rs); font-size:11px; font-weight:700; color:var(--t2); display:flex; align-items:center; gap:6px; }
}
.nav-code-chip { display:none; }
@media(min-width:640px) { .nav-code-chip { display:flex; } }

/* ── MAIN + DETAIL ── */
#main-content { grid-area:main; overflow-y:auto; -webkit-overflow-scrolling:touch; position:relative; }
#detail-panel { grid-area:detail; display:none; background:var(--s1); border-left:1px solid var(--bdr); overflow-y:auto; padding:24px 20px; }
@media(min-width:1024px) { #detail-panel { display:block; } }

/* ── CONTENT AREA ── */
.view-content { padding:clamp(16px,3vw,28px) clamp(14px,3vw,28px) clamp(80px,15vw,60px); }
@media(min-width:640px) { .view-content { padding:24px 24px 40px; } }
@media(min-width:1024px) { .view-content { padding:28px 32px 40px; } }

/* ── TYPOGRAPHY ── */
.ph1 { font-family:'Bebas Neue',sans-serif; font-size:clamp(26px,6vw,38px); color:var(--gold); letter-spacing:1.5px; line-height:1; }
.psub { font-size:clamp(9px,2vw,11px); font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); margin-top:3px; margin-bottom:18px; }
.sl { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin:16px 0 8px; }

/* ── PAGE HEADER ── */
.page-hdr { display:flex; align-items:flex-start; gap:12px; margin-bottom:18px; flex-wrap:wrap; }

/* ── CLASS HEADER ── */
.class-hdr { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.back-btn { width:36px; height:36px; border-radius:50%; background:var(--s2); border:1px solid var(--bhi); color:var(--t2); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; transition:.14s; }
.back-btn:hover { background:var(--s3); color:var(--text); }
.class-title-wrap { flex:1; }
.class-ph1 { font-size:clamp(22px,5vw,32px) !important; }
.class-total-pts { font-family:'Bebas Neue',sans-serif; font-size:clamp(18px,4vw,26px); color:var(--muted); flex-shrink:0; }

/* ── INNER TABS ── */
.itabs { display:flex; background:var(--s2); border-radius:10px; padding:3px; gap:3px; margin-bottom:18px; }
.itab { flex:1; padding:clamp(8px,2vw,10px) 8px; background:none; border:none; font-size:clamp(11px,2.5vw,13px); font-weight:700; color:var(--muted); border-radius:8px; cursor:pointer; transition:.15s; }
.itab.on { background:var(--s1); color:var(--text); box-shadow:0 1px 4px rgba(0,0,0,.1); }
.itab:hover:not(.on) { color:var(--text); }

/* ── CARDS ── */
.card { background:var(--s1); border:1px solid var(--bdr); border-radius:var(--r); padding:clamp(12px,3vw,18px); margin-bottom:10px; box-shadow:var(--shadow); }
.card-gold  { border-color:var(--gring); background:var(--gdim); }
.card-green { border-color:var(--gnring); background:var(--gndim); }
.card-hd { font-size:clamp(12px,2.5vw,13px); font-weight:700; margin-bottom:6px; }
.card-bd { font-size:clamp(12px,2.5vw,13px); color:var(--t2); line-height:1.6; }

/* ── CLASS GRID ── */
.class-grid { display:grid; grid-template-columns:1fr; gap:10px; margin-bottom:12px; }
@media(min-width:640px)  { .class-grid { grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px) { .class-grid { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); } }

.ci { display:flex; align-items:center; gap:12px; background:var(--s1); border:1px solid var(--bdr); border-radius:var(--r); padding:clamp(12px,3vw,15px) clamp(12px,3vw,16px); cursor:pointer; transition:.14s; box-shadow:var(--shadow); }
.ci:hover { border-color:var(--gold); background:var(--gdim); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.ci:active { transform:scale(.99); }
.ci-av { width:clamp(40px,8vw,46px); height:clamp(40px,8vw,46px); border-radius:12px; background:var(--gdim); border:1.5px solid var(--gring); display:flex; align-items:center; justify-content:center; font-family:'Bebas Neue',sans-serif; font-size:clamp(14px,3vw,17px); color:var(--gold); flex-shrink:0; }
.ci-info { flex:1; min-width:0; }
.ci-name { font-size:clamp(14px,3vw,16px); font-weight:700; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ci-meta { font-size:clamp(10px,2vw,12px); color:var(--t2); }
.ci-chev { color:var(--muted); font-size:20px; flex-shrink:0; }
.shared-tag { font-size:10px; font-weight:700; color:var(--gold); margin-left:4px; }

/* ── SYNC BADGE ── */
.sync-badge { display:inline-flex; align-items:center; gap:6px; background:var(--s1); border:1px solid var(--bdr); border-radius:20px; padding:6px 12px; font-size:11px; font-weight:700; color:var(--t2); cursor:pointer; box-shadow:var(--shadow); margin-left:auto; }
.sync-dot { width:8px; height:8px; border-radius:50%; background:var(--muted); flex-shrink:0; }
.sync-dot.live { background:var(--grn); box-shadow:0 0 6px var(--grn); animation:blink 2s infinite; }
@keyframes blink { 0%,100%{opacity:1}50%{opacity:.4} }

/* ── LEADERBOARD ── */
.lb-grid { display:grid; grid-template-columns:1fr; gap:8px; }
@media(min-width:640px) and (max-width:1023px) { .lb-grid { grid-template-columns:repeat(2,1fr); } }

.lbi { display:flex; align-items:center; gap:clamp(10px,2.5vw,14px); padding:clamp(10px,2.5vw,14px) clamp(12px,3vw,16px); background:var(--s1); border:1px solid var(--bdr); border-radius:var(--r); box-shadow:var(--shadow); transition:.12s; }
.lbi:hover { border-color:var(--gring); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.lbi.m1 { border-color:rgba(255,215,0,.3); background:rgba(255,215,0,.04); }
.lbi.m2 { border-color:rgba(192,192,192,.25); }
.lbi.m3 { border-color:rgba(205,127,50,.2); }
.lbr { font-family:'Bebas Neue',sans-serif; font-size:clamp(20px,4vw,28px); width:clamp(24px,5vw,30px); text-align:center; flex-shrink:0; color:var(--muted); }
.lbr.m1 { color:#b8860b; text-shadow:0 0 10px rgba(255,215,0,.3); }
.lbr.m2 { color:#888; } .lbr.m3 { color:#a0522d; }
.lbi-info { flex:1; min-width:0; }
.lbn { font-size:clamp(13px,3vw,16px); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lbs { font-size:clamp(10px,2vw,11px); color:var(--t2); margin-top:2px; }
.barw { height:3px; background:var(--s2); border-radius:2px; margin-top:6px; }
.bar  { height:3px; background:linear-gradient(90deg,var(--gold),var(--g2)); border-radius:2px; transition:width .6s; }
.lbp  { font-family:'Bebas Neue',sans-serif; font-size:clamp(26px,5vw,36px); color:var(--gold); flex-shrink:0; }

/* ── PODIUM ── */
.podium-cols { display:flex; justify-content:center; align-items:flex-end; gap:clamp(6px,2vw,14px); margin:clamp(12px,4vw,24px) 0; }
.podium-col  { display:flex; flex-direction:column; align-items:center; flex:1; max-width:clamp(90px,25vw,140px); }
.podium-name  { font-size:clamp(11px,2.5vw,14px); font-weight:700; text-align:center; margin-bottom:4px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.podium-pts   { font-family:'Bebas Neue',sans-serif; font-size:clamp(28px,6vw,40px); color:var(--gold); line-height:1; }
.podium-medal { font-size:clamp(24px,6vw,36px); line-height:1; margin:4px 0; }
.podium-block { width:100%; border-radius:10px 10px 0 0; display:flex; align-items:center; justify-content:center; font-family:'Bebas Neue',sans-serif; font-size:clamp(28px,8vw,52px); color:rgba(255,255,255,.6); }
.pb-1 { background:linear-gradient(180deg,#ffd700,#b8860b); }
.pb-2 { background:linear-gradient(180deg,#c0c0c0,#808080); }
.pb-3 { background:linear-gradient(180deg,#cd7f32,#8b4513); }
.podium-toggle { margin-bottom:14px; }

/* ── SEATING PLAN ── */
.seat-plan { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.seat-row  { display:flex; justify-content:center; gap:clamp(4px,1vw,7px); }
.seat {
  flex:1 1 0; max-width:clamp(56px,9vw,80px); min-height:clamp(48px,7vw,64px);
  border-radius:10px; border:1.5px solid var(--bdr); background:var(--s2);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer; gap:2px; transition:.07s; position:relative; user-select:none;
}
.seat.on { background:var(--s1); border-color:var(--gring); box-shadow:var(--shadow); }
.seat.on::after { content:''; position:absolute; bottom:5px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:var(--gold); }
.seat.empty-edit { border-style:dashed; opacity:.55; }
.seat:hover.on { border-color:var(--gold); }
.seat:active { transform:scale(.87); background:var(--gold) !important; border-color:var(--gold) !important; }
.seat:active .sn,.seat:active .ss,.seat:active .seat-plus { color:#fff !important; }
.sn { font-family:'Bebas Neue',sans-serif; font-size:clamp(14px,2.5vw,22px); color:var(--muted); line-height:1; }
.seat.on .sn { color:var(--text); }
.ss { font-size:clamp(7px,1.2vw,9px); font-weight:700; color:var(--t2); text-align:center; width:100%; padding:0 3px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.seat-plus { font-size:11px; color:var(--muted); }
.room-footer { display:flex; gap:8px; margin-top:8px; margin-bottom:16px; }
.whiteboard  { flex:1; height:clamp(28px,4vw,36px); background:var(--s1); border:1px solid var(--bhi); border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:clamp(9px,1.5vw,11px); font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
.teacher-desk { width:clamp(50px,8vw,70px); height:clamp(40px,6vw,52px); background:var(--s2); border:1px solid var(--bhi); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:clamp(8px,1.3vw,10px); font-weight:700; color:var(--muted); text-transform:uppercase; flex-shrink:0; text-align:center; line-height:1.3; }
.edit-summary { font-size:12px; color:var(--t2); text-align:center; margin-bottom:10px; }
.edit-tip     { font-size:clamp(12px,2.5vw,13px); color:var(--t2); margin-bottom:12px; line-height:1.6; }

/* ── MODE SWITCH ── */
.mode-switch { display:flex; background:var(--s2); border-radius:10px; padding:3px; gap:3px; margin-bottom:14px; }
.mswitch-btn { flex:1; padding:clamp(8px,2vw,10px) 8px; background:none; border:none; font-size:clamp(11px,2.5vw,13px); font-weight:700; color:var(--muted); border-radius:8px; cursor:pointer; transition:.15s; }
.mswitch-btn.on { background:var(--s1); color:var(--text); box-shadow:0 1px 4px rgba(0,0,0,.1); }

/* ── CAMERA ── */
.qr-wrap {}
.cam-wrap { position:relative; border-radius:16px; overflow:hidden; background:#000; width:100%; aspect-ratio:4/3; max-height:360px; margin-bottom:10px; }
.cam-vid  { width:100%; height:100%; object-fit:cover; display:block; }
.cam-ui   { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.reticle  { width:clamp(140px,40%,190px); height:clamp(140px,40%,190px); position:relative; }
.rA,.rB,.rC,.rD { position:absolute; width:32px; height:32px; border-color:rgba(217,119,6,.9); border-style:solid; }
.rA{top:0;left:0;border-width:3px 0 0 3px;border-radius:5px 0 0 0}
.rB{top:0;right:0;border-width:3px 3px 0 0;border-radius:0 5px 0 0}
.rC{bottom:0;left:0;border-width:0 0 3px 3px;border-radius:0 0 0 5px}
.rD{bottom:0;right:0;border-width:0 3px 3px 0;border-radius:0 0 5px 0}
.scan-line { position:absolute; left:10%; right:10%; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); animation:scan 2.2s ease-in-out infinite; }
@keyframes scan { 0%,100%{top:15%}50%{top:82%} }
.cam-flash { position:absolute; inset:0; background:rgba(5,150,105,.22); opacity:0; pointer-events:none; transition:opacity .25s; }
.cam-flash.on { opacity:1; }
.cam-msg { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent,rgba(0,0,0,.7)); padding:20px 14px 10px; font-size:13px; font-weight:600; text-align:center; color:rgba(255,255,255,.95); }

/* ── BANNER ── */
.banner { border-radius:var(--rs); padding:clamp(10px,2.5vw,13px) 16px; margin-bottom:12px; font-size:clamp(12px,2.5vw,14px); font-weight:600; text-align:center; background:var(--s1); border:1px solid var(--bdr); color:var(--t2); display:flex; align-items:center; justify-content:center; min-height:46px; box-shadow:var(--shadow); }
.banner.ok { background:var(--gndim); border-color:var(--gnring); color:var(--grn); }

/* ── BUTTONS ── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:clamp(10px,2.5vw,13px) clamp(14px,3vw,18px); border-radius:var(--rs); border:none; font-weight:700; font-size:clamp(13px,2.5vw,15px); cursor:pointer; transition:.12s; width:100%; }
.btn:active { transform:scale(.97); opacity:.85; }
.btn:disabled { opacity:.4; cursor:not-allowed; transform:none; }
.btn-p { background:var(--gold); color:#fff; }
.btn-s { background:var(--s2); color:var(--text); border:1px solid var(--bhi); }
.btn-g { background:var(--grn); color:#fff; }
.btn-danger { background:var(--rdim); color:var(--red); border:1px solid var(--rring); }
.brow { display:flex; gap:10px; }
.brow .btn { flex:1; }
.close-btn { width:36px; height:36px; border-radius:50%; background:var(--s2); border:1px solid var(--bhi); color:var(--t2); display:flex; align-items:center; justify-content:center; font-size:16px; cursor:pointer; flex-shrink:0; }
.close-btn:hover { background:var(--s3); }

/* ── FORMS ── */
.field { margin-bottom:14px; }
.field label { display:block; font-size:clamp(9px,2vw,11px); font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--t2); margin-bottom:7px; }
.field-hint { font-size:clamp(11px,2vw,12px); color:var(--t2); margin-top:6px; line-height:1.5; }
input[type=text],input[type=number],input[type=password],select,textarea {
  width:100%; background:var(--s2); border:1.5px solid var(--bdr); color:var(--text);
  font-size:clamp(13px,2.5vw,15px); padding:clamp(10px,2.5vw,12px) 14px;
  border-radius:var(--rs); outline:none; transition:.2s; -webkit-appearance:none; appearance:none;
}
input:focus,select:focus,textarea:focus { border-color:var(--gold); background:var(--s3); box-shadow:0 0 0 3px var(--gdim); }
input::placeholder,textarea::placeholder { color:var(--muted); }
select { cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:40px; }
textarea { resize:none; line-height:1.65; }
.class-sel { width:auto; font-size:clamp(12px,2.5vw,14px); font-weight:700; padding:8px 36px 8px 12px; }

/* ── LAYOUT EDITOR ── */
.le-row { margin-bottom:12px; }
.le-row-controls { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.le-row-label { font-size:10px; font-weight:800; text-transform:uppercase; color:var(--muted); letter-spacing:.8px; flex:1; }
.le-ctrl-btn { background:var(--s2); border:1px solid var(--bhi); color:var(--t2); font-size:11px; font-weight:700; padding:4px 10px; border-radius:6px; cursor:pointer; }
.le-ctrl-btn:hover { background:var(--s3); }
.le-del { color:var(--red); border-color:var(--rring); }
.le-seats { display:flex; flex-wrap:wrap; gap:6px; min-height:44px; background:var(--s2); border-radius:var(--rs); padding:8px; border:1.5px dashed var(--bhi); }
.le-pool-zone { display:flex; flex-wrap:wrap; gap:6px; min-height:44px; background:var(--s2); border-radius:var(--rs); padding:8px; border:1.5px dashed var(--bhi); margin-bottom:12px; }
.le-chip { width:36px; height:36px; border-radius:8px; background:var(--s1); border:1.5px solid var(--gring); color:var(--gold); font-family:'Bebas Neue',sans-serif; font-size:18px; display:flex; align-items:center; justify-content:center; cursor:grab; user-select:none; transition:.1s; box-shadow:var(--shadow); }
.le-chip:active { transform:scale(.9); opacity:.7; }
.le-pool-chip { background:var(--s2); border-color:var(--bhi); color:var(--muted); box-shadow:none; }

/* ── SETTINGS ── */
.settings-account-row { display:flex; align-items:center; gap:12px; }
.settings-av { width:46px; height:46px; border-radius:13px; background:var(--gdim); border:1.5px solid var(--gring); display:flex; align-items:center; justify-content:center; font-family:'Bebas Neue',sans-serif; font-size:16px; color:var(--gold); flex-shrink:0; }
.settings-code { font-family:'Bebas Neue',sans-serif; font-size:22px; color:var(--gold); letter-spacing:2px; }
.settings-code-sub { font-size:11px; color:var(--t2); margin-top:2px; }
.settings-account-info { flex:1; }
.coming-soon-tag { font-size:9px; font-weight:700; background:var(--gdim); color:var(--gold); border:1px solid var(--gring); border-radius:20px; padding:2px 8px; margin-left:6px; }

/* ── FAB ── */
.fab {
  position:fixed; bottom:clamp(72px,12vw,24px); right:clamp(14px,4vw,28px);
  width:clamp(52px,8vw,62px); height:clamp(52px,8vw,62px); border-radius:50%;
  background:var(--gold); color:#fff; font-size:clamp(24px,5vw,30px);
  border:none; cursor:pointer; z-index:100;
  box-shadow:0 4px 20px rgba(217,119,6,.4);
  display:flex; align-items:center; justify-content:center; transition:.15s;
}
.fab:hover { transform:scale(1.06); box-shadow:0 6px 28px rgba(217,119,6,.5); }
.fab:active { transform:scale(.92); }
@media(min-width:640px) { .fab { bottom:clamp(20px,4vw,28px); } }

/* ── QUICK AWARD SHEET ── */
.sheet-bg { position:fixed; inset:0; background:rgba(15,23,42,.35); z-index:200; opacity:0; pointer-events:none; transition:opacity .22s; }
.sheet-bg.open { opacity:1; pointer-events:all; }
.sheet {
  position:fixed; bottom:0; left:0; right:0;
  background:var(--s1); border-radius:22px 22px 0 0; border-top:1px solid var(--bdr);
  padding:10px clamp(14px,4vw,20px) clamp(80px,14vw,100px);
  transform:translateY(100%); transition:transform .3s cubic-bezier(.4,0,.2,1);
  z-index:210; max-height:88vh; overflow-y:auto;
  box-shadow:0 -8px 40px rgba(0,0,0,.12);
}
.sheet.open { transform:none; }
@media(min-width:1024px) {
  .sheet { left:auto; right:0; top:0; bottom:0; width:380px; border-radius:0; border-top:none; border-left:1px solid var(--bdr); padding:28px 24px 40px; transform:translateX(100%); max-height:none; }
  .sheet.open { transform:none; }
  .sheet-handle { display:none; }
}
.sheet-handle { width:36px; height:4px; background:var(--muted); border-radius:2px; margin:0 auto 16px; opacity:.3; }
.sheet-title { font-family:'Bebas Neue',sans-serif; font-size:clamp(18px,4vw,22px); color:var(--gold); margin-bottom:12px; }

/* ── URL ROW ── */
.url-row { display:flex; gap:8px; }
.url-input { flex:1; font-size:12px; color:var(--t2); }
.copy-btn { width:auto; padding:10px 14px; font-size:13px; }

/* ── DISPLAY OVERLAY ── */
#disp { display:none; position:fixed; inset:0; z-index:9999; background:var(--bg); overflow-y:auto; padding:20px 20px 40px; }
#disp.open { display:block; }
.dclose { position:fixed; top:14px; right:14px; width:42px; height:42px; border-radius:50%; background:var(--s2); border:1px solid var(--bhi); color:var(--t2); font-size:18px; display:flex; align-items:center; justify-content:center; z-index:10000; cursor:pointer; }
.dhd { text-align:center; margin-bottom:24px; }
.dtitle { font-family:'Bebas Neue',sans-serif; font-size:clamp(36px,10vw,56px); color:var(--gold); letter-spacing:2px; }
.dcls { font-size:clamp(11px,2.5vw,14px); font-weight:700; color:var(--t2); text-transform:uppercase; letter-spacing:1px; margin-top:4px; }
.di { display:flex; align-items:center; gap:16px; padding:clamp(12px,3vw,16px) clamp(14px,4vw,20px); background:var(--s1); border:1px solid var(--bdr); border-radius:16px; margin-bottom:10px; }
.di.m1{border-color:rgba(255,215,0,.3);background:rgba(255,215,0,.04)}
.dr { font-family:'Bebas Neue',sans-serif; font-size:clamp(26px,6vw,36px); width:36px; text-align:center; flex-shrink:0; color:var(--muted); }
.dr.m1{color:#b8860b}.dr.m2{color:#888}.dr.m3{color:#a0522d}
.dn { font-size:clamp(16px,4vw,22px); font-weight:700; flex:1; }
.dp { font-family:'Bebas Neue',sans-serif; font-size:clamp(30px,8vw,44px); color:var(--gold); flex-shrink:0; }
.dbw { height:5px; background:var(--s2); border-radius:3px; margin-top:7px; }
.dbar { height:5px; background:linear-gradient(90deg,var(--gold),var(--g2)); border-radius:3px; }

/* Dark mode adjustments for display overlay */
body.dark .di.m1 { background:rgba(255,215,0,.05); }
body.dark .dn { color:var(--text); }

/* ── DETAIL PANEL ── */
.detail-title { font-family:'Bebas Neue',sans-serif; font-size:22px; color:var(--gold); margin-bottom:12px; }
.recent-item { display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--s2); border-radius:10px; margin-bottom:8px; }
.recent-left { flex:1; }
.recent-name { font-size:13px; font-weight:700; }
.recent-meta { font-size:10px; color:var(--muted); margin-top:2px; }
.recent-pts  { font-family:'Bebas Neue',sans-serif; font-size:24px; color:var(--gold); }

/* ── TOAST ── */
#toasts { position:fixed; top:16px; inset-inline:0; display:flex; flex-direction:column; align-items:center; gap:8px; z-index:9998; pointer-events:none; }
.toast { padding:11px 20px; border-radius:50px; font-weight:700; font-size:clamp(12px,3vw,14px); max-width:88vw; text-align:center; box-shadow:0 4px 20px rgba(0,0,0,.2); transform:translateY(-100px) scale(.9); opacity:0; transition:transform .22s cubic-bezier(.34,1.56,.64,1),opacity .18s; }
.toast.show { transform:none; opacity:1; }
.t-ok   { background:var(--grn); color:#fff; }
.t-err  { background:var(--red); color:#fff; }
.t-info { background:var(--blue); color:#fff; }
.t-def  { background:var(--s1); color:var(--text); border:1px solid var(--bhi); box-shadow:0 4px 20px rgba(0,0,0,.12); }

/* ── MISC ── */
.divider { height:1px; background:var(--bdr); margin:16px 0; }
.add-form { background:var(--s1); border:1px solid var(--bdr); border-radius:var(--r); padding:16px; margin-bottom:12px; box-shadow:var(--shadow); }
.empty { text-align:center; padding:clamp(30px,8vw,52px) 16px; }
.empty-ico { font-size:clamp(36px,10vw,52px); }
.empty p { font-size:clamp(12px,3vw,14px); color:var(--t2); line-height:1.6; margin-top:12px; }
.code-block { background:var(--s2); border-radius:var(--rs); padding:10px 12px; font-family:monospace; font-size:13px; color:var(--t2); line-height:1.8; }

/* ── LANDSCAPE (mobile only) ── */
@media(orientation:landscape) and (max-height:500px) {
  .view-content { padding:10px 12px 60px; }
  .cam-wrap { max-height:180px; aspect-ratio:unset; }
  .seat { min-height:42px; }
  .sn { font-size:clamp(12px,2.5vw,17px); }
}

/* ── HOLDING PEN ────────────────────────────────────── */
.holding-pen {
  margin-top:20px;
  background:var(--s1);
  border:1.5px solid var(--gring);
  border-radius:var(--r);
  padding:14px;
  box-shadow:var(--shadow);
}
.pen-header { margin-bottom:10px; }
.pen-title {
  font-size:13px; font-weight:700; margin-bottom:4px;
  display:flex; align-items:center; gap:8px;
}
.pen-count {
  background:var(--gold); color:#fff;
  font-size:10px; font-weight:800;
  padding:2px 7px; border-radius:20px;
}
.pen-hint {
  font-size:11px; color:var(--t2); line-height:1.5;
}
.pen-chips {
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px;
}
.pen-chip {
  display:flex; align-items:center; gap:6px;
  background:var(--s2); border:1.5px solid var(--bhi);
  border-radius:20px; padding:7px 12px;
  cursor:grab; user-select:none; transition:.14s;
}
.pen-chip:hover { border-color:var(--gold); background:var(--gdim); }
.pen-chip:active { transform:scale(.95); }
.pen-chip.selected {
  background:var(--gdim); border-color:var(--gold);
  box-shadow:0 0 0 3px var(--gdim);
}
.pen-chip-name { font-size:13px; font-weight:700; }
.pen-chip-pts {
  font-family:'Bebas Neue',sans-serif; font-size:16px;
  color:var(--gold); flex-shrink:0;
}
.pen-clear-btn {
  background:none; border:none; color:var(--muted);
  font-size:12px; cursor:pointer; padding:4px 0;
  text-decoration:underline; display:block;
  font-family:inherit;
}
.pen-clear-btn:hover { color:var(--red); }

/* Drag-over highlight on empty seats */
.seat.drag-over {
  border-color:var(--gold) !important;
  background:var(--gdim) !important;
  transform:scale(1.05);
}