:root{
  --bg:#EDEFE8; --surface:#FBFBF7; --surface2:#E3E7DA; --ink:#16241D; --soft:#4E5F55;
  --line:#CBD3C1; --brand:#1E5C43; --brandsoft:#D7E3D3; --onbrand:#F7FBF6;
  --amber:#C77A16; --water:#356F8A; --danger:#A33A2A;
  --r:14px; --shadow:0 1px 2px rgba(22,36,29,.06), 0 8px 24px rgba(22,36,29,.07);
  --display:"Fraunces",Georgia,serif; --body:"Karla",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0E1613; --surface:#16211C; --surface2:#1E2C25; --ink:#E7EEE7; --soft:#9FB0A6;
    --line:#2A3A31; --brand:#6FBF95; --brandsoft:#1B3329; --onbrand:#0E1613;
    --amber:#E5AE55; --water:#6FAECB; --danger:#E08475;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  }
}
html[data-theme="light"]{
  --bg:#EDEFE8; --surface:#FBFBF7; --surface2:#E3E7DA; --ink:#16241D; --soft:#4E5F55;
  --line:#CBD3C1; --brand:#1E5C43; --brandsoft:#D7E3D3; --onbrand:#F7FBF6;
  --amber:#C77A16; --water:#356F8A; --danger:#A33A2A;
  --shadow:0 1px 2px rgba(22,36,29,.06), 0 8px 24px rgba(22,36,29,.07);
}
html[data-theme="dark"]{
  --bg:#0E1613; --surface:#16211C; --surface2:#1E2C25; --ink:#E7EEE7; --soft:#9FB0A6;
  --line:#2A3A31; --brand:#6FBF95; --brandsoft:#1B3329; --onbrand:#0E1613;
  --amber:#E5AE55; --water:#6FAECB; --danger:#E08475;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--body);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--display); font-weight:600; letter-spacing:-.01em; margin:0}
h1{font-size:1.5rem} h2{font-size:1.25rem} h3{font-size:1.05rem}
a{color:var(--brand)}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2.5px solid var(--water); outline-offset:2px; border-radius:6px}
.eyebrow{font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--soft)}

/* shell */
.app{display:none; min-height:100dvh}
.app.on{display:grid; grid-template-columns:236px 1fr}
.side{border-right:1px solid var(--line); background:var(--surface); padding:18px 14px; display:flex; flex-direction:column; gap:6px; position:sticky; top:0; height:100dvh}
.brand{display:flex; align-items:center; gap:10px; padding:4px 8px 16px}
.brand .mark{width:30px;height:30px;flex:none}
.brand b{font-family:var(--display); font-size:1.22rem; letter-spacing:-.02em}
.nav{display:flex; flex-direction:column; gap:2px}
.nav button{display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:0; padding:9px 10px; border-radius:10px; cursor:pointer; color:var(--soft); font-weight:600}
.nav button:hover{background:var(--surface2); color:var(--ink)}
.nav button.on{background:var(--brandsoft); color:var(--brand)}
.nav svg{width:18px;height:18px;flex:none}
.sidefoot{margin-top:auto; display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--line); padding-top:12px}
.who{font-size:.8rem; color:var(--soft); padding:0 8px; overflow:hidden; text-overflow:ellipsis}
.main{min-width:0; display:flex; flex-direction:column}
.topbar{display:flex; align-items:center; gap:10px; padding:14px 20px; border-bottom:1px solid var(--line); background:var(--surface); position:sticky; top:0; z-index:500}
.topbar .grow{flex:1; min-width:0}
.view{padding:20px; max-width:1180px; width:100%}
.bottomnav{display:none}

/* controls */
.btn{border:1px solid var(--line); background:var(--surface); border-radius:10px; padding:8px 13px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:7px}
.btn:hover{border-color:var(--brand)}
.btn.pri{background:var(--brand); color:var(--onbrand); border-color:var(--brand)}
.btn.pri:hover{filter:brightness(1.08)}
.btn.ghost{background:none}
.btn.danger{color:var(--danger); border-color:var(--danger)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn.sm{padding:5px 9px; font-size:.82rem}
.field{display:flex; flex-direction:column; gap:5px; margin-bottom:14px}
.field > label{font-size:.82rem; font-weight:700; color:var(--soft)}
.field .hint{font-size:.76rem; color:var(--soft)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],input[type=tel],input[type=date],select,textarea{
  width:100%; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:9px 11px;
}
textarea{min-height:84px; resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--brand)}
input[type=password]{letter-spacing:.08em}
.row{display:flex; gap:10px; flex-wrap:wrap}
.row > *{flex:1; min-width:150px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px}
.chip{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:999px; padding:3px 10px; font-size:.78rem; background:var(--surface); white-space:nowrap}
.chip.on{background:var(--brandsoft); border-color:var(--brand); color:var(--brand); font-weight:700}
.chip.warn{border-color:var(--amber); color:var(--amber)}
.muted{color:var(--soft)}
.small{font-size:.82rem}

/* pips = score display */
.pips{display:inline-flex; gap:3px; vertical-align:middle}
.pips i{width:9px; height:15px; border-radius:2px 2px 4px 4px; background:var(--line); display:block}
.pips i.f{background:var(--brand)}
.pips.san i.f{background:var(--water)}

