/* =========================================================================
   LINEUPS — ops-terminal design system
   Palette: cold terminal navy + signal cyan, with content-driven nade colors
   Signature: live coordinate-grid readout around the map, dossier numbering
   ========================================================================= */

:root{
  --void:      #0c0a08;
  --hull:      #161210;
  --panel:     #1d1815;
  --panel-2:   #25201a;
  --line:      #382e25;
  --line-soft: #2a221c;
  --text:      #f2ece2;
  --text-dim:  #a99d8c;
  --text-faint:#6b5f51;

  --signal:    #ffa53e;
  --signal-dim:#6b4a1f;
  --warn:      #5ec9ff;

  --smoke:     #c7cdd2;
  --flash:     #f5d142;
  --fire:      #ff6a45;
  --he:        #79e07e;
  --decoy:     #cf9f6e;

  --font-display: "Bahnschrift", "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;height:100%;background:var(--void);color:var(--text);font-family:var(--font-body);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
h1,h2,h3{font-family:var(--font-display);font-stretch:condensed;letter-spacing:.03em;margin:0;}
button,input,select,textarea{font-family:var(--font-body);}
::selection{background:var(--signal-dim);color:var(--text);}

::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--void);}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px;border:2px solid var(--void);}
::-webkit-scrollbar-thumb:hover{background:var(--signal-dim);}

.app{
  display:grid;
  grid-template-columns:248px 1fr;
  height:100vh;
  background:
    radial-gradient(ellipse 900px 500px at 70% -10%, rgba(255,165,62,.05), transparent 60%),
    var(--void);
}

/* ===================== SIDEBAR ===================== */
.sidebar{
  background:var(--hull);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  padding:20px 14px;gap:6px;overflow-y:auto;
}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.brand svg{flex-shrink:0;filter:drop-shadow(0 0 5px rgba(255,165,62,.3));}
.sidebar-wordmark{
  font-family:var(--font-display);font-stretch:condensed;font-weight:700;
  font-size:18px;letter-spacing:.06em;color:var(--text);
}
.sidebar-wordmark-r{color:var(--signal);}

.rail-label{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-faint);margin:14px 4px 6px;
}

.map-list{display:flex;flex-direction:column;gap:3px;flex:1;}
.map-item{
  position:relative;display:flex;align-items:center;gap:10px;
  padding:9px 10px 9px 14px;border-radius:4px;cursor:pointer;
  color:var(--text-dim);font-family:var(--font-display);font-stretch:condensed;
  letter-spacing:.05em;font-size:14px;transition:.15s ease;
  border-left:2px solid transparent;
}
.map-item:hover{background:var(--panel);color:var(--text);transform:translateX(2px);}
.map-item.active{
  background:var(--panel);color:var(--signal);
  border-left:2px solid var(--signal);
}
.map-item .swatch{
  width:5px;height:5px;border-radius:50%;background:var(--text-faint);flex-shrink:0;
}
.map-item.active .swatch{background:var(--signal);box-shadow:0 0 6px var(--signal);}

.sidebar-footer{display:flex;flex-direction:column;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft);}

.ghost-btn{
  background:transparent;border:1px solid var(--line);color:var(--text-dim);
  padding:8px 10px;border-radius:4px;font-size:12px;cursor:pointer;text-align:center;
  transition:.15s ease;font-family:var(--font-mono);letter-spacing:.02em;
}
.ghost-btn:hover{color:var(--text);border-color:var(--text-dim);background:var(--panel);}
.ghost-btn.danger:hover{color:var(--fire);border-color:var(--fire);}
.ghost-btn.unlocked{color:var(--he);border-color:var(--he);}

.primary-btn{
  background:var(--signal);color:#221305;border:none;border-radius:4px;
  padding:10px 18px;font-weight:700;font-size:12px;cursor:pointer;
  display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.08em;
  transition:.15s ease;box-shadow:0 2px 14px rgba(255,165,62,.25);font-family:var(--font-mono);
}
.primary-btn:hover{filter:brightness(1.08);box-shadow:0 4px 20px rgba(255,165,62,.4);transform:translateY(-1px);}
.primary-btn.active{background:var(--warn);box-shadow:0 2px 14px rgba(94,201,255,.3);}
.add-dot{width:6px;height:6px;border-radius:50%;background:#221305;}

/* ===================== MAIN / TOPBAR ===================== */
.main{display:flex;flex-direction:column;min-width:0;}

.topbar{
  display:flex;align-items:center;gap:20px;
  padding:0 22px;height:56px;min-height:56px;
  border-bottom:1px solid var(--line);background:var(--hull);
}
.topbar-left{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.topbar-divider{width:1px;height:22px;background:var(--line);}
.topbar-map-name{
  font-size:17px;letter-spacing:.06em;margin:0;
  font-family:var(--font-display);font-stretch:condensed;font-weight:700;
  color:var(--text);
}
.count-pill{
  font-family:var(--font-mono);font-size:10px;color:var(--text-faint);
  background:var(--panel-2);border:1px solid var(--line);border-radius:3px;padding:3px 8px;
}
.filters{display:flex;gap:6px;flex:1;justify-content:center;flex-wrap:wrap;}
.filter-chip{
  display:flex;align-items:center;gap:6px;
  border:1px solid var(--line);border-radius:20px;padding:6px 12px;cursor:pointer;
  font-size:11.5px;font-family:var(--font-mono);letter-spacing:.02em;color:var(--text);
  background:color-mix(in srgb, var(--chip-color, var(--signal)) 14%, var(--panel));
  border-color:color-mix(in srgb, var(--chip-color, var(--signal)) 35%, var(--line));
  user-select:none;transition:.15s ease;
}
.filter-chip .dot{width:7px;height:7px;border-radius:50%;}
.filter-chip .chip-count{
  color:var(--text-faint);font-size:10px;background:rgba(0,0,0,.25);
  border-radius:8px;padding:1px 6px;
}
.filter-chip:hover{border-color:var(--chip-color, var(--text-dim));}
.filter-chip.off{
  opacity:.45;background:var(--panel);border-color:var(--line);
}
.topbar-right{flex-shrink:0;display:flex;align-items:center;gap:12px;}
/* Non-admins can't add to the official map — only to their own "My Map" — so
   hide "Add lineup" while the official view is open unless the user is an
   admin. Personal view and admins keep the button (body classes set by
   applyViewModeClass / applyAuthState). */
body.view-official:not(.is-admin) #addModeBtn{display:none;}

/* ===================== MAP STAGE ===================== */
.map-stage{
  flex:1;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,165,62,.04), transparent 60%),
    var(--void);
  cursor:default;user-select:none;
}
.map-frame{
  position:relative;width:fit-content;height:fit-content;flex-shrink:0;
  transform-origin:50% 50%;
  border:1px solid var(--line);
  box-shadow:0 0 0 1px var(--void), 0 24px 70px rgba(0,0,0,.6);
  border-radius:2px;
}
.map-frame.add-mode{cursor:crosshair;}
.map-stage.panning,.map-stage.panning .map-frame{cursor:grabbing !important;}
.map-frame img{display:block;max-width:80vw;max-height:80vh;width:auto;border-radius:1px;}
#linkSvg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
#markerLayer{position:absolute;inset:0;}

