:root{
  --bg:#e9edf0; --panel:#f8fafb; --ink:#1c2630; --muted:#5d6b78; --line:#cfd6dc;
  --paper:#ffffff; --focus:#1f5f99; --danger:#b3263b; --okc:#2c7a4b;
  box-sizing:border-box;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#151b21;--panel:#1e262e;--ink:#e6ebef;--muted:#9aa7b2;--line:#34404b;--paper:#f4f6f7;--focus:#7fb4e6;--danger:#ff8a98;--okc:#7fd3a2;color-scheme:dark}
}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:15px;line-height:1.45;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
a{color:var(--focus)}
h1{font-size:1.35rem;line-height:1.2;margin:0 0 12px;font-weight:700;letter-spacing:-.01em}
.muted{color:var(--muted)} .small{font-size:.85rem}
.error{color:var(--danger)} .ok{color:var(--okc)}

/* Paigutus: legend vasakul, kaart paremal */
.layout{max-width:1220px;margin:0 auto;padding:20px 16px 32px;display:grid;grid-template-columns:320px minmax(0,1fr);gap:20px;align-items:start}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:16px;position:sticky;top:16px}
.mapcard{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:8px;position:relative}
.map{position:relative}
.rae-map{display:block;width:100%;height:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.rae-map .outlines path{fill:none;stroke:#b2b2b2;stroke-width:4;stroke-linejoin:round}
.rae-map .places text{font:41px Tahoma,Verdana,"DejaVu Sans",sans-serif;fill:#333;text-anchor:middle;pointer-events:none}
.rae-map .regions path{fill:#e1e1e1;stroke:#9a9a9a;stroke-width:3;stroke-linejoin:round;transition:fill .12s}
.rae-map.clickable .regions path{cursor:pointer}
.rae-map .regions path.hover{stroke:#1c2630;stroke-width:7}
.rae-map .regions path:focus{outline:none}
.rae-map .regions path:focus-visible{stroke:#1f5f99;stroke-width:9}
.rae-map .labels text{font-family:Tahoma,Verdana,"DejaVu Sans",sans-serif;fill:#111;text-anchor:middle;pointer-events:none;paint-order:stroke;stroke:rgba(255,255,255,.8);stroke-width:8;stroke-linejoin:round}
.rae-map .labels .name{font-size:33px;font-weight:700}
.rae-map .labels .area{font-size:33px}
@media (prefers-reduced-motion:reduce){.rae-map .regions path{transition:none}}
.status{min-height:1.5em;margin:10px 0 0;color:var(--muted)}
.tip{position:absolute;pointer-events:none;background:#1c2630;color:#fff;font-size:.82rem;font-weight:600;padding:4px 8px;border-radius:4px;white-space:nowrap;transform:translate(-50%,-130%);opacity:0;transition:opacity .1s}

/* Legend */
.legend{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:6px}
.item{display:flex;align-items:center;gap:10px;padding:8px 10px;border:2px solid transparent;border-radius:6px;cursor:pointer}
.item:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.item.on{border-color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent)}
.item.dim{opacity:.45}
.item.inactive .sw{opacity:.45}
.sw{position:relative;width:32px;height:32px;border-radius:5px;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.sw input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.sw.erase{background:repeating-linear-gradient(45deg,#fff 0 5px,#d4d9de 5px 10px)}
.meta{flex:1;min-width:0;display:flex;flex-direction:column}
.lbl{font-weight:600}
.count{font-size:.8rem;color:var(--muted)}
.meta .name{font:inherit;font-weight:600;color:var(--ink);background:transparent;border:1px solid transparent;border-radius:4px;padding:1px 4px;margin-left:-5px;width:100%}
.meta .name:hover{border-color:var(--line)}
.meta .name:focus{outline:none;border-color:var(--focus);background:var(--paper);color:#1c2630}
.chk{font-size:.78rem;color:var(--muted);display:flex;align-items:center;gap:4px;white-space:nowrap;cursor:pointer}
.del{border:0;background:transparent;color:var(--muted);padding:4px 6px;font-size:.9rem}
.del:hover{color:var(--danger)}

/* Nupud, vormid */
button{font:inherit;font-size:.9rem;font-weight:500;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:5px;padding:7px 12px;cursor:pointer}
button:hover{border-color:var(--muted)}
button.primary{background:var(--focus);border-color:var(--focus);color:#fff;width:100%;padding:10px}
.actions{display:flex;gap:8px;flex-wrap:wrap}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

.bar{display:flex;align-items:center;gap:14px;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
.bar form{margin:0} .bar .grow{flex:1}

body.center{min-height:100vh;display:grid;place-items:center;padding:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:24px}
.login{width:100%;max-width:360px;display:flex;flex-direction:column;gap:12px}
.login label{display:flex;flex-direction:column;gap:4px;font-weight:500;font-size:.9rem}
.login input{font:inherit;padding:9px 10px;border:1px solid var(--line);border-radius:5px;background:var(--paper);color:#1c2630}

@media (max-width:860px){
  .layout{grid-template-columns:1fr;padding-top:14px}
  .panel{position:static}
  .tip{display:none}
  body:not(.admin) .legend{flex-direction:row;flex-wrap:wrap}
  body:not(.admin) .legend .item{flex:1 1 calc(50% - 6px);padding:6px 8px}
}
@media (prefers-reduced-motion:reduce){.tip{transition:none}}