/* signature: pitch stamp */
.stamp{
  width:66px;height:66px;flex:none;border-radius:50%; display:grid; place-items:center; text-align:center;
  border:2px solid var(--brand); box-shadow:inset 0 0 0 3px var(--surface), inset 0 0 0 4.5px var(--brand);
  color:var(--brand); transform:rotate(-7deg); background:var(--surface);
}
.stamp span{font-family:var(--mono); font-size:1.15rem; font-weight:700; line-height:1}
.stamp small{display:block; font-size:.5rem; letter-spacing:.1em; text-transform:uppercase; margin-top:2px}
.stamp.none{border-color:var(--line); color:var(--soft); box-shadow:inset 0 0 0 3px var(--surface), inset 0 0 0 4.5px var(--line)}

/* list */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:14px}
.item{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px; cursor:pointer; display:flex; gap:14px; text-align:left; width:100%; font:inherit; color:inherit}
.item:hover{border-color:var(--brand); box-shadow:var(--shadow)}
.item .body{flex:1; min-width:0}
.item h3{margin-bottom:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.metaline{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:9px}
.thumbstrip{display:flex; gap:6px; margin-top:10px}
.thumbstrip img{width:52px;height:40px;object-fit:cover;border-radius:7px;border:1px solid var(--line)}

/* map */
#map{height:100%; width:100%; background:var(--surface2)}
.mapwrap{position:relative; flex:1; min-height:420px}
.leaflet-container{font-family:var(--body)}
.cluster{display:grid; place-items:center; border-radius:50%; background:var(--brand); color:var(--onbrand);
  border:2px solid var(--surface); box-shadow:0 2px 8px rgba(0,0,0,.32); font-family:var(--mono); font-weight:700;
  outline:3px solid color-mix(in srgb, var(--brand) 26%, transparent)}
.cluster.s{width:34px;height:34px;font-size:.8rem}
.cluster.m{width:40px;height:40px;font-size:.88rem}
.cluster.l{width:48px;height:48px;font-size:.95rem}
.pin{display:grid; place-items:center; width:32px;height:32px; border-radius:50% 50% 50% 8px; transform:rotate(45deg);
  background:var(--brand); border:2px solid var(--surface); box-shadow:0 2px 6px rgba(0,0,0,.3)}
.pin svg{transform:rotate(-45deg); width:17px; height:17px; color:var(--onbrand)}

/* auth */
.auth{min-height:100dvh; display:grid; place-items:center; padding:24px}
.authcard{width:100%; max-width:430px; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:26px; box-shadow:var(--shadow)}

/* table */
table{width:100%; border-collapse:collapse; font-size:.88rem}
th{text-align:left; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--soft); padding:8px; border-bottom:1px solid var(--line)}
td{padding:8px; border-bottom:1px solid var(--line); vertical-align:middle}

/* sheet / detail */
.sheet{position:fixed; inset:0; z-index:1200; background:rgba(8,14,11,.5); display:none; align-items:flex-start; justify-content:center; padding:24px; overflow:auto}
.sheet.on{display:flex}
.sheetcard{background:var(--bg); border:1px solid var(--line); border-radius:18px; width:100%; max-width:720px; overflow:hidden; box-shadow:var(--shadow)}
.sheethead{display:flex; gap:12px; align-items:flex-start; padding:18px; border-bottom:1px solid var(--line); background:var(--surface)}
.sheetbody{padding:18px; display:flex; flex-direction:column; gap:16px}
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px}
.gallery img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; border:1px solid var(--line)}
.kv{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:.9rem}
.kv dt{color:var(--soft)}
.kv dd{margin:0}
.lead{margin:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:16px; font-size:1.02rem; line-height:1.6}

.viewtoggle{display:inline-flex;gap:0}
.viewtoggle .chip:first-child{border-radius:999px 0 0 999px}
.viewtoggle .chip:last-child{border-radius:0 999px 999px 0;margin-left:-1px}
tbody tr:hover td{background:var(--surface2)}
td .pips i{height:12px;width:7px}
.toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(90px); background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:999px; z-index:2000; transition:transform .25s; font-size:.88rem; max-width:90vw}
.toast.on{transform:translateX(-50%) translateY(0)}
.hide{display:none !important}
.badge{font-family:var(--mono); font-size:.7rem; background:var(--surface2); border-radius:6px; padding:2px 6px}

@media (max-width:860px){
  .app.on{grid-template-columns:1fr}
  .side{display:none}
  .view{padding:14px 14px 92px}
  .topbar{padding:11px 14px}
  .bottomnav{display:grid; grid-template-columns:repeat(5,1fr); position:fixed; bottom:0; left:0; right:0; z-index:900;
    background:var(--surface); border-top:1px solid var(--line); padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .bottomnav button{background:none; border:0; display:flex; flex-direction:column; align-items:center; gap:3px; padding:5px 0; font-size:.66rem; color:var(--soft); font-weight:700; cursor:pointer}
  .bottomnav button.on{color:var(--brand)}
  .bottomnav svg{width:20px;height:20px}
  .sheet{padding:0}
  .sheetcard{border-radius:0; min-height:100dvh; max-width:none}
  .mapwrap{min-height:calc(100dvh - 150px)}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}