/**
 * auth.css — 统一认证页面样式
 * 适用于 public/auth.php（登录 + 注册）
 * 目标浏览器：2020+ 主流浏览器（Chrome 80+, Firefox 75+, Safari 13.1+, Edge 80+）
 */

[x-cloak] {
    display: none !important;
}

:root {
    --auth-accent: var(--tblr-primary, #2563eb);
    --auth-accent-hover: var(--tblr-primary-emphasis, #1d4ed8);
    --auth-accent-light: rgba(37, 99, 235, 0.08);
    --auth-accent-shadow: rgba(37, 99, 235, 0.15);
    --auth-surface: rgba(255, 255, 255, 0.82);
    --auth-outline: var(--tblr-border-color, #e2e8f0);
    --auth-radius-lg: 1.25rem;
    --auth-radius-sm: var(--tblr-border-radius-sm, 8px);
    --auth-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
   2. 页面布局
   ============================================================================ */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: #f8fafc;
    position: relative;
    overflow-x: hidden;
}

@media (max-width: 768px) {
    .page-center {
        display: block !important;
    }
}

/* 装饰性背景光晕 - 保留核心品牌感 */
.auth-page::before,
.auth-page::after {
    content: "";
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(100px);
    opacity: 0.5;
}

.auth-page::before {
    width: 600px;
    height: 600px;
    top: -10%;
    left: -10%;
    background: rgba(37, 99, 235, 0.1);
}

.auth-page::after {
    width: 500px;
    height: 500px;
    bottom: -10%;
    right: -10%;
    background: rgba(99, 102, 241, 0.08);
}

/* ============================================================================
   3. 容器 (利用 Tabler container-tight，此处仅做微调)
   ============================================================================ */
.auth-card {
    background: var(--auth-surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
    animation: auth-fade-in 0.5s var(--auth-ease);
}

@keyframes auth-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.navbar-brand-image {
    max-height: 4rem;
    width: auto;
    object-fit: contain;
}

/* ============================================================================
   5. 表单控件增强
   ============================================================================ */
.input-icon:focus-within .input-icon-addon {
    color: var(--auth-accent) !important;
    transition: color 0.2s;
}

.form-control:focus {
    border-color: var(--auth-accent);
    box-shadow: 0 0 0 0.25rem var(--auth-accent-shadow);
}

/* ============================================================================
   7. 提交按钮 (微调对齐)
   ============================================================================ */
.auth-submit-btn {
    font-weight: 600;
    background: var(--auth-accent);
    border-color: var(--auth-accent);
    transition: all 0.2s var(--auth-ease);
}

.auth-submit-btn:hover:not(:disabled) {
    background: var(--auth-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--auth-accent-shadow);
}

/* ============================================================================
   9. 密码强度指示器 (自定义组件)
   ============================================================================ */
.auth-strength {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.auth-strength-bar {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--auth-outline);
    overflow: hidden;
}

.auth-strength-fill {
    height: 100%;
    transition: all 0.4s var(--auth-ease);
}

.auth-strength-fill[data-level="weak"] {
    background: var(--tblr-danger);
}
.auth-strength-fill[data-level="medium"] {
    background: var(--tblr-warning);
}
.auth-strength-fill[data-level="strong"] {
    background: var(--tblr-success);
}

.auth-strength-text {
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 4em;
    text-align: right;
}

.auth-strength-text[data-level="weak"] {
    color: var(--tblr-danger);
}
.auth-strength-text[data-level="medium"] {
    color: var(--tblr-warning);
}
.auth-strength-text[data-level="strong"] {
    color: var(--tblr-success);
}

/* ============================================================================
   10. 验证码
   ============================================================================ */
.auth-captcha-img {
    height: 38px;
    border-radius: var(--auth-radius-sm);
    border: 1px solid var(--auth-outline);
    cursor: pointer;
    transition: opacity 0.2s;
}

.auth-captcha-img:hover {
    opacity: 0.8;
}

/* ============================================================================
   11. 状态卡片
   ============================================================================ */
.auth-status-card {
    text-align: center;
    padding: 1.5rem 1rem;
}

.auth-status-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    font-size: 2rem;
}

.auth-status-icon.is-danger {
    background: rgba(var(--tblr-danger-rgb), 0.1);
    color: var(--tblr-danger);
}
.auth-status-icon.is-success {
    background: rgba(var(--tblr-success-rgb), 0.1);
    color: var(--tblr-success);
}
.auth-status-icon.is-warning {
    background: rgba(var(--tblr-warning-rgb), 0.1);
    color: var(--tblr-warning);
}

/* ============================================================================
   12. 已登录横幅
   ============================================================================ */
.auth-logged-in {
    border-radius: var(--auth-radius-sm);
    padding: 1rem;
    background: var(--auth-accent-light);
    border: 1px solid rgba(var(--tblr-primary-rgb), 0.1);
}

/* ============================================================================
   15. 第三方组件适配 (Notiflix)
   ============================================================================ */
[id^="NotiflixNotify"] {
    --notiflix-success: var(--tblr-success);
    --notiflix-error: var(--tblr-danger);
    --notiflix-warning: var(--tblr-warning);
    --notiflix-info: var(--auth-accent);
}

/* ============================================================================
   17. 响应式
   ============================================================================ */
@media (max-width: 480px) {
    .auth-page {
        padding: 1rem;
    }
    .auth-card-header {
        padding: 2rem 1.5rem 1rem;
    }
    .auth-card-body {
        padding: 1rem 1.5rem 1.5rem;
    }
}