:root{
  --bg: #0F1113;
  --surface: #1A1D21;
  --surface-2: #22262B;
  --surface-3: #2A2F35;
  --border: #33383F;
  --ink: #EDEBE4;
  --ink-2: #A9AEB6;
  --ink-3: #71767E;
  --amber: #E8A33D;
  --amber-soft: rgba(232,163,61,.16);
  --green: #4CD787;
  --green-soft: rgba(76,215,135,.16);
  --red: #E5665F;
  --cable-line: #566;
  --radius: 12px;
  --font-display: 'Bebas Neue', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

body.modal-open{ overflow: hidden; }

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: var(--bg);
  background-image:
    radial-gradient(1200px 600px at 15% -10%, rgba(232,163,61,.06), transparent 60%),
    radial-gradient(1000px 500px at 100% 0%, rgba(76,215,135,.05), transparent 55%);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 90px;
}

h1,h2,h3{ font-family: var(--font-display); font-weight:400; letter-spacing:.5px; margin:0;}

/* ---------- Topbar ---------- */
.topbar{
  position: sticky; top:0; z-index: 30;
  background: rgba(15,17,19,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner{
  max-width: 1100px; margin:0 auto;
  padding: 14px 20px;
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items:center;
}
.brand-eyebrow{
  display:block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--amber);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.brand h1{ font-size: 30px; line-height:1; color: var(--ink); }

.progress-wrap{ min-width: 200px; }
.progress-track{
  height: 10px; border-radius: 6px;
  background: var(--surface-3);
  overflow:hidden;
  border: 1px solid var(--border);
}
.progress-fill{
  height:100%; width:0%;
  background: linear-gradient(90deg, var(--amber), var(--green));
  transition: width .5s ease;
}
.progress-label{
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-2);
  display:flex; gap:8px; align-items:center;
}
.dot-sep{ color: var(--ink-3); }

.topbar-actions{ display:flex; align-items:center; gap:14px; justify-self:end;}
.sync-status{
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
  white-space: nowrap;
}

.btn{
  font-family: var(--font-body);
  font-weight:600;
  font-size: 13px;
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor:pointer;
  transition: all .15s ease;
}
.btn-ghost{ background: transparent; color: var(--ink-2); }
.btn-ghost:hover{ background: var(--surface-2); color: var(--ink); }
.btn-primary{ background: var(--amber); border-color: var(--amber); color: #1a1305; }
.btn-primary:hover{ filter: brightness(1.08); }

/* ---------- Layout ---------- */
.content{ max-width: 1100px; margin: 0 auto; padding: 24px 20px 40px; display:flex; flex-direction:column; gap:24px;}
.panel{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.panel-head{ margin-bottom: 14px; }
.panel-head h2{ font-size: 22px; color: var(--ink); }
.panel-sub{ margin: 4px 0 0; color: var(--ink-2); font-size: 13.5px; }

/* ---------- Map ---------- */
.map-frame{
  position: relative;
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
#stageMap{ width:100%; height:auto; display:block; }

.map-expand{
  position: absolute; top: 10px; right: 10px; z-index: 5;
  display:flex; align-items:center; gap:6px;
  background: rgba(26,29,33,.9); border: 1px solid var(--border); color: var(--ink-2);
  font-family: var(--font-body); font-size: 12px; font-weight:600;
  padding: 7px 10px; border-radius: 8px; cursor:pointer;
  backdrop-filter: blur(4px);
}
.map-expand:hover{ color: var(--ink); border-color: var(--amber); }

.map-fullscreen-overlay{
  display:none;
  position: fixed; inset:0; z-index: 200;
  background: var(--bg);
  padding: 14px;
  flex-direction: column;
  align-items: center; justify-content:center;
}
.map-fullscreen-overlay.open{ display:flex; }
.map-overlay-body{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.map-overlay-body svg{ width:100%; height:100%; max-height: calc(100vh - 60px); }
.map-overlay-close{
  position:absolute; top:14px; right:14px;
  background: var(--surface-2); border:1px solid var(--border); color: var(--ink);
  font-family: var(--font-body); font-weight:600; font-size:13px;
  padding: 9px 14px; border-radius:8px; cursor:pointer; z-index:2;
}
.map-overlay-hint{
  position:absolute; bottom:10px; left:0; right:0; text-align:center;
  font-family: var(--font-mono); font-size:11px; color: var(--ink-3);
  display:none;
}
@media (max-width: 760px) and (orientation: portrait){
  .map-overlay-hint{ display:block; }
}

.stage-floor{ fill: var(--surface-2); stroke: var(--border); stroke-width:1.5; }
.stage-back{ fill: rgba(255,255,255,.02); stroke: var(--border); stroke-width:1; stroke-dasharray: 4 4; }
.tag-label{
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px;
  fill: var(--ink-3); text-transform: uppercase;
}
.audience-label{
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 3px;
  fill: var(--ink-3);
}
.audience-chevrons{ stroke: var(--ink-3); stroke-width: 2; fill:none; opacity:.5; }

.cable-line{ fill:none; stroke: var(--cable-line); stroke-width: 2; stroke-dasharray: 6 5; }
.cable-line.hdmi{ stroke: #6FA8C9; }
.cable-line.audio{ stroke: #C98D6F; }
.cable-line.main{ stroke: #8D8FE0; }
.cable-label{
  font-family: var(--font-mono); font-size: 10.5px; fill: var(--ink-3);
}

.zone{ cursor:pointer; outline:none; }
.zone-card{
  fill: var(--surface); stroke: var(--border); stroke-width: 1.5;
  transition: stroke .2s ease, fill .2s ease;
}
.zone:hover .zone-card, .zone:focus .zone-card{ stroke: var(--amber); }
.zone-icon{ color: var(--ink-2); stroke: currentColor; stroke-width: 2.4; fill:none; }
.zone-title{
  font-family: var(--font-body); font-weight:700; font-size: 14px;
  fill: var(--ink); letter-spacing:.3px;
}
.zone-sub{
  font-family: var(--font-mono); font-size: 10.5px; fill: var(--ink-3);
}
.zone-frac{
  font-family: var(--font-mono); font-weight:600; font-size: 12px; fill: var(--ink-2);
}
.zone-led{ fill: var(--amber); filter: drop-shadow(0 0 4px rgba(232,163,61,.7)); }
.zone.is-partial .zone-led{ fill: var(--amber); }
.zone.is-complete .zone-led{ fill: var(--green); filter: drop-shadow(0 0 5px rgba(76,215,135,.8)); }
.zone.is-complete .zone-card{ stroke: rgba(76,215,135,.5); }
.zone.is-empty .zone-led{ fill: var(--ink-3); filter:none; }

.map-legend{
  display:flex; flex-wrap:wrap; gap: 18px; align-items:center;
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border);
  font-size: 12.5px; color: var(--ink-2);
}
.map-legend span{ display:flex; align-items:center; gap:7px; }
.led{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.led-pend{ background: var(--amber); }
.led-part{ background: var(--amber); box-shadow: 0 0 0 2px var(--amber-soft); }
.led-done{ background: var(--green); }
.legend-note{ color: var(--ink-3); font-style: italic; margin-left:auto; }

/* ---------- Checklist ---------- */
.category{
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 12px;
  overflow:hidden;
  background: var(--surface-2);
}
.category:last-child{ margin-bottom:0; }
.category-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 13px 16px; cursor:pointer; user-select:none;
  gap: 12px;
}
.category-head:hover{ background: rgba(255,255,255,.02); }
.category-name{
  font-family: var(--font-body); font-weight:700; font-size: 14.5px;
  letter-spacing:.3px; text-transform: uppercase; color: var(--ink);
  display:flex; align-items:center; gap:10px;
}
.category-count{
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-2);
  background: var(--surface-3); padding: 2px 8px; border-radius: 20px;
}
.category-count.complete{ color: var(--green); }
.chevron{ transition: transform .2s ease; color: var(--ink-3); flex-shrink:0; }
.category.collapsed .chevron{ transform: rotate(-90deg); }
.category-body{
  border-top: 1px solid var(--border);
}
.category.collapsed .category-body{ display:none; }

.item-row{
  display:flex; align-items:flex-start; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .5s ease;
}
.item-row:last-child{ border-bottom:none; }
.item-row.done{ background: var(--green-soft); }
.item-row.flash{ background: var(--amber-soft) !important; }

.item-check{
  flex-shrink:0; width: 26px; height: 26px; border-radius:7px;
  border: 2px solid var(--ink-3); background: transparent;
  cursor:pointer; margin-top:1px;
  display:flex; align-items:center; justify-content:center;
  transition: all .15s ease;
}
.item-check svg{ width:16px; height:16px; opacity:0; transition: opacity .1s ease; stroke: #06210f; }
.item-row.done .item-check{ background: var(--green); border-color: var(--green); }
.item-row.done .item-check svg{ opacity:1; }

.item-main{ flex:1; min-width:0; }
.item-top{ display:flex; flex-wrap:wrap; align-items:baseline; gap: 8px; }
.item-name{ font-weight:600; font-size: 14.5px; color: var(--ink); }
.item-row.done .item-name{ color: var(--ink-2); text-decoration: line-through; text-decoration-color: var(--ink-3); }
.qty-pill{
  font-family: var(--font-mono); font-size: 11px; color: var(--ink); background: var(--surface-3);
  padding: 1px 7px; border-radius: 20px; border: 1px solid var(--border);
}
.item-cable{
  font-family: var(--font-mono); font-size: 12px; color: #A9C4D6; margin-top: 3px;
}
.item-obs{ font-size: 12.5px; color: var(--ink-3); font-style: italic; margin-top: 2px; }
.item-meta{ font-family: var(--font-mono); font-size: 11px; color: var(--green); margin-top: 3px; }

.item-remove{
  flex-shrink:0; background:none; border:none; color: var(--ink-3);
  cursor:pointer; font-size: 16px; padding: 4px 6px; border-radius:6px;
  transition: color .15s ease, background .15s ease;
}
.item-remove:hover{ color: var(--red); background: rgba(229,102,95,.1); }

/* ---------- FAB & Modal ---------- */
.fab{
  position: fixed; right: 20px; bottom: 24px; z-index: 40;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--amber); color:#1a1305; border:none;
  font-size: 28px; line-height:1; cursor:pointer;
  box-shadow: 0 8px 24px rgba(232,163,61,.35);
  transition: transform .15s ease;
}
.fab:hover{ transform: scale(1.06); }

.modal-backdrop{
  position: fixed; inset:0; background: rgba(0,0,0,.6);
  display:none; align-items:center; justify-content:center;
  z-index: 50; padding: 16px;
}
.modal-backdrop.open{ display:flex; }
.modal{
  background: var(--surface); border:1px solid var(--border); border-radius: 14px;
  width: 100%; max-width: 440px; padding: 20px;
  max-height: 90vh; overflow-y:auto;
}
.modal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 12px;}
.modal-head h3{ font-size:20px; }
.modal-close{ background:none; border:none; color: var(--ink-2); font-size: 22px; cursor:pointer; }
#formAdd label{
  display:block; font-size: 12.5px; color: var(--ink-2); margin-bottom: 12px; font-weight:600;
}
#formAdd input, #formAdd select{
  display:block; width:100%; margin-top: 5px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--ink);
  padding: 9px 10px; border-radius: 8px; font-size: 14px; font-family: var(--font-body);
}
.modal-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top: 6px;}
.hidden{ display:none; }

/* ---------- Responsive ---------- */
@media (max-width: 760px){
  .topbar-inner{ grid-template-columns: 1fr; gap: 10px; }
  .topbar-actions{ justify-self:start; }
  .brand h1{ font-size: 24px; }
  .modal-row{ grid-template-columns: 1fr; }
  .legend-note{ margin-left:0; width:100%; }
  #stageMap{ min-width: 680px; }
  .map-expand span{ display:none; }
}

.login-error{ color: var(--red); font-size: 13px; margin: -4px 0 12px; }