:root{
--bg:#fafaf8;
--surface:#ffffff;
--surface-2:#f4f4f1;
--text:#1c1917;
--muted:#78716c;
--border:#e7e5e4;
--accent:#c2410c;
--accent-soft:#fff1ea;
--ok:#15803d;
--ok-soft:#e9f6ed;
--warn:#b45309;
--warn-soft:#fdf3e3;
--shadow:0 1px 2px rgba(28,25,23,.06),0 4px 16px rgba(28,25,23,.05);
--radius:14px;
--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang TC",
"Noto Sans TC","Microsoft JhengHei",sans-serif;
}
/* explicit dark theme */
:root[data-theme="dark"]{
--bg:#161412;
--surface:#211e1b;
--surface-2:#2a2623;
--text:#f5f3f0;
--muted:#a8a29e;
--border:#3a3531;
--accent:#fb923c;
--accent-soft:#3a2317;
--ok:#4ade80;
--ok-soft:#16301f;
--warn:#fbbf24;
--warn-soft:#33260f;
--shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.35);
}
/* system preference applies only when no explicit theme is chosen */
@media (prefers-color-scheme:dark){
:root:not([data-theme]),:root[data-theme="default"]{
--bg:#161412;
--surface:#211e1b;
--surface-2:#2a2623;
--text:#f5f3f0;
--muted:#a8a29e;
--border:#3a3531;
--accent:#fb923c;
--accent-soft:#3a2317;
--ok:#4ade80;
--ok-soft:#16301f;
--warn:#fbbf24;
--warn-soft:#33260f;
--shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.35);
}
}
/* AMOLED black theme (pure-black surfaces to save power) */
:root[data-theme="black"]{
--bg:#000000;
--surface:#0c0b0a;
--surface-2:#161412;
--text:#f5f3f0;
--muted:#9b9590;
--border:#262321;
--accent:#fb923c;
--accent-soft:#2a1a0f;
--ok:#4ade80;
--ok-soft:#0e1f15;
--warn:#fbbf24;
--warn-soft:#241a0a;
--shadow:0 1px 2px rgba(0,0,0,.5),0 4px 16px rgba(0,0,0,.6);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
font-family:var(--font);
background:var(--bg);
color:var(--text);
line-height:1.55;
font-size:15px;
display:flex;
flex-direction:column;
min-height:100vh;
}
header.app{
position:sticky;
top:0;
z-index:600;
background:var(--surface);
border-bottom:1px solid var(--border);
padding:14px 18px;
display:flex;
align-items:center;
gap:10px;
}
header.app h1{font-size:17px;font-weight:650;letter-spacing:.2px;}
header.app .net{
margin-left:auto;
font-size:12px;
color:var(--muted);
display:flex;
align-items:center;
gap:6px;
}
.dot{width:8px;height:8px;border-radius:50%;background:var(--muted);}
.dot.on{background:var(--ok);}
main{flex:1;width:100%;max-width:760px;margin:0 auto;padding:18px 16px 96px;}
section.view{display:none;animation:fade .25s ease;}
section.view.active{display:block;}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px;}
.bar .grow{flex:1;}
h2.title{font-size:15px;font-weight:600;color:var(--muted);letter-spacing:.4px;
text-transform:uppercase;margin-bottom:10px;}
button,.btn{
font-family:inherit;
font-size:14px;
border:1px solid var(--border);
background:var(--surface);
color:var(--text);
padding:9px 14px;
border-radius:10px;
cursor:pointer;
transition:.15s;
display:inline-flex;
align-items:center;
gap:6px;
}
button:hover,.btn:hover{border-color:var(--accent);}
button:active{transform:scale(.98);}
button.primary,.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent);}
button.primary:hover{filter:brightness(1.05);}
button.ghost{background:transparent;}
button.danger{color:#dc2626;border-color:#f0c5c0;}
button.sm{padding:6px 10px;font-size:13px;border-radius:8px;}
select,input,textarea{
font-family:inherit;
font-size:14px;
width:100%;
padding:10px 12px;
border:1px solid var(--border);
border-radius:10px;
background:var(--surface);
color:var(--text);
}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--accent);}
label.f{display:block;margin-bottom:12px;}
label.f span{display:block;font-size:12px;color:var(--muted);margin-bottom:5px;font-weight:600;}
.card{
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius);
padding:14px;
box-shadow:var(--shadow);
margin-bottom:12px;
}
.empty{
text-align:center;
color:var(--muted);
padding:48px 18px;
border:1px dashed var(--border);
border-radius:var(--radius);
font-size:14px;
}
.mlist{display:flex;flex-direction:column;gap:10px;}
.mrow{
background:var(--surface);
border:1px solid var(--border);
border-radius:12px;
padding:12px 14px;
display:flex;
align-items:center;
gap:12px;
box-shadow:var(--shadow);
}
.swatch{
width:34px;height:34px;border-radius:9px;flex:none;
border:1px solid rgba(0,0,0,.12);
display:flex;align-items:center;justify-content:center;
font-size:16px;
}
.mrow .info{flex:1;min-width:0;}
.mrow .info .nm{font-weight:600;font-size:14px;display:flex;gap:8px;align-items:center;
flex-wrap:wrap;}
.mrow .info .sub{font-size:12px;color:var(--muted);margin-top:2px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tag{font-size:11px;padding:2px 8px;border-radius:999px;background:var(--surface-2);
color:var(--muted);font-weight:600;}
.tag.unknown{background:var(--warn-soft);color:var(--warn);}
.tag.ready{background:var(--ok-soft);color:var(--ok);}
.tag.respawn{background:var(--warn-soft);color:var(--warn);font-variant-numeric:tabular-nums;}
.tag.count{background:var(--accent-soft);color:var(--accent);font-variant-numeric:tabular-nums;}
.mrow .acts{display:flex;gap:6px;flex:none;}
.iconbtn{padding:7px 9px;font-size:14px;border-radius:9px;}
#map{height:62vh;min-height:340px;border-radius:var(--radius);border:1px solid var(--border);
overflow:hidden;z-index:1;}
.map-msg{display:flex;align-items:center;justify-content:center;height:62vh;min-height:340px;
text-align:center;color:var(--muted);border:1px dashed var(--border);border-radius:var(--radius);
padding:24px;}
.loc{font-size:12px;color:var(--muted);margin-top:8px;font-variant-numeric:tabular-nums;}
.acc{border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:10px;
background:var(--surface);box-shadow:var(--shadow);}
.acc h3{font-size:14.5px;font-weight:600;padding:14px 16px;cursor:pointer;display:flex;
align-items:center;gap:10px;}
.acc h3 .chev{margin-left:auto;color:var(--muted);transition:.2s;font-size:13px;}
.acc.open h3 .chev{transform:rotate(90deg);}
.acc .body{display:none;padding:0 16px 16px;font-size:14px;color:var(--text);}
.acc.open .body{display:block;}
.acc .body p{margin-bottom:9px;}
.acc .body ul{margin:0 0 9px 18px;}
.acc .body li{margin-bottom:4px;}
.acc .body table{width:100%;border-collapse:collapse;font-size:12.5px;margin:6px 0 10px;}
.acc .body th,.acc .body td{border:1px solid var(--border);padding:5px 7px;text-align:right;}
.acc .body th:first-child,.acc .body td:first-child{text-align:left;}
.acc .body th{background:var(--surface-2);font-weight:600;}
.modal-bg{position:fixed;inset:0;background:rgba(20,16,12,.45);z-index:800;display:none;
align-items:flex-end;justify-content:center;}
.modal-bg.open{display:flex;}
.modal{background:var(--surface);width:100%;max-width:520px;border-radius:18px 18px 0 0;
padding:18px;max-height:88vh;overflow:auto;animation:rise .25s ease;}
@media(min-width:560px){.modal-bg{align-items:center;}.modal{border-radius:18px;}}
@keyframes rise{from{transform:translateY(24px);opacity:.6;}to{transform:none;opacity:1;}}
.modal h2{font-size:17px;margin-bottom:14px;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
.chips{display:flex;gap:6px;flex-wrap:wrap;}
.chip{padding:7px 12px;border:1px solid var(--border);border-radius:999px;font-size:13px;
cursor:pointer;background:var(--surface);}
.chip.on{background:var(--accent);color:#fff;border-color:var(--accent);}
.modal .foot{display:flex;gap:10px;margin-top:16px;}
.modal .foot button{flex:1;justify-content:center;}
.hint{font-size:12px;color:var(--muted);margin-top:-6px;margin-bottom:12px;}
nav.tabs{
position:fixed;
left:0;right:0;bottom:0;
z-index:700;
background:var(--surface);
border-top:1px solid var(--border);
display:flex;
padding:6px 6px env(safe-area-inset-bottom,6px);
max-width:760px;margin:0 auto;
}
nav.tabs button{
flex:1;flex-direction:column;gap:3px;border:none;background:none;border-radius:12px;
padding:8px 4px;font-size:11px;color:var(--muted);
}
nav.tabs button .ic{font-size:20px;line-height:1;}
nav.tabs button.active{color:var(--accent);background:var(--accent-soft);}
.toast{position:fixed;bottom:84px;left:50%;transform:translateX(-50%) translateY(20px);
background:var(--text);color:var(--bg);padding:10px 18px;border-radius:999px;font-size:13px;
z-index:900;opacity:0;transition:.25s;pointer-events:none;max-width:90%;text-align:center;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.update-banner{position:fixed;left:12px;right:12px;bottom:76px;z-index:850;display:none;
align-items:center;gap:12px;justify-content:center;flex-wrap:wrap;
background:var(--accent);color:#fff;padding:10px 16px;font-size:13px;font-weight:600;
max-width:736px;margin:0 auto;border-radius:12px;box-shadow:var(--shadow);}
.update-banner.show{display:flex;}
.update-banner button{background:#fff;color:var(--accent);border:none;font-weight:600;padding:7px 12px;}
.sel-mode .mrow{cursor:pointer;}
.mrow.picked{border-color:var(--accent);background:var(--accent-soft);}
.divider{height:1px;background:var(--border);margin:16px 0;}
.kv{display:flex;justify-content:space-between;font-size:13px;padding:4px 0;}
.kv span:first-child{color:var(--muted);}
footer.privacy{font-size:11px;color:var(--muted);line-height:1.6;padding:20px 16px 110px;
max-width:760px;margin:0 auto;border-top:1px solid var(--border);}
footer.privacy b{color:var(--text);font-weight:600;}
footer.privacy ul{margin:6px 0 0 16px;}
footer.privacy .foot-toggle{display:flex;align-items:center;gap:8px;width:100%;
background:none;border:none;border-radius:0;padding:0;margin:0;cursor:pointer;
font-size:11px;color:var(--muted);}
footer.privacy .foot-toggle:hover{border-color:transparent;}
footer.privacy .foot-toggle .chev{margin-left:auto;color:var(--muted);transition:.2s;font-size:10px;}
footer.privacy.open .foot-toggle .chev{transform:rotate(90deg);}
footer.privacy .foot-body{display:none;}
footer.privacy.open .foot-body{display:block;}
footer.privacy .foot-ver{margin-top:10px;}
.leaflet-popup-content{font-family:var(--font);font-size:13px;}
.pop b{font-size:14px;}
.pop button{margin-top:8px;}