:root {
  color-scheme: light;
  --bg: #f5f2ea;
  --ink: #1f2933;
  --muted: #64707d;
  --panel: #fffdf8;
  --surface: #f7f3eb;
  --line: #d8d0c2;
  --route: #d9442e;
  --route-dark: #9f2d1e;
  --land: #ebe3d4;
  --control: #25313d;
  --control-text: #ffffff;
  --label-halo: #ffffff;
  --ui-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ui-font-style: normal;
  --ui-letter-spacing: 0;
  --ui-texture: none;
  --ui-texture-opacity: 0;
  --ui-texture-blend: multiply;
  --stadia-card-text: #111827;
  --stadia-card-text-bg-rgb: 255 255 255;
  --stadia-card-text-bg-opacity: 0.76;
  --stadia-topo-contours: 0.24;
  --stadia-topo-blend: 0.2;
  --route-theme-land-a: 240 214 165;
  --route-theme-land-b: 168 124 82;
  --route-theme-water-a: 91 197 215;
  --route-theme-water-b: 17 127 154;
  --route-theme-texture-opacity: 0.72;
  --leather-color: #6b3f2a;
  --leather-texture-opacity: 0.55;
  --leather-texture-size: 512px 512px;
  --leather-blend-mode: multiply;
  --user-map-viewport-top: 96px;
  --user-map-viewport-right: 96px;
  --user-map-viewport-bottom: 128px;
  --user-map-viewport-left: 96px;
  --user-map-viewport-radius: 22px;
  --ui-font-color: var(--ink);
  --ui-font-weight: 700;
  --ui-font-stretch: 100%;
  --ui-font-scale-y: 1;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ui-font-color, var(--ink));
  background: var(--bg);
  font-family: var(--ui-font);
  font-style: var(--ui-font-style);
  letter-spacing: var(--ui-letter-spacing);
  font-weight: var(--ui-font-weight);
  font-stretch: var(--ui-font-stretch);
}

.leather-bg {
  position: relative;
  background-color: var(--leather-color);
  overflow: hidden;
}

.leather-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("assets/textures/pebbled-leather-gray.png"), url("assets/backgrounds/leather.png");
  background-repeat: repeat;
  background-size: var(--leather-texture-size);
  opacity: var(--leather-texture-opacity);
  mix-blend-mode: var(--leather-blend-mode);
}

.leather-bg > * {
  position: relative;
  z-index: 1;
}

.leather-bg.leather-brown {
  --leather-color: #6b3f2a;
  --leather-texture-opacity: 0.55;
  --leather-blend-mode: multiply;
}

.leather-bg.leather-red {
  --leather-color: #6f1f24;
  --leather-texture-opacity: 0.5;
  --leather-blend-mode: multiply;
}

.leather-bg.leather-blue {
  --leather-color: #1f3f5f;
  --leather-texture-opacity: 0.45;
  --leather-blend-mode: multiply;
}

.leather-bg.leather-green {
  --leather-color: #2f4a35;
  --leather-texture-opacity: 0.5;
  --leather-blend-mode: multiply;
}

.leather-bg.leather-black {
  --leather-color: #1b1715;
  --leather-texture-opacity: 0.35;
  --leather-blend-mode: screen;
}

.leather-bg.leather-light {
  --leather-color: #b9aa93;
  --leather-texture-opacity: 0.35;
  --leather-blend-mode: multiply;
}

.embedded-panel {
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.45),
    inset 0 -1px 2px rgba(255, 255, 255, 0.08),
    0 1px 2px rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}

button,
input {
  font: inherit;
}

.map-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 33vw);
  min-height: 100vh;
}

.map-stage {
  --playback-dock-height: 64px;
  --user-device-margin: clamp(16px, 1.9vw, 28px);
  --user-device-radius: 30px;
  --user-screen-radius: 22px;
  --user-frame-edge-top: 96px;
  --user-frame-edge-right: 96px;
  --user-frame-edge-bottom: 128px;
  --user-frame-edge-left: 96px;
  --user-frame-top-height: var(--user-frame-edge-top);
  --user-frame-bottom-height: var(--user-frame-edge-bottom);
  --user-frame-left-width: var(--user-frame-edge-left);
  --user-frame-right-width: var(--user-frame-edge-right);
  --user-frame-side-width: var(--user-frame-left-width);
  --user-frame-slot-padding: 10px;
  --user-frame-slot-radius: 16px;
  --user-frame-shadow: inset 0 2px 8px rgb(255 255 255 / 0.05), inset 0 -14px 24px rgb(0 0 0 / 0.24), 0 1px 0 rgb(255 255 255 / 0.06);
  --user-screen-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.05), inset 0 0 24px rgb(0 0 0 / 0.08);
  --user-section-shadow: inset 0 2px 8px rgb(0 0 0 / 0.24), inset 0 -1px 1px rgb(255 255 255 / 0.03);
  --user-frame-stroke-color: rgb(255 255 255 / 0.12);
  --user-frame-stroke-width: 1px;
  --user-frame-stroke-opacity: 1;
  --user-frame-stroke-style: solid;
  --user-slot-stroke-color: rgb(255 255 255 / 0.14);
  --user-slot-stroke-width: 1px;
  --user-slot-stroke-opacity: 1;
  --user-slot-stroke-style: solid;
  --user-section-stroke-color: rgb(255 255 255 / 0.12);
  --user-section-stroke-width: 1px;
  --user-section-stroke-opacity: 1;
  --user-section-stroke-style: solid;
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: var(--land);
  border-bottom: 1px solid var(--line);
}

.user-device-frame {
  position: absolute;
  inset: var(--user-device-margin);
  z-index: 780;
  pointer-events: none;
  overflow: hidden;
  border: var(--user-frame-stroke-width) var(--user-frame-stroke-style) var(--user-frame-stroke-color);
  opacity: var(--user-frame-stroke-opacity);
  border-radius: var(--user-device-radius);
  background: transparent;
  box-shadow:
    var(--user-frame-shadow);
}

body:not(.user-site-mode):not(.users-builder-mode) .user-device-frame {
  display: none;
}

.user-device-screen-aperture {
  position: absolute;
  border: 1px solid rgb(255 255 255 / 0.08);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.06), rgb(0 0 0 / 0.2)),
    color-mix(in srgb, var(--users-shell-leather-color, var(--leather-color)), #101820 24%);
  box-shadow:
    var(--user-screen-shadow);
}

.user-frame-builder-tools {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.user-frame-builder-tools[hidden] {
  display: none;
}

.user-frame-add,
.user-frame-resize-handle,
.user-frame-corner-swap {
  position: absolute;
  pointer-events: auto;
}

.user-frame-add {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.34);
  border-radius: 50%;
  background: color-mix(in srgb, var(--control), #ffffff 18%);
  color: var(--control-text);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 8px 18px rgb(0 0 0 / 0.24), inset 0 1px 0 rgb(255 255 255 / 0.32);
  cursor: pointer;
}

.user-frame-add.is-user-builder-drop-target {
  box-shadow: inset 0 0 0 3px rgb(255 111 196 / 0.84), 0 0 0 5px rgb(255 111 196 / 0.22);
}

.user-frame-add-top {
  top: calc(var(--user-frame-edge-top) / 2 - 26px);
  left: 50%;
  transform: translateX(-50%);
}

.user-frame-add-right {
  top: 50%;
  right: calc(var(--user-frame-edge-right) / 2 - 26px);
  transform: translateY(-50%);
}

.user-frame-add-bottom {
  bottom: calc(var(--user-frame-edge-bottom) / 2 - 26px);
  left: 50%;
  transform: translateX(-50%);
}

.user-frame-add-left {
  top: 50%;
  left: calc(var(--user-frame-edge-left) / 2 - 26px);
  transform: translateY(-50%);
}

.user-frame-resize-handle {
  border: 0;
  background: transparent;
  opacity: 0;
}

body.users-builder-mode .user-frame-resize-handle {
  opacity: 1;
}

.user-frame-resize-top,
.user-frame-resize-bottom {
  left: var(--user-frame-edge-left);
  right: var(--user-frame-edge-right);
  height: 12px;
  cursor: ns-resize;
}

.user-frame-resize-top { top: calc(var(--user-frame-edge-top) - 6px); }
.user-frame-resize-bottom { bottom: calc(var(--user-frame-edge-bottom) - 6px); }

.user-frame-resize-left,
.user-frame-resize-right {
  top: var(--user-frame-edge-top);
  bottom: var(--user-frame-edge-bottom);
  width: 12px;
  cursor: ew-resize;
}

.user-frame-resize-left { left: calc(var(--user-frame-edge-left) - 6px); }
.user-frame-resize-right { right: calc(var(--user-frame-edge-right) - 6px); }

.user-frame-corner-swap {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.32);
  border-radius: 50%;
  background: color-mix(in srgb, var(--control), #ffffff 12%);
  color: var(--control-text);
  font-size: 0.9rem;
  font-weight: 900;
  cursor: pointer;
}

.user-frame-corner-top-left { top: calc(var(--user-frame-edge-top) - 12px); left: calc(var(--user-frame-edge-left) - 12px); }
.user-frame-corner-top-right { top: calc(var(--user-frame-edge-top) - 12px); right: calc(var(--user-frame-edge-right) - 12px); }
.user-frame-corner-bottom-right { bottom: calc(var(--user-frame-edge-bottom) - 12px); right: calc(var(--user-frame-edge-right) - 12px); }
.user-frame-corner-bottom-left { bottom: calc(var(--user-frame-edge-bottom) - 12px); left: calc(var(--user-frame-edge-left) - 12px); }

.user-site-panel-top[class*="corner-owner-top-"] ,
.user-site-panel-right[class*="corner-owner-top-right"],
.user-site-panel-bottom[class*="corner-owner-bottom-"],
.user-site-panel-left[class*="corner-owner-top-left"],
.user-site-panel-left[class*="corner-owner-bottom-left"] {
  z-index: 2;
}

.user-device-rail {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.06), rgb(0 0 0 / 0.22)),
    color-mix(in srgb, var(--users-shell-leather-color, var(--leather-color)), #101820 18%);
  border: var(--user-frame-stroke-width) var(--user-frame-stroke-style) var(--user-frame-stroke-color);
  opacity: var(--user-frame-stroke-opacity);
}

.user-device-rail-top,
.user-device-rail-bottom {
  left: 0;
  right: 0;
}

.user-device-rail-left,
.user-device-rail-right {
  top: var(--user-frame-top-height);
  bottom: var(--user-frame-bottom-height);
}

.user-device-rail-left { width: var(--user-frame-left-width); }
.user-device-rail-right { width: var(--user-frame-right-width); }

.user-device-rail-top {
  top: 0;
  height: var(--user-frame-top-height);
  border-radius: calc(var(--user-device-radius) + 2px) calc(var(--user-device-radius) + 2px) 18px 18px;
}

.user-device-rail-bottom {
  bottom: 0;
  height: var(--user-frame-bottom-height);
  border-radius: 18px 18px calc(var(--user-device-radius) + 2px) calc(var(--user-device-radius) + 2px);
}

.user-device-rail-left {
  left: 0;
  border-radius: calc(var(--user-device-radius) * 0.72) 18px 18px calc(var(--user-device-radius) * 0.72);
}

.user-device-rail-right {
  right: 0;
  border-radius: 18px calc(var(--user-device-radius) * 0.72) calc(var(--user-device-radius) * 0.72) 18px;
}

.user-device-screen-aperture {
  z-index: 2;
  inset:
    calc(var(--user-frame-top-height) + 3px)
    calc(var(--user-frame-right-width) + 3px)
    calc(var(--user-frame-bottom-height) + 3px)
    calc(var(--user-frame-left-width) + 3px);
  border-color: rgb(255 255 255 / 0.12);
  border-radius: var(--user-screen-radius);
  background: transparent;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.05),
    inset 0 0 24px rgb(0 0 0 / 0.08);
}

body.user-site-mode .map-shell {
  grid-template-columns: minmax(0, 1fr);
  padding: 32px;
  background-color: var(--leather-color);
  background-image: url("assets/textures/pebbled-leather-gray.png"), url("assets/backgrounds/leather.png");
  background-repeat: repeat;
  background-size: var(--leather-texture-size), 420px 420px;
  background-blend-mode: var(--leather-blend-mode), multiply;
}

body.user-site-mode .panel,
body.user-site-mode .map-feature-toolbar,
body.user-site-mode .elements-style-drawer,
body.user-site-mode .image-preview-drawer,
body.user-site-mode .usage-overlay,
body.user-site-mode .map-control-cluster,
body.user-site-mode .keyboard-only-toggle,
body.user-site-mode .us-view-button {
  display: none !important;
}

body.user-site-mode .playback-panel {
  left: 18px;
  right: 18px;
  bottom: 18px;
  border-radius: 18px;
  background-color: color-mix(in srgb, var(--users-shell-leather-color, var(--leather-color)), #111827 28%);
  background-image: url("assets/textures/pebbled-leather-gray.png"), url("assets/backgrounds/leather.png");
  background-size: var(--leather-texture-size), 360px 360px;
  background-blend-mode: var(--leather-blend-mode), multiply;
  border-top-color: color-mix(in srgb, var(--control), #ffffff 28%);
}

body.user-site-mode .map-stage {
  min-height: calc(100vh - 64px);
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 26px;
  box-shadow:
    inset 0 3px 12px rgb(0 0 0 / 0.58),
    inset 0 -2px 5px rgb(255 255 255 / 0.08),
    0 24px 48px rgb(0 0 0 / 0.42);
}

.site-mode-toggle {
  position: absolute;
  top: 16px;
  left: clamp(456px, 42vw, 56vw);
  transform: none;
  z-index: 900;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--control), #fff 42%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--control), #fff 10%);
  color: var(--control-text);
  font-weight: 950;
  box-shadow: 0 8px 20px rgb(31 41 51 / 0.2);
  cursor: pointer;
}

body.user-site-mode .site-mode-toggle {
  left: 50%;
  transform: translateX(-50%);
}

.user-material-controls {
  position: absolute;
  top: 16px;
  right: 78px;
  z-index: 902;
  display: none;
  gap: 8px;
}

body.user-site-mode .user-material-controls {
  display: flex;
}

.user-site-controls {
  --user-frame-gap: var(--user-device-margin);
  --user-frame-surface:
    linear-gradient(180deg, rgb(255 255 255 / 0.08), rgb(0 0 0 / 0.12)),
    color-mix(in srgb, var(--user-panel-surface-color, var(--users-shell-leather-color, var(--leather-color))), #ffffff 2%);
  position: absolute;
  z-index: 790;
  display: none;
  gap: var(--user-layout-section-gap, 12px);
  pointer-events: none;
  overflow: hidden;
  padding: var(--user-frame-slot-padding);
  border: var(--user-slot-stroke-width) var(--user-slot-stroke-style) var(--user-slot-stroke-color);
  border-radius: var(--user-frame-slot-radius, 16px);
  opacity: var(--user-slot-stroke-opacity);
  background: transparent;
  box-shadow: none;
  backdrop-filter: blur(8px) saturate(112%);
}

body.user-site-mode .user-site-controls {
  display: flex;
}

.user-site-controls[hidden] {
  display: none !important;
}

.user-site-controls > * {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.user-site-controls::before {
  content: "";
  position: absolute;
  inset: 1px;
  border: 1px solid rgb(255 255 255 / 0.06);
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(0 0 0 / 0.12)),
    var(--user-frame-surface);
  box-shadow:
    inset 0 2px 8px rgb(0 0 0 / 0.24),
    inset 0 -1px 1px rgb(255 255 255 / 0.03);
  pointer-events: none;
}

.user-site-controls[data-user-builder-panel] {
  transition:
    opacity 260ms ease,
    transform 320ms cubic-bezier(0.18, 0.88, 0.24, 1.12),
    box-shadow 260ms ease;
}

.user-site-controls[data-user-builder-panel="top"] {
  transform: translateY(-18px);
}

.user-site-controls[data-user-builder-panel="bottom"] {
  transform: translateY(18px);
}

.user-site-controls[data-user-builder-panel="left"] {
  transform: translateX(-18px);
}

.user-site-controls[data-user-builder-panel="right"] {
  transform: translateX(18px);
}

.user-site-controls.is-builder-visible {
  opacity: 1;
  transform: translate(0, 0);
}

.user-site-panel-top {
  top: calc(var(--user-frame-gap) + var(--user-frame-slot-padding));
  left: calc(var(--user-frame-gap) + var(--user-frame-left-width) + var(--user-frame-slot-padding));
  right: calc(var(--user-frame-gap) + var(--user-frame-right-width) + var(--user-frame-slot-padding));
  min-height: calc(var(--user-frame-top-height) - (var(--user-frame-slot-padding) * 2));
  max-height: calc(100% - (var(--user-frame-bottom-height) + 138px));
  border-radius: 18px 18px 12px 12px;
  border-bottom-color: rgb(255 255 255 / 0.06);
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  align-content: flex-start;
}

.user-site-panel-bottom {
  left: calc(var(--user-frame-gap) + var(--user-frame-left-width) + var(--user-frame-slot-padding));
  right: calc(var(--user-frame-gap) + var(--user-frame-right-width) + var(--user-frame-slot-padding));
  bottom: calc(var(--user-frame-gap) + var(--user-frame-slot-padding));
  min-height: calc(var(--user-frame-bottom-height) - (var(--user-frame-slot-padding) * 2));
  max-height: calc(var(--user-frame-bottom-height) - (var(--user-frame-slot-padding) * 2));
  padding-top: 10px;
  padding-bottom: calc(var(--playback-dock-height) + 12px);
  border-radius: 12px 12px 18px 18px;
  border-top-color: rgb(255 255 255 / 0.06);
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap;
  align-content: flex-start;
}

.user-site-panel-left,
.user-site-panel-right {
  top: calc(var(--user-frame-gap) + var(--user-frame-top-height) + var(--user-frame-slot-padding));
  bottom: calc(var(--user-frame-gap) + var(--user-frame-bottom-height) + var(--user-frame-slot-padding));
  width: calc(var(--user-frame-left-width) - (var(--user-frame-slot-padding) * 2));
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  align-content: flex-start;
}

.user-site-panel-left {
  left: var(--user-frame-gap);
  border-radius: 18px 12px 12px 18px;
  justify-content: flex-start;
  align-items: flex-start;
}

.user-site-panel-right {
  right: var(--user-frame-gap);
  width: calc(var(--user-frame-right-width) - (var(--user-frame-slot-padding) * 2));
  border-radius: 12px 18px 18px 12px;
  justify-content: flex-start;
  align-items: flex-end;
}

.user-builder-empty {
  margin: 0;
  width: 100%;
  min-height: 82px;
  padding: 18px 16px;
  border: 1px dashed rgb(255 255 255 / 0.22);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.02)),
    rgb(255 255 255 / 0.03);
  color: rgb(255 255 255 / 0.76);
  font-size: 0.84rem;
  font-weight: 700;
  text-align: center;
  box-shadow:
    inset 0 2px 8px rgb(0 0 0 / 0.24),
    inset 0 -1px 1px rgb(255 255 255 / 0.04);
  backdrop-filter: blur(4px);
}

.user-site-section {
  display: grid;
  gap: var(--user-layout-subsection-gap, 10px);
  width: min(100%, 296px);
  max-width: 100%;
  max-height: min(28vh, 260px);
  padding: 8px 10px;
  overflow: auto;
  border: var(--user-section-stroke-width) var(--user-section-stroke-style) var(--user-section-stroke-color);
  opacity: var(--user-section-stroke-opacity);
  border-radius: 12px;
  background:
    linear-gradient(rgb(0 0 0 / 0.14), rgb(255 255 255 / 0.02)),
    rgb(255 255 255 / 0.06);
  box-shadow: var(--user-section-shadow);
  backdrop-filter: blur(5px) saturate(110%);
  color: #fff;
  scrollbar-width: thin;
}

.user-site-section[data-edge-align="right"],
.user-site-section[data-edge-align="bottom"] {
  margin-inline-start: auto;
}

.user-site-panel-top .user-site-section,
.user-site-panel-bottom .user-site-section {
  width: min(100%, 100%);
  max-height: min(18vh, 220px);
  flex: 1 1 240px;
}

.user-site-panel-left .user-builder-empty,
.user-site-panel-right .user-builder-empty {
  min-height: 120px;
}

.user-site-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
}

.user-site-section-head strong {
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.user-site-section-head span {
  color: rgb(255 255 255 / 0.62);
  font-size: 0.68rem;
  font-weight: 800;
}

.user-edge-blank-section {
  display: grid;
  align-content: center;
  justify-items: center;
  width: 100%;
  min-height: 64px;
  padding: 12px;
  border: var(--user-section-stroke-width) var(--user-section-stroke-style) var(--user-section-stroke-color);
  border-radius: var(--user-frame-slot-radius);
  background: rgb(255 255 255 / 0.045);
  box-shadow: var(--user-section-shadow);
  color: rgb(255 255 255 / 0.76);
  cursor: context-menu;
  text-align: center;
}

.user-edge-blank-section strong {
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.user-edge-blank-section span {
  color: rgb(255 255 255 / 0.58);
  font-size: 0.7rem;
}

.user-site-section-items {
  display: grid;
  gap: var(--user-layout-setting-gap, 8px);
}

.user-builder-setting-card {
  position: relative;
  display: grid;
  gap: 6px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 12px;
  background:
    linear-gradient(rgb(255 255 255 / 0.08), rgb(0 0 0 / 0.08)),
    rgb(255 255 255 / 0.06);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.08),
    0 8px 18px rgb(0 0 0 / 0.14);
  color: rgb(255 250 240 / 0.94);
  user-select: none;
}

body.users-builder-mode .user-builder-setting-card,
body.users-builder-mode .users-registry-item[data-user-builder-card="true"] {
  cursor: grab;
}

body.users-builder-mode .user-builder-setting-card:active,
body.users-builder-mode .users-registry-item[data-user-builder-card="true"]:active {
  cursor: grabbing;
}

.user-builder-setting-card.is-user-builder-dragging,
.users-registry-item.is-user-builder-dragging {
  opacity: 0.56;
  transform: scale(0.985);
}

.user-builder-setting-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.user-builder-setting-card-title {
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.15;
}

.user-builder-setting-card-type {
  color: rgb(255 255 255 / 0.66);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.user-builder-setting-card-value {
  color: rgb(255 255 255 / 0.86);
  font-size: 0.8rem;
  font-weight: 700;
}

.user-builder-setting-card-meta {
  color: rgb(255 255 255 / 0.58);
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.user-builder-setting-remove {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.24);
  border-radius: 999px;
  background: rgb(31 41 55 / 0.92);
  color: #fff3fb;
  font-size: 0.95rem;
  font-weight: 900;
  box-shadow: 0 8px 18px rgb(0 0 0 / 0.26);
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity 160ms ease,
    transform 180ms ease,
    background-color 160ms ease;
}

.user-builder-setting-card:hover .user-builder-setting-remove,
.user-builder-setting-card:focus-within .user-builder-setting-remove {
  opacity: 1;
  transform: scale(1);
}

.user-builder-setting-remove:hover {
  background: #ff2f8a;
}

.user-site-panel-right .user-builder-setting-remove {
  left: -14px;
  top: 50%;
  transform: translateY(-50%) scale(0.9);
}

.user-site-panel-right .user-builder-setting-card:hover .user-builder-setting-remove,
.user-site-panel-right .user-builder-setting-card:focus-within .user-builder-setting-remove {
  transform: translateY(-50%) scale(1);
}

.user-site-panel-left .user-builder-setting-remove {
  right: -14px;
  top: 50%;
  transform: translateY(-50%) scale(0.9);
}

.user-site-panel-left .user-builder-setting-card:hover .user-builder-setting-remove,
.user-site-panel-left .user-builder-setting-card:focus-within .user-builder-setting-remove {
  transform: translateY(-50%) scale(1);
}

.user-site-panel-top .user-builder-setting-remove {
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%) scale(0.9);
}

.user-site-panel-top .user-builder-setting-card:hover .user-builder-setting-remove,
.user-site-panel-top .user-builder-setting-card:focus-within .user-builder-setting-remove {
  transform: translateX(-50%) scale(1);
}

.user-site-panel-bottom .user-builder-setting-remove {
  left: 50%;
  top: -14px;
  transform: translateX(-50%) scale(0.9);
}

.user-site-panel-bottom .user-builder-setting-card:hover .user-builder-setting-remove,
.user-site-panel-bottom .user-builder-setting-card:focus-within .user-builder-setting-remove {
  transform: translateX(-50%) scale(1);
}

.user-site-setting-row {
  display: grid;
  gap: 3px;
}

.user-site-setting-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.user-site-setting-label {
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.15;
}

.user-site-setting-value {
  min-width: 38px;
  padding: 3px 7px;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.08);
  color: rgb(255 255 255 / 0.82);
  font-size: 0.7rem;
  font-weight: 850;
  text-align: center;
}

.user-site-setting-row input[type="range"],
.user-site-setting-row input[type="color"],
.user-site-setting-row select,
.user-site-setting-row input[type="text"],
.user-site-setting-row textarea {
  width: 100%;
  box-sizing: border-box;
}

.user-site-setting-row input[type="range"] {
  accent-color: color-mix(in srgb, var(--control), #4aa3ff 42%);
  margin: 0;
}

.user-site-setting-row input[type="color"] {
  inline-size: 100%;
  block-size: 28px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 10px;
  background: rgb(255 255 255 / 0.06);
}

.user-site-setting-row select,
.user-site-setting-row input[type="text"],
.user-site-setting-row textarea {
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 10px;
  background: rgb(255 255 255 / 0.9);
  color: #172033;
  font: inherit;
}

.user-site-setting-row textarea {
  min-height: 66px;
  resize: vertical;
}

.user-site-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 6px 8px;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 10px;
  background: rgb(255 255 255 / 0.06);
}

.user-site-checkbox input {
  width: 16px;
  height: 16px;
  accent-color: color-mix(in srgb, var(--control), #4aa3ff 42%);
  margin: 0;
}

.user-site-checkbox span {
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.15;
}

.user-site-setting-unsupported {
  padding: 8px 10px;
  border: 1px dashed rgb(255 255 255 / 0.14);
  border-radius: 10px;
  background: rgb(255 255 255 / 0.04);
  color: rgb(255 255 255 / 0.64);
  font-size: 0.72rem;
  font-weight: 700;
}

@media (max-width: 1180px) {
  .user-site-panel-left,
  .user-site-panel-right {
    width: min(232px, calc(22vw + 18px));
  }

  .user-site-section {
    width: min(100%, 248px);
  }
}

@media (max-width: 900px) {
  .user-site-panel-top {
    top: calc(var(--user-device-margin) + var(--user-frame-slot-padding));
    left: calc(var(--user-device-margin) + var(--user-frame-slot-padding));
    right: calc(var(--user-device-margin) + var(--user-frame-slot-padding));
  }

  .user-site-panel-bottom {
    left: calc(var(--user-device-margin) + var(--user-frame-slot-padding));
    right: calc(var(--user-device-margin) + var(--user-frame-slot-padding));
    bottom: calc(var(--user-device-margin) + var(--user-frame-slot-padding));
  }

  .user-site-panel-left,
  .user-site-panel-right {
    top: calc(var(--user-device-margin) + var(--user-frame-top-height) + var(--user-frame-slot-padding));
    bottom: calc(var(--user-device-margin) + var(--user-frame-bottom-height) + var(--user-frame-slot-padding));
    width: min(198px, calc(22vw + 14px));
  }

  .user-site-section {
    width: min(100%, 210px);
    padding: 8px 9px;
  }
}

.user-preview-button {
  position: relative;
  display: grid;
  align-content: center;
  min-width: 146px;
  min-height: 58px;
  padding: 8px 12px;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: 13px;
  color: #fff;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 9px 22px rgb(0 0 0 / 0.24);
  cursor: pointer;
}

.user-theme-button {
  background:
    radial-gradient(circle at 45% 38%, rgb(255 255 255 / 0.32), transparent 34%),
    repeating-linear-gradient(90deg, rgb(0 0 0 / 0.045) 0 1px, transparent 1px 16px),
    linear-gradient(135deg, var(--stadia-a, #e8ddc2), var(--stadia-b, #7fb1ba));
}

.user-material-button {
  --user-material-color: #6b3f2a;
  background-color: var(--user-material-color);
  background-image: url("assets/textures/pebbled-leather-gray.png"), url("assets/backgrounds/leather.png");
  background-size: 180px 180px, 220px 220px;
  background-blend-mode: multiply;
}

.user-material-button strong {
  order: 1;
}

.user-material-button span {
  order: 2;
  display: block;
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  -webkit-line-clamp: 1;
}

.user-preview-button span {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  max-width: 166px;
  overflow: hidden;
  color: rgb(255 255 255 / 0.88);
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1.05;
  text-shadow: 0 1px 5px rgb(0 0 0 / 0.42);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.user-preview-button strong {
  position: relative;
  z-index: 1;
  max-width: 166px;
  color: currentColor;
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 5px rgb(0 0 0 / 0.42);
}

.user-theme-panel {
  position: absolute;
  top: 72px;
  right: 28px;
  bottom: calc(var(--playback-dock-height) + 18px);
  z-index: 901;
  width: min(920px, calc(100% - 56px));
  padding: 12px;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 18px;
  background-color: var(--leather-color);
  background:
    linear-gradient(rgb(17 24 39 / 0.72), rgb(17 24 39 / 0.66)),
    url("assets/textures/pebbled-leather-gray.png"),
    url("assets/backgrounds/leather.png"),
    var(--leather-color);
  background-size: auto, var(--leather-texture-size), 420px 420px, auto;
  background-blend-mode: normal, var(--leather-blend-mode), multiply, normal;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.12),
    0 18px 42px rgb(0 0 0 / 0.36);
  overflow: auto;
}

.user-theme-panel[hidden] {
  display: none;
}

.user-picker-head {
  position: sticky;
  top: -12px;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: -12px -12px 12px;
  padding: 12px;
  background: rgb(17 24 39 / 0.9);
  color: #fff;
}

.user-picker-head strong {
  display: block;
  font-size: 1.1rem;
  font-weight: 950;
}

.user-picker-head span {
  display: block;
  color: rgb(255 255 255 / 0.72);
  font-size: 0.8rem;
  font-weight: 750;
}

.user-picker-head button {
  min-height: 34px;
  padding: 0 18px;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: 9px;
  background: rgb(255 255 255 / 0.9);
  color: #172033;
  font-weight: 950;
  cursor: pointer;
}

.user-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
  gap: 12px;
}

.user-theme-grid .map-style-card {
  min-height: 124px;
}

@media (min-width: 1200px) {
  .user-theme-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .user-theme-panel {
    left: 14px;
    right: 14px;
    width: auto;
  }

  .user-theme-grid {
    grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
  }
}

/* Story controls sit directly on the Users frame instead of inside a second bar. */
body.user-site-mode .user-map-viewport {
  inset: 35px 35px 78px !important;
  border-radius: 18px;
}

.user-story-dock {
  position: static;
  display: contents;
}

.story-dock-left,
.story-dock-right,
.story-previous,
.story-next {
  position: absolute;
  z-index: 1107;
}

.story-dock-left { left: 8px; bottom: 7px; gap: 6px; }
.story-dock-right { right: 8px; bottom: 20px; gap: 6px; }
.story-dock-left #storyThemeSelect,
.story-dock-right button {
  width: 82px;
  min-height: 40px;
  padding: 4px;
  font-size: .7rem;
  line-height: 1.05;
  white-space: pre-line;
}
.story-dock-left #storyThemeSelect { width: 82px; }
.story-previous {
  left: calc(50% - 104px);
  bottom: 9px;
  width: 52px;
  min-height: 52px !important;
  padding: 0 !important;
  border-radius: 50% !important;
}
.story-next {
  left: 50%;
  bottom: 3px;
  width: 70px;
  min-height: 70px !important;
  padding: 0 !important;
  transform: translateX(-50%);
  border-radius: 50% !important;
  font-size: .68rem !important;
  line-height: 1.06;
  white-space: normal;
}
.random-theme-button {
  width: 68px;
  min-width: 68px;
  min-height: 68px !important;
}
.random-theme-button img {
  display: none;
}
.random-theme-button::after {
  content: "";
  position: absolute;
  inset: 11px 7px;
  background: var(--story-theme-glow);
  -webkit-mask: url("assets/SVG/Truck and RV Outline.svg") center / contain no-repeat;
  mask: url("assets/SVG/Truck and RV Outline.svg") center / contain no-repeat;
  filter: drop-shadow(0 0 6px var(--story-theme-glow));
}

/* Preserve a usable touch layout while retaining the framed story treatment. */
@media (max-width: 760px) {
  body.user-site-mode .user-map-viewport { inset: 28px 8px 76px !important; }
  .story-dock-left #storyThemeSelect, .story-dock-right #storyJourneyView { display: none; }
  .story-dock-right { bottom: 19px; }
}

body.user-site-mode #projectExportStatus { display: none !important; }

.usage-overlay {
  right: 16px;
  bottom: 14px;
  cursor: pointer;
  pointer-events: auto;
  transition: width 220ms ease, min-width 220ms ease, border-radius 220ms ease, transform 220ms ease;
}
.usage-overlay.is-collapsed {
  right: min(360px, calc(100% - 120px));
  bottom: 14px;
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  overflow: hidden;
  border-radius: 50%;
  color: transparent;
}
.usage-overlay.is-collapsed::after {
  content: attr(data-fps);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #111827;
  font-size: .64rem;
}

body.user-site-mode #siteModeToggle {
  top: 35px;
  right: 42px;
  left: auto;
  width: 48px;
  min-height: 58px;
  padding: 4px 6px 9px;
  transform: translateY(-62%);
  border-radius: 0 0 16px 16px;
  font-size: .58rem;
  line-height: 1;
  transition: transform 240ms ease, opacity 240ms ease;
  opacity: .38;
}
body.user-site-mode #siteModeToggle::after {
  content: "◉ ◉";
  display: block;
  margin-top: 5px;
  font-size: .55rem;
  letter-spacing: -2px;
}
body.user-site-mode #siteModeToggle:hover,
body.user-site-mode #siteModeToggle:focus-visible {
  transform: translateY(-14%);
  opacity: .96;
}

.keyframe-marquee { position:absolute; z-index:3; top:0; bottom:0; border:1px solid #f6cb4c; background:#f6cb4c44; pointer-events:none; }
.keyframe-type-menu { position:fixed; z-index:10000; display:grid; min-width:110px; padding:4px; border:1px solid #70889b; border-radius:6px; background:#1f2d38; box-shadow:0 7px 18px #0006; }
.keyframe-type-menu button { min-height:28px; border:0; border-radius:3px; color:#f7f1dc; background:transparent; text-align:left; }
.keyframe-type-menu button:hover, .keyframe-type-menu button.is-active { background:#49677c; }

/* Keep the two visual anchors truly round after shared button rules apply. */
#storyNext {
  width: 70px !important;
  height: 70px !important;
  min-height: 70px !important;
  border-radius: 50% !important;
}
#randomThemeButton {
  width: 68px !important;
  height: 68px !important;
  min-width: 68px !important;
  min-height: 68px !important;
  border-radius: 50% !important;
}

/* Story controls exist only for the actual USER experience or the Users editor. */
body:not(.user-site-mode):not(.users-builder-mode) #userStoryDock {
  display: none !important;
}

body.user-site-mode #userThemePanel:not([hidden]) {
  display: block !important;
  top: 35px;
  right: auto;
  bottom: 78px;
  left: 35px;
  width: calc((100% - 70px) / 5);
  max-width: none;
  overflow: auto;
  border-radius: 0 16px 16px 0;
}

/* A dark, theme-tinted well keeps the bright route glyph legible in every theme. */
#randomThemeButton {
  background: color-mix(in srgb, var(--story-theme-glow), #06111d 78%) !important;
}
#randomThemeButton::after {
  background: color-mix(in srgb, var(--story-theme-glow), white 58%);
  filter: drop-shadow(0 0 7px var(--story-theme-glow));
}

@media (max-width: 760px) {
  body.user-site-mode #userThemePanel:not([hidden]) {
    top: 28px;
    bottom: 76px;
    left: 8px;
    width: min(76vw, 300px);
  }
}

.user-material-panel {
  position: absolute;
  top: 64px;
  right: 78px;
  z-index: 904;
  display: grid;
  width: 220px;
  gap: 7px;
  padding: 9px;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 14px;
  background: rgb(17 24 39 / 0.88);
  box-shadow: 0 14px 32px rgb(0 0 0 / 0.34);
}

.user-material-panel[hidden] {
  display: none;
}

