/* Shared form styling for the sign-in / sign-up pages (neutral theme, matches
   the settings-panel look of the rest of the site). Uses the --ui-* tokens
   defined in lib/style.css. */
.auth-card { background: #fff; border: 1px solid var(--ui-border); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 640px) { .auth-card { padding: 28px; } }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field > label { font-size: 14px; font-weight: 500; color: var(--ui-text); }
.auth-field > label .opt { font-weight: 400; color: var(--ui-subtle); }
.auth-hint { font-size: 12px; color: var(--ui-subtle); }
.auth-input { width: 100%; padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: 9px; font-size: 15px;
  background: #fff; color: var(--ui-text); transition: border-color .15s, box-shadow .15s; }
.auth-input:focus { outline: none; border-color: var(--ui-accent); box-shadow: 0 0 0 3px rgba(44,132,219,.15); }
.auth-input.is-invalid { border-color: #f0a9a4; }
.auth-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 16px;
  border: 0; border-radius: 9px; background: var(--ui-accent); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s; }
.auth-btn:hover { background: var(--ui-accent-deep); }
.auth-btn:disabled { opacity: .6; cursor: default; }
.auth-msg { font-size: 13px; border-radius: 9px; padding: 9px 12px; border: 1px solid; }
.auth-msg.is-error { color: #b42318; background: #fef3f2; border-color: #fecdca; }
.auth-msg.is-ok { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }
.auth-hint.is-error { color: #b42318; }

/* Dark mode */
html[data-theme="dark"] .auth-card { background: #1c1c1c; }
html[data-theme="dark"] .auth-input:focus { border-color: #3b8fe0 !important; box-shadow: 0 0 0 3px rgba(59,143,224,.25); }
html[data-theme="dark"] .auth-input.is-invalid { border-color: #f87171 !important; }
html[data-theme="dark"] .auth-hint.is-error { color: #f87171; }
html[data-theme="dark"] .auth-msg.is-error { color: #f87171; background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.3); }
html[data-theme="dark"] .auth-msg.is-ok { color: #4ade80; background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.3); }
/* Dark: --ui-accent-deep is a light text blue there; keep the button hover solid. */
html[data-theme="dark"] .auth-btn:hover { background: #2c84db; }