/**
 * 注册页面专用样式
 * 文件作用：为register.php页面提供独立的样式定义
 * 影响文件：register.php - 用户注册页面
 * 创建时间：2025-02-01
 * 作者：Kaka工具箱
 */

/* ================================================
   页面布局样式（继承自login.css的共同部分）
   ================================================ */

/**
 * 页面背景样式
 * 作用：设置注册页面的渐变背景
 */
body {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
}

/**
 * 主容器布局
 * 作用：将注册表单居中显示
 */
.nk-app-root {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
}

/**
 * 注册卡片容器
 * 作用：定义注册表单的背景和阴影效果
 * 注意：比登录表单稍窄，更适合垂直表单布局
 */
.nk-split {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    max-width: 500px;
    width: 100%;
    overflow: hidden;
}

.nk-split-content {
    padding: 60px;
}

/* ================================================
   表单样式
   ================================================ */

/**
 * 表单组间距
 */
.form-group {
    margin-bottom: 25px;
}

/**
 * 表单标签样式
 */
.form-label {
    font-weight: 600;
    color: #364a63;
    margin-bottom: 8px;
}

/**
 * 表单控件样式
 * 作用：输入框的基础样式和状态效果
 */
.form-control {
    border: 2px solid #e5e9f2;
    border-radius: 12px;
    padding: 16px 20px;
    font-size: 16px;
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

/**
 * 表单验证状态样式
 * 作用：实时验证反馈的视觉效果
 */
.form-control.is-valid {
    border-color: #10b981;
}

.form-control.is-invalid {
    border-color: #ef4444;
}

/**
 * 主要按钮样式
 * 作用：注册按钮的渐变效果和状态
 */
.btn-primary {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none;
    border-radius: 12px;
    padding: 16px 30px;
    font-weight: 600;
    font-size: 16px;
    width: 100%;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
}

.btn-primary:disabled {
    opacity: 0.6;
    transform: none;
    box-shadow: none;
}

/* ================================================
   提醒消息样式
   ================================================ */

/**
 * 提醒框基础样式
 */
.alert {
    border: none;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 25px;
}

/**
 * 错误消息样式
 */
.alert-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
}

/**
 * 成功消息样式
 */
.alert-success {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
}

/* ================================================
   品牌标识样式
   ================================================ */

/**
 * 品牌区域样式
 */
.nk-brand {
    text-align: center;
    margin-bottom: 40px;
}

.logo-link {
    font-size: 28px;
    font-weight: 700;
    color: #364a63;
    text-decoration: none;
}

/* ================================================
   底部链接样式
   ================================================ */

/**
 * 表单底部注释区域
 */
.form-note {
    text-align: center;
    margin-top: 25px;
}

.form-note a {
    color: #6366f1;
    text-decoration: none;
    font-weight: 600;
}

.form-note a:hover {
    text-decoration: underline;
}

/* ================================================
   密码强度指示器（注册页面专有）
   ================================================ */

/**
 * 密码强度容器
 * 作用：显示密码强度文本和进度条
 */
.password-strength {
    margin-top: 8px;
    font-size: 14px;
}

/**
 * 强度进度条背景
 * 作用：密码强度的可视化背景
 */
.strength-bar {
    height: 4px;
    border-radius: 2px;
    background: #e5e9f2;
    margin-top: 5px;
    overflow: hidden;
}

/**
 * 强度进度条填充
 * 作用：根据密码强度显示不同长度和颜色
 */
.strength-fill {
    height: 100%;
    transition: all 0.3s ease;
    border-radius: 2px;
}

/**
 * 密码强度等级样式
 * 弱：红色，33%宽度
 */
.strength-weak .strength-fill {
    width: 33%;
    background: #ef4444;
}

/**
 * 中等：橙色，66%宽度
 */
.strength-medium .strength-fill {
    width: 66%;
    background: #f59e0b;
}

/**
 * 强：绿色，100%宽度
 */
.strength-strong .strength-fill {
    width: 100%;
    background: #10b981;
}

/* ================================================
   表单帮助文本
   ================================================ */

/**
 * 表单帮助信息样式
 * 作用：显示字段说明和要求
 */
.form-help {
    font-size: 14px;
    color: #8094ae;
    margin-top: 5px;
}

/* ================================================
   响应式设计
   ================================================ */

/**
 * 移动端适配
 * 作用：在小屏幕设备上调整内边距
 */
@media (max-width: 768px) {
    .nk-split-content {
        padding: 40px 30px;
    }
}