.hint{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  background:var(--panel);border:1px solid var(--signal);color:var(--signal);
  font-size:12px;font-family:var(--font-mono);padding:7px 16px;border-radius:3px;
  display:none;white-space:nowrap;pointer-events:none;z-index:10;
}
.hint.show{display:block;}

/* Zoom controls */
.zoom-controls{
  position:absolute;bottom:18px;right:18px;
  display:flex;flex-direction:column;gap:4px;z-index:10;
}
.zoom-btn{
  width:32px;height:32px;border-radius:6px;
  background:var(--panel);border:1px solid var(--line);
  color:var(--text-dim);font-size:16px;line-height:1;
  cursor:pointer;transition:.15s;display:flex;align-items:center;justify-content:center;
}
.zoom-btn:hover{color:var(--signal);border-color:var(--signal);}
.zoom-btn#zoomReset{font-size:13px;}

/* ===================== MARKERS ===================== */
.marker{
  position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;
  border-radius:50%;border:2px solid var(--void);
  background:currentColor;
  cursor:pointer;
  filter:saturate(.5) brightness(.82);
  transition:filter .25s ease, box-shadow .25s ease, opacity .25s ease;
  transform:scale(var(--marker-scale, 1));
  transform-origin:center center;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.marker.enter{animation:marker-appear .2s ease both;}
.marker.leaving{animation:marker-leave .2s ease both;pointer-events:none;}
@keyframes marker-appear{from{opacity:0;}to{opacity:1;}}
@keyframes marker-leave{from{opacity:1;}to{opacity:0;}}
.marker::before{
  content:"";
  position:absolute;
  inset:-9px;
  border-radius:50%;
  background:inherit;
  opacity:0;
  transform:scale(.4);
  filter:blur(3px);
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
  will-change:opacity, transform;
}
.marker:hover,
.marker.pinned{
  filter:saturate(1.15) brightness(1.08);
  box-shadow:
    0 0 0 5px color-mix(in srgb, currentColor 18%, transparent),
    0 0 18px 4px color-mix(in srgb, currentColor 65%, transparent);
}
.marker:hover::before,
.marker.pinned::before{
  opacity:.6;
  transform:scale(1);
}
/* Combined (pie-chart) markers: let the conic ::before glow carry the segment
   colors instead of the flat signal-colored box-shadow glow. */
.marker.multi:hover,
.marker.multi.pinned{
  box-shadow:0 0 0 5px color-mix(in srgb, currentColor 18%, transparent);
}
.marker.multi:hover::before,
.marker.multi.pinned::before{
  opacity:.75;
}
.marker.landing{z-index:3;}

/* ===================== CLUSTER FAN-OUT ===================== */
.cluster-fan{position:absolute;width:0;height:0;z-index:8;}
.fan-hub{position:absolute;left:0;top:0;cursor:pointer;}
.fan-petal-line{
  position:absolute;left:0;top:0;height:1px;
  background:rgba(255,255,255,.28);transform-origin:left center;
  opacity:0;pointer-events:none;
  transition:opacity .25s ease .05s, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.cluster-fan.open .fan-petal-line{opacity:1;}
.fan-petal{
  position:absolute;left:0;top:0;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  opacity:0;pointer-events:none;cursor:pointer;z-index:9;
  transition:transform .38s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
}
/* Only the dot is an interactive hitbox — the surrounding flex box and label
   must not capture hover/clicks (they overlapped the hub and the gaps). */
.fan-petal.show{opacity:1;}
.fan-petal.show .fan-petal-dot{pointer-events:auto;}
.fan-petal-dot{
  position:relative;
  width:22px;height:22px;border-radius:50%;border:2px solid var(--void);
  /* stable two-layer shadow: the ring grows from 0 spread, drop-shadow stays put */
  box-shadow:
    0 0 0 0 color-mix(in srgb, currentColor 18%, transparent),
    0 2px 8px rgba(0,0,0,.5);
  filter:saturate(.5) brightness(.82);
  transition:filter .2s ease, box-shadow .2s ease, transform .15s ease;
  /* Keep the fan's petal markers in sync with map zoom, same as regular
     markers — otherwise they stay full-size while every other marker
     shrinks/grows around them. The parent .fan-petal already owns a
     transform (translate + open/close scale), so the zoom compensation
     has to live on this inner element instead of clashing with it. */
  transform:scale(var(--marker-scale, 1));
}
.fan-petal-dot::before{
  content:"";position:absolute;inset:-7px;border-radius:50%;
  background:inherit;opacity:0;transform:scale(.4);filter:blur(3px);
  pointer-events:none;transition:opacity .3s ease, transform .3s ease;
}
.fan-petal-dot:hover{
  filter:saturate(1.15) brightness(1.08);
  box-shadow:
    0 0 0 5px color-mix(in srgb, currentColor 18%, transparent),
    0 2px 8px rgba(0,0,0,.5);
}
.fan-petal-dot:hover::before{
  opacity:.6;transform:scale(1);
}
.fan-petal-label{
  font-family:var(--font-mono);font-size:9px;font-weight:700;color:var(--text);
  background:var(--hull);border:1px solid var(--line);border-radius:4px;
  padding:2px 6px;white-space:nowrap;
  /* Scale down with zoom like the dot above it, anchored at the top edge
     (closest to the dot) so it shrinks toward the marker instead of drifting. */
  transform:scale(var(--marker-scale, 1));
  transform-origin:top center;
}
.marker.throwpos{
  width:18px;height:18px;margin:-9px 0 0 -9px;z-index:2;opacity:.9;
}
.marker.throwpos::before{inset:-7px;}
.marker.smoke{background:var(--smoke);color:var(--smoke);}
.marker.flash{background:var(--flash);color:var(--flash);}
.marker.fire{background:var(--fire);color:var(--fire);}
.marker.he{background:var(--he);color:var(--he);}
.marker.decoy{background:var(--decoy);color:var(--decoy);}
.marker.multi{background:var(--signal);color:var(--signal);}

.marker-badge{
  position:absolute;top:-7px;right:-7px;
  background:var(--void);color:currentColor;
  border:1.5px solid currentColor;border-radius:50%;
  min-width:15px;height:15px;padding:0 2px;
  font-family:var(--font-mono);font-size:9px;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1;
}
.marker-badge.sub{
  top:auto;bottom:-6px;right:-6px;background:var(--panel);
  min-width:14px;height:14px;font-size:9px;opacity:.9;
}

.link-line{
  stroke-dasharray:3 4;stroke-width:1.4;opacity:.75;
  transition:filter .18s ease, opacity .18s ease;
}
.link-line.glow{
  opacity:1;
  filter:drop-shadow(0 0 2px color-mix(in srgb, currentColor 70%, transparent));
}

/* ===================== DETAIL DOSSIER OVERLAY ===================== */
.detail-panel{
  position:fixed;inset:0;background:rgba(4,6,7,.88);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .15s ease;
  z-index:50;padding:30px;backdrop-filter:blur(4px);
}
.detail-panel.open{opacity:1;pointer-events:auto;}
.detail-panel-inner{
  width:min(980px,100%);max-height:100%;overflow-y:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:28px 32px;box-shadow:0 30px 90px rgba(0,0,0,.7);
  border-top:2px solid var(--signal);
}
.detail-head{display:flex;justify-content:space-between;align-items:flex-start;}
.dossier-eyebrow{
  margin:0 0 6px;font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-faint);
}
.type-chip{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 12px;border-radius:3px;background:var(--panel-2);cursor:pointer;transition:.15s;
}
.type-chip:hover{filter:brightness(1.1);}
.icon-btn{background:none;border:1px solid var(--line);color:var(--text-dim);font-size:14px;cursor:pointer;border-radius:4px;width:30px;height:30px;}
.icon-btn:hover{color:var(--text);border-color:var(--text-dim);}
#detailTitle{font-size:14px;color:var(--text-dim);font-weight:400;margin:14px 0 18px;font-family:var(--font-mono);letter-spacing:.03em;padding-bottom:14px;border-bottom:1px solid var(--line-soft);}

.throw-list{display:flex;flex-direction:column;gap:18px;}
.throw-card{
  background:var(--panel-2);border:1px solid var(--line);border-radius:6px;overflow:hidden;
  transition:box-shadow .15s, border-color .15s;position:relative;
}
.throw-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.4);border-color:var(--text-faint);}
.variant-tag{
  position:absolute;top:0;left:0;background:var(--void);color:var(--signal);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;
  padding:4px 10px;border-radius:0 0 6px 0;z-index:1;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
}

