:root {
  --ink: #eaf3f7;
  --muted: #91a6b4;
  --muted-2: #617887;
  --base: #06111b;
  --panel: #0a1824;
  --panel-2: #0e202e;
  --line: rgba(157, 190, 205, .14);
  --line-strong: rgba(157, 190, 205, .24);
  --aqua: #49d6c5;
  --gold: #f2b84b;
  --danger: #ff7b7b;
  --radius: 16px;
  --shadow: 0 20px 60px rgba(0, 5, 10, .34);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--base); color: var(--ink); font-family: "DM Sans", sans-serif; }
body { overflow: hidden; }
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; }

.app-shell { min-height: 100vh; background: radial-gradient(circle at 52% 0%, rgba(22, 91, 112, .18), transparent 38%), var(--base); }
.topbar { height: 66px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 18px; background: rgba(6, 17, 27, .92); backdrop-filter: blur(18px); position: relative; z-index: 30; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-family: Manrope, sans-serif; font-size: 19px; font-weight: 700; }
.brand strong { color: var(--aqua); }
.brand-mark { width: 36px; height: 36px; border: 1px solid rgba(73, 214, 197, .28); display: grid; place-items: center; border-radius: 11px; color: var(--aqua); background: rgba(73, 214, 197, .08); }
.brand-mark svg { width: 20px; }
.version { font: 700 10px Manrope, sans-serif; letter-spacing: .1em; color: var(--gold); border: 1px solid rgba(242, 184, 75, .25); padding: 3px 6px; border-radius: 5px; }
.top-actions, .tool-group { display: flex; align-items: center; gap: 5px; }
.btn, .icon-btn, .tool-btn { border: 1px solid var(--line); background: rgba(255,255,255,.025); border-radius: 10px; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: .2s ease; }
.btn { padding: 0 13px; font-weight: 600; font-size: 14px; }
.btn svg { width: 17px; }
.btn:hover, .icon-btn:hover, .tool-btn:hover { background: rgba(255,255,255,.075); border-color: var(--line-strong); }
.btn.primary { background: var(--aqua); color: #06201e; border-color: transparent; font-weight: 800; }
.btn.primary:hover { background: #67e1d3; transform: translateY(-1px); }
.chevron { width: 14px !important; }
.export-wrap { position: relative; }
.export-menu { position: absolute; top: calc(100% + 9px); right: 0; width: 230px; padding: 7px; background: #102331; border: 1px solid var(--line-strong); border-radius: 13px; box-shadow: var(--shadow); z-index: 50; }
.export-menu button { width: 100%; border: 0; background: none; display: flex; gap: 11px; text-align: left; padding: 10px; color: var(--ink); border-radius: 8px; cursor: pointer; }
.export-menu button:hover { background: rgba(255,255,255,.07); }
.export-menu svg { width: 19px; color: var(--aqua); margin-top: 2px; }
.export-menu span { display: grid; gap: 2px; }
.export-menu strong { font-size: 13px; }
.export-menu small { color: var(--muted); font-size: 11px; }

.workspace { height: calc(100vh - 66px); display: grid; grid-template-columns: 294px minmax(420px, 1fr) 294px; }
.sidebar { background: rgba(9, 24, 36, .94); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; position: relative; z-index: 20; }
.left-panel { border-right: 1px solid var(--line); }
.right-panel { border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; padding: 22px 18px 16px; }
.panel-heading.compact { padding-bottom: 13px; }
.eyebrow { display: block; text-transform: uppercase; color: var(--aqua); font: 700 10px Manrope, sans-serif; letter-spacing: .16em; margin-bottom: 5px; }
h1, h2, h3 { font-family: Manrope, sans-serif; margin: 0; }
h1 { font-size: 20px; }
h2 { font-size: 19px; }
.mobile-close { display: none !important; }
.icon-btn, .tool-btn { width: 38px; padding: 0; }
.icon-btn svg, .tool-btn svg { width: 17px; }

.control-section { border-top: 1px solid var(--line); }
.section-trigger { width: 100%; height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 17px; border: 0; background: transparent; cursor: pointer; font-weight: 700; font-size: 14px; }
.section-trigger span { display: flex; align-items: center; gap: 9px; }
.section-trigger svg { width: 16px; color: var(--muted); transition: .2s ease; }
.section-trigger span svg { color: var(--aqua); }
.control-section.open .section-trigger > svg { transform: rotate(180deg); }
.section-body { display: none; padding: 0 17px 18px; }
.control-section.open .section-body { display: block; }
.section-body > label, .selected-card label { display: block; color: var(--muted); font-size: 12px; font-weight: 600; margin: 12px 0 7px; }
.section-body input[type="text"], .selected-card input, .search-box input { width: 100%; color: var(--ink); background: rgba(0,0,0,.14); border: 1px solid var(--line); border-radius: 9px; height: 39px; padding: 0 10px; }
.select-wrap { position: relative; }
.select-wrap select { appearance: none; width: 100%; height: 39px; padding: 0 34px 0 10px; color: var(--ink); border: 1px solid var(--line); border-radius: 9px; background: #0c1e2c; cursor: pointer; }
.select-wrap svg { position: absolute; right: 10px; top: 11px; width: 16px; pointer-events: none; color: var(--muted); }
.quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 11px; }
.quick-card { min-width: 0; padding: 9px 4px; border: 1px solid var(--line); background: rgba(255,255,255,.025); color: var(--muted); border-radius: 9px; display: grid; justify-items: center; gap: 4px; cursor: pointer; font-size: 10px; font-weight: 700; }
.quick-card svg { width: 18px; }
.quick-card.active { color: var(--aqua); background: rgba(73,214,197,.08); border-color: rgba(73,214,197,.38); }
.co-flag { display: block; width: 19px; height: 15px; border-radius: 2px; background: linear-gradient(#f8d33a 0 50%, #255bbb 50% 75%, #dc3346 75%); }
.palette-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.palette { height: 32px; border: 2px solid transparent; border-radius: 8px; padding: 3px; background: transparent; cursor: pointer; }
.palette span { display: block; width: 100%; height: 100%; border-radius: 5px; }
.palette.active { border-color: var(--aqua); }
.row-control { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; }
.row-control label { color: var(--muted); font-size: 12px; font-weight: 600; }
.row-control output { font-size: 11px; color: var(--aqua); }
input[type="range"] { width: 100%; height: 4px; accent-color: var(--aqua); }
.switch-row { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.switch-row span { display: grid; gap: 1px; }
.switch-row strong { font-size: 12px; }
.switch-row small { color: var(--muted-2); font-size: 10px; }
.switch input { display: none; }
.switch > span { width: 34px; height: 19px; border-radius: 99px; background: #2d4150; display: block; position: relative; cursor: pointer; transition: .2s; }
.switch > span::after { content: ""; position: absolute; width: 13px; height: 13px; left: 3px; top: 3px; background: #b7c5cd; border-radius: 50%; transition: .2s; }
.switch input:checked + span { background: var(--aqua); }
.switch input:checked + span::after { transform: translateX(15px); background: #05201e; }
.switch input:disabled + span { opacity: .35; cursor: not-allowed; }
.layer-controls { padding-bottom: 14px; }
.layer-controls .switch-row { margin-top: 11px; padding: 8px 9px; border: 1px solid rgba(157,190,205,.09); background: rgba(255,255,255,.018); border-radius: 9px; }
.layer-controls .switch-row:first-child { margin-top: 3px; }
.upload-zone { width: 100%; padding: 12px; margin-top: 8px; border: 1px dashed var(--line-strong); background: rgba(255,255,255,.02); border-radius: 10px; display: flex; gap: 10px; color: var(--ink); text-align: left; cursor: pointer; }
.upload-zone:hover { border-color: var(--aqua); background: rgba(73,214,197,.05); }
.upload-zone svg { width: 20px; color: var(--aqua); }
.upload-zone span { display: grid; gap: 2px; }
.upload-zone strong { font-size: 12px; }
.upload-zone small { color: var(--muted); font-size: 10px; }

.canvas-stage { min-width: 0; padding: 12px 14px 10px; display: flex; flex-direction: column; background: radial-gradient(circle at 50% 40%, rgba(22, 72, 91, .18), transparent 55%); }
.canvas-toolbar { min-height: 45px; display: flex; align-items: center; gap: 10px; }
.tool-group { padding-right: 10px; border-right: 1px solid var(--line); }
.tool-btn { width: 34px; height: 34px; min-height: 34px; border-color: transparent; color: var(--muted); }
.tool-btn.active { color: var(--aqua); background: rgba(73,214,197,.08); border-color: rgba(73,214,197,.22); }
.canvas-status { margin-left: auto; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; }
.divider { height: 13px; width: 1px; background: var(--line); }
.map-board { flex: 1; min-height: 0; position: relative; border: 1px solid rgba(137, 180, 198, .14); border-radius: 22px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 4, 8, .28), inset 0 1px rgba(255,255,255,.04); background: #081725; }
#mapSvg { width: 100%; height: 100%; display: block; }
.sphere { fill: rgba(15, 43, 61, .55); stroke: rgba(134, 182, 200, .18); stroke-width: 1; }
.graticule { fill: none; stroke: rgba(131, 173, 191, .105); stroke-width: .65; }
.region { cursor: pointer; transition: filter .15s ease, opacity .15s ease; vector-effect: non-scaling-stroke; }
.region:hover { filter: brightness(1.23); }
.region.selected { stroke: #fff !important; stroke-width: 2.2 !important; filter: brightness(1.16) drop-shadow(0 0 8px rgba(73,214,197,.55)); }
.landform { fill: url(#mountainFill); stroke: rgba(255,219,152,.33); stroke-width: .55; vector-effect: non-scaling-stroke; filter: url(#terrainDepth); pointer-events: visiblePainted; }
.physical-lake { fill: #43bce5; fill-opacity: .88; stroke: #a7edff; stroke-width: .45; vector-effect: non-scaling-stroke; pointer-events: visiblePainted; }
.physical-river { fill: none; stroke: #65d9ff; stroke-width: 1.15; stroke-opacity: .82; vector-effect: non-scaling-stroke; pointer-events: stroke; }
.physical-river.rank-0, .physical-river.rank-1 { stroke-width: 1.75; }
.physical-river.rank-2, .physical-river.rank-3 { stroke-width: 1.35; }
.physical-river.rank-5, .physical-river.rank-6 { stroke-width: .7; stroke-opacity: .56; }
.local-line { fill: none; vector-effect: non-scaling-stroke; pointer-events: stroke; }
.local-line.range { stroke: #ffd27b; stroke-width: 2.4; stroke-dasharray: 5 3; filter: drop-shadow(0 2px 2px #24160c); }
.local-line.river { stroke: #7ce2ff; stroke-width: 1.6; filter: drop-shadow(0 1px 2px #073149); }
.physical-point { cursor: help; }
.peak-symbol { fill: #fff1c6; stroke: #7c4b28; stroke-width: 1.2; }
.physical-point.lake .peak-symbol, .physical-point.peak .lake-symbol { display: none; }
.lake-symbol { fill: #55d7ff; stroke: #e2faff; stroke-width: 1.2; }
.physical-label { fill: #fff1ce; font: 700 9px "DM Sans", sans-serif; paint-order: stroke; stroke: #07131f; stroke-width: 3px; pointer-events: none; }
.physical-name { fill: #ffe8ac; font-family: "DM Sans", sans-serif; font-weight: 700; text-anchor: middle; letter-spacing: .025em; paint-order: stroke; stroke: rgba(5,18,29,.94); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.physical-name.water-name { fill: #9feaff; font-style: italic; font-weight: 600; }
.river-name { dominant-baseline: central; }
.place { cursor: help; }
.place-halo { fill: rgba(5,19,30,.65); stroke: rgba(255,255,255,.4); stroke-width: .8; vector-effect: non-scaling-stroke; }
.place-dot { fill: #fff; stroke: #123044; stroke-width: .7; vector-effect: non-scaling-stroke; }
.place.capital .place-dot { fill: #ffd15d; }
.place.city .place-dot { fill: #73e5d6; }
.place-label { fill: #f4f9fa; font-family: "DM Sans", sans-serif; font-weight: 700; paint-order: stroke; stroke: #06131e; stroke-width: 3px; pointer-events: none; }
.map-label { fill: rgba(242,248,250,.92); font: 600 11px "DM Sans", sans-serif; text-anchor: middle; paint-order: stroke; stroke: rgba(4,16,25,.85); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.measure-shape { fill: none; stroke: #fff2a8; stroke-width: 2.2; stroke-dasharray: 7 4; vector-effect: non-scaling-stroke; filter: drop-shadow(0 2px 4px #04111a); pointer-events: none; }
.measure-shape.area { fill: rgba(73,214,197,.18); stroke: #64f1df; }
.measure-point { fill: #fff8cf; stroke: #0b3f4b; vector-effect: non-scaling-stroke; pointer-events: none; }
.measure-label { fill: #fffbe4; font-family: "DM Sans", sans-serif; font-weight: 800; paint-order: stroke; stroke: #06131e; pointer-events: none; }
#svgMapTitle { fill: #f5fbfd; font: 800 28px Manrope, sans-serif; letter-spacing: -.03em; }
#svgMapSubtitle { fill: #9bb1bc; font: 500 13px "DM Sans", sans-serif; }
.map-credit { fill: #607a88; font: 500 9px "DM Sans", sans-serif; }
.legend-title { fill: #8fa8b5; font: 600 10px "DM Sans", sans-serif; }
.legend-value { fill: #bdcbd2; font: 500 9px "DM Sans", sans-serif; }
.tooltip { position: fixed; z-index: 70; pointer-events: none; background: rgba(5,17,27,.96); color: var(--ink); border: 1px solid var(--line-strong); padding: 10px 12px; border-radius: 10px; box-shadow: var(--shadow); min-width: 145px; opacity: 0; transform: translateY(5px); transition: opacity .12s, transform .12s; }
.tooltip.show { opacity: 1; transform: none; }
.tooltip strong { display: block; font-size: 13px; margin-bottom: 3px; }
.tooltip span { color: var(--aqua); font: 700 18px Manrope, sans-serif; }
.tooltip small { display: block; color: var(--aqua); font-size: 11px; line-height: 1.35; }
.active-layers { position: absolute; right: 18px; top: 18px; z-index: 6; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; max-width: 52%; pointer-events: none; }
.active-layers span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid rgba(159,210,220,.2); border-radius: 99px; background: rgba(5,20,31,.78); backdrop-filter: blur(8px); color: #cfe1e7; font-size: 10px; box-shadow: 0 5px 16px rgba(0,0,0,.2); }
.active-layers svg { width: 12px; height: 12px; color: var(--aqua); }
.measurement-panel { position: absolute; left: 18px; bottom: 18px; z-index: 8; width: min(270px, calc(100% - 36px)); padding: 13px 14px; border: 1px solid rgba(100,241,223,.3); border-radius: 13px; background: rgba(5,20,31,.9); backdrop-filter: blur(12px); box-shadow: 0 15px 38px rgba(0,0,0,.32); }
.measurement-panel[hidden] { display: none; }
.measurement-panel strong { display: block; font: 750 14px Manrope, sans-serif; }
.measurement-panel p { margin: 5px 0 9px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.measurement-panel dl { margin: 0; display: grid; gap: 5px; }
.measurement-panel dl div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 6px; border-top: 1px solid var(--line); }
.measurement-panel dt { color: var(--muted); font-size: 11px; }
.measurement-panel dd { margin: 0; color: var(--aqua); font: 800 15px Manrope, sans-serif; }
.map-loading { position: absolute; z-index: 10; inset: 0; display: grid; place-content: center; justify-items: center; gap: 7px; background: #081725; transition: .35s; }
.map-loading.hidden { opacity: 0; pointer-events: none; }
.map-loading strong { font: 700 15px Manrope, sans-serif; }
.map-loading small { color: var(--muted); }
.spinner { width: 34px; height: 34px; border: 3px solid rgba(73,214,197,.18); border-top-color: var(--aqua); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.map-footer { min-height: 31px; display: flex; align-items: end; justify-content: space-between; color: var(--muted-2); font-size: 10px; }
.map-footer span { display: flex; align-items: center; gap: 5px; }
.map-footer svg { width: 13px; }
.mobile-toolbar { display: none; }

.data-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 14px 14px; }
.data-summary div { padding: 9px 7px; border: 1px solid var(--line); background: rgba(255,255,255,.025); border-radius: 9px; display: grid; gap: 2px; }
.data-summary span { color: var(--muted-2); font-size: 9px; }
.data-summary strong { color: var(--aqua); font: 700 15px Manrope, sans-serif; }
.data-actions { display: flex; gap: 7px; padding: 0 14px 12px; }
.search-box { flex: 1; position: relative; }
.search-box svg { position: absolute; width: 15px; left: 9px; top: 11px; color: var(--muted-2); }
.search-box input { height: 37px; padding-left: 30px; font-size: 12px; }
.data-head { display: grid; grid-template-columns: 1fr 62px; padding: 8px 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted-2); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.data-head span:last-child { text-align: right; }
.region-list { overflow-y: auto; min-height: 0; flex: 1; }
.region-row { display: grid; grid-template-columns: 12px minmax(0,1fr) 60px; gap: 7px; align-items: center; padding: 7px 14px; border-bottom: 1px solid rgba(157,190,205,.065); cursor: pointer; }
.region-row:hover, .region-row.active { background: rgba(73,214,197,.055); }
.region-row.active { box-shadow: inset 2px 0 var(--aqua); }
.color-dot { width: 8px; height: 8px; border-radius: 3px; }
.region-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: #c8d6dc; }
.region-row input { width: 60px; height: 29px; color: var(--ink); text-align: right; border: 1px solid transparent; background: rgba(0,0,0,.12); border-radius: 6px; padding: 0 6px; font-size: 11px; }
.region-row input[type="number"], .selected-card input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.region-row input[type="number"]::-webkit-inner-spin-button, .region-row input[type="number"]::-webkit-outer-spin-button,
.selected-card input[type="number"]::-webkit-inner-spin-button, .selected-card input[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }
.region-row input:focus { border-color: var(--aqua); outline: none; }
.selected-card { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 15px; background: #102533; border: 1px solid rgba(73,214,197,.3); border-radius: 13px; box-shadow: var(--shadow); }
.selected-card .icon-btn { position: absolute; top: 7px; right: 7px; width: 30px; height: 30px; min-height: 30px; }
.selected-card h3 { font-size: 17px; padding-right: 25px; }
.toast-stack { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 100; display: grid; gap: 7px; }
.toast { min-width: 260px; display: flex; align-items: center; gap: 9px; padding: 11px 14px; background: #102533; border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: var(--shadow); font-size: 12px; animation: toastIn .25s ease; }
.toast svg { width: 16px; color: var(--aqua); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }
.backdrop { position: fixed; inset: 66px 0 0; z-index: 15; background: rgba(0,5,10,.65); backdrop-filter: blur(3px); }

@media (max-width: 1120px) {
  .workspace { grid-template-columns: 260px minmax(380px,1fr); }
  .right-panel { position: fixed; right: 0; top: 66px; bottom: 0; width: 290px; transform: translateX(100%); transition: .25s ease; box-shadow: var(--shadow); }
  .right-panel.visible { transform: none; }
  #openRightPanel { display: inline-flex; }
  .mobile-toolbar { display: flex; justify-content: flex-end; min-height: 40px; }
  .mobile-toolbar #openLeftPanel { display: none; }
  .mobile-close { display: inline-flex !important; }
}

@media (max-width: 760px) {
  body { overflow: hidden; }
  .topbar { height: 60px; padding: 0 11px; }
  .workspace { height: calc(100vh - 60px); display: block; }
  .brand { font-size: 16px; }
  .brand-mark { width: 32px; height: 32px; }
  .version, .top-actions .ghost { display: none; }
  .btn.primary span { display: none; }
  .btn.primary { width: 40px; padding: 0; }
  .sidebar { position: fixed; top: 60px; bottom: 0; width: min(310px, 88vw); box-shadow: var(--shadow); transition: .25s ease; }
  .left-panel { left: 0; transform: translateX(-100%); }
  .right-panel { top: 60px; right: 0; transform: translateX(100%); }
  .left-panel.visible, .right-panel.visible { transform: none; }
  .canvas-stage { height: 100%; padding: 7px; }
  .mobile-toolbar { justify-content: space-between; min-height: 41px; }
  .mobile-toolbar #openLeftPanel { display: inline-flex; }
  .canvas-toolbar { min-height: 40px; }
  .canvas-toolbar .tool-btn { width: 30px; height: 30px; min-height: 30px; }
  .canvas-toolbar .tool-group { gap: 2px; padding-right: 5px; }
  .canvas-status { display: none; }
  .map-board { border-radius: 14px; }
  .map-footer { padding: 0 4px; }
  .map-footer span:first-child { display: none; }
  .backdrop { inset: 60px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}