:root{--navy:#061b34;--green:#4ca742;--bg:#f4f7fa;--line:#dce4ec;--text:#142238;--muted:#65758a;--red:#d62f27;--amber:#e99016;--blue:#1768aa}
*{box-sizing:border-box}html,body{margin:0;background:#eaf0f4;color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button{font:inherit}
#app{max-width:720px;margin:0 auto;background:var(--bg);min-height:100dvh;position:relative;padding-bottom:140px}.topbar{position:sticky;top:0;z-index:20;height:64px;background:var(--navy);display:flex;align-items:center;justify-content:space-between;padding:0 16px}.topbar button{border:0;background:none;color:white}.brand{display:flex;align-items:center;gap:8px;font-size:23px}.accent{color:#67bb54}.brandmark{width:30px;height:30px;border:2px solid #67bb54;border-radius:10px;display:grid;place-items:center}.iconbtn{font-size:27px}
.hero{background:linear-gradient(150deg,#061b34,#0c3a63 67%,#28623f);color:white;padding:40px 20px 30px}.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-weight:800;font-size:12px;color:#76c762}.hero h1{font-size:41px;line-height:1.03;letter-spacing:-.035em;margin:8px 0 14px}.hero h1 span{color:#69c156}.hero p{font-size:16px;line-height:1.55;color:#e6edf5}.countries{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}.countries button{border:0;background:white;border-radius:17px;min-height:150px;padding:18px 14px;text-align:left}.flag{font-size:32px;display:block}.countries strong,.countries small{display:block;color:var(--text)}.countries strong{font-size:18px;margin-top:10px}.countries small{font-size:11px;line-height:1.4;color:var(--muted);margin-top:4px}
.panel,.list,.devices,.rule{padding:16px}.panel h2{margin:4px 0 12px}.searchbox{width:100%;padding:16px;border:1px solid var(--line);border-radius:14px;background:white;text-align:left;font-weight:750}.head{background:white;padding:24px 18px 18px;border-bottom:1px solid var(--line)}.head h1{font-size:31px;margin:8px 0 4px}.head p{margin:0;color:var(--muted)}.crumbs{display:flex;align-items:center;gap:6px;overflow:auto;white-space:nowrap}.crumbs button{border:0;background:none;padding:0;color:#2d7439;font-size:12px;font-weight:750}.crumbs span{color:#9ba6b2}
.row{width:100%;border:1px solid var(--line);background:white;border-radius:14px;padding:15px;margin:7px 0;display:flex;justify-content:space-between;align-items:center;text-align:left}.row b,.row small{display:block}.row small{color:var(--muted);margin-top:3px}.row i{font-style:normal;font-size:27px;color:#778598}.devices{display:grid;grid-template-columns:1fr 1fr;gap:10px}.devices button{border:1px solid var(--line);border-radius:14px;background:white;padding:15px;font-weight:800}.devices .active{background:#eaf5e8;border-color:#76bc6b;color:#226b2a}
.rule .status{padding:18px;border-radius:16px;color:white;text-transform:uppercase;font-weight:900;letter-spacing:.05em}.green{background:var(--green)}.red{background:var(--red)}.amber{background:var(--amber)}.blue{background:var(--blue)}.grey{background:#6e7785}.rule article{background:white;border:1px solid var(--line);border-radius:15px;padding:16px;margin:10px 0}.rule h3{margin:0 0 6px}.rule p{margin:0;line-height:1.5}.rule .source{background:#f1f8ed}.source a{display:inline-block;margin:10px 0;font-weight:800;color:#1768aa}.source small{display:block;margin-top:8px;color:var(--muted)}
.bottomnav{position:fixed;bottom:60px;left:50%;transform:translateX(-50%);width:min(720px,100%);height:62px;background:white;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);z-index:20}.bottomnav button{border:0;background:white;font-size:20px}.bottomnav small{display:block;font-size:10px}.disclaimer{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(720px,100%);height:60px;overflow:auto;background:var(--navy);color:#dce6ef;font-size:9.5px;line-height:1.25;padding:8px 12px;z-index:19}.loading,.error{padding:70px 20px;text-align:center}
@media(min-width:760px){#app{margin:24px auto;border-radius:24px;overflow:hidden;box-shadow:0 15px 50px rgba(0,0,0,.13);min-height:850px}.bottomnav,.disclaimer{position:absolute}.hero{padding:55px 38px 36px}.hero h1{font-size:55px}.panel,.list,.rule{padding-left:28px;padding-right:28px}}