:root { --ink:#0b1520; --muted:#60717d; --line:#dce4e8; --teal:#17a89d; --paper:#eef3f4; --rose:#8f2144; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 24px; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.card { width: min(460px, 100%); padding: 34px; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: 0 24px 70px rgba(11,21,32,.12); }
.brand { display:flex; align-items:center; gap:12px; margin-bottom:28px; }
.brand-mark { display:grid; place-items:center; width:42px; height:42px; border-radius:10px; background:var(--teal); font-size:24px; font-weight:900; }
h1 { margin:0; font-size:25px; letter-spacing:-.03em; }
p { color:var(--muted); line-height:1.5; }
label { display:grid; gap:7px; margin-top:16px; font-size:13px; font-weight:700; }
input { width:100%; height:44px; padding:0 12px; border:1px solid #b9c7cd; border-radius:8px; font:inherit; }
input:focus { outline:3px solid rgba(23,168,157,.2); border-color:var(--teal); }
button { width:100%; height:44px; margin-top:22px; border:0; border-radius:8px; color:#071716; background:var(--teal); font:inherit; font-weight:800; cursor:pointer; }
button:hover { background:#3fd4c8; }
button:disabled { opacity:.55; cursor:wait; }
.error { padding:10px 12px; border-radius:8px; color:var(--rose); background:#fde7ee; }
.success { padding:12px; border-radius:8px; color:#087b63; background:#dff7f4; }
.version { display:flex; justify-content:space-between; gap:16px; margin:24px 0; padding:14px; border-radius:8px; background:#f4f7f8; }
.version strong { font-variant-numeric:tabular-nums; }
.note { font-size:12px; }