:root{
  /* Theme colors */
  --bg:#0c1212;--card:#0f1818;--card-2:#0b1413;--ink:#eaf6f5;--muted:#9ed2cf;--accent:#0aa8a0;--accent-2:#026c68;--hi:#d6ff2e;--border:#174443;--stroke:#2b4e4c;
  /* Danger palette */
  --danger:#ff4d57;--danger-2:#d93a42;--danger-hi:rgba(255,77,87,.25);
  /* Layout + components */
  --edit-header-h:56px; --logo-preview-size:140px; --panel-pad-x:16px;
  /* Field system */
  --field-h:34px;--field-pad-x:12px;--field-pad-y:8px;--field-radius:10px;--field-font-size:14px;--field-gap:10px;--label-color:var(--muted);--label-weight:600;
}
*{box-sizing:border-box} html,body{height:100%} body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
.topbar{display:flex;align-items:center;height:52px;padding:0 12px;background:linear-gradient(180deg,#0d1616,#0a1212);border-bottom:1px solid var(--border)}
.brand{font-weight:700;color:var(--muted)} .spacer{flex:1} .role{margin-right:8px}
#roleBadge{background:rgba(2,108,104,.2);border:1px solid var(--accent-2);padding:4px 8px;border-radius:999px;color:var(--muted)}
.profile{position:relative}
.menu{position:absolute;right:0;top:32px;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.3);display:flex;flex-direction:column;min-width:160px}
.menu.hidden{display:none}
.menu button{padding:10px 12px;background:transparent;color:var(--ink);border:none;text-align:left}
.menu button:hover{background:rgba(214,255,46,.08)}

.wrap{display:grid;grid-template-columns:360px 1fr;height:calc(100vh - 52px)}
.drawer{border-right:1px solid var(--border);background:linear-gradient(180deg,var(--card),var(--card-2));overflow:hidden}
.panels{height:100%;position:relative}
.panel{position:absolute;inset:0;padding:12px 12px 16px;overflow:auto;scrollbar-color:var(--border) var(--card-2);scrollbar-width:thin}
.panel-content{scrollbar-color:var(--border) var(--card-2);scrollbar-width:thin}
/* Themed scrollbars for vendor list and panels (WebKit) */
.panel::-webkit-scrollbar,.panel-content::-webkit-scrollbar{width:8px;height:8px}
.panel::-webkit-scrollbar-track,.panel-content::-webkit-scrollbar-track{background:var(--card-2);border-radius:4px}
.panel::-webkit-scrollbar-thumb,.panel-content::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.panel::-webkit-scrollbar-thumb:hover,.panel-content::-webkit-scrollbar-thumb:hover{background:var(--accent-2)}
.panel::-webkit-scrollbar-corner,.panel-content::-webkit-scrollbar-corner{background:var(--card-2)}
.panels.mode-list #listPanel{display:block}
.panels.mode-list #editPanel{display:none}
.panels.mode-edit #listPanel{display:none}
.panels.mode-edit #editPanel{display:block}

.panel-head{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.panel-head .title{font-weight:700;min-width:0}
#addBooth{margin-left:15px;flex-shrink:0}
.list{display:flex;flex-direction:column;gap:6px}

.list-item{display:flex;gap:10px;align-items:center;padding:8px;border:1px solid var(--border);background:rgba(2,108,104,.06);border-radius:10px;cursor:pointer}
.list-item:hover{border-color:var(--accent)}
.list-item > div:not(.legend-swatch):not(.badge-thumb){flex:1;min-width:0}
.legend-swatch{width:14px;height:14px;border-radius:4px;border:2px solid var(--stroke);flex-shrink:0}
.badge-thumb{
  width:28px;
  height:28px;
  border-radius:6px;
  overflow:hidden;
  border:1px solid rgba(234,246,245,.25);
  background:rgba(0,0,0,.28);
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}
.badge-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
}

/* small inline chain indicator next to panel contact fields */
.contact-chain{
  font-size:16px;
  line-height:1;
  opacity:0.95;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:6px;
  vertical-align:middle;
  cursor:pointer;
  text-decoration:none;
  color:inherit;
}
.contact-chain:hover{opacity:1}
.contact-chain[aria-hidden="true"]{opacity:0;visibility:hidden}

/* make the email and website inputs expand inside their inline flex container */
#email, #website { flex: 1 1 auto; min-width: 180px; }

/* ensure svg icons inside contact-chain scale and inherit color */
.contact-chain svg{width:18px;height:18px;display:block;fill:currentColor}

/* toast notification (brief, non-modal) */
.mcpp-toast{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%) translateY(10px);
  background:rgba(3,26,25,0.92);
  color:var(--ink);
  padding:8px 12px;
  border-radius:8px;
  border:1px solid var(--border);
  box-shadow:0 8px 30px rgba(0,0,0,0.5);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  z-index:11000;
  font-weight:600;
}
.mcpp-toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}

