:root{
  --brand-indigo:#414697;
  --brand-navy:#1d1d32;
  --cream:#fffffb;
  --line:#e2e2ec;
  --line-soft:#ededf3;
  --surface:#ffffff;
  --field:#f6f6fa;
  --text:#26263f;
  --heading:#1d1d32;
  --text-mute:#5f6186;
  --text-faint:#8b8da8;
  --bad:#cb4338;
  --bad-bg:#fbe8e6;
  --good:#0e9a6a;
  --good-bg:#e2f6ee;
}

*{box-sizing:border-box;}

body{
  margin:0;
  min-height:100vh;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:14px;
  line-height:1.5;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(65,70,151,.35), transparent 60%),
    linear-gradient(-38deg, #1d1d32 0 12%, #25253f 12% 34%, #1d1d32 34% 46%, #25253f 46% 68%, #1d1d32 68% 100%);
  -webkit-font-smoothing:antialiased;
}

.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 20px;}

.auth-card{
  width:100%;max-width:420px;background:var(--surface);
  border-radius:20px;padding:34px 32px 30px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.1);
}

.auth-logo{width:150px;height:auto;display:block;margin:0 auto 22px;fill:var(--brand-indigo);}
.auth-logo .word{fill:var(--brand-navy);}

h1{font-family:'Sora',system-ui,sans-serif;font-size:21px;color:var(--heading);margin:0 0 6px;text-align:center;}
.muted{color:var(--text-mute);font-size:13.5px;margin:0 0 22px;text-align:center;}
.muted strong{color:var(--text);font-weight:600;}

.form{display:flex;flex-direction:column;gap:15px;}

.field label{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin-bottom:6px;}
.field .hint{font-weight:600;letter-spacing:0;text-transform:none;color:var(--text-faint);}
.field input{
  width:100%;background:var(--field);border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;color:var(--text);font:inherit;font-size:14px;
  transition:border-color .15s, box-shadow .15s;
}
.field input:focus{outline:none;border-color:var(--brand-indigo);box-shadow:0 0 0 3px rgba(65,70,151,.18);}
.field.has-error input{border-color:var(--bad);}
.field-error{color:var(--bad);font-size:12.5px;margin:6px 0 0;}
.readonly-value{
  background:var(--field);border:1px dashed var(--line);border-radius:10px;padding:11px 13px;
  font-family:'Sora',system-ui,sans-serif;font-weight:600;font-size:13.5px;color:var(--text-mute);
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%;
  font:inherit;font-size:14px;font-weight:600;padding:12px 16px;border-radius:10px;
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:background .15s, border-color .15s, transform .1s;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--brand-indigo);color:#fff;}
.btn-primary:hover{background:#353a80;}

.flash{border-radius:10px;padding:11px 14px;font-size:13px;margin:0 0 18px;}
.flash--error{background:var(--bad-bg);color:#8f2b23;}
.flash--success{background:var(--good-bg);color:#0a6b4a;}

code{
  display:block;background:var(--field);border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;font-size:12px;color:var(--text-mute);word-break:break-word;margin-bottom:18px;
}

.auth-links{margin:20px 0 0;text-align:center;font-size:13px;}
.auth-links a{color:var(--brand-indigo);font-weight:600;text-decoration:none;}
.auth-links a:hover{text-decoration:underline;}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;}
}