.user-material-choice {
  --user-material-color: #6b3f2a;
  display: grid;
  min-height: 48px;
  padding: 7px 10px;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 10px;
  background-color: var(--user-material-color);
  background-image: url("assets/textures/pebbled-leather-gray.png"), url("assets/backgrounds/leather.png");
  background-size: 180px 180px, 220px 220px;
  background-blend-mode: multiply;
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.user-material-choice[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px #fff;
}

.user-material-choice strong {
  font-size: 0.98rem;
  font-weight: 950;
  line-height: 1;
}

.user-material-choice span {
  font-size: 0.68rem;
  font-weight: 800;
  opacity: 0.78;
  text-transform: uppercase;
}

.map-canvas {
  position: absolute;
  inset: 0 0 var(--playback-dock-height);
  width: 100%;
  height: auto;
}

.welcome-gate {
  position: absolute;
  inset: 0 0 var(--playback-dock-height);
  z-index: 1200;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 18px;
  padding: clamp(26px, 5vh, 52px) 24px 24px;
  background-color: var(--leather-color);
  background-image:
    radial-gradient(circle at center, rgb(255 253 248 / 0.04), transparent 58%),
    url("assets/textures/pebbled-leather-gray.png"),
    url("assets/backgrounds/leather.png");
  background-repeat: no-repeat, repeat, repeat;
  background-position: center, 0 0, 0 0;
  background-size: 100% 100%, var(--leather-texture-size), 420px 420px;
  background-blend-mode: screen, var(--leather-blend-mode), multiply;
  transition: opacity 600ms ease;
}

.welcome-gate.is-dismissed {
  opacity: 0;
  pointer-events: none;
  animation: welcome-circle-wipe 950ms cubic-bezier(0.22, 0.84, 0.3, 1) both;
}

.welcome-card {
  display: grid;
  gap: 12px;
  width: min(580px, calc(100vw - 44px));
  padding: 26px;
  color: #fff;
  text-align: center;
}

.welcome-card > img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
  transition: opacity 220ms ease;
}

.welcome-card > img.is-changing { opacity: 0; }

.welcome-gate-actions { display: grid; gap: 10px; font-weight: 800; }
.welcome-gate-actions > div { display: flex; gap: 10px; }
.welcome-gate-actions button { flex: 1; transition: transform 160ms ease, opacity 160ms ease; }
.welcome-gate-actions button:hover:not(:disabled) { transform: translateY(-2px); }

.welcome-card strong {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 950;
}

.welcome-card > span {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 800;
}

.welcome-card small {
  color: rgb(255 255 255 / 0.84);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
}

.welcome-progress {
  height: 14px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: 999px;
  background: rgb(0 0 0 / 0.24);
}

.welcome-progress span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #88d7ff, #e9d36d, #9bdc8a);
  transition: width 260ms ease;
}

.welcome-gate.is-ready .welcome-progress span {
  width: 100%;
}

.welcome-card button {
  min-height: 42px;
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: 10px;
  background: #25313d;
  color: #fff;
  font-weight: 950;
  cursor: pointer;
}

.welcome-card button:disabled {
  background: #8e969d;
  color: rgb(255 255 255 / 0.72);
  cursor: wait;
}

.story-navigation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.story-navigation > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}

.story-navigation button {
  min-width: 0;
  padding: 6px 4px;
  font-size: 0.72rem;
}

.user-story-dock {
  --story-theme-glow: #65d9ff;
  display: contents;
}

.user-story-dock button {
  min-height: 38px;
  border: 1px solid rgb(255 255 255 / .35);
  border-radius: 11px;
  background: rgb(255 253 248 / .94);
  color: #18222e;
  font-weight: 900;
}

.user-story-dock button:disabled { opacity: .38; cursor: not-allowed; }
.story-dock-left, .story-dock-right { display: flex; align-items: center; gap: 7px; }
.story-previous { font-size: 2rem; line-height: 1; }
.story-next { min-height: 52px !important; background: color-mix(in srgb, var(--story-theme-glow), white 22%) !important; color: #10202e !important; font-size: 1.05rem; box-shadow: 0 0 18px color-mix(in srgb, var(--story-theme-glow), transparent 50%); }
.random-theme-button { position: relative; width: 68px; min-width: 68px; min-height: 68px !important; padding: 4px !important; overflow: visible; border-radius: 50% !important; background: #1b2028 !important; box-shadow: inset 2px 2px 0 #7d7c7e, inset -2px -2px 0 #1c1c1c, 0 0 16px var(--story-theme-glow) !important; }
.random-theme-button::before { content: ""; position: absolute; inset: -5px; z-index: -1; border-radius: inherit; background: radial-gradient(circle, color-mix(in srgb, var(--story-theme-glow), transparent 28%), transparent 70%); opacity: .9; transition: opacity 360ms ease; }
.random-theme-button img { width: 29px; height: 29px; object-fit: contain; filter: brightness(2.6) saturate(1.35) drop-shadow(0 0 6px var(--story-theme-glow)); }
.random-theme-button.theme-glow-refresh::before { animation: story-theme-glow 680ms ease both; }
@keyframes story-theme-glow { 0% { opacity: .9; transform: scale(1); } 42% { opacity: 0; transform: scale(.76); } 100% { opacity: .9; transform: scale(1); } }

body.user-site-mode .welcome-gate {
  inset: 0 0 86px;
  z-index: 1100;
  overflow: auto;
}

body.user-site-mode #userThemePanel:not([hidden]) {
  display: block !important;
  z-index: 1120;
  bottom: 94px;
}

@media (max-width: 760px) {
  .user-story-dock { grid-template-columns: 42px 35px minmax(100px, 1fr) auto; gap: 5px; left: 6px; right: 6px; bottom: 6px; padding: 6px; }
  .story-dock-left #storyThemeSelect, .story-dock-right #storyJourneyView { display: none; }
  .story-dock-right button { min-width: 54px; font-size: .68rem; }
}

.welcome-copy-panel {
  width: min(860px, calc(100vw - 72px));
  padding: 26px 30px;
  color: #fffdf8;
}

.welcome-copy-panel h2 {
  margin: 0 0 12px;
  font-size: 1.2rem;
  font-weight: 900;
}

.welcome-copy-panel p {
  margin: 0 0 14px;
  color: rgb(255 255 255 / 0.9);
  font-size: 0.98rem;
  font-weight: 620;
  line-height: 1.62;
}

.welcome-copy-panel p:last-child {
  margin-bottom: 0;
}

@keyframes welcome-circle-wipe {
  0% {
    -webkit-mask-image: radial-gradient(circle at center, transparent 0%, #000 2%);
    mask-image: radial-gradient(circle at center, transparent 0%, #000 2%);
  }
  55% {
    -webkit-mask-image: radial-gradient(circle at center, transparent 44%, #000 58%);
    mask-image: radial-gradient(circle at center, transparent 44%, #000 58%);
  }
  100% {
    -webkit-mask-image: radial-gradient(circle at center, transparent 130%, #000 150%);
    mask-image: radial-gradient(circle at center, transparent 130%, #000 150%);
  }
}

.maplibre-basemap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--land);
}

.maplibre-basemap[hidden] {
  display: none;
}

.maplibre-basemap .maplibregl-canvas,
.maplibre-basemap .maplibregl-canvas-container {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.maplibre-basemap .maplibregl-control-container {
  display: none;
}

.street-vector-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 302;
  pointer-events: none;
  background: transparent;
  overflow: hidden;
  opacity: 0;
  transition: opacity 160ms ease;
  --vector-overlay-opacity: 1;
}

.street-vector-overlay.is-ready {
  opacity: var(--vector-overlay-opacity);
}

.street-vector-overlay .maplibregl-canvas,
.street-vector-overlay .maplibregl-canvas-container {
  background: transparent !important;
}

.street-vector-overlay .maplibregl-canvas {
  display: block;
  outline: 0;
}

.map-canvas {
  z-index: 1;
  background: transparent;
}

.leaflet-container {
  background: transparent;
}

.map-canvas.using-maplibre-basemap .leaflet-pane.leaflet-tile-pane,
.map-canvas.using-maplibre-basemap .leaflet-pane.leaflet-topography-pane,
.map-canvas.using-maplibre-basemap .leaflet-pane.leaflet-ocean-pane,
.map-canvas.using-maplibre-basemap .leaflet-pane.leaflet-land-pane,
.map-canvas.using-maplibre-basemap .leaflet-pane.leaflet-water-pane,
.map-canvas.using-maplibre-basemap .leaflet-pane.leaflet-street-pane,
.map-canvas.using-maplibre-basemap .leaflet-pane.leaflet-street-vector-pane,
.map-canvas.using-maplibre-basemap .leaflet-pane.leaflet-road-basemap-pane,
.map-canvas.using-maplibre-basemap .leaflet-pane.leaflet-roadBasemapPane-pane {
  opacity: 0 !important;
  pointer-events: none !important;
}

.leaflet-roadBasemapPane-pane,
.leaflet-road-basemap-pane {
  z-index: 205 !important;
  opacity: 1 !important;
  pointer-events: none;
}

.map-canvas.using-maplibre-basemap .map-theme-overlay,
.map-canvas.using-maplibre-basemap .topography-tint-overlay,
.map-canvas.using-maplibre-basemap::after {
  opacity: 0 !important;
  display: none !important;
}

.map-canvas.is-camera-moving .map-theme-overlay,
.map-canvas.is-camera-moving .map-layer-texture-overlay,
.map-canvas.is-camera-moving .topography-tint-overlay,
.map-canvas.is-camera-moving::after {
  opacity: 0 !important;
}

.map-canvas.is-camera-transitioning .maplibre-basemap,
.map-canvas.is-camera-transitioning .leaflet-overlay-pane,
.map-canvas.is-camera-transitioning .leaflet-marker-pane,
.map-canvas.is-camera-transitioning .leaflet-shadow-pane,
.map-canvas.is-camera-transitioning .leaflet-tooltip-pane,
.map-canvas.is-camera-transitioning .map-layer-texture-overlay {
  transition: opacity 260ms ease, filter 260ms ease;
}

.map-canvas.is-camera-fading-out .maplibre-basemap,
.map-canvas.is-camera-fading-out .leaflet-overlay-pane,
.map-canvas.is-camera-fading-out .leaflet-marker-pane,
.map-canvas.is-camera-fading-out .leaflet-shadow-pane,
.map-canvas.is-camera-fading-out .leaflet-tooltip-pane,
.map-canvas.is-camera-fading-out .map-layer-texture-overlay {
  opacity: 0.42;
  filter: blur(1px);
}

.map-canvas.is-camera-fading-in .maplibre-basemap,
.map-canvas.is-camera-fading-in .leaflet-overlay-pane,
.map-canvas.is-camera-fading-in .leaflet-marker-pane,
.map-canvas.is-camera-fading-in .leaflet-shadow-pane,
.map-canvas.is-camera-fading-in .leaflet-tooltip-pane,
.map-canvas.is-camera-fading-in .map-layer-texture-overlay {
  opacity: 1;
  filter: blur(0);
}

.map-canvas.is-zooming-in .maplibre-basemap,
.map-canvas.is-zooming-in .leaflet-overlay-pane,
.map-canvas.is-zooming-in .leaflet-marker-pane,
.map-canvas.is-zooming-in .leaflet-shadow-pane,
.map-canvas.is-zooming-in .leaflet-tooltip-pane {
  filter: blur(0.7px);
}

.leaflet-route-stroke {
  transition: stroke-width 180ms ease, stroke-opacity 180ms ease, stroke 180ms ease;
}

.map-theme-overlay {
  position: absolute;
  inset: 0;
  z-index: 350;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
}

.map-layer-texture-overlay {
  position: absolute;
  inset: 0;
  z-index: var(--layer-texture-z, 352);
  pointer-events: none;
  opacity: 0;
  background: none;
  mix-blend-mode: normal;
  transition: opacity 160ms ease;
}

.topography-tint-overlay {
  position: absolute;
  inset: 0;
  z-index: 241;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: multiply;
  transition: opacity 160ms ease;
}

.map-theme-overlay.route-theme-watercolor {
  opacity: var(--route-theme-texture-opacity);
  mix-blend-mode: multiply;
  background:
    radial-gradient(circle at 20% 16%, rgb(var(--route-theme-land-a) / 0.22), transparent 18%),
    radial-gradient(circle at 78% 72%, rgb(var(--route-theme-land-b) / 0.14), transparent 22%),
    repeating-radial-gradient(ellipse at 50% 50%, transparent 0 13px, rgb(var(--route-theme-land-b) / 0.10) 14px 15px, transparent 16px 28px),
    repeating-linear-gradient(18deg, rgb(70 43 25 / 0.035) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(101deg, rgb(255 255 255 / 0.05) 0 1px, transparent 1px 9px);
  background-size: 233px 211px, 311px 277px, 260px 180px, 96px 96px, 128px 128px;
}

.street-line-tiles {
  mix-blend-mode: normal;
  opacity: var(--road-zoom-opacity, 1);
  transition: opacity 140ms linear;
}

.map-canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 351;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: color-burn;
  transition: opacity 160ms ease;
}

.map-canvas:has(.map-theme-overlay.route-theme-watercolor)::after {
  opacity: 0.2;
  background:
    repeating-linear-gradient(0deg, rgb(var(--route-theme-water-a) / 0.12) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgb(var(--route-theme-water-b) / 0.10) 0 1px, transparent 1px 7px);
  background-size: 104px 104px, 142px 142px;
}

.map-theme-overlay.stadia-style-tinted {
  opacity: calc(0.12 + var(--stadia-topo-blend) * 0.5);
  background:
    linear-gradient(135deg, rgb(var(--stadia-map-a-rgb) / 0.74), rgb(var(--stadia-map-b-rgb) / 0.7)),
    radial-gradient(circle at 24% 18%, rgb(var(--stadia-map-a-rgb) / 0.72), transparent 38%),
    radial-gradient(circle at 72% 76%, rgb(var(--stadia-map-b-rgb) / 0.68), transparent 42%),
    repeating-radial-gradient(ellipse at 50% 50%, transparent 0 14px, rgba(0, 0, 0, calc(var(--stadia-topo-contours) * 0.16)) 15px 16px, transparent 17px 28px);
  mix-blend-mode: color;
}

.map-theme-overlay.stadia-style-plastic {
  opacity: 0.42;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.08) 22%, transparent 42%),
    radial-gradient(circle at 23% 18%, rgba(255, 255, 255, 0.48), transparent 18%),
    radial-gradient(circle at 72% 78%, rgba(39, 194, 255, 0.18), transparent 26%),
    repeating-radial-gradient(ellipse at 50% 50%, transparent 0 12px, rgba(0, 0, 0, calc(var(--stadia-topo-contours) * 0.22)) 13px 14px, transparent 15px 24px);
  filter: blur(calc(var(--stadia-topo-blend) * 2px));
  mix-blend-mode: soft-light;
}

.us-view-button {
  position: absolute;
  bottom: calc(var(--playback-dock-height) + 18px);
  left: 16px;
  z-index: 820;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  place-items: center;
  min-width: 148px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--control), #ffffff 28%);
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--control), #ffffff 24%), var(--control));
  color: var(--control-text);
  box-shadow: 0 12px 28px rgba(31, 41, 51, 0.28), inset 0 1px 0 rgb(255 255 255 / 0.36);
  font-weight: 900;
  cursor: pointer;
}

.map-control-cluster {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 825;
  display: grid;
  grid-template-columns: 44px 76px 76px;
  grid-template-rows: 42px 38px;
  gap: 0;
  filter: drop-shadow(0 8px 18px rgba(31, 41, 51, 0.16));
}

.map-control-cluster button {
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--line), var(--ink) 10%);
  background: rgba(255, 253, 248, 0.94);
  color: var(--control);
  font-weight: 900;
  cursor: pointer;
}

.map-control-cluster button:hover {
  background: #ffffff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--control), transparent 68%);
}

.map-control-cluster button.is-lock-enabled {
  background: color-mix(in srgb, var(--control), #ffffff 86%);
  color: color-mix(in srgb, var(--control), #000 8%);
}

.map-feature-toolbar {
  position: absolute;
  top: 16px;
  left: 224px;
  z-index: 826;
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--line), var(--ink) 8%);
  border-radius: 12px;
  background: rgb(255 253 248 / 0.9);
  box-shadow: 0 10px 24px rgb(31 41 51 / 0.14);
  backdrop-filter: blur(7px);
}

.map-feature-toolbar button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-height: 0;
  padding: 3px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line), var(--ink) 12%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel), #fff 18%);
  color: var(--ink);
  cursor: pointer;
}

.map-feature-toolbar button:hover {
  border-color: var(--control);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--control), transparent 74%);
}

.map-feature-toolbar button.is-disabled-state {
  opacity: 0.43;
  filter: grayscale(0.8);
}

.map-feature-toolbar .music-track-button {
  --music-note-color: var(--control);
  position: relative;
  overflow: visible;
  border-radius: 50%;
  background: color-mix(in srgb, var(--panel), var(--control) 13%);
  box-shadow: 0 0 15px color-mix(in srgb, var(--music-note-color), transparent 72%), inset 0 0 0 1px color-mix(in srgb, var(--control), #fff 26%);
}

.music-track-button .material-symbols-rounded {
  position: relative;
  z-index: 1;
  font-size: 28px;
  color: var(--music-note-color);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--music-note-color), #fff 24%)) drop-shadow(0 0 10px color-mix(in srgb, var(--music-note-color), transparent 28%));
}

.music-track-button::before {
  content: "";
  position: absolute;
  inset: -7px;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(circle, color-mix(in srgb, var(--music-note-color), transparent 48%), transparent 69%);
  filter: blur(5px);
  opacity: .72;
  pointer-events: none;
}

.music-track-button.is-unassigned { opacity: .48; }
.music-track-button.is-unassigned .material-symbols-rounded { color: color-mix(in srgb, var(--ink), transparent 42%); filter: none; }
.music-track-button.is-unassigned::before { opacity: .14; }

.music-scope-selectors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}

.music-scope-selectors label { display: grid; gap: 2px; min-width: 0; color: var(--muted); font-size: .73rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.music-scope-selectors select { min-width: 0; color: var(--ink); font: inherit; font-size: .82rem; text-transform: none; letter-spacing: normal; }
.music-scope-selectors label:first-child { grid-column: 1 / -1; }
.music-assignment-editor .sfx-assignment-row { margin-top: 2px; }

.map-feature-toolbar .route-endpoint-marker-frame,
.map-feature-toolbar .route-playback-icon-frame {
  transform: scale(0.82);
}

.map-feature-toolbar svg {
  width: 100%;
  height: 100%;
}

.feature-stop-name-icon {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 24px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 1px 5px rgb(31 41 51 / 0.2);
  font-size: 0.82rem;
  font-weight: 950;
}

.map-control-cluster #zoomIn {
  grid-column: 1;
  grid-row: 1;
  border-radius: 10px 0 0 0;
}

.map-control-cluster #zoomOut {
  grid-column: 1;
  grid-row: 2;
  border-top: 0;
  border-radius: 0 0 0 10px;
}

.map-control-cluster #resetView {
  grid-column: 2;
  grid-row: 1;
  border-left: 0;
  border-radius: 0;
}

.map-control-cluster #setMapView {
  grid-column: 3;
  grid-row: 1;
  border-left: 0;
  border-radius: 0 10px 0 0;
}

.map-control-cluster :is(#resetView, #setMapView) {
  padding: 3px 7px;
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.05;
  text-wrap: balance;
}

.map-pan-row {
  display: grid;
  grid-column: 2 / 4;
  grid-row: 2;
  grid-template-columns: repeat(2, 76px);
  gap: 0;
}

.terminology-control-grid,
.compact-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 8px;
}

.terminology-control-grid label {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  font-size: 0.73rem;
  font-weight: 850;
}

.terminology-control-grid input {
  min-width: 0;
  height: 30px;
  padding: 3px 6px;
}

.compact-section-note {
  margin: 0 0 7px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.2;
}

.journey-style-identity-row,
.sticker-global-row,
.compact-shape-size-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(112px, 0.44fr);
  gap: 8px;
  align-items: end;
}

.compact-color-control {
  display: grid;
  grid-template-columns: 1fr 42px;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 850;
}

.compact-color-control input[type="color"] {
  width: 42px;
  height: 30px;
}

.compact-check-grid {
  margin: 7px 0 0;
  padding: 6px 8px 7px;
  border: 1px solid color-mix(in srgb, var(--line), transparent 18%);
  border-radius: 7px;
}

.compact-check-grid legend {
  padding: 0 4px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.compact-check-grid label {
  display: flex;
  gap: 5px;
  align-items: center;
  min-width: 0;
  font-size: 0.72rem;
  font-weight: 760;
}

.compact-shape-size-row {
  grid-template-columns: minmax(108px, 0.36fr) minmax(0, 1fr);
}

.journey-outline-controls {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 6px 8px;
  align-items: end;
  margin-top: 7px;
}

.journey-outline-controls > :first-child {
  grid-row: 1 / 3;
  align-self: center;
}

.compact-shape-slider.range-control {
  grid-template-columns: 66px minmax(0, 1fr) 34px;
}

.sticker-library {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 6px;
}

.sticker-create-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(98px, 0.38fr) auto;
  gap: 7px;
  align-items: end;
  margin-top: 7px;
}

.sticker-create-row button {
  min-height: 30px;
}

.sticker-library-item {
  display: grid;
  grid-template-rows: 54px auto;
  place-items: center;
  min-height: 78px;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--line), transparent 12%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel), #fff 18%);
  cursor: grab;
}

.sticker-library-item img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  pointer-events: none;
}

