/* Login and registration share the portfolio's visual language. */
:root {
  --paper: #f5f8f6; --paper-soft: #f4f7f5;
  --ink: #1c3029; --ink-soft: #65786f; --ink-faint: #72867a;
  --line: #e0e9e2; --line-strong: #c8d8ce;
  --forest: #187757; --forest-deep: #105e44;
  --accent: #187757; --accent-bright: #2b9470;
  --accent-soft: #e7f3eb; --lime: #e4f3e8;
  --auth-card: #fff;
  --shadow-card: 0 20px 80px -40px rgba(25, 70, 40, .22);
}
[data-theme="dark"] {
  --paper: #101c19; --paper-soft: #20352c;
  --ink: #e8f1eb; --ink-soft: #a7bab0; --ink-faint: #91a79a;
  --line: #2b4236; --line-strong: #405c4b;
  --forest: #267c5c; --forest-deep: #1c6449;
  --accent: #86d6ad; --accent-bright: #9ee7c0;
  --accent-soft: #294535; --lime: #e8f1eb;
  --danger: #ffa7a1; --danger-soft: #4a302e;
  --auth-card: #192b24;
}
.auth-page { padding: 48px 24px; }
.auth-page::before { width: 900px; height: 900px; right: -380px; top: -480px; filter: none; background: none; border: 1px solid var(--line-strong); box-shadow: 0 0 0 60px var(--paper), 0 0 0 61px var(--line), 0 0 0 120px var(--paper), 0 0 0 121px var(--line); opacity: .7; }
.auth-page::after { display: none; }
.auth-card { width: min(460px, 100%); padding: 42px; background: var(--auth-card); border-radius: 24px; }
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 30px; }
.brand-icon { background: var(--forest); color: #fff; width: 43px; height: 46px; border-radius: 14px; }
.brand-icon svg { width: 25px; height: 25px; }
.brand h1 { font-size: 36px; letter-spacing: -.06em; }
.brand h1 span { color: var(--accent); }
.brand p { margin-top: 12px; font-size: 13px; line-height: 1.7; max-width: 310px; }
.field label { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--ink); }
.field input { background: var(--paper-soft); border-radius: 10px; padding: 13px 14px; font-size: 16px; }
.field input:focus { background: var(--auth-card); box-shadow: 0 0 0 3px var(--accent-soft); }
.submit-btn { border-radius: 11px; padding: 13px 20px; font-size: 14px; color: #fff; box-shadow: none; }
.submit-btn:hover:not(:disabled) { color: #fff; transform: translateY(-1px); }
.alt-link { font-size: 12px; padding-top: 23px; margin-top: 26px; }
.message.success { color: var(--accent); }
@media (max-width: 480px) {
  .auth-page { padding: 24px 16px; }
  .auth-card { padding: 30px 25px; }
  .brand h1 { font-size: 32px; }
}