:root{--bg:#0b1020;--fg:#e8ecf5;--mut:#9aa4bd;--card:rgba(17,24,43,.78);--line:rgba(255,255,255,.09);--acc:#5b8cff;--sea:#0d1426;--land:#141c33;--grey:#5b6275}
[data-theme=light]{--bg:#f4f6fb;--fg:#111827;--mut:#5b6476;--card:rgba(255,255,255,.86);--line:rgba(0,0,0,.08);--acc:#2f5bff;--sea:#dfe6f2;--land:#f8fafc;--grey:#b9bfca}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font:15px/1.5 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--acc)}
.top{position:fixed;inset:0 0 auto 0;height:58px;display:flex;align-items:center;gap:18px;padding:0 16px;z-index:20;background:var(--card);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em;color:var(--fg);text-decoration:none;font-size:17px}
.logo{width:22px;height:22px;border-radius:50%;background:conic-gradient(from 200deg,#1a9850,#a6d96a,#fee08b,#fdae61,#d73027,#7f0000,#1a9850);box-shadow:0 0 18px rgba(91,140,255,.35)}
.beta{font-size:11px;padding:1px 7px;border-radius:99px;border:1px solid var(--line);color:var(--mut);font-weight:500}
.nav{display:flex;gap:4px;margin-left:8px}.nav a{color:var(--mut);text-decoration:none;padding:7px 12px;border-radius:10px;transition:.2s}.nav a:hover,.nav a.on{color:var(--fg);background:var(--line)}
.nav .support{color:#f5b942}
.tools{margin-left:auto;display:flex;gap:6px}.pill{background:var(--line);color:var(--fg);border:0;border-radius:10px;padding:7px 11px;cursor:pointer;font:inherit}
.only-mobile{display:none}
main{position:fixed;inset:58px 0 0 0}.view{position:absolute;inset:0}
#map{position:absolute;inset:0;background:var(--sea)}
.glass{background:var(--card);backdrop-filter:blur(16px) saturate(1.3);border:1px solid var(--line);border-radius:18px;box-shadow:0 10px 40px rgba(0,0,0,.25)}
#side{position:absolute;top:14px;left:14px;bottom:14px;width:370px;padding:14px;display:flex;flex-direction:column;gap:12px;overflow:auto;z-index:5;animation:in .5s ease}
@keyframes in{from{opacity:0;transform:translateX(-14px)}}
.search{position:relative}#q{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:inherit;outline:none;transition:.2s}#q:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(91,140,255,.25)}
#sugg{position:absolute;left:0;right:0;top:48px;margin:0;padding:6px;list-style:none;background:var(--card);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:12px;z-index:9;max-height:320px;overflow:auto}#sugg:empty{display:none}
#sugg li{padding:8px 10px;border-radius:8px;cursor:pointer;display:flex;justify-content:space-between;gap:8px}#sugg li:hover,#sugg li.on{background:var(--line)}#sugg small{color:var(--mut)}
.layers{display:flex;background:var(--line);border-radius:12px;padding:3px}.seg{flex:1;border:0;background:none;color:var(--mut);padding:8px;border-radius:9px;cursor:pointer;font:inherit;transition:.25s}.seg.on{background:var(--bg);color:var(--fg);box-shadow:0 2px 8px rgba(0,0,0,.2)}
.warn{font-size:12.5px;color:#f5b942;background:rgba(245,185,66,.09);border:1px solid rgba(245,185,66,.25);padding:8px 10px;border-radius:10px}
.panel{min-height:120px}.hint{color:var(--mut)}
.place h2{margin:0;font-size:21px;letter-spacing:-.02em}.place .sub{color:var(--mut);font-size:13px}
.score{display:flex;align-items:center;gap:14px;margin:12px 0}.badge{font-size:30px;font-weight:800;min-width:84px;text-align:center;padding:8px 10px;border-radius:14px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);transition:background .4s}
.badge small{font-size:13px;font-weight:600;opacity:.85}
.rk{font-size:13px;color:var(--mut)}.rk b{color:var(--fg)}
.crit{display:grid;grid-template-columns:1fr 64px;gap:4px 10px;font-size:13px;margin-top:6px}.crit .bar{grid-column:1/3;height:6px;border-radius:9px;background:var(--line);overflow:hidden;margin-bottom:6px}.crit .bar i{display:block;height:100%;border-radius:9px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.crit .v{text-align:right;font-variant-numeric:tabular-nums}.est{color:#f5b942;font-size:11px}
.spark{width:100%;height:46px;margin-top:6px}
.weights summary{cursor:pointer;font-weight:600}.wrow{display:grid;grid-template-columns:1fr 90px 26px;align-items:center;gap:8px;font-size:13px;margin:6px 0}.wrow input{width:100%;accent-color:var(--acc)}
.link{background:none;border:0;color:var(--acc);cursor:pointer;padding:4px 0;font:inherit}
.legend{position:absolute;right:14px;bottom:30px;padding:10px 12px;width:250px;z-index:4;font-size:12px}.lg-title{font-weight:600;margin-bottom:6px}.lg-bar{display:flex;height:12px;border-radius:6px;overflow:hidden}.lg-bar i{flex:1}.lg-ends{display:flex;justify-content:space-between;color:var(--mut)}.lg-grey{display:flex;gap:6px;align-items:center;color:var(--mut);margin-top:4px}.lg-grey i{width:14px;height:10px;background:var(--grey);border-radius:3px}
.ribbon{position:absolute;right:14px;top:14px;z-index:4;font-size:12px;padding:6px 10px;border-radius:99px;background:var(--card);border:1px solid var(--line);color:var(--mut)}
.tip{position:fixed;z-index:30;pointer-events:none;padding:6px 10px;border-radius:10px;background:var(--card);backdrop-filter:blur(10px);border:1px solid var(--line);font-size:13px;white-space:nowrap}
.page{overflow:auto;padding:32px 16px 80px}.page article{max-width:860px;margin:0 auto;animation:fade .4s ease}@keyframes fade{from{opacity:0;transform:translateY(8px)}}
.page h1{font-size:32px;letter-spacing:-.03em}.page h2{margin-top:28px}.page table{width:100%;border-collapse:collapse;font-size:14px}.page td,.page th{padding:8px;border-bottom:1px solid var(--line);text-align:left}.page tr.cl{cursor:pointer}.page tr.cl:hover{background:var(--line)}
.card{padding:18px;border-radius:16px;border:1px solid var(--line);background:var(--card);margin:14px 0}
.chip{display:inline-block;width:34px;text-align:center;border-radius:7px;color:#fff;font-weight:700;font-size:12.5px;padding:2px 0}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}.tabs button{border:1px solid var(--line);background:none;color:var(--fg);padding:7px 12px;border-radius:10px;cursor:pointer;font:inherit}.tabs button.on{background:var(--acc);color:#fff;border-color:transparent}
select{background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:10px;padding:7px;font:inherit}
.maplibregl-ctrl-attrib{font-size:11px}
@media (max-width:820px){.nav{display:none;position:fixed;top:58px;left:0;right:0;flex-direction:column;background:var(--card);backdrop-filter:blur(14px);padding:8px;border-bottom:1px solid var(--line)}.nav.open{display:flex}.only-mobile{display:inline-block}
#side{top:auto;left:8px;right:8px;bottom:8px;width:auto;max-height:46vh;border-radius:18px 18px 14px 14px}.legend{top:10px;bottom:auto;right:8px;width:200px}.ribbon{display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
#side>*{flex:none}
@media (max-width:820px){.brand span[data-i18n]{font-size:15px;white-space:nowrap}.beta{display:none}.legend{width:170px;padding:8px}.lg-title{font-size:11px}}

.cats{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}.cats button{font:inherit;font-size:12px;padding:3px 8px;border-radius:12px;border:1px solid var(--mut);background:transparent;color:var(--fg);cursor:pointer}.cats button.on{background:var(--acc);color:#fff;border-color:var(--acc)}

.hist{margin-top:8px;font-size:12px;opacity:.9}.hist summary{cursor:pointer}.hist select{font-size:12px;margin-top:4px;max-width:48%}

.news{margin-top:12px;border-top:1px solid var(--line,#8884);padding-top:8px}.news summary{cursor:pointer;font-weight:600}.newsl{list-style:none;padding:0;margin:6px 0;max-height:320px;overflow:auto}.newsl li{padding:5px 0;border-bottom:1px solid #8882;font-size:13px;line-height:1.35}.newsl time{color:var(--mut);font-size:12px;margin-right:4px}.newsl small{color:var(--mut)}

.acts{display:flex;gap:6px;margin:8px 0}.acts .pill{font-size:12px;cursor:pointer}
.cats button.off{opacity:.45;border-style:dashed}
.cmp{margin:8px 0;padding:10px}.cmp table{width:100%;font-size:12px;border-collapse:collapse}.cmp td,.cmp th{padding:2px 4px;text-align:left}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}