.armor-page {
  --armor-accent:var(--zs-accent);
  --armor-block:var(--zz-warn);
  --armor-pass:var(--zz-team1)
}
.armor-tab-badge {
  font-size:12px;
  font-weight:var(--zs-fw-semibold);
  text-transform:uppercase;
  color:var(--zs-accent);
  background:var(--zs-accent-soft);
  border-radius:var(--zs-radius-pill);
  padding:6px 12px
}
.armor-page .page-heading .eyebrow {
  flex-basis:100%
}
.armor-layout {
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:20px
}
.armor-panel {
  padding:22px;
  background:var(--zs-surface);
  border:1px solid var(--zs-line-2);
  border-radius:var(--zs-radius-lg)
}
.armor-panel h2 {
  font-size:var(--zs-fs-lg);
  line-height:var(--zs-lh-lg);
  margin:0 0 20px
}
.armor-panel label {
  display:block;
  font-size:var(--zs-fs-xs);
  margin:16px 0 7px;
  color:var(--zs-text-2)
}
.armor-panel label span {
  float:right;
  color:var(--zs-text-3)
}
.armor-panel select,.armor-panel input:not([type=checkbox]):not([type=range]) {
  width:100%;
  background:var(--zs-surface-2);
  color:var(--zs-text);
  border:1px solid var(--zs-line-2);
  padding:10px;
  border-radius:var(--zs-radius);
  font:inherit;
  font-size:var(--zs-fs-sm);
  min-height:44px
}
.armor-panel input[type=range] {
  width:100%;
  accent-color:var(--armor-accent)
}
.armor-panel select {
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden
}
.armor-panel select:focus,.armor-panel input:focus {
  border-color:var(--zs-accent)
}
.armor-panel .armor-check {
  display:flex;
  gap:8px;
  align-items:center
}
.armor-panel input[type=checkbox] {
  accent-color:var(--armor-accent)
}
.armor-panel details {
  border-top:1px solid var(--zs-line-2);
  padding-top:16px;
  margin-top:16px;
  font-size:var(--zs-fs-xs);
  color:var(--zs-text-2);
  line-height:var(--zs-lh-xs)
}
.armor-panel summary {
  cursor:pointer;
  color:var(--zs-text)
}
.armor-panel a,.armor-footer a {
  color:var(--armor-accent)
}
.armor-photo {
  height:120px
}
.armor-photo .vehicle-visual {
  height:120px;
  background:transparent
}
.armor-photo img {
  height:100%;
  max-width:100%;
  object-fit:contain
}
.distance-pair {
  display:flex;
  align-items:center;
  gap:10px
}
.ammo-stats {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:16px
}
.ammo-stats span {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  font-size:var(--zs-fs-xs);
  color:var(--zs-text-2)
}
.ammo-stats strong {
  display:block;
  font-size:var(--zs-fs-h2);
  color:var(--armor-accent);
  margin-top:6px
}
.armor-note {
  font-size:var(--zs-fs-xs);
  color:var(--zs-text-3);
  line-height:var(--zs-lh-xs)
}
.armor-main {
  min-width:0
}
.armor-stage {
  height:clamp(380px,58vh,740px);
  position:relative;
  background:radial-gradient(ellipse at center,var(--zz-stage-top),var(--zz-stage-bottom));
  border:1px solid var(--zs-line-2);
  border-radius:var(--zs-radius-lg);
  overflow:hidden
}
.armor-stage #armor-canvas {
  width:100%;
  height:100%;
  touch-action:none;
  outline-offset:-4px
}
.armor-stage canvas {
  display:block;
  width:100%;
  height:100%
}
.armor-loading {
  position:absolute;
  inset:0;
  z-index:5;
  display:grid;
  place-content:center;
  text-align:center;
  padding:30px;
  background:var(--zs-overlay);
  color:var(--zs-text);
  white-space:pre-line
}
.armor-scene-label {
  position:absolute;
  left:20px;
  top:18px;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  gap:6px;
  text-shadow:0 1px 4px var(--zz-map-bg)
}
.armor-scene-label strong {
  font-size:var(--zs-fs-h2)
}
.armor-scene-label span,.armor-legend {
  font-size:var(--zs-fs-xs);
  color:var(--zs-text);
  background:var(--zs-surface-2);
  padding:4px 8px;
  border-radius:var(--zz-radius-xs);
  text-shadow:none
}
.armor-scene-label span {
  align-self:flex-start
}
.armor-crosshair {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  color:var(--zs-text-2);
  pointer-events:none;
  font-family:monospace;font-size:var(--zs-fs-h2)
}
.armor-view-buttons {
  position:absolute;
  bottom:42px;
  left:16px;
  display:flex;
  gap:6px
}
.armor-view-buttons button {
  border:1px solid var(--zs-line-3);
  background:var(--zs-surface-2);
  color:var(--zs-text);
  border-radius:var(--zs-radius);
  padding:var(--zs-sp-2) var(--zs-sp-3);
  min-height:44px;
  font-size:var(--zs-fs-xs);
  line-height:var(--zs-lh-xs);
  cursor:pointer
}
.armor-legend {
  position:absolute;
  bottom:14px;
  left:18px;
  font-size:var(--zs-fs-xs);
  color:var(--zs-text-2);
  pointer-events:none
}
.armor-replay {
  display:flex;
  gap:var(--zs-sp-2);
  align-items:center;
  flex-wrap:wrap;
  padding:var(--zs-sp-3) 0
}
.armor-replay .button {
  font-size:var(--zs-fs-xs);
  min-height:44px;
  padding:8px 13px
}
.armor-replay input {
  flex:1;
  min-width:100px;
  accent-color:var(--armor-accent)
}
.armor-replay output {
  font-size:var(--zs-fs-xs);
  min-width:35px
}
.armor-result {
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:18px;
  background:var(--zs-surface-2);
  border-left:3px solid var(--armor-accent);
  border-radius:var(--zs-radius);
  font-size:var(--zs-fs-sm)
}
.armor-result span {
  font-size:var(--zs-fs-xs);
  color:var(--zs-text-2);
  line-height:var(--zs-lh-xs)
}
.armor-table-wrap {
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--zs-line-3) transparent;
  margin-top:12px;
  border:1px solid var(--zs-line-2);
  border-radius:var(--zs-radius)
}
.armor-table {
  width:100%;
  border-collapse:collapse;
  font-size:var(--zs-fs-xs);
  text-align:left
}
.armor-table caption {
  text-align:left;
  padding:13px;
  color:var(--zs-text-3);
  font-size:var(--zs-fs-xs)
}
.armor-table td,.armor-table th {
  padding:12px;
  border-bottom:1px solid var(--zs-line);
  white-space:nowrap
}
.armor-table th {
  font-size:var(--zs-fs-xs);
  color:var(--zs-text-3);
  text-transform:uppercase;
  font-weight:var(--zs-fw-semibold);
  letter-spacing:.3px
}
.armor-table td small {
  display:block;
  font-size:var(--zs-fs-xs);
  color:var(--zs-text-3);
  max-width:200px;
  overflow:hidden;
  text-overflow:ellipsis
}
.armor-table tr[data-active=true] {
  background:var(--zs-line)
}
.armor-table .pass {
  color:var(--armor-pass)
}
.armor-table .blocked {
  color:var(--armor-block)
}
.armor-footer {
  font-size:var(--zs-fs-xs);
  color:var(--zs-text-2);
  line-height:var(--zs-lh-xs);
  margin-top:22px
}
.armor-page .sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap
}
.armor-page .page-heading h1 {
  font-size:var(--zs-fs-display);line-height:var(--zs-lh-display)
}
.armor-page.colorblind .armor-panel,.armor-page.colorblind .armor-result {
  border-color:var(--armor-accent)
}
@media(max-width:1050px) {
  .armor-layout {
    grid-template-columns:255px minmax(0,1fr)
  }
  .armor-panel {
    padding:16px
  }
  .armor-version {
    display:none
  }
  .armor-stage {
    height:460px
  }
}
@media(max-width:720px) {
  .armor-layout {
    grid-template-columns:1fr
  }
  .armor-panel {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px 12px
  }
  .armor-panel>* {
    grid-column:1/-1
  }
  .armor-panel label {
    margin:8px 0 0
  }
  .armor-photo {
    display:none
  }
  .armor-stage {
    height:430px
  }
  .armor-page .page-heading {
    align-items:flex-start;
    gap:14px
  }
  .armor-page .page-heading h1 {
    font-size:25px
  }
  .armor-page .page-heading>a {
    font-size:10px;
    padding:8px
  }
  .armor-page .page {
    padding-left:12px;
    padding-right:12px
  }
  .armor-nav {
    gap:12px
  }
  .armor-nav a {
    font-size:11px
  }
  .armor-page .zs-topbar {
    padding:12px;
    gap:12px
  }
  .armor-page .zs-brand img {
    max-width:130px
  }
  .armor-scene-label {
    left:12px;
    top:12px
  }
  .armor-scene-label strong {
    font-size:15px
  }
  .armor-table td,.armor-table th {
    padding:9px;
    font-size:10px
  }
  .armor-view-buttons button {
    padding:8px 10px
  }
  .armor-replay .button {
    font-size:10px;
    padding:8px
  }
  .armor-panel h2 {
    margin-bottom:0
  }
}
@media(prefers-reduced-motion:reduce) {
  .armor-page * {
    scroll-behavior:auto!important
  }
}
.armor-display-bar {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px
}
.armor-display-bar label {
  font-size:var(--zs-fs-xs)
}
.armor-display-bar select {
  flex:1;
  min-width:0
}
.armor-components {
  border:1px solid var(--zs-line-2);
  border-radius:var(--zs-radius);
  padding:12px;
  margin-bottom:10px
}
.armor-components #component-list {
  display:flex;
  flex-wrap:wrap;
  gap:8px
}
.armor-components button {
  background:var(--zs-surface-2);
  border:1px solid var(--zs-line-3);
  border-radius:var(--zs-radius);
  padding:var(--zs-sp-2) var(--zs-sp-3);
  min-height:44px;
  font-size:var(--zs-fs-xs);
  line-height:var(--zs-lh-xs);
  text-align:left
}
.armor-components button:before {
  content:"";
  display:inline-block;
  width:9px;
  height:9px;
  margin-right:7px;
  background:var(--component-color);
  border:1px solid var(--zs-line-3);
  border-radius:var(--zz-radius-xs)
}
.armor-components button[aria-pressed=true] {
  outline:2px solid var(--armor-accent)
}
.armor-components p {
  font-size:var(--zs-fs-xs);
  line-height:var(--zs-lh-xs);
  color:var(--zs-text-2);
  margin-top:10px
}
#exterior-note {
  margin:0 0 10px
}
.armor-view-buttons button:hover,.armor-components button:hover {
  color:var(--zs-text);
  background:var(--zs-line)
}

#armor-canvas:focus-visible {
  outline:2px solid var(--zs-accent);
  outline-offset:2px
}
select:disabled {
  opacity:.4
}