:root{
  --sky-top:#0b63b8; --sky-mid:#4aa3e6; --sky-low:#bfe1f7;
  --card:#ffffff; --ink:#0f1b2a; --muted:#5b6b7d;
  --accent:#0b63b8; --accent-dark:#084a8c;
  --calc-1:#0ea0f0; --calc-2:#0a6aa8;
  --warn-bg:#fff700; --warn-ink:#c00000;
  --grey:#d3d3d3;
  --radius:14px;
}
*{box-sizing:border-box}
html{background:#bfe1f7}
html,body{margin:0;min-height:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 45%,var(--sky-low) 100%) fixed;
  -webkit-text-size-adjust:100%;
}
a{color:var(--accent)}
.wrap{max-width:760px;margin:0 auto;padding:16px 14px 90px}

/* ---------- header ---------- */
.site-head{color:#fff;padding:22px 4px 10px}
.site-head h1{margin:0;font-size:1.7rem;letter-spacing:.02em}
.site-head p{margin:6px 0 0;opacity:.92}

/* ---------- home grid ---------- */
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));margin:14px 0}
.tile{
  background:var(--card);border-radius:var(--radius);padding:16px;
  display:flex;flex-direction:column;gap:8px;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.tile h2{margin:0;font-size:1.1rem}
.tile p{margin:0;color:var(--muted);font-size:.93rem;flex:1}
.tile .tag{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.btn{
  display:block;text-align:center;text-decoration:none;
  background:var(--accent);color:#fff;border:0;border-radius:10px;
  padding:12px 14px;font-size:1rem;font-weight:600;cursor:pointer;
}
.btn:active{background:var(--accent-dark)}
.btn.disabled,.btn[aria-disabled="true"]{background:#c4ccd6;color:#fff;pointer-events:none}
.btn.small{display:inline-block;padding:8px 12px;font-size:.9rem}
.btn.ghost{background:transparent;color:var(--accent);border:2px solid var(--accent)}

.waiver{
  background:var(--warn-bg);color:var(--warn-ink);
  border-radius:var(--radius);padding:14px 16px;margin:14px 0;
  font-size:.95rem;line-height:1.4;
}
.panel{background:#fff;border-radius:var(--radius);padding:14px 16px;margin:14px 0;line-height:1.45}
.panel.grey{background:var(--grey)}
.panel.caution{background:var(--warn-bg)}

.foot{color:#fff;font-size:.85rem;text-align:center;margin-top:24px;opacity:.95}
.foot a{color:#fff}
.status{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin-top:8px}
.banner{
  position:fixed;left:10px;right:10px;bottom:10px;z-index:50;
  background:#0f1b2a;color:#fff;border-radius:12px;padding:12px 14px;
  display:none;gap:10px;align-items:center;justify-content:space-between;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}
.banner.show{display:flex}
.banner button{background:#4aa3e6;color:#0f1b2a;border:0;border-radius:8px;padding:8px 12px;font-weight:700;cursor:pointer}

/* ---------- calculator ---------- */
.topbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;
  background:rgba(40,55,70,.92);color:#fff;padding:10px 12px;backdrop-filter:blur(6px);
}
.topbar a{color:#fff;text-decoration:none;font-size:1.3rem;padding:0 6px}
.topbar strong{font-size:1rem}
.q{background:var(--grey);border-radius:var(--radius);padding:26px 14px;text-align:center;font-size:1.1rem;margin:10px 0}
.field{background:#fff;border-radius:var(--radius);padding:10px 14px 14px;margin:10px 0}
.field label{display:block;font-size:.8rem;color:#8a97a6;margin-bottom:6px}
.field input{
  width:100%;border:0;background:transparent;text-align:center;
  font-size:1.5rem;color:var(--accent);font-family:inherit;padding:8px 0;min-height:52px;
}
.field input:focus{outline:2px solid var(--sky-mid);border-radius:8px}
.result{border-radius:var(--radius);padding:14px;margin:10px 0;color:#fff;text-align:center}
.result.r1{background:var(--calc-1)}
.result.r2{background:var(--calc-2)}
.result .lbl{font-size:.8rem;text-align:left;opacity:.95}
.result .val{font-size:1.45rem;font-weight:600;padding:20px 0 12px}
.tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;background:#fff;
  border-top:1px solid #cfd8e3;padding-bottom:env(safe-area-inset-bottom);
}
.tabs button{
  flex:1;border:0;background:#fff;padding:14px 4px;font-size:.82rem;color:#333;cursor:pointer;
  border-right:1px solid #e5eaf0;font-family:inherit;
}
.tabs button:last-child{border-right:0}
.tabs button[aria-selected="true"]{background:#0b63b8;color:#fff;font-weight:700}
.pane{display:none}
.pane.active{display:block}
.link-row{background:var(--grey);border-radius:10px;padding:10px 12px;margin:8px 0;word-break:break-all}
.note{font-size:.8rem;color:#fff;text-align:center;margin-top:10px;opacity:.9}