:root{--bg:#050a28;--bg2:#121846;--panel:rgba(255,255,255,.05);--line:rgba(255,255,255,.18);--ink:#e9ecff;--muted:#9aa3d6;--gold:#e2d9a6;--gold2:#f3c969;--chip:rgba(255,255,255,.07)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Nunito","Segoe UI",system-ui,-apple-system,sans-serif;color:var(--ink);line-height:1.7;
background:
radial-gradient(1.5px 1.5px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 28% 62%,#fff,transparent),
radial-gradient(1.5px 1.5px at 44% 30%,#cfd5ff,transparent),radial-gradient(1px 1px at 63% 12%,#fff,transparent),
radial-gradient(2px 2px at 78% 44%,#fff,transparent),radial-gradient(1px 1px at 90% 78%,#cfd5ff,transparent),
radial-gradient(1px 1px at 7% 84%,#fff,transparent),radial-gradient(1.5px 1.5px at 55% 88%,#fff,transparent),
linear-gradient(180deg,var(--bg) 0,var(--bg2) 100%) fixed;background-color:var(--bg)}
a{color:var(--gold)}
.wrap{max-width:900px;margin:0 auto;padding:0 20px}
header.site{text-align:center;padding:26px 0 0}
nav{display:flex;flex-direction:column;align-items:center;gap:10px}
.logo{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:#fff;font-size:2rem;font-weight:300;letter-spacing:.5px}
.logo b{font-weight:800}
.logo svg{width:54px;height:54px}
nav .links a.l{color:var(--muted);text-decoration:none;margin:0 12px;font-size:.9rem}
nav .links a.l:hover{color:#fff}
.hero{padding:26px 0 8px;text-align:center}
.hero h1{font-size:clamp(1.7rem,5vw,2.5rem);font-weight:300;margin:.2em 0}
.hero h1 b{font-weight:800}
.hero p{color:var(--muted);max-width:580px;margin:0 auto}
.calc{max-width:620px;margin:22px auto 40px;text-align:center}
.tabs{display:flex;gap:0;margin:0 auto 26px;max-width:460px;border:1px solid var(--line);border-radius:30px;overflow:hidden}
.tabs button{flex:1;padding:11px 8px;border:0;background:transparent;color:var(--muted);font:inherit;font-weight:700;cursor:pointer;font-size:.95rem}
.tabs button.on{background:var(--gold);color:#1b1f45}
#label{font-size:1.25rem;font-weight:400}
.row{display:flex;gap:0;justify-content:center;align-items:center;margin:18px auto;max-width:400px;border:1px solid var(--line);border-radius:14px;background:rgba(10,14,54,.7);padding:12px 8px}
.row span{font-size:1.8rem;color:var(--muted)}
select{appearance:none;-webkit-appearance:none;font:inherit;font-size:1.9rem;font-weight:700;text-align:center;text-align-last:center;padding:6px 10px;border:0;border-radius:8px;background:transparent;color:#fff;cursor:pointer;flex:1;min-width:0}
select:focus{outline:2px solid var(--gold);background:rgba(255,255,255,.08)}
select option{color:#111;font-size:1rem}
.go{display:inline-block;margin:6px auto 0;padding:14px 38px;font:inherit;font-size:1.1rem;letter-spacing:.5px;color:#1b1f45;background:var(--gold);border:0;border-radius:6px;cursor:pointer;transition:.15s}
.go:hover{background:#f0e8b8;transform:translateY(-1px)}
.now{margin-top:12px}
.now button{background:none;border:0;color:var(--gold);cursor:pointer;text-decoration:underline;font:inherit;font-size:.9rem}
#result{margin-top:30px}
#result h3{margin:0 0 6px;font-weight:400;font-size:1.2rem}
.times{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:18px 0}
.t{background:var(--chip);border:1px solid var(--line);border-radius:14px;padding:14px 18px;min-width:130px}
.t b{display:block;font-size:1.5rem;font-weight:800}
.t small{color:var(--muted)}
.t.best{background:var(--gold);border-color:var(--gold);color:#1b1f45}
.t.best small{color:#4a4d78}
.note{font-size:.88rem;color:var(--muted)}
main section,.legal{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px 28px;margin:22px 0}
main h2,.legal h1{margin-top:0;font-weight:800}
main h2{color:var(--gold)}
.legal h1{color:var(--gold)}
.legal h2{margin-top:1.6em;font-size:1.2rem;color:#fff}
.legal{margin:30px 0}
table{width:100%;border-collapse:collapse}
th,td{border-bottom:1px solid var(--line);padding:9px;text-align:left}
th{color:var(--gold)}
li{margin:.3em 0}
footer{padding:30px 0;margin-top:40px;font-size:.9rem;text-align:center;color:var(--muted);border-top:1px solid var(--line)}
footer a{color:var(--ink);margin:0 10px;text-decoration:none}
footer a:hover{color:var(--gold)}
@media(max-width:520px){select{font-size:1.5rem}.logo{font-size:1.6rem}}