.sticker-library-item span {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.66rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sticker-selection-controls {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.sticker-selection-controls[hidden] { display: none; }

/* Compact CapCut-inspired timing lanes for route-attached media and stickers. */
.timeline-section { display: grid; gap: 8px; }
.route-timeline { display: grid; gap: 5px; padding: 8px; border: 1px solid color-mix(in srgb, var(--line), #172330 22%); border-radius: 9px; background: #202a34; color: #edf4f7; }
.timeline-track { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 6px; min-height: var(--timeline-track-height, 44px); }
.timeline-track > span { font-size: .63rem; font-weight: 850; text-transform: uppercase; color: #a9c1ce; }
.timeline-lane { position: relative; height: calc(var(--timeline-track-height, 44px) - 6px); border-radius: 5px; background: repeating-linear-gradient(90deg, #344551 0 1px, transparent 1px 20%); box-shadow: inset 0 0 0 1px #ffffff1c; }
.timeline-sticker-block { position: absolute; top: 3px; display: inline-flex; align-items: center; gap: 5px; width: 11%; min-width: 52px; height: calc(100% - 6px); overflow: hidden; padding: 2px 5px; border: 1px solid #9ce9d3; border-radius: 4px; background: #287660; color: white; cursor: ew-resize; font-size: .64rem; font-weight: 850; text-align: left; }
.timeline-sticker-block img { width: auto; height: calc(100% - 4px); aspect-ratio: 1; object-fit: contain; }.timeline-sticker-block span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.timeline-empty { color: #b4c2c8; font-size: .7rem; }
.timeline-sticker-block.is-selected, .timeline-sticker-block.is-hovered, .map-sticker-frame.is-hovered { outline: 3px solid #ffcf46; outline-offset: 2px; box-shadow: 0 0 0 5px rgb(255 207 70 / .26); }
.sticker-animation-head { display: flex; align-items: center; justify-content: space-between; gap: 7px; }.sticker-animation-head select { max-width: 58%; }
.sticker-animation-preview { display: grid; place-items: center; min-height: 112px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(135deg, color-mix(in srgb, var(--surface), #172330 14%), color-mix(in srgb, var(--panel), #172330 32%)); }
.sticker-animation-preview img { width: 76px; height: 76px; object-fit: contain; opacity: var(--preview-opacity); transform: rotate(var(--preview-rotation)) scale(var(--preview-scale)); animation-duration: var(--preview-duration); animation-iteration-count: infinite; animation-direction: alternate; }
.sticker-animation-preview img.is-fade { animation-name: sticker-fade; }.sticker-animation-preview img.is-bounce { animation-name: sticker-bounce; }.sticker-animation-preview img.is-drop { animation-name: sticker-drop; }.sticker-animation-preview img.is-pop { animation-name: sticker-pop; }
.sticker-animation-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }.sticker-animation-controls > button { min-height: 30px; font-size: .68rem; }
.keyframe-control { grid-template-columns: minmax(52px, auto) auto minmax(48px, 1fr) 24px !important; }.keyframe-control button { min-width: 24px; min-height: 24px; padding: 0; color: #ffd36d; background: #263440; border-color: #526979; }
.sticker-keyframe-tracks { display: grid; gap: 3px; padding-top: 6px; border-top: 1px solid var(--line); }.sticker-keyframe-track { display: grid; grid-template-columns: 18px 54px minmax(0, 1fr); align-items: center; gap: 5px; min-height: 24px; color: var(--muted); font-size: .66rem; }.sticker-keyframe-track > span { color: var(--control); font-size: .86rem; text-align: center; }.sticker-keyframe-track strong { text-transform: capitalize; }.keyframe-lane { position: relative; height: 18px; border-radius: 3px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--line), transparent 20%) 0 1px, transparent 1px 20%); }.keyframe-lane::after { content:""; position:absolute; left:var(--keyframe-playhead, 0%); top:-3px; bottom:-3px; width:2px; background:#ed5c39; transform:translateX(-1px); pointer-events:none; }.sticker-keyframe { position: absolute; z-index:1; top: 3px; width: 12px; height: 12px; min-height: 12px !important; padding: 0 !important; border: 1px solid #fff5b9 !important; border-radius: 2px !important; background: #e3a92f !important; transform: translateX(-50%) rotate(45deg); cursor: ew-resize; }.sticker-keyframe.is-selected { background:#f153a2 !important; border-color:#fff !important; box-shadow:0 0 0 3px #f153a277; }
@keyframes sticker-fade { from { opacity: .05; } to { opacity: var(--preview-opacity); } } @keyframes sticker-bounce { from { transform: translateY(28px) rotate(var(--preview-rotation)) scale(var(--preview-scale)); } to { transform: translateY(0) rotate(var(--preview-rotation)) scale(var(--preview-scale)); } } @keyframes sticker-drop { from { opacity: .1; transform: translateY(-34px) rotate(var(--preview-rotation)) scale(var(--preview-scale)); } to { opacity: var(--preview-opacity); transform: translateY(0) rotate(var(--preview-rotation)) scale(var(--preview-scale)); } } @keyframes sticker-pop { from { transform: rotate(var(--preview-rotation)) scale(.12); } to { transform: rotate(var(--preview-rotation)) scale(var(--preview-scale)); } }

.project-export-status {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 1600;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(520px, calc(100vw - 24px));
  padding: 6px 7px 6px 10px;
  border: 1px solid color-mix(in srgb, var(--line), var(--ink) 14%);
  border-radius: 10px;
  background: rgb(255 253 248 / 0.94);
  box-shadow: 0 8px 22px rgb(31 41 51 / 0.22);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 800;
  backdrop-filter: blur(7px);
}

.project-export-status.has-unsaved-changes {
  border-color: #e85d24;
  background: #fff0df;
  color: #8b2608;
}

.project-export-status button {
  min-height: 30px;
  padding: 3px 10px;
  white-space: nowrap;
}

.save-all-options label.has-unexported-change {
  border-left: 5px solid #e85d24;
  background: #fff0df;
  color: #8b2608;
  font-weight: 900;
}

.map-sticker-icon {
  background: transparent;
  border: 0;
}

.map-sticker-frame {
  width: 100%;
  height: 100%;
  cursor: grab;
  filter: drop-shadow(0 3px 3px rgb(31 41 51 / 0.28));
}

.welcome-message {
  max-width: 46ch;
  margin: -2px auto 2px;
  color: rgb(255 255 255 / 0.9);
  font-size: clamp(0.98rem, 1.8vw, 1.12rem);
  font-weight: 650;
  line-height: 1.42;
}
.sticker-library.is-expanded { max-height: none; overflow: visible; }
.map-sticker-frame.is-fade { animation: sticker-fade var(--sticker-animation-duration, .5s) ease-out both; }
.map-sticker-frame.is-bounce { animation: sticker-bounce var(--sticker-animation-duration, .5s) cubic-bezier(.18,.9,.34,1.4) both; }
.map-sticker-frame.is-drop { animation: sticker-drop var(--sticker-animation-duration, .5s) ease-out both; }
.map-sticker-frame.is-pop { animation: sticker-pop var(--sticker-animation-duration, .5s) cubic-bezier(.2,.9,.3,1.2) both; }
.map-sticker-frame { --preview-opacity: var(--sticker-animation-opacity, 1); --preview-scale: var(--sticker-animation-scale, 1); --preview-rotation: var(--sticker-animation-rotation, 0deg); }

.map-sticker-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.map-sticker-frame.is-selected {
  outline: 3px solid #e84f9a;
  outline-offset: 3px;
  border-radius: 8px;
}

.map-sticker-frame.is-hover-only:not(:hover) { opacity: 0.08; }

/* Shared sound-effect editors */
.sfx-section-toolbar,
.sticker-sfx-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 7px;
}
.sfx-section-toolbar p { margin: 0; color: var(--panel-muted, #667); font-size: .76rem; }
.sfx-section-toolbar label,
.sticker-sfx-toolbar label { display: flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 800; }
.sfx-event-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 5px; }
.sfx-event-list h3 { grid-column: 1 / -1; margin: 5px 0 0; padding-top: 5px; border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.sfx-assignment-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px; padding: 5px 6px; border: 1px solid color-mix(in srgb, currentColor 24%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--panel-bg, #fff) 78%, transparent); }
.sfx-assignment-row[draggable="true"] { cursor: grab; }
.sfx-assignment-heading { min-width: 0; display: grid; line-height: 1.1; }
.sfx-assignment-heading strong { font-size: .73rem; }
.sfx-assignment-heading span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--panel-muted, #667); font-size: .66rem; }
.sfx-assignment-actions { display: flex; gap: 3px; }
.sfx-assignment-actions button { min-height: 26px; padding: 3px 6px; font-size: .68rem; }
.sfx-assignment-actions button:last-of-type { width: 28px; padding-inline: 2px; }
.sticker-sfx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 5px; max-height: 230px; overflow: auto; }
.sticker-sfx-grid.is-expanded { max-height: none; overflow: visible; }
.sticker-sfx-tile { position: relative; display: grid; place-items: center; gap: 2px; min-width: 0; padding: 5px; }
.sticker-sfx-tile img { width: 46px; height: 46px; object-fit: contain; }
.sticker-sfx-tile span { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .68rem; }
.sticker-sfx-tile i { position: absolute; right: 4px; top: 2px; color: #28733b; font-style: normal; }
.sticker-sfx-tile.is-selected { outline: 2px solid #cf3d86; outline-offset: -2px; }
.sticker-sfx-editor { display: grid; gap: 5px; margin-top: 7px; }
.users-gizmo-sfx-section { display: grid; gap: 5px; }
.users-gizmo-sfx-section.is-compact { grid-column: 1 / -1; padding-top: 5px; border-top: 1px solid color-mix(in srgb, currentColor 24%, transparent); }
.users-gizmo-sfx-section.is-compact .sfx-assignment-row { padding: 3px 4px; }
.sfx-consent-dialog { position: fixed; inset: 0; z-index: 200000; display: grid; place-items: center; padding: 20px; background: rgb(10 15 20 / .62); backdrop-filter: blur(5px); }
.sfx-consent-dialog[hidden] { display: none; }
.sfx-consent-card { width: min(430px, calc(100vw - 32px)); padding: 18px; border: 2px solid #fff7df; border-radius: 16px; background: #263440; color: #fff; box-shadow: 0 18px 60px #0008; }
.sfx-consent-card strong { font-size: 1.15rem; }
.sfx-consent-card p { line-height: 1.45; }
.sfx-consent-card > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Denser Route controls: values travel with their sliders instead of consuming a line. */
.panel-section .range-control {
  grid-template-columns: minmax(72px, auto) auto minmax(72px, 1fr);
  gap: 6px;
}
.panel-section .range-control output {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  margin: 0;
  color: var(--ink);
  font-weight: 850;
}
.panel-section .range-control output::before { content: ": "; }
.panel-section .range-control input { grid-column: 3; grid-row: 1; min-width: 0; }

/* Keep the main animation controls immediately after the icon editor. */
#panelMapUi .marker-controls-section { order: 18; }
#panelMapUi .route-animation-icon-section { order: 19; }
#panelMapUi .route-animation-section { order: 20; }
.trip-animation-icon-settings { display: grid; gap: 7px; }
.trip-animation-icon-settings summary { cursor: pointer; color: var(--ink); font-weight: 850; }
.trip-animation-icon-settings p { margin: 0; color: var(--muted); font-size: .7rem; }
.trip-animation-icon-preview-wrap { display: grid; place-items: center; min-height: 84px; border: 1px dashed var(--line); border-radius: 8px; background: color-mix(in srgb, var(--surface), transparent 30%); }
.trip-animation-icon-preview-wrap .route-animation-icon-preview { min-height: 76px; }

.playback-panel { grid-template-columns: minmax(110px, 160px) minmax(110px, 220px) minmax(110px, 160px) auto auto; }
.trip-animation-launch { grid-column: 2 / 4; transform-origin: right center; transition: grid-column 220ms ease, transform 220ms cubic-bezier(.2,.9,.25,1.2), box-shadow 220ms ease; }
.trip-animation-launch.is-running { grid-column: auto; min-width: 86px; background: #b9384b; border-color: #b9384b; box-shadow: 0 0 0 4px color-mix(in srgb, #ff9b8a, transparent 64%); transform: translateX(2px) scale(.97); }
.route-playback-speed-select { display: grid; justify-items: stretch; gap: 3px; min-width: 158px; }
.route-playback-speed-buttons { display: grid; grid-template-columns: repeat(5, minmax(26px, 1fr)); gap: 3px; padding: 0 10px; position: relative; }
.route-playback-speed-buttons::before,
.route-playback-speed-buttons::after { content: ""; position: absolute; top: 3px; bottom: 3px; width: 7px; border-block: 2px solid var(--control); }
.route-playback-speed-buttons::before { left: 0; border-left: 2px solid var(--control); }
.route-playback-speed-buttons::after { right: 0; border-right: 2px solid var(--control); }
.route-playback-speed-buttons button { min-width: 0; min-height: 29px; padding: 2px 5px; font-variant-numeric: tabular-nums; }
.route-playback-speed-buttons button.is-active { color: var(--control-text); background: var(--control); border-color: var(--control); transform: translateY(-1px); box-shadow: 0 3px 8px color-mix(in srgb, var(--control), transparent 68%); }
.route-playback-speed-caption { color: var(--muted); font-size: .68rem; font-weight: 850; letter-spacing: .08em; text-align: center; text-transform: uppercase; }

.texture-choice[aria-pressed="true"] { outline: 3px solid color-mix(in srgb, var(--control), #ffcf46 44%); outline-offset: -3px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--control), transparent 72%), 0 0 20px color-mix(in srgb, var(--control), #ffd34d 35%); transform: translateY(-1px); }
.texture-choice { transition: box-shadow 140ms ease, transform 140ms ease; }

.sfx-event-list { grid-template-columns: 1fr; }
.sfx-assignment-row { grid-template-columns: 138px 184px auto; min-height: 46px; gap: 7px; padding: 5px 7px; }
.sfx-assignment-heading { display: contents; }
.sfx-assignment-heading strong { display: grid; align-items: center; color: var(--ink); font-size: .73rem; line-height: 1.05; }
.sfx-sound-slot { display: flex; align-items: center; min-width: 0; min-height: 30px; padding: 0 8px; border: 1px solid color-mix(in srgb, var(--line), var(--ink) 18%); border-radius: 6px; background: color-mix(in srgb, var(--surface), var(--panel) 30%); box-shadow: inset 0 1px 2px rgb(20 30 40 / .16); color: var(--muted); transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease; }
.sfx-sound-slot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .68rem; font-weight: 750; }
.has-sfx .sfx-sound-slot { border-color: var(--control); background: var(--control); color: var(--control-text); box-shadow: inset 0 1px 0 rgb(255 255 255 / .26), 0 1px 2px rgb(20 30 40 / .16); cursor: grab; }
.has-sfx .sfx-assignment-heading strong,
.has-sfx .sfx-sound-slot span { color: var(--control-text); text-shadow: 0 1px 1px rgb(0 0 0 / .2); }
.has-sfx .sfx-sound-slot:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .32), 0 4px 10px color-mix(in srgb, var(--control), transparent 72%); }
.sfx-sound-slot.is-dragging { cursor: grabbing; opacity: .62; transform: scale(.97) rotate(-1deg); box-shadow: 0 8px 20px rgb(20 30 40 / .32); }
.sfx-assignment-row.has-sfx { border-color: color-mix(in srgb, var(--control), var(--line) 42%); background: color-mix(in srgb, var(--control), var(--panel-bg, #fff) 5%); }
.sfx-assignment-actions { align-items: center; gap: 4px; white-space: nowrap; }
.sfx-volume-control { display: flex; align-items: center; gap: 4px; }
.sfx-volume-button { display: grid !important; place-items: center; width: 30px; padding-inline: 2px !important; border-color: var(--control) !important; background: color-mix(in srgb, var(--control), var(--surface) 14%) !important; color: var(--control-text) !important; }
.sfx-volume-button .material-symbols-rounded { font-size: 1.05rem; }
.sfx-volume-button:disabled { border-color: var(--line) !important; background: color-mix(in srgb, var(--surface), var(--muted) 14%) !important; color: var(--muted) !important; opacity: .7; }
.sfx-row-volume { width: 74px; min-width: 74px; height: 28px; margin: 0; padding: 0; opacity: 1; }
.sfx-volume-control::after { display: none; }
.sfx-loop-button { display: grid !important; place-items: center; width: 29px; padding-inline: 2px !important; }
.sfx-loop-button .material-symbols-rounded { font-size: 1.05rem; }
.sfx-loop-button.is-looping { border-color: var(--control) !important; background: var(--control) !important; color: var(--control-text) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--control), transparent 72%); }

/* Keep native ranges direct-manipulation controls, even inside draggable editors. */
input[type="range"] { cursor: ew-resize; touch-action: none; }
.marker-stroke-row input[type="range"][data-snap-points] {
  background-image: radial-gradient(circle, color-mix(in srgb, var(--muted), var(--surface) 30%) 1px, transparent 1.5px);
  background-position: center;
  background-size: 12.5% 100%;
  background-repeat: repeat-x;
}
.marker-stroke-row datalist { display: none; }
@media (max-width: 620px) {
  .sfx-assignment-row { grid-template-columns: 105px 164px auto; }
  .sfx-assignment-actions button { min-width: 0; padding-inline: 4px; }
}
@media (max-width: 620px) {
  .sfx-event-list { grid-template-columns: 1fr; }
  .sfx-assignment-row { grid-template-columns: 1fr; }
  .sfx-assignment-actions > button { flex: 1 1 0; }
}

.map-pan-row button {
  border-left: 0;
  border-top: 0;
  border-radius: 0;
}

.map-pan-row button:last-child {
  border-left: 0;
  border-radius: 0 0 10px 0;
}

.map-overview-locks[hidden],
.map-lock-input {
  display: none;
}

.keyboard-only-toggle {
  position: absolute;
  top: 16px;
  right: 16px;
  left: auto;
  z-index: 830;
  width: auto;
  max-width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.94);
  color: var(--control);
  box-shadow: 0 8px 22px rgba(31, 41, 51, 0.16);
  font-weight: 900;
  cursor: pointer;
}

.empty-state {
  position: absolute;
  inset: 0 0 var(--playback-dock-height);
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--muted);
  text-align: center;
  background: rgba(245, 242, 234, 0.84);
  opacity: 1;
  transition: opacity 520ms ease;
}

.empty-state.is-fading {
  opacity: 0;
  pointer-events: none;
}

.empty-state.startup-loading-state {
  z-index: 1200;
}

.empty-state[hidden] {
  display: none;
}

.startup-loading-card {
  display: grid;
  justify-items: center;
  gap: 18px;
  max-width: min(720px, 86vw);
  font-weight: 900;
  color: var(--control);
}

.startup-loading-card img {
  display: block;
  width: min(560px, 82vw);
  max-height: 62vh;
  object-fit: contain;
  border-radius: 30% / 24%;
  filter: drop-shadow(0 18px 26px rgba(31, 41, 51, 0.18));
  -webkit-mask-image: radial-gradient(118% 118% at 50% 50%, #000 0 58%, rgba(0, 0, 0, 0.88) 70%, rgba(0, 0, 0, 0.36) 84%, transparent 100%);
  mask-image: radial-gradient(118% 118% at 50% 50%, #000 0 58%, rgba(0, 0, 0, 0.88) 70%, rgba(0, 0, 0, 0.36) 84%, transparent 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.startup-loading-bar {
  width: min(320px, 72vw);
  height: 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--control), transparent 48%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel), var(--surface) 38%);
  box-shadow: inset 0 1px 2px rgba(31, 41, 51, 0.16);
}

.startup-loading-bar-fill {
  width: 12%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7fbf7f, #5bc5d7, #d9442e);
  animation: startup-loading-progress 3000ms cubic-bezier(0.22, 0.74, 0.28, 1) forwards;
  transition: width 360ms ease;
}

.empty-state.is-complete .startup-loading-bar-fill {
  width: 100%;
  animation: none;
}

@keyframes startup-loading-progress {
  0% { width: 8%; }
  18% { width: 24%; }
  36% { width: 42%; }
  58% { width: 63%; }
  78% { width: 82%; }
  100% { width: 92%; }
}

.playback-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 800;
  display: grid;
  /* Keep the speed buttons in the same dock row, immediately beside Next,
     instead of allowing an implicit second row to run below the viewport. */
  grid-template-columns: minmax(110px, 160px) minmax(110px, 220px) minmax(110px, 160px) minmax(158px, 190px) auto;
  justify-content: center;
  gap: 8px;
  align-items: center;
  width: 100%;
  height: var(--playback-dock-height);
  padding: 8px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: color-mix(in srgb, var(--panel), #fff 8%);
  box-shadow: 0 -8px 24px rgba(31, 41, 51, 0.1);
}

.playback-panel button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--control);
  border-radius: 8px;
  background: var(--control);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.material-symbols-rounded {
  font-size: 1.45rem;
  line-height: 1;
}

.journey-progress {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 850;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.day-edge-control {
  position: absolute;
  bottom: calc(var(--playback-dock-height) * 0.5 - 29px);
  z-index: 810;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--control), #ffffff 58%);
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 28%, rgb(255 255 255 / 0.86), transparent 28%),
    linear-gradient(145deg, color-mix(in srgb, var(--panel), #ffffff 18%), color-mix(in srgb, var(--control), var(--panel) 72%));
  color: var(--control);
  box-shadow: 0 16px 32px rgb(17 24 39 / 0.24), inset 0 2px 2px rgb(255 255 255 / 0.7), inset 0 -5px 10px rgb(17 24 39 / 0.1);
  cursor: pointer;
  transform: none;
}

.day-edge-control-previous {
  left: 24px;
}

.day-edge-control-next {
  right: 24px;
}

.day-edge-control .material-symbols-rounded {
  font-size: 2.25rem;
  filter: drop-shadow(0 1px 0 rgb(255 255 255 / 0.72));
}

.day-edge-control:hover {
  transform: translateY(-1px);
  box-shadow: 0 19px 38px rgb(17 24 39 / 0.28), inset 0 2px 2px rgb(255 255 255 / 0.8), inset 0 -5px 10px rgb(17 24 39 / 0.12);
}

.day-edge-control:disabled {
  cursor: not-allowed;
  opacity: 0.28;
}

.route-debug-panel {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 1210;
  width: min(430px, calc(100% - 88px));
  padding: 8px 10px;
  color: #f8fafc;
  background: rgb(15 23 42 / 0.91);
  border: 1px solid rgb(148 163 184 / 0.7);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgb(15 23 42 / 0.36);
  font: 600 11px/1.35 ui-monospace, SFMono-Regular, Consolas, monospace;
  pointer-events: none;
}

.route-debug-panel strong {
  display: block;
  margin-bottom: 4px;
  color: #fde68a;
  font: 800 10px/1.2 system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.route-debug-panel pre {
  max-height: 155px;
  margin: 0;
  overflow: hidden;
  white-space: pre-wrap;
}

.media-viewer {
  position: absolute;
  inset: 14px 14px calc(var(--playback-dock-height) + 14px);
  z-index: 1800;
  display: grid;
  place-items: stretch;
  pointer-events: auto;
}

.media-viewer[hidden] {
  display: none;
}

.media-viewer.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 4000;
}

.media-viewer-frame {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #111827;
  box-shadow: 0 18px 54px rgb(0 0 0 / 0.48);
  color: #fff;
}

.media-viewer.is-fullscreen .media-viewer-frame {
  border: 0;
  border-radius: 0;
}

.media-viewer-head,
.media-viewer-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgb(17 24 39 / 0.94);
}

.media-viewer-head {
  justify-content: space-between;
}

.media-viewer-head > div {
  display: flex;
  gap: 5px;
}

.media-viewer button {
  display: grid;
  place-items: center;
  min-width: 36px;
  min-height: 34px;
  padding: 4px 8px;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 7px;
  background: rgb(255 255 255 / 0.1);
  color: #fff;
  cursor: pointer;
}

.media-viewer-content {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 12px;
  background: #090d14;
}

.media-viewer-content img,
.media-viewer-content video {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.media-viewer-content audio {
  width: min(680px, 92%);
}

.media-viewer-content article {
  width: min(760px, 92%);
  max-height: 100%;
  overflow: auto;
  padding: 22px;
  border-radius: 10px;
  background: #fffdf8;
  color: #1f2933;
  white-space: pre-wrap;
}

.media-viewer-controls {
  display: grid;
  grid-template-columns: auto minmax(100px, 1fr) auto auto minmax(80px, 150px);
}

.media-viewer-controls[hidden] {
  display: none;
}

.media-viewer-controls input {
  width: 100%;
}

.media-viewer-controls span {
  font-size: 0.75rem;
  font-weight: 750;
  white-space: nowrap;
}

.playback-panel button:disabled {
  border-color: color-mix(in srgb, var(--control), transparent 58%);
  background: color-mix(in srgb, var(--control), var(--surface) 68%);
  color: color-mix(in srgb, #ffffff, var(--muted) 48%);
  cursor: not-allowed;
  opacity: 0.68;
}

.playback-panel label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.playback-panel input {
  width: 100%;
}

.panel {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 100vh;
  max-height: 100vh;
  padding: 10px;
  border-left: 1px solid var(--line);
  background: var(--panel);
  box-shadow: -16px 0 40px rgba(31, 41, 51, 0.08);
}

.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--ui-texture);
  opacity: var(--ui-texture-opacity);
  mix-blend-mode: var(--ui-texture-blend);
  pointer-events: none;
}

.panel > * {
  position: relative;
  z-index: 1;
}

.panel-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) 40px;
  gap: 5px;
}

.panel-tabs button {
  min-height: 40px;
  border: 1px solid color-mix(in srgb, var(--line), var(--ink) 18%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface), #000 5%);
  color: var(--ink);
  font-weight: 900;
  font-size: 0.92rem;
  cursor: pointer;
}

.panel-tabs .panel-record-button {
  min-width: 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
  border-radius: 999px;
  display: grid;
  place-items: center;
  transition:
    transform 180ms ease,
    width 180ms ease,
    height 180ms ease,
    font-size 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease;
}

.panel-tabs .panel-record-button[aria-pressed="true"] {
  width: 48px;
  min-width: 48px;
  height: 48px;
  font-size: 1.22rem;
  border-color: #ff2f8a;
  background: color-mix(in srgb, #ff2f8a, var(--surface) 12%);
  color: #fff7fb;
  box-shadow:
    0 0 0 3px rgb(255 47 138 / 0.28),
    0 10px 20px rgb(255 47 138 / 0.18);
  transform: scale(1.04);
}

.panel-tabs .panel-record-button.is-paused {
  border-color: color-mix(in srgb, #ff6f91, var(--line) 42%);
  background: color-mix(in srgb, #ff6f91, var(--surface) 70%);
  color: var(--ink);
}

.panel-tabs button[aria-selected="true"] {
  border-color: var(--control);
  background: var(--control);
  color: var(--control-text);
}

.users-device-preview-toolbar {
  display: none;
}

body.users-builder-mode .users-device-preview-toolbar:not([hidden]) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--line), var(--ink) 12%);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface), var(--panel) 38%);
}

.users-device-preview-toolbar label {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.users-device-preview-toolbar select {
  width: 100%;
  min-width: 0;
  min-height: 31px;
  padding: 4px 7px;
  font-weight: 850;
}

.users-device-preview-status {
  min-width: 66px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  text-align: right;
  white-space: nowrap;
}

.panel-tab-panels {
  position: relative;
  min-height: 0;
  flex: 1 1 auto;
  padding-right: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.panel-tab-panels,
.style-panel,
.elements-style-drawer .style-panel.inline-style-panel,
.texture-library-panel,
.theme-panel {
  scrollbar-color: color-mix(in srgb, var(--control), var(--muted) 28%) color-mix(in srgb, var(--panel), var(--surface) 52%);
  scrollbar-width: auto;
}

.panel-tab-panels::-webkit-scrollbar,
.style-panel::-webkit-scrollbar,
.elements-style-drawer .style-panel.inline-style-panel::-webkit-scrollbar,
.texture-library-panel::-webkit-scrollbar,
.theme-panel::-webkit-scrollbar {
  width: 30px;
  height: 30px;
}

.panel-tab-panels::-webkit-scrollbar-track,
.style-panel::-webkit-scrollbar-track,
.elements-style-drawer .style-panel.inline-style-panel::-webkit-scrollbar-track,
.texture-library-panel::-webkit-scrollbar-track,
.theme-panel::-webkit-scrollbar-track {
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel), var(--surface) 52%);
}

.panel-tab-panels::-webkit-scrollbar-thumb,
.style-panel::-webkit-scrollbar-thumb,
.elements-style-drawer .style-panel.inline-style-panel::-webkit-scrollbar-thumb,
.texture-library-panel::-webkit-scrollbar-thumb,
.theme-panel::-webkit-scrollbar-thumb {
  min-height: 44px;
  border: 6px solid color-mix(in srgb, var(--panel), var(--surface) 52%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--control), var(--muted) 28%);
}

.panel-tab-panels::-webkit-scrollbar-thumb:hover,
.style-panel::-webkit-scrollbar-thumb:hover,
.elements-style-drawer .style-panel.inline-style-panel::-webkit-scrollbar-thumb:hover,
.texture-library-panel::-webkit-scrollbar-thumb:hover,
.theme-panel::-webkit-scrollbar-thumb:hover {
  background: var(--control);
}

.panel-tab-panel {
  display: grid;
  gap: 6px;
}

.users-panel {
  align-content: start;
}

.users-shell-section {
  gap: 10px;
}

.users-panel-manager {
  display: grid;
  gap: 10px;
}

.users-panel-manager-row {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--line), var(--surface) 18%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface), transparent 8%);
}

.users-panel-manager-row strong {
  color: var(--ink);
  font-size: 0.88rem;
}

.users-panel-manager-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.users-panel-manager-actions button {
  min-height: 34px;
}

.users-panel-manager-actions button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.users-shell-copy {
  margin: 0;
  color: var(--surface-text);
  line-height: 1.45;
}

.users-builder-workspace {
  position: absolute;
  inset:
    calc(var(--user-device-margin) + var(--user-frame-top-height) + 16px)
    calc(var(--user-device-margin) + var(--user-frame-side-width) + 16px)
    calc(var(--user-device-margin) + var(--user-frame-bottom-height) + 16px)
    calc(var(--user-device-margin) + var(--user-frame-side-width) + 16px);
  z-index: 740;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: var(--user-screen-radius);
  background:
    radial-gradient(circle at center, rgb(255 255 255 / 0.025), transparent 64%),
    linear-gradient(180deg, rgb(255 255 255 / 0.02), rgb(255 255 255 / 0.01));
  box-shadow:
    inset 0 2px 14px rgb(0 0 0 / 0.18),
    inset 0 -1px 1px rgb(255 255 255 / 0.04);
}

.users-builder-workspace::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgb(255 255 255 / 0.05);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.03),
    inset 0 0 24px rgb(0 0 0 / 0.06);
}

.users-appearance-admin-panel {
  position: absolute;
  top: 96px;
  right: calc(24px + clamp(320px, 24vw, 380px) * 2 + 28px);
  bottom: calc(var(--playback-dock-height) + 18px);
  width: clamp(280px, 24vw, 360px);
  z-index: 1800;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 8px;
  overflow: hidden;
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel), #fff 12%);
  box-shadow: 0 18px 34px rgb(18 24 32 / 0.24);
  opacity: 0;
  transform: translateX(-24px) scale(0.985);
  transform-origin: top right;
  transition: opacity 260ms ease, transform 340ms cubic-bezier(0.18, 0.88, 0.24, 1.08);
}

.users-appearance-admin-panel[hidden] {
  display: none;
}

.users-appearance-admin-panel > .panel-section {
  min-height: 0;
}

body.user-site-mode .users-appearance-admin-panel {
  display: none !important;
}

.users-staging-admin-panel {
  position: absolute;
  top: 96px;
  right: 12px;
  bottom: 96px;
  width: clamp(320px, 24vw, 380px);
  z-index: 1800;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 8px;
  overflow: hidden;
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel), #fff 16%);
  box-shadow: 0 18px 34px rgb(18 24 32 / 0.28);
  opacity: 0;
  transform: translateX(18px);
  transition: opacity 260ms ease, transform 320ms cubic-bezier(0.18, 0.88, 0.24, 1.08);
}

.users-staging-admin-panel[hidden] {
  display: none;
}

.users-staging-admin-panel > .panel-section {
  min-height: 0;
}

body.user-site-mode .users-staging-admin-panel {
  display: none !important;
}

body.users-builder-mode .map-shell {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
}

body.users-builder-mode .users-builder-workspace {
  opacity: 1;
  pointer-events: none;
}

body.users-builder-mode .panel {
  position: absolute;
  top: calc(var(--user-device-margin) + var(--user-frame-top-height) + 16px);
  bottom: calc(var(--user-device-margin) + var(--user-frame-bottom-height) + 16px);
  left: 50%;
  z-index: 1810;
  width: var(--users-builder-admin-width, clamp(300px, 22vw, 360px));
  max-width: calc((100vw - var(--user-frame-left-width) - var(--user-frame-right-width) - (var(--user-device-margin) * 2) - 36px) / 3);
  min-height: 0;
  max-height: none;
  border: 1px solid color-mix(in srgb, var(--line), var(--surface) 18%);
  border-radius: 18px;
  box-shadow: 0 24px 42px rgb(18 24 32 / 0.26);
  transform: translateX(-50%);
  transition:
    left 300ms ease,
    width 300ms ease,
    transform 320ms cubic-bezier(0.18, 0.88, 0.24, 1.08),
    opacity 240ms ease;
}

body.users-builder-mode .users-staging-admin-panel,
body.users-builder-mode .users-appearance-admin-panel {
  opacity: 1;
  width: var(--users-builder-admin-width, clamp(300px, 22vw, 360px));
  max-width: calc((100vw - var(--user-frame-left-width) - var(--user-frame-right-width) - (var(--user-device-margin) * 2) - 36px) / 3);
  min-height: 0;
  max-height: none;
  top: calc(var(--user-device-margin) + var(--user-frame-top-height) + 16px);
  bottom: calc(var(--user-device-margin) + var(--user-frame-bottom-height) + 16px);
  padding: 10px;
  border-radius: 18px;
  box-shadow: 0 24px 42px rgb(18 24 32 / 0.26);
}

body.users-builder-mode .users-staging-admin-panel {
  left: 50%;
  right: auto;
  transform: translateX(calc(var(--users-builder-admin-width, clamp(300px, 22vw, 360px)) / 2 + var(--users-builder-admin-gap, 18px)));
}

body.users-builder-mode .users-appearance-admin-panel {
  left: 50%;
  right: auto;
  transform: translateX(calc((var(--users-builder-admin-width, clamp(300px, 22vw, 360px)) / -2) - var(--users-builder-admin-gap, 18px) - var(--users-builder-admin-width, clamp(300px, 22vw, 360px)))) scale(1);
}

body.users-builder-mode .users-layout-preview {
  display: none;
}

body.users-builder-mode .user-site-controls {
  display: flex;
  opacity: 1;
  z-index: 880;
  pointer-events: auto;
}

body.users-builder-mode .playback-panel,
body.user-site-mode .playback-panel {
  left: calc(var(--user-device-margin) + var(--user-frame-left-width) + var(--user-frame-slot-padding));
  right: calc(var(--user-device-margin) + var(--user-frame-right-width) + var(--user-frame-slot-padding));
  bottom: calc(var(--user-device-margin) + var(--user-frame-slot-padding));
  width: auto;
  border-radius: var(--user-frame-slot-radius, 16px);
  border: 0;
  border-top-color: transparent;
  background: transparent;
  box-shadow: none;
}

body.users-builder-mode .playback-panel {
  z-index: 900;
}

body.users-builder-mode .user-material-controls,
body.users-builder-mode .user-material-panel {
  display: none !important;
}

body.users-builder-mode .user-theme-panel {
  z-index: 1200;
  top: max(18px, var(--user-device-margin));
  right: max(18px, var(--user-device-margin));
  bottom: max(18px, var(--user-device-margin));
}

body.users-builder-mode .user-site-panel-right {
  right: var(--user-frame-gap);
}

body.users-builder-mode .pinned-journey-section {
  display: none !important;
}

body.users-builder-mode .panel-tab-panels {
  padding-top: 0;
}

body.users-builder-mode .user-site-controls,
body.users-builder-mode .user-site-controls * {
  user-select: none;
  -webkit-user-select: none;
}

body.users-builder-mode .users-layout-preview {
  opacity: 0.42;
}

.users-staging-actions {
  display: grid;
  gap: 8px;
}

.users-staging-actions button {
  min-height: 38px;
}

.users-shell-color-control {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.users-shell-color-control span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
}

.users-shell-color-control input[type="color"] {
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--line), var(--surface) 18%);
  border-radius: 12px;
  background: none;
  cursor: pointer;
}

.users-history-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.users-history-actions button {
  min-height: 38px;
}

.users-history-actions button:disabled {
  opacity: 0.46;
  cursor: not-allowed;
}

.users-shell-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.users-staging-list {
  display: grid;
  gap: 8px;
}

.users-registry-preview {
  display: grid;
  gap: 10px;
}

.users-registry-summary {
  display: inline;
  margin-left: 0.28em;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

.users-registry-empty {
  margin: 0;
  color: var(--muted);
}

.users-registry-list {
  display: grid;
  gap: 8px;
}

.users-registry-item[data-user-placement-source] {
  cursor: context-menu;
}

body.users-builder-mode .users-registry-item[data-user-builder-card="true"][draggable="true"] {
  cursor: grab;
}

.users-registry-item {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--line), var(--surface) 18%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface), #fff 8%);
}

.users-registry-control-preview {
  display: grid;
  align-items: center;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--line), transparent 22%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel), var(--surface) 42%);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.users-registry-control-preview > :where(label, input, select, textarea, button) {
  max-width: 100%;
  margin: 0;
}

.users-registry-control-preview :where(input, select, textarea, button) {
  opacity: 1;
}

.users-registry-control-preview[data-control-type="range"] input[type="range"],
.users-registry-control-preview[data-control-type="select"] select,
.users-registry-control-preview[data-control-type="text"] input,
.users-registry-control-preview[data-control-type="textarea"] textarea {
  width: 100%;
}

.users-registry-control-preview[data-control-type="color"] input[type="color"] {
  width: 100%;
  min-height: 38px;
}

.users-staging-item {
  display: grid;
  gap: 8px;
}

.users-registry-help {
  margin: -2px 0 2px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.42;
}

.users-registry-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.users-registry-item-title {
  font-weight: 800;
  color: var(--ink);
}

.users-registry-item-id {
  color: var(--muted);
  font-size: 0.82rem;
  font-family: "IBM Plex Mono", "Cascadia Mono", "Consolas", monospace;
}

.users-staging-remove {
  justify-self: end;
  min-height: 34px;
  padding-inline: 10px;
}

.users-registry-item-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 10px;
  font-size: 0.84rem;
  color: var(--surface-text);
}

.users-registry-item-meta span {
  display: grid;
  gap: 2px;
}

.users-registry-item-meta strong {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.users-registry-stage-button {
  justify-self: end;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--control), #fff 38%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--control), var(--surface) 12%);
  color: var(--control-text);
  font-size: 0.8rem;
  font-weight: 900;
  cursor: pointer;
}

.users-registry-stage-button[data-stage-state="staged"],
.users-registry-stage-button[data-stage-state="placed"] {
  border-color: color-mix(in srgb, var(--line), var(--surface) 18%);
  background: color-mix(in srgb, var(--surface), #fff 8%);
  color: var(--muted);
  cursor: not-allowed;
}

.users-registry-stage-button:disabled {
  opacity: 1;
}

.users-registry-item-compact {
  gap: 6px;
  padding: 9px 10px;
}

.panel.is-user-recording {
  background:
    linear-gradient(90deg, rgb(255 35 112 / 0.22), rgb(255 91 137 / 0.11) 42%, transparent 78%),
    linear-gradient(180deg, rgb(255 115 146 / 0.2), transparent 180px),
    color-mix(in srgb, var(--panel), #ffb4ca 9%);
  box-shadow:
    inset 0 0 0 3px rgb(255 26 112 / 0.72),
    inset 8px 0 0 rgb(255 26 112 / 0.28),
    0 0 0 3px rgb(255 26 112 / 0.18),
    0 22px 40px rgb(18 24 32 / 0.16);
}

.panel.is-user-recording .panel-record-button {
  border-color: #ff1670;
  background: #ff1670;
  color: #fff;
  box-shadow: 0 0 0 4px rgb(255 22 112 / 0.22);
}

.panel.is-user-recording-paused {
  box-shadow:
    inset 0 0 0 2px rgb(255 111 145 / 0.18),
    0 22px 40px rgb(18 24 32 / 0.14);
}

.recordable-setting {
  cursor: pointer;
  transition: box-shadow 140ms ease, background-color 140ms ease;
}

.panel.is-user-recording .recordable-setting:hover {
  box-shadow: 0 0 0 2px rgb(255 182 203 / 0.75);
}

.recordable-setting.is-record-selected {
  box-shadow:
    0 0 0 3px rgb(255 0 140 / 0.98),
    0 0 0 7px rgb(255 0 140 / 0.24),
    0 0 18px rgb(255 0 140 / 0.28);
  border-radius: 10px;
}

#panelUsers [data-users-recorded-session] .users-registry-item.recordable-setting {
  cursor: pointer;
}

.users-registry-subhead {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.users-layout-placeholder {
  min-height: 140px;
  display: grid;
  place-items: center;
  padding: 18px;
  border: 1px dashed color-mix(in srgb, var(--line), var(--surface) 20%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface), #fff 5%);
  color: var(--muted);
  text-align: center;
}

.users-layout-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.users-layout-panel {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 170px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--line), var(--surface) 18%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface), #fff 8%);
}

.user-site-controls.is-user-builder-drop-target,
.users-layout-panel.is-user-builder-drop-target {
  box-shadow:
    inset 0 0 0 2px rgb(255 111 196 / 0.8),
    0 0 0 4px rgb(255 111 196 / 0.18);
}

.users-layout-panel-head,
.users-layout-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.users-layout-panel-head strong,
.users-layout-section-head strong {
  color: var(--ink);
  font-size: 0.9rem;
}

.users-layout-panel-head span,
.users-layout-section-head span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.users-layout-panel-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.users-layout-section {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: var(--user-section-stroke-width) var(--user-section-stroke-style) var(--user-section-stroke-color);
  opacity: var(--user-section-stroke-opacity);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface), #fff 5%);
}

.users-layout-section-items {
  display: grid;
  gap: 8px;
}

.users-placement-menu {
  position: fixed;
  z-index: 4500;
  display: grid;
  gap: 10px;
  min-width: 220px;
  max-width: min(320px, calc(100vw - 20px));
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--line), var(--control) 22%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel), #fff 10%);
  box-shadow: 0 18px 36px rgb(18 24 32 / 0.3);
}

.users-placement-menu[hidden] {
  display: none;
}

.users-placement-title {
  color: var(--ink);
  font-size: 0.92rem;
}

.users-placement-group {
  display: grid;
  gap: 6px;
}

.users-placement-action[disabled] {
  opacity: 0.56;
  cursor: not-allowed;
}

.users-placement-group-title {
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.users-placement-group-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.users-placement-action {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--control), #fff 38%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface), #fff 12%);
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
}

/* Phase 2E.12 baseline: one frame and one clipped screen. */
body.user-site-mode .user-device-frame,
body.users-builder-mode .user-device-frame {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.06), rgb(0 0 0 / 0.22)),
    color-mix(in srgb, var(--users-shell-leather-color, var(--leather-color)), #101820 18%);
  box-shadow: var(--user-frame-shadow);
}

body.user-site-mode .user-device-rail,
body.users-builder-mode .user-device-rail,
body.user-site-mode #userFrameBuilderTools,
body.users-builder-mode #userFrameBuilderTools,
body.user-site-mode .user-site-controls,
body.users-builder-mode .user-site-controls,
body.user-site-mode .user-site-section,
body.users-builder-mode .user-site-section,
body.user-site-mode .user-edge-blank-section,
body.users-builder-mode .user-edge-blank-section,
body.user-site-mode .user-builder-empty,
body.users-builder-mode .user-builder-empty {
  display: none !important;
}

body.user-site-mode .map-canvas,
body.users-builder-mode .map-canvas {
  z-index: 781;
  clip-path: inset(
    var(--user-frame-edge-top)
    var(--user-frame-edge-right)
    var(--user-frame-edge-bottom)
    var(--user-frame-edge-left)
    round var(--user-screen-radius)
  );
}

body.user-site-mode .user-device-screen-aperture,
body.users-builder-mode .user-device-screen-aperture {
  z-index: 2;
  border-color: rgb(255 255 255 / 0.2);
  box-shadow: var(--user-screen-shadow);
}

body.user-site-mode #siteModeToggle,
body.user-site-mode #userMaterialControls,
body.user-site-mode #userThemePanel,
body.user-site-mode #userMaterialPanel,
body.user-site-mode #keyboardOnlyToggle,
body.user-site-mode #usView,
body.user-site-mode .map-control-cluster,
body.user-site-mode .map-feature-toolbar,
body.user-site-mode .day-edge-control,
body.user-site-mode .playback-panel,
body.users-builder-mode #userFrameBuilderTools,
body.users-builder-mode .map-control-cluster,
body.users-builder-mode .map-feature-toolbar,
body.users-builder-mode .day-edge-control,
body.users-builder-mode .playback-panel,
body.users-builder-mode .users-panel-manager,
body.users-builder-mode #usersLayoutPreview {
  display: none !important;
}

body.users-builder-mode .users-appearance-admin-panel,
body.users-builder-mode .users-staging-admin-panel,
body.users-builder-mode > .panel,
body.users-builder-mode .panel {
  max-height: calc(100vh - var(--user-frame-edge-top) - var(--user-frame-edge-bottom) - (var(--user-device-margin) * 2) - 24px);
  overflow: auto;
}

@media (max-width: 1200px) {
  .users-staging-admin-panel {
    width: min(340px, calc(100vw - 420px));
  }

  .users-layout-preview {
    grid-template-columns: 1fr;
  }

  body.users-builder-mode .panel {
    width: min(360px, calc((100vw - 84px) / 3));
  }

  body.users-builder-mode .users-staging-admin-panel {
    width: min(360px, calc((100vw - 84px) / 3));
  }

  body.users-builder-mode .users-appearance-admin-panel {
    width: min(360px, calc((100vw - 84px) / 3));
  }
}

.pinned-journey-section {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: -1px 0 5px;
  padding: 4px 6px 6px;
  border: 1px solid color-mix(in srgb, var(--control), var(--line) 50%);
  border-top: 0;
  border-radius: 0 0 9px 9px;
  background: color-mix(in srgb, var(--panel), #fff 9%);
  box-shadow: 0 8px 18px rgb(31 41 51 / 0.12);
}

.pinned-subsection {
  display: grid;
  gap: 0;
  padding: 3px 4px;
  border-inline: 1px solid color-mix(in srgb, var(--line), transparent 28%);
  border-bottom: 1px solid color-mix(in srgb, var(--line), transparent 20%);
}

.pinned-subsection:first-child {
  border-radius: 7px 7px 0 0;
}

.pinned-subsection:last-child {
  border-radius: 0 0 7px 7px;
}

.pinned-subsection summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 6px;
  row-gap: 2px;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  list-style: none;
}

.pinned-journey-details > summary,
.pinned-day-details > summary,
.pinned-route-details > summary {
  margin-inline: -3px;
  padding: 3px 5px;
  border-radius: 3px;
}

.pinned-journey-details > summary {
  background: color-mix(in srgb, var(--surface), var(--panel) 58%);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--line), var(--muted) 30%);
}

.pinned-day-details > summary {
  background: color-mix(in srgb, var(--muted), var(--panel) 88%);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--muted), var(--line) 52%);
}

.pinned-route-details > summary {
  background: color-mix(in srgb, var(--control), var(--panel) 91%);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--control), var(--line) 46%);
}

.pinned-subsection summary::before {
  content: ">";
  flex: 0 0 auto;
  color: currentColor;
  font-size: 0.72rem;
  line-height: 1;
  transition: transform 150ms ease;
}

