:root{--ink:#16202b;--muted:#7a8694;--bg:#f7f8fa;--card:#fff;--ok:#2a7d4f;--bad:#b23a3a;--warn:#b07a1a;--line:#e3e7ec;--accent:#2b5fa8;--narrow:rgba(214,138,28,.28);--boulder:rgba(120,120,120,.22)}
@media (prefers-color-scheme:dark){:root{--ink:#e8ecf1;--muted:#9aa6b2;--bg:#101418;--card:#181d23;--ok:#5fbf8a;--bad:#e07a7a;--warn:#e0b25a;--line:#2a323b;--accent:#7aa7e8}}
*{box-sizing:border-box}
body{font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;margin:0;color:var(--ink);background:var(--bg)}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
code{background:var(--line);padding:1px 5px;border-radius:3px;font-size:.9em}
.muted{color:var(--muted)}.small{font-size:13px}.ok{color:var(--ok)}.bad{color:var(--bad)}.warn{color:var(--warn)}
header.top{display:flex;align-items:center;gap:1.5rem;padding:.6rem 1.25rem;border-bottom:1px solid var(--line);background:var(--card)}
header .brand{font-weight:650;font-size:1.15rem;color:var(--ink)}
header nav{display:flex;gap:1rem}header nav a.on{font-weight:600;color:var(--ink)}
header .who{margin-left:auto;font-size:13px;color:var(--muted)}
main{max-width:70rem;margin:1.25rem auto;padding:0 1rem}
footer{max-width:70rem;margin:2rem auto;padding:0 1rem;font-size:12px}
h1{font-weight:620;letter-spacing:-.01em;font-size:1.5rem;margin:.2rem 0 .6rem}h2{font-size:1.1rem;font-weight:620;margin:1.2rem 0 .5rem}h3{font-size:1rem;margin:.8rem 0 .3rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:1rem 1.25rem;margin:.8rem 0}
.row{display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-start}.row>*{flex:1 1 18rem}
.actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:.5rem 0}
button{font:inherit;padding:.4rem .9rem;border-radius:7px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff}button:disabled{opacity:.5;cursor:default}
button.danger{color:var(--bad)}
input,select,textarea{font:inherit;padding:.35rem .5rem;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);width:100%}
textarea{min-height:4.5rem}
label{display:block;font-size:12px;color:var(--muted);margin:.5rem 0 .15rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.2rem .9rem}
.grid .wide{grid-column:1/-1}
.card{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px}th,td{padding:.35rem .5rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
td.id,th.id{width:1%;white-space:nowrap}td.nowrap{white-space:nowrap}
@media (max-width:720px){
  body{font-size:14px}main{padding:0 .6rem;margin:.6rem auto}.card{padding:.7rem .8rem}
  header.top{gap:.8rem;padding:.5rem .8rem;flex-wrap:wrap}header nav{gap:.7rem}header .who{flex-basis:100%;margin-left:0}
  table{font-size:13px}th,td{padding:.3rem .35rem}.opt{display:none}
  .kpis{gap:.8rem}.kpi{min-width:5.5rem}.kpi b{font-size:1.15rem}
  h1{font-size:1.25rem}
}
@media (max-width:1024px){
  /* phones in either orientation (≤ 932 CSS px): the hikes list becomes stacked cards — id · date / name / badges /
     numbers with their labels — instead of an 11-column table; iPads and desktops keep the table */
  table.hikes thead{display:none}table.hikes,table.hikes tbody{display:block}
  table.hikes tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .6rem;padding:.55rem 0;border-bottom:1px solid var(--line)}
  table.hikes td{display:inline;border:0;padding:0;width:auto}
  table.hikes td.id{order:1}table.hikes td.nowrap:nth-child(2){order:2;color:var(--muted)}
  table.hikes td:nth-child(3){order:3;flex-basis:100%;font-size:14px}table.hikes td:nth-child(4){order:4}
  table.hikes td.num{order:5;font-size:12px;color:var(--muted);text-align:left}table.hikes td.num::before{content:attr(data-l) " ";}
  table.hikes td.num.opt{display:inline}table.hikes td.num{font-variant-numeric:tabular-nums}table.hikes td.num:empty{display:none}
  table.hikes code{font-size:.85em;padding:0 3px}
}
th{font-weight:600;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.03em}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tr.click{cursor:pointer}tr.click:hover td{background:rgba(127,127,127,.06)}
.tabs{display:flex;gap:.25rem;border-bottom:1px solid var(--line);margin:1rem 0 .8rem}
.tabs a{padding:.4rem .8rem;border:1px solid transparent;border-bottom:none;border-radius:7px 7px 0 0;color:var(--muted)}
.tabs a.on{color:var(--ink);background:var(--card);border-color:var(--line);font-weight:600}
.drop{border:2px dashed var(--line);border-radius:10px;padding:.8rem 1rem;text-align:center;color:var(--muted);transition:.15s}
.drop.over{border-color:var(--accent);color:var(--ink)}.drop.has{border-style:solid}
.badge{display:inline-block;font-size:11px;padding:1px 7px;border-radius:9px;background:var(--line);color:var(--muted);margin-right:.25rem}
.badge.ok{background:rgba(42,125,79,.15);color:var(--ok)}.badge.warn{background:rgba(176,122,26,.15);color:var(--warn)}
.kpis{display:flex;gap:1.2rem;flex-wrap:wrap;margin:.5rem 0}.kpi{min-width:7rem}.kpi b{display:block;font-size:1.35rem;font-weight:620;font-variant-numeric:tabular-nums}.kpi span{font-size:12px;color:var(--muted)}
svg.profile{width:100%;height:auto;display:block}
.msg{padding:.5rem .8rem;border-radius:7px;margin:.5rem 0;font-size:14px}.msg.bad{background:rgba(178,58,58,.1);color:var(--bad)}.msg.ok{background:rgba(42,125,79,.1);color:var(--ok)}.msg.warn{background:rgba(176,122,26,.12);color:var(--warn)}
ul.plain{padding-left:1.1rem;margin:.3rem 0}
.toast{position:fixed;right:1rem;bottom:1rem;background:var(--ink);color:var(--bg);padding:.6rem 1rem;border-radius:8px;font-size:14px;opacity:.95;z-index:9}
.inbox-card{display:grid;grid-template-columns:1fr 20rem;gap:1rem}.inbox-card .map{height:220px;border-radius:8px;border:1px solid var(--line);background:var(--line)}
@media (max-width:720px){.inbox-card{grid-template-columns:1fr}}
.inbox-card h3{margin:.1rem 0 .3rem}.inbox-card .facts{display:flex;gap:1rem;flex-wrap:wrap;font-size:13px;color:var(--muted)}.inbox-card .facts b{color:var(--ink);font-weight:600}
.inbox-card .attach{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-top:.6rem}.inbox-card .attach select{width:auto;max-width:22rem}
.leaflet-container{font:inherit}
h1 code.hid{font-size:.8em;font-weight:500;margin-right:.3rem}
a.btn{display:inline-block;padding:.4rem .9rem;border-radius:7px;border:1px solid var(--line);background:var(--card);color:var(--ink);text-decoration:none}a.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}a.btn:hover{text-decoration:none;filter:brightness(1.05)}