.thumb-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:6px;}
.thumb-grid.thumb-grid-3{grid-template-columns:repeat(3,1fr);max-width:280px;}
.thumb-grid .thumb{
  position:relative;aspect-ratio:1/1;border-radius:5px;overflow:hidden;
  border:1px solid var(--line);background:var(--void);
}
.thumb-grid .thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.thumb-grid .thumb .thumb-remove{
  position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;
  background:rgba(7,11,13,.85);color:var(--fire);border:1px solid var(--fire);
  font-size:11px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
}

.throw-card-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;}
.throw-card-gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;cursor:pointer;background:#000;transition:filter .15s;}
.throw-card-gallery img:hover{filter:brightness(1.15);outline:2px solid var(--signal);outline-offset:-2px;}
.gallery-section{padding:30px 14px 0;}
.gallery-section:first-child{padding-top:30px;}
.gallery-label{
  font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--text-faint);margin-bottom:7px;
}
.precise-row{display:flex;align-items:center;gap:10px;padding:12px 14px 0;}
.precise-row img{width:48px;height:48px;object-fit:cover;border-radius:4px;border:1px solid var(--line);cursor:pointer;}
.precise-row span{font-size:11px;color:var(--text-dim);font-family:var(--font-mono);}

.throw-card-body{padding:14px;display:flex;flex-direction:column;gap:10px;}
.throw-meta{display:flex;gap:8px;flex-wrap:wrap;}
.tag{
  font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;
  background:var(--void);border:1px solid var(--line);border-radius:3px;padding:3px 8px;color:var(--signal);
}
.throw-notes{font-size:12px;color:var(--text-dim);line-height:1.5;}
.throw-card-actions{display:flex;justify-content:flex-end;gap:16px;padding-top:4px;border-top:1px solid var(--line-soft);}
.throw-card-actions button{
  background:none;border:none;color:var(--text-dim);font-size:11px;cursor:pointer;
  font-family:var(--font-mono);letter-spacing:.03em;
}
.throw-card-actions button.edit-btn:hover{color:var(--signal);}
.throw-card-actions button.remove-btn:hover{color:var(--fire);}
.throw-card-actions button.save-btn:hover{color:var(--signal);}
.throw-card-actions button.save-btn.saved{color:var(--signal);}

