*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* ── Palette dari brief (4 swatch) ──
     #2d3428  dark forest  → canvas/ink
     #4a5748  muted moss   → ink-soft
     #a8795a  sienna brown → accent
     #e4ddd3  warm cream   → bg/light
  */
  --ink:#2d3428;
  --ink-soft:#4a5748;
  --muted:#6b7868;
  --bg:#e4ddd3;
  --bg2:#d8d0c5;
  --canvas:#2d3428;
  --card:#ece7e0;
  --accent:#a8795a;
  --accent2:#8a6148;
  --green:#2a6e3f;
  --red:#b52020;
  --yellow:#c9940a;
  --border:#c0b9af;
  --logo-filter:brightness(0) invert(1) sepia(1) saturate(0.2) brightness(0.9);
  --mono:'JetBrains Mono',monospace;
  --sans:'Inter Tight',sans-serif;
  --display:'Archivo Black',sans-serif;
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
html{font-family:var(--sans);background:var(--bg);color:var(--ink);font-size:15px;line-height:1.55;-webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:none}

/* ── LAYOUT ── */
body{display:flex;flex-direction:column;min-height:100vh}
.topbar{
  background:var(--canvas);color:var(--bg);
  display:flex;align-items:center;gap:16px;
  padding:0 28px;height:56px;position:sticky;top:0;z-index:100;
  border-bottom:1px solid var(--border);
}
.topbar-logo{display:flex;align-items:center;flex:1}
.topbar-logo img{height:22px;width:auto;display:block;filter:var(--logo-filter)}
.topbar-user{font-family:var(--mono);font-size:11px;color:rgba(228,221,211,.55);letter-spacing:.1em}
.topbar-out{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--bg);
  cursor:pointer;background:none;border:1px solid rgba(228,221,211,.35);padding:5px 12px;
  transition:.2s;
}
.topbar-out:hover{background:rgba(228,221,211,.12);color:var(--bg);border-color:var(--bg)}
.theme-toggle{
  font-size:16px;background:none;border:none;cursor:pointer;
  color:var(--muted);padding:4px 8px;transition:.2s;line-height:1;
}
.theme-toggle:hover{color:var(--ink)}

.admin-wrap{display:flex;flex:1;overflow:hidden}

/* ── SIDEBAR ── */
.sidebar{
  width:220px;min-width:220px;background:var(--canvas);color:var(--bg);
  padding:28px 0;display:flex;flex-direction:column;gap:4px;
  border-right:1px solid var(--border);overflow-y:auto;
}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:11px 22px;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(228,221,211,.5);transition:.15s;border-left:2px solid transparent;
}
.nav-item:hover{color:var(--bg);background:rgba(228,221,211,.06)}
.nav-item.active{color:var(--bg);border-left-color:var(--accent);background:rgba(168,121,90,.20)}
.nav-icon{width:14px;height:14px;opacity:.7;flex-shrink:0}
.nav-item.active .nav-icon{opacity:1}
.nav-sep{height:1px;background:var(--border);margin:12px 0}
.nav-grouplabel{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(228,221,211,.4);padding:14px 22px 6px}

/* ── MAIN ── */
.main{flex:1;overflow-y:auto;padding:32px 36px;min-width:0}
.page{display:none}
.page.active{display:block}

/* ── HEADINGS ── */
.pg-header{margin-bottom:28px;border-bottom:1px solid var(--border);padding-bottom:20px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pg-title{font-family:var(--display);font-size:24px;letter-spacing:.02em}
.pg-sub{font-size:13px;color:var(--muted);font-family:var(--mono);letter-spacing:.08em;margin-top:4px;text-transform:uppercase}

/* ── CARDS ── */
.card{background:var(--card);border:1px solid var(--border);padding:22px 24px;border-radius:2px;margin-bottom:20px}
.card-title{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:16px}

/* ── STATS ROW ── */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:24px}
.stat-card{background:var(--canvas);color:var(--bg);padding:18px 20px;border-radius:2px;border:1px solid rgba(228,221,211,.12)}
.stat-num{font-family:var(--display);font-size:32px;color:var(--bg);line-height:1}
.stat-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(228,221,211,.5);margin-top:6px}

