html,body{height:100%;margin:0}
.app{display:grid; grid-template-columns:320px 1fr; height:100%}
.sidebar{display:flex; flex-direction:column; background:#fff; border-right:1px solid #EFDBD7; font:14px system-ui,-apple-system,Segoe UI,Roboto;}
.sidebar-body{overflow:auto; padding-block:12px; padding-inline:16px;}
.sidebar-footer{margin-top:auto; border-top:1px solid #EFDBD7; padding-block:12px; padding-inline:16px;}
.group{margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid #EFDBD7}
.group h3{margin:6px 0 8px; font-size:14px}
.toggle{display:flex; align-items:center; gap:0; margin:4px 0}
.small{font-size:12px; color:#555}
code{background:#f6f6f6; border:1px solid #eee; padding:0 4px; border-radius:4px}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.chip{padding:4px 8px; border:1px solid #ddd; border-radius:999px; cursor:pointer; background:#fff}
.chip.active{background: var(--accent-soft); border-color: var(--accent)}
.btn{display:inline-block; padding:6px 10px; border-radius:8px; border:1px solid #ddd; cursor:pointer; background:#fff}
.btn{ transition: box-shadow .15s ease, transform .05s ease; }
.btn:hover{ box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.btn:active{ transform: translateY(1px); }
.btn:focus{ outline: none; }
.btn:focus-visible{ box-shadow: 0 0 0 3px var(--focus-ring); }
.map-wrap{position:relative;}
#map{position:absolute; inset:0;}
.lang-row{display:flex; gap:14px; margin-top:8px}
.lang-row label{display:flex; gap:6px; align-items:center; cursor:pointer}
:root{ --accent:#B54633; --accent-soft:rgba(181,70,51,.10); --focus-ring:rgba(181,70,51,.35); }
.sidebar input[type="checkbox"], .sidebar input[type="radio"]{ position:absolute; opacity:0; pointer-events:none; width:0; height:0; }
.toggle span{ display:block; padding:6px 2px; padding-inline-start:8px; font-size:14px; font-weight:500; color:#2f2624; opacity:1; transform:translateY(0) scale(1);
  transition: transform .22s ease, font-size .22s ease, color .22s ease, opacity .22s ease; }
.toggle:has(input:checked) span{ color:var(--accent); font-weight:700; font-size:16px; opacity:1; transform:translateY(0) scale(1.08); }
.group:has(.toggle:has(input:checked)) .toggle:not(:has(input:checked)) span{ color:#2f2624; opacity:.68; font-size:13.5px; transform:translateY(0) scale(.95); }
.group .toggle:has(~ .toggle input:checked):not(:has(input:checked)) span{ transform:translateY(-4px) scale(.95); }
.group .toggle:has(input:checked) ~ .toggle span{ transform:translateY(6px) scale(.95); }
.toggle:hover span{ opacity:.9 }
.toggle { cursor: pointer; }
.toggle span:focus, .toggle span:focus-visible{ outline:none }
.lang-row label{ border:none; background:transparent; padding:4px 2px; font-weight:500; color:#2f2624; opacity:1; transform:translateX(0) scale(1);
  transition: transform .22s ease, font-size .22s ease, color .22s ease, opacity .22s ease; }
.lang-row:has(input:checked) label{ opacity:.68; transform:translateX(-6px) scale(.95); }
.lang-row label:has(input:checked){ color:var(--accent); font-weight:700; font-size:16px; opacity:1; transform:translateX(0) scale(1.08); }
.lang-row label:has(input:checked) ~ label{ transform:translateX(8px) scale(.95); }
.lang-row label:focus, .lang-row label:focus-visible{ outline:none }