/* ===================== MODALS ===================== */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(2,4,5,.78);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;z-index:100;
}
.modal-backdrop.show{display:flex;}
.modal{
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:26px;width:400px;max-height:86vh;overflow-y:auto;
  display:flex;flex-direction:column;gap:10px;
  box-shadow:0 26px 70px rgba(0,0,0,.7);border-top:2px solid var(--signal);
}
.modal h3{font-size:18px;margin-bottom:4px;letter-spacing:.03em;}
.modal-hint{font-size:13px;color:var(--text-dim);margin:0 0 6px;line-height:1.55;}
.field-label{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);margin-top:6px;}
.modal input[type=text], .modal select, .modal textarea, .modal input[type=file]{
  background:var(--void);border:1px solid var(--line);color:var(--text);
  border-radius:4px;padding:9px 10px;font-size:14px;width:100%;resize:vertical;
}
.modal input:focus, .modal select:focus, .modal textarea:focus{outline:1px solid var(--signal);border-color:var(--signal);}
.screenshot-preview{width:100%;border-radius:6px;margin-top:4px;border:1px solid var(--line);}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px;}

.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0;}
.type-opt{
  display:flex;align-items:center;gap:8px;padding:11px 12px;border-radius:6px;
  border:1px solid var(--line);cursor:pointer;font-size:14px;background:var(--void);transition:.15s;
}
.type-opt:hover{border-color:var(--signal);background:var(--panel-2);}
.type-opt .dot{width:10px;height:10px;border-radius:50%;}

.cluster-grid{display:flex;flex-direction:column;gap:8px;margin:10px 0;}

/* ===================== LIGHTBOX ===================== */
.lightbox-backdrop{background:rgba(2,4,5,.96);flex-direction:column;z-index:200;}
.lightbox-image{max-width:88vw;max-height:80vh;border-radius:4px;box-shadow:0 0 0 1px var(--line), 0 30px 80px rgba(0,0,0,.8);transform-origin:center center;transition:transform .05s ease;user-select:none;-webkit-user-drag:none;}
.lightbox-close{position:absolute;top:18px;right:24px;font-size:18px;color:var(--text);background:var(--panel);}
.lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  background:var(--panel);border:1px solid var(--line);color:var(--text);
  width:46px;height:46px;border-radius:50%;font-size:22px;cursor:pointer;transition:.15s;
}
.lightbox-nav:hover{border-color:var(--signal);color:var(--signal);}
.lightbox-prev{left:24px;}
.lightbox-next{right:24px;}
.lightbox-caption{margin-top:16px;color:var(--text-dim);font-size:11px;font-family:var(--font-mono);letter-spacing:.04em;}

/* ===================== DOSSIER TRANSITION ===================== */
.detail-panel{transition:opacity .18s ease;}
.detail-panel-inner{transition:transform .18s ease;transform:translateY(10px);}
.detail-panel.open .detail-panel-inner{transform:translateY(0);}

/* ===================== FILTER CHIPS NO-WRAP ===================== */
.filters{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:1px;}
.filters::-webkit-scrollbar{display:none;}

/* ===================== MARKER BADGE NO-CLIP ===================== */
#markerLayer{overflow:visible;}

/* ===================== MAP LOADING ===================== */
.map-loading{
  position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;
  background:var(--void);opacity:0;pointer-events:none;transition:opacity .15s;
}
.map-loading.show{opacity:1;pointer-events:auto;}
.map-loading-text{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--text-faint);
  animation:loading-pulse 1.4s ease-in-out infinite;
}
@keyframes loading-pulse{0%,100%{opacity:.3}50%{opacity:1}}

/* ===================== SIDEBAR OVERLAY ===================== */
.sidebar-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);
  z-index:98;backdrop-filter:blur(2px);
}
.sidebar-overlay.show{display:block;}

/* ===================== MOBILE MENU BUTTON ===================== */
.mobile-menu-btn{
  display:none;align-items:center;justify-content:center;
  background:none;border:1px solid var(--line);color:var(--text-dim);
  width:36px;height:36px;border-radius:6px;cursor:pointer;flex-shrink:0;transition:.15s;
}
.mobile-menu-btn:hover{color:var(--signal);border-color:var(--signal);}

