:root{--bg:#e9f0f4;--ink:#0a2540;--line:#8fa9ba;--acc:#0b7a75;--hot:#b45f06;--card:#fff}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 "Segoe UI",system-ui,sans-serif}
header{position:fixed;top:0;left:0;right:0;height:56px;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 16px;background:var(--ink);color:#fff}
.brand,.clk{display:flex;align-items:center;gap:10px}.brand b{font-size:1.15rem;letter-spacing:.02em}.clk{font-size:.85rem;color:#cfe3ee}
.chip{background:#1d4f7a;color:#fff;border-radius:10px;padding:1px 9px;font-size:.72rem;font-weight:700}
nav{position:fixed;bottom:0;left:0;right:0;height:64px;z-index:5;display:flex;background:#fbfdfe;border-top:1px solid var(--line)}
nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#4c6a80;text-decoration:none;font-size:.75rem;font-weight:600}
nav a.on{color:var(--acc)}nav a.on svg{background:#d6ecea;border-radius:12px;padding:4px;width:36px;height:30px}
main{padding:72px 16px 80px;max-width:780px;margin:0 auto}main.map{position:fixed;inset:56px 0 64px;max-width:none;padding:0;margin:0}
#world{width:100%;height:100%;display:block}
.count{position:absolute;top:12px;left:12px;background:#fbfdfe;border:1px solid var(--line);border-radius:4px;padding:8px 14px;display:flex;flex-direction:column}
.count b{font-size:1.7rem;line-height:1.1}.count small{color:#4c6a80;font-size:.72rem}
.zoom{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;gap:8px}
.zoom button{width:44px;height:44px;font-size:1.4rem;line-height:1;margin:0;padding:0;background:#fbfdfe;color:var(--ink);border:1px solid var(--line)}
h1{font-size:1.6rem;margin:.2em 0}h2{margin-top:1.6em}.lead{max-width:60ch}.cap{color:#4c6a80;font-size:.85rem;margin:.2em 0}
.two{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
form,article,.idcard,fieldset{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:16px;margin:12px 0}form.bare{background:none;border:0;padding:0;margin:0}
label{display:block;margin:10px 0;font-weight:600}input,select{display:block;width:100%;padding:8px;border:1px solid var(--line);border-radius:3px;font:inherit;margin-top:4px}
.opt{font-weight:400;display:flex;gap:8px;align-items:center}.opt input{width:auto;margin:0}
button,.cta{background:var(--acc);color:#fff;border:0;border-radius:3px;padding:10px 16px;font:inherit;font-weight:600;cursor:pointer;margin-top:8px;display:inline-block;text-decoration:none}
.cta{background:#d9772b;display:block;text-align:center;margin-top:12px}.ghost{background:none;color:var(--ink);border:1px solid var(--line)}
:focus-visible{outline:3px solid var(--hot);outline-offset:2px}
.idcard{display:flex;gap:16px;align-items:center;border-left:6px solid var(--acc)}.rank{font-size:1.1rem;margin:0}.meta span{margin-right:12px;color:#41607a;font-size:.9rem}
.bds{display:flex;gap:4px;margin:6px 0}.bd{display:block}
.bar{height:12px;background:#cfdde6;border-radius:2px;overflow:hidden}.bar i{display:block;height:100%;background:var(--acc)}
.row{margin:12px 0}.rh{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}.rh span{color:#4c6a80;font-size:.9rem}
.msg{background:#fff7e0;border:1px solid #e0b84a;padding:10px;border-radius:3px}.hot{color:var(--hot);font-weight:700}
.kartu{background:#eef6f6;border-left:4px solid var(--acc);padding:8px 12px}.ok{color:var(--acc);font-weight:700}.goal{border-color:#6bb3ae;background:#f2faf9}
table{width:100%;border-collapse:collapse;background:var(--card);font-size:.92rem}th,td{padding:8px;border:1px solid var(--line);text-align:left;vertical-align:middle}tr.on td{background:#e3f3f1}td svg{vertical-align:middle}
@media(max-width:560px){.clk span:first-child{font-size:.7rem}.idcard{flex-direction:column;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}