/* Dil kuralı: sayfa başlığı ve çalışma alanı üst düğmeleri (.page-heading, .workspace-actions) BÜYÜK HARF;
   yan panel ve diyalog düğmeleri cümle düzeninde kalır. */
:root {
  --zs-bg:#111112;
  --zs-surface:rgba(13,14,15,.66);
  --zs-surface-2:rgba(13,14,15,.86);
  --zs-overlay:rgba(17,17,18,.98);
  --zs-accent:#b5e8fa;
  --zs-accent-soft:rgba(181,232,250,.06);
  --zs-accent-glow:rgba(181,232,250,.1);
  --zs-on-accent:#111;
  --zs-text:#f4f3ef;
  --zs-text-2:#aaa9a7;
  --zs-text-3:#8a8987;
  --zs-line:#ffffff12;
  --zs-line-2:#ffffff1c;
  --zs-line-3:#ffffff2e;
  --zs-radius:10px;
  --zs-radius-lg:14px;
  --zs-radius-pill:999px;
  --zs-font:Montserrat,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --zs-fs-xs:12px;
  --zs-fs-sm:14px;
  --zs-fs-base:16px;
  --zs-fs-lg:18px;
  --zs-fs-h2:20px;
  --zs-fs-display:36px;
  --zs-lh-xs:16px;
  --zs-lh-sm:20px;
  --zs-lh-base:24px;
  --zs-lh-lg:28px;
  --zs-lh-h2:28px;
  --zs-lh-display:40px;
  --zs-fw-regular:400;
  --zs-fw-medium:500;
  --zs-fw-semibold:600;
  --zs-fw-bold:700;
  --zs-sp-2:8px;
  --zs-sp-3:12px;
  --zs-sp-4:16px;
  --zs-sp-5:24px;
  --zs-sp-6:32px;
  --zs-sp-7:40px;
  --zs-sp-8:60px;
  --zs-sp-9:88px;
  --zs-gutter:20px;
  --zs-container:1280px;
  --zs-bar-h:60px;
  --zs-bar-gap:12px;
  --zs-ease:cubic-bezier(.4,0,.2,1);
  --zs-t:150ms var(--zs-ease);
  --zz-team1:#8fcafb;
  --zz-team2:#f19aa4;
  --zz-red-zone:#ed2638;
  --zz-warn:#f4c27b;
  --zz-ok:#addeb2;
  --zz-danger:#f19aa4;
  --zz-map-surface:#10191e;
  --zz-map-bg:#101314;
  --zz-stage-top:#26303a;
  --zz-stage-bottom:#11151b;
  --zz-radius-xs:6px;
  --zz-surface-solid:var(--zs-overlay);
  --zz-sidebar-w:295px;
  --zz-team1-bg:#0d345ce6;
  --zz-team2-bg:#632932e6;
  --zz-ok-bg:#255441;
  --zz-next-bg:#173c4c;
  --zz-text-shadow:#000;
  --zz-danger-muted:#db9f9f;
  --zz-cb-fg:#fff;
  --zz-cb-edge:#ddd;
  --zz-cb-sky:#56b4e9;
  --zz-cb-sky-bg:#124d6e;
  --zz-cb-sky-text:#8bd5ff;
  --zz-cb-orange:#e69f00;
  --zz-cb-orange-bg:#594100;
  --zz-cb-orange-text:#f5ca69;
  --bg:var(--zs-bg);
  --surface:var(--zs-surface-2);
  --raised:var(--zs-surface);
  --line:var(--zs-line);
  --line2:var(--zs-line-2);
  --accent:var(--zs-accent);
  --text:var(--zs-text);
  --muted:var(--zs-text-2);
  --dim:var(--zs-text-3);
  --radius:var(--zs-radius);
  color-scheme:dark;
  --zz-shadow:#000a;
  font-family:var(--zs-font);
    --zz-shadow-sm:0 2px 8px color-mix(in srgb,var(--zz-shadow) 50%,transparent);
  --zz-shadow-md:0 6px 20px color-mix(in srgb,var(--zz-shadow) 55%,transparent);
  --zz-shadow-lg:0 12px 40px color-mix(in srgb,var(--zz-shadow) 60%,transparent);
  --zz-blur:12px;
  --zz-z-north:400;
  --zz-z-timers:450;
  --zz-z-map:500;
  --zz-z-panel:600;
  --zz-z-drawbar:700;
  --zz-z-bar:900;
  --zz-z-skip:1000;
  --zz-z-expanded:1100;
  --zz-z-toast:2000;
  accent-color:var(--zs-accent);
  font-synthesis:none
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--zs-bg);
  color:var(--zs-text);
  font-size:var(--zs-fs-sm);
  line-height:var(--zs-lh-sm);
  font-weight:500;
  -webkit-font-smoothing:antialiased
}
button,input,select,textarea {
  font:inherit
}
button,a,input,select {
  touch-action:manipulation
}
button,a {
  transition:background var(--zs-t),color var(--zs-t),border-color var(--zs-t)
}
button {
  cursor:pointer;
  color:inherit
}
button:disabled {
  opacity:.4;
  cursor:default
}
a {
  color:inherit;
  text-decoration:none
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:2px solid var(--zs-accent);
  outline-offset:2px
}
button {
  border:0
}
button svg,span[data-icon] svg {
  width:18px;
  height:18px;
  display:block;
  flex:none
}
span[data-icon] {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none
}
input,select,textarea {
  color:var(--zs-text);
  background:var(--zs-surface-2);
  border:1px solid var(--zs-line-2);
  border-radius:var(--zs-radius);
  font-size:var(--zs-fs-sm);
  padding:9px 12px;
  outline:none;
  max-width:100%
}
input:not([type=range],[type=color],[type=checkbox],[type=radio]) {
  min-height:40px
}
input::placeholder,textarea::placeholder {
  color:var(--zs-text-3)
}
input:focus,select:focus,textarea:focus {
  border-color:var(--zs-accent)
}
input[type=checkbox] {
  accent-color:var(--zs-accent);
  width:15px;
  height:15px;
  min-height:0
}
select {
  cursor:pointer
}
h1,h2,h3,p {
  margin:0
}
h1 {
  font-size:var(--zs-fs-display);
  line-height:var(--zs-lh-display)
}
h2 {
  font-size:var(--zs-fs-h2);
  line-height:var(--zs-lh-h2)
}
h3 {
  font-size:var(--zs-fs-lg);
  line-height:var(--zs-lh-lg)
}
.muted {
  color:var(--zs-text-2)
}
.little {
  font-size:var(--zs-fs-xs)
}
.eyebrow {
  font-size:var(--zs-fs-xs);
  font-weight:700;
  color:var(--zs-text-3);
  letter-spacing:1.6px
}
.skip-link {
  position:fixed;
  left:-9999px;
  top:0;
  z-index:var(--zz-z-skip)
}
.skip-link:focus {
  left:20px;
  background:var(--zs-accent);
  color:var(--zs-on-accent);
  padding:12px
}
.zs-topbar {
  position:fixed;
  z-index:var(--zz-z-bar);
  top:var(--zs-bar-gap);
  left:var(--zs-bar-gap);
  right:var(--zs-bar-gap);
  height:var(--zs-bar-h);
  display:flex;
  gap:12px;
  align-items:center;
  padding:0 20px;
  border:1px solid var(--zs-line);
  border-radius:var(--zs-radius);
  background:var(--zs-surface);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px)
}
.zs-brand {
  margin-right:8px;
  flex:none;
  display:flex
}
.zs-brand img {
  width:auto;
  height:40px
}
.zs-nav {
  display:flex;
  gap:2px;
  align-items:center
}
.zs-nav a {
  font-size:var(--zs-fs-sm);
  line-height:var(--zs-lh-xs);
  font-weight:var(--zs-fw-medium);
  text-transform:uppercase;
  letter-spacing:0;
  color:var(--zs-text);
  padding:8px 7px;
  white-space:nowrap;
  border:1px solid transparent;
  border-radius:var(--zs-radius);
  background:transparent;
  transition:background-color var(--zs-t),color var(--zs-t)
}
.zs-nav a:hover {
  background:var(--zs-line);
  color:var(--zs-text)
}
.zs-nav a.active {
  background:transparent;
  color:var(--zs-accent)
}
.login {
  margin-left:auto;
  background:var(--zs-accent);
  color:var(--zs-on-accent);
  font-size:var(--zs-fs-base);
  line-height:16px;
  text-transform:uppercase;
  padding:8px 16px;
  border:1px solid transparent;
  border-radius:var(--zs-radius);
  white-space:nowrap;
  font-weight:var(--zs-fw-semibold);
  transition:filter var(--zs-t)
}
.icon-button.mobile-menu {
  display:none
}
.page {
  max-width:1560px;
  margin:0 auto;
  padding:103px 40px 25px
}
.breadcrumb {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:var(--zs-fs-xs);
  color:var(--zs-text-3);
  letter-spacing:1.2px;
  font-weight:600;
  margin-bottom:19px
}
.crumb-slash {
  padding:0 10px;
  color:var(--zs-line-3)
}
.private-tag {
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--zs-accent);
  font-size:var(--zs-fs-xs);
  letter-spacing:.9px
}
.private-tag svg,.private-tag span[data-icon] svg {
  height:12px;
  width:12px
}
.page-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:27px
}
.page-heading h1 {
  font-size:var(--zs-fs-display);
  font-weight:700;
  line-height:var(--zs-lh-display);
  letter-spacing:0
}
.page-heading p {
  margin-top:9px;
  font-size:var(--zs-fs-lg);
  color:var(--zs-text-2);
  line-height:var(--zs-lh-lg)
}
.page-heading-actions {
  display:flex;
  gap:var(--zs-sp-2);
  margin-left:auto;
  align-items:center
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:var(--zs-radius);
  padding:10px 16px;
  font-size:var(--zs-fs-sm);
  font-weight:var(--zs-fw-semibold);
  line-height:var(--zs-lh-sm);
  white-space:nowrap;
  transition:background var(--zs-t),color var(--zs-t),border-color var(--zs-t);
  border:1px solid transparent
}
.button.primary {
  background:var(--zs-accent);
  color:var(--zs-on-accent)
}
.button:active {
  transform:scale(.97)
}
.button.primary:hover {
  filter:brightness(.92)
}
.login:hover {
  filter:brightness(.92)
}
.button.secondary {
  background:var(--zs-surface);
  border-color:var(--zs-line-2);
  color:var(--zs-text)
}
.button.secondary:hover {
  background:var(--zs-line);
  border-color:var(--zs-line-3);
  color:var(--zs-text)
}
.button.compact {
  padding:6px 12px;
  font-size:var(--zs-fs-sm)
}
.page-heading .button {
  padding:6px 12px
}
.page-heading .button,.workspace-actions .button {
  text-transform:uppercase;
  letter-spacing:.2px
}
.button.full {
  width:100%
}
.icon-button {
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--zs-radius);
  background:var(--zs-surface);
  border:1px solid var(--zs-line-2)
}
.icon-button:hover {
  background:var(--zs-accent-soft);
  border-color:var(--zs-line-3)
}
.text-button {
  background:transparent;
  padding:0;
  color:var(--zs-text-2);
  font-size:var(--zs-fs-sm);
  border-radius:var(--zs-radius)
}
.text-button:hover {
  color:var(--zs-accent)
}
.workspace {
  overflow:hidden;
  border:1px solid var(--zs-line-2);
  border-radius:var(--zs-radius-lg);
  background:var(--zs-surface-2);
  box-shadow:var(--zz-shadow-lg)
}
.workspace-bar {
  padding:13px 18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  border-bottom:1px solid var(--zs-line)
}
.workspace-label {
  display:flex;
  align-items:center;
  gap:11px;
  font-size:var(--zs-fs-xs);
  font-weight:700;
  letter-spacing:.8px;
  line-height:var(--zs-lh-xs)
}
.workspace-label>span[data-icon] {
  color:var(--zs-accent)
}
.workspace-label .little {
  font-weight:500;
  letter-spacing:0
}
.live-dot {
  height:3px;
  width:3px;
  background:var(--zs-text-3);
  border-radius:50%;
  margin:0 2px
}
.workspace-actions {
  display:flex;
  gap:8px
}
.workspace-body {
  display:grid;
  grid-template-columns:var(--zz-sidebar-w) minmax(0,1fr);
  height:clamp(480px,65vh,730px)
}
.sidebar {
  display:flex;
  flex-direction:column;
  min-height:0;
  border-right:1px solid var(--zs-line-2);
  background:var(--zs-surface-2)
}
.map-choice {
  padding:var(--zs-sp-4);
  border-bottom:1px solid var(--zs-line)
}
.selected-map {
  height:85px;
  position:relative;
  overflow:hidden;
  border-radius:var(--zs-radius);
  background:var(--zs-surface-2)
}
.selected-map img {
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.65
}
.selected-map:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,color-mix(in srgb,var(--zz-map-bg) 94%,transparent),transparent 95%)
}
.selected-map-title {
  position:absolute;
  bottom:var(--zs-sp-3);
  left:var(--zs-sp-3);
  z-index:1
}
.selected-map-title h2 {
  font-size:var(--zs-fs-lg);
  font-weight:700;
  letter-spacing:-.2px;
  line-height:var(--zs-lh-base)
}
.selected-map-title span {
  font-size:var(--zs-fs-xs);
  color:var(--zs-text);
  margin-top:3px;
  display:block;
  line-height:var(--zs-lh-xs)
}
.map-change {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  margin-top:10px;
  color:var(--zs-accent);
  background:color-mix(in srgb,var(--zs-accent) 4%,transparent);
  border:1px solid color-mix(in srgb,var(--zs-accent) 15%,transparent);
  padding:9px 11px;
  border-radius:var(--zs-radius);
  font-weight:600;
  font-size:var(--zs-fs-xs);
  line-height:var(--zs-lh-xs)
}
.map-change:hover {
  background:color-mix(in srgb,var(--zs-accent) 9%,transparent)
}
.side-tabs {
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:auto;
  justify-content:space-between;
  gap:0;
  padding:0 8px;
  border-bottom:1px solid var(--zs-line);
  flex-shrink:0
}
.side-tabs button {
  position:relative;
  min-width:0;
  white-space:nowrap;
  background:none;
  color:var(--zs-text-2);
  padding:10px 3px;
  font-size:var(--zs-fs-xs);
  font-weight:600;
  border-bottom:2px solid transparent;
  line-height:var(--zs-lh-xs)
}
.side-tabs button:hover,.mode-pill:hover {
  color:var(--zs-text)
}
.side-tabs button[aria-selected=true] {
  color:var(--zs-accent);
  border-bottom-color:var(--zs-accent)
}
#plan-count {
  font-size:var(--zs-fs-xs);
  background:var(--zs-line-2);
  border-radius:var(--zs-radius-pill);
  padding:0 6px;
  position:static;
  line-height:var(--zs-lh-xs);
  margin-left:4px;
  color:var(--zs-text-2)
}
.side-content {
  padding:var(--zs-sp-4);
  overflow-y:auto;
  flex:1;
  min-height:0
}
:is(.side-content,.map-grid,.overlay-panel,#info-body,.terrain-dialog) {
  scrollbar-width:thin;
  scrollbar-color:var(--zs-line-3) transparent
}
.mode-pills {
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  margin:10px 0 16px
}
.mode-pill {
  border:1px solid var(--zs-line-2);
  border-radius:var(--zz-radius-xs);
  color:var(--zs-text-2);
  background:transparent;
  padding:5px 7px;
  font-size:var(--zs-fs-xs);
  font-weight:600;
  line-height:var(--zs-lh-xs);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.mode-pill.active,.team-tabs .button.primary {
  color:var(--zs-accent);
  border-color:color-mix(in srgb,var(--zs-accent) 27%,transparent);
  background:color-mix(in srgb,var(--zs-accent) 5%,transparent)
}
.layer-label {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px
}
.layer-label span {
  font-size:var(--zs-fs-xs);
  color:var(--zs-text-3);
  letter-spacing:.8px;
  line-height:var(--zs-lh-xs)
}
.layer-card {
  width:100%;
  display:block;
  text-align:left;
  border:1px solid var(--zs-line);
  border-radius:var(--zs-radius);
  padding:var(--zs-sp-3);
  margin-bottom:var(--zs-sp-2);
  background:var(--zs-surface);
  color:var(--zs-text-2);
  position:relative
}
.layer-card:hover {
  border-color:var(--zs-line-3);
  background:var(--zs-accent-soft)
}
.layer-card.selected {
  border-color:color-mix(in srgb,var(--zs-accent) 40%,transparent);
  background:color-mix(in srgb,var(--zs-accent) 4%,transparent);
  color:var(--zs-text)
}
.layer-card.selected:before {
  content:'';
  position:absolute;
  width:3px;
  height:22px;
  background:var(--zs-accent);
  left:-1px;
  top:14px;
  border-radius:0 var(--zz-radius-xs) var(--zz-radius-xs) 0
}
.layer-title {
  display:flex;
  justify-content:space-between;
  font-size:var(--zs-fs-xs);
  font-weight:700;
  line-height:var(--zs-lh-xs)
}
.layer-title svg {
  width:14px;
  height:14px;
  color:var(--zs-accent)
}
.layer-sub {
  display:flex;
  align-items:center;
  gap:var(--zs-sp-2);
  margin-top:9px;
  font-size:var(--zs-fs-xs);
  color:var(--zs-text-3);
  line-height:var(--zs-lh-xs)
}
.faction-code {
  font-size:var(--zs-fs-xs);
  color:var(--zz-team1);
  padding:3px 5px;
  background:color-mix(in srgb,var(--zs-accent) 6%,transparent);
  border-radius:var(--zz-radius-xs);
  line-height:var(--zs-lh-xs)
}
.faction-code.red {
  color:var(--zz-team2);
  background:color-mix(in srgb,var(--zz-team2) 6%,transparent)
}
.layer-sub .versus {
  font-size:var(--zs-fs-xs);
  color:var(--zs-text-3);
  line-height:var(--zs-lh-xs)
}
.side-note {
  font-size:var(--zs-fs-xs);
  line-height:var(--zs-lh-sm);
  color:var(--zs-text-3);
  margin-top:14px
}
.side-note.accent-note {
  background:color-mix(in srgb,var(--zs-accent) 3%,transparent);
  border:1px solid color-mix(in srgb,var(--zs-accent) 9%,transparent);
  padding:10px;
  border-radius:var(--zs-radius)
}
.side-select {
  width:100%;
  margin-top:var(--zs-sp-2);
  font-size:var(--zs-fs-sm)
}
.map-column {
  min-width:0;
  display:flex;
  flex-direction:column;
  min-height:0
}
.map-stage {
  position:relative;
  flex:1;
  min-height:0;
  isolation:isolate;
  background:var(--zz-map-bg)
}
.map-heading {
  position:absolute;
  z-index:var(--zz-z-map);
  top:16px;
  left:18px;
  pointer-events:none;
  display:flex;
  gap:8px;
  align-items:center
}
.map-heading .heading-name {
  background:var(--zz-surface-solid);
  backdrop-filter:blur(var(--zz-blur));
  padding:9px 12px;
  border-radius:var(--zz-radius-xs);
  border:1px solid var(--zs-line);
  box-shadow:var(--zz-shadow-sm);
  font-size:var(--zs-fs-xs);
  font-weight:700
}
.map-heading .heading-mode {
  background:color-mix(in srgb,var(--zs-accent) 91%,transparent);
  color:var(--zs-on-accent);
  font-size:var(--zs-fs-xs);
  font-weight:700;
  letter-spacing:.6px;
  padding:10px 10px;
  border-radius:var(--zz-radius-xs)
}
.map-tools {
  display:flex;
  flex-direction:column;
  gap:3px;
  position:absolute;
  z-index:var(--zz-z-map);
  top:72px;
  left:18px;
  padding:5px;
  background:var(--zz-surface-solid);
  border:1px solid var(--zs-line-2);
  border-radius:var(--zs-radius);
  box-shadow:var(--zz-shadow-md)
}
.tool {
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  width:33px;
  height:33px;
  border-radius:var(--zs-radius);
  color:var(--zs-text-2)
}
.tool:hover {
  background:var(--zs-line);
  color:var(--zs-text)
}
.tool.active {
  background:var(--zs-accent);
  color:var(--zs-on-accent)
}
.tool-separator {
  height:1px;
  background:var(--zs-line);
  margin:3px 4px
}
.view-tools {
  position:absolute;
  z-index:var(--zz-z-map);
  right:16px;
  top:16px;
  display:flex;
  flex-direction:column;
  gap:var(--zs-sp-2)
}
.view-tools>.tool,.zoom-tools {
  border:1px solid var(--zs-line-2);
  background:var(--zz-surface-solid);
  border-radius:var(--zs-radius);
  box-shadow:var(--zz-shadow-sm)
}
.zoom-tools .tool+ .tool {
  border-top:1px solid var(--zs-line);
  border-radius:0 0 var(--zs-radius) var(--zs-radius)
}
.zoom-tools .tool:first-child {
  border-radius:var(--zs-radius) var(--zs-radius) 0 0
}
.view-tools>.tool {
  width:35px;
  height:35px
}
.map-legend {
  position:absolute;
  bottom:16px;
  left:18px;
  z-index:var(--zz-z-map);
  display:flex;
  gap:13px;
  background:var(--zz-surface-solid);
  padding:10px 12px;
  border:1px solid var(--zs-line);
  border-radius:var(--zz-radius-xs);
  font-size:var(--zs-fs-xs);
  color:var(--zs-text-2);
  pointer-events:none
}
.map-legend>span {
  display:flex;
  align-items:center;
  gap:6px
}
.legend-dot {
  width:6px;
  height:6px;
  display:inline-block;
  border-radius:50%
}
.legend-dot.blue {
  background:var(--zz-team1)
}
.legend-dot.red {
  background:var(--zz-team2)
}
.legend-dot.white {
  background:color-mix(in srgb,var(--zs-accent) 60%,var(--zs-text))
}
.map-north {
  position:absolute;
  z-index:var(--zz-z-north);
  bottom:29px;
  right:22px;
  color:var(--zs-text);
  display:flex;
  flex-direction:column;
  align-items:center;
  font-size:var(--zs-fs-xs);
  font-weight:700;
  pointer-events:none;
  text-shadow:0 2px 4px var(--zz-shadow)
}
.map-north span {
  font-size:var(--zs-fs-h2);
  line-height:var(--zs-lh-base)
}
.map-status {
  display:flex;
  align-items:center;
  padding:10px 13px;
  gap:14px;
  font-size:var(--zs-fs-xs);
  color:var(--zs-text-3);
  border-top:1px solid var(--zs-line);
  background:var(--zz-surface-solid);
  min-height:36px
}
.status-instruction {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex:1
}
.local-indicator {
  display:flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
  color:var(--zs-text-3)
}
.local-indicator i {
  height:4px;
  width:4px;
  background:var(--zz-ok);
  border-radius:50%
}
#grid-status {
  font-variant-numeric:tabular-nums;
  color:var(--zs-text);
  min-width:40px
}
.matchup {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  border-top:1px solid var(--zs-line);
  gap:12px;
  background:var(--zs-surface)
}
.team-strip {
  display:flex;
  align-items:center;
  gap:10px
}
.team-emblem {
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:color-mix(in srgb,var(--zs-accent) 5%,transparent);
  border:1px solid color-mix(in srgb,var(--zs-accent) 13%,transparent);
  border-radius:var(--zz-radius-xs);
  color:var(--zs-accent)
}
.team-emblem.red {
  color:var(--zz-team2);
  background:color-mix(in srgb,var(--zz-team2) 3%,transparent);
  border-color:color-mix(in srgb,var(--zz-team2) 13%,transparent)
}
.team-strip b {
  font-size:var(--zs-fs-xs);
  font-weight:600;
  display:block;
  line-height:var(--zs-lh-xs)
}
.team-strip small {
  display:block;
  font-size:var(--zs-fs-xs);
  color:var(--zs-text-3);
  margin-top:3px;
  line-height:var(--zs-lh-xs)
}
.match-info {
  display:flex;
  gap:20px;
  font-size:var(--zs-fs-xs);
  color:var(--zs-text-3);
  line-height:var(--zs-lh-xs)
}
.match-info b {
  display:block;
  color:var(--zs-text);
  font-size:var(--zs-fs-xs);
  margin-top:4px;
  font-weight:600;
  line-height:var(--zs-lh-xs)
}
.match-vs {
  color:var(--zs-text-3);
  font-size:var(--zs-fs-xs);
  font-weight:700;
  line-height:var(--zs-lh-xs)
}
.page-bottom {
  display:flex;
  justify-content:space-between;
  gap:14px;
  font-size:var(--zs-fs-xs);
  color:var(--zs-text-3);
  margin-top:15px;
  line-height:var(--zs-lh-xs)
}
.page-bottom>span {
  display:flex;
  align-items:center;
  gap:6px
}
.page-bottom svg,.page-bottom span[data-icon] svg {
  width:11px;
  height:11px
}
.page-bottom a {
  color:var(--zs-text-2)
}
footer {
  display:flex;
  align-items:center;
  gap:22px;
  border-top:1px solid var(--zs-line);
  padding:var(--zs-sp-5) var(--zs-sp-7);
  font-size:var(--zs-fs-xs);
  color:var(--zs-text-3);
  max-width:1560px;
  margin:var(--zs-sp-6) auto 0
}
footer img {
  width:85px;
  height:auto;
  opacity:.7
}
footer>span {
  font-size:var(--zs-fs-xs);
  letter-spacing:.6px
}
footer small {
  margin-left:auto;
  font-size:var(--zs-fs-xs)
}
.overlay-panel {
  position:absolute;
  right:60px;
  top:16px;
  z-index:var(--zz-z-panel);
  background:var(--zz-surface-solid);
  border:1px solid var(--zs-line-2);
  padding:var(--zs-sp-4);
  border-radius:var(--zs-radius);
  min-width:222px;
  box-shadow:var(--zz-shadow-md);
  max-width:min(310px,calc(100vw - 65px));
  max-height:calc(100% - 35px);
  overflow:auto
}
.overlay-panel h3 {
  font-size:var(--zs-fs-xs);
  margin-bottom:14px
}
.overlay-panel label {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:var(--zs-fs-xs);
  color:var(--zs-text-2);
  padding:6px 0;
  cursor:pointer
}
.point-detail {
  position:absolute;
  right:16px;
  bottom:var(--zs-sp-9);
  z-index:var(--zz-z-map);
  max-width:245px;
  border:1px solid var(--zs-line-2);
  border-radius:var(--zs-radius);
  padding:var(--zs-sp-4);
  background:var(--zz-surface-solid);
  box-shadow:var(--zz-shadow-md)
}
.point-detail h3 {
  margin-right:40px;
  font-size:var(--zs-fs-xs);
  margin-top:var(--zs-sp-2)
}
.point-detail p {
  font-size:var(--zs-fs-xs);
  color:var(--zs-text-2);
  margin-top:8px;
  line-height:var(--zs-lh-sm)
}
.point-detail .eyebrow {
  display:block;
  margin-right:40px
}
.point-detail .icon-button {
  position:absolute;
  top:var(--zs-sp-2);
  right:var(--zs-sp-2)
}
.point-detail .button {
  margin-top:var(--zs-sp-3)
}
.point-detail select {
  width:100%;
  font-size:var(--zs-fs-xs);
  margin-top:10px;
  padding:6px
}
.team-tabs {
  display:flex;
  gap:6px;
  margin-bottom:var(--zs-sp-4)
}
.team-tabs button {
  flex:1
}
.form-label {
  display:block;
  font-size:var(--zs-fs-xs);
  font-weight:600;
  color:var(--zs-text-3);
  letter-spacing:.5px;
  margin:var(--zs-sp-3) 0 6px;
  line-height:var(--zs-lh-xs)
}
.form-label-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--zs-sp-2)
}
.form-label-row .zz-flag {
  width:30px;
  height:20px
}
.vehicle {
  border-bottom:1px solid var(--zs-line);
  padding:var(--zs-sp-3) 0
}
.vehicle-line {
  display:flex;
  justify-content:space-between;
  gap:var(--zs-sp-2);
  font-size:var(--zs-fs-xs);
  font-weight:600;
  color:var(--zs-text);
  line-height:var(--zs-lh-xs)
}
.vehicle-line b {
  color:var(--zs-accent);
  font-size:var(--zs-fs-xs);
  line-height:var(--zs-lh-xs)
}
.vehicle-meta {
  margin-top:6px;
  font-size:var(--zs-fs-xs);
  color:var(--zs-text-3);
  line-height:var(--zs-lh-sm)
}
.section-caption {
  font-size:var(--zs-fs-xs);
  font-weight:700;
  letter-spacing:1px;
  color:var(--zs-text-3);
  margin:19px 0 3px;
  line-height:var(--zs-lh-xs)
}
.form-input {
  width:100%;
  font-size:var(--zs-fs-sm)
}
.plan-tools {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--zs-sp-2);
  margin:var(--zs-sp-3) 0
}
.plan-tools .button {
  padding:10px;
  font-size:var(--zs-fs-xs);
  line-height:var(--zs-lh-xs)
}
.plan-item {
  border:1px solid var(--zs-line);
  padding:10px;
  margin-top:var(--zs-sp-2);
  border-radius:var(--zs-radius);
  background:color-mix(in srgb,var(--zs-text) 1%,transparent)
}
.plan-item-top {
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--zs-accent)
}
.plan-item-top input {
  border:0;
  background:transparent;
  width:100%;
  min-width:0;
  padding:3px;
  font-size:var(--zs-fs-sm);
  color:var(--zs-text);
  min-height:0
}
.plan-item-top button {
  background:none;
  color:var(--zs-text-3)
}
.favorite:hover,.stepper button:hover,.region-drawbar button:hover,.plan-item-top button:hover {
  color:var(--zs-text);
  background:var(--zs-line)
}
.plan-item small {
  display:block;
  margin-top:5px;
  font-size:var(--zs-fs-xs);
  color:var(--zs-text-3);
  line-height:var(--zs-lh-xs)
}
.coordinate-form {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--zs-sp-2)
}
.coordinate-form label {
  font-size:var(--zs-fs-xs);
  color:var(--zs-text-2);
  line-height:var(--zs-lh-xs)
}
.coordinate-form input {
  width:100%;
  padding:8px;
  margin-top:5px;
  font-size:var(--zs-fs-sm)
}
.coordinate-form button {
  grid-column:1/-1
}
.empty-state {
  color:var(--zs-text-2);
  font-size:var(--zs-fs-sm);
  line-height:var(--zs-lh-sm);
  text-align:center;
  padding:25px 14px
}
.empty-state svg,.empty-state span[data-icon] svg {
  margin:0 auto;
  width:28px;
  height:28px
}
.empty-state span[data-icon] {
  display:flex;
  justify-content:center;
  margin-bottom:var(--zs-sp-3)
}
.text-button.danger {
  color:var(--zz-danger-muted)
}
dialog {
  color:var(--zs-text);
  background:var(--zs-overlay);
  border:1px solid var(--zs-line-2);
  border-radius:var(--zs-radius-lg);
  box-shadow:var(--zz-shadow-lg);
  padding:0;
  max-height:90vh
}
dialog::backdrop {
  background:color-mix(in srgb,var(--zs-bg) 85%,transparent);
  backdrop-filter:blur(var(--zz-blur))
}
.library-dialog {
  width:min(1110px,calc(100vw - 40px));
}
.dialog-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:24px 27px;
  border-bottom:1px solid var(--zs-line);
  gap:15px
}
.dialog-heading .eyebrow {
  display:block;
  margin-bottom:6px
}
.dialog-heading h2 {
  font-size:var(--zs-fs-h2);
  letter-spacing:-.4px;
  line-height:var(--zs-lh-h2)
}
.library-filters {
  display:flex;
  gap:10px;
  padding:20px 27px 0
}
.search-field {
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--zs-line-2);
  border-radius:var(--zs-radius);
  padding:0 12px;
  color:var(--zs-text-3);
  flex:1;
  min-width:150px;
  background:var(--zs-bg)
}
.search-field input {
  background:none;
  border:0;
  padding-left:0;
  width:100%;
  font-size:var(--zs-fs-xs);
  outline:none
}
.search-field input:focus {
  box-shadow:none;
  outline:none
}
.search-field:focus-within {
  border-color:var(--zs-accent);
  box-shadow:0 0 0 3px var(--zs-accent-glow)
}
.library-filters select {
  font-size:var(--zs-fs-xs);
  max-width:190px
}
.library-filters button[aria-pressed=true] {
  color:var(--zs-accent);
  border-color:color-mix(in srgb,var(--zs-accent) 44%,transparent)
}
.library-meta {
  display:flex;
  justify-content:space-between;
  padding:18px 27px;
  color:var(--zs-text-3);
  font-size:var(--zs-fs-xs)
}
.map-grid {
  padding:0 27px 27px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  max-height:56vh;
  overflow:auto
}
.map-card {
  position:relative;
  border:1px solid var(--zs-line);
  background:var(--zs-surface-2);
  border-radius:var(--zs-radius);
  overflow:hidden
}
.map-card:hover {
  border-color:color-mix(in srgb,var(--zs-accent) 50%,transparent)
}
.map-card.chosen {
  border-color:color-mix(in srgb,var(--zs-accent) 50%,transparent)
}
.map-card-button {
  display:block;
  width:100%;
  background:none;
  padding:0;
  text-align:left
}
.map-card img {
  width:100%;
  height:105px;
  object-fit:cover;
  display:block;
  filter:saturate(.7);
  transition:filter .2s
}
.map-card:hover img {
  filter:saturate(1)
}
.map-card-copy {
  padding:12px
}
.map-card h3 {
  font-size:var(--zs-fs-xs);
  font-weight:700
}
.map-card p {
  font-size:var(--zs-fs-xs);
  color:var(--zs-text-3);
  display:flex;
  justify-content:space-between;
  gap:6px;
  margin-top:8px
}
.favorite {
  position:absolute;
  right:8px;
  top:8px;
  background:color-mix(in srgb,var(--zs-bg) 85%,transparent);
  width:26px;
  height:26px;
  color:var(--zs-text-2);
  border-radius:var(--zz-radius-xs);
  display:grid;
  place-items:center
}
.favorite svg {
  height:13px;
  width:13px
}
.favorite.on {
  color:var(--zz-warn)
}
.favorite.on svg {
  fill:currentColor
}
.info-dialog {
  width:min(630px,calc(100vw - 32px))
}
#info-body {
  padding:23px 27px;
  color:var(--zs-text-2);
  font-size:var(--zs-fs-sm);
  line-height:var(--zs-lh-sm);
  overflow:auto;
  max-height:68vh
}
#info-body h3 {
  color:var(--zs-text);
  margin:18px 0 7px
}
#info-body h3:first-child {
  margin-top:0
}
#info-body p {
  margin-bottom:12px
}
#info-body a {
  color:var(--zs-accent)
}
.help-row {
  display:flex;
  gap:14px;
  margin-bottom:15px
}
.help-row>span {
  color:var(--zs-accent);
  margin-top:3px
}
.help-row strong {
  color:var(--zs-text)
}
.help-row p {
  font-size:var(--zs-fs-xs);
  margin:3px 0
}
.shortcut {
  display:inline-block;
  font-size:var(--zs-fs-xs);
  font-family:monospace;
  background:var(--zs-line);
  border:1px solid var(--zs-line-2);
  padding:1px 5px;
  border-radius:var(--zz-radius-xs);
  color:var(--zs-text)
}
.saved-plan {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 0;
  border-bottom:1px solid var(--zs-line)
}
.saved-plan strong {
  display:block;
  color:var(--zs-text);
  font-size:var(--zs-fs-xs);
  line-height:var(--zs-lh-xs)
}
.saved-plan small {
  color:var(--zs-text-3);
  font-size:var(--zs-fs-xs);
  line-height:var(--zs-lh-xs)
}
.saved-plan>div:last-child {
  display:flex;
  gap:var(--zs-sp-2)
}
.toast {
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  z-index:var(--zz-z-toast);
  max-width:90vw;
  background:var(--zs-accent);
  color:var(--zs-on-accent);
  padding:13px 21px;
  border-radius:var(--zs-radius);
  font-size:var(--zs-fs-sm);
  font-weight:600;
  box-shadow:var(--zz-shadow-lg)
}
.workspace.expanded {
  position:fixed;
  inset:10px;
  z-index:var(--zz-z-expanded);
  display:flex;
  flex-direction:column
}
.workspace.expanded .workspace-body {
  flex:1;
  height:auto;
  min-height:0
}
.workspace.expanded .matchup {
  display:none
}
.skeleton {
  height:122px;
  background:var(--zs-line-2);
  border-radius:var(--zs-radius)
}
.loading {
  opacity:.5;
  pointer-events:none
}
/* JS 'hidden' ile gizler; tek gerekçeli !important */
[hidden] {
  display:none!important
}
.plan-item-top>svg,.team-emblem>svg,.help-row>svg {
  width:18px;
  height:18px;
  flex:none;
  display:inline-block
}
.plan-item-top>svg {
  width:16px;
  height:16px
}
.map-choice .map-change svg {
  width:15px;
  height:15px
}
.help-row>svg {
  margin-top:3px;
  color:var(--zs-accent)
}
@media(min-width:1121px) {
  .workspace-body {
    height:clamp(640px,calc(100vh - 200px),1000px)
  }
  .breadcrumb {
    margin-bottom:var(--zs-sp-3)
  }
  .page-heading {
    flex-wrap:wrap;
    margin-bottom:var(--zs-sp-4)
  }
  .page-heading>div:first-child {
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:var(--zs-sp-4)
  }
  .page-heading p {
    margin-top:0
  }
  .workspace {
    --zz-sidebar-w:336px
  }
}
@media(min-width:1500px) {
  .zs-nav a {
    padding:8px 10px
  }
  .page {
    padding-left:var(--zs-sp-8);
    padding-right:var(--zs-sp-8)
  }
  footer {
    padding-left:var(--zs-sp-8);
    padding-right:var(--zs-sp-8)
  }
  .workspace {
    --zz-sidebar-w:352px
  }
}
@media(max-width:1120px) {
  .zs-nav a {
    font-size:10px;
    padding:8px 5px
  }
  .zs-topbar {
    padding:0 14px;
    gap:5px
  }
  .zs-brand {
    margin-right:5px
  }
  .zs-brand img {
    height:33px
  }
  .login {
    font-size:10px;
    padding:8px 10px
  }
  .page {
    padding-left:24px;
    padding-right:24px
  }
  .workspace-body {
    grid-template-columns:250px minmax(0,1fr)
  }
  .workspace-label .little {
    display:none
  }
  .match-info {
    gap:12px
  }
  .map-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
}
@media(max-width:850px) {
  .zs-nav {
    display:none
  }
  .zs-brand img {
    height:40px
  }
  .mobile-menu {
    display:inline-flex!important
  }
  .login {
    font-size:12px;
    margin-left:auto;
    margin-right:8px
  }
  .zs-nav.open {
    display:flex;
    position:absolute;
    top:70px;
    left:0;
    right:0;
    padding:16px;
    background:#111719;
    border:1px solid #ffffff24;
    flex-wrap:wrap;
    box-shadow:0 10px 30px #0006
  }
  .zs-nav.open a {
    font-size:12px;
    padding:12px
  }
  .page {
    padding-top:96px
  }
  .workspace-body {
    grid-template-columns:225px minmax(0,1fr);
    height:570px
  }
  .side-content {
    padding:12px
  }
  .map-choice {
    padding:12px
  }
  .match-info {
    display:none
  }
  .map-status .local-indicator {
    display:none
  }
  .library-filters {
    flex-wrap:wrap
  }
  .library-filters .search-field {
    flex-basis:100%
  }
  .library-filters select {
    flex:1;
    max-width:none
  }
  .map-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .breadcrumb {
    font-size:8px
  }
  .page-heading h1 {
    font-size:28px
  }
}
@media(max-width:620px) {
  .page {
    padding:94px 13px 20px
  }
  .page-heading {
    margin-bottom:20px;
    gap:10px
  }
  .page-heading .button {
    padding:9px;
    font-size:0;
    gap:0
  }
  .page-heading .button svg {
    width:19px;
    height:19px
  }
  .page-heading p {
    font-size:11px;
    max-width:225px
  }
  .breadcrumb {
    margin-bottom:16px;
    letter-spacing:.6px
  }
  .breadcrumb>span:first-child {
    font-size:7px
  }
  .private-tag {
    font-size:7px;
    letter-spacing:.3px
  }
  .crumb-slash {
    padding:0 5px
  }
  .workspace-bar {
    padding:10px;
    gap:8px
  }
  .workspace-label {
    font-size:9px;
    gap:7px;
    letter-spacing:.2px
  }
  .workspace-label .live-dot {
    display:none
  }
  .workspace-actions {
    gap:5px
  }
  .workspace-actions .button {
    padding:7px;
    font-size:9px;
    gap:5px
  }
  .workspace-actions .button svg {
    width:14px;
    height:14px
  }
  .workspace-actions .secondary span:not([data-icon]) {
    display:none
  }
  .workspace-body {
    display:flex;
    flex-direction:column-reverse;
    height:auto
  }
  .map-column {
    height:440px;
    flex:none
  }
  .sidebar {
    border-right:0;
    border-top:1px solid var(--zs-line-2)
  }
  .map-choice {
    display:flex;
    gap:12px;
    align-items:center;
    padding:12px
  }
  .selected-map {
    height:61px;
    flex:1
  }
  .selected-map-title {
    bottom:8px;
    left:10px
  }
  .selected-map-title h2 {
    font-size:15px
  }
  .selected-map-title span {
    font-size:8px
  }
  .map-change {
    width:auto;
    margin:0;
    padding:12px;
    font-size:9px;
    gap:12px
  }
  .side-tabs {
    padding:0 12px
  }
  .side-tabs button {
    padding:12px;
    font-size:11px
  }
  .side-content {
    max-height:345px;
    padding:15px
  }
  .mode-pills {
    margin-top:5px
  }
  .layer-card {
    padding:11px
  }
  .map-heading {
    top:12px;
    left:12px;
    gap:5px
  }
  .map-heading .heading-name {
    font-size:9px;
    padding:8px
  }
  .map-heading .heading-mode {
    font-size:8px;
    padding:9px
  }
  .map-tools {
    left:12px;
    top:59px;
    padding:3px
  }
  .map-tools .tool {
    width:30px;
    height:30px
  }
  .view-tools {
    right:10px;
    top:12px
  }
  .map-legend {
    left:12px;
    bottom:15px;
    font-size:8px;
    gap:10px;
    padding:8px
  }
  .matchup {
    padding:13px 12px;
    gap:8px
  }
  .team-strip {
    gap:7px
  }
  .team-strip b {
    font-size:8px;
    max-width:112px
  }
  .team-strip small {
    font-size:8px;
    max-width:112px
  }
  .team-emblem {
    width:25px;
    height:25px
  }
  .team-emblem svg {
    height:14px!important;
    width:14px!important
  }
  .match-vs {
    font-size:9px
  }
  .page-bottom {
    flex-direction:column;
    font-size:8px;
    gap:5px
  }
  .page-bottom .text-button {
    font-size:8px
  }
  footer {
    padding:18px 17px;
    gap:12px
  }
  footer>span {
    display:none
  }
  footer small {
    font-size:8px
  }
  .library-dialog {
    width:calc(100vw - 20px);
    max-height:94vh
  }
  .dialog-heading {
    padding:20px 17px
  }
  .dialog-heading h2 {
    font-size:17px
  }
  .library-filters {
    padding:15px 17px 0;
    gap:7px
  }
  .library-filters select {
    padding:9px;
    font-size:10px;
    min-width:0
  }
  .library-filters .button {
    padding:9px;
    font-size:9px
  }
  .library-meta {
    padding:15px 17px
  }
  .map-grid {
    padding:0 17px 17px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    max-height:58vh
  }
  .map-card img {
    height:94px
  }
  .map-card h3 {
    font-size:11px
  }
  .map-card-copy {
    padding:10px
  }
  .map-card p {
    font-size:8px
  }
  .overlay-panel {
    right:50px;
    top:12px;
    min-width:204px;
    padding:13px
  }
  .point-detail {
    right:12px;
    bottom:60px;
    max-width:200px
  }
  .workspace.expanded {
    inset:0;
    border-radius:0
  }
  .workspace.expanded .sidebar {
    display:none
  }
  .workspace.expanded .map-column {
    height:100%;
    flex:1
  }
  .workspace.expanded .workspace-body {
    flex-direction:column
  }
  .info-dialog #info-body {
    padding:20px 18px
  }
  .matchup .team-strip:nth-child(3) {
    flex-direction:row-reverse;
    text-align:right
  }
}
.tools-modes {
  margin-bottom:22px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--zs-sp-2)
}
.drawing-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--zs-sp-2)
}
.drawing-button {
  display:flex;
  align-items:center;
  gap:9px;
  background:color-mix(in srgb,var(--zs-text) 2%,transparent);
  border:1px solid var(--zs-line);
  color:var(--zs-text-2);
  border-radius:var(--zz-radius-xs);
  padding:10px;
  font:inherit;
  cursor:pointer;
  font-size:var(--zs-fs-xs);
  font-weight:var(--zs-fw-medium)
}
.drawing-button svg {
  width:17px;
  height:17px;
  flex-shrink:0
}
.drawing-button:hover,.drawing-button.active {
  color:var(--zs-accent);
  border-color:color-mix(in srgb,var(--zs-accent) 33%,transparent);
  background:color-mix(in srgb,var(--zs-accent) 5%,transparent)
}
.colour-swatches {
  display:flex;
  gap:12px
}
.colour-swatches button {
  width:27px;
  height:27px;
  border-radius:50%;
  background:var(--swatch);
  border:4px solid var(--zs-bg);
  outline:1px solid transparent;
  cursor:pointer
}
.colour-swatches button[aria-pressed=true] {
  outline-color:var(--swatch)
}
.range-label {
  display:flex;
  justify-content:space-between;
  margin:var(--zs-sp-4) 0 var(--zs-sp-2);
  font-size:var(--zs-fs-xs);
  color:var(--zs-text-2);
  line-height:var(--zs-lh-xs)
}
.range-label output {
  color:var(--zs-accent)
}
.side-content input[type=range],.overlay-panel input[type=range] {
  width:100%;
  cursor:pointer
}
.sidebar input[type=range] {
  min-height:0;
  padding:0;
  border:0;
  background:none
}
.sidebar input[type=color] {
  min-height:0;
  padding:2px
}
.check-label {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:var(--zs-fs-xs);
  color:var(--zs-text-2);
  margin:12px 0 18px;
  line-height:var(--zs-lh-xs)
}
.budget-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--zs-sp-2);
  margin:14px 0
}
.budget-grid>div {
  background:color-mix(in srgb,var(--zs-accent) 3%,transparent);
  border:1px solid var(--zs-line);
  padding:12px 5px;
  border-radius:var(--zs-radius);
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:space-between
}
.budget-grid small {
  display:block;
  font-size:var(--zs-fs-xs);
  color:var(--zs-text-3);
  line-height:var(--zs-lh-xs)
}
.budget-grid b {
  display:block;
  font-size:var(--zs-fs-lg);
  margin-top:5px;
  color:var(--zs-accent)
}
.over-budget,.over-budget b,.budget-grid .over-budget b,.side-note.over-budget,.terrain-status.over-budget {
  color:var(--zz-danger)
}
.build-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 0;
  border-bottom:1px solid var(--zs-line)
}
.build-row strong {
  display:block;
  font-size:var(--zs-fs-xs);
  font-weight:600;
  line-height:var(--zs-lh-sm)
}
.build-row small {
  display:block;
  font-size:var(--zs-fs-xs);
  color:var(--zs-text-3);
  margin-top:4px;
  line-height:var(--zs-lh-xs)
}
.stepper {
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0
}
.stepper button {
  border:1px solid var(--zs-line-2);
  background:color-mix(in srgb,var(--zs-text) 2%,transparent);
  border-radius:var(--zz-radius-xs);
  color:var(--zs-accent);
  width:23px;
  height:25px;
  cursor:pointer
}
.stepper output {
  font-size:var(--zs-fs-xs);
  min-width:15px;
  text-align:center;
  line-height:var(--zs-lh-xs)
}
.timer-row {
  padding:14px 0;
  border-bottom:1px solid var(--zs-line)
}
.timer-row>strong {
  font-size:var(--zs-fs-xs);
  line-height:var(--zs-lh-xs)
}
.timer-row>div {
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top:10px
}
.timer-row output {
  font-size:var(--zs-fs-xs);
  color:var(--zz-ok);
  font-variant-numeric:tabular-nums;
  line-height:var(--zs-lh-xs)
}
.timer-row output.counting {
  color:var(--zz-warn)
}
.timer-row .button {
  font-size:var(--zs-fs-xs);
  flex:1;
  white-space:normal;
  padding:8px 6px;
  line-height:var(--zs-lh-xs)
}
.timer-row .text-button {
  font-size:var(--zs-fs-xs);
  line-height:var(--zs-lh-xs)
}
.compare-button {
  width:100%;
  margin:12px 0
}
.compare-teams {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--zs-sp-3)
}
.compare-teams>section {
  min-width:0
}
.compare-teams .vehicle-line {
  font-size:var(--zs-fs-xs);
  line-height:var(--zs-lh-xs)
}
.compare-teams small {
  font-size:var(--zs-fs-xs);
  color:var(--zs-text-2);
  line-height:var(--zs-lh-xs)
}
.compare-teams h3 {
  color:var(--zs-accent)
}
.compare-teams>section+section h3 {
  color:var(--zz-team2)
}
.prediction {
  position:absolute;
  left:16px;
  bottom:48px;
  z-index:var(--zz-z-map);
  background:var(--zz-surface-solid);
  border:1px solid var(--zs-line-2);
  border-radius:var(--zz-radius-xs);
  padding:9px 11px;
  pointer-events:none
}
.prediction>span {
  font-size:var(--zs-fs-xs);
  letter-spacing:1px;
  color:var(--zs-text-2)
}
.prediction>div {
  display:flex;
  gap:9px;
  margin-top:6px
}
.lane-chip {
  font-size:var(--zs-fs-xs);
  color:var(--zs-accent)
}
.lane-chip.excluded {
  opacity:.35;
  text-decoration:line-through
}
.overlay-panel .side-select {
  margin-bottom:12px
}
.overlay-panel .range-label {
  margin-top:12px
}
@media(max-width:600px) {
  .compare-teams {
    gap:14px
  }
  .prediction {
    bottom:42px;
    left:10px;
    padding:6px 8px
  }
  .prediction>span,.lane-chip {
    font-size:8px
  }
  .side-tabs [role=tab] {
    font-size:11px
  }
}
.capture-controls {
  padding-bottom:22px;
  margin-bottom:20px;
  border-bottom:1px solid var(--zs-line-2)
}
.capture-controls .section-caption {
  margin-top:0
}
.capture-controls .team-tabs .button {
  font-size:var(--zs-fs-xs);
  padding:8px;
  line-height:var(--zs-lh-xs)
}
.capture-path {
  display:grid;
  gap:5px;
  margin:12px 0
}
.capture-path button {
  display:flex;
  gap:8px;
  align-items:center;
  background:color-mix(in srgb,var(--zz-ok) 4%,transparent);
  border:1px solid color-mix(in srgb,var(--zz-ok) 19%,transparent);
  border-radius:var(--zs-radius);
  padding:8px;
  color:var(--zz-ok);
  text-align:left;
  font-size:var(--zs-fs-xs);
  line-height:var(--zs-lh-xs)
}
.capture-path button span {
  flex:1
}
.capture-path b {
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  border-radius:50%;
  background:color-mix(in srgb,var(--zz-ok) 8%,transparent)
}
.capture-controls .capture-next {
  display:grid;
  gap:5px;
  margin:16px 0
}
.capture-controls .capture-next button {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  background:color-mix(in srgb,var(--zs-accent) 4%,transparent);
  border:1px solid color-mix(in srgb,var(--zs-accent) 16%,transparent);
  color:var(--zs-text);
  padding:10px;
  border-radius:var(--zs-radius);
  text-align:left;
  font-size:var(--zs-fs-xs);
  line-height:var(--zs-lh-xs)
}
.capture-controls .capture-next button:hover {
  background:color-mix(in srgb,var(--zs-accent) 13%,transparent);
  border-color:color-mix(in srgb,var(--zs-accent) 44%,transparent)
}
.capture-controls .capture-next b {
  color:var(--zs-accent);
  white-space:nowrap
}
.capture-controls .plan-tools .button {
  font-size:var(--zs-fs-xs);
  padding:8px 5px;
  white-space:normal;
  line-height:var(--zs-lh-xs)
}
.capture-controls .capture-next .section-caption {
  font-size:var(--zs-fs-xs);
  line-height:var(--zs-lh-xs)
}
.region-editor>.button {
  width:100%;
  margin:8px 0
}
.region-toggle {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:var(--zs-fs-xs);
  line-height:var(--zs-lh-sm);
  margin:10px 0
}
.region-toggle input,.region-row input {
  accent-color:var(--zz-red-zone)
}
.region-list {
  display:grid;
  gap:var(--zs-sp-2);
  margin:16px 0
}
.region-row {
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px;
  border:1px solid var(--zs-line-2);
  border-radius:var(--zs-radius);
  background:color-mix(in srgb,var(--zs-text) 1%,transparent)
}
.region-row.selected {
  border-color:var(--zz-red-zone);
  background:color-mix(in srgb,var(--zz-red-zone) 7%,transparent)
}
.region-row button {
  flex:1;
  min-width:0;
  border:0;
  background:none;
  color:var(--zs-text);
  font:inherit;
  text-align:left;
  cursor:pointer;
  overflow-wrap:anywhere;
  font-size:var(--zs-fs-xs);
  font-weight:var(--zs-fw-semibold);
  line-height:var(--zs-lh-sm)
}
.region-row small {
  display:block;
  font-size:var(--zs-fs-xs);
  color:var(--zs-text-2);
  font-weight:400;
  line-height:var(--zs-lh-xs)
}
.region-settings {
  border-top:1px solid var(--zs-line-2);
  margin-top:10px;
  padding-top:8px
}
.region-drawbar {
  position:absolute;
  z-index:var(--zz-z-drawbar);
  left:50%;
  top:60px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:6px;
  padding:9px;
  background:var(--zz-surface-solid);
  border:1px solid color-mix(in srgb,var(--zz-red-zone) 44%,transparent);
  border-radius:var(--zs-radius);
  max-width:calc(100% - 110px);
  flex-wrap:wrap;
  box-shadow:var(--zz-shadow-sm)
}
.region-drawbar span {
  color:var(--zz-danger);
  font-size:var(--zs-fs-xs);
  white-space:nowrap
}
.region-drawbar button {
  border:1px solid var(--zs-line-3);
  background:color-mix(in srgb,var(--zs-text) 10%,var(--zs-bg));
  color:var(--zz-cb-fg);
  border-radius:var(--zz-radius-xs);
  padding:7px;
  font:inherit;
  cursor:pointer;
  white-space:nowrap;
  font-size:var(--zs-fs-xs);
  font-weight:var(--zs-fw-semibold);
  line-height:var(--zs-lh-xs)
}
.region-vertex {
  display:block;
  width:13px;
  height:13px;
  border:2px solid var(--zz-cb-fg);
  background:var(--zz-red-zone);
  transform:translate(-50%,-50%);
  border-radius:0;
  box-shadow:var(--zz-shadow-sm)
}
.region-midpoint {
  display:grid;
  place-items:center;
  width:13px;
  height:13px;
  border:1px solid var(--zz-danger);
  background:color-mix(in srgb,var(--zz-danger) 35%,var(--zs-bg));
  color:var(--zs-text);
  transform:translate(-50%,-50%);
  border-radius:50%;
  font:inherit;
  font-size:var(--zs-fs-xs);
  line-height:var(--zs-lh-xs)
}
.region-editor .plan-tools {
  flex-wrap:wrap
}
.workspace.expanded .workspace-bar {
  flex-shrink:0
}
.region-help {
  margin:8px 0 12px
}
.region-help summary {
  font-size:var(--zs-fs-xs);
  color:var(--zs-accent);
  cursor:pointer;
  line-height:var(--zs-lh-xs)
}
.region-handle .region-vertex {
  position:absolute;
  left:50%;
  top:50%
}
.region-handle:focus-visible {
  outline:2px solid var(--zs-accent);
  outline-offset:2px
}
.region-library {
  border-top:1px solid var(--zs-line-2);
  margin-top:18px;
  padding-top:14px
}
.region-library summary {
  color:var(--zs-accent);
  cursor:pointer;
  font-size:var(--zs-fs-xs);
  line-height:var(--zs-lh-sm)
}
.region-library input {
  width:100%
}
.region-library .button {
  width:100%;
  white-space:normal;
  margin:var(--zs-sp-2) 0
}
.region-copy-preview {
  border:1px solid color-mix(in srgb,var(--zs-accent) 33%,transparent);
  border-radius:var(--zs-radius);
  padding:10px;
  margin-top:12px;
  font-size:var(--zs-fs-xs);
  overflow-wrap:anywhere;
  line-height:var(--zs-lh-xs)
}
.region-compare {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:10px 0
}
.region-compare svg {
  display:block;
  width:100%;
  background:var(--zz-map-surface);
  border:1px solid var(--zs-line-2);
  margin-top:5px
}
.region-copy-preview>.button {
  width:100%;
  margin-bottom:var(--zs-sp-2);
  white-space:normal
}
.workspace .zz-tactical-map .zz-objective-disc {
  width:var(--marker-size,29px);
  height:var(--marker-size,29px);
  font-size:calc(var(--marker-size,29px) * .38)
}
.workspace .zz-tactical-map .zz-objective-disc.dense {
  width:calc(var(--marker-size,29px) * .73);
  height:calc(var(--marker-size,29px) * .73);
  font-size:calc(var(--marker-size,29px) * .28)
}
.workspace .zz-tactical-map .zz-objective-disc.is-main {
  width:calc(var(--marker-size,29px) * 1.1);
  height:calc(var(--marker-size,29px) * 1.1)
}
.workspace .zz-tactical-map .zz-objective-name {
  font-size:var(--label-size,12px)
}
.workspace .zz-tactical-map.colorblind .zz-objective-disc.capture-selected {
  background:var(--zz-cb-sky-bg);
  border-color:var(--zz-cb-sky)
}
.workspace .zz-tactical-map.colorblind .zz-objective-disc.capture-next {
  background:var(--zz-cb-orange-bg);
  border-color:var(--zz-cb-orange);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--zz-cb-orange) 20%,transparent)
}
.workspace .zz-tactical-map.colorblind .zz-objective-disc.team-red {
  background:var(--zz-cb-orange-bg);
  border-color:var(--zz-cb-orange)
}
.workspace.colorblind .map-legend {
  color:var(--zz-cb-fg)
}
.terrain-offsets {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:10px 0
}
.terrain-offsets label {
  font-size:var(--zs-fs-xs);
  color:var(--zs-text-2);
  line-height:var(--zs-lh-sm)
}
.terrain-offsets input {
  width:100%;
  margin-top:5px
}
.terrain-profile {
  width:100%;
  background:var(--zz-map-surface);
  border:1px solid color-mix(in srgb,var(--zs-accent) 15%,transparent);
  border-radius:var(--zs-radius)
}
.terrain-dialog {
  width:min(1150px,96vw);
  max-width:96vw;
  max-height:94vh;
  overflow:auto;
  background:var(--zs-overlay);
  color:var(--zs-text);
  border:1px solid color-mix(in srgb,var(--zs-accent) 25%,transparent);
  border-radius:var(--zs-radius-lg);
  padding:20px
}
.terrain-dialog::backdrop {
  background:color-mix(in srgb,var(--zs-bg) 85%,transparent);
  backdrop-filter:blur(var(--zz-blur))
}
.terrain-dialog-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
  position:sticky;
  top:-20px;
  z-index:2;
  background:var(--zs-overlay);
  padding:8px 0
}
.terrain-dialog h2 {
  font-size:var(--zs-fs-h2);
  margin:6px 0
}
.terrain-dialog canvas {
  display:block;
  width:100%;
  height:clamp(220px,calc(94dvh - 260px),560px);
  touch-action:none;
  border-radius:var(--zs-radius)
}
.terrain-dialog canvas:focus-visible {
  outline:2px solid var(--zs-accent)
}
.terrain-controls {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:15px;
  font-size:var(--zs-fs-xs)
}
.terrain-controls label {
  display:flex;
  align-items:center;
  gap:10px
}
@media(max-width:600px) {
  .terrain-dialog {
    padding:12px
  }
  .terrain-dialog h2 {
    font-size:15px
  }
  .terrain-controls {
    gap:12px
  }
  .terrain-dialog-head .button {
    padding:8px
  }
  .terrain-numbers b {
    font-size:16px
  }
}
.terrain-readout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:20px 0 8px;
  padding:18px 12px;
  background:color-mix(in srgb,var(--zs-accent) 3%,transparent);
  border:1px solid color-mix(in srgb,var(--zs-accent) 15%,transparent);
  border-radius:var(--zs-radius)
}
.terrain-readout small {
  display:block;
  color:var(--zs-text-2);
  font-size:var(--zs-fs-xs);
  margin-bottom:8px;
  line-height:var(--zs-lh-xs)
}
.terrain-readout strong {
  font-size:var(--zs-fs-h2);
  font-weight:700;
  color:var(--zs-text);
  white-space:nowrap
}
.terrain-readout strong span {
  font-size:var(--zs-fs-xs);
  font-weight:500;
  line-height:var(--zs-lh-xs)
}
.terrain-secondary {
  color:var(--zs-text-2);
  font-size:var(--zs-fs-xs);
  margin:9px 0;
  line-height:var(--zs-lh-xs)
}
.terrain-secondary span {
  padding:0 8px
}
.terrain-status {
  font-size:var(--zs-fs-xs);
  line-height:var(--zs-lh-sm);
  margin:12px 0 18px;
  color:var(--zs-text-2)
}
.terrain-detail,.hud-details {
  border-top:1px solid var(--zs-line);
  margin:14px 0;
  padding-top:12px
}
.terrain-detail summary,.hud-details summary {
  cursor:pointer;
  color:var(--zs-text-2);
  font-size:var(--zs-fs-xs);
  padding:5px 0;
  line-height:var(--zs-lh-sm)
}
.terrain-detail[open] summary,.hud-details[open] summary {
  margin-bottom:12px;
  color:var(--zs-text)
}
.terrain-open-3d {
  margin-top:12px;
  width:100%
}
.terrain-camera-buttons {
  display:flex;
  gap:var(--zs-sp-2);
  align-items:center
}
.terrain-camera-buttons [data-terrain-zoom] {
  min-width:44px;
  min-height:44px;
  font-size:var(--zs-fs-lg)
}
.hud-details .side-select {
  margin-bottom:10px
}
.terrain-reposition {
  display:block;
  margin:10px 0
}
.terrain-legend {
  color:var(--zs-accent)
}
.terrain-legend span {
  color:var(--zz-warn)
}
@media(max-width:600px) {
  .terrain-dialog canvas {
    height:50vh
  }
}
.terrain-playback {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
  font-size:var(--zs-fs-xs)
}
.terrain-playback input {
  flex:1;
  min-width:120px
}
.terrain-playback output {
  min-width:65px;
  color:var(--zz-warn)
}
.terrain-toggles {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px
}
#fire-grid-form .form-input {
  width:100%
}
#fire-weapon {
  margin-bottom:8px
}
.terrain-detail .check-label {
  line-height:var(--zs-lh-sm)
}
/* Keep the main 3D controls and header in view; extra settings can scroll. */
.terrain-controls>span:not(.terrain-legend) {
  color:var(--zs-text-2)
}
@media(max-width:600px) {
  .terrain-dialog canvas {
    height:clamp(210px,calc(94dvh - 340px),430px)
  }
  .terrain-dialog-head {
    top:-12px
  }
  .terrain-playback label {
    font-size:10px
  }
  .terrain-toggles {
    grid-template-columns:1fr
  }
}
/* Accessible palettes retain labels, shapes and dash patterns in every mode. */
.workspace.colorblind {
  --zs-accent:var(--cb-team1);
  --zs-accent-soft:color-mix(in srgb,var(--cb-team1) 6%,transparent);
  --zs-accent-glow:color-mix(in srgb,var(--cb-team1) 10%,transparent)
}
.workspace .zz-tactical-map.colorblind .zz-objective-disc {
  background:var(--zz-map-surface);
  color:var(--zz-cb-fg);
  border-color:var(--zz-cb-edge)
}
.workspace .zz-tactical-map.colorblind .zz-objective-disc.capture-selected {
  background:var(--zz-map-surface);
  border-color:var(--cb-selected);
  border-radius:0;
  box-shadow:0 0 0 2px var(--zz-map-surface)
}
.workspace .zz-tactical-map.colorblind .zz-objective-disc.capture-next {
  background:var(--zz-map-surface);
  border-color:var(--cb-next);
  border-style:dashed;
  box-shadow:0 0 0 3px var(--zz-map-surface)
}
.workspace .zz-tactical-map.colorblind .zz-objective-disc.is-main {
  background:var(--zz-map-surface);
  border-color:var(--cb-team1);
  transform:none;
  border-radius:0
}
.workspace .zz-tactical-map.colorblind .zz-objective-disc.is-main span {
  transform:none;
  font-size:var(--zs-fs-xs)
}
.workspace .zz-tactical-map.colorblind .zz-objective-disc.is-main.team-red {
  background:var(--zz-map-surface);
  border-color:var(--cb-team2);
  transform:rotate(45deg)
}
.workspace .zz-tactical-map.colorblind .zz-objective-disc.is-main.team-red span {
  transform:rotate(-45deg)
}
.zz-cb-state {
  font-size:var(--zs-fs-xs);
  font-weight:800;
  color:var(--zz-cb-fg);
  background:var(--zz-surface-solid);
  padding:2px 5px;
  border-radius:0;
  white-space:nowrap
}
.workspace.colorblind .capture-path button {
  color:var(--cb-selected);
  border-color:var(--cb-selected);
  background:var(--zz-map-surface)
}
.workspace.colorblind .capture-next button,.workspace.colorblind .capture-next b {
  color:var(--cb-next);
  border-color:var(--cb-next);
  border-style:dashed
}
.workspace.colorblind .team-emblem,.workspace.colorblind .faction-code {
  color:var(--cb-team1);
  border-color:var(--cb-team1);
  background:var(--zz-map-surface)
}
.workspace.colorblind .team-emblem.red,.workspace.colorblind .faction-code.red {
  color:var(--cb-team2);
  border-color:var(--cb-team2);
  background:var(--zz-map-surface)
}
.workspace.colorblind .prediction .lane-chip {
  color:var(--zz-cb-fg);
  background:var(--zz-map-surface);
  border:1px solid var(--zz-cb-edge)
}
.workspace.colorblind .zz-capture-chance {
  color:var(--zz-cb-fg);
  border-color:var(--zz-cb-edge)
}
.workspace.colorblind .zz-mortar {
  color:var(--cb-flight);
  border-color:var(--cb-flight);
  background:var(--zz-map-surface)
}
.workspace.colorblind .over-budget,.workspace.colorblind .over-budget b,.workspace.colorblind .danger {
  color:var(--cb-team2);
  text-decoration:underline dotted;
  text-underline-offset:3px
}
.zz-grad-distance {
  display:block;
  width:max-content;
  background:var(--zz-surface-solid);
  color:var(--zz-cb-fg);
  border:1px solid var(--zz-cb-edge);
  font-size:var(--zs-fs-xs);
  padding:3px 5px;
  border-radius:0
}
#grad-target .button {
  margin-top:10px;
  white-space:normal
}
#grad-correction {
  display:block;
  padding:10px 0;
  font-size:var(--zs-fs-xs);
  line-height:var(--zs-lh-sm);
  color:var(--cb-flight,var(--zz-warn))
}
.flight-pad {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin:10px 0
}
.flight-pad .button {
  min-height:40px;
  min-width:52px
}
[data-flight-position] {
  font-size:var(--zs-fs-xs);
  color:var(--zs-text);
  font-variant-numeric:tabular-nums;
  line-height:var(--zs-lh-xs)
}
[data-terrain-fly][aria-pressed=true] {
  border-color:var(--zs-accent);
  color:var(--zs-text)
}
#map-colorblind {
  width:100%;
  font-size:var(--zs-fs-xs)
}
.workspace.colorblind .legend-dot.blue {
  background:var(--cb-team1);
  border-radius:0
}
.workspace.colorblind .legend-dot.red {
  background:var(--cb-team2);
  border-radius:0;
  transform:rotate(45deg)
}
.workspace.colorblind .legend-dot.white {
  background:var(--zz-map-surface);
  border:1px dashed var(--zz-cb-fg)
}
.scene-summary {
  font-size:var(--zs-fs-xs);
  color:var(--zs-text-2);
  margin:7px 0;
  line-height:var(--zs-lh-sm)
}
.flight-location {
  display:flex;
  align-items:center;
  gap:12px
}
.flight-minimap {
  width:76px;
  height:76px;
  flex:none;
  border:1px solid var(--zs-line-3);
  border-radius:var(--zz-radius-xs)
}
.terrain-dialog:has([data-flight-controls]:not([hidden])) canvas {
  height:clamp(200px,calc(94dvh - 375px),470px)
}
@media(max-width:600px) {
  .terrain-dialog:has([data-flight-controls]:not([hidden])) canvas {
    height:240px
  }
  .flight-pad .button {
    padding:6px;
    min-width:40px
  }
  .flight-location {
    gap:8px
  }
}
.pinned-timers {
  position:absolute;
  z-index:var(--zz-z-timers);
  left:14px;
  bottom:55px;
  max-width:min(390px,calc(100% - 80px));
  display:grid;
  gap:5px;
  pointer-events:none
}
.pinned-timer {
  display:flex;
  align-items:center;
  gap:9px;
  background:var(--zz-surface-solid);
  border:1px solid color-mix(in srgb,var(--zs-accent) 27%,transparent);
  border-radius:var(--zz-radius-xs);
  padding:6px 9px;
  pointer-events:auto;
  font-size:var(--zs-fs-xs)
}
.pinned-timer>span {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1;
  min-width:40px
}
.pinned-timer output {
  white-space:nowrap;
  font-variant-numeric:tabular-nums
}
.pinned-timer button {
  padding:4px;
  flex-shrink:0
}
#sight-status,[data-texture-status] {
  display:block;
  font-size:var(--zs-fs-xs);
  line-height:var(--zs-lh-sm);
  margin-top:8px;
  color:var(--zs-text)
}
@media(max-width:600px) {
  .pinned-timers {
    left:8px;
    bottom:48px;
    max-width:calc(100% - 66px)
  }
  .pinned-timer {
    gap:5px;
    font-size:10px;
    padding:5px
  }
}
/* Accessibility applies at body scope, including modal dialogs and the full terrain scene. */
body.colorblind {
  --zs-accent:var(--cb-team1);
  --zs-accent-soft:color-mix(in srgb,var(--cb-team1) 6%,transparent);
  --zs-accent-glow:color-mix(in srgb,var(--cb-team1) 10%,transparent);
  --zs-text:#f5f5f5;
  --zs-text-2:#c3c3c3;
  --zs-text-3:#b6b6b6;
  --zs-line:#ffffff30;
  --zs-line-2:#ffffff65
}
/* Üst çubuk ve alt bilgi site kabuğudur: erişilebilirlik paleti .page ve diyaloglara uygulanır, kabuk site değerlerine döner. */
body.colorblind :is(.zs-topbar,.skip-link,footer) {
  --zs-accent:#b5e8fa;
  --zs-accent-soft:rgba(181,232,250,.06);
  --zs-accent-glow:rgba(181,232,250,.1);
  --zs-text:#f4f3ef;
  --zs-text-2:#aaa9a7;
  --zs-text-3:#8a8987;
  --zs-line:#ffffff12;
  --zs-line-2:#ffffff1c
}
body.colorblind :is(input,select,textarea) {
  border-color:var(--zs-text-3)
}
body.colorblind :is(input,select,textarea):focus {
  outline:2px solid var(--cb-team1);
  outline-offset:2px
}
body.colorblind :is(.button.primary,.mode-pill.active,.drawing-button.active,.team-tabs .button.primary) {
  background:var(--cb-team1);
  color:var(--zz-map-surface);
  border:1px solid var(--zz-cb-fg);
  box-shadow:inset 0 0 0 1px var(--zz-cb-fg)
}
body.colorblind :is(.danger,.over-budget,.terrain-status.over-budget) {
  color:var(--cb-team2);
  font-weight:700
}
body.colorblind :is(.danger,.over-budget)::before {
  content:'! ';
  font-weight:800
}
body.colorblind :is(.side-note,.vehicle-meta,.build-row small,.form-label,.scene-summary,.scene-summary~details) {
  color:var(--zs-text-2)
}
body.colorblind :is(.terrain-legend,.accent-note,.counting,.budget-grid b) {
  color:var(--cb-team1)
}
body.colorblind .terrain-legend span {
  color:var(--cb-team2)
}
body.colorblind :is(.terrain-dialog canvas,.flight-minimap image,.map-card img) {
  filter:var(--map-image-filter)
}
body.colorblind :is(.colour-swatches button) {
  color:var(--zs-on-accent);
  font-weight:900;
  border:2px solid var(--zz-cb-edge)
}
body.colorblind .colour-swatches button[aria-pressed=true] {
  outline:3px solid var(--zz-cb-fg);
  outline-offset:3px
}
.zz-draw-code {
  display:inline-block;
  padding:1px 4px;
  background:var(--zs-on-accent);
  color:var(--zz-cb-fg);
  border:1px solid var(--zz-cb-fg);
  font-weight:800
}
.pinned-timer small {
  display:block;
  color:var(--zs-text-2);
  font-size:var(--zs-fs-xs);
  max-width:190px;
  overflow:hidden;
  text-overflow:ellipsis
}
body.colorblind .terrain-profile text {
  fill:var(--zz-cb-fg)
}
body.colorblind dialog {
  --zs-accent:var(--cb-team1);
  color:var(--zs-text);
  border-color:var(--zs-text-2)
}
body.colorblind :is(.map-card,.layer-card,.vehicle,.timer-row,.build-row) {
  border-color:var(--zs-line-2)
}
body.colorblind .map-card.chosen {
  outline:2px solid var(--cb-team1)
}
body.colorblind input[type=range] {
  accent-color:var(--cb-team1)
}
body.colorblind .danger {
  color:var(--cb-team2)
}
body.colorblind .compare-teams h3 {
  color:var(--cb-team1)
}
body.colorblind .compare-teams>section+section h3 {
  color:var(--cb-team2)
}
body.colorblind .region-row.selected {
  border-color:var(--cb-team2);
  border-style:dashed;
  background:color-mix(in srgb,var(--zs-text) 12%,var(--zs-bg))
}
body.colorblind .layer-card.selected {
  border-color:var(--cb-team1);
  background:color-mix(in srgb,var(--zs-text) 10%,var(--zs-bg))
}
body.colorblind .selected-map {
  filter:var(--map-image-filter)
}
body.colorblind :is(.vehicle-meta,.team-strip small,.terrain-controls>span:not(.terrain-legend)) {
  color:var(--zs-text-2)
}
.zz-category-marker .zz-draw-code {
  position:absolute;
  left:14px;
  top:-27px;
  line-height:16px;
  font-size:var(--zs-fs-xs);
  border-radius:0
}
body.colorblind :is(.over-budget,.over-budget b) {
  color:var(--cb-team2)
}
body.colorblind :is(.map-change,.side-note.accent-note,.budget-grid>div,.terrain-readout,.terrain-profile,.region-copy-preview) {
  border-color:var(--zs-line-2);
  background:var(--zz-surface-solid)
}
body.colorblind :is(.range-label output,.stepper button,.region-help summary,.timer-row output) {
  color:var(--cb-team1)
}
body.colorblind :is(.timer-row output.counting,.terrain-playback output) {
  color:var(--cb-team2)
}
body.colorblind .map-heading .heading-mode {
  background:var(--cb-team1);
  color:var(--zz-map-surface)
}
body.colorblind .region-drawbar {
  border-color:var(--cb-team2)
}
body.colorblind .region-vertex {
  background:var(--cb-team2)
}
body.colorblind .region-toggle input,body.colorblind .region-row input {
  accent-color:var(--cb-team1)
}
body.colorblind :is(.search-field:focus-within,.map-card:hover,.map-card.chosen,[data-terrain-fly][aria-pressed=true]) {
  border-color:var(--cb-team1)
}
body.colorblind .library-filters button[aria-pressed=true] {
  border-color:var(--cb-team1)
}
body.colorblind .terrain-dialog canvas:focus-visible {
  outline-color:var(--cb-team1)
}
/* Squad SDK silhouettes and vehicle artwork; text remains the primary identifier. */
.vehicle-visual {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  background:var(--zz-map-surface);
  border-radius:var(--zs-radius);
  overflow:hidden
}
.vehicle-visual img {
  display:block;
  width:100%;
  height:110px;
  object-fit:contain
}
.vehicle-card .vehicle-visual {
  margin-bottom:8px
}
.vehicle-class-icon img {
  width:64px;
  height:78px;
  object-fit:contain
}
.vehicle-class-icon {
  gap:12px;
  min-height:78px
}
.vehicle-class-icon small {
  color:var(--zs-text-2)
}
.build-row:has(.vehicle-visual) {
  display:grid;
  grid-template-columns:64px minmax(0,1fr) auto;
  gap:8px
}
.build-row .vehicle-visual img {
  width:64px;
  height:52px
}
.build-row .vehicle-visual small {
  display:none
}
.zz-squad-symbol {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:2px solid var(--symbol-color);
  border-radius:var(--zz-radius-xs);
  background:var(--zz-surface-solid);
  box-shadow:var(--zz-shadow-sm);
  transform:translate(-50%,-50%)
}
.zz-squad-symbol img {
  display:block;
  width:29px;
  height:29px;
  object-fit:contain;
  filter:grayscale(1) brightness(1.7);
  pointer-events:none
}
body.colorblind .vehicle-visual img {
  filter:var(--map-image-filter,none)
}
.timer-row .vehicle-visual {
  max-height:84px;
  margin-bottom:8px
}
.timer-row .vehicle-visual img {
  height:84px
}

.zz-flag {
  display:block;
  flex:none;
  width:42px;
  height:28px;
  object-fit:cover;
  border:1px solid var(--zs-line-2);
  border-radius:var(--zz-radius-xs);
  background:var(--zs-surface-2)
}
.zz-flag.is-missing,.zz-flag-missing {
  object-position:-9999px 0;
  color:transparent;
  overflow:hidden
}
.layer-sub .zz-flag {
  width:20px;
  height:14px
}
.team-head {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:14px;
  font-size:var(--zs-fs-sm)
}
.team-flag {
  display:flex;
  flex:none
}
.team-strip b .faction-code {
  margin-left:6px;
  font-weight:600
}
.live-badge {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  letter-spacing:0;
  color:var(--zs-text-2)
}
.live-badge-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  border:2px solid var(--zs-text-3);
  box-sizing:border-box
}
.live-badge.is-live {
  color:var(--zz-ok)
}
.live-badge.is-live .live-badge-dot {
  background:var(--zz-ok);
  border-color:var(--zz-ok)
}
.live-badge .button.compact {
  padding-block:3px
}
.toast .button {
  margin-left:8px
}