/* ===================== RESPONSIVE — MOBILE ===================== */
@media (max-width: 768px){

  /* App shell */
  .app{grid-template-columns:1fr;}

  /* Sidebar becomes a slide-in drawer */
  .sidebar{
    position:fixed;top:0;left:-280px;bottom:0;width:272px;z-index:99;
    transition:left .22s ease;box-shadow:none;
    flex-direction:column;overflow-y:auto;padding:20px 14px;gap:6px;
    border-right:1px solid var(--line);
  }
  .sidebar.open{left:0;box-shadow:8px 0 40px rgba(0,0,0,.5);}
  .mobile-menu-btn{display:flex;}
  .back-btn{display:none;}
  .topbar-divider{display:none;}

/* Topbar on mobile - wrap filters to second row, hide add button */
  .topbar{height:auto;padding:10px 14px 0;gap:0;flex-wrap:wrap;}
  .topbar-left{flex:1;padding-bottom:10px;gap:8px;}
  .topbar-right{display:none;}
  .filters{
    flex:0 0 100%;order:3;
    border-top:1px solid var(--line);
    padding:8px 0;
    overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;
    gap:6px;
    scrollbar-width:none;
  }
  .filters::-webkit-scrollbar{display:none;}
  .filter-chip{white-space:nowrap;flex-shrink:0;}

  /* Map stage — ensure touch events reach markers */
  .map-stage{ touch-action:none; }
  .map-frame{ touch-action:none; }

  /* HOME: true single-column scrollable */
  .home-screen{ overflow-y:auto; }
  .home-body{ flex:unset;display:block;padding:24px 16px 40px; }
  .home-section-title{font-size:28px;margin-bottom:18px;text-align:center;}
  .home-grid{ display:block;width:100%; }
  .home-grid-inner{ display:flex;flex-direction:column;gap:10px;width:100%; }
  .map-card{ width:100%;aspect-ratio:21/9; }
  .map-card-name{font-size:18px;}

  /* Detail overlay — slides up from bottom */
  .detail-panel{align-items:flex-end;padding:0;}
  .detail-panel-inner{
    width:100%;max-height:90vh;border-radius:14px 14px 0 0;
    padding:18px 16px;
    transform:translateY(20px);
  }
  .detail-panel.open .detail-panel-inner{transform:translateY(0);}
  #detailTitle{font-size:13px;}
  .detail-strip{flex-wrap:nowrap;overflow-x:auto;}
  .detail-strip-thumb{width:80px;}

  /* Hero galleries stack vertically on mobile */
  .tc-galleries{flex-direction:column;}
  .tc-carousel{border-right:none;border-bottom:1px solid var(--line-soft);}
  .tc-carousel:last-child{border-bottom:none;}

  /* Modals */
  .modal{width:calc(100vw - 24px);max-height:92vh;padding:18px;}
  .throw-modal{width:calc(100vw - 24px);}
  .tm-selects{grid-template-columns:1fr;}

  /* Zoom buttons hidden on mobile — pinch works */
  .zoom-controls{ display:none; }
  .cheatsheet-panel{top:14px;right:14px;bottom:auto;}
  .cheatsheet-body{width:min(320px,85vw);}
}

@media (max-width: 480px){
  .home-section-title{font-size:24px;}
  .home-grid-inner{max-width:100%;}
  .topbar-right .count-pill{display:none;}
  .detail-panel-inner{padding:14px 12px;}
}

/* ===================== HOME SCREEN ===================== */
.home-screen{
  position:fixed;inset:0;z-index:500;overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;
  background:
    radial-gradient(ellipse 1000px 600px at 50% -10%, rgba(255,165,62,.07), transparent 60%),
    var(--void);
}
.home-header{
  padding:18px 48px;display:flex;align-items:center;
  border-bottom:1px solid var(--line);background:var(--hull);
}
.home-brand{display:flex;align-items:center;gap:10px;}
.home-wordmark{
  font-family:var(--font-display);font-stretch:condensed;font-weight:700;
  font-size:22px;letter-spacing:.06em;color:var(--text);
}
.home-wordmark-r{color:var(--signal);}

.home-body{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:40px 48px;
}
.home-section-title{
  font-family:var(--font-display);font-stretch:condensed;font-weight:700;
  font-size:42px;letter-spacing:.04em;color:var(--text);
  margin:0 0 30px;text-align:center;
}

.home-grid{
  display:flex;align-items:center;justify-content:center;
  max-width:100%;overflow:hidden;
}
.home-grid-inner{
  display:grid;
  grid-template-columns:repeat(4, 260px);
  gap:20px;
}
@media (max-width: 768px){
  .home-grid-inner{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    gap:10px !important;
  }
  .map-card{
    width:100% !important;
    aspect-ratio:21/9 !important;
  }
}

.map-card{
  position:relative;border-radius:10px;overflow:hidden;cursor:pointer;
  border:1px solid var(--line);background:var(--hull);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  aspect-ratio:16/10;
}
.map-card:hover{
  transform:translateY(-4px) scale(1.01);
  box-shadow:0 16px 48px rgba(0,0,0,.5), 0 0 0 1px var(--signal);
  border-color:var(--signal);
}
.map-card-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:transform .3s ease;
}
.map-card:hover .map-card-bg{transform:scale(1.04);}
.map-card-content{
  position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:flex-end;
  background:linear-gradient(to top, rgba(7,5,4,.85) 0%, rgba(7,5,4,.1) 55%, transparent 100%);
  padding:16px;
}
.map-card-name{
  font-family:var(--font-display);font-stretch:condensed;
  font-size:20px;letter-spacing:.08em;color:var(--text);
  text-transform:uppercase;
}
.map-card-count{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;
  color:var(--signal);margin-top:4px;
}
.map-card-count.empty{color:var(--text-faint);}

/* back button in topbar */
.back-btn{
  display:flex;align-items:center;gap:6px;
  background:none;border:1px solid var(--line);color:var(--text-dim);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;
  padding:6px 11px;border-radius:4px;cursor:pointer;transition:.15s ease;
  white-space:nowrap;
}
.back-btn:hover{color:var(--signal);border-color:var(--signal);}

/* ===================== THROW MODAL REDESIGN ===================== */
.throw-modal{
  width: 520px;
  padding: 0;
  gap: 0;
  border-radius: 12px;
  overflow: hidden;
  border-top: 2px solid var(--signal);
}

