:root{ --primary:#4a5a6a; --primary-alpha:rgba(74,90,106,0.8); --text:#333; --bg:#f2f2f2; }
*{ box-sizing:border-box } body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; color:var(--text); background:var(--bg) }
.container{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px }
.card{ width:100%; max-width:420px; background:#fff; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.1); overflow:hidden }
.header{ background:var(--primary); color:#fff; padding:10px 20px; font-weight:600; letter-spacing:.3px }
.brand{ display:flex; align-items:center; gap:10px } .brand img{ height:38px; width:auto; display:block } .brand .brand-name{ font-weight:700; letter-spacing:.2px }
.body{ padding:20px }
label{ display:block; margin:12px 0 6px; font-size:14px }
input[type="email"], input[type="password"], input[type="text"]{ width:100%; padding:12px 14px; border:1px solid #ddd; border-radius:10px; outline:none }
input:focus{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(74,90,106,.15) }
.btn{ width:100%; padding:12px 16px; border:0; border-radius:10px; cursor:pointer; font-weight:600 }
.btn-primary{ background:var(--primary); color:#fff }
.btn-ghost{ background:transparent; color:var(--primary); border:1px solid var(--primary) }
.row{ display:flex; gap:10px } .row>*{ flex:1 }
.actions{ margin-top:14px; display:flex; flex-direction:column; gap:10px }
.small{ font-size:12px; opacity:.85 } a{ color:var(--primary); text-decoration:none } a:hover{ text-decoration:underline }
@media (max-width:480px){ .card{ max-width:100% } .header{ padding:10px 16px } .body{ padding:16px } }