:root {
  color-scheme: light dark;
  --fg: #1a1a1a; --muted: #5c5c5c; --bg: #fff; --rule: #e3e3e3;
  --link: #1a5fb4; --panel: #f7f7f6; --error: #a51d2d;
}
@media (prefers-color-scheme: dark) {
  :root { --fg:#e8e8e8; --muted:#a3a3a3; --bg:#141414; --rule:#2c2c2c;
          --link:#7fb4f5; --panel:#1c1c1c; --error:#f66151; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",
       "PingFang HK","Noto Sans CJK HK",Arial,sans-serif; }
header { display:flex; align-items:center; justify-content:space-between; gap:1rem;
  max-width:56rem; margin:0 auto; padding:1.25rem 1.5rem;
  border-bottom:1px solid var(--rule); }
.brand { font-weight:600; text-decoration:none; color:var(--fg); letter-spacing:-.01em; }
nav { display:flex; align-items:center; gap:1.25rem; font-size:.92rem; }
main { max-width:56rem; margin:0 auto; padding:2rem 1.5rem 3rem; }
footer { max-width:56rem; margin:0 auto; padding:1.5rem; border-top:1px solid var(--rule);
  font-size:.85rem; color:var(--muted); }
h1 { font-size:1.5rem; margin:0 0 1.25rem; font-weight:600; letter-spacing:-.01em; }
h2 { font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
  margin:2.5rem 0 .6rem; font-weight:600; }
a { color:var(--link); }
p { margin:0 0 1rem; }
.muted, .hint { color:var(--muted); font-size:.9rem; }
.error { color:var(--error); }
.notice { color:var(--link); }
.mock-panel { margin-top:2rem; padding:1rem; border:1px solid var(--rule);
  border-radius:6px; background:var(--panel); }
.mock-panel h2 { margin-top:0; }
.plan-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:.75rem; margin:1rem 0; }
.plan-card { display:flex; flex-direction:column; align-items:flex-start; gap:.5rem;
  padding:.85rem; border:1px solid var(--rule); border-radius:4px; background:var(--bg); }
.plan-card form { margin:0; }
.plan-card small, .current-plan { color:var(--muted); }
button.secondary { background:transparent; color:var(--link); }
.stack { display:flex; flex-direction:column; gap:1rem; max-width:24rem; }
label { display:flex; flex-direction:column; gap:.3rem; font-size:.9rem; color:var(--muted); }
input, select { font:inherit; padding:.5rem .6rem; border:1px solid var(--rule);
  border-radius:4px; background:var(--bg); color:var(--fg); }
button { font:inherit; padding:.5rem 1rem; border:1px solid var(--link); border-radius:4px;
  background:var(--link); color:#fff; cursor:pointer; align-self:flex-start; }
button.link { border:0; background:none; color:var(--link); padding:0; }
form.inline { display:inline; }
table { border-collapse:collapse; width:100%; margin:0 0 1rem; font-size:.94rem; }
th, td { text-align:left; padding:.5rem .6rem; border-bottom:1px solid var(--rule);
  vertical-align:top; }
th { font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
  font-weight:600; }
.ua { color:var(--muted); font-size:.85rem; word-break:break-all; }
dl { margin:0 0 1rem; }
dt { font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
dd { margin:0 0 .75rem; }