.list-category{
  position:relative;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(2,108,104,.05);
  overflow:hidden;
  padding:2px; /* inner buffer so header/body align */
}
.category-header{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:10px 14px;
  background:transparent;
  border:none;
  color:var(--ink);
  font-weight:600;
  cursor:pointer;
  transition:background .2s ease;
}
.category-header:hover{filter:brightness(1.08);}
.category-header .label{display:flex;align-items:center;gap:8px;font-weight:600}
.category-header .caret{transition:transform .2s ease;}
.category-header[aria-expanded="false"] .caret{transform:rotate(-90deg);}
.category-body{display:block;padding:8px 10px 10px;display:flex;flex-direction:column;gap:10px}
.category-body:empty{display:none}
.category-body .list-item{margin-bottom:8px}
.category-body .list-item:last-child{margin-bottom:0}
.list-empty{padding:16px;text-align:center;color:var(--muted);font-style:italic;border:1px dashed var(--border);border-radius:10px;background:rgba(2,108,104,.05)}

/* Unified field system for all future inputs */
.panel-content label:not(.tiny):not(.scheduled-day-option):not(.badge-option){
  display:flex;flex-direction:column;gap:2px;margin-bottom:var(--field-gap);
  color:var(--label-color);font-weight:var(--label-weight);
}
.panel-content input,
.panel-content select,
.panel-content textarea {
  height: var(--field-h);
  padding: var(--field-pad-y) var(--field-pad-x);
  border-radius: var(--field-radius);
  border: 1px solid var(--border);
  background: var(--card-2);
  color: var(--ink);
  font-size: var(--field-font-size);
  line-height: 1.4;
}
/* Textareas grow but keep the same visual language */
.panel-content textarea{ min-height: calc(var(--field-h) * 2.4); resize: vertical; }
/* Focus state for all fields */
.panel-content input:focus,
.panel-content select:focus,
.panel-content textarea:focus{
  outline:2px solid var(--hi);box-shadow:0 0 0 2px rgba(214,255,46,.2) inset
}
/* Two-up field grid for compact side drawer */
.panel-content .two{
  display:grid;
  grid-template-columns:1fr 1fr; /* Width + Length */
  gap: var(--field-gap);
}
/* Prevent intrinsic min-content overflow on labels/inputs */
.panel-content .two > label{ min-width:0; }
.panel-content .two input{
  width:100%;
  box-sizing:border-box;
  max-width:100%;
}
/* Collapse to one column on very narrow screens */
@media (max-width: 520px){
  .panel-content .two{ grid-template-columns:1fr; }
}

.inline{display:flex;gap:8px;align-items:flex-end}
.inline label.grow{flex:1 1 auto}
label.nowrap{white-space:nowrap}
label.tiny {
  display: flex;
  flex-direction: column;  /* stack vertically */
  align-items: center; /* left-align */
  gap: 1px;                /* smaller vertical spacing */
  font-size: 12px;
  opacity: .9;
  line-height: 0.6;         /* reduce extra line height space */
}
label.tiny input[type="checkbox"]{
  margin: 0;                /* override UA margins that add extra space */
  transform: translateY(0); /* neutral; keeps centering consistent */
}

/* Remove duplicate logo-preview-size variable block */
#logoPreview{width:100%;height:100%;object-fit:contain;display:none;-webkit-user-drag:none;user-select:none;pointer-events:none}

/* Container for logo and badges side-by-side */
.logo-badges-wrap{
  display:flex;
  gap:12px;
  align-items:stretch; /* make children equal height */
  justify-content:space-between; /* push badge container to the right */
  margin:6px 0;
}

.logo-preview-wrap{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:170px;
  height:170px;
  overflow:hidden;
  border-radius:8px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border);
  position:relative;
}

.logo-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: flex-start;
  min-width: 120px;
}

.logo-buttons button {
  width: 100%;
  font-size: 13px;
  padding: 8px 12px;
  white-space: nowrap;
}

/* Badges fieldset container */
.badges-info-fieldset{
  flex:0 0 110px; /* fixed width instead of flex:1 */
  min-width:0;
  display:flex;
  flex-direction:column;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:rgba(255,255,255,0.02);
}

.badges-info-fieldset legend{
  padding:0 6px;
  font-size:13px;
  font-weight:500;
  color:var(--muted);
}

.badges-info-fieldset .hint{
  display:block;
  text-align:center;
  color:var(--muted);
  font-size:11px;
  margin-top:auto; /* push to bottom */
}

/* Badge grid inside fieldset */
.panel-badges{
  display:grid;
  grid-template-columns: repeat(2, 40px);
  grid-template-rows: repeat(2, 40px);
  gap:6px;
  margin-bottom:8px;
  justify-content:center; /* center the badge grid */
  flex:1;
  align-content:center; /* vertically center badges */
}

/* Base styling for all panel badges */
.panel-badge{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:transparent;
  cursor:pointer; /* show pointer cursor on hover */
  transition: transform 0.15s ease, filter 0.15s ease;
}

/* Hover effect for badges */
.panel-badge:hover{
  transform: scale(1.08);
  filter: brightness(1.15);
}