.pinned-subsection[open] summary {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.pinned-subsection[open] summary > span {
  grid-column: 2 / -1;
}

.pinned-subsection[open] .pinned-summary-picker {
  grid-column: 2 / 3;
}

.pinned-subsection:not([open]) summary {
  grid-template-columns: auto minmax(0, 0.35fr) minmax(0, 1fr);
}

.pinned-subsection[open] summary::before {
  transform: rotate(90deg);
}

.pinned-subsection summary::-webkit-details-marker {
  display: none;
}

.pinned-subsection summary select {
  min-height: 30px;
  letter-spacing: 0;
  text-transform: none;
}
.pinned-subsection select.is-viewing, .pinned-summary-picker select.is-viewing { outline: 3px solid #f2a33a; outline-offset: 1px; background: #fff6d4; box-shadow: 0 0 0 4px rgb(242 163 58 / .2); }

.pinned-summary-picker {
  display: grid;
  min-width: 0;
}

.pinned-summary-picker select,
.pinned-picker-control select,
.pinned-picker-control input[type="text"] {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pinned-journey-details:not([open]),
.pinned-day-details:not([open]) {
  gap: 0;
}

.pinned-subsection:not([open]) .pinned-picker-row,
.pinned-subsection:not([open]) .stop-date-editor,
.pinned-subsection:not([open]) .pinned-day-stats,
.pinned-subsection:not([open]) .day-rename-fields,
.pinned-subsection:not([open]) .rename-inline-button,
.pinned-subsection:not([open]) .pinned-route-status {
  display: none;
}

.pinned-subsection:not([open]) summary > span {
  display: inline;
}

.pinned-journey-details:not([open]) .route-stats {
  display: none;
}

.pinned-picker-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 80px;
  gap: 5px;
  align-items: end;
}

.pinned-picker-control {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pinned-picker-control select,
.pinned-picker-control input[type="text"] {
  min-height: 30px;
  letter-spacing: 0;
  text-transform: none;
}

.pinned-divider {
  height: 1px;
  border-top: 1px solid var(--line);
}

.pinned-journey-section h1 {
  margin: 0;
  font-size: clamp(1.15rem, 2vw, 1.65rem);
  line-height: 1.05;
}

.pinned-journey-section button {
  min-height: 30px;
  padding: 3px 7px;
  border: 1px solid var(--control);
  border-radius: 8px;
  background: var(--control);
  color: var(--control-text);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.05;
  cursor: pointer;
}

.stop-date-editor {
  position: relative;
  display: grid;
  gap: 3px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
}

.stop-date-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 32px;
  gap: 5px;
  align-items: end;
}

.stop-date-fields label {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.stop-date-fields input {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0;
}

.stop-date-fields input[aria-invalid="true"] {
  border-color: #c93f3f;
  outline: 1px solid #c93f3f;
}

.stop-date-separator {
  align-self: end;
  padding-bottom: 7px;
  color: var(--muted);
  font-weight: 900;
}

.pinned-journey-section .stop-calendar-button {
  display: grid;
  place-items: center;
  width: 32px;
  min-height: 30px;
  padding: 0;
}

.stop-calendar-button .material-symbols-rounded {
  font-size: 19px;
}

.stop-date-message {
  min-height: 1em;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 750;
}

.stop-date-message.is-error {
  color: #b82f2f;
}

.stop-calendar-popover {
  position: absolute;
  z-index: 80;
  top: calc(100% - 2px);
  right: 0;
  width: min(286px, 100%);
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgb(16 24 32 / 0.25);
  color: var(--ink);
}

.stop-calendar-header,
.stop-calendar-weekdays,
.stop-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.stop-calendar-header {
  grid-template-columns: 30px minmax(0, 1fr) 30px;
  align-items: center;
  margin-bottom: 5px;
  text-align: center;
}

.stop-calendar-weekdays span {
  padding: 2px;
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 900;
  text-align: center;
}

.pinned-journey-section .stop-calendar-grid button {
  min-height: 30px;
  padding: 2px;
  border-color: transparent;
  background: transparent;
  color: var(--ink);
  font-size: 0.74rem;
}

.pinned-journey-section .stop-calendar-grid button:hover,
.pinned-journey-section .stop-calendar-grid button:focus-visible {
  background: color-mix(in srgb, var(--control) 16%, transparent);
}

.pinned-journey-section .stop-calendar-grid button.is-in-range {
  border-radius: 4px;
  background: color-mix(in srgb, var(--control) 20%, transparent);
}

.pinned-journey-section .stop-calendar-grid button.is-range-edge {
  border-radius: 50%;
  background: var(--control);
  color: var(--control-text);
}

.stop-calendar-grid .is-outside-month {
  opacity: 0.38;
}

.stop-calendar-popover > small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.67rem;
  text-align: center;
}

.stop-range-editor,
.day-name-pattern-control {
  position: relative;
  min-width: 0;
}

.stop-range-editor {
  display: grid;
  gap: 3px;
}

.stop-range-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
  gap: 6px;
  align-items: end;
}

.stop-range-fields input[aria-invalid="true"] {
  border-color: #c93f3f;
  outline: 1px solid #c93f3f;
}

.edit-stop-calendar-button {
  display: grid;
  place-items: center;
  min-height: 34px;
  padding: 0;
}

.edit-stop-calendar-button .material-symbols-rounded {
  font-size: 20px;
}

.edit-stop-calendar-popover {
  top: calc(100% + 3px);
  right: 0;
}

.stop-calendar-grid {
  user-select: none;
  touch-action: none;
}

.day-name-pattern-tooltip {
  position: fixed;
  z-index: 100000;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: min(980px, calc(100vw - 24px));
  max-width: none;
  overflow: visible;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgb(16 24 32 / 0.25);
  color: var(--ink);
  font-family: "Segoe UI", Arial, sans-serif;
  font-kerning: normal;
  font-variant-ligatures: none;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.35;
  text-transform: none;
}

.day-name-pattern-tooltip > strong {
  display: block;
  margin-bottom: 6px;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.day-name-token-columns {
  display: grid;
  grid-template-columns: 0.7fr 1.35fr 1.35fr 0.8fr;
  gap: 14px;
  align-items: start;
}

.day-name-token-columns > section {
  min-width: 0;
}

.day-name-token-grid {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 5px 10px;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.3;
}

.day-name-token-grid code {
  color: var(--accent, #a22f6f);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0;
  cursor: pointer;
}

.day-name-token-grid code + span {
  cursor: pointer;
}

.day-name-token-grid code:hover,
.day-name-token-grid code:has(+ span:hover) {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.day-name-token-grid b {
  font-family: "Segoe UI", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: normal;
}

.day-name-token-heading {
  display: block;
  margin-top: 3px;
  padding-top: 4px;
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.day-name-token-heading:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.day-name-pattern-tooltip small {
  display: block;
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.35;
}

@media (max-width: 780px) {
  .day-name-token-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pinned-day-stats {
  display: grid;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.pinned-day-stats-top,
.pinned-day-stats-names,
.pinned-day-stats-gps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  column-gap: 14px;
}

.pinned-day-stats-top {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
}

.pinned-day-stats-top > span,
.pinned-day-stats-names span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 650;
}

.pinned-day-stats-top strong,
.pinned-day-stats-names strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 950;
  text-overflow: ellipsis;
}

.pinned-day-stats-names > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px;
  min-width: 0;
}

.pinned-day-stats-gps[hidden] {
  display: none;
}

.pinned-day-stats-gps span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
  text-overflow: ellipsis;
}

.pinned-gps-toggle {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 850;
}

.pinned-gps-toggle input {
  width: 14px;
  height: 14px;
}

.pinned-gps-toggle small {
  justify-self: end;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  font: inherit;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pinned-route-status {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 650;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* One connected, compact pinned route instrument. */
.pinned-journey-section {
  --pinned-rail: color-mix(in srgb, var(--control), var(--line) 38%);
  gap: 0;
  margin: -1px 0 4px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-inline: 3px solid var(--pinned-rail);
  border-bottom: 2px solid var(--pinned-rail);
  border-radius: 0 0 7px 7px;
  background: color-mix(in srgb, var(--panel), #fff 5%);
}

.pinned-journey-section .pinned-subsection {
  gap: 0;
  margin: 0;
  padding: 0 4px;
  border-radius: 0;
}

.pinned-journey-details {
  background: color-mix(in srgb, var(--surface), #c9bda9 24%);
}

.pinned-day-details {
  border-top: 4px solid color-mix(in srgb, var(--pinned-rail), var(--ink) 22%);
  background: color-mix(in srgb, var(--surface), #aebfd0 24%);
}

.pinned-subsection > summary,
.pinned-subsection[open] > summary,
.pinned-subsection:not([open]) > summary {
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 4px;
  margin: 0;
  padding: 3px 2px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.pinned-subsection > summary > span,
.pinned-subsection[open] > summary > span,
.pinned-subsection:not([open]) > summary > span {
  display: inline;
  grid-column: 2;
  white-space: nowrap;
}

.pinned-subsection > summary .pinned-summary-picker,
.pinned-subsection[open] > summary .pinned-summary-picker {
  grid-column: 3;
}

.pinned-subsection > summary .rename-inline-button {
  grid-column: 4;
}

.pinned-subsection summary select {
  min-height: 26px;
  height: 26px;
  padding-block: 2px;
}

.pinned-journey-section button {
  min-height: 26px;
  border-radius: 6px;
}

.pinned-stop-subsection-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 0;
  margin-inline: -4px;
  border-top: 1px solid color-mix(in srgb, var(--line), transparent 25%);
  background: color-mix(in srgb, var(--surface), #c7ced5 18%);
}

.pinned-day-details:not([open]) .pinned-stop-subsection-bar {
  display: none;
}

.pinned-journey-section .pinned-stop-twirl {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  min-height: 24px;
  padding: 2px 7px;
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--line), transparent 28%);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.69rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pinned-stop-twirl[aria-expanded="true"] {
  background: color-mix(in srgb, var(--control), transparent 88%);
  color: var(--ink);
}

.pinned-stop-twirl-arrow {
  display: inline-block;
  transition: transform 150ms ease;
}

.pinned-stop-twirl-arrow.is-expanded {
  transform: rotate(90deg);
}

.pinned-stop-subsection-bar .pinned-gps-toggle {
  align-self: stretch;
  padding: 2px 7px;
  border-left: 1px solid color-mix(in srgb, var(--line), transparent 28%);
  cursor: pointer;
}

.pinned-stop-subsection-content {
  margin-inline: -4px;
  padding: 5px 7px;
  border-top: 1px solid color-mix(in srgb, var(--line), var(--ink) 15%);
}

.pinned-stop-subsection-content[hidden] {
  display: none !important;
}

.pinned-stop-dates {
  background: color-mix(in srgb, var(--surface), #e5d39b 23%);
}

.pinned-stop-stats {
  background: color-mix(in srgb, var(--surface), #aecdb8 21%);
}

.pinned-day-stats.pinned-stop-subsection-content,
.stop-date-editor.pinned-stop-subsection-content {
  gap: 3px;
  padding-top: 5px;
}

.pinned-route-status {
  padding: 2px 4px 3px;
  border-top: 1px solid color-mix(in srgb, var(--line), transparent 35%);
  font-size: 0.65rem;
  line-height: 1.1;
}

.route-follow-camera-controls {
  display: grid;
  gap: 8px;
}

.route-follow-camera-controls[hidden] {
  display: none;
}

.route-follow-camera-note {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 650;
  line-height: 1.3;
}

.rename-inline-button {
  white-space: normal;
}

.day-rename-fields {
  display: grid;
  gap: 6px;
}

.day-rename-fields[hidden] {
  display: none;
}

.day-rename-linked-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
}

.day-rename-fields input[type="text"]:disabled {
  background: color-mix(in srgb, var(--surface), var(--muted) 16%);
  color: color-mix(in srgb, var(--ink), var(--muted) 42%);
  cursor: not-allowed;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#panelElements {
  position: relative;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
}

#panelElements > .panel-section {
  grid-column: 1 / -1;
}

.panel-tab-panel[hidden] {
  display: none;
}

.panel-section {
  --section-tint: color-mix(in srgb, var(--panel), var(--surface) 52%);
  --section-accent: var(--line);
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--section-accent), var(--ink) 14%);
  border-left-width: 5px;
  border-radius: 8px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--section-accent), transparent 82%), transparent 44%), var(--section-tint);
}

:is(.panel-section, .users-material-preset-panel, .users-appearance-group, .style-panel)[data-section-color="0"] {
  --section-tint: #fff2f0;
  --section-accent: #e96d62;
}

:is(.panel-section, .users-material-preset-panel, .users-appearance-group, .style-panel)[data-section-color="1"] {
  --section-tint: #eff7ff;
  --section-accent: #5c9dd8;
}

:is(.panel-section, .users-material-preset-panel, .users-appearance-group, .style-panel)[data-section-color="2"] {
  --section-tint: #fff9df;
  --section-accent: #d6ae2f;
}

:is(.panel-section, .users-material-preset-panel, .users-appearance-group, .style-panel)[data-section-color="3"] {
  --section-tint: #f6f0ff;
  --section-accent: #9a7ad7;
}

:is(.panel-section, .users-material-preset-panel, .users-appearance-group, .style-panel)[data-section-color="4"] {
  --section-tint: #fff3e4;
  --section-accent: #df8a38;
}

:is(.panel-section, .users-material-preset-panel, .users-appearance-group, .style-panel)[data-section-color="5"] {
  --section-tint: #eff9ed;
  --section-accent: #62a965;
}

.dark-ui-theme :is(.panel-section, .users-material-preset-panel, .users-appearance-group, .style-panel)[data-section-color] {
  --section-tint: color-mix(in srgb, var(--panel), var(--section-accent) 18%);
  border-color: color-mix(in srgb, var(--section-accent), var(--ink) 22%);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--section-accent), transparent 72%), transparent 50%),
    var(--section-tint);
  color: var(--ink);
}

.dark-ui-theme .panel-section .section-label,
.dark-ui-theme .panel-section .section-collapse-button,
.dark-ui-theme .panel-section .section-collapse-arrow,
.dark-ui-theme .panel-section .range-control,
.dark-ui-theme .panel-section .range-control output,
.dark-ui-theme .panel-section .text-control,
.dark-ui-theme .panel-section .compact-control {
  color: color-mix(in srgb, var(--ink), var(--section-accent) 18%);
}

.dark-ui-theme .panel-section input:not([type="range"]):not([type="color"]),
.dark-ui-theme .panel-section select,
.dark-ui-theme .panel-section textarea,
.dark-ui-theme .panel-section .toggle-button,
.dark-ui-theme .panel-section .text-control input,
.dark-ui-theme .panel-section .text-control select,
.dark-ui-theme .panel-section .compact-control select,
.dark-ui-theme .panel-section .marker-fill-row,
.dark-ui-theme .panel-section .route-animation-icon-colors label,
.dark-ui-theme .panel-section .landmarks-section,
.dark-ui-theme .panel-section .media-order-toggle {
  border-color: color-mix(in srgb, var(--line), var(--ink) 16%);
  background: color-mix(in srgb, var(--panel), var(--surface) 18%);
  color: var(--ink);
}

.dark-ui-theme .panel-section button:not(.section-collapse-button):not(.section-move-button):not(.landmark-tile):not(.map-style-card):not(.stroke-visibility-toggle):not(.color-swatch) {
  border-color: color-mix(in srgb, var(--control), var(--ink) 18%);
  background: color-mix(in srgb, var(--control), #000 12%);
  color: var(--control-text);
}

.dark-ui-theme .panel-section input::placeholder,
.dark-ui-theme .panel-section textarea::placeholder {
  color: color-mix(in srgb, var(--ink), transparent 44%);
}

.font-theme-section {
  display: grid;
  gap: 8px;
}

.font-preview-row {
  display: grid;
  min-height: 46px;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line), var(--ink) 12%);
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--surface), transparent 18%), transparent),
    color-mix(in srgb, var(--panel), var(--surface) 44%);
}

#fontStylePreview {
  display: inline-block;
  padding: 3px 7px;
  border-radius: 5px;
  background: rgb(var(--label-bg-rgb, 255 255 255) / var(--label-bg-opacity, 0.86));
  line-height: 1;
  text-align: center;
  transform-origin: center;
  text-shadow:
    0 var(--label-halo-width, 1px) 0 var(--label-halo),
    var(--label-halo-width, 1px) 0 0 var(--label-halo),
    0 calc(var(--label-halo-width, 1px) * -1) 0 var(--label-halo),
    calc(var(--label-halo-width, 1px) * -1) 0 0 var(--label-halo),
    0 2px 4px rgb(31 41 51 / 0.26);
  white-space: nowrap;
}

.font-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.font-control-grid .range-control {
  grid-template-columns: 76px minmax(0, 1fr) 42px;
}

.font-control-grid .compact-toggle {
  align-self: end;
  min-height: 32px;
}

.font-slider-grid {
  display: grid;
  gap: 4px;
}

.font-slider-grid .range-control {
  grid-template-columns: 78px minmax(0, 1fr) 48px;
}

.font-slider-grid .range-control output {
  grid-column: 3;
  justify-self: end;
  align-self: center;
  margin-top: 0;
}

.current-theme-section {
  display: grid;
  gap: 7px;
  grid-column: 1 / -1 !important;
  position: relative;
  z-index: 90;
  pointer-events: auto;
}

.panel-footer-theme {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 7px;
  border: 1px solid color-mix(in srgb, var(--control), var(--line) 45%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel), #fff 8%);
}

.panel-footer-theme > span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.current-theme-button {
  display: grid;
  width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--current-theme-border, var(--control));
  border-radius: 8px;
  background: var(--current-theme-bg, var(--control));
  color: var(--current-theme-fg, var(--control-text));
  text-align: left;
  cursor: pointer;
  align-items: center;
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

.panel-footer-theme .current-theme-button,
.panel-footer-theme button {
  min-width: 0;
  min-height: 30px;
  padding: 3px 8px;
  border-radius: 7px;
  font-size: 0.78rem;
  line-height: 1;
}

.current-theme-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.save-current-theme-button,
.update-current-theme-button {
  min-height: 34px;
  padding: 8px;
  border: 1px solid var(--control);
  border-radius: 8px;
  color: var(--control);
  font-weight: 900;
  cursor: pointer;
}

.save-current-theme-button {
  background: color-mix(in srgb, var(--control), var(--surface) 72%);
}

.update-current-theme-button {
  background: var(--surface);
}

.update-current-theme-button:hover {
  background: color-mix(in srgb, var(--control), var(--surface) 82%);
}

.save-current-theme-button:hover {
  background: var(--control);
  color: var(--control-text);
}

.current-theme-section > .section-label {
  grid-column: 1;
  align-self: center;
  margin: 0;
  white-space: nowrap;
}

.current-theme-button span {
  display: none;
}

.current-theme-button strong {
  margin-top: 0;
  font-size: 0.88rem;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.current-theme-button em {
  display: none;
}

.route-theme-panel-head button {
  min-height: 34px;
  border: 1px solid var(--control);
  border-radius: 8px;
  background: var(--control);
  color: var(--control-text);
  font-weight: 900;
  cursor: pointer;
  transform-origin: top right;
  animation: done-button-birth 220ms ease-out both;
}

.eyebrow {
  margin: 0 0 3px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(1.25rem, 1.8vw, 1.72rem);
  line-height: 1.05;
}

.day-buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-top: 6px;
}

.day-buttons button {
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f3eb;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}

.day-buttons button[aria-pressed="true"] {
  border-color: var(--control);
  background: var(--control);
  color: var(--control-text);
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12px;
  gap: 0;
  margin: 0;
}

.route-stats {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--line), var(--ink) 14%);
}

.stats div {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 6px;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
}

.stats div:nth-child(-n + 2) {
  padding-top: 0;
}

.stats div:nth-last-child(-n + 2) {
  padding-bottom: 0;
  border-bottom: 0;
}

.stats dt {
  color: var(--muted);
  font-size: 0.74rem;
}

.stats dd {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.endpoint-name,
.endpoint-coordinates {
  display: block;
}

.endpoint-coordinates {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 650;
}

.controls {
  display: grid;
  grid-template-columns: 34px 34px minmax(0, 1fr);
  gap: 6px;
}

.controls button,
.file-control {
  min-height: 32px;
  border: 1px solid var(--control);
  border-radius: 8px;
  background: var(--control);
  color: var(--control-text);
  font-weight: 700;
  cursor: pointer;
}

.controls button {
  display: grid;
  place-items: center;
}

.file-control {
  display: grid;
  place-items: center;
  position: relative;
  padding: 6px;
  text-align: center;
}

.file-control input {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}

.image-upload-control {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

.route-import-divider {
  height: 5px;
  margin: 9px 0 7px;
  border-top: 1px solid color-mix(in srgb, var(--line), transparent 22%);
  border-bottom: 1px solid color-mix(in srgb, var(--line), transparent 48%);
}

.route-header-file-control {
  width: 100%;
}

.toggle-section,
.preset-section,
.overview-section,
.route-controls-section,
.visited-states-section {
  display: grid;
  gap: 5px;
}

.full-width-style-button {
  width: 100%;
  min-height: 34px;
}

.overview-section {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.overview-section .section-label,
.overview-section .range-control {
  grid-column: 1 / -1;
}

.route-controls-section .range-control {
  grid-template-columns: 96px minmax(0, 1fr) 38px;
}

.route-controls-section output {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

#routePlaybackSpeedValue {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.section-label {
  margin: 0;
  color: color-mix(in srgb, var(--section-accent, var(--muted)), #1f2933 58%);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section-collapse-button {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-self: stretch;
  gap: 6px;
  width: 100%;
  min-height: 22px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: color-mix(in srgb, var(--section-accent, var(--muted)), #1f2933 58%);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}

.section-collapse-button span:not(.section-move-controls):not(.section-move-button):not(.section-drag-handle) {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.section-collapse-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.section-collapse-arrow {
  width: 0.72em;
  color: currentColor;
  font-size: 0.72rem;
  line-height: 1;
}

.section-move-controls {
  display: inline-flex;
  gap: 3px;
  margin-left: auto;
  margin-right: 14px;
}

.section-move-button {
  display: grid;
  place-items: center;
  width: 20px;
  height: 18px;
  border: 1px solid color-mix(in srgb, var(--section-accent), var(--ink) 20%);
  border-radius: 5px;
  background: color-mix(in srgb, #ffffff, var(--section-accent) 18%);
  color: color-mix(in srgb, var(--control), var(--section-accent) 18%);
  font-size: 0.58rem;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  cursor: pointer;
}

.section-move-button:hover,
.section-move-button:focus-visible {
  border-color: var(--control);
  background: var(--control);
  color: var(--control-text);
  outline: 0;
}

.section-move-button[aria-disabled="true"] {
  border-color: color-mix(in srgb, var(--line), var(--ink) 8%);
  background: color-mix(in srgb, var(--surface), #ffffff 60%);
  color: color-mix(in srgb, var(--muted), transparent 46%);
  cursor: not-allowed;
}

.section-drag-handle {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 18px;
  margin-left: 2px;
  border: 1px solid color-mix(in srgb, currentColor, transparent 52%);
  border-radius: 5px;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.section-drag-handle:active {
  cursor: grabbing;
}

.panel-section.is-section-dragging {
  opacity: 0.48;
}

.panel-section.is-section-drop-before {
  box-shadow: inset 0 4px 0 var(--control), var(--section-shadow, none);
}

.panel-section.is-section-drop-after {
  box-shadow: inset 0 -4px 0 var(--control), var(--section-shadow, none);
}

.panel-section.is-collapsed > :not(.section-collapse-button) {
  display: none !important;
}

.toggle-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.element-group-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: stretch;
  align-items: start;
  column-gap: 8px;
  row-gap: 7px;
  min-width: 0;
}

.route-color-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.route-color-controls label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.route-color-controls input[type="color"] {
  width: 100%;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: transparent;
}

.element-group {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 84px;
  grid-template-columns: none;
  justify-content: center;
  justify-self: center;
  align-content: start;
  gap: 5px;
  margin: 0;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--line), var(--ink) 18%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface), #fff 28%);
}

.element-group[data-element-group="land-sea"],
.element-group[data-element-group="cities"],
.element-group[data-element-group="streets"] {
  grid-column: 1 / -1;
  max-width: 100%;
}

.element-group[data-element-group="borders"] {
  grid-column: 1 / -1;
  justify-self: center;
  width: fit-content;
  max-width: 100%;
}

.element-group legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: 0.63rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.toggle-actions,
.preset-controls,
.road-package-actions {
  display: grid;
  gap: 5px;
}

.toggle-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.preset-controls {
  grid-template-columns: minmax(0, 1fr) 34px;
}

.preset-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.road-package-section {
  display: grid;
  gap: 7px;
}

.rest-day-toggle {
  justify-content: start;
}

.day-sequence-edit-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: 6px;
}

.road-package-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.road-folder-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 750;
}

.panel-global-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.toggle-actions button,
.road-package-actions button,
.preset-controls button,
.preset-controls select,
.preset-actions button,
.panel-global-actions button,
.import-button {
  min-height: 29px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
}

.import-button {
  display: grid;
  place-items: center;
  position: relative;
  text-align: center;
}

.panel-section > .section-collapse-button {
  min-height: 22px;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--section-accent, var(--muted)), #1f2933 58%);
  box-shadow: none !important;
}

.import-button input {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}

.preset-controls select {
  width: 100%;
  padding: 0 8px;
}

.range-control {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 2px 6px;
  align-items: center;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.range-control output {
  grid-column: 2;
  justify-self: center;
  align-self: start;
  margin-top: -2px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
}

.text-control {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.compact-control {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.compact-control select {
  min-height: 28px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fffdf8;
  color: var(--ink);
  font-weight: 800;
}

.text-control input,
.text-control select {
  min-height: 32px;
  width: 100%;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf8;
  color: var(--ink);
  font-weight: 700;
}

#fontStyleTypeface,
#styleTypeface {
  font-size: 1.05rem;
  font-weight: 700;
}

#fontStyleTypeface option,
#styleTypeface option {
  font-size: 1.02rem;
  line-height: 1.4;
}

.route-theme-section {
  display: grid;
  gap: 7px;
}

.trips-panel {
  gap: 8px;
}

.trip-manager-section,
.trip-tier-section,
.route-builder-section,
.day-manager-section,
.media-manager-section {
  display: grid;
  gap: 8px;
}

.trip-create-row,
.day-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

.day-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.day-route-editor {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface), var(--panel) 42%);
}

.day-route-editor[hidden] {
  display: none;
}

.day-route-edit-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
  gap: 7px;
}

.trip-data-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.trip-data-actions .import-button {
  min-width: 0;
}

.zone-default-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.zone-default-actions-bottom {
  margin-top: 6px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}

.zone-default-actions p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.zone-default-actions button,
.zone-modify-toggle {
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid var(--control);
  border-radius: 8px;
  background: var(--control);
  color: var(--control-text);
  font-weight: 800;
  cursor: pointer;
}

.day-zone-modify-panel {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--control), var(--line) 54%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel), var(--surface) 38%);
}

.day-zone-modify-panel[hidden] {
  display: none;
}

.day-zone-modify-panel p {
  margin: 0;
  color: var(--control);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.day-zone-modify-panel hr {
  width: 100%;
  margin: 2px 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.route-zone-mode-controls {
  display: grid;
  gap: 8px;
  grid-column: 1 / -1;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface), var(--panel) 48%);
}

.route-zone-mode-controls[hidden] {
  display: none;
}

.marker-controls-section {
  display: grid;
  gap: 12px;
}

.icon-control-group {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--line), var(--section-accent, var(--control)) 16%);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface), var(--panel) 48%);
}

.icon-image-controls {
  background:
    linear-gradient(90deg, color-mix(in srgb, #ffffff, #86c5ff 12%), transparent),
    color-mix(in srgb, var(--surface), var(--panel) 44%);
}

.icon-shape-controls {
  background:
    linear-gradient(90deg, color-mix(in srgb, #ffffff, #ffd86b 14%), transparent),
    color-mix(in srgb, var(--surface), var(--panel) 44%);
}

.icon-control-heading {
  margin: 0 0 1px;
  color: color-mix(in srgb, var(--section-accent, var(--control)), var(--ink) 34%);
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.marker-stroke-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid color-mix(in srgb, var(--line), transparent 28%);
}

.marker-fill-row {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  justify-content: start;
  justify-self: start;
  gap: 8px;
  align-items: center;
}

.marker-fill-row label {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 32px;
  font-weight: 800;
}

.marker-fill-row input[type="color"],
.marker-stroke-row input[type="color"] {
  width: 34px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.marker-stroke-head span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.marker-stroke-head button,
.marker-stroke-row button {
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid var(--control);
  border-radius: 8px;
  background: var(--control);
  color: var(--control-text);
  font-weight: 800;
  cursor: pointer;
}

.marker-stroke-list {
  display: grid;
  gap: 8px;
  margin-bottom: 2px;
}

.marker-stroke-row {
  display: grid;
  grid-template-columns: 18px 34px 56px 1px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 38px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface), var(--panel) 46%);
}

.marker-stroke-row.is-stroke-hidden {
  opacity: 0.7;
}

.marker-stroke-grip {
  display: block;
  width: 15px;
  height: 18px;
  background:
    repeating-linear-gradient(180deg, var(--muted) 0 2px, transparent 2px 4px);
  background-size: 100% 20px;
  opacity: 0.7;
  cursor: grab;
}

.marker-stroke-row output,
.stroke-visibility-toggle {
  position: relative;
  text-align: center;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 900;
}

.marker-stroke-row .stroke-visibility-toggle {
  display: grid;
  place-items: center;
  width: 56px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  color: transparent;
  font-size: 0;
  line-height: 1;
  text-shadow: none;
  box-shadow: none;
  cursor: pointer;
}

.marker-stroke-row .stroke-visibility-toggle[aria-pressed="false"] {
  opacity: 0.78;
}

.marker-stroke-divider {
  width: 1px;
  height: 24px;
  background: var(--line);
}

.marker-stroke-row input[type="range"] {
  width: 100%;
}

.route-endpoint-marker {
  border: 0;
  background: transparent;
}

.route-endpoint-marker.has-hover-landmark > :where(.endpoint-marker-resting, .endpoint-marker-landmark-hover) {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.route-endpoint-marker.has-hover-landmark .endpoint-marker-landmark-hover {
  visibility: hidden;
  opacity: 0;
}

.route-endpoint-marker.has-hover-landmark:hover .endpoint-marker-resting {
  visibility: hidden;
  opacity: 0;
}

.route-endpoint-marker.has-hover-landmark:hover .endpoint-marker-landmark-hover {
  visibility: visible;
  opacity: 1;
}

.route-endpoint-marker-frame {
  position: relative;
  isolation: isolate;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 2px 5px rgba(31, 41, 51, 0.28));
}

.route-endpoint-marker-svg {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  overflow: visible;
}

.route-endpoint-marker-image-layer {
  position: absolute;
  z-index: 20;
  display: block;
  overflow: visible;
  pointer-events: none;
}

.route-endpoint-marker-frame.is-flashing {
  animation: endpoint-marker-invert 220ms ease-out;
}

.route-endpoint-marker-frame.is-selected {
  filter:
    drop-shadow(0 0 0 rgba(255, 255, 255, 0))
    drop-shadow(0 0 4px rgba(255, 255, 255, 0.98))
    drop-shadow(0 0 8px rgba(20, 67, 163, 0.86));
}

.route-endpoint-marker-glow {
  opacity: 0.82;
  filter: blur(0.35px);
}

.route-playback-icon {
  border: 0;
  background: transparent;
}

.route-playback-icon.is-hidden {
  display: none;
}

.route-playback-icon-frame {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: visible;
  filter: drop-shadow(0 2px 6px rgb(17 24 39 / 0.32));
  color: #fffdf8;
}

.route-playback-icon-shape {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 2px 4px rgb(17 24 39 / 0.28));
}

.route-playback-icon-image-strokes {
  position: absolute;
  inset: 0;
  z-index: 18;
  display: block;
  overflow: visible;
  pointer-events: none;
}

.route-playback-icon-image-fill {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  overflow: visible;
  pointer-events: none;
}

.route-playback-icon-image-composite {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: block;
  overflow: visible;
  pointer-events: none;
}

.route-playback-icon-image {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  transform: translateZ(0);
}

.route-playback-icon-content {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.route-playback-icon .material-symbols-rounded {
  font-size: clamp(13px, 62%, 34px);
  line-height: 1;
  transform: rotate(90deg);
}

.route-animation-icon-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  align-items: stretch;
  margin-top: 0;
}

.route-animation-icon-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-content: start;
}

.route-animation-icon-picker {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 8px;
  margin-top: 0;
}

.marker-controls-section .route-animation-icon-picker {
  grid-template-columns: minmax(0, 1fr);
}

.marker-controls-section .marker-preview {
  justify-self: center;
}

.route-animation-icon-actions .file-control,
.route-animation-icon-actions .text-control,
.route-animation-icon-actions .route-animation-export-button {
  margin: 0;
  width: 100%;
  justify-self: start;
}

.route-animation-icon-actions .file-control {
  grid-column: 1 / -1;
  max-width: 240px;
}

.route-animation-icon-actions .text-control {
  gap: 3px;
  min-width: 0;
}

.route-animation-icon-actions .route-animation-export-button {
  align-self: end;
  width: auto;
  min-width: 132px;
  white-space: nowrap;
}

.route-animation-export-button {
  width: auto;
  margin: 0;
  min-height: 34px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.route-animation-export-button:hover:not(:disabled) {
  border-color: var(--accent);
  box-shadow: 0 2px 6px rgb(17 24 39 / 0.14);
}

.route-animation-export-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.route-animation-icon-preview-wrap {
  display: grid;
  place-items: center;
  min-height: 116px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--line), transparent 18%);
  border-radius: 9px;
  background:
    linear-gradient(45deg, color-mix(in srgb, var(--surface), #fff 18%) 25%, transparent 25% 75%, color-mix(in srgb, var(--surface), #fff 18%) 75%),
    linear-gradient(45deg, color-mix(in srgb, var(--surface), #fff 18%) 25%, transparent 25% 75%, color-mix(in srgb, var(--surface), #fff 18%) 75%);
  background-color: color-mix(in srgb, var(--panel), var(--surface) 42%);
  background-position: 0 0, 8px 8px;
  background-size: 16px 16px;
  overflow: visible;
  cursor: context-menu;
}

.secondary-preview-source,
.route-animation-icon-preview-wrap.secondary-preview-source {
  display: none;
}

.route-animation-icon-preview {
  position: relative;
  display: grid;
  place-items: center;
  width: 132px;
  height: 104px;
  overflow: visible;
}

.position-nudge-pad {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms ease;
}

.route-animation-icon-preview-wrap:hover .position-nudge-pad,
.route-animation-icon-preview:hover .position-nudge-pad,
.marker-preview:hover .position-nudge-pad,
.landmark-preview:hover .position-nudge-pad,
.landmark-tile:hover .position-nudge-pad,
.default-landmark-tile:hover .position-nudge-pad,
.position-nudge-pad:focus-within {
  opacity: 1;
}

.position-nudge-arrow {
  position: absolute;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  min-height: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--control), #fff 30%);
  border-radius: 999px;
  background: rgb(255 253 248 / 0.86);
  color: var(--control);
  font-size: 0.62rem;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 2px 6px rgb(31 41 51 / 0.2);
  cursor: pointer;
  pointer-events: auto;
}

.position-nudge-top {
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
}

.position-nudge-right {
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
}

.position-nudge-bottom {
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
}

.position-nudge-left {
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
}

.marker-preview,
.landmark-tile {
  cursor: context-menu;
}

.route-animation-icon-section .toggle-button:has(#routeAnimationIconEnabled) {
  border-color: transparent;
  background: transparent;
  color: var(--ink);
  padding-inline: 0;
}

.route-animation-icon-section .toggle-button:has(#routeAnimationIconEnabled:checked) {
  border-color: transparent;
  background: transparent;
  color: var(--ink);
}

.route-animation-icon-colors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.shape-layer-toggle {
  justify-content: start;
  min-height: 32px;
}

.route-animation-icon-colors label {
  display: grid;
  grid-template-columns: auto 34px;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.route-animation-icon-colors label:has(select) {
  grid-template-columns: auto minmax(0, 1fr);
}

.route-animation-icon-colors .route-animation-fill-toggle {
  grid-template-columns: auto minmax(0, 1fr);
  justify-content: start;
}

.route-animation-icon-colors .route-animation-fill-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--route);
}

.route-animation-icon-section .marker-stroke-list.is-disabled {
  opacity: 0.48;
  filter: grayscale(0.35);
}

.route-animation-icon-colors input[type="color"] {
  width: 34px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
}

@keyframes endpoint-marker-invert {
  0% {
    filter: invert(1) contrast(1.35) brightness(1.08);
  }
  100% {
    filter: invert(0) contrast(1) brightness(1);
  }
}

.zone-modify-map-prompt {
  position: absolute;
  top: 12px;
  left: 50%;
  z-index: 825;
  transform: translateX(-50%);
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--control), #fff 32%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel), #fff 8%);
  box-shadow: 0 10px 24px rgba(31, 41, 51, 0.22);
  color: var(--control);
  font-size: 0.82rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  pointer-events: none;
}

.usage-overlay {
  position: absolute;
  right: 10px;
  bottom: 34px;
  z-index: 1200;
  max-width: min(520px, calc(100% - 24px));
  padding: 6px 9px;
  border: 1px solid rgb(17 24 39 / 0.42);
  border-radius: 7px;
  background: rgb(255 253 248 / 0.92);
  box-shadow:
    0 0 0 1px rgb(255 253 248 / 0.7),
    0 4px 12px rgb(17 24 39 / 0.28);
  color: #111827;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.15;
  pointer-events: none;
  backdrop-filter: blur(3px);
}

.zone-modify-map-prompt[hidden] {
  display: none;
}

.trip-export-dialog {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(31, 41, 51, 0.36);
}

.trip-export-dialog[hidden] {
  display: none;
}

.trip-export-card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: min(440px, 100%);
  max-height: min(620px, calc(100vh - 36px));
  border: 1px solid color-mix(in srgb, var(--line), var(--ink) 18%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel), #fff 8%);
  box-shadow: 0 22px 56px rgba(31, 41, 51, 0.28);
}

.trip-export-head {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line);
}

.trip-export-format {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
  padding: 10px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
}

.trip-export-format legend {
  padding: 0;
  margin-right: 4px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.trip-export-format label {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface), var(--panel) 38%);
  font-weight: 800;
  cursor: pointer;
}

.trip-export-list {
  display: grid;
  gap: 7px;
  min-height: 120px;
  padding: 12px 16px;
  overflow: auto;
}

.trip-export-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface), var(--panel) 42%);
  cursor: pointer;
}

.trip-export-option input {
  width: 16px;
  height: 16px;
}

.trip-export-option span {
  overflow-wrap: anywhere;
  font-size: 0.88rem;
  font-weight: 700;
}

.route-import-card {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.route-import-options {
  display: grid;
  gap: 10px;
  padding: 12px 16px;
}

.trip-export-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--line);
}

.trip-export-actions button {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--control);
  border-radius: 8px;
  background: var(--control);
  color: var(--control-text);
  font-weight: 800;
  cursor: pointer;
}

.trip-export-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.landmark-default-card {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  width: min(620px, calc(100vw - 32px));
  max-width: 620px;
  max-height: min(760px, calc(100vh - 32px));
}

.save-all-card {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  max-width: 480px;
}

.save-all-note {
  margin: 10px 16px 2px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.35;
}

.save-all-options {
  margin-top: 2px;
}

.save-all-card .trip-export-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.landmark-default-bulk-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 16px 0;
}

.landmark-default-bulk-actions button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface), #fff 24%);
  color: var(--ink);
  font-weight: 850;
}

.landmark-default-options {
  display: grid;
  gap: 8px;
  margin: 10px 16px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
}

.landmark-default-options legend {
  padding: 0 5px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.landmark-default-options label {
  display: flex;
  gap: 8px;
  align-items: center;
  font-weight: 750;
}

.landmark-default-target-options {
  min-height: 0;
  overflow: auto;
}

.landmark-default-target-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}

.landmark-default-target-actions button {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface), #fff 20%);
  color: var(--ink);
  font-weight: 800;
}

.landmark-default-targets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 12px;
}

.landmark-default-targets label {
  min-width: 0;
}

.landmark-default-targets span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landmark-global-size-control {
  grid-column: 1 / -1;
}

.trip-create-row input,
.trips-panel select,
.trips-panel textarea {
  width: 100%;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf8;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
}

