/**
 * common.css - 全局基础架构旗舰版 (v4.5 终极完整版)
 * 
 * 职责：
 * 1. 定义全量全局变量 (玻璃拟态、色彩、间距)
 * 2. 全局盒模型重置 (强制 Box-sizing)
 * 3. 按钮系统 (修复图标重叠，含所有业务变体)
 * 4. 弹窗系统 (修复滚动条溢出圆角问题)
 * 5. 用户中心 & 积分组件
 * 6. Vditor Markdown 渲染重置补丁
 * 7. 全局滚动条美化与加载动画
 */

/* ================== 1. 全量全局变量 ================== */
:root {
    /* 核心色彩 */
    --primary: #66a6ff;
    --primary-light: #89f7fe;
    --accent: #ff9a9e;
    --success: #81c784;
    --warning: #ffb74d;
    --danger: #ff8a80;
    
    /* 文本色值 */
    --text-main: #334155;
    --text-light: #94a3b8;
    
    /* 渐变方案 */
    --primary-grad: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);
    --accent-grad: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    --grad-purple: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);

    /* 玻璃拟态配置 */
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-border: rgba(255, 255, 255, 0.8);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
    --blur-val: 12px;
    
    /* 布局圆角 */
    --radius-lg: 28px;
    --radius-md: 18px;
    --radius-sm: 10px;
}

/* ================== 2. 全局核心重置 (基础骨架) ================== */
* {
    box-sizing: border-box !important;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

/* 全局滚动条美化 (针对 body) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
}

body {
    font-family: "Nunito", "Varela Round", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--text-main);
    background-color: #a1c4fd;
    background-image: 
        radial-gradient(at 0% 0%, rgba(255,220,220,0.4) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(200,230,255,0.7) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(220,220,255,0.4) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(200,240,255,0.7) 0px, transparent 50%);
    background-attachment: fixed;
    background-size: cover;
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
}

a { text-decoration: none !important; color: inherit; transition: 0.2s; }

.container {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 16px;
    width: 100%;
}

/* ================== 3. 导航栏样式 (Navbar) ================== */
.navbar {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur-val));
    -webkit-backdrop-filter: blur(var(--blur-val));
    padding: 12px 20px;
    display: flex; justify-content: space-between; align-items: center;
    position: sticky; top: 0; z-index: 1000;
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
    border-radius: 0 0 24px 24px;
}

.brand {
    display: flex; align-items: center; gap: 10px;
    font-size: 1.4rem; font-weight: 900; color: var(--primary) !important;
}

.brand i { color: var(--accent); font-size: 1.4rem; }