/* Individual badge colors matching map badges */
.panel-event-staff-badge{ color: var(--danger); }
.panel-partner-vendor-badge{ color: #3498DB; }
.panel-featured-vendor-badge{ color: #FFD700; }
.panel-return-vendor-badge{ color: var(--hi); }

/* Ensure SVG scales nicely */
.panel-badge svg{
  width:100%;
  height:100%;
  display:block;
}

/* Toast notification - Save button */
.save-toast{
  position:fixed;
  padding:8px 12px;
  background:rgba(3,26,25,0.92);
  color:var(--ink);
  border-radius:8px;
  border:1px solid var(--border);
  font-size:14px;
  font-weight:600;
  box-shadow:0 8px 30px rgba(0,0,0,0.5);
  opacity:0;
  transform:translateY(10px);
  transition:opacity 0.18s ease, transform 0.18s ease;
  z-index:10000;
  pointer-events:none;
}

.save-toast.show{
  opacity:1;
  transform:translateY(0);
}

.map-wrap{position:relative}
#map{position:absolute;inset:0}
.map-overlay-buttons{position:absolute;top:10px;right:16px;z-index:5;display:flex;flex-direction:column;gap:8px;align-items:stretch;width:180px;pointer-events:none}
.map-overlay-buttons button{pointer-events:auto;width:100%;min-height:40px;padding:0 14px;border-radius:10px;border:1px solid var(--border);background:rgba(12,18,18,0.92);color:var(--muted);font-size:13px;font-weight:600;box-shadow:0 4px 16px rgba(0,0,0,0.4);backdrop-filter:blur(8px);display:inline-flex;align-items:center;justify-content:space-between;gap:10px}
.map-overlay-buttons button:hover{filter:brightness(1.12);background:rgba(2,108,104,.25);color:var(--ink)}
.map-overlay-buttons button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.map-overlay-buttons .map-overlay-btn-icon{flex-shrink:0;width:20px;height:20px}

button.ghost{border:1px solid var(--border);background:transparent;color:var(--ink);border-radius:10px;padding:4px 8px}
button.warn{background:rgba(214,255,46,.12);border:1px solid var(--hi);color:#eaf6f5}
button.danger{background:rgba(255,54,54,.14);border:1px solid #ff5454;color:#ffdede}

.actions-bottom{display:grid;gap:8px;margin-top:12px}

@media (max-width:900px){
  .wrap{grid-template-columns: min(92vw,380px) 1fr}
}

/* NEW: generic hide helper */
.hidden { display: none !important; }

/* Make top bar and profile menu float above map/admin controls */
.topbar { position: relative; z-index: 20; }        /* was no z-index */
.menu   { z-index: 1000; }                          /* ensure dropdown is on top */

#map { z-index: 1; }


.mcpp-label-center {
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
}

.category-wrap {
  margin-top: var(--field-gap);  /* space above Category label/pill */
  margin-bottom: var(--field-gap); /* space below pill before next label */
}

.panel-content label.field-label {
  display: flex;
  flex-direction: column;
  gap: var(--field-gap);
  margin-bottom: var(--field-gap);
  color: var(--label-color);
  font-weight: var(--label-weight);
  font-size: var(--field-font-size);
}

#editPanel .category-wrap .pill{
  display:block;width:100%;
  height: var(--field-h);
  padding: var(--field-pad-y) var(--field-pad-x);
  border-radius: var(--field-radius);
  border:1px solid var(--border);
  background:var(--card-2);color:var(--ink);
  font-size:var(--field-font-size);line-height:1.4;font-weight:400;text-align:left;
  display:flex;align-items:center;
}

/* optional belt-and-suspenders */
.gm-style .mcpp-rot-knob { display:none; }

/* Booth # row — align label and input on the same baseline */
.booth-id-row{
  display:flex;
  align-items: baseline; /* keeps text baselines aligned */
  gap: 8px;
}

/* Override the global .panel-content label column rules for this one row */
.booth-id-row label{
  display: inline-block;
  margin: 0;             /* no extra bottom margin */
  gap: 0;                /* kill any inherited gap */
  font-size: var(--field-font-size);
  line-height: 1.2;
  font-weight: 500;
}

/* Make the input visually match the label’s text height/baseline */
.booth-id-row input{
  font-size: var(--field-font-size);
  line-height: 1.2;                  /* match label’s line-height */
  height: calc(1.2em + 6px);         /* padding + border baked in */
  padding: 2px 8px;                  /* compact, keeps baseline feel */
  border-radius: var(--field-radius);
  border: 1px solid var(--border);
  background: var(--card-2);
  color: var(--ink);
  width: auto;                        /* don’t stretch full width */
  box-sizing: border-box;
  vertical-align: baseline;
}

/* If your global label style adds bottom margin, neutralize it here */
#editPanel .booth-id-row label.field-label,
#editPanel .booth-id-row label{
  margin-bottom: 0 !important;
}

/* Booth search box styling — matches form field aesthetic */
#listSearch {
  width: 100%;
  padding: 6px 10px;
  border-radius: var(--field-radius);
  border: 1px solid var(--border);
  background: var(--card-2);
  color: var(--ink);
  font-size: var(--field-font-size);
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
}

/* Focus state for consistent highlight effect */
#listSearch:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* Placeholder color to match your muted text palette */
#listSearch::placeholder {
  color: var(--muted);
  opacity: 0.8;
}

/* Optional – tighten layout inside panel header */
.panel-head input#listSearch {
  margin-top: 6px;
  margin-bottom: 4px;
}

.panel-search { margin-top: 2px; margin-bottom: 10px; }

.schedule-wrap {
  margin: var(--field-gap) 0;
}

.schedule-label {
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--ink);
}

