:root { --ink:#0d1b2a; --ink-2:#1b2b45; --teal:#19c3b1; --paper:#f6f8fb; --line:#dde3ec; --dim:#5d6b82; --err:#c0392b; --ok:#1f9d6b; }
* { box-sizing:border-box; }
body { margin:0; font-family:"Segoe UI",system-ui,sans-serif; background:var(--paper); color:#14213d; }
header { background:linear-gradient(160deg,var(--ink),var(--ink-2)); color:#fff; padding:16px 28px; display:flex; justify-content:space-between; align-items:center; }
header a { color:#cfe; text-decoration:none; font-size:14px; }
main { max-width:520px; margin:28px auto; padding:0 20px 40px; }
h1 { font-size:24px; margin:0 0 6px; } .sub { color:var(--dim); margin:0 0 18px; }
.card { background:#fff; border-radius:12px; padding:20px 22px; box-shadow:0 1px 3px rgba(13,27,42,.08); }
label { display:block; font-size:13px; font-weight:600; margin:12px 0 4px; }
input { width:100%; padding:9px 11px; border:1.5px solid var(--line); border-radius:8px; font:inherit; }
input[disabled] { background:#f1f4f8; }
.hint { font-size:12px; color:var(--dim); margin-top:3px; }
button { margin-top:20px; background:var(--teal); border:0; color:#04332e; font-weight:700; padding:11px 20px; border-radius:10px; cursor:pointer; font-size:15px; }
.btn-link { display:inline-block; margin-top:6px; background:var(--teal); color:#04332e; font-weight:700; padding:11px 20px; border-radius:10px; text-decoration:none; font-size:15px; }
.btn-link:hover { filter:brightness(1.05); }
.msg { margin-top:14px; font-size:14px; min-height:20px; } .msg.err { color:var(--err); } .msg.ok { color:var(--ok); }

/* ---- Former inline styles (moved out of the HTML) ----
   Each class name is doubled (.u-x.u-x) so it wins over general rules, exactly as the old inline style did. */
.u-hidden.u-hidden {
  display: none;
}

.legal-foot { margin:0 auto 24px; max-width:520px; padding:0 20px; font-size:12px; color:var(--dim); text-align:center; }