.tm-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.tm-preview-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.tm-preview{
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--void);
  border: 1.5px solid var(--signal);
  box-shadow: 0 0 0 1px rgba(0,0,0,.4);
}
.tm-preview img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.tm-preview svg{ position: absolute; inset: 0; width: 100%; height: 100%; }
.tm-preview-line{ stroke-dasharray: 2 3; stroke-width: 1.2; opacity: .85; }
.tm-preview-dot{
  position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; border: 1.5px solid var(--void);
}
.tm-preview-landing{ background: var(--signal); }
.tm-preview-throw{ background: var(--text); }
.tm-preview-caption{
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint);
}
.tm-eyebrow{
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--signal);
}
.tm-header h3{
  font-size: 18px;
  letter-spacing: .04em;
  color: var(--text);
  margin: 0;
}

.tm-section{
  padding: 18px 24px;
  border-bottom: 1px solid var(--line-soft);
}
.tm-section:last-of-type{ border-bottom: none; }

/* Upload row */
.tm-upload-row{
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tm-upload-col{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tm-upload-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tm-upload-trigger{
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  border: 1px dashed var(--line);
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: .04em;
  color: var(--text-dim);
  cursor: pointer;
  transition: .15s ease;
  background: var(--void);
}
.tm-upload-trigger:hover{
  border-color: var(--signal);
  color: var(--signal);
}
.tm-thumbs{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tm-thumbs:empty{ display: none; }
.tm-thumbs .thumb{
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.tm-thumbs .thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tm-thumbs .thumb .thumb-remove{
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(7,5,4,.9);
  color: var(--fire);
  border: 1px solid var(--fire);
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Selects */
.tm-selects{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.tm-select-group{ display: flex; flex-direction: column; gap: 6px; }
.tm-label{
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-dim);
}
.tm-optional{
  color: var(--text-faint);
  font-size: 9px;
  margin-left: 6px;
}
.tm-select{
  background: var(--void);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 13px;
  width: 100%;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234d6468'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 30px;
}
.tm-select:focus{ outline: 1px solid var(--signal); border-color: var(--signal); }

.tm-textarea{
  background: var(--void);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13px;
  width: 100%;
  resize: vertical;
  line-height: 1.5;
  margin-top: 8px;
}
.tm-textarea:focus{ outline: 1px solid var(--signal); border-color: var(--signal); }
.tm-textarea::placeholder{ color: var(--text-faint); }

.tm-footer{
  padding: 16px 24px;
  display: flex;
  justify-content: flex-end;
  background: var(--hull);
  border-top: 1px solid var(--line-soft);
}

/* ===================== DOSSIER CARD CAROUSELS ===================== */
.tc-galleries{
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line-soft);
}
.tc-carousel{
  flex: 1;
  min-width: 0;
  border-right: 1px solid var(--line-soft);
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tc-carousel:last-child{ border-right: none; }

.tc-carousel-label{
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-faint);
}
.tc-carousel-inner{
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: var(--void);
  line-height: 0;
}
.tc-carousel-img{
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  cursor: pointer;
  transition: filter .15s;
}
.tc-carousel-img:hover{ filter: brightness(1.1); }

.tc-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(13,10,8,.8);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .15s;
  z-index: 2;
}
.tc-arrow:hover{ border-color: var(--signal); color: var(--signal); }
.tc-prev{ left: 6px; }
.tc-next{ right: 6px; }

.tc-dots{
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 2;
}
.tc-dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  transition: background .15s;
}
.tc-dot.active{ background: var(--signal); }

/* ===================== HERO + THUMBNAIL STRIP ===================== */
.detail-hero{
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  border-top: 2px solid var(--signal);
}
.hero-header{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.hero-header .variant-tag{
  position: static;
  border-radius: 4px;
}
.hero-header .throw-meta{ flex: 1; display: flex; gap: 8px; flex-wrap: wrap; }
.hero-header .throw-card-actions{ margin-left: auto; }
.hero-galleries{
  /* override tc-galleries to make images taller in hero */
}
.hero-galleries .tc-carousel-img{
  aspect-ratio: 16/9;
}
.hero-notes{
  padding: 12px 16px;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
  border-top: 1px solid var(--line-soft);
}

/* Thumbnail strip */
.detail-strip{
  display: flex;
  gap: 8px;
  padding: 14px 0 4px;
  overflow-x: auto;
  flex-wrap: wrap;
}
.detail-strip-thumb{
  flex-shrink: 0;
  width: 100px;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid var(--line);
  cursor: pointer;
  transition: border-color .15s, transform .15s;
  position: relative;
  background: var(--void);
}
.detail-strip-thumb:hover{ border-color: var(--text-dim); transform: translateY(-2px); }
.detail-strip-thumb.active{ border-color: var(--signal); }
.detail-strip-thumb img{
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}
.strip-thumb-empty{
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--panel-2);
}
.strip-thumb-label{
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--text-dim);
  padding: 4px 0;
  background: var(--hull);
}
.detail-strip-thumb.active .strip-thumb-label{ color: var(--signal); }

/* ===================== LINEUP NAME ===================== */
.detail-name-wrap{ flex: 1; padding: 0 16px; }
.detail-name-input{
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-display);
  font-stretch: condensed;
  font-size: 20px;
  letter-spacing: .04em;
  padding: 4px 0;
  outline: none;
  transition: border-color .15s;
}
.detail-name-input:focus{ border-bottom-color: var(--signal); }
.detail-name-input::placeholder{ color: var(--text-faint); }

/* ===================== CHEATSHEET PANEL ===================== */
.cheatsheet-panel{
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}
.cheatsheet-panel.hidden{ display: none; }

.cheatsheet-tab{
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--signal-dim);
  border-radius: 8px;
  padding: 10px 16px;
  color: var(--signal);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  transition: .15s;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(255,165,62,.12);
}
.cheatsheet-tab:hover{
  background: var(--panel-2);
  border-color: var(--signal);
  box-shadow: 0 4px 18px rgba(255,165,62,.22);
  transform: translateY(-1px);
}
.cs-icon{ width:18px;height:18px;flex-shrink:0;color:var(--signal); }