#scheduledDaysDisplay {
  padding: 6px 10px;
  border-radius: var(--field-radius);
  border: 1px solid var(--border);
  background: var(--card-2);
  color: var(--ink);
  font-size: var(--field-font-size);
  margin-bottom: var(--field-gap);
}

#scheduledDaysFieldset {
  border: 1px solid var(--border);
  border-radius: var(--field-radius);
  padding: var(--field-pad-y) var(--field-pad-x);
  background: var(--card-2);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

#scheduledDaysFieldset legend {
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0 4px;
}

.scheduled-days-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.scheduled-day-option {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: var(--ink);
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--field-radius);
  background: var(--card-2);
  transition: border-color 0.2s ease;
  cursor: pointer;
}

.scheduled-day-option:hover {
  border-color: var(--hi);
}

.scheduled-day-option .day-label {
  font-weight: 500;
  white-space: nowrap;
  flex: 1;
}

.scheduled-day-option input[type="checkbox"] {
  transform: scale(1.15);
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
}

.scheduled-day-option input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.scheduled-day-option:has(input:disabled) {
  cursor: default;
  opacity: 0.85;
}

.scheduled-day-option:has(input:disabled):hover {
  border-color: var(--border);
}

.schedule-wrap .hint {
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}

/* Badge Selection Fieldset with Visual Icons */
.badges-fieldset {
  margin: var(--field-gap) 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--field-radius);
  background: var(--card-2);
}

.badges-fieldset legend {
  padding: 0 8px;
  font-weight: 600;
  color: var(--ink);
  font-size: 0.95rem;
}

.badges-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 8px;
}

.badge-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  position: relative;
}

.badge-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.badge-icon-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  border: 2px solid transparent;
  background: var(--card);
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.badge-option:hover .badge-icon-label {
  border-color: var(--hi);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}

.badge-option input[type="checkbox"]:checked + .badge-icon-label {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--accent-light, rgba(66, 153, 225, 0.1)), var(--card));
  box-shadow: 0 4px 12px rgba(66, 153, 225, 0.3);
}

.badge-option input[type="checkbox"]:focus-visible + .badge-icon-label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.badges-fieldset .hint {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}

/* Responsive: stack badges on narrow screens */
@media (max-width: 500px) {
  .badges-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

#returnVendorDisplay {
  padding: 6px 10px;
  border-radius: var(--field-radius);
  border: 1px solid var(--border);
  background: var(--card-2);
  color: var(--ink);
  font-size: var(--field-font-size);
}


#adminBar.map-overlay-buttons {
  display: flex;
}

/* Vendor/Booth list actions row */
.panel-actions { display:flex; gap:8px; margin: 6px 0 10px; }
.panel-actions > button { flex: 0 0 auto; }

/* ===============================
   Button system — panel buttons
   =============================== */
/* Base style for buttons inside drawer panels */
.drawer .panel button {
  height: var(--field-h);
  padding: var(--field-pad-y) var(--field-pad-x);
  border-radius: var(--field-radius);
  border: 1px solid var(--border);
  background: var(--card-2);
  color: var(--ink);
  font-size: var(--field-font-size);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .2px;
  box-sizing: border-box;
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, filter .18s ease;
  cursor: pointer;
}

/* Primary action */
.drawer .panel button.prim {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border-color: var(--accent-2);
  color: #fff;
}

/* Hover/focus/active feedback */
.drawer .panel button:hover { filter: brightness(1.06); }
.drawer .panel button:focus-visible {
  outline: 2px solid var(--hi);
  outline-offset: 2px;
}
.drawer .panel button:active { filter: brightness(0.98); }

/* Disabled state */
.drawer .panel button[disabled],
.drawer .panel button:disabled {
  opacity: .55;
  cursor: not-allowed;
  filter: none;
}

/*  (Already kept above, so removed here) */

/* ==============================
   Sticky Booth Actions + Danger Button
   ============================== */

/* Remove duplicate danger/edit-header-h variable block */

/* --- Delete Booth button styling --- */
button.danger {
  background: linear-gradient(180deg, var(--danger), var(--danger-2));
  border: 1px solid var(--danger-2);
  color: #fff;
  font-weight: 600;
  border-radius: var(--field-radius);
  transition: background 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}
button.danger:hover {
  filter: brightness(1.08);
}
button.danger:active {
  filter: brightness(0.95);
}
button.danger:focus-visible {
  outline: 2px solid var(--danger-hi);
  outline-offset: 2px;
}

/* --- Sticky footer for the Selected Booth panel --- */
#editPanel .actions-bottom {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: grid;
  grid-auto-flow: row;
  gap: 8px;
  padding: 10px 0 8px;
  background: var(--card);
  border-top: 1px solid var(--hi);
  backdrop-filter: none;
  backdrop-filter: saturate(110%) blur(2px);
  margin-bottom: 0;
}

/* Buttons fill full width in narrow layout */
#editPanel .actions-bottom button {
  width: 100%;
}

/* Add extra bottom padding so form content doesn’t hide behind sticky bar */
#editPanel .panel-content {
  padding-bottom: calc(var(--field-gap));
}

/* On wider screens, show buttons in two columns */
@media (min-width: 1100px) {
  #editPanel .actions-bottom {
    grid-template-columns: 1fr 1fr;
  }
  #editPanel .actions-bottom button:nth-child(3) {
    grid-column: 1 / -1; /* Delete Booth spans full width */
  }
}

