/* Theme (Portie palette). Restyle by changing these variables; donut geometry/colours live in DONUT in app.js. */
:root{--bg:#0f1419;--card:#1a222c;--card2:#151c24;--text:#d6dbe3;--muted:#9aa4b2;--line:#2a3542;--accent:#6cb6ff;--up:#4ade80;--dn:#f87171;--amber:#f0b429;
 --font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--r:14px}
*{box-sizing:border-box}html{font-size:112.5%}body{margin:0;font:400 1rem/1.55 var(--font);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--accent)}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--accent);color:#0f1419;padding:10px;z-index:9}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
header{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:var(--card2);border-bottom:1px solid var(--line);flex-wrap:wrap;gap:4px}
header nav{display:flex;flex-wrap:wrap}header a{color:var(--text);text-decoration:none;padding:10px 8px;min-height:44px;display:inline-flex;align-items:center}.brand{font-size:1.2rem}.brand b{color:var(--accent)}
.banner{background:#2a2410;border-bottom:1px solid #5c4a12;padding:8px 16px;font-size:.9rem;color:#f5e2a8}
main{max-width:820px;margin:0 auto;padding:16px}main:focus{outline:none}footer{text-align:center;color:var(--muted);font-size:.85rem;padding:24px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin:14px 0}
h1{font-size:1.6rem;font-weight:500;line-height:1.25;margin:.2em 0}h2{font-size:1.2rem;font-weight:500}h3{font-size:1.05rem;font-weight:500;margin:.2em 0}.hero{font-size:1.8rem}
button,.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;background:var(--accent);color:#0f1419;border:0;border-radius:10px;padding:10px 18px;font:500 1rem var(--font);cursor:pointer;text-decoration:none}
button:disabled{opacity:.6;cursor:default}.secondary{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.muted{color:var(--muted);font-size:.92rem}.err{color:#ff9b9b}.ok{color:var(--up)}.up{color:var(--up)}.dn{color:var(--dn)}
.pill{display:inline-block;align-self:flex-start;font-size:.78rem;padding:2px 8px;border-radius:99px;background:#16351f;color:var(--up);margin-left:6px}.pill.demo{background:#3a2f12;color:#f5d27a}
.tag{font-size:.78rem;background:#3a2f12;color:#f5d27a;padding:2px 6px;border-radius:6px}.tag.soon{background:var(--line);color:var(--text)}
.steps{list-style:none;padding:0;margin:0;counter-reset:s}.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;margin:12px 0}
.step h2{display:flex;align-items:center;gap:10px;margin:.2em 0}.step .n{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--line);font-size:1rem}
.step.now .n{background:var(--accent);color:#0f1419}.step.done .n{background:var(--up);color:#0f1419}
.grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.ecard{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:12px;background:var(--card2);border:1px solid var(--line);color:var(--text);text-decoration:none;min-height:44px}
.ecard:hover{border-color:var(--accent)}.ecard.match{border-color:var(--up)}.ename{font-weight:500}
.consent{background:var(--card2)}details{margin:8px 0}summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--accent)}
.opts{display:grid;gap:10px}.optbtn{justify-content:flex-start;background:var(--card2);color:var(--text);border:1px solid var(--line);font-size:1.1rem;padding:14px 16px;min-height:56px}
.optbtn:hover{border-color:var(--accent)}.optbtn[aria-pressed=true]{border-color:var(--accent);background:#14304a}
.bignum{font-size:1.6rem;font-weight:500;font-variant-numeric:tabular-nums}
.orow{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;margin:10px 0}.ol{min-width:0}
.big{font-size:1.4rem;font-weight:500;font-variant-numeric:tabular-nums}.big.win{color:var(--up)}.big.lose{color:var(--text)}.big.tie{color:var(--text)}
.pbar{grid-column:1/-1;height:8px;border-radius:99px;background:var(--line);overflow:hidden}.pbar i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .6s ease}
.pairs{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.pair{background:var(--card2);border-radius:12px;padding:12px}
.rings{display:flex;gap:8px;justify-content:space-around}
.donut{position:relative;width:140px;height:140px;margin:0}.donut svg{display:block}.donut path{stroke-width:1;stroke-linejoin:round;transition:fill .3s}
.donut figcaption{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.donut .t{font-size:12px;font-weight:400;color:var(--muted)}.donut .v{font-size:20px;font-weight:500;font-variant-numeric:tabular-nums}
.chg{margin:6px 0 0;text-align:center}
.share{display:flex;gap:8px;flex-wrap:wrap}.share input{flex:1;min-width:200px}
input,select{min-height:44px;padding:10px;border:1px solid var(--line);border-radius:10px;font:1rem var(--font);background:var(--card2);color:var(--text)}
.filters{display:grid;grid-template-columns:1fr 1fr;gap:8px}.filters input{grid-column:1/-1}
#map,#areamap{height:340px;border-radius:12px;margin:10px 0}.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.95rem}td,th{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
label.opt{display:flex;gap:10px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:10px;margin:8px 0;min-height:44px}
.sk{height:22px;border-radius:8px;margin:12px 0;background:linear-gradient(90deg,#1f2933 0%,#2a3542 50%,#1f2933 100%);background-size:200% 100%;animation:sk 1.2s infinite}
@keyframes sk{to{background-position:-200% 0}}
.disclaimer{border-left:3px solid var(--amber);padding-left:10px}
.leaflet-container{background:#1a222c}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}