.trips-panel input.required-missing {
  border-color: #b42318;
  background: #fff4f2;
  box-shadow: 0 0 0 1px #b42318;
}

.trips-panel input.required-missing::placeholder {
  color: #b42318;
  font-weight: 900;
  opacity: 1;
}

.trips-panel textarea {
  resize: vertical;
}

.trips-panel button {
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
}

.trips-panel button:disabled,
.trips-panel input:disabled,
.trips-panel textarea:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.trips-panel .primary-action {
  border-color: var(--control);
  background: var(--control);
  color: var(--control-text);
}

.trips-panel .danger-action {
  border-color: color-mix(in srgb, #9f2d1e, var(--line) 35%);
  color: #8f281c;
}

.address-route-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.field-label-inline {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  min-height: 18px;
}

.field-label-inline > label:first-child {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.inline-start-toggle {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
}

.inline-start-toggle[hidden] {
  display: none;
}

.inline-start-toggle input {
  width: 13px;
  height: 13px;
  margin: 0;
  accent-color: var(--control);
}

.route-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.route-divider::before,
.route-divider::after {
  content: "";
  height: 1px;
  background: var(--line);
}

.route-file-control {
  min-height: 38px;
}

.route-service-note,
.trip-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

.trip-status {
  min-height: 20px;
  padding: 0 4px;
  font-weight: 800;
}

.trip-status.is-error {
  color: #9f2d1e;
}

.trip-day-list,
.trip-media-list {
  display: grid;
  gap: 0;
}

.trip-day-button {
  border-radius: 0;
}

.trip-day-list > .trip-day-button:first-child {
  border-radius: 7px 7px 0 0;
}

.trip-day-list > .trip-day-button:last-child {
  border-radius: 0 0 7px 7px;
}

.journey-break-row {
  display: grid;
  grid-template-columns: minmax(12px, 1fr) auto minmax(12px, 1fr);
  align-items: center;
  gap: 6px;
  min-height: 18px;
  color: var(--muted);
  font-size: 0.58rem;
  line-height: 1;
  cursor: grab;
}

.journey-break-row > span {
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--control), var(--line) 32%);
}

.journey-break-row > strong {
  max-width: 58%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journey-break-row:active {
  cursor: grabbing;
}

.journey-break-row.is-fixed {
  cursor: default;
}

.leaflet-journey-overview-route {
  cursor: pointer;
  transition: stroke-width 140ms ease, stroke-opacity 140ms ease;
}

.journey-overview-tooltip {
  border: 1px solid color-mix(in srgb, var(--line), #fff 35%);
  border-radius: 7px;
  background: color-mix(in srgb, var(--panel), #fff 8%);
  box-shadow: 0 3px 12px rgb(0 0 0 / 0.22);
  color: var(--ink);
  font-weight: 800;
}

.trip-stop-button.is-break-drop-target {
  box-shadow: inset 0 -4px 0 var(--accent);
}

.trip-day-list-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: stretch;
}

.trip-day-list-toolbar .toggle-button {
  min-width: 0;
}

.trip-day-list-mode {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 5px;
  padding-left: 8px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.trip-day-list-mode select {
  min-width: 0;
  width: auto;
}

.trip-day-list.is-scrollable {
  max-height: min(42vh, 330px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 3px;
  scrollbar-gutter: stable;
}

.trip-compact-selector {
  width: 100%;
  min-height: 34px;
}

.media-target-control,
.media-numbering-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.media-order-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface), var(--panel) 42%);
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 750;
  cursor: pointer;
}

.media-order-toggle input {
  margin: 0;
  accent-color: var(--control);
}

.landmarks-section {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--line), var(--ink) 14%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface), #ffffff 26%);
}

.landmark-global-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 7px;
  align-items: end;
}

.journey-landmark-panel {
  gap: 6px;
}

.journey-landmark-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.journey-landmark-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 5px 7px;
  text-align: left;
}

.journey-landmark-card > span:last-child {
  display: grid;
  min-width: 0;
}

.journey-landmark-card small {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journey-landmark-card-preview {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  overflow: visible;
}

.journey-landmark-card-preview > * {
  position: absolute;
  inset: 0;
}

.landmark-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 10px 7px;
}

.landmark-image-dialog {
  z-index: 1800;
}

.landmark-image-card {
  width: min(1040px, calc(100vw - 32px));
  max-height: min(820px, calc(100vh - 32px));
  overflow: hidden;
}

.landmark-image-source-actions,
.landmark-catalog-search,
.landmark-catalog-foot {
  display: flex;
  gap: 10px;
  align-items: center;
}

.landmark-image-source-actions span,
.landmark-catalog-foot {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
}

.landmark-catalog-search .text-control {
  flex: 1 1 auto;
  margin: 0;
}

.landmark-catalog-search > button {
  align-self: end;
}

.landmark-catalog-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
  min-height: 130px;
  max-height: min(54vh, 560px);
  padding: 2px;
  overflow: auto;
}

.landmark-catalog-card {
  display: grid;
  grid-template-rows: 150px minmax(0, 1fr);
  gap: 7px;
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}

.landmark-catalog-card > img {
  width: 100%;
  height: 150px;
  border-radius: 6px;
  object-fit: contain;
  background: color-mix(in srgb, var(--surface), #000 5%);
}

.landmark-catalog-card > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.landmark-catalog-card strong,
.landmark-catalog-card span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.landmark-catalog-card strong {
  -webkit-line-clamp: 2;
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1.15;
}

.landmark-catalog-card span {
  -webkit-line-clamp: 2;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.2;
}

.landmark-catalog-card > div > div {
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.landmark-catalog-foot {
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

@media (max-width: 680px) {
  .landmark-image-source-actions,
  .landmark-catalog-search,
  .landmark-catalog-foot {
    align-items: stretch;
    flex-direction: column;
  }

  .landmark-catalog-results {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

.default-landmark-tile {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 86px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--line), var(--control) 22%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface), #fff 32%);
  cursor: pointer;
}

.default-landmark-tile.is-selected {
  border-color: var(--control);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--control), transparent 55%);
}

.default-landmark-tile-preview {
  display: grid;
  place-items: center;
  min-width: 0;
  height: 70px;
}

.default-landmark-tile-preview .route-endpoint-marker-frame {
  transform: scale(0.82);
}

.default-landmark-tile-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.default-landmark-tile-text strong {
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.05;
}

.default-landmark-tile-text span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.25;
}

.landmark-tile {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 1px;
  aspect-ratio: 0.78;
  min-width: 0;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: visible;
  background:
    linear-gradient(45deg, rgba(31, 41, 51, 0.05) 25%, transparent 25% 75%, rgba(31, 41, 51, 0.05) 75%),
    linear-gradient(45deg, rgba(31, 41, 51, 0.05) 25%, transparent 25% 75%, rgba(31, 41, 51, 0.05) 75%),
    var(--surface);
  background-position: 0 0, 8px 8px;
  background-size: 16px 16px;
  cursor: pointer;
}

.landmark-tile.is-selected {
  border-color: var(--control);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--control), transparent 45%);
}

.landmark-tile:hover,
.landmark-tile:focus-visible {
  border-color: var(--control);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--control), transparent 70%);
  outline: 0;
}

.landmark-tile-name {
  display: grid;
  justify-items: center;
  min-width: 0;
  max-width: 100%;
  padding: 1px 4px 2px;
  border-radius: 5px;
  background: rgb(255 255 255 / 0.74);
  color: #172033;
  line-height: 1;
  text-align: center;
}

.landmark-town-name {
  max-width: 100%;
  font-size: 0.62rem;
  font-weight: 550;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.landmark-state-abbr {
  max-width: 100%;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.landmark-tile img {
  align-self: end;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 8px;
  object-fit: contain;
}

.landmark-save-icon {
  position: absolute;
  top: -10%;
  right: -10%;
  z-index: 4;
  width: 25%;
  aspect-ratio: 1;
  min-width: 16px;
  border: 1px solid color-mix(in srgb, var(--control), #000 18%);
  border-radius: 4px;
  background:
    linear-gradient(var(--surface) 0 28%, transparent 28%),
    linear-gradient(90deg, transparent 0 58%, color-mix(in srgb, var(--ink), transparent 22%) 58% 78%, transparent 78%),
    var(--control);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.22);
}

.landmark-save-icon::after {
  content: "";
  position: absolute;
  left: 24%;
  right: 24%;
  bottom: 13%;
  height: 28%;
  border-radius: 2px;
  background: var(--surface);
}

.landmark-selected-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.landmark-preview {
  min-height: 118px;
}

.marker-preview {
  min-height: 96px;
}

.landmark-preview-icon {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.shape-heading-inline {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.shape-heading-inline input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--route);
}

.landmark-style-controls {
  display: grid;
  gap: 12px;
}

.landmark-scope-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--line), transparent 18%);
}

.landmark-scope-controls .toggle-button,
.landmark-scope-controls .text-control,
.landmark-scope-controls button {
  min-width: 0;
}

.landmark-scope-controls .toggle-button {
  grid-column: 1 / -1;
}

.trip-day-button {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
}

.trip-day-button strong,
.trip-day-button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trip-day-button span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-align: right;
}

.trip-day-button[aria-pressed="true"] {
  border-color: var(--control);
  background: color-mix(in srgb, var(--control), var(--surface) 82%);
}

.trip-media-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  transition: opacity 120ms ease, transform 120ms ease;
}

.trip-media-row.is-manual-order {
  grid-template-columns: 28px minmax(0, 1fr) auto;
}

.trip-media-row.is-dragging {
  z-index: 2;
  opacity: 0.58;
  transform: scale(0.99);
}

.trip-media-row-actions {
  display: grid;
  gap: 5px;
  align-content: center;
}

.trip-media-reload {
  display: grid;
  place-items: center;
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
}

.trip-media-reload:hover {
  border-color: var(--control);
}

.trip-media-reload input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.trip-media-drag-handle {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 0;
  cursor: grab;
  touch-action: none;
}

.trip-media-drag-handle[hidden] {
  display: none;
}

.trip-media-drag-handle.is-dragging {
  cursor: grabbing;
}

.trip-media-drag-handle span,
.trip-media-drag-handle span::before,
.trip-media-drag-handle span::after {
  display: block;
  width: 14px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.trip-media-drag-handle span {
  position: relative;
}

.trip-media-drag-handle span::before,
.trip-media-drag-handle span::after {
  position: absolute;
  left: 0;
  content: "";
}

.trip-media-drag-handle span::before {
  top: -5px;
}

.trip-media-drag-handle span::after {
  top: 5px;
}

.trip-media-open {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  overflow: hidden;
  text-align: left;
}

.trip-media-open[aria-pressed="true"] {
  border-color: var(--control);
  background: color-mix(in srgb, var(--control), var(--surface) 84%);
}

.trip-media-list-thumb {
  display: grid;
  place-items: center;
  width: 38px;
  height: 34px;
  overflow: hidden;
  border-radius: 7px;
  background: var(--media-pin-color, var(--control));
  color: #fff;
  font-size: 1rem;
}

.trip-media-list-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trip-media-open-copy {
  min-width: 0;
}

.trip-media-open-copy strong,
.trip-media-open-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trip-media-open-copy span {
  color: var(--muted);
  font-size: 0.68rem;
}

.media-blog-form,
.media-location-editor {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface), var(--panel) 42%);
}

.media-blog-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.media-blog-form input.is-modified,
.media-blog-form textarea.is-modified {
  border-color: #7aa7c7;
  background: #eaf5fc;
  box-shadow: inset 0 0 0 1px rgb(122 167 199 / 0.28);
}

.media-pin-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr);
  gap: 6px;
  align-items: end;
}

.media-thumbnail-options {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 7px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface), var(--panel) 24%);
}

.media-thumbnail-preview {
  display: grid;
  place-items: center;
  width: 48px;
  height: 38px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: #fff;
  background: #313b48;
  font-weight: 900;
}

.media-thumbnail-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-thumbnail-copy {
  display: grid;
  min-width: 0;
  line-height: 1.2;
}

.media-thumbnail-copy span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-thumbnail-upload {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-height: 32px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--control);
  font-weight: 800;
  cursor: pointer;
}

.media-thumbnail-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

@media (max-width: 720px) {
  .media-thumbnail-options {
    grid-template-columns: 48px minmax(0, 1fr);
  }
}

.media-pin-options input[type="color"] {
  width: 100%;
  height: 34px;
  min-height: 34px;
  padding: 3px;
  cursor: pointer;
}

.media-location-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.trip-media-preview img {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  border-radius: 8px;
  background: #111;
}

.trip-media-preview audio,
.trip-media-preview video {
  display: block;
  width: 100%;
  max-height: 260px;
  border-radius: 8px;
  background: #111;
}

.trip-media-preview article {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  white-space: pre-wrap;
}

.media-pin-marker {
  --media-pin-color: #2f6fbb;
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 3px solid #fffdf8;
  border-radius: 12px 12px 12px 3px;
  background: var(--media-pin-color);
  box-shadow: 0 3px 10px rgb(17 24 39 / 0.38);
  color: #fff;
  font-size: 1.15rem;
  transform: rotate(-45deg);
  overflow: hidden;
}

.media-pin-marker > * {
  transform: rotate(45deg);
}

.media-pin-marker img {
  position: absolute;
  inset: -22%;
  width: 144%;
  height: 144%;
  max-width: none;
  border-radius: 0;
  object-fit: cover;
  pointer-events: none;
}

.media-pin-marker.media-pin-style-slot-1 {
  border-radius: 50% 50% 50% 3px;
}

.media-pin-marker.media-pin-style-slot-2 {
  border-width: 5px;
  box-shadow: 0 0 0 2px var(--media-pin-color), 0 3px 10px rgb(17 24 39 / 0.38);
}

.media-pin-icon.leaflet-marker-draggable {
  cursor: grab;
}

.media-pin-icon.leaflet-marker-draggable.leaflet-drag-target {
  cursor: grabbing;
}

.map-canvas.is-placing-media-pin {
  cursor: crosshair;
}

.route-theme-section {
  position: fixed;
  top: var(--theme-picker-top, 0);
  left: var(--theme-picker-left, 0);
  right: auto;
  bottom: var(--theme-picker-bottom, 0);
  z-index: 120;
  display: none;
  align-content: start;
  width: var(--theme-picker-width, 360px);
  max-height: none;
  overflow: auto;
  background: color-mix(in srgb, var(--panel), var(--surface) 28%);
  border-top: 8px solid color-mix(in srgb, var(--panel), var(--surface) 18%);
  box-shadow: 0 18px 46px rgba(31, 41, 51, 0.28);
  transform-origin: top left;
  animation: theme-picker-birth 260ms cubic-bezier(0.2, 0.85, 0.22, 1.12);
}

#panelElements > .route-theme-section {
  grid-column: 1 / -1;
}

#panelElements.theme-picker-open .route-theme-section {
  display: grid;
}

.route-theme-panel-head {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  gap: 10px;
  align-items: center;
  margin: -17px -9px 0;
  padding: 17px 9px 8px;
  border-radius: 8px 8px 0 0;
  background: color-mix(in srgb, var(--panel), var(--surface) 18%);
  box-shadow: 0 1px 0 var(--line), 0 10px 18px color-mix(in srgb, var(--panel), transparent 28%);
}

#panelElements.theme-picker-closing .route-theme-section {
  display: grid;
  animation: theme-picker-unbirth 210ms cubic-bezier(0.42, 0, 0.7, 1) forwards;
}

#panelElements.theme-picker-closing .route-theme-panel-head button {
  animation: done-button-unbirth 150ms ease-in forwards;
}

@keyframes theme-picker-birth {
  0% {
    opacity: 0;
    transform: translateX(-18px) scaleX(0.08) rotateY(-18deg);
  }
  72% {
    opacity: 1;
    transform: translateX(7px) scaleX(1.02) rotateY(0);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scaleX(1) rotateY(0);
  }
}

@keyframes theme-picker-unbirth {
  0% {
    opacity: 1;
    transform: translateX(0) scaleX(1) rotateY(0);
  }
  28% {
    opacity: 1;
    transform: translateX(-6px) scaleX(1.01) rotateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(24px) scaleX(0.08) rotateY(18deg);
  }
}

@keyframes done-button-birth {
  from {
    opacity: 0;
    transform: translate(-10px, -38px) scale(0.2, 0.55);
  }
  to {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

@keyframes done-button-unbirth {
  from {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(-10px, -38px) scale(0.2, 0.55);
  }
}

.theme-actions {
  display: grid;
}

.theme-actions button {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
}

.provider-status {
  min-height: 1.2em;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.map-style-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#panelElements .route-theme-grid {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  align-items: stretch;
  grid-auto-rows: auto;
}

.route-theme-group-heading {
  grid-column: 1 / -1;
  margin: 8px 0 -2px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.map-style-card {
  position: relative;
  min-height: 132px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 28% 28%, rgba(255, 255, 255, 0.62), transparent 24%),
    repeating-radial-gradient(ellipse at 58% 54%, transparent 0 9px, rgba(31, 41, 51, var(--stadia-contours, 0.18)) 10px 11px, transparent 12px 18px),
    linear-gradient(135deg, var(--stadia-a), var(--stadia-b)),
    #f7f3eb;
  color: var(--ink);
  text-align: center;
  cursor: pointer;
}

.map-style-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(31, 41, 51, 0.12) 1px, transparent 1px),
    linear-gradient(rgba(31, 41, 51, 0.09) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0.18;
}

.map-style-card[aria-pressed="true"] {
  border-color: var(--control);
  box-shadow: inset 0 0 0 2px var(--control);
}

.map-style-card strong,
.map-style-card span {
  position: relative;
  z-index: 1;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgb(var(--stadia-card-text-bg-rgb) / var(--stadia-card-text-bg-opacity));
  color: color-mix(in srgb, var(--stadia-card-text), #111827 64%);
}

.map-style-card strong {
  margin-top: 28px;
  font-size: 1.06rem;
  line-height: 1.1;
  font-weight: 950;
}

.map-style-card span {
  margin-top: 4px;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.15;
}

.route-theme-grid .map-style-card {
  min-height: 108px;
}

#panelElements .route-theme-grid .map-style-card {
  min-height: 122px;
}

.route-theme-card-add {
  --stadia-a: #f4ead6;
  --stadia-b: #d8d0c2;
  --stadia-contours: 0.12;
}

.range-control input {
  width: 100%;
}

.toggle-button {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  padding: 5px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f3eb;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
}

.toggle-button:has(input:checked) {
  border-color: var(--control);
  background: var(--control);
  color: var(--control-text);
}

.toggle-button input {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin: 0;
  accent-color: var(--route);
}

.element-control {
  --element-radius: 19px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 25px 59px;
  width: 84px;
  height: 84px;
  max-width: 84px;
  min-height: 84px;
  min-width: 0;
  justify-self: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--element-radius);
  background: #f7f3eb;
  transition:
    border-radius 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.element-control::after {
  content: "";
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  height: 15px;
  border-radius: 0 0 calc(var(--element-radius) - 1px) calc(var(--element-radius) - 1px);
  background: var(--swatch, transparent);
  pointer-events: none;
}

.element-control:has(.route-stack-control) {
  grid-template-rows: 25px 59px;
  min-height: 84px;
}

.element-control:has(.route-stack-control)::after {
  display: none;
}

.element-control:has(.route-stack-control) .element-select-button {
  padding-bottom: 28px;
}

.route-stack-control {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  height: 27px;
  padding: 2px 3px;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--swatch), var(--ink) 24%);
  border-radius: 0 0 calc(var(--element-radius) - 1px) calc(var(--element-radius) - 1px);
  background: var(--swatch, var(--control));
  color: var(--stack-label-color, #fff);
  font-size: 0.53rem;
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
}

.route-stack-control:hover,
.route-stack-control:focus-visible {
  filter: brightness(1.12);
}

.element-control:hover {
  border-radius: 22px;
  transform: translateY(-1px);
  border-color: var(--swatch, var(--control));
  box-shadow:
    0 0 0 2px var(--swatch, var(--control)),
    0 0 8px 3px color-mix(in srgb, var(--swatch, var(--control)), transparent 28%);
}

.element-control.is-selected {
  border-color: var(--control);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--control), transparent 62%);
}

.element-control.is-selected:hover {
  border-color: var(--swatch, var(--control));
  box-shadow:
    0 0 0 2px var(--swatch, var(--control)),
    0 0 8px 3px color-mix(in srgb, var(--swatch, var(--control)), transparent 28%);
}

.element-select-button {
  position: relative;
  z-index: 1;
  display: grid;
  grid-column: 1;
  grid-row: 2;
  place-items: center;
  min-width: 0;
  padding: 5px 5px 17px;
  border: 0;
  border-radius: 0 0 var(--element-radius) var(--element-radius);
  background: transparent;
  color: var(--ink);
  font-size: 0.69rem;
  font-weight: 600;
  line-height: 1.18;
  cursor: pointer;
}

.element-select-button:disabled {
  cursor: default;
}

.element-control:has(.element-select-button:disabled):hover {
  transform: none;
  border-color: var(--line);
  box-shadow: none;
}

.element-select-button span {
  display: block;
  overflow: visible;
  text-align: center;
  white-space: normal;
}

.element-control.is-selected .element-select-button {
  background: color-mix(in srgb, var(--control), #fff 84%);
  color: var(--control);
}

.element-toggle-zone {
  position: relative;
  z-index: 2;
  display: grid;
  grid-column: 1;
  grid-row: 1;
  place-items: center;
  align-self: stretch;
  margin: 0 4px;
  border-radius: var(--element-radius) var(--element-radius) 0 0;
  background: color-mix(in srgb, var(--surface), var(--control) 8%);
  cursor: pointer;
}

.element-toggle-zone::before {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 0;
  left: 3px;
  height: 1px;
  background: color-mix(in srgb, var(--line), var(--ink) 20%);
}

.element-toggle-zone input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.element-toggle-zone span {
  position: relative;
  width: 12px;
  height: 12px;
  border: 1.25px solid color-mix(in srgb, var(--line), var(--ink) 42%);
  border-radius: 3px;
  background: #fffdf8;
}

.element-toggle-zone input:checked + span {
  border-color: var(--route);
  background: var(--route);
}

.element-toggle-zone input:checked + span::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 3px;
  width: 4px;
  height: 7px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.element-toggle-zone:has(input:checked) {
  background: color-mix(in srgb, var(--control), #fff 78%);
}

.element-toggle-zone:has(input:focus-visible) {
  outline: 2px solid var(--control);
  outline-offset: -3px;
}

.overview-dead-zone-preview {
  mix-blend-mode: difference;
  filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 2px #fff);
  pointer-events: none;
}

.help-tooltip {
  position: fixed;
  z-index: 2000;
  width: max-content;
  max-width: min(320px, calc(100vw - 24px));
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--control), #fff 35%);
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel), #fff 8%);
  box-shadow: 0 8px 24px rgb(17 24 39 / 0.28);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.4;
  white-space: normal;
  pointer-events: none;
}

.help-tooltip[hidden] {
  display: none;
}

.city-label {
  display: inline-block;
  padding: 2px 4px;
  border-radius: 4px;
  background: rgb(var(--label-bg-rgb, 255 255 255) / var(--label-bg-opacity, 0.86));
  box-shadow: 0 1px 4px rgba(31, 41, 51, 0.18);
  color: #25313d;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  transform-origin: center;
  text-shadow:
    0 var(--label-halo-width, 1px) 0 var(--label-halo),
    var(--label-halo-width, 1px) 0 0 var(--label-halo),
    0 calc(var(--label-halo-width, 1px) * -1) 0 var(--label-halo),
    calc(var(--label-halo-width, 1px) * -1) 0 0 var(--label-halo),
    var(--label-halo-width, 1px) var(--label-halo-width, 1px) 0 var(--label-halo),
    calc(var(--label-halo-width, 1px) * -1) var(--label-halo-width, 1px) 0 var(--label-halo),
    var(--label-halo-width, 1px) calc(var(--label-halo-width, 1px) * -1) 0 var(--label-halo),
    calc(var(--label-halo-width, 1px) * -1) calc(var(--label-halo-width, 1px) * -1) 0 var(--label-halo),
    0 2px 4px rgba(31, 41, 51, 0.22);
  white-space: nowrap;
}

.city-label.small-town {
  color: #5d6874;
  font-size: 0.7rem;
  font-weight: 600;
}

.city-label.capital {
  color: #7f2c1e;
}

.route-zone-label {
  display: block;
  width: 124px;
  padding: 6px 7px;
  border: 2px solid color-mix(in srgb, var(--zone-color, #25313d), #fff 55%);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.98);
  box-shadow:
    0 0 0 2px rgba(255, 253, 248, 0.76),
    0 10px 26px rgba(31, 41, 51, 0.22);
  pointer-events: none;
}

.route-zone-label-icon {
  border: 0;
  background: transparent;
}

.route-zone-label strong,
.route-zone-label span {
  display: block;
}

.route-zone-label strong {
  color: var(--zone-color, #13202c);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.route-zone-label span {
  margin-top: 3px;
  color: color-mix(in srgb, var(--zone-color, #24435f), #13202c 32%);
  font-size: 0.62rem;
  line-height: 1.18;
  font-weight: 800;
}

.route-waypoint-edit-icon {
  border: 0;
  background: transparent;
}

.route-waypoint-edit-icon span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid rgb(255 253 248 / 0.88);
  border-radius: 50% 50% 50% 4px;
  background: rgb(37 49 61 / 0.68);
  color: rgb(255 253 248 / 0.92);
  box-shadow: 0 3px 10px rgb(31 41 51 / 0.22);
  font-size: 0.62rem;
  font-weight: 900;
}

.route-waypoint-popup {
  display: grid;
  gap: 8px;
  min-width: 170px;
}

.route-waypoint-popup p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.route-waypoint-popup button {
  min-height: 32px;
  border: 1px solid color-mix(in srgb, #9f2d1e, var(--line) 35%);
  border-radius: 8px;
  background: #fff6f2;
  color: #7f2c1e;
  font-weight: 900;
  cursor: pointer;
}

.route-waypoint-manager {
  display: grid;
  gap: 5px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 2px solid color-mix(in srgb, var(--line), transparent 15%);
}

.route-waypoint-manager[hidden] { display: none; }

.route-waypoint-manager-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 0.7rem;
}

.route-waypoint-list { display: grid; gap: 3px; }

.route-waypoint-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 28px 28px 28px;
  align-items: center;
  gap: 3px;
}

.route-waypoint-row input,
.route-waypoint-row button { min-width: 0; min-height: 28px; }
.route-waypoint-row button { padding: 2px; }
.route-waypoint-handle { cursor: grab; text-align: center; font-size: 1rem; }

.topography-tiles {
  filter: grayscale(1) contrast(1.12);
}

.stadia-tiles {
  filter: var(--stadia-filter, none);
}

.style-panel {
  position: fixed;
  z-index: 10000;
  display: grid;
  gap: 8px;
  right: 10px;
  width: min(520px, calc(100vw - 20px));
  max-height: calc(100vh - 20px);
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf8;
  box-shadow: 0 18px 48px rgba(31, 41, 51, 0.24);
}

.style-panel[data-section-color] {
  border-color: color-mix(in srgb, var(--section-accent), var(--ink) 14%);
  border-left-width: 5px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--section-accent), transparent 84%), transparent 42%),
    var(--section-tint);
}

.style-twirl {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel), var(--surface) 44%);
}

.style-twirl[open] {
  gap: 8px;
}

.style-twirl[hidden] {
  display: none;
}

.style-twirl summary {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.style-twirl summary.color-summary {
  display: flex;
  align-items: center;
  gap: 7px;
  list-style: none;
}

.style-twirl summary.color-summary::before {
  content: ">";
  flex: 0 0 auto;
  font-size: 0.7rem;
  transition: transform 150ms ease;
}

.style-twirl[open] summary.color-summary::before {
  transform: rotate(90deg);
}

.style-twirl summary.color-summary::-webkit-details-marker {
  display: none;
}

.color-summary .style-preview {
  flex: 1 1 auto;
  margin-left: 4px;
}

.style-twirl > *:not(summary) {
  margin-top: 8px;
}

.style-twirl > [hidden] {
  display: none !important;
}

.style-twirl summary.texture-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.texture-summary-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: none;
  letter-spacing: 0;
}

.texture-summary-toggle input {
  width: 15px;
  height: 15px;
}

.texture-compatibility-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.texture-compatibility-row strong {
  color: var(--texture-compatibility-color, #111827);
  font-variant-numeric: tabular-nums;
}

.texture-compatibility-row button {
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 850;
  cursor: pointer;
}

.style-panel[hidden] {
  display: none;
}

.style-panel.inline-style-panel {
  position: static;
  z-index: auto;
  width: 100%;
  max-height: none;
  overflow: visible;
  box-shadow: none;
  background: transparent;
  padding: 0;
  border: 0;
}

.style-panel.inline-style-panel .style-panel-head {
  cursor: default;
}

.style-panel.inline-style-panel .style-panel-head button {
  display: none;
}

.style-panel.inline-style-panel > label {
  max-width: 360px;
}

.style-panel.inline-style-panel .style-twirl {
  align-content: start;
}

.style-panel.inline-style-panel .texture-choice-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.style-panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  cursor: grab;
}

.elements-style-drawer {
  position: absolute;
  top: 10px;
  right: 0;
  bottom: calc(var(--playback-dock-height) + 10px);
  z-index: 760;
  width: clamp(300px, 29vw, 420px);
  pointer-events: none;
  transform: translateX(calc(100% + 18px));
  transform-origin: right center;
}

.elements-style-drawer.is-open {
  pointer-events: auto;
  animation: elements-drawer-bounce-out 520ms cubic-bezier(0.18, 0.88, 0.24, 1.16) both;
}

.elements-style-drawer:not(.is-open):not([hidden]) {
  animation: elements-drawer-bounce-in 460ms cubic-bezier(0.42, 0, 0.72, 1) both;
}

.elements-style-drawer[hidden] {
  display: none;
}

.image-preview-drawer {
  position: absolute;
  top: 62px;
  right: 0;
  z-index: 755;
  width: clamp(190px, 18vw, 280px);
  min-height: 170px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px 0 0 10px;
  background: color-mix(in srgb, var(--panel), #fff 14%);
  box-shadow: -14px 10px 34px rgb(31 41 51 / 0.2);
  pointer-events: none;
  opacity: 0.45;
  transform: translateX(calc(100% + 18px)) scaleX(0.96);
  transform-origin: right center;
}

.image-preview-drawer.is-open:not(.is-collapsed) {
  pointer-events: auto;
  animation: elements-drawer-bounce-out 520ms cubic-bezier(0.18, 0.88, 0.24, 1.16) both;
}

.image-preview-drawer.is-collapsed:not([hidden]) {
  pointer-events: none;
  animation: elements-drawer-bounce-in 460ms cubic-bezier(0.42, 0, 0.72, 1) both;
}

.image-preview-drawer-body {
  display: grid;
  gap: 8px;
}

.image-preview-content {
  display: grid;
  gap: 10px;
  overflow: visible;
}

.secondary-image-preview-block {
  display: grid;
  gap: 5px;
}

.secondary-image-preview-title {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.secondary-image-preview-frame {
  min-height: 122px;
  padding: 10px;
}

.drawer-toggle-button {
  position: fixed;
  top: var(--secondary-drawer-toggle-top, 156px);
  left: var(--secondary-drawer-toggle-left, calc(100vw - 33vw));
  right: auto;
  z-index: 1900;
  display: grid;
  place-items: center;
  width: 30px;
  height: 44px;
  min-height: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--line), var(--control) 18%);
  border-right: 0;
  border-radius: 10px 0 0 10px;
  background: color-mix(in srgb, var(--panel), var(--surface) 38%);
  color: var(--ink);
  box-shadow:
    -7px 8px 16px rgb(31 41 51 / 0.16),
    inset 0 1px 0 rgb(255 255 255 / 0.72);
  cursor: pointer;
  transform: translateX(-100%);
}

.drawer-toggle-button[hidden] {
  display: none !important;
}

#toggleImagePreviewDrawer,
.image-preview-drawer .drawer-toggle-button {
  top: calc(var(--secondary-drawer-toggle-top, 156px) + 52px);
}

.elements-drawer-toggle-button,
.elements-style-drawer .drawer-toggle-button {
  top: var(--secondary-drawer-toggle-top, 156px);
}

.drawer-toggle-button span {
  display: block;
  font-size: 1.45rem;
  font-weight: 950;
  line-height: 1;
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.3, 1.28);
}

.drawer-toggle-button.is-collapsed-toggle span,
.image-preview-drawer.is-collapsed .drawer-toggle-button span {
  transform: rotate(180deg);
}

.elements-drawer-toggle-button span,
.elements-style-drawer .drawer-toggle-button span {
  transform: rotate(180deg);
}

.elements-drawer-toggle-button.is-collapsed-toggle span {
  transform: rotate(0deg);
}

body.user-site-mode .drawer-toggle-button {
  display: none !important;
}

.section-export-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--line), transparent 28%);
}

.section-export-actions button,
.section-import-button {
  display: grid;
  place-items: center;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--control), #fff 48%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--control), #fff 10%);
  color: var(--control-text);
  font-weight: 900;
  text-align: center;
  cursor: pointer;
}

/* Phase 2E.13: one leather surface and one rounded map viewport. */
body.user-site-mode .map-shell,
body.users-builder-mode .map-shell {
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
  padding: 0;
  background-color: var(--users-shell-leather-color, var(--leather-color));
  background-image: url("assets/textures/pebbled-leather-gray.png");
  background-repeat: repeat;
  background-size: var(--leather-texture-size);
  background-blend-mode: var(--leather-blend-mode);
}

body.user-site-mode .map-stage,
body.users-builder-mode .map-stage {
  min-height: 100vh;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-color: var(--users-shell-leather-color, var(--leather-color));
  background-image: url("assets/textures/pebbled-leather-gray.png");
  background-repeat: repeat;
  background-size: var(--leather-texture-size);
  background-blend-mode: var(--leather-blend-mode);
}

body.user-site-mode .user-device-frame,
body.users-builder-mode .user-device-frame {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  opacity: 1;
}

body.user-site-mode .user-device-rail,
body.users-builder-mode .user-device-rail,
body.user-site-mode .user-device-screen-aperture,
body.users-builder-mode .user-device-screen-aperture,
body.user-site-mode #userFrameBuilderTools,
body.users-builder-mode #userFrameBuilderTools {
  display: none !important;
}

body.user-site-mode .map-canvas,
body.users-builder-mode .map-canvas {
  z-index: 781;
  border-radius: var(--user-screen-radius);
  clip-path: inset(
    var(--user-frame-edge-top)
    var(--user-frame-edge-right)
    var(--user-frame-edge-bottom)
    var(--user-frame-edge-left)
    round var(--user-screen-radius)
  );
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.18);
}

body.user-site-mode #userSitePanelTop,
body.user-site-mode #userSitePanelLeft,
body.user-site-mode #userSitePanelRight,
body.user-site-mode #userSitePanelBottom,
body.users-builder-mode #userSitePanelTop,
body.users-builder-mode #userSitePanelLeft,
body.users-builder-mode #userSitePanelRight,
body.users-builder-mode #userSitePanelBottom,
body.user-site-mode .user-site-controls,
body.users-builder-mode .user-site-controls,
body.user-site-mode .user-site-section,
body.users-builder-mode .user-site-section,
body.user-site-mode .user-edge-blank-section,
body.users-builder-mode .user-edge-blank-section,
body.user-site-mode .user-builder-empty,
body.users-builder-mode .user-builder-empty,
body.user-site-mode .playback-panel,
body.users-builder-mode .playback-panel,
body.user-site-mode .day-edge-control,
body.users-builder-mode .day-edge-control,
body.user-site-mode .map-control-cluster,
body.users-builder-mode .map-control-cluster,
body.user-site-mode .map-feature-toolbar,
body.users-builder-mode .map-feature-toolbar,
body.user-site-mode #usView,
body.users-builder-mode #usView,
body.user-site-mode #keyboardOnlyToggle,
body.users-builder-mode #keyboardOnlyToggle,
body.user-site-mode #userMaterialControls,
body.users-builder-mode #userMaterialControls,
body.user-site-mode #userThemePanel,
body.users-builder-mode #userThemePanel,
body.user-site-mode #userMaterialPanel,
body.users-builder-mode #userMaterialPanel {
  display: none !important;
}

body.user-site-mode #siteModeToggle {
  display: inline-flex !important;
  position: absolute;
  z-index: 920;
  top: auto;
  left: auto;
  right: calc(var(--user-frame-edge-right) + 18px);
  bottom: calc(var(--user-frame-edge-bottom) + 18px);
  transform: none;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgb(255 255 255 / 0.34);
  border-radius: 999px;
  background: rgb(31 41 51 / 0.82);
  color: #fff;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.24);
}

