:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #172033;
  background: #f5f7fb;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.brand-panel { padding: 72px clamp(40px, 7vw, 110px); background: linear-gradient(145deg, #10254d, #234f95); color: white; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.brand-panel::after { content: ""; position: absolute; width: 420px; height: 420px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; right: -180px; top: -120px; box-shadow: 0 0 0 70px rgba(255,255,255,.035), 0 0 0 140px rgba(255,255,255,.025); }
.brand-mark { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: white; color: #17366b; font-weight: 850; letter-spacing: -.04em; font-size: 24px; box-shadow: 0 18px 40px rgba(0,0,0,.18); }
.brand-mark.small { width: 50px; height: 50px; border-radius: 14px; font-size: 19px; }
.eyebrow { margin: 24px 0 8px; text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 750; opacity: .72; }
.brand-panel h1 { font-size: clamp(38px, 5vw, 66px); margin: 0; letter-spacing: -.055em; }
.brand-panel > p:not(.eyebrow) { max-width: 520px; font-size: 18px; line-height: 1.7; color: rgba(255,255,255,.75); }
.brand-footer { position: absolute; bottom: 35px; font-size: 13px; color: rgba(255,255,255,.55); }
.form-panel { background: white; display: grid; place-items: center; padding: 40px; }
.form-wrap { width: min(100%, 430px); }
.mobile-brand { display: none; }
.form-wrap .eyebrow { color: #3468b3; margin-top: 0; }
h2 { margin: 0; font-size: 38px; letter-spacing: -.04em; }
.subtitle { color: #6d778b; margin: 10px 0 34px; }
form { display: grid; gap: 10px; }
label { font-size: 13px; font-weight: 700; margin-top: 9px; }
input { width: 100%; border: 1px solid #dce2ec; background: #fbfcfe; border-radius: 13px; padding: 15px 16px; font: inherit; outline: none; transition: .2s; }
input:focus { border-color: #4d7dc5; box-shadow: 0 0 0 4px rgba(77,125,197,.12); background: white; }
button { border: 0; border-radius: 13px; padding: 15px 18px; margin-top: 18px; background: #1b4f99; color: white; font: inherit; font-weight: 750; cursor: pointer; box-shadow: 0 12px 28px rgba(27,79,153,.2); }
button:hover { background: #153f7b; }
button:disabled { opacity: .65; cursor: wait; }
.message { margin-top: 20px; padding: 14px 16px; border-radius: 12px; line-height: 1.5; font-size: 14px; }
.message.error { color: #9b2633; background: #fff1f2; border: 1px solid #ffd6db; }
.message.success { color: #176541; background: #edf9f3; border: 1px solid #c6eedb; }
.profile-page { display: grid; place-items: center; padding: 30px; background: #f4f7fb; }
.profile-card { width: min(100%, 760px); padding: 34px; background: white; border: 1px solid #e3e8f0; border-radius: 24px; box-shadow: 0 24px 60px rgba(31,49,79,.1); }
.profile-head { display: flex; align-items: center; gap: 18px; border-bottom: 1px solid #edf0f5; padding-bottom: 24px; }
.profile-head .eyebrow { margin: 0 0 4px; color: #5a6c89; }
.profile-head h1 { margin: 0; font-size: 30px; }
.profile-content { padding: 26px 0; }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; }
.profile-grid > div { padding: 17px; border: 1px solid #e6eaf0; border-radius: 14px; background: #fbfcfe; }
dt { color: #788296; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
dd { margin: 7px 0 0; font-weight: 700; word-break: break-word; }
.badge { display: inline-flex; padding: 5px 9px; border-radius: 999px; background: #eaf2ff; color: #24579e; font-size: 12px; }
.secret-box { margin-top: 18px; padding: 20px; border-radius: 16px; background: #12264b; color: white; }
.secret-box span { display: block; opacity: .68; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 10px; }
.secret-box code { font-size: 16px; word-break: break-all; }
.secondary-link { color: #295caa; text-decoration: none; font-weight: 700; font-size: 14px; }
@media (max-width: 820px) {
  .auth-shell { grid-template-columns: 1fr; }
  .brand-panel { display: none; }
  .form-panel { min-height: 100vh; padding: 28px; }
  .mobile-brand { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 15px; background: #173d78; color: white; font-weight: 850; margin-bottom: 32px; }
  .profile-grid { grid-template-columns: 1fr; }
}