/* Ensure Delete Booth uses danger theme (wins against generic button styles) */
.drawer .panel .actions-bottom button#deleteBooth.danger{
  background: linear-gradient(180deg, var(--danger), var(--danger-2)) !important;
  border: 1px solid var(--danger-2) !important;
  color: #fff !important;
}

#editPanel.panel{
  padding-bottom: 0 !important;   /* remove panel's bottom padding so sticky sits flush */
}

/* Extra safety: mask any remaining bleed with a bottom pad overlay */
#editPanel.panel::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;                     /* tiny shim to ensure no subpixel bleed */
  background: var(--card);
  pointer-events: none;
}

/* === Sticky header for Selected Booth panel (matches footer style) === */
#editPanel .actions-top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  min-height: var(--edit-header-h);
  background: var(--card);
  border-bottom: 1px solid var(--hi);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

/* Style the booth number label */
#editPanel .actions-top .booth-id-display {
  font-weight: 600;
  color: var(--hi);
  letter-spacing: 0.5px;
}

/* Back button consistency */
#editPanel .actions-top button.ghost {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink);
  border-radius: 10px;
  padding: 4px 8px;
  font-weight: 600;
  transition: filter 0.2s ease;
}

#editPanel .actions-top button.ghost:hover {
  filter: brightness(1.2);
}

#editPanel .actions-top .booth-lock-btn {
  padding: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#editPanel .actions-top .booth-lock-btn .lock-icon {
  display: block;
}

/* Booth locked: show edit UI but dimmed and disabled (lock button stays active); content stays scrollable */
#editPanel.booth-locked .panel-content {
  opacity: 0.65;
}
#editPanel.booth-locked .actions-bottom {
  opacity: 0.65;
  pointer-events: none;
}
#editPanel.booth-locked .actions-bottom button {
  cursor: not-allowed;
}
#editPanel.booth-locked .panel-content input:disabled,
#editPanel.booth-locked .panel-content select:disabled,
#editPanel.booth-locked .panel-content textarea:disabled,
#editPanel.booth-locked .panel-content button:disabled {
  cursor: not-allowed;
}

/* Remove duplicate .actions-top and header padding shims */
 
/* === FINAL OVERRIDES: Selected Booth layout & scrolling ==================== */
/* Goal: sticky header/footer stay pinned; only the fields area scrolls. */

/* Force #editPanel to be a flex column container, not absolutely positioned */
.panels.mode-edit #editPanel.panel {
  position: relative !important;   /* cancels .panel{position:absolute} */
  inset: auto !important;          /* cancels .panel{inset:0} */
  height: 100% !important;         /* ensure full column height */
  display: flex !important;        /* flex column layout for header/content/footer */
  flex-direction: column !important;
  overflow: hidden !important;     /* stop whole panel from scrolling */
  padding: 0 !important;           /* header/footer sit flush */
}

/* Make only the content area scrollable within the flex column */
.panels.mode-edit #editPanel .panel-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;        /* CRITICAL: allow overflow to scroll in flex */
  overflow-y: auto !important;     /* this is the only scroller */
  -webkit-overflow-scrolling: touch; /* smooth mobile scroll */
  padding-top: calc(var(--edit-header-h, 56px) + 6px) !important; /* keep below header */
  padding-bottom: var(--field-gap) !important;                    /* above footer */
}

/* Keep sticky bars above scroller content and fully opaque */
.panels.mode-edit #editPanel .actions-top,
.panels.mode-edit #editPanel .actions-bottom {
  z-index: 15 !important;
  background: var(--card) !important;
}

/* Top shim and bottom shim to mask sub-pixel bleed on some GPUs */
.panels.mode-edit #editPanel.panel::before,
.panels.mode-edit #editPanel.panel::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--card);
  pointer-events: none;
}
.panels.mode-edit #editPanel.panel::before { top: 0; }
.panels.mode-edit #editPanel.panel::after  { bottom: 0; }
/* === Panel side padding applied to both Edit and Viewer panels === */
#editPanel .actions-top,
#editPanel .panel-content,
#editPanel .actions-bottom{
  padding-left: var(--panel-pad-x) !important;
  padding-right: var(--panel-pad-x) !important;
}

#listPanel .panel-head,
#listPanel .panel-content{
  padding-left: var(--panel-pad-x) !important;
  padding-right: var(--panel-pad-x) !important;
}
#listPanel .panel-head{
  padding-right: 6px !important;
}
/* === Tighten gap beneath sticky header in Selected Booth panel === */
#editPanel .actions-top{ margin-bottom: 0 !important; padding-bottom: 4px; }
#editPanel .panel-content{ padding-top: var(--field-gap) !important; }
#editPanel .category-wrap{ margin-top: calc(var(--field-gap) * 0.5) !important; }

/* === Tighten gap beneath header (beat .panels.mode-edit rule) === */
.panels.mode-edit #editPanel .panel-content{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding-top: var(--field-gap) !important;
  padding-bottom: var(--field-gap) !important;
  padding-left: var(--panel-pad-x) !important;
  padding-right: var(--panel-pad-x) !important;
}
#editPanel .panel-content > :first-child{
  margin-top: 0 !important;
}

