:root {
  color-scheme: light;
  --auth-accent: #1f68b5;
  --auth-accent-hover: #155a9f;
  --sign-in-bg: #1677d2;
  --sign-in-hover: #0f64b4;
  --page-bg: #e7edf4;
  --panel-bg: #fdfefe;
  --panel-shadow: 0 16px 38px rgba(29, 39, 58, 0.12);
  --heading: #223247;
  --text: #314155;
  --muted: #5d6b7c;
  --input-bg: #f4f7fa;
  --input-border: #c7d1dc;
  --input-text: #223247;
  --error-bg: #fbecec;
  --error-border: #ebbbbb;
  --error-text: #a33434;
}

body[data-theme="dark"] {
  color-scheme: dark;
  --auth-accent: #9cc8ff;
  --auth-accent-hover: #c3dcff;
  --sign-in-bg: #1677d2;
  --sign-in-hover: #0f64b4;
  --page-bg: #111827;
  --panel-bg: #182235;
  --panel-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
  --heading: #e5edf8;
  --text: #c9d5e6;
  --muted: #9aa8bd;
  --input-bg: #111827;
  --input-border: #314057;
  --input-text: #e5edf8;
  --error-bg: #3a1f25;
  --error-border: #74414c;
  --error-text: #ffb4b4;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--page-bg); color: var(--text); }
button, input { font: inherit; }

.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-card { display: grid; width: min(100%, 960px); min-height: 560px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; background: var(--panel-bg); box-shadow: var(--panel-shadow); }
.auth-panel { position: relative; z-index: 1; display: flex; flex: 1 1 0; flex-direction: column; justify-content: center; padding: 56px 48px 38px; }
.auth-toolbar { position: absolute; top: 14px; right: calc(-100% + 14px); left: auto; z-index: 1; }
.icon-button, .password-toggle { display: inline-grid; place-items: center; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.icon-button { width: 34px; height: 34px; }
.icon-button:hover, .icon-button:focus-visible { color: var(--auth-accent); }
.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon[hidden] { display: none !important; }

.auth-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; color: var(--auth-accent); font-size: 21px; font-weight: 700; letter-spacing: 0; }
.auth-brand img { width: 52px; height: 52px; object-fit: contain; }
.brand-dark { display: none; }
body[data-theme="dark"] .brand-light { display: none; }
body[data-theme="dark"] .brand-dark { display: block; }

h1 { margin: 0 0 7px; color: var(--heading); font-size: 22px; line-height: 1.2; font-weight: 650; }
.auth-copy { max-width: 290px; margin: 0 0 22px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.auth-form { width: 100%; max-width: 300px; }
.auth-form label { display: block; margin-bottom: 6px; color: var(--text); font-size: 14px; font-weight: 600; }
.auth-form input[type="email"], .auth-form input[type="password"], .auth-form input[type="text"] { width: 100%; height: 42px; margin-bottom: 18px; border: 1px solid var(--input-border); border-radius: 6px; padding: 10px 12px; background: var(--input-bg); color: var(--input-text); outline: none; }
.auth-form input:focus { border-color: var(--auth-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--auth-accent) 20%, transparent); }
.password-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.password-label-row a { color: var(--auth-accent); font-size: 13px; text-decoration: none; }
.password-label-row a:hover { text-decoration: underline; }
.password-input-wrap { position: relative; }
.password-input-wrap input { padding-right: 42px !important; }
.password-toggle { position: absolute; right: 5px; top: 3px; width: 36px; height: 36px; border-radius: 4px; }
.password-toggle:hover, .password-toggle:focus-visible { color: var(--auth-accent); background: color-mix(in srgb, var(--auth-accent) 10%, transparent); }
.remember { display: flex !important; align-items: center; gap: 8px; margin: 0 0 20px !important; font-weight: 500 !important; }
.remember input { width: 15px; height: 15px; margin: 0; accent-color: var(--auth-accent); }
.form-message { margin: 0 0 16px; border: 1px solid var(--error-border); padding: 10px 12px; background: var(--error-bg); color: var(--error-text); font-size: 13px; line-height: 1.35; }
.form-message.success { border-color: #72b88a; background: #eaf8ee; color: #1d6b35; }
body[data-theme="dark"] .form-message.success { border-color: #2f7d4b; background: #183524; color: #9ae6b4; }
.text-button { width: 100%; margin-top: 12px; border: 0; padding: 6px; background: transparent; color: var(--auth-accent); cursor: pointer; font-size: 13px; }
.text-button:hover, .text-button:focus-visible { text-decoration: underline; outline: none; }
.sign-in { width: 100%; height: 42px; border: 1px solid var(--sign-in-bg); border-radius: 6px; background: var(--sign-in-bg); color: #fff; font-weight: 700; cursor: pointer; }
.sign-in:hover, .sign-in:focus-visible { border-color: var(--sign-in-hover); background: var(--sign-in-hover); }

.auth-art { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; }
.auth-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.art-dark { display: none !important; }
body[data-theme="dark"] .auth-art { background: var(--panel-bg); }
body[data-theme="light"] .art-light { display: block !important; }
body[data-theme="light"] .art-dark { display: none !important; }
body[data-theme="dark"] .art-light { display: none; }
body[data-theme="dark"] .art-dark { display: block !important; }

@media (max-width: 720px) {
  .auth-shell { padding: 16px; }
  .auth-card { min-height: 0; grid-template-columns: 1fr; }
  .auth-panel { padding: 58px 32px 36px; }
  .auth-toolbar { right: 14px; left: auto; }
  .auth-art { display: none; }
}

@media (max-width: 380px) {
  .auth-panel { padding-left: 24px; padding-right: 24px; }
  .auth-brand { font-size: 18px; }
}