/* ── SLOT STATUS CONTROL ── */
.slot-grid{display:flex;flex-direction:column;gap:8px}

/* accordion cards */
.slot-card{border:1px solid var(--border);border-radius:6px;background:var(--bg2);overflow:hidden}
.slot-card-head{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;user-select:none;transition:background .15s}
.slot-card-head:hover{background:rgba(228,221,211,.06)}
.slot-card-body{display:none;padding:14px 16px;border-top:1px solid var(--border)}
.slot-card.open .slot-card-body{display:block}
.slot-chevron{font-size:13px;color:var(--muted);transition:transform .2s;flex-shrink:0}
.slot-card.open .slot-chevron{transform:rotate(180deg)}

.slot-ctrl{background:var(--bg2);border:1px solid var(--border);padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.slot-ctrl-head{display:flex;justify-content:space-between;align-items:center}
.slot-name{font-family:var(--display);font-size:13px;letter-spacing:.04em}
.slot-price{font-family:var(--mono);font-size:11px;color:var(--muted)}
.slot-badge-ctrl{font-family:var(--mono);font-size:10px;letter-spacing:.12px;padding:3px 8px;border-radius:2px;text-transform:uppercase;font-weight:600}
.slot-badge-ctrl.Ready{background:#1a3d26;color:#6ecf8e}
.slot-badge-ctrl.SoldOut{background:#3d1a1a;color:#e08080}
.slot-badge-ctrl.Closed{background:#2e2a24;color:var(--muted)}
.slot-label-wrap{display:flex;flex-direction:column;gap:6px}
.slot-label-wrap label{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.slot-input{font-family:var(--sans);font-size:13px;padding:7px 10px;border:1px solid var(--border);background:var(--bg2);color:var(--ink);width:100%}
.slot-status-btns{display:flex;gap:6px}
.ss-btn{flex:1;font-family:var(--mono);font-size:10px;letter-spacing:.08em;padding:6px 4px;border:1px solid var(--border);background:var(--bg2);color:var(--ink);cursor:pointer;text-transform:uppercase;transition:.15s}
.ss-btn:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.ss-btn.sel-Ready{background:#3a8a52;color:#fff;border-color:#3a8a52}
.ss-btn.sel-SoldOut{background:#c44040;color:#fff;border-color:#c44040}
.ss-btn.sel-Closed{background:#3a4038;color:var(--bg);border-color:#3a4038}

.save-btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--bg);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:10px 20px;border:none;cursor:pointer;transition:.2s}
.save-btn:hover{background:var(--accent);color:var(--ink)}
.save-btn:disabled{opacity:.5;cursor:not-allowed}
.save-btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--border)}
.save-btn.ghost:hover{background:var(--ink);color:var(--bg)}
.save-btn.accent{background:var(--accent);color:var(--ink)}
.save-btn.accent:hover{background:var(--accent2)}

/* ── TABLE ── */
.tbl-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.search-box{flex:1;min-width:200px;max-width:320px;font-family:var(--sans);font-size:13px;padding:8px 12px;border:1px solid var(--border);background:var(--bg2);color:var(--ink)}
.search-box:focus{outline:none;border-color:var(--ink)}
.filter-sel{font-family:var(--mono);font-size:11px;padding:8px 10px;border:1px solid var(--border);background:var(--bg2);color:var(--ink);letter-spacing:.06em}
.export-btn{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:8px 16px;border:1px solid var(--border);background:var(--bg2);color:var(--ink);cursor:pointer;transition:.15s}
.export-btn:hover{background:var(--ink);color:var(--bg)}

.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:13px}
thead tr{background:var(--canvas);color:var(--bg)}
thead th{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:11px 12px;text-align:left;white-space:nowrap;font-weight:500;cursor:pointer;user-select:none}
thead th.sort-asc::after{content:' ↑';color:var(--accent)}
thead th.sort-desc::after{content:' ↓';color:var(--accent)}
tbody tr{border-bottom:1px solid var(--border);transition:.1s}
tbody tr:hover{background:rgba(228,221,211,.04)}
tbody td{padding:11px 12px;vertical-align:middle}
td.mono{font-family:var(--mono);font-size:11px;color:var(--ink-soft)}
td.name{font-weight:600;font-size:13px}
.status-pill{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:2px;font-weight:600}
.status-pill.booked{background:#1a3d26;color:#6ecf8e}
.status-pill.pending{background:#3d3010;color:#c9a030}
.status-pill.verified{background:#0e2840;color:#6aabdf}
.del-btn{font-family:var(--mono);font-size:10px;letter-spacing:.08em;background:none;border:1px solid var(--border);color:var(--muted);padding:5px 10px;cursor:pointer;transition:.15s}
.del-btn:hover{background:#c44040;border-color:#c44040;color:#fff}

/* ── PESERTA MOBILE CARDS ── */
.peserta-cards{display:none;flex-direction:column;gap:10px}
.peserta-card{background:var(--card);border:1px solid var(--border);padding:14px 16px;border-radius:2px;cursor:pointer;transition:.15s}
.peserta-card:active{background:var(--bg2);transform:scale(.99)}
.pc-row1{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:6px}
.pc-name{font-weight:600;font-size:14px;line-height:1.3}
.pc-meta{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:4px}
.pc-row2{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--border)}

/* ── DETAIL DRAWER ── */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200;display:none;align-items:flex-start;justify-content:flex-end}
.drawer-overlay.open{display:flex}
.drawer{width:min(520px,100vw);height:100vh;background:var(--card);overflow-y:auto;padding:32px;box-shadow:-8px 0 32px rgba(0,0,0,.4);animation:slideIn .2s ease;-webkit-overflow-scrolling:touch}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
.drawer-close{font-family:var(--mono);font-size:10px;letter-spacing:.1em;background:none;border:1px solid var(--border);padding:7px 14px;cursor:pointer;color:var(--muted);margin-bottom:24px}
.drawer-close:hover{border-color:var(--ink);color:var(--ink)}
.drawer-name{font-family:var(--display);font-size:22px;margin-bottom:6px}
.drawer-email{font-family:var(--mono);font-size:12px;color:var(--muted);margin-bottom:20px}
.drawer-section{margin-bottom:20px}
.drawer-sec-title{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:12px}
.drawer-row{display:flex;gap:12px;margin-bottom:8px;font-size:13px}
.drawer-row .lbl{color:var(--muted);min-width:140px;font-size:12px}
.drawer-row .val{font-weight:500;word-break:break-word}
.drawer-status-wrap{display:flex;gap:8px;margin-top:16px}
.drawer-status-btn{flex:1;font-family:var(--mono);font-size:10px;letter-spacing:.08em;padding:9px;border:1px solid var(--border);background:var(--bg2);color:var(--ink);cursor:pointer;text-transform:uppercase;transition:.15s}
.drawer-status-btn:hover{background:var(--ink);color:var(--bg)}
.drawer-status-btn.active-booked{background:#3a8a52;color:#fff;border-color:#3a8a52}
.drawer-status-btn.active-verified{background:#1a5fa0;color:#fff;border-color:#1a5fa0}
.bib-edit{display:flex;gap:8px;margin-top:10px}
.bib-edit input{flex:1;font-family:var(--mono);font-size:13px;padding:8px 10px;border:1px solid var(--border);background:var(--bg2);color:var(--ink)}
.bib-edit button{font-family:var(--mono);font-size:10px;letter-spacing:.1em;background:var(--ink);color:var(--bg);border:none;padding:0 16px;cursor:pointer}
.bib-edit button:hover{background:var(--accent);color:var(--ink)}

/* ── LOGIN ── */
#loginPage{position:fixed;inset:0;background:var(--canvas);display:flex;align-items:center;justify-content:center;z-index:999}
.login-card{background:var(--bg);padding:40px 44px;max-width:380px;width:90%;border-top:3px solid var(--accent)}
.login-logo{display:flex;align-items:center;margin-bottom:6px}
.login-logo img{height:26px;width:auto;filter:var(--logo-filter)}
.login-sub{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:28px}
.login-field{margin-bottom:14px}
.login-field label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.login-field input{width:100%;font-family:var(--sans);font-size:14px;padding:10px 12px;border:1px solid var(--border);background:var(--bg2);color:var(--ink)}
.login-field input:focus{outline:none;border-color:var(--ink)}
.login-submit{width:100%;margin-top:8px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;background:var(--ink);color:var(--bg);border:none;padding:13px;cursor:pointer;transition:.2s}
.login-submit:hover{background:var(--accent);color:var(--ink)}
.login-err{font-family:var(--mono);font-size:11px;color:#c44040;margin-top:10px;min-height:18px}

/* ── TOAST ── */
#toast{position:fixed;bottom:24px;right:24px;z-index:500;background:var(--canvas);color:var(--bg);font-family:var(--mono);font-size:11px;letter-spacing:.1em;padding:12px 20px;pointer-events:none;opacity:0;transition:opacity .3s;border-left:3px solid var(--accent);border:1px solid var(--border);max-width:320px}
#toast.show{opacity:1}
#toast.ok{border-left-color:var(--green)}
#toast.err{border-left-color:var(--red)}

/* ── CONFIRM MODAL ── */
.confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:300;display:none;align-items:center;justify-content:center;padding:20px}
.confirm-overlay.open{display:flex}
.confirm-card{background:var(--card);padding:32px;max-width:380px;width:100%;border-top:3px solid var(--red)}
.confirm-card h3{font-family:var(--display);font-size:18px;margin-bottom:10px}
.confirm-card p{font-size:13px;color:var(--ink-soft);margin-bottom:24px}
.confirm-btns{display:flex;gap:10px}
.confirm-btns button{flex:1;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:10px;cursor:pointer;border:1px solid var(--border)}
.confirm-btns .c-del{background:var(--red);color:#fff;border-color:var(--red)}
.confirm-btns .c-del:hover{background:#a03030}
.confirm-btns .c-cancel{background:var(--bg2);color:var(--ink)}
.confirm-btns .c-cancel:hover{background:var(--bg)}

.drawer-status-btn.active-Slot\ Reserved{background:#3a4038;color:var(--bg);border-color:#3a4038}
.drawer-status-btn.active-Early\ Bird{background:var(--accent2);color:#fff;border-color:var(--accent2)}
.drawer-status-btn.active-Registered{background:#1a5fa0;color:#fff;border-color:#1a5fa0}
.drawer-status-btn.active-Verified{background:#3a8a52;color:#fff;border-color:#3a8a52}
.status-pill.Slot\ Reserved{background:#2e3424;color:rgba(228,221,211,.6)}
.status-pill.Early\ Bird{background:#3d2e0a;color:#c9a030}
.status-pill.Registered{background:#0e2840;color:#6aabdf}
.status-pill.Verified{background:#1a3d26;color:#6ecf8e}

/* ── PAGINATION ── */
.pagination{display:flex;align-items:center;gap:8px;margin-top:16px;font-family:var(--mono);font-size:11px;justify-content:flex-end}
.pg-btn{padding:6px 12px;border:1px solid var(--border);background:var(--bg2);color:var(--ink);cursor:pointer;letter-spacing:.06em;transition:.15s}
.pg-btn:hover{background:var(--ink);color:var(--bg)}
.pg-btn:disabled{opacity:.4;cursor:not-allowed}
.pg-info{color:var(--muted);letter-spacing:.1em}

/* ════════════════════════════════════════════════════════════════════
   VERIFIKASI PAGE
   ════════════════════════════════════════════════════════════════════ */
.verif-filter{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.verif-pill{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:7px 14px;border:1px solid var(--border);background:var(--bg2);color:var(--ink);cursor:pointer;transition:.15s}
.verif-pill.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.verif-list{display:flex;flex-direction:column;gap:10px}
.verif-row{background:var(--card);border:1px solid var(--border);padding:14px 16px;display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center}
.verif-thumb{width:64px;height:64px;background:var(--bg2);border:1px solid var(--border);cursor:pointer;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.verif-thumb img{width:100%;height:100%;object-fit:cover}
.verif-thumb.empty{font-family:var(--mono);font-size:9px;color:var(--muted);text-align:center;padding:4px}
.verif-info-name{font-weight:600;font-size:14px;line-height:1.3}
.verif-info-meta{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:4px}
.verif-actions{display:flex;flex-direction:column;gap:6px}
.verif-btn{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;border:none;cursor:pointer;transition:.15s;white-space:nowrap}
.verif-btn.confirm{background:var(--green);color:#fff}
.verif-btn.confirm:hover{background:#2a6e3f}
.verif-btn.reject{background:transparent;color:var(--red);border:1px solid var(--red)}
.verif-btn.reject:hover{background:var(--red);color:#fff}

/* ════════════════════════════════════════════════════════════════════
   EDITOR (Running Text / Pre-Event / Lineup / F&B)
   ════════════════════════════════════════════════════════════════════ */
.editor-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.editor-list{display:flex;flex-direction:column;gap:10px}
.editor-item{background:var(--card);border:1px solid var(--border);padding:14px 16px;display:flex;gap:14px;align-items:flex-start}
.editor-thumb{width:80px;height:80px;background:var(--bg2);border:1px solid var(--border);overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.editor-thumb img{max-width:100%;max-height:100%;object-fit:contain}
.editor-thumb.empty{font-family:var(--mono);font-size:9px;color:var(--muted);text-align:center;padding:4px;letter-spacing:.05em}
.editor-body{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.editor-field{display:flex;flex-direction:column;gap:4px}
.editor-field label{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.editor-input,.editor-select,.editor-textarea{font-family:var(--sans);font-size:13px;padding:7px 10px;border:1px solid var(--border);background:var(--bg2);color:var(--ink);width:100%}
.editor-input:focus,.editor-textarea:focus{outline:none;border-color:var(--ink)}
.editor-textarea{resize:vertical;min-height:60px;font-family:var(--sans)}
.editor-actions{display:flex;flex-direction:column;gap:4px;flex-shrink:0}
.icon-btn{font-family:var(--mono);font-size:11px;width:32px;height:28px;border:1px solid var(--border);background:var(--bg2);color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.icon-btn:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.icon-btn.danger:hover{background:var(--red);border-color:var(--red);color:#fff}
.icon-btn:disabled{opacity:.3;cursor:not-allowed}
.toggle-active{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;color:var(--muted);cursor:pointer;user-select:none}
.toggle-active input{cursor:pointer}

.upload-zone{display:flex;flex-direction:column;gap:6px}
.upload-zone .hint{font-family:var(--mono);font-size:9px;color:var(--muted);letter-spacing:.05em}
.upload-zone input[type=file]{font-family:var(--mono);font-size:11px;padding:4px;background:var(--bg2);color:var(--ink);border:1px solid var(--border);cursor:pointer}

.row-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}

/* Running text preview marquee */
.rt-preview{background:var(--canvas);color:var(--bg);padding:14px 0;overflow:hidden;position:relative;margin-bottom:20px;border:1px solid var(--border);height:60px;display:flex;align-items:center}
.rt-preview-track{display:flex;gap:36px;align-items:center;white-space:nowrap;animation:rt-marquee 30s linear infinite;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.rt-preview-track img{height:32px;width:auto;display:block;filter:brightness(1.1)}
@keyframes rt-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Pre-Event page selector */
.page-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.page-tab{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:8px 14px;border:1px solid var(--border);background:var(--bg2);color:var(--ink);cursor:pointer;transition:.15s}
.page-tab.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.page-tab.add{background:transparent;border-style:dashed;color:var(--muted)}
.page-tab.add:hover{color:var(--ink);border-color:var(--ink)}

/* Drag-over state for running text drag & drop */
.editor-item.drag-over{border-color:var(--accent);background:rgba(168,121,90,.10)}
.editor-item[draggable=true]{cursor:grab}
.editor-item[draggable=true]:active{cursor:grabbing}

/* Empty state */
.empty-state{padding:40px 20px;text-align:center;color:var(--ink-soft)}
.em-icon{font-size:24px;margin-bottom:10px;opacity:.5}

/* ════════════════════════════════════════════════════════════════════
   IMAGE PREVIEW MODAL
   ════════════════════════════════════════════════════════════════════ */
.img-overlay{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:400;display:none;align-items:center;justify-content:center;padding:20px;cursor:pointer}
.img-overlay.open{display:flex}
.img-overlay img{max-width:100%;max-height:100%;object-fit:contain}
.img-close{position:absolute;top:20px;right:20px;font-family:var(--mono);font-size:12px;color:var(--bg);background:rgba(0,0,0,.5);border:1px solid rgba(228,221,211,.5);padding:8px 14px;cursor:pointer;letter-spacing:.1em}

/* ════════════════════════════════════════════════════════════════════
   BOTTOM TAB BAR (mobile only)
   ════════════════════════════════════════════════════════════════════ */
.bottom-tabs{
  display:none;
  position:fixed;bottom:0;left:0;right:0;z-index:90;
  background:var(--canvas);color:var(--bg);
  border-top:1px solid var(--border);
  padding-bottom:var(--safe-bottom);
}
.bottom-tabs-inner{display:flex;align-items:stretch;height:58px}
.bt-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(228,221,211,.5);cursor:pointer;transition:.15s;border-top:2px solid transparent;
}
.bt-item.active{color:var(--bg);border-top-color:var(--accent)}
.bt-item svg{width:20px;height:20px;opacity:.85}
.bt-item.active svg{opacity:1}

/* More sheet */
.more-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:150;display:none;align-items:flex-end;justify-content:center}
.more-overlay.open{display:flex}
.more-sheet{
  background:var(--canvas);color:var(--bg);width:100%;max-width:520px;
  border-top-left-radius:14px;border-top-right-radius:14px;
  padding:8px 0 calc(20px + var(--safe-bottom));
  animation:slideUp .22s ease;
}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.more-grab{width:42px;height:4px;background:var(--border);border-radius:2px;margin:8px auto 14px}
.more-title{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(228,221,211,.45);padding:0 24px 10px}
.more-item{display:flex;align-items:center;gap:14px;padding:14px 24px;cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--bg);transition:.15s}
.more-item:hover,.more-item:active{background:rgba(228,221,211,.06)}
.more-item svg{width:18px;height:18px;opacity:.7}

.hint{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.05em}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  html{font-size:14px}
  .topbar{padding:0 16px;height:50px}
  .topbar-logo img{height:18px}
  .topbar-user{display:none}
  .topbar-out{font-size:10px;padding:4px 10px}

  .sidebar{display:none}
  .main{padding:18px 14px calc(80px + var(--safe-bottom)) 14px}
  .bottom-tabs{display:block}

  .pg-header{margin-bottom:18px;padding-bottom:14px;flex-direction:column;align-items:flex-start;gap:8px}
  .pg-title{font-size:20px}
  .pg-sub{font-size:11px}

  .card{padding:16px 14px;margin-bottom:14px}
  .stats-row{grid-template-columns:1fr 1fr;gap:10px}
  .stat-card{padding:14px 14px}
  .stat-num{font-size:26px}

  .slot-grid{flex-direction:column}

  .tbl-wrap{display:none}
  .peserta-cards{display:flex}

  .tbl-toolbar{gap:8px}
  .search-box{min-width:0;max-width:none;flex:1 1 100%}
  .export-btn{margin-left:0;flex:1}
  .filter-sel{flex:1;min-width:0}

  .drawer{padding:22px 18px;width:100%;max-width:100%}
  .drawer-row{flex-direction:column;gap:2px}
  .drawer-row .lbl{min-width:0;font-size:11px}

  .verif-row{grid-template-columns:56px 1fr;gap:10px;padding:12px}
  .verif-thumb{width:56px;height:56px}
  .verif-actions{grid-column:1 / -1;flex-direction:row;margin-top:6px}
  .verif-actions .verif-btn{flex:1}

  .editor-item{flex-direction:column;gap:10px}
  .editor-thumb{width:100%;height:120px}
  .editor-actions{flex-direction:row;width:100%}
  .editor-actions .icon-btn{flex:1}

  #toast{left:14px;right:14px;bottom:calc(74px + var(--safe-bottom));max-width:none}
}

@media(min-width:769px){
  .bottom-tabs{display:none !important}
  .more-overlay{display:none !important}
}