/* ── AUTH PAGE STYLES ─────────────────────────── */

.auth-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--ink-050, #F4F4F8)
}

.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--white, #FAFAFA);
    border-radius: 20px;
    padding: 36px 28px;
    box-shadow: 0 4px 24px rgba(10, 10, 15, .08);
    border: 1px solid var(--ink-100, #E8E8F0)
}

.auth-logo {
    text-align: center;
    margin-bottom: 28px
}

.auth-logo-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, #5B4EE8, #7B6CF0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    margin-bottom: 12px;
    box-shadow: 0 4px 16px rgba(91, 78, 232, .3)
}

.auth-logo h1 {
    font-size: 22px;
    font-weight: 800;
    color: var(--ink-900, #0A0A0F);
    margin-bottom: 4px
}

.auth-logo p {
    font-size: 13px;
    color: var(--ink-400, #6B6B88)
}

/* Tabs */
.auth-tabs {
    display: flex;
    background: var(--ink-050, #F4F4F8);
    border-radius: 12px;
    padding: 3px;
    margin-bottom: 24px
}

.auth-tab {
    flex: 1;
    padding: 10px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-400);
    border-radius: 10px;
    cursor: pointer;
    transition: all .2s;
    border: none;
    background: none;
    font-family: inherit
}

.auth-tab.on {
    background: var(--white, white);
    color: var(--violet, #5B4EE8);
    box-shadow: 0 1px 4px rgba(10, 10, 15, .08)
}

/* Form */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.auth-form.hide {
    display: none
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.auth-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-500, #4B4B63)
}

.auth-field input {
    padding: 11px 14px;
    border: 1.5px solid var(--ink-100, #E8E8F0);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    color: var(--ink-900, #0A0A0F);
    background: var(--white, #FAFAFA);
    outline: none;
    transition: border-color .2s
}

.auth-field input:focus {
    border-color: var(--violet, #5B4EE8);
    box-shadow: 0 0 0 3px rgba(91, 78, 232, .1)
}

.auth-field input::placeholder {
    color: var(--ink-300, #9898B0)
}

.auth-submit {
    padding: 13px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #5B4EE8, #7B6CF0);
    color: white;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all .2s;
    margin-top: 4px
}

.auth-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(91, 78, 232, .4)
}

.auth-submit:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none
}

/* Error/Success */
.auth-msg {
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    display: none
}

.auth-msg.error {
    display: block;
    background: #FEF2F2;
    color: #DC2626;
    border: 1px solid #FECACA
}

.auth-msg.success {
    display: block;
    background: #F0FDF4;
    color: #16A34A;
    border: 1px solid #BBF7D0
}

/* Divider */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0;
    color: var(--ink-300);
    font-size: 11px
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--ink-100)
}

/* Footer */
.auth-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 12px;
    color: var(--ink-400)
}

.auth-footer a {
    color: var(--violet, #5B4EE8);
    font-weight: 600;
    text-decoration: none
}

/* Password toggle */
.pw-wrap {
    position: relative
}

.pw-wrap input {
    width: 100%;
    padding-right: 44px
}

.pw-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-300);
    cursor: pointer;
    padding: 4px;
    border: none;
    background: none;
    display: flex
}

/* Dark mode */
[data-theme="dark"] .auth-card {
    background: #1a1a2e;
    border-color: #2a2a3e
}

[data-theme="dark"] .auth-tabs {
    background: #12121e
}

[data-theme="dark"] .auth-tab.on {
    background: #1a1a2e
}

[data-theme="dark"] .auth-field input {
    background: #12121e;
    border-color: #2a2a3e;
    color: #e8e8f0
}