body.public-site-build #siteModeToggle {
  display: none !important;
}

body.users-builder-mode #siteModeToggle {
  display: none !important;
}

body.users-builder-mode .map-shell {
  --users-builder-screen-left: calc(var(--user-device-margin) + var(--user-frame-edge-left));
  --users-builder-screen-top: calc(var(--user-device-margin) + var(--user-frame-edge-top));
  --users-builder-screen-bottom: calc(var(--user-device-margin) + var(--user-frame-edge-bottom));
  --users-builder-column-gap: 12px;
  --users-builder-column-width: calc((100vw - (var(--user-device-margin) * 2) - var(--user-frame-edge-left) - var(--user-frame-edge-right) - (var(--users-builder-column-gap) * 2)) / 3);
}

body.users-builder-mode .users-appearance-admin-panel,
body.users-builder-mode .users-staging-admin-panel,
body.users-builder-mode .map-shell > .panel {
  top: var(--users-builder-screen-top);
  bottom: var(--users-builder-screen-bottom);
  width: var(--users-builder-column-width);
  max-width: none;
  min-width: 0;
  max-height: none;
  overflow: auto;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgb(0 0 0 / 0.2);
  transform: none;
}

body.users-builder-mode .map-shell > .panel {
  left: var(--users-builder-screen-left);
}

body.users-builder-mode .users-appearance-admin-panel {
  left: calc(var(--users-builder-screen-left) + var(--users-builder-column-width) + var(--users-builder-column-gap));
  right: auto;
  padding: 8px;
  opacity: 1;
}

body.users-builder-mode .users-staging-admin-panel {
  left: calc(var(--users-builder-screen-left) + (var(--users-builder-column-width) + var(--users-builder-column-gap)) * 2);
  right: auto;
  padding: 8px;
  opacity: 1;
}

body.users-builder-mode .map-shell > .panel {
  z-index: 1810;
}

body.users-builder-mode .users-appearance-admin-panel,
body.users-builder-mode .users-staging-admin-panel {
  z-index: 1811;
}

/* Phase 2E.14: the map element itself is the shared viewport. */
.map-stage {
  --user-map-viewport-top: var(--user-frame-edge-top);
  --user-map-viewport-right: var(--user-frame-edge-right);
  --user-map-viewport-bottom: var(--user-frame-edge-bottom);
  --user-map-viewport-left: var(--user-frame-edge-left);
  --user-map-viewport-radius: var(--user-screen-radius);
}

body.user-site-mode .map-stage,
body.users-builder-mode .map-stage {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.user-site-mode .map-canvas,
body.users-builder-mode .map-canvas {
  position: absolute;
  inset:
    var(--user-map-viewport-top)
    var(--user-map-viewport-right)
    var(--user-map-viewport-bottom)
    var(--user-map-viewport-left);
  width: auto !important;
  height: auto !important;
  border-radius: var(--user-map-viewport-radius);
  overflow: hidden;
  clip-path: none !important;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.18);
}

body.user-site-mode #siteModeToggle {
  right: calc(var(--user-map-viewport-right) + 18px);
  bottom: calc(var(--user-map-viewport-bottom) + 18px);
}

body.users-builder-mode {
  --users-admin-gap: 18px;
  --users-admin-top: calc(var(--user-frame-edge-top) + var(--users-admin-gap));
  --users-admin-right: calc(var(--user-frame-edge-right) + var(--users-admin-gap));
  --users-admin-bottom: calc(var(--user-frame-edge-bottom) + var(--users-admin-gap));
  --users-admin-left: calc(var(--user-frame-edge-left) + var(--users-admin-gap));
  --users-admin-column-width: calc(
    (100vw - var(--user-frame-edge-left) - var(--user-frame-edge-right) - (var(--users-admin-gap) * 4)) / 3
  );
}

body.users-builder-mode .users-appearance-admin-panel,
body.users-builder-mode .users-staging-admin-panel,
body.users-builder-mode .map-shell > .panel {
  top: var(--users-admin-top);
  bottom: var(--users-admin-bottom);
  width: var(--users-admin-column-width);
  max-width: none;
  min-width: 0;
  max-height: none;
  overflow: auto;
  box-sizing: border-box;
  transform: none;
}

body.users-builder-mode .users-appearance-admin-panel {
  left: var(--users-admin-left);
  right: auto;
  opacity: 1;
}

body.users-builder-mode .map-shell > .panel {
  left: calc(var(--users-admin-left) + var(--users-admin-column-width) + var(--users-admin-gap));
}

body.users-builder-mode .users-staging-admin-panel {
  left: calc(var(--users-admin-left) + (var(--users-admin-column-width) + var(--users-admin-gap)) * 2);
  right: auto;
  opacity: 1;
}

body.users-builder-mode #userDeviceFrame,
body.users-builder-mode .user-device-rail,
body.users-builder-mode .user-device-screen-aperture,
body.user-site-mode #userDeviceFrame,
body.user-site-mode .user-device-rail,
body.user-site-mode .user-device-screen-aperture {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.section-import-button input {
  display: none;
}

.elements-style-drawer .style-panel.inline-style-panel {
  height: 100%;
  max-height: 100%;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px 0 0 10px;
  background: color-mix(in srgb, var(--panel), #fff 14%);
  box-shadow: -18px 12px 42px rgba(31, 41, 51, 0.26);
}

.elements-style-drawer .style-panel.inline-style-panel > label {
  max-width: none;
}

@keyframes elements-drawer-bounce-out {
  0% {
    opacity: 0.5;
    transform: translateX(calc(100% + 18px)) scaleX(0.96);
  }
  68% {
    opacity: 1;
    transform: translateX(-14px) scaleX(1.015);
  }
  84% {
    transform: translateX(5px) scaleX(0.995);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scaleX(1);
  }
}

@keyframes elements-drawer-bounce-in {
  0% {
    opacity: 1;
    transform: translateX(0) scaleX(1);
  }
  24% {
    transform: translateX(-10px) scaleX(1.012);
  }
  100% {
    opacity: 0.45;
    transform: translateX(calc(100% + 18px)) scaleX(0.96);
  }
}

.style-panel.is-dragging .style-panel-head {
  cursor: grabbing;
}

.style-panel-head button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--control);
  border-radius: 8px;
  background: var(--control);
  color: #fff;
  font-weight: 700;
}

.style-panel label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.style-helper {
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.checkbox-line {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.texture-choice-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-height: 360px;
  overflow: auto;
  padding-right: 2px;
}

.texture-group-heading {
  grid-column: 1 / -1;
  margin: 4px 0 -2px;
  padding: 5px 7px;
  border-block: 1px solid color-mix(in srgb, var(--line), transparent 18%);
  color: color-mix(in srgb, var(--muted), var(--ink) 18%);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.texture-choice {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-content: end;
  gap: 5px;
  min-height: 126px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--texture-preview-color);
  background-image:
    linear-gradient(rgb(255 255 255 / 0.08), rgb(31 41 51 / 0.10)),
    var(--texture-url);
  background-repeat: repeat;
  background-size: auto, 72px 72px;
  color: var(--ink);
  text-align: center;
  cursor: pointer;
}

.texture-choice::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--texture-url);
  background-repeat: repeat;
  background-size: 28px 28px;
  opacity: 0.55;
  mix-blend-mode: multiply;
}

.texture-choice-compact {
  min-height: 112px;
}

.texture-choice[aria-pressed="true"] {
  border-color: var(--control);
  box-shadow: inset 0 0 0 1px var(--control);
}

.texture-thumb {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--texture-preview-color);
  background-image: var(--texture-url);
  background-repeat: repeat;
  background-size: 42px 42px;
  mix-blend-mode: multiply;
  opacity: 0.42;
}

.texture-choice strong {
  position: relative;
  z-index: 1;
  justify-self: center;
  max-width: 100%;
  overflow: hidden;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgb(255 253 248 / 0.84);
  font-size: 0.78rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.texture-badge {
  position: relative;
  z-index: 1;
  justify-self: center;
  padding: 2px 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--control), #fff 78%);
  color: var(--control);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
}

.texture-badge-muted {
  background: rgb(255 253 248 / 0.82);
  color: var(--muted);
}

.texture-library-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.texture-library-actions button {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
}

.texture-library-panel {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  padding: 14px;
  background: color-mix(in srgb, var(--panel), #ffffff 12%);
}

.texture-library-panel[hidden] {
  display: none;
}

.texture-library-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 360px) auto;
  gap: 10px;
  align-items: end;
}

.texture-library-head strong {
  display: block;
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 950;
}

.texture-library-head span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.texture-library-head label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.texture-library-head input {
  min-height: 36px;
  width: 100%;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf8;
  color: var(--ink);
  font-weight: 800;
}

.texture-library-head button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--control);
  border-radius: 8px;
  background: var(--control);
  color: var(--control-text);
  font-weight: 900;
  cursor: pointer;
}

.texture-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  overflow: auto;
  padding-right: 4px;
}

.texture-library-grid .texture-choice {
  min-height: 160px;
}

.style-panel select,
.style-panel input[type="text"],
.style-panel input[type="color"] {
  min-height: 32px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf8;
  color: var(--ink);
  font-weight: 700;
}

.style-panel input[type="text"] {
  padding: 0 8px;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

.theme-panel {
  width: 280px;
  max-height: calc(100vh - 20px);
  overflow: auto;
}

.theme-color-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.theme-debug {
  max-height: 180px;
  margin: 0;
  padding: 8px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #111827;
  color: #e5f0ff;
  font: 0.68rem/1.35 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  white-space: pre-wrap;
}

.embedded-color-picker {
  display: grid;
  gap: 6px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f3eb;
}

.robust-color-picker {
  position: fixed;
  z-index: 4000;
  display: grid;
  width: min(330px, calc(100vw - 20px));
  max-height: calc(100vh - 16px);
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--control), var(--line) 40%);
  border-radius: 9px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 10px 28px rgb(0 0 0 / 0.28);
  overflow: auto;
}

.robust-color-picker[hidden] {
  display: none;
}

.robust-color-picker-preview {
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background:
    linear-gradient(45deg, rgb(0 0 0 / 0.08) 25%, transparent 25% 75%, rgb(0 0 0 / 0.08) 75%),
    linear-gradient(45deg, rgb(0 0 0 / 0.08) 25%, transparent 25% 75%, rgb(0 0 0 / 0.08) 75%),
    var(--picker-color, #d9442e);
  background-position: 0 0, 8px 8px, 0 0;
  background-size: 16px 16px, 16px 16px, auto;
}

.robust-color-picker-label {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.robust-color-picker-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(23px, 1fr));
  gap: 4px;
}

.robust-color-picker-field {
  width: 100%;
  height: 140px;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: crosshair;
}

.robust-rgb-grid {
  display: grid;
  gap: 4px;
}

.robust-rgb-grid label {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.robust-rgb-grid output {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.robust-color-picker-native-row,
.robust-color-picker-hex-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.robust-color-picker-native,
.robust-color-picker-hex {
  width: 100%;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.robust-color-picker-hex {
  padding: 0 8px;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

.robust-color-picker-actions {
  position: sticky;
  bottom: -10px;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px;
  margin-inline: -4px;
  padding: 6px 4px 10px;
  background: var(--panel);
}

.robust-color-picker-actions button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 850;
  cursor: pointer;
}

.robust-color-picker-actions .robust-color-picker-ok {
  background: var(--control);
  color: var(--control-text);
}

.robust-color-picker-eyedropper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.robust-color-picker-eyedropper .material-symbols-rounded {
  font-size: 1.05rem;
  line-height: 1;
}

.robust-color-picker-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.is-page-color-sampling,
.is-page-color-sampling * {
  cursor: crosshair !important;
}

.robust-color-picker-status {
  display: block;
  min-height: 1.2em;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
}

.style-preview {
  display: inline-block;
  width: auto;
  min-width: 90px;
  height: 18px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--picked-color, #d9442e);
}

.style-twirl summary.color-summary::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid currentColor;
  font-size: 0;
}

.style-color-field {
  display: block;
  width: 100%;
  height: 148px;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: crosshair;
  touch-action: none;
}

.color-legal-warning {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  color: #b42318;
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1.3;
}

.color-legal-warning[hidden] {
  display: none;
}

.color-warning-icon {
  display: grid;
  place-items: end center;
  width: 20px;
  height: 18px;
  padding-bottom: 1px;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
  background: #d92d20;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.rgb-control-grid {
  display: grid;
  gap: 4px;
}

.rgb-control-grid label {
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
}

.color-row-label {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.style-swatches {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 4px;
  min-height: 24px;
}

.style-swatch {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid rgba(31, 41, 51, 0.28);
  border-radius: 4px;
  background: var(--swatch-color);
  cursor: pointer;
}

.style-swatch.is-saved {
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px var(--control);
}

.color-save-hint {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 2px 0 0;
  color: color-mix(in srgb, var(--muted), var(--control) 30%);
  font-family: inherit;
  font-size: 0.68rem;
  font-style: italic;
  font-weight: 650;
  line-height: 1.2;
}

.color-save-hint output {
  color: var(--control);
  font-style: normal;
  font-weight: 850;
}

.saved-color-swatches:empty {
  min-height: 0;
}

.style-size-section {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel), var(--surface) 44%);
}

.style-size-section label {
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
}

.status {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.leaflet-bar,
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(31, 41, 51, 0.18);
}

.leaflet-bar a {
  border-color: var(--line);
}

.leaflet-popup-content {
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
}

.route-edit-popup {
  display: grid;
  gap: 8px;
  min-width: 190px;
}

.route-edit-popup p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.route-edit-popup-actions {
  display: grid;
  gap: 6px;
}

.route-edit-popup-actions button {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control);
  color: var(--surface);
  font-weight: 900;
  cursor: pointer;
}

.route-edit-popup-actions button:hover {
  filter: brightness(1.08);
}

@media (max-width: 840px) {
  .map-shell {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(420px, 62vh) auto;
  }

  .map-stage {
    --playback-dock-height: 104px;
    min-height: 420px;
  }

  .playback-panel {
    grid-template-columns: 1fr auto 1fr;
  }

  .day-edge-control {
    width: 40px;
    height: 68px;
  }

  .media-viewer {
    inset: 8px 8px calc(var(--playback-dock-height) + 8px);
  }

  .media-viewer-controls {
    grid-template-columns: auto minmax(80px, 1fr) auto auto;
  }

  .media-viewer-controls #mediaVolume {
    display: none;
  }

  .panel {
    min-height: auto;
    max-height: none;
    border-top: 1px solid var(--line);
    border-left: 0;
    box-shadow: 0 -14px 32px rgba(31, 41, 51, 0.08);
  }

  .panel-tab-panels {
    overflow: visible;
  }

  .address-route-grid {
    grid-template-columns: 1fr;
  }

  .element-group-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .element-group[data-element-group] {
    grid-column: auto;
  }

  .element-group[data-element-group="land-sea"],
  .element-group[data-element-group="cities"],
  .element-group[data-element-group="streets"],
  .element-group[data-element-group="borders"] {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .element-group-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .element-group {
    grid-auto-columns: minmax(82px, 1fr);
  }
}

/* Phase 2E.15: direct viewport resize affordances for the Users builder. */
.user-map-viewport {
  display: contents;
}

.map-stage {
  --user-map-resize-zone: 14px;
  --user-map-corner-zone: 38px;
  --user-map-corner-gap: 8px;
  --user-map-bezel-size: 8px;
  --user-map-bezel-highlight: rgb(255 255 255 / 0.35);
  --user-map-bezel-shadow: rgb(0 0 0 / 0.34);
  --user-map-inner-shadow: inset 0 2px 8px rgb(0 0 0 / 0.22);
  --user-map-viewport-radius: clamp(20px, 1.8vw, 28px);
}

body.user-site-mode .user-map-viewport,
body.users-builder-mode .user-map-viewport,
body.media-builder-mode .user-map-viewport {
  --user-map-active-radius: var(--user-map-viewport-radius);
  position: absolute;
  z-index: 781;
  inset:
    var(--user-map-viewport-top)
    var(--user-map-viewport-right)
    var(--user-map-viewport-bottom)
    var(--user-map-viewport-left);
  display: block;
  isolation: isolate;
  contain: paint;
  overflow: hidden;
  border-radius: var(--user-map-active-radius);
  clip-path: inset(0 round var(--user-map-active-radius));
  -webkit-mask-image: linear-gradient(#fff 0 0);
  mask-image: linear-gradient(#fff 0 0);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(0 0 0 / 0.08)),
    color-mix(in srgb, var(--users-shell-leather-color, #6b3f2a), #8b8b8b 48%);
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.24);
}

body.user-site-mode .user-map-viewport {
  inset: 0 0 86px !important;
  border-radius: 0;
}

body.media-builder-mode .user-map-viewport {
  top: max(16px, var(--user-map-viewport-top));
  right: auto;
  bottom: auto;
  left: 16px;
  width: calc(100% - var(--user-map-viewport-left) - var(--user-map-viewport-right));
  height: calc(100% - var(--user-map-viewport-top) - var(--user-map-viewport-bottom));
}

body.user-site-mode .user-map-viewport > .map-canvas,
body.users-builder-mode .user-map-viewport > .map-canvas,
body.media-builder-mode .user-map-viewport > .map-canvas {
  position: absolute;
  z-index: 1 !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden;
  border-radius: var(--user-map-active-radius);
  clip-path: inset(0 round var(--user-map-active-radius)) !important;
  box-shadow: none;
}

body.user-site-mode .user-map-viewport > .map-canvas > .maplibre-basemap,
body.users-builder-mode .user-map-viewport > .map-canvas > .maplibre-basemap,
body.media-builder-mode .user-map-viewport > .map-canvas > .maplibre-basemap,
body.user-site-mode .user-map-viewport > .map-canvas > .maplibre-basemap .maplibregl-map,
body.users-builder-mode .user-map-viewport > .map-canvas > .maplibre-basemap .maplibregl-map,
body.media-builder-mode .user-map-viewport > .map-canvas > .maplibre-basemap .maplibregl-map,
body.user-site-mode .user-map-viewport > .map-canvas > .maplibre-basemap .maplibregl-canvas-container,
body.users-builder-mode .user-map-viewport > .map-canvas > .maplibre-basemap .maplibregl-canvas-container,
body.media-builder-mode .user-map-viewport > .map-canvas > .maplibre-basemap .maplibregl-canvas-container,
body.user-site-mode .user-map-viewport > .map-canvas > .maplibre-basemap .maplibregl-canvas,
body.users-builder-mode .user-map-viewport > .map-canvas > .maplibre-basemap .maplibregl-canvas,
body.media-builder-mode .user-map-viewport > .map-canvas > .maplibre-basemap .maplibregl-canvas {
  border-radius: var(--user-map-active-radius);
  clip-path: inset(0 round var(--user-map-active-radius));
}

.users-builder-admin-grid {
  display: none;
}

body.users-builder-mode .user-map-viewport > .users-builder-admin-grid:not([hidden]) {
  position: absolute;
  z-index: 10;
  inset: clamp(8px, 1.1vw, 18px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1.1vw, 18px);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

body.users-builder-mode[data-user-device-preview="phone-portrait"] .user-map-viewport > .users-builder-admin-grid:not([hidden]) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

body.users-builder-mode .users-builder-admin-grid > .users-appearance-admin-panel,
body.users-builder-mode .users-builder-admin-grid > .panel,
body.users-builder-mode .users-builder-admin-grid > .users-staging-admin-panel {
  position: relative !important;
  inset: auto !important;
  display: block;
  align-self: stretch;
  width: auto !important;
  min-width: 0;
  max-width: none !important;
  height: auto;
  min-height: 0;
  max-height: 100% !important;
  margin: 0;
  overflow: auto;
  transform: none !important;
  box-sizing: border-box;
}

body.user-site-mode .map-stage::after,
body.users-builder-mode .map-stage::after {
  content: none;
}

.user-map-viewport-resize-layer {
  position: absolute;
  z-index: 900;
  inset:
    var(--user-map-viewport-top)
    var(--user-map-viewport-right)
    var(--user-map-viewport-bottom)
    var(--user-map-viewport-left);
  display: none;
  pointer-events: none;
  border: 0;
  border-radius: 0;
}

.user-map-viewport-resize-layer[hidden] {
  display: none !important;
}

body.users-builder-mode .user-map-viewport-resize-layer:not([hidden]) {
  display: block;
}

.user-map-resize-edge,
.user-map-resize-corner {
  position: absolute;
  z-index: 2;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
}

.user-map-move-handle {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.72);
  border-radius: 50%;
  color: #fff;
  background: rgb(37 49 61 / 0.76);
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.38);
  opacity: 0.32;
  cursor: move;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  transition: opacity 120ms ease, transform 120ms ease;
}

.user-map-move-handle:hover,
.user-map-move-handle:focus-visible,
body.is-moving-map-viewport .user-map-move-handle {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.08);
}

.user-map-resize-edge-top,
.user-map-resize-edge-bottom {
  left: calc(var(--user-map-corner-zone) + var(--user-map-corner-gap));
  right: calc(var(--user-map-corner-zone) + var(--user-map-corner-gap));
  height: var(--user-map-resize-zone);
  cursor: ns-resize;
}

.user-map-resize-edge-top { top: calc(var(--user-map-resize-zone) / -2); }
.user-map-resize-edge-bottom { bottom: calc(var(--user-map-resize-zone) / -2); }

.user-map-resize-edge-left,
.user-map-resize-edge-right {
  top: calc(var(--user-map-corner-zone) + var(--user-map-corner-gap));
  bottom: calc(var(--user-map-corner-zone) + var(--user-map-corner-gap));
  width: var(--user-map-resize-zone);
  cursor: ew-resize;
}

.user-map-resize-edge-left { left: calc(var(--user-map-resize-zone) / -2); }
.user-map-resize-edge-right { right: calc(var(--user-map-resize-zone) / -2); }

.user-map-resize-corner {
  width: var(--user-map-corner-zone);
  height: var(--user-map-corner-zone);
}

.user-map-resize-corner-top-left {
  top: calc(var(--user-map-corner-zone) / -2);
  left: calc(var(--user-map-corner-zone) / -2);
  cursor: nwse-resize;
}

.user-map-resize-corner-top-right {
  top: calc(var(--user-map-corner-zone) / -2);
  right: calc(var(--user-map-corner-zone) / -2);
  cursor: nesw-resize;
}

.user-map-resize-corner-bottom-right {
  right: calc(var(--user-map-corner-zone) / -2);
  bottom: calc(var(--user-map-corner-zone) / -2);
  cursor: nwse-resize;
}

.user-map-resize-corner-bottom-left {
  bottom: calc(var(--user-map-corner-zone) / -2);
  left: calc(var(--user-map-corner-zone) / -2);
  cursor: nesw-resize;
}

.user-map-viewport-resize-layer::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -3px;
  border: 3px solid transparent;
  border-radius: 0;
  pointer-events: none;
  transition: border-color 100ms ease, box-shadow 100ms ease;
}

.user-map-viewport-resize-layer.is-map-viewport-limit-top::after {
  border-top-color: rgb(255 105 180 / 0.96);
  box-shadow: 0 -3px 10px rgb(255 105 180 / 0.48);
}

.user-map-viewport-resize-layer.is-map-viewport-limit-right::after {
  border-right-color: rgb(255 105 180 / 0.96);
  box-shadow: 3px 0 10px rgb(255 105 180 / 0.48);
}

.user-map-viewport-resize-layer.is-map-viewport-limit-bottom::after {
  border-bottom-color: rgb(255 105 180 / 0.96);
  box-shadow: 0 3px 10px rgb(255 105 180 / 0.48);
}

.user-map-viewport-resize-layer.is-map-viewport-limit-left::after {
  border-left-color: rgb(255 105 180 / 0.96);
  box-shadow: -3px 0 10px rgb(255 105 180 / 0.48);
}

body.is-resizing-map-viewport .user-map-viewport,
body.is-resizing-map-viewport .user-map-viewport-resize-layer {
  border-radius: 0;
}

body.is-resizing-map-viewport .user-map-viewport {
  --user-map-active-radius: 0px;
  clip-path: inset(0);
}

body.users-builder-mode .users-builder-workspace {
  display: none !important;
}

/* Phase 2E.18-19: gesture-created, constrained User UI layout objects. */
.map-stage {
  --user-layout-frame-gap: 12px;
  --user-layout-section-gap: 12px;
  --user-layout-divider-gap: 8px;
  --user-layout-subsection-gap: 10px;
  --user-layout-setting-gap: 8px;
  --user-section-fill: #835f4f;
  --user-section-stroke: #fff8e8;
  --user-section-stroke-width-ui: 2px;
  --user-section-radius-ui: 10px;
  --user-section-opacity-ui: 1;
  --user-subsection-fill: #9a7b6c;
  --user-subsection-stroke: #fff8e8;
  --user-subsection-stroke-width-ui: 1px;
  --user-subsection-radius-ui: 10px;
  --user-subsection-opacity-ui: 1;
  --user-divider-color: #fff8e8;
  --user-divider-width: 3px;
  --user-divider-secondary-width: 1px;
  --user-divider-line-gap: 3px;
  --user-divider-dash-length: 10px;
  --user-divider-dash-gap: 7px;
  --user-divider-glow-size: 8px;
  --user-divider-opacity: 0.94;
  --user-slider-accent: #4772e0;
  --user-slider-track: #e4e2ea;
  --user-slider-thumb: #6d7080;
  --user-dropdown-fill: #fffdf8;
  --user-dropdown-stroke: #8e9299;
  --user-toggle-accent: #4772e0;
  --user-button-fill: #384653;
  --user-button-text: #fffdf8;
  --user-inlay-color: #30251f;
  --user-inlay-offset: 6px;
  --user-inlay-radius: 12px;
  --user-text-control-fill: #fffdf8;
  --user-text-control-stroke: #8e9299;
  --user-color-control-radius: 10px;
  --user-control-label-color: #25313d;
  --user-control-font-size: 16px;
  --user-material-surface-tint: #704631;
  --user-material-texture-image: url("assets/textures/transparent/dark-leather.png");
  --user-material-texture-opacity: 0.34;
  --user-material-texture-cover-percent: 76%;
  --user-material-texture-scale: 150px;
  --user-material-gloss: 0.16;
  --user-material-gloss-percent: 7%;
  --user-material-bevel-depth: 3px;
  --user-material-effective-bevel: 1.95px;
  --user-material-highlight-strength: 0.32;
  --user-material-highlight-percent: 17%;
  --user-material-edge-contrast: 0.52;
  --user-material-edge-percent: 33%;
  --user-material-shadow-strength: 0.72;
  --user-material-press-depth: 2px;
}

.users-appearance-sticky-tools {
  position: sticky;
  z-index: 12;
  top: 0;
  display: grid;
  gap: 6px;
  padding: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--line), transparent 30%);
  background: color-mix(in srgb, var(--panel), #fff 4%);
  box-shadow: 0 5px 12px rgb(20 24 30 / 0.12);
}

.users-layout-preset-section {
  margin: 8px 10px 0;
}

.users-editor-twirl {
  min-width: 0;
}

.users-editor-twirl > summary {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
}

.users-editor-twirl[open] > summary {
  margin-bottom: 5px;
}

.users-alignment-tools {
  display: flex;
  justify-content: center;
  gap: 1px;
  overflow: hidden;
}

.users-alignment-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
}

.users-alignment-tools button {
  flex: 0 1 38px;
  width: 38px;
  min-width: 29px;
  min-height: 36px;
  aspect-ratio: 1;
  padding: 6px;
}

.users-alignment-row .users-history-actions {
  display: flex;
  gap: 2px;
  margin: 0;
  padding-left: 4px;
  border-left: 1px solid color-mix(in srgb, var(--line), transparent 25%);
}

.users-alignment-row .users-history-actions button {
  display: grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  min-height: 36px;
  padding: 3px;
}

.users-alignment-row .users-history-actions .material-symbols-rounded {
  font-size: 21px;
}

.users-alignment-tools svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.users-alignment-tools #usersArrangeGridButton svg path {
  fill: currentColor;
  stroke-width: 1.2;
}

.users-alignment-tools button:disabled {
  opacity: 0.38;
}

.users-layout-preset-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 6px;
  margin-top: 0;
}

.users-layout-preset-tools > .section-collapse-button { grid-column: 1 / -1; }
.users-layout-preset-tools > label { display: block; }
.users-layout-preset-tools > label > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.users-layout-preset-tools label {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.users-layout-preset-tools select,
.users-layout-preset-tools button {
  min-width: 0;
  min-height: 34px;
}

.users-layout-preset-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.users-layout-preset-actions button {
  min-height: 29px;
  padding: 4px 6px;
  font-size: 0.72rem;
}

.users-arrange-popover {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 7px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 8px 18px rgb(20 24 30 / 0.16);
}

.users-arrange-popover[hidden] { display: none !important; }

.users-arrange-popover label {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.users-arrange-popover input {
  width: 100%;
  min-width: 0;
}

.users-snap-menu {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.users-snap-menu button.is-active {
  color: #fff;
  background: #d53f89;
}

.users-geometry-fields {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-top: 5px;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--line), transparent 45%);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface), transparent 35%);
}

.users-selection-editor [data-users-editor-content] {
  min-width: 0;
}

.users-selection-editor [data-users-editor-content="control"] .users-control-inspector,
.users-selection-editor [data-users-editor-content="transform"] {
  margin-top: 5px;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--line), transparent 45%);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface), transparent 35%);
}

.users-geometry-fields[hidden] { display: none !important; }

.users-geometry-fields label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 3px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
}

.users-geometry-fields input {
  width: 100%;
  min-width: 0;
  padding: 4px 5px;
  text-align: center;
}

.users-geometry-fields .users-geometry-name {
  grid-column: span 3;
}

.users-geometry-fields .users-geometry-rotation {
  grid-column: span 1;
}

.users-geometry-fields .users-geometry-container {
  grid-column: 1 / -1;
}

.users-control-inspector {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  align-items: end;
  gap: 5px;
  margin-top: 6px;
}

.users-control-inspector[hidden] {
  display: none !important;
}

.users-control-inspector-label {
  max-width: 190px;
}

.users-selection-editor {
  display: grid;
  gap: 5px;
  padding-top: 5px;
  border-top: 1px solid color-mix(in srgb, var(--line), transparent 35%);
}

.users-selection-editor-title {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.users-editor-subsection-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
}

.users-editor-subsection-bar button {
  min-width: 0;
  min-height: 25px;
  padding: 2px 5px;
  border-radius: 5px;
  font-size: 0.66rem;
}

.users-editor-subsection-bar button[aria-selected="true"] {
  border-color: var(--control);
  background: var(--control);
  color: var(--control-text);
}

.users-transform-options {
  display: grid;
  gap: 4px;
}

.users-transform-options[hidden],
[data-users-editor-content][hidden] {
  display: none !important;
}

.users-free-transform-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 30px;
}

.users-free-transform-toggle[aria-pressed="true"] {
  border-color: #d53f89;
  background: color-mix(in srgb, #d53f89, var(--surface) 18%);
  color: #fff;
}

.users-free-transform-toggle kbd {
  min-width: 22px;
  padding: 2px 5px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font: 800 0.68rem/1 var(--ui-font);
  text-align: center;
}

.users-transform-options small {
  color: var(--muted);
  font-size: 0.65rem;
  line-height: 1.25;
}

.users-control-inspector label {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
}

.users-control-inspector input,
.users-control-inspector select {
  min-width: 0;
  width: 100%;
  padding: 5px;
}

.users-control-inspector-toggle {
  grid-template-columns: auto auto;
  align-items: center;
  align-self: center;
}

.users-control-inspector-toggle input {
  width: auto;
}

.users-control-inspector-container {
  grid-column: 1 / -1;
}

.users-control-type-options {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  padding-top: 4px;
  border-top: 1px solid color-mix(in srgb, var(--line), transparent 35%);
}

.users-control-type-options:empty {
  display: none;
}

.users-control-type-options .users-control-options-list {
  grid-column: 1 / -1;
}

.users-control-type-options textarea {
  min-height: 76px;
  resize: vertical;
}

.users-geometry-fields input.is-invalid {
  border-color: #cf2f45;
  box-shadow: 0 0 0 2px rgb(207 47 69 / 0.17);
}

.users-geometry-error {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  padding: 7px 9px;
  border: 1px solid #d84357;
  border-radius: 8px;
  color: #b41730;
  background: #fff3f5;
  box-shadow: 0 7px 16px rgb(90 10 24 / 0.18);
  font-size: 0.76rem;
  font-weight: 850;
}

.users-appearance-sections {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.users-appearance-context-heading {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--line), transparent 25%);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface), var(--accent) 5%);
}

.users-appearance-context-heading span {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.users-appearance-context-heading strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.users-gizmo-style-picker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  margin-top: 4px;
}

.users-gizmo-style-picker select {
  min-width: 0;
}

.users-material-preset-panel {
  box-shadow: 0 4px 12px rgb(20 24 30 / 0.1);
}

.users-material-preset-panel[data-section-color],
.users-appearance-group[data-section-color] {
  border-color: color-mix(in srgb, var(--section-accent), var(--ink) 14%);
  border-left-width: 5px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--section-accent), transparent 84%), transparent 48%),
    var(--section-tint);
}

.users-material-preset-body {
  display: grid;
  gap: 9px;
}

.users-material-preset-note {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.35;
}

.users-material-preset-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.users-material-preset-controls label,
.users-material-samples label {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.users-material-preset-controls select {
  width: 100%;
  min-width: 0;
}

.users-material-recommendations {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--line), var(--control) 16%);
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel), transparent 28%);
}

.users-material-recommendations-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}

.users-material-recommendations-heading strong {
  min-width: 0;
  color: var(--ink);
  font-size: 0.72rem;
  line-height: 1.2;
}

.users-material-recommendations-heading button {
  min-height: 28px;
  padding: 3px 7px;
  font-size: 0.66rem;
}

.users-material-recommendation-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.users-material-recommendation-row > span {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
}

.users-material-recommendation-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.users-material-recommendation-choices button {
  display: inline-grid;
  grid-template-columns: 15px auto;
  align-items: center;
  gap: 4px;
  min-height: 25px;
  padding: 2px 6px 2px 3px;
  border-color: color-mix(in srgb, var(--recommended-material-color), var(--line) 45%);
  background: color-mix(in srgb, var(--surface), var(--recommended-material-color) 12%);
  color: var(--ink);
  font-size: 0.64rem;
}

.users-material-recommendation-choices i {
  display: block;
  width: 15px;
  height: 15px;
  border: 1px solid color-mix(in srgb, var(--recommended-material-color), #fff 32%);
  border-radius: 50%;
  background: var(--recommended-material-color);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 0.28);
}

.users-material-samples {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: end;
  gap: 6px;
  padding-top: 2px;
}

.users-material-samples :where(button, input, select) {
  width: 100%;
  min-width: 0;
}

.users-appearance-group {
  min-width: 0;
}

.users-appearance-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-top: 5px;
}