.cheatsheet-body{
  display: none;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  margin-top: 8px;
  width: min(540px, 50vw);
  border-top: 2px solid var(--signal);
  animation: slideDown .15s ease;
}
.cheatsheet-panel.open .cheatsheet-body{ display: flex; }
.cheatsheet-panel.open .cheatsheet-tab{ display: none; }

@keyframes slideDown{
  from{ opacity:0; transform:translateY(-8px); }
  to{ opacity:1; transform:translateY(0); }
}

.cheatsheet-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.cheatsheet-header-left{ display:flex;align-items:center;gap:8px; }
.cheatsheet-header-left .cs-icon{ color:var(--signal); }
.cheatsheet-title{
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--signal);
}
.cheatsheet-img-wrap{
  overflow-y: auto;
  max-height: calc(100vh - 160px);
}
.cheatsheet-img-wrap img{
  width: 100%;
  display: block;
  cursor: zoom-in;
}

/* ===================== ACCOUNTS / PERSONAL MAPS ===================== */

.hidden{ display:none !important; }

/* Sidebar auth box */
.auth-box{ display:flex; flex-direction:column; gap:6px; }
.auth-signed-in{ display:none; align-items:center; justify-content:space-between; gap:8px; }
body.signed-in .auth-signed-in{ display:flex; }
body.signed-in .auth-signed-out{ display:none; }

/* Admin-only sidebar link to the moderation dashboard. Hidden for everyone
   until applyAuthState() marks the body as an admin. */
.admin-link{ display:none; text-align:center; text-decoration:none;
  border-color:color-mix(in srgb, var(--signal) 40%, var(--line)); color:var(--signal); }
.admin-link:hover{ border-color:var(--signal); background:color-mix(in srgb, var(--signal) 12%, var(--panel)); }
body.is-admin .admin-link{ display:block; }
.auth-email{
  font-family:var(--font-mono); font-size:11px; color:var(--text-dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1;
}

/* Topbar Official / My Map toggle */
.view-toggle{
  display:flex; align-items:center; gap:2px; margin-left:8px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:5px; padding:2px;
}
.view-toggle-btn{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase;
  background:none; border:none; color:var(--text-faint); padding:5px 11px; border-radius:4px;
  cursor:pointer; transition:.15s;
}
.view-toggle-btn:hover{ color:var(--text-dim); }
.view-toggle-btn.active{ background:var(--signal); color:#221305; }

/* Official / personal badge in the dossier */
.owner-badge{
  display:inline-block; margin-left:8px; font-family:var(--font-mono); font-size:9px;
  letter-spacing:.1em; text-transform:uppercase; padding:3px 7px; border-radius:3px;
  background:var(--panel-2); border:1px solid var(--line); color:var(--text-faint); vertical-align:middle;
}
.owner-badge.badge-official{ color:var(--signal); border-color:var(--signal); }
.owner-badge.badge-personal{ color:var(--he); border-color:var(--he); }

/* Save/bookmark button in the dossier */
/* #saveLineupBtn is no longer used — bookmarking moved to a per-throw button in the hero card, see .save-btn above */

/* Auth modal */
.auth-modal input[type=email], .auth-modal input[type=password]{
  background:var(--void); border:1px solid var(--line); color:var(--text);
  border-radius:4px; padding:9px 10px; font-size:14px; width:100%;
}
.auth-modal input:focus{ outline:1px solid var(--signal); border-color:var(--signal); }
.auth-submit-btn{ margin-top:6px; }
.auth-google-btn{ text-align:center; }
.auth-error{
  font-size:12px; color:var(--fire); background:rgba(255,106,69,.1);
  border:1px solid var(--fire); border-radius:4px; padding:8px 10px; margin:0;
}
.auth-error.info{ color:var(--he); background:rgba(121,224,126,.1); border-color:var(--he); }
.auth-switch{ font-size:12px; color:var(--text-faint); margin:4px 0 0; }
.auth-switch a{ color:var(--signal); text-decoration:none; }
.auth-switch a:hover{ text-decoration:underline; }

.detail-head-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }

/* =========================================================================
   ADMIN — screenshot moderation dashboard (admin.html)
   ========================================================================= */
.admin-body{ overflow:auto; }
/* Explicit display below would otherwise beat the [hidden] attribute's
   UA display:none, leaving gated panels visible. Keep [hidden] authoritative. */
.admin-signin[hidden], .admin-denied[hidden], .admin-main[hidden], .admin-status-toggle[hidden]{ display:none; }
.admin-wrap{ max-width:1100px; margin:0 auto; padding:20px 22px 80px; }
.admin-header{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-bottom:16px; margin-bottom:22px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.admin-tag{ font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--void); background:var(--signal); padding:2px 7px; border-radius:3px; vertical-align:middle; margin-left:4px; }
.admin-header-right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.admin-status-toggle{ display:inline-flex; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.admin-status-toggle .view-toggle-btn{ background:transparent; border:none; color:var(--text-dim);
  font-family:var(--font-mono); font-size:11px; padding:6px 12px; cursor:pointer; }
.admin-status-toggle .view-toggle-btn.active{ background:var(--panel); color:var(--signal); }

.admin-signin, .admin-denied{ max-width:360px; margin:60px auto; background:var(--panel);
  border:1px solid var(--line); border-radius:8px; padding:26px; display:flex; flex-direction:column; gap:8px; }
.admin-signin h3, .admin-denied h3{ margin:0 0 6px; color:var(--text); }
.admin-signin .primary-btn{ margin-top:10px; }
.admin-denied{ text-align:center; color:var(--text-dim); }

.admin-hint{ font-family:var(--font-mono); font-size:12px; color:var(--text-dim); margin:0 0 18px; letter-spacing:.02em; }
.admin-queue{ display:flex; flex-direction:column; gap:18px; }

.admin-card{ background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:18px 20px; }
.admin-card.is-reviewed{ opacity:.62; }
.admin-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding-bottom:12px; margin-bottom:14px; border-bottom:1px solid var(--line-soft); flex-wrap:wrap; }
.admin-card-name{ color:var(--text); margin:0 8px; font-size:14px; }
.admin-card-sub{ font-family:var(--font-mono); font-size:11px; color:var(--text-faint); }
.admin-card-owner{ font-family:var(--font-mono); font-size:11px; color:var(--warn); word-break:break-all; }

.admin-throw{ margin-bottom:14px; }
.admin-throw-meta{ font-family:var(--font-mono); font-size:11px; color:var(--text-dim); margin:0 0 8px; }
.admin-throw-notes{ color:var(--text-faint); }
.admin-shots{ display:flex; flex-wrap:wrap; gap:12px; }
.admin-shot{ position:relative; margin:0; width:150px; }
.admin-shot img{ width:150px; height:100px; object-fit:cover; border-radius:6px; border:1px solid var(--line);
  cursor:zoom-in; display:block; background:var(--void); }
.admin-shot figcaption{ font-family:var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-faint); margin-top:4px; }
.admin-shot-reject{ position:absolute; top:6px; right:6px; width:24px; height:24px; border-radius:4px;
  background:rgba(12,10,8,.82); border:1px solid var(--line); color:var(--fire); font-size:12px; cursor:pointer;
  line-height:1; display:flex; align-items:center; justify-content:center; }