/* Rotation slider: thin track, thumb centered on line, number-line style ticks at each step */
.rotation-slider-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rotation-slider-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rotation-slider-end {
  font-size: 12px;
  color: var(--muted);
  font-weight: var(--label-weight);
  flex-shrink: 0;
  min-width: 1.8em;
}
.rotation-slider-wrap .rotation-slider-end:last-child {
  text-align: right;
}
#rotationDeg {
  flex: 1 1 auto;
  min-width: 0;
  height: 24px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  /* Thin horizontal line with vertical ticks at 0%, 25%, 50%, 75%, 100% (number-line style) */
  background-image:
    linear-gradient(to right, var(--border) 0, var(--border) 100%),
    linear-gradient(to bottom, var(--muted) 0, var(--muted) 8px, transparent 8px),
    linear-gradient(to bottom, var(--muted) 0, var(--muted) 8px, transparent 8px),
    linear-gradient(to bottom, var(--muted) 0, var(--muted) 8px, transparent 8px),
    linear-gradient(to bottom, var(--muted) 0, var(--muted) 8px, transparent 8px),
    linear-gradient(to bottom, var(--muted) 0, var(--muted) 8px, transparent 8px);
  background-size: 100% 2px, 2px 8px, 2px 8px, 2px 8px, 2px 8px, 2px 8px;
  background-position: 0 11px, 0 11px, calc(25% - 1px) 11px, calc(50% - 1px) 11px, calc(75% - 1px) 11px, calc(100% - 2px) 11px;
  background-repeat: no-repeat;
}
#rotationDeg::-webkit-slider-runnable-track {
  height: 24px;
  background: transparent;
}
#rotationDeg::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--accent-2);
  cursor: pointer;
  margin-top: 4px; /* center 16px thumb on 24px track: (24-16)/2 = 4; track line at 11px aligns with thumb center */
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
#rotationDeg::-moz-range-track {
  height: 24px;
  background: transparent;
}
#rotationDeg::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--accent-2);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
#rotationDeg:focus {
  outline: none;
}
#rotationDeg:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}
#rotationDeg:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

/* Booth return badge (bookmark/ribbon overlay) */
.booth-logo-badge{
  display: block;
  border-radius: 22%;
  background: rgba(6, 12, 12, 0.75);
  border: 1px solid var(--border);
  box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.2) inset;
  backdrop-filter: saturate(110%) blur(1px);
  overflow: hidden;
  transition: width 0.2s ease-out, height 0.2s ease-out;
}
.booth-logo-badge img{
  display:block;
  width:100%; height:100%;
  object-fit: contain;
}

/* Universal booth badge styling - same size and pointed ribbon for all badge types */
.booth-badge,
.booth-category-badge{
  position:absolute;
  left:0;
  top:0;
  width:22px;
  height:22px;
  display:block;
  pointer-events:auto;
  background:transparent;
  border:none;
  border-radius:4px;
  box-shadow:none;
  overflow:visible;
}
/* Status badges: top-right of booth, anchor at right edge */
.booth-badge{
  transform:translate(calc(-100% - 1px), 2px);
  transform-origin:100% 0%;
}
.booth-badge svg{ display:block; width:100%; height:100%; }
.booth-badge:hover{ transform:translate(calc(-100% - 1px), 2px) scale(1.08); }

/* Category badge: top-left of badge at path[3]; higher specificity so it wins over .booth-badge.booth-badge-rot-* */
.booth-category-badge{
  transform:translate(0, 0);
  transform-origin:0 0;
}
.booth-category-badge.booth-badge.booth-badge-rot-0{ transform:translate(0, 0); transform-origin:0 0; }
.booth-category-badge.booth-badge.booth-badge-rot-22-5{ transform:translate(0, 0) rotate(22.5deg); transform-origin:0 0; }
.booth-category-badge.booth-badge.booth-badge-rot-45{ transform:translate(0, 0) rotate(45deg); transform-origin:0 0; }
.booth-category-badge.booth-badge.booth-badge-rot-minus-22-5{ transform:translate(0, 0) rotate(-22.5deg); transform-origin:0 0; }
.booth-category-badge-anchor-right{ transform:translate(-100%, 0); transform-origin:100% 0; }
.booth-category-badge-anchor-right.booth-badge.booth-badge-rot-0{ transform:translate(-100%, 0); transform-origin:100% 0; }
.booth-category-badge-anchor-right.booth-badge.booth-badge-rot-22-5{ transform:translate(-100%, 0) rotate(22.5deg); transform-origin:100% 0; }
.booth-category-badge-anchor-right.booth-badge.booth-badge-rot-minus-22-5{ transform:translate(-100%, 0) rotate(-22.5deg); transform-origin:100% 0; }
.booth-category-badge svg{
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  top:0;
}
.booth-category-badge .booth-category-emoji{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, calc(-50% - 4px));
  font-size:12px;
  line-height:1;
  pointer-events:none;
}
.booth-category-badge:hover{ transform:translate(0, 0) scale(1.08); }
.booth-category-badge.booth-badge.booth-badge-rot-0:hover{ transform:translate(0, 0) scale(1.08); }
.booth-category-badge.booth-badge.booth-badge-rot-22-5:hover{ transform:translate(0, 0) rotate(22.5deg) scale(1.08); }
.booth-category-badge.booth-badge.booth-badge-rot-45:hover{ transform:translate(0, 0) rotate(45deg) scale(1.08); }
.booth-category-badge.booth-badge.booth-badge-rot-minus-22-5:hover{ transform:translate(0, 0) rotate(-22.5deg) scale(1.08); }
.booth-category-badge-anchor-right:hover{ transform:translate(-100%, 0) scale(1.08); }
.booth-category-badge.booth-badge-anchor-right.booth-badge-rot-0:hover{ transform:translate(-100%, 0) scale(1.08); }
.booth-category-badge.booth-badge-anchor-right.booth-badge-rot-22-5:hover{ transform:translate(-100%, 0) rotate(22.5deg) scale(1.08); }
.booth-category-badge.booth-badge-anchor-right.booth-badge-rot-minus-22-5:hover{ transform:translate(-100%, 0) rotate(-22.5deg) scale(1.08); }

