.mode-switch { grid-template-columns: repeat(4, 1fr); width: min(100%, 560px); }

.map-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.04);
}
.map-summary strong { font-size: 14px; }
.map-summary > span { min-width: 0; color: var(--ink-faint); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-actions { display: flex; gap: 7px; }
.map-actions button { min-height: 36px; padding: 0 11px; font-size: 12px; font-weight: 700; }

.explicitness-map {
  position: relative;
  min-height: clamp(210px, 29vw, 285px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 100%, rgba(255,47,146,.12), transparent 47%),
    rgba(255,255,255,.025);
  touch-action: none;
}
.scale-line { position: absolute; z-index: 1; left: 5%; right: 5%; top: 72%; height: 3px; border-radius: 99px; background: linear-gradient(90deg, rgba(255,255,255,.24), var(--pink), rgba(255,255,255,.24)); box-shadow: 0 0 24px rgba(255,47,146,.25); }
.scale-line::before, .scale-line::after { content:""; position:absolute; top:50%; width:10px; height:10px; border-radius:50%; background:var(--ink); border:2px solid var(--pink); transform:translateY(-50%); }
.scale-line::before { left:-2px; }.scale-line::after { right:-2px; }
.model-marker { position:absolute; z-index:6; top:calc(72% - 27px); width:2px; height:54px; background:rgba(255,255,255,.78); transform:translateX(-50%); pointer-events:none; box-shadow:0 0 10px rgba(255,255,255,.3); }
.model-marker::after { content:""; position:absolute; left:50%; top:23px; width:8px; height:8px; border-radius:50%; background:#fff; transform:translateX(-50%); }
.model-marker span { position:absolute; left:50%; top:-18px; transform:translateX(-50%); color:rgba(255,255,255,.78); font-size:10px; font-weight:750; letter-spacing:.06em; text-transform:uppercase; }
.endpoint { position:absolute; z-index:2; top: calc(72% + 18px); color:var(--ink-faint); font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.endpoint-low { left:5%; }.endpoint-high { right:5%; text-align:right; }
.drop-marker { position:absolute; z-index:5; top:calc(72% + 1.5px); width:12px; height:12px; box-sizing:border-box; border:2px solid #fff; border-radius:50%; background:var(--pink); box-shadow:0 0 0 4px rgba(255,47,146,.28); transform:translate(-50%,-50%); pointer-events:none; }
.map-points { position:absolute; inset:0; z-index:2; }
.map-point { position:absolute; top:calc(72% + 1.5px); width:8px; height:8px; box-sizing:border-box; padding:0; border:2px solid rgba(255,255,255,.86); border-radius:50%; background:var(--bg); box-shadow:0 0 0 2px rgba(255,47,146,.24); transform:translate(-50%,-50%); cursor:grab; touch-action:none; }
.map-point:focus-visible { outline:3px solid var(--pink-soft); outline-offset:3px; }
.map-connectors { position:absolute; z-index:2; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.map-connectors path { fill:none; stroke:rgba(255,255,255,.68); stroke-width:.22; vector-effect:non-scaling-stroke; }
.map-cards { position:absolute; inset:0; z-index:3; }
.map-card { position:absolute; width:58px; height:78px; padding:0; border:2px solid rgba(255,255,255,.76); border-radius:10px; overflow:hidden; background:#090909; box-shadow:0 8px 24px rgba(0,0,0,.48); transform:translate(-50%, -100%); touch-action:none; cursor:grab; }
.map-card:active { cursor:grabbing; }.map-card:focus-visible { outline:3px solid var(--pink-soft); outline-offset:3px; }
.map-card :is(img, video) { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.map-card::after { content:""; position:absolute; inset:0; border-radius:8px; box-shadow:inset 0 -24px 22px rgba(0,0,0,.18); }
.map-card-remove { position:absolute; z-index:5; width:20px; height:20px; padding:0; border:1px solid rgba(255,255,255,.78); border-radius:50%; background:rgba(8,8,9,.86); color:#fff; font-size:16px; line-height:16px; transform:translate(15px, calc(-100% + 4px)); }
.closest-preview { position:absolute; z-index:7; top:12px; right:12px; width:128px; display:grid; gap:4px; padding:5px; border:1px solid rgba(255,255,255,.3); border-radius:10px; background:rgba(4,4,5,.84); box-shadow:0 10px 30px rgba(0,0,0,.5); pointer-events:none; }
.closest-preview video { width:100%; aspect-ratio:9/13; border-radius:5px; background:#000; object-fit:cover; }.closest-preview span { color:rgba(255,255,255,.68); font-size:9px; font-weight:700; text-align:center; }
.map-drop-hint { position:absolute; z-index:2; top:calc(72% - 47px); left:50%; transform:translateX(-50%); color:rgba(255,255,255,.48); font-size:12px; transition:opacity .16s ease; pointer-events:none; }
.explicitness-map.has-cards .map-drop-hint { opacity:0; }.explicitness-map.drop-active { border-color:var(--pink-line); box-shadow:0 0 0 3px rgba(255,47,146,.11); }

.candidate-section { display:grid; gap:12px; }
.candidate-heading { display:flex; justify-content:space-between; gap:16px; align-items:baseline; }
.candidate-heading h2 { margin:0; font-size:18px; }.candidate-heading span { color:var(--ink-faint); font-size:12px; text-align:right; }
.candidate-tray { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); width:min(100%, 360px); gap:9px; }
.map-candidate { position:relative; min-width:0; padding:0; border:1px solid var(--border); border-radius:14px; overflow:hidden; background:#000; box-shadow:0 10px 28px rgba(0,0,0,.3); touch-action:none; cursor:grab; }
.map-candidate.selected { border-color:var(--pink); box-shadow:0 0 0 2px rgba(255,47,146,.22), 0 10px 28px rgba(0,0,0,.3); }.map-candidate.dragging { opacity:.42; cursor:grabbing; }
.map-candidate:focus-visible { outline:3px solid var(--pink-soft); outline-offset:3px; }
.map-candidate video { width:100%; aspect-ratio:9/11; object-fit:cover; background:#000; display:block; pointer-events:none; }
.map-candidate-scrub { position:absolute; z-index:2; right:7px; bottom:40px; left:7px; height:25px; --scan-position:0%; box-sizing:border-box; opacity:.68; background:linear-gradient(to right, var(--pink) 0 var(--scan-position), rgba(255,255,255,.54) var(--scan-position) 100%) center / 100% 2px no-repeat; cursor:ew-resize; touch-action:none; }
.map-candidate-scrub::after { content:""; position:absolute; top:50%; left:var(--scan-position); width:7px; height:7px; border:1px solid rgba(255,255,255,.75); border-radius:50%; background:var(--pink); transform:translate(-50%,-50%); }
.map-candidate-scrub:focus-visible { opacity:1; outline:2px solid var(--pink-soft); outline-offset:2px; }
.map-candidate span { display:block; min-height:32px; padding:7px 8px; overflow:hidden; color:var(--ink-dim); font-size:11px; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; pointer-events:none; }
.map-candidate-exclude { position:absolute; z-index:2; top:6px; right:6px; width:28px; height:28px; padding:0; border:1px solid rgba(255,255,255,.32); border-radius:50%; background:rgba(0,0,0,.72); color:#fff; font-size:16px; line-height:1; }
.drag-ghost { position:fixed; z-index:100; width:82px; height:112px; overflow:hidden; border:2px solid var(--pink); border-radius:11px; background:#000; box-shadow:0 18px 40px rgba(0,0,0,.5); pointer-events:none; transform:translate(-50%,-50%) rotate(3deg); }
.drag-ghost img { width:100%; height:100%; object-fit:cover; display:block; }

.preview-sheet { position:fixed; z-index:200; inset:0; display:grid; place-items:center; padding:20px; background:rgba(0,0,0,.76); backdrop-filter:blur(10px); }
.preview-panel { position:relative; width:min(760px, 100%); display:grid; gap:11px; padding:14px; border:1px solid var(--border); border-radius:20px; background:var(--bg-1); box-shadow:0 28px 80px rgba(0,0,0,.62); }
.preview-panel video { width:100%; max-height:min(68dvh, 660px); border-radius:12px; background:#000; object-fit:contain; }
.preview-panel input { width:100%; accent-color:var(--pink); }
.preview-close { position:absolute; z-index:2; top:24px; right:24px; min-height:36px; padding:0 12px; font-size:12px; font-weight:700; background:rgba(0,0,0,.65)!important; }
.preview-controls { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:10px; }
.preview-controls button { min-height:40px; padding:0 14px; border-radius:var(--r-full); background:var(--pink); color:var(--ink); font-weight:750; }
.preview-controls span { overflow:hidden; color:var(--ink-dim); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }

@media (max-width:700px) {
  .map-summary { grid-template-columns:1fr auto; }.map-summary > span { grid-row:2; }.map-actions { grid-row:2; }
  .candidate-tray { grid-template-columns:repeat(2, minmax(0, 1fr)); width:min(100%, 360px); gap:8px; }.map-candidate:last-child { grid-column:auto; max-width:none; }
  .map-candidate span { min-height:30px; padding:6px; font-size:10px; }.map-candidate-scrub { right:5px; bottom:37px; left:5px; }
  .explicitness-map { min-height:220px; }.map-card { width:48px; height:65px; }.map-card-remove { transform:translate(10px, calc(-100% + 4px)); }.closest-preview { width:104px; }
  .candidate-heading { display:grid; gap:3px; }.candidate-heading span { text-align:left; }
}