.compare-dates { gap: 22px; margin-top: 42px; }
.compare-dates label { min-width: 0; flex: 1; }
.compare-dates span,
.compare-dates small { display: block; color: #718079; font: 8px var(--mono); letter-spacing: .08em; }
.compare-dates select { width: 100%; margin: 8px 0; padding: 10px 28px 10px 10px; border: 1px solid rgba(7, 17, 15, .22); background: transparent; color: var(--ink); font: 11px var(--mono); }
.compare-dates small { font-size: 7px; line-height: 1.5; }
.compare-image { background: #0d201a; }
.compare-image::before { display: none; }
.compare-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.compare-image.before { width: auto; clip-path: inset(0 50% 0 0); background: #0d201a; }
.compare-image span { padding: 7px 9px; background: rgba(7, 17, 15, .72); font-size: 10px; }
.divider { pointer-events: none; }
.match-note { margin: 16px 0 0 !important; color: #526c62 !important; font: 8px var(--mono) !important; letter-spacing: .08em; }
.analysis-modes { display: flex; margin-top: 18px; }
.analysis-modes button { padding: 9px 12px; border: 1px solid rgba(7,17,15,.2); background: transparent; color: #52615a; font: 8px var(--mono); cursor: pointer; }
.analysis-modes button + button { border-left: 0; }
.analysis-modes button.active { background: var(--ink); color: var(--acid); }
.analysis-modes .report-download { margin-left: auto; border-left: 1px solid rgba(7,17,15,.2); color: var(--ink); }
.analysis-modes .report-download:hover { background: var(--acid); }
.analysis-summary { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(7,17,15,.15); }
.analysis-summary span,.analysis-summary small { display: block; color: #718079; font: 7px var(--mono); letter-spacing: .08em; }
.analysis-summary strong { display: block; margin: 3px 0; font: 22px var(--mono); font-weight: 400; }
.analysis-summary strong.decrease { color: #875030; }
.analysis-legend { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 10px; font: 7px var(--mono); color: #718079; }
.analysis-legend span { display: flex; align-items: center; gap: 4px; }
.analysis-legend i { width: 8px; height: 8px; }
.analysis-legend .snow { background: #ebffff; border: 1px solid #b8cece; }.analysis-legend .ice { background: #1fb8ec; }.analysis-legend .terrain { background: #7a5231; }.analysis-legend .cloud { background: #ef37b5; }
.snow-trend { display: flex; align-items: end; gap: 4px; height: 48px; margin-top: 10px; border-bottom: 1px solid rgba(7,17,15,.2); }
.snow-trend > span { display: flex; flex: 1; height: 100%; flex-direction: column; justify-content: end; align-items: center; }
.snow-trend i { width: 100%; height: var(--snow); max-height: 38px; background: #8fcabd; }
.snow-trend small { font: 6px var(--mono); color: #718079; }
.glacier-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 10px; }
.glacier-cards article { min-width: 0; padding: 8px 7px; border: 1px solid rgba(7,17,15,.15); cursor: pointer; transition: background .2s, border-color .2s; }
.glacier-cards span,.glacier-cards small { display: block; overflow: hidden; color: #718079; font: 6px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.glacier-cards strong { display: block; margin: 3px 0; font: 12px var(--mono); font-weight: 400; }
.glacier-cards .confidence-medium { border-color: #b88b42; }.glacier-cards .confidence-low { border-color: #bd5773; background: rgba(189,87,115,.06); }
.inventory-source { display: block; margin-top: 7px; color: #718079; font: 6px var(--mono); letter-spacing: .06em; }
.glacier-cards article.active { border-color: var(--ink); background: rgba(165,216,199,.28); }
.glacier-overlay { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.glacier-overlay .glacier-region { transition: opacity .2s; }
.glacier-overlay path { vector-effect: non-scaling-stroke; }
.glacier-overlay .boundary-halo { fill: none; stroke: rgba(0,0,0,.9); stroke-width: 7; }
.glacier-overlay .boundary-color { stroke-width: 4; fill-opacity: .16; }
.glacier-overlay .region-khumbu .boundary-color,.glacier-overlay .region-khumbu circle { stroke: #d6ff43; fill: #d6ff43; }.glacier-overlay .region-rongbuk .boundary-color,.glacier-overlay .region-rongbuk circle { stroke: #42d6ff; fill: #42d6ff; }.glacier-overlay .region-kangshung .boundary-color,.glacier-overlay .region-kangshung circle { stroke: #ff8b42; fill: #ff8b42; }
.glacier-overlay .region-marker circle { stroke: #07110f; stroke-width: 4; vector-effect: non-scaling-stroke; }
.glacier-overlay .region-marker text { fill: white; stroke: #07110f; stroke-width: 5; paint-order: stroke fill; font: 700 18px var(--mono); letter-spacing: 1px; }
.glacier-overlay.has-selection .glacier-region:not(.active) { opacity: .1; }.glacier-overlay.has-selection .glacier-region.active .boundary-halo { stroke-width: 11; }.glacier-overlay.has-selection .glacier-region.active .boundary-color { stroke-width: 7; fill-opacity: .28; }.glacier-overlay.has-selection .glacier-region.active .region-marker text { font-size: 22px; }
.glacier-overlay.unavailable { display: none; }
.landmark-overlay { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.landmark { color: white; }.landmark polygon,.landmark circle { fill: var(--acid); stroke: #07110f; stroke-width: 4; vector-effect: non-scaling-stroke; }
.landmark-camp circle { fill: #ffb347; }.landmark-pass circle { fill: #d9e3df; }.landmark-region circle { fill: #9ed9ff; }
.landmark text { fill: white; stroke: #07110f; stroke-width: 5; paint-order: stroke fill; font: 700 15px var(--mono); letter-spacing: .7px; }
.landmark .landmark-detail { fill: #e0ebe6; font-size: 11px; font-weight: 400; }
.landmark.outside-crop text { fill: #ffcf79; font-size: 14px; }.landmark.outside-crop circle { fill: #ffb347; }
.landmark-camp-zone circle { fill: #ff6f61; stroke-width: 5; stroke-dasharray: 3 2; }
.landmark-camp-zone text { fill: #ffd4cf; }
.climbing-route { fill: none; stroke: #ff6f61; stroke-width: 3; stroke-dasharray: 9 7; opacity: .85; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 2px #07110f); }
.layer-panel { position: absolute; top: 14px; right: 14px; z-index: 7; width: 150px; padding: 10px; border: 1px solid rgba(255,255,255,.28); background: rgba(7,17,15,.82); color: white; backdrop-filter: blur(9px); }
.layer-panel>strong { display: block; margin-bottom: 7px; color: var(--acid); font: 8px var(--mono); letter-spacing: .12em; }
.layer-panel label { display: flex; align-items: center; gap: 6px; padding: 3px 0; font: 7px var(--mono); cursor: pointer; }
.layer-panel input { width: 11px; height: 11px; margin: 0; accent-color: var(--acid); }
.layer-panel>div { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 7px; }
.layer-panel button { padding: 6px 3px; border: 1px solid rgba(255,255,255,.2); background: transparent; color: white; font: 6px var(--mono); cursor: pointer; }
.layer-panel button:hover,.layer-panel button.active { border-color: var(--acid); color: var(--acid); }.layer-panel button:disabled { opacity: .35; cursor: default; }
.layer-panel .focus-layer { width: 100%; margin-top: 4px; }
.comparison.hide-layer-peaks .landmark-peak,.comparison.hide-layer-camps .landmark-camp,.comparison.hide-layer-camps .landmark-camp-zone,.comparison.hide-layer-camps .climbing-route,.comparison.hide-layer-regions .landmark-region,.comparison.hide-layer-regions .landmark-pass,.comparison.hide-layer-glaciers .glacier-overlay { display: none; }
.comparison.hide-layer-labels .landmark text,.comparison.hide-layer-labels .region-marker text { display: none; }
.comparison.focus-map-region .landmark-overlay { display: none; }.comparison.focus-map-region .glacier-overlay .glacier-region:not(.active) { display: none; }.comparison.focus-map-region .glacier-overlay .glacier-region.active .boundary-halo { stroke-width: 13; }.comparison.focus-map-region .glacier-overlay .glacier-region.active .boundary-color { stroke-width: 8; fill-opacity: .32; }
@media(max-width:700px){.layer-panel{width:125px}.layer-panel label{font-size:6px}}
.update-control { display: flex; align-items: center; gap: 7px; margin-right: 12px; }
.update-control button { padding: 6px 8px; border: 1px solid currentColor; background: transparent; color: inherit; font: 7px var(--mono); cursor: pointer; }
.update-control button:disabled { opacity: .45; cursor: wait; }
.update-control small { max-width: 130px; overflow: hidden; color: #829089; font: 7px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
@media(max-width:900px){.update-control small{display:none}.update-control{margin-right:0}}
.update-center { width: min(680px, 92vw); max-width: none; padding: 34px; }
.update-center .update-close { float: right; border: 0; background: none; font-size: 26px; cursor: pointer; }
.update-center h2 { margin: 4px 0 18px; font-size: 34px; }.update-center h3 { margin-top: 24px; font: 10px var(--mono); letter-spacing: .1em; }
.update-integrity { display: flex; justify-content: space-between; padding: 12px; background: #dce6e1; font: 9px var(--mono); }.update-integrity span { color: #65756e; }
.update-center form { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 12px; }
.update-center form label { color: #65756e; font: 7px var(--mono); }.update-center form input { width: 100%; margin-top: 5px; padding: 8px; border: 1px solid #b2bdb8; background: transparent; font: 11px var(--mono); }
.update-center form button { align-self: end; min-height: 33px; border: 0; background: var(--ink); color: var(--acid); font: 7px var(--mono); }
.update-history article { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #c5cec9; font: 8px var(--mono); }.update-history article span { overflow: hidden; color: #65756e; text-overflow: ellipsis; white-space: nowrap; }.update-history .history-error strong { color: #ae3556; }
.update-toast { position: fixed; right: 24px; bottom: 24px; z-index: 30; padding: 15px 18px; background: var(--acid); color: var(--ink); box-shadow: 0 10px 40px rgba(0,0,0,.35); font: 9px var(--mono); letter-spacing: .08em; }
@media(max-width:700px){.update-center form{grid-template-columns:1fr 1fr}.update-integrity{display:block}.update-integrity span{display:block;margin-top:5px}}

html[data-view="compare"] .compare-section {
  grid-template-columns: minmax(300px, 34%) minmax(0, 1fr);
  gap: 2.5vw;
}

html[data-view="compare"] .comparison {
  width: 100%;
  max-width: 1100px;
  justify-self: center;
}

@media (max-width: 980px) {
  html[data-view="compare"] .compare-section { grid-template-columns: 1fr; }
}