/* ================== 4. 按钮系统 (修复图标重叠) ================== */
.btn, .action-btn, .login-btn {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important; /* 图标文字物理隔离 */
    height: 52px;
    padding: 0 25px !important;
    border: none;
    border-radius: 18px;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* 彻底解决图标飘移/重叠 */
.btn i, .action-btn i, .login-btn i {
    position: static !important; /* 强制取消绝对定位 */
    display: inline-block !important;
    font-size: 18px;
    width: 22px; /* 固定占位 */
    text-align: center;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0; /* 严禁被文字挤压 */
}

.btn:active { transform: scale(0.96); opacity: 0.9; }

/* 按钮颜色变体 */
.btn-primary, .login-btn { background: var(--primary-grad); color: white !important; }
.btn-accent { background: var(--accent-grad); color: white !important; }
.btn-grad-purple { background: var(--grad-purple); color: white !important; }
.btn-ghost { background: rgba(255, 255, 255, 0.6); color: #64748b !important; border: 1px solid #e2e8f0; }
.btn-danger { background: var(--danger); color: white !important; }
.btn-mini { height: 36px; padding: 0 15px !important; font-size: 12px; border-radius: 10px; }

/* ================== 5. 弹窗系统 (修复滚动条溢出) ================== */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(8px);
    z-index: 2000; display: none; justify-content: center; align-items: center; padding: 20px;
}
.modal-overlay.show { display: flex !important; }

.modal-box {
    background: rgba(255, 255, 255, 0.98);
    width: 100%; max-width: 400px;
    padding: 35px 25px;
    border-radius: var(--radius-lg);
    box-shadow: 0 25px 70px rgba(0,0,0,0.2);
    animation: modalPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    max-height: 85vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* --- 弹窗专属精致滚动条 (修复溢出) --- */
.modal-box::-webkit-scrollbar {
    width: 6px;
}
.modal-box::-webkit-scrollbar-track {
    background: transparent;
    margin: 25px 0; /* 轨道缩进，保护圆角不被划过 */
}
.modal-box::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    border: 1px solid transparent;
    background-clip: content-box;
}

@keyframes modalPop {
    from { transform: scale(0.9) translateY(20px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

.modal-title { font-size: 1.5rem; font-weight: 900; color: var(--text-main); text-align: center; margin-bottom: 25px; }
.modal-subtitle { font-size: 12px; color: var(--text-light); text-align: center; margin: -15px 0 20px; }

/* ================== 6. 表单控件 ================== */
.form-group { margin-bottom: 20px; width: 100%; }
.form-label { display: block; font-size: 13px; font-weight: 800; margin-bottom: 8px; color: var(--text-light); }
.form-input {
    width: 100%; padding: 14px 16px; border: 2px solid #f1f5f9;
    border-radius: 15px; font-size: 15px; outline: none; background: #f8fafc;
    color: var(--text-main); transition: 0.2s; font-family: inherit;
}
.form-input:focus { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 4px rgba(102, 166, 255, 0.1); }
textarea.form-input { resize: none; min-height: 100px; }

/* ================== 7. 用户个人中心组件 ================== */
.avatar-lg {
    width: 85px; height: 85px; border-radius: 50%;
    border: 4px solid #fff; object-fit: cover;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    margin-bottom: 10px;
}

.user-info-row { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; font-size: 18px; }

.badge-group {
    background: #f1f5f9; padding: 5px 15px; border-radius: 12px;
    font-size: 12px; color: var(--text-light); font-weight: 800;
    margin: 8px 0 20px; display: inline-block;
}

.credit-bar {
    display: flex; justify-content: space-around;
    background: rgba(255, 255, 255, 0.85);
    padding: 18px; border-radius: 20px; margin-bottom: 25px;
    border: 1px solid var(--glass-border);
}
.credit-item .lbl { font-size: 11px; color: var(--text-light); font-weight: 700; margin-bottom: 5px; }
.credit-item .val { font-size: 20px; font-weight: 900; }
.val.c-money { color: #f57f17; }
.val.c-contri { color: #00b0ff; }
.val.c-growth { color: #81c784; }
.sep { width: 1px; background: #f1f5f9; height: 40px; }

.user-sig-box {
    background: rgba(0, 0, 0, 0.02);
    padding: 15px; border-radius: 15px; border: 1px dashed rgba(0,0,0,0.08);
    font-size: 13px; color: var(--text-light); font-style: italic;
    line-height: 1.8; margin-bottom: 30px; text-align: left;
    white-space: pre-wrap; word-break: break-all;
}

/* ================== 8. Vditor Markdown 渲染补丁 ================== */
.vditor-reset {
    font-family: inherit !important;
    color: var(--text-main) !important;
    line-height: 1.8 !important;
}
.vditor-reset a { color: var(--primary) !important; font-weight: 700; }
.vditor-reset blockquote { border-left: 4px solid var(--primary-light); background: rgba(0,0,0,0.02); padding: 10px 15px; border-radius: 0 8px 8px 0; }
.vditor-reset table { width: 100%; border-collapse: collapse; margin: 15px 0; border-radius: 8px; overflow: hidden; }
.vditor-reset th { background: #f8fafc; padding: 12px; font-weight: 800; }
.vditor-reset td { padding: 10px; border: 1px solid #f1f5f9; }

/* ================== 9. 全局辅助工具 ================== */
.text-center { text-align: center; }
.mt-3 { margin-top: 15px; }
.loading-box { text-align: center; padding: 60px; color: #fff; font-weight: 800; font-size: 1rem; }
.loading-sm { font-size: 12px; color: var(--text-light); }

#toast {
    position: fixed; top: 30px; left: 50%; transform: translateX(-50%) translateY(-100px);
    background: #fff; padding: 12px 35px; border-radius: 50px;
    z-index: 3000; font-weight: 800; box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    border: 1px solid #fff; transition: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#toast.show { transform: translateX(-50%) translateY(0); }
#toast.error { color: var(--danger); border-color: #ffebee; }

/* ================== 10. 移动端适配补丁 ================== */
@media (max-width: 600px) {
    .modal-box { padding: 25px 20px; border-radius: 24px; }
    .btn { height: 48px; font-size: 14px; }
    .navbar { padding: 10px 15px; }
    .credit-item .val { font-size: 17px; }
}

/* ================== 历史记录足迹卡片样式 ================== */
.history-item {
    display: flex !important;
    align-items: center;
    gap: 12px;
    background: #f8fafc;        /* 浅灰色底框 */
    border: 1px solid #e2e8f0;  /* 细边框 */
    padding: 12px;
    border-radius: 16px;        /* 圆角 */
    margin-bottom: 10px;
    cursor: pointer;
    transition: 0.2s;
}

.history-item:hover {
    background: #fff;
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* 缩略图 */
.hist-cover {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    background: #eee;
}

.hist-info {
    flex: 1;
    min-width: 0; /* 防止标题过长撑破容器 */
}

.hist-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.hist-time {
    font-size: 11px;
    color: var(--text-light);
}

/* 状态标签 */
.hist-status {
    font-size: 11px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 8px;
    white-space: nowrap;
}

/* 状态配色方案 */
.hs-pending  { background: #fff7ed; color: #ea580c; } /* 橙色-审核中 */
.hs-approved { background: #f0fdf4; color: #166534; } /* 绿色-已入选 */
.hs-rejected { background: #fef2f2; color: #991b1b; } /* 红色-未入选 */
.hs-shipped  { background: #f0f9ff; color: #075985; } /* 蓝色-已发货 */