.admin-shot-reject:hover{ background:var(--fire); color:var(--void); border-color:var(--fire); }

.admin-card-actions{ display:flex; gap:10px; margin-top:8px; padding-top:14px; border-top:1px solid var(--line-soft); flex-wrap:wrap; }

/* Profile button (sidebar footer) + profile modal */
.profile-btn{
  display:flex; align-items:center; gap:9px; width:100%;
  background:var(--panel); border:1px solid var(--line); border-radius:6px;
  padding:7px 10px; cursor:pointer; transition:.15s; text-align:left; min-width:0;
}
.profile-btn:hover{ border-color:var(--signal); background:var(--panel-2); }
.profile-btn:hover .profile-chevron{ color:var(--signal); transform:translateX(2px); }
.profile-btn .auth-email{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-chevron{ color:var(--text-faint); flex-shrink:0; transition:.15s; }
.profile-avatar{
  width:24px; height:24px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--signal), #ff7a3e);
  color:var(--void); font-family:var(--font-mono); font-weight:700; font-size:12px;
}
.profile-avatar-lg{ width:52px; height:52px; font-size:22px; border-radius:12px; }

.profile-modal{ width:440px; gap:0; }
.profile-head{ display:flex; align-items:center; gap:14px; padding-bottom:16px; border-bottom:1px solid var(--line-soft); }
.profile-head-text{ flex:1; min-width:0; }
.profile-head-text h3{ margin:0; font-size:18px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-email{ margin:2px 0 0; font-family:var(--font-mono); font-size:11px; color:var(--text-faint);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.profile-section{ padding:16px 0; border-bottom:1px solid var(--line-soft); display:flex; flex-direction:column; gap:8px; }
.profile-section:last-child{ border-bottom:none; padding-bottom:4px; }
.profile-section-title{ margin:0; font-family:var(--font-mono); font-size:10px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--text-dim); }
.profile-row{ display:flex; gap:8px; }
.profile-row input{ flex:1; min-width:0; }
.profile-modal input[type=password]{
  background:var(--void); border:1px solid var(--line); color:var(--text);
  border-radius:4px; padding:9px 10px; font-size:14px; width:100%;
}
.profile-modal input[type=password]:focus{ outline:1px solid var(--signal); border-color:var(--signal); }
.profile-pw-btn{ align-self:flex-start; }
.profile-msg{ margin:0; font-size:12px; color:var(--he); }
.profile-msg.error{ color:var(--fire); }

.profile-danger{ margin-top:2px; }
.profile-danger-title{ color:var(--fire); }
.profile-danger-text{ margin:0; font-size:12px; color:var(--text-dim); line-height:1.5; }
.profile-danger .danger{ align-self:flex-start; color:var(--fire);
  border-color:color-mix(in srgb, var(--fire) 45%, var(--line)); }

/* Email-confirmation landing page (confirmed.html) */
.confirm-wrap{ max-width:420px; margin:0 auto; padding:60px 22px; display:flex; flex-direction:column; gap:26px; align-items:center; }
.confirm-brand{ justify-content:center; }
.confirm-card{ width:100%; background:var(--panel); border:1px solid var(--line); border-top:2px solid var(--signal);
  border-radius:8px; padding:32px 28px; text-align:center; box-shadow:0 26px 70px rgba(0,0,0,.5); }
.confirm-card h3{ margin:0 0 8px; font-size:20px; color:var(--text); letter-spacing:.02em; }
.confirm-icon{ width:52px; height:52px; margin:0 auto 18px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:24px; color:var(--he); border:2px solid var(--he); background:color-mix(in srgb, var(--he) 10%, var(--panel)); }
.confirm-icon-err{ color:var(--fire); border-color:var(--fire); background:color-mix(in srgb, var(--fire) 10%, var(--panel)); }
.confirm-text{ color:var(--text-dim); font-size:14px; margin:0 0 22px; line-height:1.55; }
.confirm-btn{ display:inline-block; text-decoration:none; }
.admin-publish{ color:var(--signal); border-color:color-mix(in srgb, var(--signal) 40%, var(--line)); }
.admin-publish:hover{ border-color:var(--signal); background:color-mix(in srgb, var(--signal) 12%, var(--panel)); }
.admin-card.is-busy{ opacity:.6; }
.admin-card-actions button:disabled{ opacity:.5; cursor:default; }
.admin-card-actions button:disabled:hover{ background:transparent; }