/**
 * V13 Auth Modal 补充样式
 * 主要样式通过 Tailwind 类实现
 * 全屏幕自适应版本
 */

/* 淡入动画 */
@keyframes authModalIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

#authModal .glass-card {
    animation: authModalIn 0.3s ease;
}

/* 滚动条隐藏 */
#authModal .glass-card {
    max-height: 85vh;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#authModal .glass-card::-webkit-scrollbar {
    display: none;
}

/* 验证码图片样式 */
#authModal img[alt="验证码"] {
    height: 40px;
    border-radius: 12px;
    cursor: pointer;
    transition: opacity 0.2s;
}

#authModal img[alt="验证码"]:hover {
    opacity: 0.8;
}

/* 复选框美化 */
#authModal input[type="checkbox"] {
    accent-color: #3b82f6;
}

/* 暗色模式补充 */
html.dark #authModal .glass-card,
.dark-theme #authModal .glass-card {
    background: rgba(30, 41, 59, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ==================== 全智能自适应 ==================== */

/* 弹窗容器 padding 自适应 */
#authModal {
    padding: clamp(8px, 3vw, 24px);
}

/* 弹窗卡片宽度自适应 */
#authModal .glass-card {
    max-width: min(24rem, calc(100vw - 1.5rem));
    width: 100%;
    padding: clamp(1rem, 5vw, 2rem);
    border-radius: clamp(12px, 4vw, 20px);
}

/* 标题自适应 */
#authModal h2 {
    font-size: clamp(1rem, 5vw, 1.25rem) !important;
}

/* 表单输入框自适应 */
#authModal input[type="text"],
#authModal input[type="email"],
#authModal input[type="password"] {
    height: clamp(36px, 8vw, 40px);
    font-size: clamp(12px, 3.5vw, 14px);
    padding-left: clamp(0.75rem, 3vw, 1rem);
    padding-right: clamp(0.75rem, 3vw, 1rem);
    border-radius: clamp(8px, 2.5vw, 12px);
}

/* 按钮自适应 */
#authModal button[type="submit"] {
    height: clamp(40px, 9vw, 44px);
    font-size: clamp(13px, 3.5vw, 14px);
    border-radius: clamp(8px, 2.5vw, 12px);
}

/* 验证码发送按钮自适应 */
#authModal button[onclick*="sendRegisterCode"],
#authModal button[onclick*="sendForgotCode"] {
    padding-left: clamp(0.5rem, 2.5vw, 0.75rem);
    padding-right: clamp(0.5rem, 2.5vw, 0.75rem);
    font-size: clamp(10px, 2.8vw, 12px);
    white-space: nowrap;
    min-width: 0;
}

/* 验证码图片自适应 */
#authModal img[alt="验证码"] {
    height: clamp(36px, 8vw, 40px);
    min-width: clamp(80px, 20vw, 100px);
}

/* 标签自适应 */
#authModal label {
    font-size: clamp(10px, 2.8vw, 12px);
}

/* 表单间距自适应 */
#authModal .space-y-3 > * + * {
    margin-top: clamp(0.5rem, 2.5vw, 0.75rem);
}

/* Tab 按钮自适应 */
#authModal .auth-tab {
    font-size: clamp(12px, 3.5vw, 14px);
    padding-bottom: clamp(4px, 1.5vw, 8px);
}

/* Tab 容器间距自适应 */
#authModal .auth-tab + .auth-tab {
    margin-left: 0;
}

/* ==================== H5 适配 (<=640px) ==================== */
@media (max-width: 640px) {
    #authModal {
        align-items: flex-end;
        padding: 0;
    }
    
    #authModal .glass-card {
        max-width: 100%;
        max-height: 90vh;
        border-radius: clamp(12px, 4vw, 16px) clamp(12px, 4vw, 16px) 0 0;
        padding-bottom: calc(clamp(1rem, 5vw, 1.5rem) + env(safe-area-inset-bottom, 0px));
    }
    
    /* 密码行自适应，超小屏变成单列 */
    #authModal .grid-cols-2 {
        gap: clamp(0.375rem, 2vw, 0.5rem);
    }
}

/* ==================== 超小屏幕适配 (<=360px) ==================== */
@media (max-width: 360px) {
    #authModal .glass-card {
        padding: 0.75rem;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    }
    
    #authModal h2 {
        font-size: 0.9rem !important;
        margin-bottom: 0.25rem !important;
    }

    /* 超小屏密码行变单列 */
    #authModal .grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
}