/* Status (earned) badge: top-right of badge at path[2]; rotation 0/22.5/45/-22.5 (67.5→-22.5, 90→0) */
.booth-badge.booth-badge-rot-0{
  transform:translate(calc(-100% - 1px), 2px);
  transform-origin:100% 0;
}
.booth-badge.booth-badge-rot-22-5{
  transform:translate(calc(-100% - 1px), 2px) rotate(22.5deg);
  transform-origin:100% 0;
}
.booth-badge.booth-badge-rot-45{
  transform:translate(calc(-100% - 1px), 2px) rotate(45deg);
  transform-origin:100% 0;
}
.booth-badge.booth-badge-rot-minus-22-5{
  transform:translate(calc(-100% - 1px), 2px) rotate(-22.5deg);
  transform-origin:100% 0;
}
.booth-badge.booth-badge-rot-0:hover{ transform:translate(calc(-100% - 1px), 2px) scale(1.08); }
.booth-badge.booth-badge-rot-22-5:hover{ transform:translate(calc(-100% - 1px), 2px) rotate(22.5deg) scale(1.08); }
.booth-badge.booth-badge-rot-45:hover{ transform:translate(calc(-100% - 1px), 2px) rotate(45deg) scale(1.08); }
.booth-badge.booth-badge-rot-minus-22-5:hover{ transform:translate(calc(-100% - 1px), 2px) rotate(-22.5deg) scale(1.08); }

/* Legacy class names for backwards compatibility */
.booth-return-badge{
  position:absolute;
  left:0;
  top:0;
  transform:translate(calc(-100% - 1px), 2px);
  transform-origin:100% 0%;
  width:22px;
  height:22px;
  display:block;
  pointer-events:auto;
  color:var(--hi); /* icon color */
  background:transparent; /* SVG ribbon draws background */
  border:none; /* no outer border so ribbon shows clearly */
  border-radius:4px;
  box-shadow:none;
  overflow:visible;
}
.booth-return-badge svg{ display:block; width:100%; height:100%; }

.booth-return-badge:hover{ transform:translate(calc(-100% - 1px), 2px) scale(1.08); }

/* booth staff badge: same layout as return badge but different color */
.booth-staff-badge{
  position:absolute;
  left:0;
  top:0;
  transform:translate(calc(-200% - 6px), 2px);
  transform-origin:100% 0%;
  width:22px;
  height:22px;
  display:block;
  pointer-events:auto;
  color:var(--danger);
  background:transparent;
  border:none;
  border-radius:4px;
  box-shadow:none;
  overflow:visible;
}
.booth-staff-badge svg{ display:block; width:100%; height:100%; }
.booth-staff-badge:hover{ transform:translate(calc(-200% - 6px), 2px) scale(1.08); }

/* Universal font consistency - apply to all elements */
*, *::before, *::after {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Ensure inputs, textareas, buttons, and selects inherit the font */
input, textarea, button, select {
  font-family: inherit;
}

/* Remove any monospace styling */
.mono, b.mono {
  font-family: inherit;
  font-weight: 700;
}

/* Badge Legend - top right below overlay buttons, expands downward */
.badge-legend {
  position: absolute;
  top: 108px;
  right: 16px;
  background: rgba(12, 18, 18, 0.92);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  z-index: 10;
  width: 180px;
  transition: padding 0.3s ease;
}

.badge-legend.collapsed {
  padding: 12px 16px 20px;
}

.badge-legend .legend-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  min-height: 20px;
  cursor: pointer;
  user-select: none;
  transition: margin-bottom 0.3s ease;
}

.badge-legend.collapsed .legend-header {
  margin-bottom: 0;
}

.badge-legend .legend-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex: 1;
  line-height: 1.4;
}

.badge-legend .legend-toggle {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
  flex-shrink: 0;
  line-height: 1;
}

.badge-legend .legend-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink);
}

.badge-legend .legend-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.badge-legend .legend-toggle:active {
  transform: scale(0.95);
}

.badge-legend .legend-toggle svg {
  transition: transform 0.3s ease;
}

.badge-legend:not(.collapsed) .legend-toggle svg {
  transform: rotate(180deg);
}

.badge-legend .legend-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  max-height: 320px;
  transition: max-height 0.35s ease, opacity 0.3s ease, margin-top 0.3s ease;
}

.badge-legend.collapsed .legend-items {
  max-height: 0;
  opacity: 0;
  margin-top: -10px;
  pointer-events: none;
}

