@import url("fonts.css");
@import url("vars.css");
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--most-font); background: var(--most-bg); color: var(--most-text-on-card); min-height: 100vh; }
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.auth-box { background: var(--most-surface); border-radius: var(--most-radius); padding: 40px; width: 100%; max-width: 400px; box-shadow: 0 10px 40px rgba(0,0,0,0.25); }
.auth-logo { font-size: 26px; font-weight: 700; color: var(--most-text-on-card); margin-bottom: 4px; text-align: center; letter-spacing: -0.5px; }
.auth-sub { font-size: 13px; font-weight: 500; color: var(--most-text-on-card-3); margin-bottom: 26px; text-align: center; }
.auth-hint { font-size: 14px; color: var(--most-text-on-card-2); margin-bottom: 20px; text-align: center; line-height: 1.5; }
.auth-hint b { color: var(--most-text-on-card); }
.auth-input { width: 100%; padding: 13px 16px; border: 1.5px solid var(--most-border-card); border-radius: var(--most-radius-sm); font-size: 16px; font-family: var(--most-font); outline: none; transition: border var(--most-transition); margin-bottom: 12px; }
.auth-input:focus { border-color: var(--most-accent); }
.auth-btn { width: 100%; padding: 14px; background: var(--most-gradient-btn); color: var(--most-btn-text); border: none; border-radius: var(--most-radius-sm); font-size: 16px; font-weight: 600; font-family: var(--most-font); cursor: pointer; transition: opacity var(--most-transition), transform var(--most-transition); }
.auth-btn:hover { opacity: 0.92; }
.auth-btn:active { transform: scale(0.99); }
.auth-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.auth-error { background: var(--most-red-soft); color: var(--most-red); border-radius: var(--most-radius-sm); padding: 11px 14px; font-size: 14px; margin-bottom: 16px; text-align: center; }
.auth-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 18px; }
.auth-timer { font-size: 13px; color: var(--most-text-on-card-3); text-align: center; }
.auth-link-btn { background: none; border: none; font-family: var(--most-font); cursor: pointer; padding: 2px 4px; transition: color var(--most-transition); }
.auth-link-accent { color: #C13584; font-size: 15px; font-weight: 600; }
.auth-link-accent:hover { color: #a52a6f; }
.auth-link-muted { color: var(--most-text-on-card-2); font-size: 14px; font-weight: 500; }
.auth-link-muted:hover { color: var(--most-text-on-card); }
.auth-support { margin-top: 22px; text-align: center; font-size: 14px; }
.auth-support-q { color: var(--most-text-on-card-3); }
.auth-support-link { color: #C13584; font-weight: 600; text-decoration: none; margin-left: 4px; transition: color var(--most-transition); }
.auth-support-link:hover { color: #a52a6f; text-decoration: underline; }