:root{--bg:#f5f6f8;--surface:#fff;--sunk:#ecedf0;--line:#d5d6da;--ink:#1e2030;--ink2:#5e6070;--muted:#7a7c88;
--accent:#1e5ab8;--accent-bg:#e8f0fc;--pass:#1e8050;--pass-bg:#e6f4ec;--warn:#8a7020;--warn-bg:#fcf5e8;--fail:#c93135;--fail-bg:#fce8e8;
--asphalt:#2b2f3a;--stripe:#f2c230;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--bg:#15171d;--surface:#1e2129;--sunk:#262a33;--line:#373b46;--ink:#e8e9ee;--ink2:#a9abb6;--muted:#8a8c98;
--accent:#7aa7ef;--accent-bg:#1d2a40;--pass:#5cc18c;--pass-bg:#16301f;--warn:#d8b44a;--warn-bg:#332b14;--fail:#ef6f72;--fail-bg:#3a1a1b;--asphalt:#0e1015;color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.7 "Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif}
a{color:var(--accent)}
.devbar{background:var(--warn-bg);color:var(--warn);text-align:center;padding:4px 16px;font-size:18px}
.top{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:env(safe-area-inset-top,0px);z-index:10}
.brand{display:flex;gap:8px;align-items:center;font-weight:700;font-size:22px;color:var(--ink);text-decoration:none}
.brand i{width:28px;height:28px;border-radius:6px;background:var(--asphalt);color:var(--stripe);font-style:normal;display:grid;place-items:center}
.top nav{display:flex;flex-wrap:wrap;gap:4px 16px}.top nav a{text-decoration:none;color:var(--ink2);padding:2px 0}.top nav a.on{color:var(--accent);font-weight:700}
main{max-width:1080px;margin:0 auto;padding:20px 16px 48px;display:flex;flex-direction:column;gap:20px}
h1{font-size:30px;line-height:1.35;margin:0}h2{font-size:24px;margin:0}h3{font-size:20px;margin:0}
p{margin:0}
.lede{color:var(--ink2)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.btn{display:inline-block;text-align:center;border-radius:10px;padding:10px 16px;font:inherit;font-weight:500;border:1.5px solid var(--accent);color:var(--accent);background:transparent;text-decoration:none;cursor:pointer}
.btn.fill{background:var(--accent);color:#fff}.btn.big{display:block;font-size:20px;padding:14px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pill{display:inline-block;border-radius:6px;padding:0 10px;font-size:18px;background:var(--sunk);color:var(--ink2)}
.pill.ok{background:var(--pass-bg);color:var(--pass)}.pill.q{background:var(--warn-bg);color:var(--warn)}.pill.no{background:var(--fail-bg);color:var(--fail)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0}.kv dt{color:var(--muted)}.kv dd{margin:0}
.note{color:var(--muted);font-size:18px}
.tbl{overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:560px}th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--ink2);font-weight:500;background:var(--sunk)}td.n{text-align:right;font-variant-numeric:tabular-nums}
form{display:flex;flex-direction:column;gap:14px}label{display:flex;flex-direction:column;gap:4px;color:var(--ink2)}
input,select,textarea{font:inherit;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:8px;padding:8px 10px}
fieldset{border:1px solid var(--line);border-radius:10px;padding:10px 14px}legend{color:var(--ink2)}
.chips{display:flex;flex-wrap:wrap;gap:8px}.chips label{flex-direction:row;align-items:center;gap:6px;border:1.5px solid var(--line);border-radius:999px;padding:2px 12px;color:var(--ink)}
.layout{background:var(--sunk);border-radius:10px;padding:8px;max-width:100%}.layout img{width:100%;height:auto;display:block}
.big{font-size:32px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.list .item{display:flex;flex-direction:column;gap:4px;padding:14px 0;border-bottom:1px solid var(--line)}.list .item:last-child{border-bottom:0}
.list .item a.t{font-weight:700;font-size:20px;text-decoration:none}
#map{height:420px;border-radius:12px;border:1px solid var(--line)}
.hero{display:flex;flex-direction:column;gap:14px}.hero h1{font-size:32px}
.band{height:8px;background:repeating-linear-gradient(90deg,var(--stripe) 0 38px,var(--asphalt) 38px 52px);border-radius:2px}
.foot{max-width:1080px;margin:0 auto;padding:0 16px 32px;color:var(--muted)}
.copybox{display:flex;gap:8px;flex-wrap:wrap}.copybox input{flex:1 1 240px}
.article h2{margin-top:10px}.article table{min-width:0}.article li{margin:4px 0}
.msg{background:var(--pass-bg);color:var(--pass);border-radius:10px;padding:10px 14px}.err{background:var(--fail-bg);color:var(--fail);border-radius:10px;padding:10px 14px}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1.5px solid var(--accent);border-radius:10px;overflow:hidden;width:100%;max-width:560px}
.seg button{font:inherit;border:0;background:transparent;color:var(--accent);padding:8px 4px;cursor:pointer;white-space:nowrap}
.seg button[aria-selected="true"]{background:var(--accent);color:#fff}
details summary{cursor:pointer;color:var(--accent)}details .kv{margin-top:8px}
.stats{display:flex;flex-wrap:wrap;gap:4px 18px}.stats>div{display:flex;flex-direction:column}.stats .v{font-size:22px;font-variant-numeric:tabular-nums}
.combo.loss .stats>div:first-child .v{color:var(--fail)}.combo h3{font-size:20px}
.top{position:static}
.matrix{min-width:0}.matrix th,.matrix td{text-align:center;padding:0}.matrix thead th,.matrix tbody th{padding:8px 6px;font-size:18px}
.matrix td button{font:inherit;width:100%;border:0;background:transparent;color:inherit;padding:10px 4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:0;font-variant-numeric:tabular-nums}
.matrix td small{font-size:18px;color:var(--pass);font-weight:700}
.matrix td.c-good{background:var(--pass-bg)}.matrix td.c-mid{background:var(--warn-bg)}.matrix td.c-slow{background:var(--sunk)}.matrix td.c-loss{background:var(--fail-bg);color:var(--fail)}.matrix td.c-na{color:var(--muted)}
.matrix td.sel{outline:3px solid var(--accent);outline-offset:-3px}.matrix th.on{color:var(--accent)}
.sheet{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;padding:6px 14px 14px;gap:0}
.sheet h3{padding:8px 0}
.ln{display:grid;grid-template-columns:8.5em 1fr auto;gap:4px 12px;align-items:baseline;padding:10px 0;border-top:1px solid var(--line)}
details.ln{display:block}details.ln summary{display:grid;grid-template-columns:8.5em 1fr auto;gap:4px 12px;align-items:baseline;list-style:none}
details.ln summary::-webkit-details-marker{display:none}details.ln summary .f{color:var(--accent)}
.ln .k{font-weight:700}.ln .f{color:var(--ink2)}.ln .n{font-size:22px;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.ln.total{border-top:2px solid var(--ink)}.ln .n.neg{color:var(--fail)}
.sub{display:flex;flex-direction:column;gap:6px;padding:8px 0 4px 8.5em;color:var(--ink2)}
input.v{padding:2px 6px;border-radius:6px;border:1.5px solid var(--line);color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
input.v.mine{color:var(--accent);border-color:var(--accent);font-weight:700}
@media (max-width:640px){.ln,details.ln summary{grid-template-columns:1fr auto}.ln .f{grid-column:1/-1;grid-row:2}.sub{padding-left:0}}
#calc{display:flex;flex-direction:column;gap:12px}
.gmap{width:100%;height:420px;border:1px solid var(--line);border-radius:12px;display:block}
.btn.line{background:#06c755;border-color:#06c755;color:#fff}