.users-appearance-field {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.users-appearance-field input,
.users-appearance-field select {
  width: 100%;
  min-width: 0;
}

.users-divider-style-workbench {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px dashed color-mix(in srgb, var(--line), #e34f9b 30%);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface), #e34f9b 4%);
}

.users-divider-style-workbench[hidden] { display: none !important; }

.users-divider-style-workbench small { color: var(--muted); }

.users-divider-workbench-tools {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.users-divider-workbench-tools button.is-active {
  color: #fff;
  background: #d53f89;
}

.users-divider-style-canvas {
  display: block;
  width: 100%;
  height: 92px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--users-shell-leather-color), #000 12%);
  touch-action: none;
}

.users-layout-drawing-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.users-layout-drawing-actions button[aria-pressed="true"] {
  color: #fff;
  border-color: color-mix(in srgb, #e34f9b, #fff 18%);
  background: color-mix(in srgb, #d53f89, var(--control) 25%);
  box-shadow: 0 0 0 3px rgb(213 63 137 / 0.2);
}

.user-frame-layout-layer {
  position: absolute;
  z-index: 850;
  inset: 0;
  display: none;
  pointer-events: none;
  overflow: hidden;
}

.user-frame-layout-layer[hidden] {
  display: none !important;
}

body.users-builder-mode .user-frame-layout-layer:not([hidden]),
body.user-site-mode .user-frame-layout-layer:not([hidden]) {
  display: block;
}

body.user-site-mode .user-layout-object {
  pointer-events: none;
  touch-action: auto;
}

body.user-site-mode .user-layout-section-object,
body.user-site-mode .user-layout-divider-object {
  cursor: default;
}

body.user-site-mode .user-layout-section-content,
body.user-site-mode .user-layout-control-stack,
body.user-site-mode .user-layout-control-object,
body.user-site-mode .user-layout-placed-control,
body.user-site-mode .user-layout-placed-control :where(button, input, select, textarea, label) {
  pointer-events: auto;
  touch-action: manipulation;
}

body.user-site-mode .user-layout-placed-control :where(button, input, select, textarea):focus-visible {
  outline: 3px solid color-mix(in srgb, #63c7ff, #fff 30%);
  outline-offset: 2px;
}

body.user-site-mode .user-layout-handle,
body.user-site-mode .user-layout-control-remove {
  display: none !important;
}

.user-layout-region {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  pointer-events: none;
  touch-action: none;
}

body.users-builder-mode .user-layout-region {
  pointer-events: auto;
}

body.users-builder-mode .user-layout-region.is-user-builder-drop-target {
  box-shadow: inset 0 0 0 2px rgb(104 231 162 / 0.72);
  background: rgb(104 231 162 / 0.07);
}

body.is-user-layout-drawing .user-layout-region {
  pointer-events: auto;
  cursor: crosshair;
  background: rgb(255 255 255 / 0.025);
}

.user-layout-region-top {
  top: 0;
  right: 0;
  left: 0;
  height: var(--user-map-viewport-top);
}

.user-layout-region-bottom {
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--user-map-viewport-bottom);
}

.user-layout-region-left {
  top: var(--user-map-viewport-top);
  bottom: var(--user-map-viewport-bottom);
  left: 0;
  width: var(--user-map-viewport-left);
}

.user-layout-region-right {
  top: var(--user-map-viewport-top);
  right: 0;
  bottom: var(--user-map-viewport-bottom);
  width: var(--user-map-viewport-right);
}

.user-layout-object {
  position: absolute;
  box-sizing: border-box;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
}

.user-layout-section-object {
  min-width: 64px;
  min-height: 44px;
  padding: var(--user-layout-subsection-gap);
  border: var(--user-section-stroke-width-ui) solid var(--user-section-stroke);
  border-radius: var(--user-section-radius-ui);
  background: var(--user-section-fill);
  opacity: var(--user-section-opacity-ui);
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.28);
  cursor: move;
}

.user-layout-section-object::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background-image: var(--user-material-texture-image);
  background-size: var(--user-material-texture-scale);
  background-repeat: repeat;
  mix-blend-mode: soft-light;
  opacity: var(--user-material-texture-opacity);
  pointer-events: none;
}

.user-layout-section-object[data-layout-depth="1"] {
  border-width: var(--user-subsection-stroke-width-ui);
  border-style: dashed;
  border-color: var(--user-subsection-stroke);
  border-radius: var(--user-subsection-radius-ui);
  background: var(--user-subsection-fill);
  opacity: var(--user-subsection-opacity-ui);
}

.user-layout-section-label {
  position: absolute;
  z-index: 2;
  top: 4px;
  left: 8px;
  max-width: calc(100% - 16px);
  overflow: hidden;
  color: #fff8e8;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.65);
  white-space: nowrap;
  pointer-events: none;
}

.user-layout-section-content {
  position: absolute;
  z-index: 1;
  inset: calc(var(--user-layout-subsection-gap) + 8px) var(--user-layout-subsection-gap) var(--user-layout-subsection-gap);
  overflow: hidden;
  pointer-events: none;
}

.user-layout-section-object.is-user-runtime-compact {
  padding: max(4px, calc(var(--user-layout-subsection-gap) * 0.65));
}

.user-layout-section-object.is-user-runtime-compact > .user-layout-section-label {
  top: 3px;
  left: 5px;
  max-width: calc(100% - 10px);
  font-size: 0.61rem;
}

.user-layout-section-object.is-user-runtime-compact > .user-layout-section-content {
  inset: max(15px, calc(var(--user-layout-subsection-gap) + 5px)) max(4px, calc(var(--user-layout-subsection-gap) * 0.65)) max(4px, calc(var(--user-layout-subsection-gap) * 0.65));
}

.user-layout-section-object.is-user-runtime-micro > .user-layout-section-label {
  font-size: 0.56rem;
}

.user-layout-section-object.is-user-runtime-micro > .user-layout-section-content {
  top: 13px;
}

body.is-user-layout-drawing .user-layout-section-content {
  pointer-events: auto;
  cursor: crosshair;
}

.user-layout-divider-object {
  z-index: 2;
  height: 20px;
  transform-origin: 0 50%;
  cursor: move;
}

.user-layout-divider-object::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 0;
  left: 0;
  height: var(--user-divider-width);
  border-radius: 999px;
  background: var(--user-divider-color);
  opacity: var(--user-divider-opacity);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.5);
  transform: translateY(-50%);
}

.user-layout-divider-object::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  right: calc(var(--user-inlay-offset) * -1);
  left: calc(var(--user-inlay-offset) * -1);
  display: none;
  height: calc(var(--user-divider-width) + var(--user-inlay-offset) * 2);
  border-radius: var(--user-inlay-radius);
  background: var(--user-inlay-color);
  transform: translateY(-50%);
  pointer-events: none;
}

.map-stage:is([data-user-inlay-targets="dividers"], [data-user-inlay-targets="both"]) .user-layout-divider-object::after,
.user-layout-divider-object[data-divider-style="inlay"]::after {
  display: block;
}

.user-layout-divider-object[data-divider-style="inlay"]::before {
  opacity: 0;
  box-shadow: none;
}

.user-layout-divider-object[data-divider-style="dashed"]::before {
  background: repeating-linear-gradient(to right, var(--user-divider-color) 0 var(--user-divider-dash-length), transparent var(--user-divider-dash-length) calc(var(--user-divider-dash-length) + var(--user-divider-dash-gap)));
}

.user-layout-divider-object[data-divider-style="dotted"]::before {
  background: radial-gradient(circle, var(--user-divider-color) 0 48%, transparent 53%) 0 50% / calc(var(--user-divider-width) + var(--user-divider-dash-gap)) 100% repeat-x;
}

.user-layout-divider-object[data-divider-style="double"]::before,
.user-layout-divider-object[data-divider-style="thick-thin"]::before,
.user-layout-divider-object[data-divider-style="thin-thick"]::before {
  height: calc(var(--user-divider-width) + var(--user-divider-line-gap) + var(--user-divider-secondary-width));
  border-radius: 0;
  background: linear-gradient(to bottom,
    var(--user-divider-color) 0 var(--user-divider-width),
    transparent var(--user-divider-width) calc(var(--user-divider-width) + var(--user-divider-line-gap)),
    var(--user-divider-color) calc(var(--user-divider-width) + var(--user-divider-line-gap)) 100%);
}

.user-layout-divider-object[data-divider-style="thin-thick"]::before {
  background: linear-gradient(to bottom,
    var(--user-divider-color) 0 var(--user-divider-secondary-width),
    transparent var(--user-divider-secondary-width) calc(var(--user-divider-secondary-width) + var(--user-divider-line-gap)),
    var(--user-divider-color) calc(var(--user-divider-secondary-width) + var(--user-divider-line-gap)) 100%);
}

.user-layout-divider-object[data-divider-style="double"]::before {
  background: linear-gradient(to bottom,
    var(--user-divider-color) 0 var(--user-divider-secondary-width),
    transparent var(--user-divider-secondary-width) calc(var(--user-divider-secondary-width) + var(--user-divider-line-gap)),
    var(--user-divider-color) calc(var(--user-divider-secondary-width) + var(--user-divider-line-gap)) 100%);
}

.user-layout-divider-object[data-divider-style="glow"]::before {
  box-shadow: 0 0 var(--user-divider-glow-size) color-mix(in srgb, var(--user-divider-color), transparent 16%), 0 1px 3px rgb(0 0 0 / 0.4);
}

.user-layout-divider-object[data-divider-style="custom"]::before {
  background: repeating-linear-gradient(105deg, var(--user-divider-color) 0 8px, color-mix(in srgb, var(--user-divider-color), #e34f9b 45%) 8px 13px);
}

.user-layout-object.is-selected {
  outline: 2px solid transparent;
  outline-offset: 3px;
}

body.users-builder-mode .user-layout-region:hover .user-layout-object.is-selected {
  outline-color: #ff6fc4;
}

.user-layout-object.is-selected.is-selection-muted {
  outline-color: rgb(255 111 196 / 0.38);
}

.user-layout-divider-object.is-selected {
  outline: 0;
}

.user-layout-divider-object.is-selected::before {
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 4px #ff82cb);
}

.user-layout-divider-object.is-selected.is-selection-muted::before {
  filter: drop-shadow(0 0 2px rgb(255 130 203 / 0.3));
}

.user-layout-object.is-layout-blocked {
  filter: drop-shadow(0 0 5px rgb(255 92 145 / 0.95));
}

.user-layout-handle {
  position: absolute;
  z-index: 3;
  display: none;
  width: 13px;
  height: 13px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #e34f9b;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.45);
}

body.users-builder-mode .user-layout-region:hover .user-layout-object.is-selected > .user-layout-handle {
  display: block;
}

.user-layout-object.is-selected.is-selection-muted > .user-layout-handle {
  opacity: 0.38;
}

.user-layout-handle-nw { top: -7px; left: -7px; cursor: nwse-resize; }
.user-layout-handle-ne { top: -7px; right: -7px; cursor: nesw-resize; }
.user-layout-handle-se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.user-layout-handle-sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.user-layout-section-object > .user-layout-handle-n,
.user-layout-section-object > .user-layout-handle-s {
  left: 14px;
  width: calc(100% - 28px);
  height: 10px;
  border-width: 1px;
  border-radius: 999px;
}
.user-layout-section-object > .user-layout-handle-n { top: -5px; cursor: ns-resize; }
.user-layout-section-object > .user-layout-handle-s { bottom: -5px; cursor: ns-resize; }
.user-layout-section-object > .user-layout-handle-e,
.user-layout-section-object > .user-layout-handle-w {
  top: 14px;
  width: 10px;
  height: calc(100% - 28px);
  border-width: 1px;
  border-radius: 999px;
}
.user-layout-section-object > .user-layout-handle-e { right: -5px; cursor: ew-resize; }
.user-layout-section-object > .user-layout-handle-w { left: -5px; cursor: ew-resize; }
.user-layout-handle-start { top: 3px; left: -6px; cursor: crosshair; }
.user-layout-handle-end { top: 3px; right: -6px; cursor: crosshair; }

.user-layout-sketch {
  position: absolute;
  z-index: 20;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.user-layout-sketch polyline {
  fill: none;
  stroke: #ff78c5;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.6));
}

.user-layout-sketch.is-box-preview polyline {
  fill: rgb(255 120 197 / 0.12);
}

body.is-resizing-map-viewport .user-frame-layout-layer {
  opacity: 0.72;
}

.users-gizmo-category-label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
}

.users-gizmo-category-label span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.users-gizmo-category-label select {
  min-width: 0;
}

.users-gizmo-curation-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(2, auto);
  gap: 5px;
  align-items: end;
  margin: 0 0 8px;
}

.users-gizmo-curation-toolbar label {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.users-gizmo-curation-toolbar label span {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.users-gizmo-curation-toolbar select,
.users-gizmo-curation-toolbar button {
  min-width: 0;
  min-height: 31px;
  padding: 4px 7px;
  font-size: 0.68rem;
}

.users-gizmo-curation-toolbar #usersGizmoExportSelection {
  grid-column: span 2;
}

.users-gizmo-curation-toolbar output {
  align-self: center;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-align: right;
}

.users-gizmo-library,
.users-gizmo-category-description {
  margin: 0;
}

.users-gizmo-category-description {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.25;
}

.users-gizmo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  grid-auto-flow: dense;
  gap: 7px;
}

.users-gizmo-card[data-gizmo-size="wide"] {
  grid-column: span 2;
}

.users-gizmo-card {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(62px, 1fr);
  gap: 4px;
  min-width: 0;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--line), transparent 18%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface), var(--user-panel-surface-color) 12%);
  overflow: hidden;
}