.badge-legend .legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink);
}

.badge-legend .legend-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-legend .legend-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.badge-legend .return-vendor-icon {
  color: var(--hi);
}

.badge-legend .event-staff-icon {
  color: var(--danger);
}

.badge-legend .legend-item span {
  line-height: 1.3;
}

.badge-legend .legend-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-top: 8px;
  margin-bottom: 2px;
}

.badge-legend .legend-section-label:first-child {
  margin-top: 0;
}

.badge-legend .legend-category-icon {
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-legend .legend-category-icon svg {
  display: none;
}

/* Remove the admin mode hiding rule - legend is now visible in both modes */

/* ===============================
   Modal Styles (theme-matched)
   =============================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--panel-pad-x);
}

.modal.hidden {
  display: none !important;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(12, 18, 18, 0.85);
  backdrop-filter: blur(6px);
}

.modal-content {
  position: relative;
  z-index: 1;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--field-radius);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--stroke);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: inherit;
  font-size: var(--field-font-size);
  line-height: 1.45;
  color: var(--ink);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--field-pad-y) var(--panel-pad-x);
  min-height: var(--edit-header-h);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #0d1616, #0a1212);
}

.modal-header h2 {
  margin: 0;
  font-size: var(--field-font-size);
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.3px;
}

.modal-close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  width: var(--field-h);
  height: var(--field-h);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--field-radius);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.modal-close svg {
  display: block;
}

.modal-close:hover {
  background: rgba(214, 255, 46, 0.08);
  border-color: var(--hi);
  color: var(--ink);
}

.modal-close:focus-visible {
  outline: 2px solid var(--hi);
  outline-offset: 2px;
}

.modal-body {
  padding: var(--field-gap) var(--panel-pad-x);
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}

/* Theme-matched form fields inside modal */
.modal-body label.grow {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--field-gap);
  color: var(--label-color);
  font-weight: var(--label-weight);
  font-size: var(--field-font-size);
}

.modal-body input[type="url"],
.modal-body input[type="file"] {
  height: var(--field-h);
  padding: var(--field-pad-y) var(--field-pad-x);
  border-radius: var(--field-radius);
  border: 1px solid var(--border);
  background: var(--card-2);
  color: var(--ink);
  font-size: var(--field-font-size);
  line-height: 1.4;
  box-sizing: border-box;
}

.modal-body input:focus {
  outline: 2px solid var(--hi);
  box-shadow: 0 0 0 2px rgba(214, 255, 46, 0.2) inset;
}

.modal-body .hint {
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 4px;
  display: block;
}

.modal-divider {
  text-align: center;
  margin: var(--field-gap) 0;
  color: var(--muted);
  font-size: var(--field-font-size);
}

.modal-upload-note {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.9em;
}

.modal-upload-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-bottom: var(--field-gap);
}

.file-input-fake {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: var(--field-h);
  padding: 0 var(--field-pad-x);
  border-radius: var(--field-radius);
  border: 1px solid var(--border);
  background: var(--card-2);
  color: var(--ink);
  font-size: var(--field-font-size);
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.file-input-fake:hover {
  border-color: var(--accent);
}

.file-input-fake:focus-within {
  outline: 2px solid var(--hi);
  box-shadow: 0 0 0 2px rgba(214, 255, 46, 0.2) inset;
}

.file-input-fake #logoUploadLabel {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}

.file-input-fake.has-file #logoUploadLabel {
  color: var(--ink);
}

.file-input-fake input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
}

.modal-preview-box {
  padding: var(--field-pad-y) var(--field-pad-x);
  background: var(--card-2);
  border-radius: var(--field-radius);
  border: 1px solid var(--border);
}

.modal-preview-top {
  margin-top: 0;
  margin-bottom: var(--field-gap);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.modal-preview-label {
  font-weight: var(--label-weight);
  color: var(--muted);
  font-size: var(--field-font-size);
  margin-bottom: 8px;
}

.modal-preview-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--field-radius);
  overflow: hidden;
}

#logoModalPreview {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--field-radius);
}

.modal-footer {
  display: flex;
  gap: var(--field-gap);
  padding: var(--field-pad-y) var(--panel-pad-x);
  border-top: 1px solid var(--hi);
  background: var(--card);
  justify-content: flex-end;
}

.modal-footer button {
  height: var(--field-h);
  padding: var(--field-pad-y) var(--field-pad-x);
  border-radius: var(--field-radius);
  border: 1px solid var(--border);
  font-size: var(--field-font-size);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2px;
  box-sizing: border-box;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, filter 0.18s ease;
  min-width: 88px;
}

.modal-footer button.prim {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border-color: var(--accent-2);
  color: #fff;
}

.modal-footer button.prim:hover {
  filter: brightness(1.06);
}

.modal-footer button.ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--border);
}

.modal-footer button.ghost:hover {
  filter: brightness(1.06);
}

.modal-footer button.warn {
  background: rgba(214, 255, 46, 0.12);
  border-color: var(--hi);
  color: var(--ink);
}

.modal-footer button.warn:hover {
  filter: brightness(1.06);
}

.modal-footer button:focus-visible {
  outline: 2px solid var(--hi);
  outline-offset: 2px;
}

#logoModalPreview[src]:not([src=""]) {
  display: block;
}