:root { --bg:#f6f7f9; --surface:#fff; --text:#14181f; --muted:#667085; --line:#e4e7ec;
        --brand:#1f5fae; --ok:#0f7a44; --err:#b3261e; --info:#1f5fae; --radius:10px; }
*, *::before, *::after { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text);
       font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
header.top { background:var(--brand); color:#fff; display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 16px; }
header.top .brand { font-weight:800; font-size:17px; flex:1; }
header.top .brand span { font-weight:500; opacity:.85; }
header.top .who { font-size:13px; opacity:.9; }
header.top form.inline { margin:0; }
header.top button.link { background:none; border:1px solid rgba(255,255,255,.6); color:#fff; border-radius:999px;
       padding:4px 12px; font:inherit; font-size:13px; cursor:pointer; }
main { max-width:860px; margin:0 auto; padding:20px 16px 40px; }
footer { text-align:center; color:var(--muted); font-size:13px; padding:0 16px 30px; }
a { color:var(--brand); }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; margin:0 0 16px;
        box-shadow:0 1px 2px rgba(16,24,40,.06); }
.card.narrow { max-width:440px; margin:24px auto; }
h1 { font-size:22px; margin:0 0 8px; }
h2 { font-size:17px; margin:0 0 12px; }
.muted { color:var(--muted); }
.small { font-size:13px; }
.note { background:#fff8e6; border:1px solid #f3dca0; border-radius:8px; padding:8px 10px; font-size:14px; }
.flash { border-radius:8px; padding:10px 12px; margin:0 0 12px; font-weight:600; }
.flash.ok { background:#e7f8ef; border:1px solid #c2e9d5; color:#0b5c33; }
.flash.err { background:#fdecea; border:1px solid #f5c6c2; color:#8c1d18; }
.flash.info { background:#e8f0fb; border:1px solid #c5d8f2; color:#163f73; }
label { display:flex; flex-direction:column; gap:4px; font-weight:600; font-size:13px; color:#344054; margin:0 0 12px; }
input[type=text], input[type=email], input[type=password] { font:inherit; font-weight:400; padding:9px 10px; border:1px solid #d0d5dd;
       border-radius:8px; width:100%; color:var(--text); background:#fff; }
input[type=file] { font:inherit; font-size:14px; }
.pw { display:flex; gap:6px; }
.pw input { flex:1; min-width:0; }
.pw .eye { font:inherit; font-size:13px; border:1px solid #d0d5dd; background:#fff; border-radius:8px; padding:0 12px; cursor:pointer; }
.btn { font:inherit; font-weight:700; background:var(--brand); color:#fff; border:none; border-radius:8px; padding:10px 18px; cursor:pointer; }
form.grid { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
form.grid .wide { grid-column:1 / -1; }
.ferr { color:var(--err); font-weight:600; font-size:12.5px; }
.was { color:var(--muted); font-weight:400; font-size:12.5px; }
.logo { display:flex; flex-direction:column; gap:6px; margin:0 0 14px; }
.logo .lbl { font-weight:600; font-size:13px; color:#344054; }
.logo img { max-width:200px; max-height:120px; border:1px solid var(--line); border-radius:8px; background:#fff; padding:4px; }
.meter { display:flex; align-items:center; gap:10px; margin:8px 0 10px; }
.meter-bar { flex:0 0 180px; height:8px; background:#eef0f3; border-radius:999px; overflow:hidden; }
.meter-fill { display:block; height:100%; width:0; background:var(--ok); }
@media (max-width:640px) { form.grid { grid-template-columns:1fr; } .meter-bar { flex-basis:120px; } }