.users-gizmo-card.is-curation-selected {
  border-color: color-mix(in srgb, var(--accent), #fff 16%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent), transparent 38%), 0 0 12px color-mix(in srgb, var(--accent), transparent 72%);
}

.users-gizmo-card-badges {
  position: absolute;
  z-index: 6;
  top: 4px;
  right: 4px;
  display: flex;
  gap: 3px;
  align-items: center;
}

.users-gizmo-recommended-badge {
  padding: 2px 5px;
  border-radius: 999px;
  color: #18301d;
  background: #bfe8bd;
  font-size: 0.55rem;
  font-weight: 950;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.users-gizmo-selection-toggle {
  display: grid;
  place-items: center;
  width: 23px;
  min-width: 23px;
  height: 23px;
  min-height: 23px;
  padding: 0;
  border-radius: 50%;
  font-weight: 950;
}

.users-gizmo-selection-toggle[hidden] {
  display: none;
}

.users-gizmo-card > strong {
  padding-right: 70px;
  overflow: hidden;
  font-size: 0.69rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.users-gizmo-card.is-gizmo-drag-surface {
  cursor: grab;
  user-select: none;
}

.users-gizmo-card.is-gizmo-drag-surface:active {
  cursor: grabbing;
}

.users-gizmo-card.is-gizmo-drag-surface :where(button, input, select, textarea, label) {
  cursor: auto;
}

.user-gizmo-face {
  --gizmo-face: color-mix(in srgb, var(--user-button-fill), #d4d0cc 72%);
  --gizmo-dark: color-mix(in srgb, var(--user-button-fill), #050505 62%);
  --gizmo-light: color-mix(in srgb, var(--gizmo-face), #fff 45%);
  --gizmo-accent: var(--user-slider-accent);
  --gizmo-motion-duration: 140ms;
  --gizmo-press-depth: 3px;
  --gizmo-toggle-travel: 36px;
  --gizmo-position: 58%;
  --gizmo-turn: 0deg;
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 42px;
  box-sizing: border-box;
}

.user-gizmo-face[data-gizmo-motion="press"] .user-gizmo-button {
  transition: transform var(--gizmo-motion-duration) ease, box-shadow var(--gizmo-motion-duration) ease;
}

.user-gizmo-face[data-gizmo-motion="press"]:not(.user-gizmo-style-analog):not(.user-gizmo-style-analog-record) .user-gizmo-button:active {
  transform: translateY(var(--gizmo-press-depth));
}

.user-gizmo-face :where(button, input, select) {
  box-sizing: border-box;
  max-width: 100%;
}

.user-gizmo-button {
  width: min(76px, 78%);
  height: min(58px, 78%);
  min-width: 42px;
  min-height: 38px;
  border: 0;
  font-size: clamp(0.58rem, 1.8vw, 0.76rem);
  font-weight: 850;
  letter-spacing: 0.07em;
}

.user-gizmo-face[data-gizmo-shape="circle"] .user-gizmo-button {
  width: min(62px, 78%);
  aspect-ratio: 1;
  height: auto;
  border-radius: 50%;
}

.user-gizmo-face[data-gizmo-shape="wide"] .user-gizmo-button {
  width: min(150px, 94%);
  height: min(48px, 72%);
}

/* Adapted from Praashoo7's MIT-licensed EP-133 K.O. II button on Uiverse.
   The backing plate belongs only to button faces. Keeping the kind selector
   here prevents it from covering analog sliders, selects, displays, and
   other controls that share the same material style. */
.user-gizmo-face.user-gizmo-button.user-gizmo-style-analog::before,
.user-gizmo-face.user-gizmo-button.user-gizmo-style-analog-record::before {
  content: "";
  position: absolute;
  width: min(70px, 74%);
  height: min(56px, 74%);
  border-radius: 7px;
  background: #171717;
  transform: translate(-3px, 3px);
}

.user-gizmo-face.user-gizmo-button[data-gizmo-shape="circle"]::before {
  width: min(62px, 78%);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
}

.user-gizmo-face.user-gizmo-button[data-gizmo-shape="wide"]::before {
  width: min(150px, 94%);
  height: min(48px, 72%);
}

.user-gizmo-style-analog .user-gizmo-button,
.user-gizmo-style-analog-record .user-gizmo-button {
  position: relative;
  z-index: 1;
  border-radius: 9px;
  color: #4f4d4b;
  background: var(--gizmo-face);
  box-shadow: 7px 7px 7px rgb(0 0 0 / 0.38), 1.5px 1.5px 2px rgb(255 255 255 / 0.82) inset, -3px -3px 7px color-mix(in srgb, var(--gizmo-face), #111 16%) inset;
  --gizmo-motion-duration: 90ms;
  transition: transform var(--gizmo-motion-duration) ease, box-shadow var(--gizmo-motion-duration) ease;
}

.user-gizmo-style-analog-record .user-gizmo-button {
  color: white;
  background: #d82b09;
  box-shadow: 7px 7px 7px rgb(0 0 0 / 0.38), 2px 2px 8px #ff7440 inset, -4px -4px 2px #9f1b02 inset;
}

.user-gizmo-style-analog .user-gizmo-button:active,
.user-gizmo-style-analog-record .user-gizmo-button:active {
  box-shadow: 0 0 0 rgb(0 0 0 / 0), 0.5px 0.5px 4px #000 inset, -3px -3px 7px rgb(0 0 0 / 0.18) inset;
  transform: translate(var(--gizmo-press-depth), var(--gizmo-press-depth)) scale(0.98);
}

.user-gizmo-toggle label {
  position: relative;
  display: block;
  width: min(72px, 82%);
  height: 34px;
  cursor: pointer;
}

.user-gizmo-toggle input {
  position: absolute;
  opacity: 0;
}

.user-gizmo-toggle span {
  position: absolute;
  inset: 0;
  border: 3px solid var(--gizmo-dark);
  border-radius: 999px;
  background: color-mix(in srgb, var(--gizmo-dark), #777 28%);
  box-shadow: inset 0 3px 7px rgb(0 0 0 / 0.62), 0 1px 1px rgb(255 255 255 / 0.24);
}

.user-gizmo-toggle span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gizmo-face);
  box-shadow: 2px 3px 5px rgb(0 0 0 / 0.5), 1px 1px 2px rgb(255 255 255 / 0.7) inset;
  transition: transform var(--gizmo-motion-duration) ease, background var(--gizmo-motion-duration) ease;
}

.user-gizmo-toggle input:checked + span::after {
  background: color-mix(in srgb, var(--gizmo-accent), #fff 12%);
  transform: translateX(var(--gizmo-toggle-travel));
}

.user-gizmo-style-rocker label {
  width: 48px;
  height: 38px;
}

.user-gizmo-style-rocker span {
  border-radius: 6px;
}

.user-gizmo-style-rocker span::after {
  inset: 3px;
  width: auto;
  height: auto;
  border-radius: 3px;
  transform-origin: 50% 100%;
}

.user-gizmo-style-rocker input:checked + span::after {
  transform: perspective(40px) rotateX(-11deg);
}

.user-gizmo-range input[type="range"] {
  width: 86%;
  accent-color: var(--gizmo-accent);
}

.user-gizmo-range[data-gizmo-orientation="vertical"] input[type="range"] {
  width: 54px;
  height: 78px;
  writing-mode: vertical-lr;
  direction: rtl;
}

.user-gizmo-style-analog.user-gizmo-range input[type="range"],
.user-gizmo-style-metal.user-gizmo-range input[type="range"] {
  height: 9px;
  border: 2px solid var(--gizmo-dark);
  border-radius: 999px;
  background: #181817;
  box-shadow: inset 0 2px 4px #000, 0 1px 1px rgb(255 255 255 / 0.25);
}

.user-gizmo-knob input[type="range"] {
  width: 54px;
  height: 54px;
  appearance: none;
  border: 5px solid var(--gizmo-dark);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, var(--gizmo-light), var(--gizmo-face) 42%, var(--gizmo-dark) 100%);
  box-shadow: 4px 5px 7px rgb(0 0 0 / 0.48), 1px 1px 2px rgb(255 255 255 / 0.42) inset;
  transform: rotate(var(--gizmo-turn));
}

.user-gizmo-knob input[type="range"]::-webkit-slider-thumb {
  width: 4px;
  height: 20px;
  margin-top: -27px;
  appearance: none;
  border-radius: 999px;
  background: var(--gizmo-accent);
}

.user-gizmo-style-glow {
  --gizmo-accent: #4772e0;
}

.user-gizmo-style-glow .user-gizmo-button {
  border: 3px solid #08090b;
  border-radius: 50%;
  color: var(--gizmo-accent);
  background: #29292c;
  box-shadow: 0 0 0 2px #56585e, inset 2px 2px 3px rgb(255 255 255 / 0.12), inset -3px -4px 6px #08090b, 0 0 20px rgb(71 114 224 / 0.22);
}

.user-gizmo-style-glow .user-gizmo-button:active {
  box-shadow: 0 0 0 2px #31343d, inset 3px 4px 8px #07080b, 0 0 24px rgb(71 114 224 / 0.52);
}

.user-gizmo-icon-truck {
  width: 62%;
  height: 62%;
  background: currentColor;
  -webkit-mask: url("Source Files/Truck and RV Outline simplified.svg") center / contain no-repeat;
  mask: url("Source Files/Truck and RV Outline simplified.svg") center / contain no-repeat;
}

.user-gizmo-style-soft .user-gizmo-button,
.user-gizmo-style-soft select {
  border: 1px solid color-mix(in srgb, var(--gizmo-face), #111 28%);
  border-radius: 999px;
  color: var(--user-button-text);
  background: color-mix(in srgb, var(--gizmo-face), var(--user-panel-surface-color) 22%);
  box-shadow: 3px 4px 8px rgb(0 0 0 / 0.22), -2px -2px 5px rgb(255 255 255 / 0.24);
}

.user-gizmo-select select {
  width: 88%;
  min-height: 32px;
}

.user-gizmo-text input,
.user-gizmo-search input,
.user-gizmo-date input,
.user-gizmo-color input {
  width: 88%;
  min-height: 32px;
  border: 2px solid var(--gizmo-dark);
  border-radius: 6px;
  background: var(--gizmo-face);
  box-shadow: inset 0 2px 5px rgb(0 0 0 / 0.28), 0 1px 1px rgb(255 255 255 / 0.28);
}

.user-gizmo-color input {
  padding: 3px;
}

.user-gizmo-style-glow.user-gizmo-text input,
.user-gizmo-style-glow.user-gizmo-search input,
.user-gizmo-style-glow.user-gizmo-date input,
.user-gizmo-style-glow.user-gizmo-color input {
  color: #dfe7ff;
  background: #171a21;
  box-shadow: inset 0 0 10px #000, 0 0 12px rgb(71 114 224 / 0.32);
}

.user-gizmo-style-metal.user-gizmo-text input,
.user-gizmo-style-metal.user-gizmo-search input,
.user-gizmo-style-metal.user-gizmo-date input,
.user-gizmo-style-metal.user-gizmo-color input {
  background: linear-gradient(135deg, #e6e8e7, var(--gizmo-face) 55%, #74797b);
}

.user-gizmo-style-analog.user-gizmo-select select,
.user-gizmo-style-metal.user-gizmo-select select,
.user-gizmo-style-glow.user-gizmo-select select {
  min-height: 34px;
  border: 2px solid var(--gizmo-dark);
  border-radius: 6px;
  color: var(--user-button-text);
  background: linear-gradient(180deg, var(--gizmo-light), var(--gizmo-face));
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 0.48), 3px 4px 6px rgb(0 0 0 / 0.28);
}

.user-gizmo-style-glow.user-gizmo-select select {
  color: #dfe7ff;
  background: #25282f;
  box-shadow: inset 0 0 12px rgb(0 0 0 / 0.65), 0 0 12px rgb(71 114 224 / 0.3);
}

.user-gizmo-style-soft-wide.user-gizmo-select select {
  width: 96%;
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--gizmo-face), #111 28%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--gizmo-face), var(--user-panel-surface-color) 22%);
}

.user-gizmo-display,
.user-gizmo-display-panel {
  padding: 8px;
}

.user-gizmo-display-value {
  display: grid;
  place-items: center;
  width: min(100%, 150px);
  min-height: 38px;
  padding: 5px 10px;
  border: 3px solid var(--gizmo-dark);
  border-radius: 5px;
  color: #271f13;
  background: #b7ad82;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: clamp(0.68rem, 2vw, 1rem);
  font-weight: 850;
  letter-spacing: 0.08em;
  box-shadow: inset 0 3px 8px rgb(0 0 0 / 0.42), 0 1px 1px rgb(255 255 255 / 0.32);
}

.user-gizmo-meter-track {
  position: relative;
  width: min(92%, 150px);
  height: 38px;
  overflow: hidden;
  border: 3px solid var(--gizmo-dark);
  border-radius: 6px;
  background: #161817;
  box-shadow: inset 0 3px 7px #000;
}

.user-gizmo-meter-track > span {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--gizmo-position, 72%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--gizmo-accent), #1b7028 45%), var(--gizmo-accent));
  box-shadow: 0 0 10px var(--gizmo-accent);
}

.user-gizmo-meter-value {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  height: 100%;
  color: #fff;
  font: 850 0.72rem/1 ui-monospace, Consolas, monospace;
  text-shadow: 0 1px 3px #000;
}

.user-gizmo-style-glow .user-gizmo-display-value {
  color: #7f9cff;
  background: #11141b;
  text-shadow: 0 0 8px currentColor;
  box-shadow: inset 0 0 14px #000, 0 0 14px rgb(71 114 224 / 0.28);
}

.user-gizmo-style-soft .user-gizmo-display-value {
  border-width: 1px;
  border-radius: 12px;
  color: var(--user-button-text);
  background: color-mix(in srgb, var(--gizmo-face), #fff 12%);
  font-family: inherit;
  letter-spacing: 0.03em;
}

.user-gizmo-light-control {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
}

.user-gizmo-light-control input {
  position: absolute;
  opacity: 0;
}

.user-gizmo-light-control span {
  width: 22px;
  height: 22px;
  border: 4px solid var(--gizmo-dark);
  border-radius: 50%;
  background: #68271f;
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.55), 0 2px 4px rgb(0 0 0 / 0.35);
}

.user-gizmo-light-control input:checked + span {
  background: var(--gizmo-accent);
  box-shadow: inset 0 1px 3px rgb(255 255 255 / 0.48), 0 0 16px var(--gizmo-accent);
}

.user-gizmo-stepper-control,
.user-gizmo-segmented-control,
.user-gizmo-transport-control,
.user-gizmo-direction-control {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(30px, 1fr);
  width: min(94%, 160px);
  min-height: 34px;
  overflow: hidden;
  border: 2px solid var(--gizmo-dark);
  border-radius: 7px;
  background: var(--gizmo-dark);
  box-shadow: 3px 4px 7px rgb(0 0 0 / 0.34);
}

.user-gizmo-stepper-control button,
.user-gizmo-segmented-control button,
.user-gizmo-transport-control button,
.user-gizmo-direction-control button,
.user-gizmo-stepper-control output {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 32px;
  padding: 3px 6px;
  border: 0;
  border-radius: 0;
  color: var(--user-button-text);
  background: var(--gizmo-face);
  font-size: 0.68rem;
  font-weight: 900;
}

.user-gizmo-stepper-control > * + *,
.user-gizmo-segmented-control > * + *,
.user-gizmo-transport-control > * + *,
.user-gizmo-direction-control > * + * {
  border-left: 1px solid color-mix(in srgb, var(--gizmo-dark), #fff 18%);
}

.user-gizmo-segmented-control button[aria-pressed="true"] {
  color: #fff;
  background: var(--gizmo-accent);
  box-shadow: inset 0 2px 5px rgb(0 0 0 / 0.35);
}

.user-gizmo-style-glow :where(.user-gizmo-stepper-control, .user-gizmo-segmented-control, .user-gizmo-transport-control, .user-gizmo-direction-control) button,
.user-gizmo-style-glow .user-gizmo-stepper-control output {
  color: #a8baff;
  background: #24272e;
}

.user-gizmo-decal {
  display: grid;
  place-items: center;
  width: min(88%, 120px);
  min-height: 30px;
  color: color-mix(in srgb, var(--user-control-label-color), var(--user-panel-surface-color) 20%);
  font-size: clamp(0.62rem, 2vw, 0.88rem);
  font-weight: 950;
  letter-spacing: 0.16em;
  text-shadow: 0 1px rgb(255 255 255 / 0.28);
}

.user-gizmo-decal .user-gizmo-icon {
  width: 46px;
  height: 34px;
}

.user-gizmo-style-glow .user-gizmo-decal {
  color: var(--gizmo-accent);
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--gizmo-accent), transparent 28%));
}

.user-gizmo-style-metal {
  --gizmo-face: color-mix(in srgb, var(--user-panel-surface-color), #aeb4b6 68%);
  --gizmo-dark: #242729;
}

.user-gizmo-style-metal .user-gizmo-button {
  border: 2px solid #26292b;
  border-radius: 6px;
  color: #17191a;
  background: linear-gradient(135deg, #f0f2f1, var(--gizmo-face) 42%, #686d70);
  box-shadow: 4px 5px 7px rgb(0 0 0 / 0.42), 1px 1px 1px white inset;
}

.user-layout-gizmo-control,
.user-layout-gizmo-control > .user-gizmo-face {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.user-layout-gizmo-control > .user-gizmo-face .user-gizmo-button {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
}

.user-layout-gizmo-control > .user-gizmo-face :where(label, input, select, textarea, output, .user-gizmo-display-value, .user-gizmo-decal, .user-gizmo-stepper-control, .user-gizmo-segmented-control, .user-gizmo-transport-control, .user-gizmo-direction-control) {
  width: 100%;
  max-width: none;
  min-width: 0;
}

.user-layout-gizmo-control > .user-gizmo-face :where(label, select, textarea, .user-gizmo-display-value, .user-gizmo-decal) {
  height: 100%;
  max-height: none;
  min-height: 0;
}

.user-layout-gizmo-control > .user-gizmo-face.user-gizmo-knob input,
.user-layout-gizmo-control > .user-gizmo-face[data-gizmo-shape="circle"] .user-gizmo-button {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
}

.user-layout-gizmo-control > .user-gizmo-face::before {
  width: 100%;
  height: 100%;
}

.user-layout-gizmo-control {
  position: relative;
  display: block;
}

.user-layout-gizmo-control > .user-gizmo-face {
  position: absolute;
  inset: 0;
}

body.users-builder-mode .user-layout-control-object.is-gizmo-style-replace-target {
  box-shadow: 0 0 0 3px rgb(103 229 142 / 0.9), 0 0 18px rgb(103 229 142 / 0.7);
}

body.users-builder-mode .user-layout-control-object.is-gizmo-style-replace-rejected {
  box-shadow: 0 0 0 3px rgb(218 58 58 / 0.88);
}

.users-compact-control-list,
.users-compact-control-stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 4px;
}

.users-compact-control-card {
  position: relative;
  display: grid;
  gap: 2px;
  min-height: 58px;
  padding: 4px 5px;
  border: 1px solid color-mix(in srgb, var(--line), var(--surface) 18%);
  border-radius: 10px;
  background: var(--surface);
}

.users-compact-control-card[draggable="true"] {
  cursor: grab;
}

.users-compact-control-card.is-user-builder-dragging {
  opacity: 0.45;
}

.users-control-drag-ghost {
  position: fixed;
  z-index: 7000;
  max-width: 230px;
  padding: 7px 10px;
  border: 1px solid rgb(255 255 255 / 0.82);
  border-radius: 9px;
  color: #fff;
  background: color-mix(in srgb, var(--control), #e34f9b 22%);
  box-shadow: 0 8px 20px rgb(0 0 0 / 0.32);
  font-size: 0.78rem;
  font-weight: 900;
  pointer-events: none;
}

body.is-user-builder-dragging-control .user-layout-section-content {
  pointer-events: auto;
}

.user-layout-section-content.is-user-builder-drop-target {
  overflow: visible;
  border-radius: 8px;
  background: rgb(255 255 255 / 0.13);
  box-shadow: inset 0 0 0 2px #ff6fc4, 0 0 0 3px rgb(255 111 196 / 0.18);
}

.user-layout-section-content.is-direct-transform-drop-target {
  overflow: visible;
  background: rgb(255 255 255 / .14);
  box-shadow: inset 0 0 0 3px #ff6fc4, 0 0 18px rgb(255 111 196 / .35);
}

.user-layout-control-stack {
  position: absolute;
  z-index: 5;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

body.users-builder-mode .user-layout-control-stack {
  overflow: visible;
}

body.users-builder-mode,
body.users-builder-mode * {
  user-select: none;
  -webkit-user-select: none;
}

:where(#usersBuilderAdminGrid, #usersAppearanceAdminPanel, #usersStagingAdminPanel, .panel, .users-admin-panel) :where(textarea, [contenteditable="true"], input[type="text"], input[type="search"], input[type="url"], input[type="email"], input[type="tel"], input[type="number"], input:not([type])):focus {
  user-select: text;
  -webkit-user-select: text;
}

.user-layout-control-object {
  position: absolute;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  padding: 0;
  pointer-events: auto;
}

.user-layout-section-object.is-user-frame-control-host {
  z-index: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none;
}

.user-layout-section-object.is-user-frame-control-host > .user-layout-section-content {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  pointer-events: none;
}

.user-layout-section-object.is-user-frame-control-host .user-layout-control-object {
  pointer-events: auto;
}

body.users-builder-mode .user-layout-control-object,
body.users-builder-mode .user-layout-placed-control {
  touch-action: none;
}

body.users-builder-mode .user-layout-placed-control :where(button, input, select, textarea, label) {
  pointer-events: none;
}

body.users-builder-mode [data-user-builder-card="true"] {
  touch-action: none;
}

body.users-builder-mode [data-user-builder-card="true"] :where(button, input, select, textarea, label) {
  pointer-events: none;
}

body.users-builder-mode [data-user-builder-card="true"] .users-compact-control-remove {
  pointer-events: auto;
}

.user-layout-control-object.is-user-builder-dragging {
  opacity: 0.38;
  filter: saturate(0.45);
}

.users-compact-control-card.is-user-builder-bouncing,
.user-layout-control-object.is-user-builder-bouncing {
  animation: user-builder-control-bounce 400ms cubic-bezier(0.22, 0.9, 0.35, 1.18);
}

@keyframes user-builder-control-bounce {
  0% { transform: translate3d(0, 0, 0); }
  38% { transform: translate3d(-9px, 0, 0); }
  70% { transform: translate3d(4px, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.user-layout-control-object.is-selected {
  outline: 2px solid transparent;
  outline-offset: -2px;
  cursor: move;
}

body.users-builder-mode .user-layout-region:hover .user-layout-control-object.is-selected {
  outline-color: #ff6fc4;
}

.user-layout-control-object.is-gizmo-binding-compatible {
  filter: drop-shadow(0 0 5px rgb(104 231 162 / 0.74));
}

.user-layout-control-object.is-gizmo-binding-incompatible {
  opacity: 0.34;
  filter: grayscale(0.82);
}

.user-layout-control-object.is-gizmo-binding-hover {
  opacity: 1;
  outline: 3px solid #72dfa2;
  outline-offset: 3px;
  filter: drop-shadow(0 0 10px rgb(104 231 162 / 0.9));
}

.user-layout-control-object.is-gizmo-binding-rejected {
  opacity: 0.58;
  outline: 3px solid #ff5f68;
  outline-offset: 3px;
}

.user-layout-control-object.is-gizmo-binding-rejected::after {
  content: "nah";
  position: absolute;
  z-index: 30;
  top: 50%;
  left: 50%;
  padding: 4px 7px;
  border-radius: 999px;
  color: white;
  background: #b7182e;
  box-shadow: 0 2px 7px rgb(0 0 0 / 0.45);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.user-layout-control-object.is-transforming {
  z-index: 40;
  cursor: grabbing;
  will-change: left, top, width, height;
}

body.users-builder-mode .user-layout-region:hover .user-layout-control-object.is-selected > .user-layout-handle {
  display: block;
}

.user-layout-control-object > .user-layout-handle-n,
.user-layout-control-object > .user-layout-handle-s {
  left: 18px;
  width: calc(100% - 36px);
  height: 8px;
  border-width: 1px;
  border-radius: 999px;
}

.user-layout-control-object > .user-layout-handle-n { top: -4px; cursor: ns-resize; }
.user-layout-control-object > .user-layout-handle-s { bottom: -4px; cursor: ns-resize; }

.user-layout-control-object > .user-layout-handle-e,
.user-layout-control-object > .user-layout-handle-w {
  top: 18px;
  width: 8px;
  height: calc(100% - 36px);
  border-width: 1px;
  border-radius: 999px;
}

.user-layout-control-object > .user-layout-handle-e { right: -4px; cursor: ew-resize; }
.user-layout-control-object > .user-layout-handle-w { left: -4px; cursor: ew-resize; }


.user-layout-placed-control {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.user-layout-placed-control .users-compact-control-card,
.user-layout-placed-control.user-site-setting-row {
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
}

.user-layout-control-object > .users-compact-control-card,
.user-layout-control-object > .user-layout-builtin-control,
.user-layout-control-object > .user-site-setting-row {
  align-content: start;
  grid-auto-rows: max-content;
  overflow: hidden;
  gap: 1px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.user-layout-control-object > .user-layout-builtin-control:not(.user-layout-gizmo-control) {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.user-layout-control-object > .user-layout-builtin-control:not(.user-layout-gizmo-control) > button {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
}

.user-layout-control-object .users-registry-control-preview {
  display: grid;
  align-items: stretch;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.user-layout-control-object .users-compact-control-name,
.user-layout-control-object .user-layout-builtin-control strong {
  position: absolute;
  z-index: 4;
  bottom: calc(100% + 2px);
  left: 0;
  max-width: 100%;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.user-layout-control-remove {
  position: absolute;
  z-index: 12;
  top: 4px;
  left: 4px;
  right: auto;
  display: none;
  box-sizing: border-box;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.78);
  border-radius: 50%;
  color: #fff;
  background: #35424d;
  box-shadow: 0 2px 5px rgb(0 0 0 / 0.32);
  font-size: 14px;
  line-height: 14px;
  text-align: center;
}

.user-gizmo-assignment-state {
  position: absolute;
  z-index: 13;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid rgb(255 255 255 / 0.72);
  border-radius: 50%;
  color: #ffcc5c;
  background: rgb(30 35 40 / 0.88);
  box-shadow: 0 2px 5px rgb(0 0 0 / 0.32);
  font-size: 12px;
  line-height: 1;
  padding: 0;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 100ms ease;
}

.user-gizmo-assignment-state.is-assigned {
  color: #73d69a;
}

.user-layout-control-object:hover > .user-gizmo-assignment-state,
.user-layout-control-object:focus-within > .user-gizmo-assignment-state {
  opacity: 1;
  visibility: visible;
}

.users-gizmo-quick-tools {
  position: fixed;
  z-index: 10030;
  display: grid;
  grid-template-columns: repeat(2, minmax(110px, 1fr));
  gap: 7px;
  width: min(360px, calc(100vw - 16px));
  padding: 10px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 12px 34px rgb(0 0 0 / 0.36);
  max-height: calc(100vh - 16px);
  overflow: auto;
}

.users-gizmo-quick-tools > strong,
.users-gizmo-quick-tools > .users-gizmo-quick-actions,
.users-gizmo-quick-tools > .users-gizmo-preset-row { grid-column: 1 / -1; }
.users-gizmo-quick-tools label { display: grid; gap: 3px; font-size: 0.68rem; font-weight: 850; }
.users-gizmo-quick-tools input,
.users-gizmo-quick-tools select,
.users-gizmo-quick-tools button { min-width: 0; }
.users-gizmo-quick-actions { display: flex; gap: 6px; }
.users-gizmo-quick-actions > * { flex: 1 1 0; }
.users-gizmo-preset-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }

.users-gizmo-preset-preview-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
  gap: 5px;
  max-height: min(48vh, 360px);
  overflow: auto;
}

.users-gizmo-preset-preview-grid > button {
  display: grid;
  grid-template-rows: minmax(42px, auto) auto;
  place-items: center;
  gap: 3px;
  padding: 5px;
  font-size: 0.64rem;
}

.users-gizmo-preset-preview-grid .user-gizmo-face {
  max-width: 78px;
  transform: scale(0.82);
}

.users-gizmo-style-lock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
}

@media (orientation: portrait) {
  .users-gizmo-preset-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

body.is-painting-user-gizmo-styles .user-layout-control-object { cursor: copy; }

.user-layout-control-object,
.user-layout-control-object :where(button, input, select, textarea, label, strong) {
  font-family: var(--user-control-font-family, inherit);
}

.users-registry-control-value {
  justify-self: end;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
}

.user-control-inlay {
  position: absolute;
  z-index: 0;
  inset: calc(var(--user-inlay-offset) * -1);
  border-radius: var(--user-inlay-radius);
  background: var(--user-inlay-color);
  pointer-events: none;
}

.user-layout-control-object[data-button-shape="pill"] > .user-control-inlay {
  border-radius: 999px;
}

.user-layout-control-object[data-button-shape="circle"] > .user-control-inlay {
  border-radius: 50%;
}

.user-layout-control-object[data-button-shape="square"] > .user-control-inlay {
  border-radius: 0;
}

.user-layout-divider-object[data-divider-style="inlay"].is-selected::after {
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 4px #ff82cb);
}

.user-layout-control-object[data-button-shape="rounded"] > .user-layout-placed-control button {
  border-radius: var(--user-button-radius, 8px);
}

.user-layout-control-object[data-button-shape] > .user-layout-placed-control button {
  width: 100%;
  height: 100%;
}

.user-layout-control-object[data-button-shape="pill"] > .user-layout-placed-control button {
  border-radius: 999px;
}

.user-layout-control-object[data-button-shape="square"] > .user-layout-placed-control button {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 0;
}

.user-layout-control-object[data-button-shape="circle"] > .user-layout-placed-control button {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
}

.user-layout-control-object:is(:hover, :focus-within) > .user-layout-control-remove {
  display: block;
}

.user-layout-control-object.is-user-style-paint-compatible {
  opacity: 1;
  filter: drop-shadow(0 0 7px rgb(104 231 162 / 0.82));
}

.user-layout-control-object.is-user-style-paint-incompatible {
  opacity: 0.3;
  filter: grayscale(0.88);
}

.user-layout-control-object.is-user-style-paint-incompatible:hover::after {
  content: "nah";
  position: absolute;
  z-index: 30;
  top: 50%;
  left: 50%;
  padding: 4px 7px;
  border-radius: 999px;
  color: #fff;
  background: #b7182e;
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.user-layout-builtin-control {
  position: relative;
  display: grid;
  align-content: start;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.user-layout-builtin-control strong {
  padding-right: 22px;
  color: var(--user-control-label-color);
  font-size: 0.78rem;
}

.user-layout-builtin-control button {
  width: 100%;
  height: 100%;
  min-width: 0;
  border-radius: var(--user-button-radius, 8px);
  color: var(--user-button-text);
  background: var(--user-button-fill);
}

.users-control-placement-menu {
  position: fixed;
  z-index: 6500;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: min(330px, calc(100vw - 16px));
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 16px 36px rgb(0 0 0 / 0.32);
}

.users-gizmo-replace-menu {
  position: fixed;
  z-index: 7600;
  top: 50%;
  left: 50%;
  display: grid;
  gap: 8px;
  width: min(360px, calc(100vw - 24px));
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.44);
  transform: translate(-50%, -50%);
}

.users-gizmo-replace-menu p {
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
}

.users-gizmo-replace-menu > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.users-control-placement-menu > strong {
  grid-column: 1 / -1;
  color: var(--ink);
}

.users-control-placement-menu button {
  min-width: 0;
  min-height: 36px;
  padding: 6px 8px;
}

.users-compact-control-name {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 950;
}

.users-compact-control-card .users-registry-control-preview {
  margin: 0;
  padding: 2px 3px;
}

.user-layout-control-object .users-compact-control-card .users-registry-control-preview {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.user-layout-control-object .users-compact-control-name,
.user-layout-control-object .user-layout-builtin-control strong {
  line-height: 1.05;
}

.user-control-drop-preview {
  position: absolute;
  z-index: 40;
  display: grid;
  align-content: start;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  padding: calc(var(--user-layout-setting-gap, 8px) * 0.35);
  border: 2px dashed #ff6fc4;
  border-radius: 6px;
  color: var(--user-control-label-color);
  background: color-mix(in srgb, var(--user-panel-surface, #76503e), transparent 12%);
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.35);
  font-size: 0.7rem;
  font-weight: 950;
  text-align: left;
  pointer-events: none;
  opacity: 0.86;
}

.user-control-drop-preview > strong {
  display: block;
  padding: 0 2px;
  font-size: 0.74rem;
  line-height: 1.05;
}

.user-control-drop-preview[data-button-shape] {
  padding: 0;
}

.user-control-drop-preview[data-button-shape] > strong {
  position: absolute;
  bottom: calc(100% + 2px);
  left: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-control-drop-preview[data-button-shape] button {
  width: 100%;
  height: 100%;
}

.user-control-drop-preview[data-button-shape="circle"],
.user-control-drop-preview[data-button-shape="circle"] button {
  border-radius: 50%;
}

.user-control-drop-preview[data-button-shape="pill"],
.user-control-drop-preview[data-button-shape="pill"] button {
  border-radius: 999px;
}

.user-control-drop-preview[data-button-shape="square"],
.user-control-drop-preview[data-button-shape="square"] button {
  border-radius: 0;
}

.user-control-drop-preview .users-registry-control-preview {
  margin: 0;
  padding: 1px 2px;
  border: 0;
  background: transparent;
}

.users-layout-preset-dialog {
  position: fixed;
  z-index: 9000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgb(13 18 24 / 0.58);
}

.users-layout-preset-card {
  display: grid;
  gap: 12px;
  width: min(360px, calc(100vw - 32px));
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 18px 44px rgb(0 0 0 / 0.36);
}

.users-layout-preset-card label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-weight: 850;
}

.users-layout-preset-card input {
  width: 100%;
}

.users-layout-preset-card > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.users-layout-preset-card .is-destructive {
  border-color: #a52a2a;
  color: #fff;
  background: #a52a2a;
}

.users-registry-control-preview input[type="range"],
.user-site-setting-row input[type="range"],
.users-material-samples input[type="range"] {
  accent-color: var(--user-slider-accent);
  appearance: none;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
}

.users-registry-control-preview select,
.user-site-setting-row select,
.users-material-samples select {
  border-color: var(--user-dropdown-stroke);
  border-radius: var(--user-dropdown-radius, 8px);
  color: color-mix(in srgb, var(--user-dropdown-fill), #000 78%);
  background-color: var(--user-dropdown-fill);
  background-image:
    linear-gradient(color-mix(in srgb, var(--user-dropdown-fill) var(--user-material-texture-cover-percent), transparent), color-mix(in srgb, var(--user-dropdown-fill) var(--user-material-texture-cover-percent), transparent)),
    linear-gradient(180deg, color-mix(in srgb, #fff var(--user-material-gloss-percent), transparent), transparent 48%),
    var(--user-material-texture-image);
  background-size: auto, auto, var(--user-material-texture-scale);
  background-blend-mode: normal, screen, soft-light;
  box-shadow:
    inset 0 var(--user-material-effective-bevel) color-mix(in srgb, #fff var(--user-material-highlight-percent), transparent),
    inset 0 calc(var(--user-material-effective-bevel) * -1) color-mix(in srgb, #000 var(--user-material-edge-percent), transparent),
    0 calc(var(--user-material-effective-bevel) * 0.45) calc(var(--user-material-effective-bevel) * 1.4) rgb(0 0 0 / calc(0.1 * var(--user-material-shadow-strength)));
}

.users-registry-control-preview input[type="checkbox"],
.user-site-setting-row input[type="checkbox"] {
  width: var(--user-toggle-size, 20px);
  height: var(--user-toggle-size, 20px);
  accent-color: var(--user-toggle-accent);
}

.users-registry-control-preview button,
.user-site-setting-row button,
.users-compact-control-card button:not(.users-compact-control-remove),
.user-layout-builtin-control button,
.users-material-samples button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: var(--user-button-edge-width, max(1px, calc(var(--user-material-effective-bevel) * 0.5))) solid var(--user-button-edge-color, color-mix(in srgb, var(--user-button-fill), #000 var(--user-material-edge-percent)));
  border-top-color: color-mix(in srgb, var(--user-button-fill), #fff var(--user-material-edge-percent));
  border-left-color: color-mix(in srgb, var(--user-button-fill), #fff calc(var(--user-material-edge-percent) * 0.72));
  border-radius: var(--user-button-radius, 8px);
  color: var(--user-button-text);
  background-color: var(--user-button-fill);
  background-image: linear-gradient(180deg, color-mix(in srgb, #fff var(--user-material-gloss-percent), transparent), transparent 48%, color-mix(in srgb, #000 calc(var(--user-material-gloss-percent) * 0.45), transparent));
  box-shadow:
    inset 0 var(--user-material-effective-bevel) color-mix(in srgb, #fff var(--user-material-highlight-percent), transparent),
    inset 0 calc(var(--user-material-effective-bevel) * -1) color-mix(in srgb, #000 var(--user-material-edge-percent), transparent),
    0 calc(var(--user-material-effective-bevel) * 0.7) calc(var(--user-material-effective-bevel) * 1.8) rgb(0 0 0 / calc(0.16 * var(--user-material-shadow-strength)));
  text-shadow: 0 1px 1px rgb(0 0 0 / 0.38);
  transition: transform 90ms ease, box-shadow 90ms ease, filter 120ms ease;
}

.user-layout-control-object[data-user-button-edge-style="none"] button {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.user-layout-control-object[data-user-button-edge-style="solid"] button {
  border-style: solid;
  border-color: var(--user-button-edge-color);
  outline: 0 !important;
}

.user-layout-control-object[data-user-button-edge-style="inset"] button { border-style: inset; outline: 0 !important; }
.user-layout-control-object[data-user-button-edge-style="outset"] button { border-style: outset; outline: 0 !important; }
.user-layout-control-object[data-user-button-edge-style="stitched"] button {
  outline: max(1px, calc(var(--user-button-edge-width) / 2)) dashed var(--user-button-edge-color);
  outline-offset: calc((var(--user-button-edge-width) + 2px) * -1);
}

.users-registry-control-preview button::before,
.user-site-setting-row button::before,
.users-compact-control-card button:not(.users-compact-control-remove)::before,
.user-layout-builtin-control button::before,
.users-material-samples button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: var(--user-material-texture-image);
  background-size: var(--user-material-texture-scale);
  background-repeat: repeat;
  mix-blend-mode: soft-light;
  opacity: var(--user-material-texture-opacity);
  pointer-events: none;
}

.users-registry-control-preview button:not(:disabled):active,
.user-site-setting-row button:not(:disabled):active,
.users-compact-control-card button:not(.users-compact-control-remove):not(:disabled):active,
.user-layout-builtin-control button:not(:disabled):active,
.users-material-samples button:not(:disabled):active {
  transform: translateY(var(--user-material-press-depth));
  box-shadow:
    inset 0 calc(var(--user-material-effective-bevel) * 1.2) color-mix(in srgb, #000 var(--user-material-edge-percent), transparent),
    inset 0 calc(var(--user-material-effective-bevel) * -0.35) color-mix(in srgb, #fff var(--user-material-highlight-percent), transparent);
}

.map-stage[data-user-construction="flat"] :where(.users-registry-control-preview, .user-site-setting-row, .user-layout-builtin-control, .users-material-samples) button,
.map-stage[data-user-construction="flat"] :where(.users-registry-control-preview, .user-site-setting-row, .users-material-samples) select {
  border-width: 1px;
  box-shadow: none;
}

.map-stage[data-user-construction="recessed"] :where(.users-registry-control-preview, .user-site-setting-row, .user-layout-builtin-control, .users-material-samples) button,
.map-stage[data-user-construction="inset"] :where(.users-registry-control-preview, .user-site-setting-row, .user-layout-builtin-control, .users-material-samples) button {
  border-top-color: color-mix(in srgb, var(--user-button-fill), #000 var(--user-material-edge-percent));
  border-bottom-color: color-mix(in srgb, var(--user-button-fill), #fff var(--user-material-edge-percent));
  box-shadow:
    inset 0 calc(var(--user-material-effective-bevel) * 1.2) color-mix(in srgb, #000 var(--user-material-edge-percent), transparent),
    inset 0 calc(var(--user-material-effective-bevel) * -0.5) color-mix(in srgb, #fff var(--user-material-highlight-percent), transparent);
}

.map-stage[data-user-construction="stitched"] :where(.users-registry-control-preview, .user-site-setting-row, .user-layout-builtin-control, .users-material-samples) button {
  outline: 1px dashed color-mix(in srgb, var(--user-button-text), transparent 45%);
  outline-offset: -4px;
}

.map-stage[data-user-construction="hardware"] :where(.users-registry-control-preview, .user-site-setting-row, .user-layout-builtin-control, .users-material-samples) button {
  text-shadow: 0 1px 0 rgb(255 255 255 / 0.32);
}

.users-registry-control-preview input[type="text"],
.users-registry-control-preview textarea,
.user-site-setting-row input[type="text"],
.user-site-setting-row textarea {
  border-color: var(--user-text-control-stroke);
  border-radius: var(--user-text-control-radius, 8px);
  background-color: var(--user-text-control-fill);
  background-image:
    linear-gradient(color-mix(in srgb, var(--user-text-control-fill) var(--user-material-texture-cover-percent), transparent), color-mix(in srgb, var(--user-text-control-fill) var(--user-material-texture-cover-percent), transparent)),
    var(--user-material-texture-image);
  background-size: auto, var(--user-material-texture-scale);
  background-blend-mode: normal, soft-light;
  box-shadow: inset 0 calc(var(--user-material-effective-bevel) * 0.8) calc(var(--user-material-effective-bevel) * 1.8) rgb(0 0 0 / calc(0.14 * var(--user-material-shadow-strength)));
}

.users-registry-control-preview input[type="range"]::-webkit-slider-runnable-track,
.user-site-setting-row input[type="range"]::-webkit-slider-runnable-track,
.users-material-samples input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border: 1px solid color-mix(in srgb, var(--user-slider-track), #000 var(--user-material-edge-percent));
  border-radius: 999px;
  background: var(--user-slider-track);
  box-shadow: inset 0 2px 3px rgb(0 0 0 / 0.42), 0 1px color-mix(in srgb, #fff var(--user-material-highlight-percent), transparent);
}

.users-registry-control-preview input[type="range"]::-webkit-slider-thumb,
.user-site-setting-row input[type="range"]::-webkit-slider-thumb,
.users-material-samples input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border: 2px solid color-mix(in srgb, var(--user-slider-thumb), #000 var(--user-material-edge-percent));
  border-top-color: color-mix(in srgb, var(--user-slider-thumb), #fff var(--user-material-edge-percent));
  border-radius: 50%;
  background-color: var(--user-slider-thumb);
  background-image: var(--user-material-texture-image);
  background-size: var(--user-material-texture-scale);
  box-shadow: 0 2px 5px rgb(0 0 0 / 0.42), inset 0 2px color-mix(in srgb, #fff var(--user-material-highlight-percent), transparent);
}

.users-registry-control-preview input[type="range"]::-moz-range-track,
.user-site-setting-row input[type="range"]::-moz-range-track,
.users-material-samples input[type="range"]::-moz-range-track {
  height: 6px;
  border: 1px solid color-mix(in srgb, var(--user-slider-track), #000 var(--user-material-edge-percent));
  border-radius: 999px;
  background: var(--user-slider-track);
  box-shadow: inset 0 2px 3px rgb(0 0 0 / 0.42);
}

.users-registry-control-preview input[type="range"]::-moz-range-thumb,
.user-site-setting-row input[type="range"]::-moz-range-thumb,
.users-material-samples input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid color-mix(in srgb, var(--user-slider-thumb), #000 var(--user-material-edge-percent));
  border-radius: 50%;
  background: var(--user-slider-thumb);
  box-shadow: 0 2px 5px rgb(0 0 0 / 0.42);
}

.users-registry-control-preview input[type="color"],
.user-site-setting-row input[type="color"] {
  min-height: var(--user-color-control-height, 42px);
  border-radius: var(--user-color-control-radius);
}

.users-compact-control-card,
.user-site-setting-row {
  color: var(--user-control-label-color);
  font-size: var(--user-control-font-size);
  font-weight: var(--user-control-font-weight, 800);
}

.users-compact-control-remove {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 24px;
  min-height: 24px;
  padding: 0;
  border-radius: 50%;
}

.users-viewport-resize-dialog {
  position: fixed;
  z-index: 6000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgb(16 20 26 / 0.58);
}

.users-viewport-resize-dialog[hidden] { display: none !important; }

.users-viewport-resize-card {
  width: min(420px, 100%);
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 20px 46px rgb(0 0 0 / 0.32);
}

.users-viewport-resize-card div {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

body.users-builder-mode {
  --users-admin-gap: clamp(8px, 1.1vw, 18px);
  --users-admin-top: calc(var(--user-map-viewport-top) + var(--users-admin-gap));
  --users-admin-right: calc(var(--user-map-viewport-right) + var(--users-admin-gap));
  --users-admin-bottom: calc(var(--user-map-viewport-bottom) + var(--users-admin-gap));
  --users-admin-left: calc(var(--user-map-viewport-left) + var(--users-admin-gap));
  --users-admin-column-width: calc(
    (100vw - var(--user-map-viewport-left) - var(--user-map-viewport-right) - (var(--users-admin-gap) * 4)) / 3
  );
}

body.users-builder-mode .users-appearance-admin-panel,
body.users-builder-mode .users-staging-admin-panel,
body.users-builder-mode .map-shell > .panel {
  top: var(--users-admin-top);
  bottom: var(--users-admin-bottom);
  width: var(--users-admin-column-width);
  min-width: 0;
  max-width: none;
  max-height: none;
  overflow: auto;
  box-sizing: border-box;
}

body.users-builder-mode .users-appearance-admin-panel {
  left: var(--users-admin-left);
  right: auto;
}

body.users-builder-mode .map-shell > .panel {
  left: calc(var(--users-admin-left) + var(--users-admin-column-width) + var(--users-admin-gap));
}

body.users-builder-mode .users-staging-admin-panel {
  left: calc(var(--users-admin-left) + (var(--users-admin-column-width) + var(--users-admin-gap)) * 2);
  right: auto;
}

/* Device previews size the complete material shell; the map remains an inset region. */
.map-stage {
  --user-device-preview-top: 0px;
  --user-device-preview-right: 0px;
  --user-device-preview-bottom: 0px;
  --user-device-preview-left: 0px;
}

body.user-site-mode .user-device-frame,
body.users-builder-mode .user-device-frame {
  inset:
    var(--user-device-preview-top)
    var(--user-device-preview-right)
    var(--user-device-preview-bottom)
    var(--user-device-preview-left) !important;
  display: block !important;
  overflow: hidden;
  border: 3px solid color-mix(in srgb, var(--users-shell-leather-color, var(--leather-color)), #fff 48%) !important;
  border-radius: var(--user-device-radius) !important;
  opacity: 1;
  background-color: var(--users-shell-leather-color, var(--leather-color)) !important;
  background-image: url("assets/textures/pebbled-leather-gray.png"), url("assets/backgrounds/leather.png") !important;
  background-repeat: repeat !important;
  background-size: var(--leather-texture-size), 420px 420px !important;
  background-blend-mode: var(--leather-blend-mode), multiply !important;
  box-shadow:
    0 0 0 2px rgb(20 18 17 / 0.82),
    0 0 0 7px rgb(255 255 255 / 0.12),
    inset 0 2px 0 rgb(255 255 255 / 0.15),
    inset 0 -10px 24px rgb(0 0 0 / 0.28),
    0 20px 44px rgb(0 0 0 / 0.38) !important;
}

body.users-builder-mode[data-user-device-preview^="tablet"] .user-device-frame {
  --user-device-radius: 32px;
}

body.users-builder-mode[data-user-device-preview^="phone"] .user-device-frame {
  --user-device-radius: 44px;
  border-width: 4px !important;
  box-shadow:
    0 0 0 3px rgb(20 18 17 / 0.88),
    0 0 0 8px rgb(255 255 255 / 0.14),
    inset 0 2px 0 rgb(255 255 255 / 0.15),
    inset 0 -10px 24px rgb(0 0 0 / 0.28),
    0 20px 44px rgb(0 0 0 / 0.38) !important;
}

body.user-site-mode .user-frame-layout-layer,
body.users-builder-mode .user-frame-layout-layer {
  inset:
    var(--user-device-preview-top)
    var(--user-device-preview-right)
    var(--user-device-preview-bottom)
    var(--user-device-preview-left);
}

body.users-builder-mode .user-map-viewport-resize-layer {
  inset:
    calc(var(--user-device-preview-top) + var(--user-map-viewport-top))
    calc(var(--user-device-preview-right) + var(--user-map-viewport-right))
    calc(var(--user-device-preview-bottom) + var(--user-map-viewport-bottom))
    calc(var(--user-device-preview-left) + var(--user-map-viewport-left));
}

body.users-builder-mode .map-stage > .users-builder-admin-grid:not([hidden]) {
  position: absolute;
  z-index: 1810;
  inset:
    calc(var(--user-device-preview-top) + var(--user-map-viewport-top) + 10px)
    calc(var(--user-device-preview-right) + var(--user-map-viewport-right) + 10px)
    calc(var(--user-device-preview-bottom) + var(--user-map-viewport-bottom) + 10px)
    calc(var(--user-device-preview-left) + var(--user-map-viewport-left) + 10px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1.1vw, 18px);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

body.users-builder-mode .map-stage > .users-builder-admin-grid > .users-appearance-admin-panel,
body.users-builder-mode .map-stage > .users-builder-admin-grid > .panel {
  position: relative !important;
  inset: auto !important;
  display: block;
  align-self: stretch;
  width: auto !important;
  min-width: 0;
  max-width: none !important;
  height: auto;
  min-height: 0;
  max-height: 100% !important;
  margin: 0;
  overflow: auto;
  transform: none !important;
  box-sizing: border-box;
  pointer-events: auto;
}

/* Keep the Users tabs, device preview, and current theme outside the one
   scrolling region when the admin panels are moved into the device frame. */
body.users-builder-mode .map-stage > .users-builder-admin-grid > .panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.users-builder-mode .map-stage > .users-builder-admin-grid > .panel > .panel-tabs,
body.users-builder-mode .map-stage > .users-builder-admin-grid > .panel > .users-device-preview-toolbar,
body.users-builder-mode .map-stage > .users-builder-admin-grid > .panel > .panel-footer-theme {
  flex: 0 0 auto;
}

body.users-builder-mode .map-stage > .users-builder-admin-grid > .panel > .panel-tab-panels {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Media presentation editor */
.youtube-media-entry,
.media-style-heading-row,
.media-fullscreen-row,
.media-layout-edit-grid,
.media-layout-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 6px;
}

.youtube-media-entry button,
.media-style-heading-row > label:first-child {
  min-width: 0;
}

.media-use-default-toggle,
.media-fullscreen-row > label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  white-space: nowrap;
}

.media-style-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 7px;
}

.media-type-picker {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  margin: 5px 0 7px;
}

.media-type-picker button {
  min-width: 0;
  min-height: 34px;
  padding: 3px;
  font-size: 1rem;
}

.media-type-picker button.is-selected {
  border-color: var(--control);
  background: var(--control);
  color: var(--control-text);
}

.media-style-control-grid label,
.media-layout-edit-grid label {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 850;
}

.media-style-control-grid input,
.media-style-control-grid select,
.media-layout-edit-grid input {
  min-width: 0;
  width: 100%;
}

.media-layout-preset-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 6px 0;
}

.media-layout-preset-card {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 4px;
  aspect-ratio: 16 / 10;
}

.media-layout-preset-card.is-selected {
  border-color: var(--control);
  box-shadow: inset 0 0 0 1px var(--control);
}

.media-layout-mini-preview {
  display: block;
  width: 100%;
  height: 100%;
  padding: 3px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--ink), transparent 86%);
}

.media-layout-edit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.media-layout-frame-toggle {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  align-self: end;
  min-height: 31px;
}

.media-combo-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--media-combo-gap, 7px);
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: var(--media-combo-padding, 10px);
  overflow: hidden;
  border-radius: var(--media-combo-radius, 12px);
}

.media-combo-preview.has-containing-frame {
  border: 1px solid color-mix(in srgb, currentColor, transparent 48%);
  background: color-mix(in srgb, currentColor, transparent 92%);
  box-shadow: inset 0 1px 2px rgb(255 255 255 / .18), 0 4px 13px rgb(0 0 0 / .18);
}

.media-combo-slot {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, currentColor, transparent 60%);
  border-radius: max(3px, calc(var(--media-combo-radius, 12px) * .45));
  background: color-mix(in srgb, currentColor, transparent 86%);
}

.media-combo-slot-image {
  background:
    radial-gradient(circle at 70% 28%, #f5d477 0 8%, transparent 9%),
    linear-gradient(145deg, transparent 42%, #708f73 43% 62%, transparent 63%),
    linear-gradient(35deg, #466d72 0 45%, #aac8be 46%);
}

.media-combo-slot-text {
  align-content: center;
  justify-items: stretch;
  gap: 7%;
  padding: 9%;
  background: color-mix(in srgb, var(--media-style-background, #fff), #fff 14%);
}

.media-combo-slot-text i {
  display: block;
  width: 100%;
  height: 9%;
  min-height: 2px;
  border-radius: 99px;
  background: currentColor;
  opacity: .56;
  font-size: clamp(.45rem, 1vw, .72rem);
  font-style: normal;
}

.media-combo-slot-text i:first-child { height: auto; background: none; opacity: .9; font-weight: 850; }
.media-combo-slot-video { background: linear-gradient(145deg, #1b2632, #4b6577); color: #fff; font-size: 1.35em; }
.media-combo-slot-audio { grid-auto-flow: column; gap: 5px; padding: 8%; background: linear-gradient(145deg, #302850, #745c96); color: #fff; }
.media-combo-slot-audio i { font-style: normal; letter-spacing: .08em; }
.media-combo-story { grid-template-columns: 1fr; grid-template-rows: 3fr 1fr; }
.media-combo-split { grid-template-columns: 1.45fr 1fr; grid-template-rows: 1fr; }
.media-combo-postcard { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.media-combo-postcard .media-combo-slot { grid-area: 1 / 1; }
.media-combo-postcard .media-combo-slot-text { align-self: end; z-index: 2; height: 36%; margin: 5%; color: #fff; background: rgb(15 25 35 / .74); }
.media-combo-journal { grid-template-columns: repeat(2, 1fr); grid-template-rows: 1.3fr .7fr; }
.media-combo-journal .media-combo-slot-text { grid-column: 1 / -1; }
.media-combo-gallery { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr .45fr; }
.media-combo-gallery .media-combo-slot-text { grid-column: 1 / -1; }
.media-combo-feature { grid-template-columns: 1.65fr 1fr; grid-template-rows: repeat(2, 1fr); }
.media-combo-feature .media-combo-slot-image { grid-row: 1 / -1; }
.media-combo-video-note, .media-combo-audio-story { grid-template-columns: 1.5fr 1fr; grid-template-rows: 1fr; }
.media-combo-audio-story { grid-template-rows: 1fr .55fr; }
.media-combo-audio-story .media-combo-slot-image { grid-row: 1 / -1; }

.media-layout-mini-preview .media-combo-preview {
  --media-combo-gap: 2px !important;
  --media-combo-padding: 3px !important;
  --media-combo-radius: 4px !important;
}

.media-layout-mini-preview .media-combo-slot-text { gap: 2px; padding: 3px; }
.media-layout-mini-preview .media-combo-slot-text i:first-child { font-size: 0; }
.media-layout-mini-preview .media-combo-slot-video { font-size: .8rem; }

.media-layout-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

.media-layout-actions button { min-width: 0; padding-inline: 4px; }

.media-style-preview {
  position: absolute;
  inset: 0;
  z-index: 1450;
  overflow: visible;
  pointer-events: none;
}

.media-style-preview[hidden] { display: none; }

.media-style-placeholder {
  position: absolute;
  box-sizing: border-box;
  min-width: 70px;
  min-height: 55px;
  padding: var(--media-style-padding);
  overflow: visible;
  border: var(--media-style-border-width) solid var(--media-style-border);
  border-radius: var(--media-style-radius);
  background: var(--media-style-background);
  box-shadow: 0 calc(9px * var(--media-style-shadow)) calc(35px * var(--media-style-shadow)) rgb(0 0 0 / calc(.45 * var(--media-style-shadow)));
  color: var(--media-style-text);
  cursor: move;
  pointer-events: auto;
  touch-action: none;
}

.media-style-placeholder-badge {
  position: absolute;
  bottom: calc(100% + 3px);
  left: 0;
  padding: 2px 6px;
  border-radius: 4px;
  background: #fffaf0;
  color: #18222e;
  font-size: .68rem;
  font-weight: 900;
  white-space: nowrap;
}

.media-style-placeholder-content {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: max(0px, calc(var(--media-style-radius) - var(--media-style-padding)));
  text-align: center;
}

.media-style-placeholder-content p { margin: 0; max-width: 34ch; }
.media-placeholder-play { font-size: clamp(1.7rem, 5vw, 4rem); color: #ff2a34; text-shadow: 0 2px 8px #0008; }
.media-placeholder-wave { font-size: clamp(1rem, 3vw, 2.4rem); letter-spacing: .12em; }

.media-style-handle {
  position: absolute;
  z-index: 4;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #d83f8d;
  box-shadow: 0 1px 4px #0008;
}
.media-style-handle-n { top: -7px; left: calc(50% - 6px); cursor: ns-resize; }
.media-style-handle-ne { top: -7px; right: -7px; cursor: nesw-resize; }
.media-style-handle-e { top: calc(50% - 6px); right: -7px; cursor: ew-resize; }
.media-style-handle-se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.media-style-handle-s { bottom: -7px; left: calc(50% - 6px); cursor: ns-resize; }
.media-style-handle-sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.media-style-handle-w { top: calc(50% - 6px); left: -7px; cursor: ew-resize; }
.media-style-handle-nw { top: -7px; left: -7px; cursor: nwse-resize; }

.media-viewer-frame {
  border-width: var(--media-style-border-width, 1px);
  border-color: var(--media-style-border, var(--line));
  border-radius: var(--media-style-radius, 12px);
  background: var(--media-style-background, #111827);
  color: var(--media-style-text, #fff);
  box-shadow: 0 18px calc(54px * var(--media-style-shadow, .48)) rgb(0 0 0 / .48);
}

.media-viewer-content {
  padding: var(--media-style-padding, 12px);
  background: var(--media-style-background, #090d14);
  color: var(--media-style-text, #fff);
}

.media-viewer-content img,
.media-viewer-content video,
.media-viewer-content iframe {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border: 0;
  object-fit: var(--media-style-fit, contain);
}

.trip-media-preview iframe {
  width: 100%;
  min-height: 240px;
  border: 0;
  border-radius: 8px;
}

.map-stage.media-map-treatment-active #userMapViewport {
  opacity: var(--media-map-opacity, .62);
  filter: blur(var(--media-map-blur, 2px));
  mix-blend-mode: var(--media-map-blend, normal);
  transition: opacity 180ms ease, filter 180ms ease;
}

.user-layout-control-object input[type="color"] {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 2px;
}

.user-layout-control-object :where(.users-compact-control-name, label, strong) {
  color: var(--user-control-label-color, #18222e);
}

body.users-builder-mode:is(
  [data-user-device-preview^="phone"],
  [data-user-device-preview^="tablet"]
) .map-stage > .users-builder-admin-grid:not([hidden]) {
  inset: 0;
  display: block;
  overflow: visible;
  pointer-events: none;
}

body.users-builder-mode:is(
  [data-user-device-preview^="phone"],
  [data-user-device-preview^="tablet"]
) .map-stage > .users-builder-admin-grid > .users-appearance-admin-panel,
body.users-builder-mode:is(
  [data-user-device-preview^="phone"],
  [data-user-device-preview^="tablet"]
) .map-stage > .users-builder-admin-grid > .panel {
  position: absolute !important;
  top: max(14px, var(--user-device-preview-top)) !important;
  bottom: max(14px, var(--user-device-preview-bottom)) !important;
  width: clamp(220px, calc(var(--user-device-preview-left) - 28px), 380px) !important;
  max-height: none !important;
}

body.users-builder-mode:is(
  [data-user-device-preview^="phone"],
  [data-user-device-preview^="tablet"]
) .map-stage > .users-builder-admin-grid > .users-appearance-admin-panel {
  right: auto !important;
  left: 14px !important;
}

body.users-builder-mode:is(
  [data-user-device-preview^="phone"],
  [data-user-device-preview^="tablet"]
) .map-stage > .users-builder-admin-grid > .panel {
  right: 14px !important;
  left: auto !important;
}

/* Final runtime overrides: these intentionally follow the builder geometry rules. */
body.user-site-mode .user-map-viewport {
  inset: 35px 35px 78px !important;
  border-radius: 18px;
}
body.user-site-mode #siteModeToggle {
  top: 35px;
  right: 42px;
  bottom: auto;
  left: auto;
  width: 48px;
  min-height: 58px;
  padding: 4px 6px 9px;
  transform: translateY(-62%);
  border-radius: 0 0 16px 16px;
  font-size: .58rem;
  line-height: 1;
  opacity: .38;
}
body.user-site-mode #siteModeToggle:hover,
body.user-site-mode #siteModeToggle:focus-visible {
  transform: translateY(-14%);
  opacity: .96;
}