/* ==========================================================
   救赎标屋 · 玻璃拟态设计系统
   视觉取自小程序 app.wxss（rpx 按桌面 1:0.5 换算为 px）
   主题色：--c-primary / --c-primary-rgb （由 config/theme.php 输出）
   ========================================================== */

@font-face {
    font-family: 'CustomFont';
    src: url('/assets/fonts/汉仪文黑.woff2') format('truetype');
    font-weight: 100 500;
    font-display: swap;
}

:root {
    /* 底色 */
    --bg-start: #f7f8fc;
    --bg-end: #eceef5;

    /* 玻璃材质 */
    --glass: rgba(255, 255, 255, 0.55);
    --glass-strong: rgba(255, 255, 255, 0.78);
    --glass-soft: rgba(255, 255, 255, 0.38);
    --glass-hover: rgba(255, 255, 255, 0.72);
    --glass-border: rgba(255, 255, 255, 0.72);
    --glass-hairline: rgba(23, 32, 63, 0.06);
    --glass-sheen: linear-gradient(158deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.44) 52%, rgba(255, 255, 255, 0.6) 100%);
    --glass-inner: inset 0 1px 0 rgba(255, 255, 255, 0.92);

    /* 文字层级 */
    --text: #1b2130;
    --text-light: #5d667c;
    --text-muted: #98a1b3;

    /* 副色（浅黄），页面自定义时以页面内联变量为准 */
    --c-secondary: #ffd9e8;
    --c-secondary-rgb: 255, 217, 232;

    /* 语义色 */
    --success: #12b981;
    --danger: #f04438;
    --warning: #f59e0b;
    --info: #0ea5e9;

    /* 阴影 / 圆角 / 动效 */
    --shadow-sm: 0 1px 2px rgba(23, 32, 63, 0.03), 0 4px 10px -4px rgba(23, 32, 63, 0.16);
    --shadow: 0 1px 3px rgba(23, 32, 63, 0.04), 0 9px 22px -7px rgba(23, 32, 63, 0.2);
    --shadow-lg: 0 4px 12px rgba(23, 32, 63, 0.06), 0 22px 44px -14px rgba(23, 32, 63, 0.3);
    --radius: 18px;
    --radius-sm: 11px;
    --blur: 24px;
    --transition: all 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'CustomFont', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    min-height: 100vh;
    color: var(--text);
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: 0.2px;
    background-color: #eceef5;
    background-image:
        radial-gradient(120% 80% at 50% -18%, #ffffff 0%, rgba(255, 255, 255, 0) 58%),
        linear-gradient(180deg, #f7f8fc 0%, #eceef5 52%, #f3f4f9 100%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
button, input, select, textarea { font-family: inherit; }

/* ========== 极光氛围层：玻璃背后有光 ========== */
.bg-shapes {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.bg-shapes::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(200deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 42%),
        radial-gradient(80% 46% at 50% 108%, rgba(255, 255, 255, 0.46) 0%, rgba(255, 255, 255, 0) 100%);
}
.bg-shape {
    position: absolute;
    border-radius: 50%;
    will-change: transform;
}
.bg-shape:nth-child(1) {
    width: 620px; height: 620px;
    top: -24%; left: -20%;
    opacity: 0.55;
    background: radial-gradient(circle at 30% 30%, rgba(var(--c-primary-rgb), 0.5) 0%, transparent 70%);
    animation: auroraDrift 26s ease-in-out infinite alternate;
}
.bg-shape:nth-child(2) {
    width: 520px; height: 520px;
    top: 30%; right: -22%;
    opacity: 0.42;
    background: radial-gradient(circle at 70% 60%, rgba(var(--c-primary-rgb), 0.38) 0%, transparent 70%);
    animation: auroraDrift 32s ease-in-out infinite alternate-reverse;
}
.bg-shape:nth-child(3) {
    width: 480px; height: 480px;
    bottom: -22%; left: 24%;
    opacity: 0.34;
    background: radial-gradient(circle at 50% 100%, rgba(var(--c-primary-rgb), 0.25) 0%, transparent 70%);
    animation: auroraDrift 38s ease-in-out infinite alternate;
}

@keyframes auroraDrift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(24px, -28px, 0) scale(1.12); }
}
@keyframes glassRise {
    from { opacity: 0; transform: translate3d(0, 13px, 0) scale(0.985); }
    to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* ========== 布局 ========== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px 48px;
    position: relative;
    z-index: 1;
}
.main-content { padding-top: 104px; }

/* ========== 顶部导航：悬浮玻璃条 ========== */
.header {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 1200px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px 8px 16px;
    background-color: var(--glass-strong);
    background-image: var(--glass-sheen);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 22px;
    box-shadow: var(--shadow), var(--glass-inner);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
}
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}
.logo > i {
    width: 30px; height: 30px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    color: var(--c-primary-deep, var(--c-primary));
    background-color: rgba(var(--c-primary-rgb), 0.16);
    background-image: linear-gradient(150deg, rgba(255, 255, 255, 0.95) 0%, rgba(var(--c-primary-rgb), 0.28) 100%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 10px -6px rgba(var(--c-primary-rgb), 0.9);
}
.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-light);
    transition: var(--transition);
    white-space: nowrap;
}
.nav a:hover {
    color: var(--c-primary);
    background: rgba(var(--c-primary-rgb), 0.12);
}
.nav a.active {
    color: #ffffff;
    background-color: var(--c-primary-deep, var(--c-primary));
    background-image: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-deep, var(--c-primary)) 100%);
    text-shadow: 0 1px 2px rgba(80, 25, 55, 0.28);
    box-shadow: 0 10px 20px -10px rgba(var(--c-primary-rgb), 1), inset 0 1px 0 rgba(255, 255, 255, 0.42);
}
.nav-divider { width: 1px; height: 18px; background: rgba(23, 32, 63, 0.08); margin: 0 4px; }
.nav-user {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-light);
    position: relative;
}
.nav-user > i { color: var(--c-primary); }
.nav-user .username { color: var(--text-light); white-space: nowrap; }

/* 下拉菜单 */
.dropdown-trigger { cursor: pointer; }
.dropdown-menu {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    z-index: 999;
    min-width: 190px;
    max-height: min(68vh, 520px);
    overflow-y: auto;
    padding: 8px;
    background-color: rgba(255, 255, 255, 0.9);
    background-image: linear-gradient(158deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.68) 100%);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: var(--transition);
}
.nav-user.open .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 9px;
    font-size: 12.5px;
    color: var(--text);
    white-space: nowrap;
}
.dropdown-menu a:hover { background: rgba(var(--c-primary-rgb), 0.14); color: var(--c-primary); }
.dropdown-menu i { width: 14px; text-align: center; font-size: 12px; color: var(--text-muted); }
.dropdown-menu a:hover i { color: var(--c-primary); }

/* ========== 页面头图卡（对应小程序 page-header-card） ========== */
.page-header-card {
    position: relative;
    overflow: hidden;
    padding: 26px 28px;
    margin-bottom: 18px;
    border-radius: 24px;
    background-color: var(--glass-strong);
    background-image:
        radial-gradient(120% 160% at 0% 0%, rgba(var(--c-primary-rgb), 0.34) 0%, rgba(var(--c-primary-rgb), 0.06) 46%, rgba(255, 255, 255, 0) 72%),
        linear-gradient(158deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.5) 58%, rgba(255, 255, 255, 0.66) 100%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: var(--shadow), var(--glass-inner);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    animation: glassRise 0.55s cubic-bezier(0.22, 0.9, 0.28, 1) backwards;
}
.page-header-card::after {
    content: '';
    position: absolute;
    top: -60%;
    right: -10%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--c-primary-rgb), 0.42) 0%, rgba(var(--c-primary-rgb), 0) 66%);
    pointer-events: none;
}
.page-title {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--text);
    margin-bottom: 8px;
}
.page-desc {
    position: relative;
    z-index: 1;
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.6;
}

/* 图标盒（对应小程序 icon-box） */
.icon-box {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--c-primary-deep, var(--c-primary));
    background-color: rgba(var(--c-primary-rgb), 0.16);
    background-image: linear-gradient(150deg, rgba(255, 255, 255, 0.95) 0%, rgba(var(--c-primary-rgb), 0.28) 100%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 6px 14px -6px rgba(var(--c-primary-rgb), 0.85), var(--glass-inner);
}

/* ========== 玻璃卡片 ========== */
.card {
    position: relative;
    background-color: var(--glass);
    background-image: var(--glass-sheen);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: var(--shadow), var(--glass-inner);
    backdrop-filter: blur(var(--blur)) saturate(175%);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(175%);
    transition: var(--transition);
    margin-bottom: 18px;
}
.card-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--text);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.card-title::before {
    content: '';
    width: 3px;
    height: 15px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--c-primary) 0%, rgba(var(--c-primary-rgb), 0.34) 100%);
    box-shadow: 0 0 6px rgba(var(--c-primary-rgb), 0.6);
}
.card-title i { color: var(--c-primary-deep, var(--c-primary)); }

/* 旧页面标题栏自带左右两端布局时，去掉左侧竖条，避免标题被挤到中间 */
.card-title[style*="space-between"]::before { display: none; }

/* ========== 快捷入口 / 筛选胶囊 ========== */
.nav-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.nav-btn,
.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-light);
    background-color: rgba(255, 255, 255, 0.5);
    background-image: linear-gradient(158deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.46) 100%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 2px 6px -3px rgba(23, 32, 63, 0.2), var(--glass-inner);
    transition: var(--transition);
    white-space: nowrap;
    cursor: pointer;
}
.nav-btn i,
.filter-btn i { font-size: 12px; color: var(--c-primary-deep, var(--c-primary)); }
.nav-btn:hover,
.filter-btn:hover {
    color: var(--c-primary);
    transform: translateY(-1px);
    border-color: rgba(var(--c-primary-rgb), 0.5);
    box-shadow: 0 8px 18px -10px rgba(var(--c-primary-rgb), 0.9);
}
.filter-btn.active {
    color: #ffffff;
    border-color: transparent;
    background-color: var(--c-primary);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 52%);
    text-shadow: 0 1px 2px rgba(35, 20, 30, 0.16);
    box-shadow: 0 8px 18px -10px rgba(var(--c-primary-rgb), 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.filter-btn.active i { color: #ffffff; }
.filter-buttons-group { display: inline-flex; align-items: center; gap: 6px; }
.desktop-filter-group { display: inline-flex; margin-left: auto; }
.mobile-filter-group { display: none; margin-bottom: 10px; }

/* ========== 工具卡片 ========== */
.grid { display: grid; gap: 14px; }
.grid-3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.func-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: 16px;
    height: 100%;
    color: inherit;
    background-color: rgba(255, 255, 255, 0.66);
    background-image: linear-gradient(158deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.6) 56%, rgba(255, 255, 255, 0.72) 100%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: var(--shadow-sm), var(--glass-inner);
    transition: var(--transition);
    animation: glassRise 0.5s cubic-bezier(0.22, 0.9, 0.28, 1) backwards;
}
.func-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--c-primary-rgb), 0.55);
    box-shadow: var(--shadow), var(--glass-inner);
    background-image:
        radial-gradient(130% 140% at 0% 0%, rgba(var(--c-primary-rgb), 0.22) 0%, rgba(255, 255, 255, 0) 62%),
        linear-gradient(158deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.7) 100%);
}
.func-card .icon-box { width: 38px; height: 38px; border-radius: 11px; font-size: 16px; }
.func-body { min-width: 0; }
.func-card h4 {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text);
    margin-bottom: 3px;
}
.func-card p {
    font-size: 12px;
    color: var(--text-light);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ========== 按钮 ========== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 22px;
    border-radius: 999px;
    border: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}
.btn:active { transform: scale(0.975); }
.btn i { color: inherit; }
.btn-primary {
    position: relative;
    color: #ffffff;
    background-color: var(--c-primary);
    background-image:
        linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 46%),
        linear-gradient(135deg, rgba(var(--c-primary-rgb), 0.92) 0%, rgba(var(--c-primary-rgb), 0.72) 56%, rgba(56, 30, 46, 0.22) 100%);
    text-shadow: 0 1px 2px rgba(35, 20, 30, 0.18);
    box-shadow: 0 10px 24px -10px rgba(var(--c-primary-rgb), 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -12px rgba(var(--c-primary-rgb), 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.btn-ghost {
    color: var(--text-light);
    background-color: rgba(255, 255, 255, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: var(--glass-inner);
}
.btn-ghost:hover { color: var(--c-primary); background-color: rgba(var(--c-primary-rgb), 0.16); }
.logout-btn { padding: 6px 12px !important; font-size: 12px !important; }

/* ========== 表单 ========== */
.form-group { margin-bottom: 18px; }
label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}
label i { color: var(--c-primary); }
input[type="text"],
input[type="number"],
input[type="password"],
select,
textarea {
    width: 100%;
    padding: 12px 14px;
    font-size: 14px;
    color: var(--text);
    background-color: rgba(255, 255, 255, 0.58);
    background-image: linear-gradient(158deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.52) 100%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 2px 6px rgba(23, 32, 63, 0.05), 0 1px 0 rgba(255, 255, 255, 0.85);
    transition: var(--transition);
    outline: none;
}
input:focus, select:focus, textarea:focus {
    border-color: rgba(var(--c-primary-rgb), 0.75);
    background-color: rgba(255, 255, 255, 0.76);
    box-shadow: 0 0 0 4px rgba(var(--c-primary-rgb), 0.16), inset 0 2px 6px rgba(23, 32, 63, 0.04);
}
input::placeholder, textarea::placeholder { color: #9ca3af; }

/* 上传区 */
.upload-area {
    padding: 26px 18px;
    text-align: center;
    cursor: pointer;
    border-radius: 16px;
    border: 1.5px dashed rgba(var(--c-primary-rgb), 0.5);
    background-color: rgba(255, 255, 255, 0.5);
    background-image: linear-gradient(158deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.5) 100%);
    box-shadow: var(--glass-inner);
    transition: var(--transition);
}
.upload-area:hover,
.upload-area.dragover {
    border-color: var(--c-primary);
    background-image:
        radial-gradient(120% 130% at 50% 0%, rgba(var(--c-primary-rgb), 0.22) 0%, rgba(255, 255, 255, 0) 70%),
        linear-gradient(158deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.6) 100%);
    transform: translateY(-1px);
}
.upload-icon {
    width: 46px; height: 46px;
    margin: 0 auto 10px;
    border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    font-size: 19px;
    color: var(--c-primary);
    background-color: rgba(var(--c-primary-rgb), 0.16);
    background-image: linear-gradient(150deg, rgba(255, 255, 255, 0.95) 0%, rgba(var(--c-primary-rgb), 0.28) 100%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 6px 14px -6px rgba(var(--c-primary-rgb), 0.85);
}
.upload-text { font-size: 13px; color: var(--text); margin-bottom: 4px; }
.upload-tip { font-size: 12px; color: var(--text-muted); }

/* 结果提示 */
.tech-info {
    margin-top: 18px;
    padding: 18px;
    text-align: center;
    border-radius: 14px;
    background-color: rgba(var(--c-primary-rgb), 0.1);
    background-image: linear-gradient(158deg, rgba(255, 255, 255, 0.8) 0%, rgba(var(--c-primary-rgb), 0.12) 100%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: var(--glass-inner);
}
.tech-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.tech-title i { color: var(--success); }
.tech-text { font-size: 12.5px; color: var(--text-light); line-height: 1.6; }
.download-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    background-color: var(--c-secondary);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 55%);
    box-shadow: 0 10px 22px -10px rgba(var(--c-secondary-rgb), 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    text-shadow: 0 1px 2px rgba(60, 40, 10, 0.2);
    transition: var(--transition);
}
.download-btn:hover { transform: translateY(-1px); }

/* ========== 公告弹窗 ========== */
.popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(20, 26, 42, 0.38);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.popup-overlay.show { opacity: 1; visibility: visible; }
.popup-card {
    width: 100%;
    max-width: 460px;
    max-height: 82vh;
    overflow-y: auto;
    padding: 26px;
    border-radius: 22px;
    background-color: rgba(255, 255, 255, 0.74);
    background-image: linear-gradient(158deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.62) 60%, rgba(255, 255, 255, 0.76) 100%);
    border: 1px solid rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(36px) saturate(190%);
    -webkit-backdrop-filter: blur(36px) saturate(190%);
    box-shadow: 0 22px 48px -16px rgba(20, 26, 42, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.96);
    animation: modalPop 0.34s cubic-bezier(0.22, 1.1, 0.3, 1) both;
}
@keyframes modalPop {
    from { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.94); }
    to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
.popup-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.popup-header .icon-box { width: 38px; height: 38px; border-radius: 11px; font-size: 16px; }
.popup-header h3 { font-size: 17px; font-weight: 600; color: var(--text); }
.popup-body { margin-bottom: 20px; }
.popup-body p { font-size: 13px; line-height: 1.75; color: var(--text-light); margin-bottom: 8px; }
.popup-body p:last-child { margin-bottom: 0; }
.popup-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 16px;
    border-top: 1px solid rgba(23, 32, 63, 0.06);
}
.popup-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-light);
    cursor: pointer;
    user-select: none;
}
.popup-checkbox input[type="checkbox"] { display: none; }
.popup-checkbox .check-icon {
    width: 18px; height: 18px;
    border-radius: 6px;
    border: 1.5px solid rgba(var(--c-primary-rgb), 0.8);
    background: rgba(var(--c-primary-rgb), 0.06);
    display: flex; align-items: center; justify-content: center;
    transition: var(--transition);
}
.popup-checkbox .check-icon::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 10px;
    color: #fff;
    opacity: 0;
    transform: scale(0.6);
    transition: var(--transition);
}
.popup-checkbox input:checked + .check-icon {
    background-color: var(--c-primary);
    border-color: var(--c-primary);
    box-shadow: 0 4px 10px -4px rgba(var(--c-primary-rgb), 0.9);
}
.popup-checkbox input:checked + .check-icon::after { opacity: 1; transform: scale(1); }
.popup-btn {
    padding: 10px 22px;
    border: none;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
    background-color: var(--c-primary);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 55%);
    text-shadow: 0 1px 2px rgba(35, 20, 30, 0.18);
    box-shadow: 0 8px 18px -8px rgba(var(--c-primary-rgb), 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: var(--transition);
}
.popup-btn:hover { transform: translateY(-1px); }
.popup-btn.disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; }

/* ========== 工具结果弹窗 ========== */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 26, 42, 0.38);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal-box {
    width: 90%;
    max-width: 380px;
    padding: 26px;
    text-align: center;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.94);
    background-image:
        radial-gradient(120% 100% at 0% 0%, rgba(255, 205, 228, 0.72) 0%, rgba(255, 205, 228, 0.16) 42%, rgba(255, 255, 255, 0) 70%),
        linear-gradient(158deg, rgba(255, 255, 255, 0.99) 0%, rgba(255, 246, 250, 0.96) 50%, rgba(255, 255, 255, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(26px) saturate(170%);
    -webkit-backdrop-filter: blur(26px) saturate(170%);
    box-shadow: 0 24px 60px -18px rgba(var(--c-primary-rgb, 255, 189, 218), 0.45), 0 12px 28px -14px rgba(23, 32, 63, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.98);
    transform: translateY(-10px) scale(0.97);
    transition: all 0.3s ease;
}
.modal-overlay.active .modal-box { transform: translateY(0) scale(1); }
.modal-icon { font-size: 34px; margin-bottom: 10px; }
.modal-icon.success { color: var(--success); }
.modal-icon.error { color: var(--danger); }
.modal-message { font-size: 13px; color: var(--text); margin-bottom: 18px; }
.modal-close {
    padding: 9px 22px;
    border: none;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
    background-color: var(--c-primary);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 55%);
    box-shadow: 0 8px 18px -8px rgba(var(--c-primary-rgb), 0.9);
    transition: var(--transition);
}

/* ========== Toast（全站统一 · 浅粉玻璃） ========== */
.toast-container {
    position: fixed;
    top: 88px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.toast-container .toast {
    pointer-events: auto;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 210px;
    max-width: min(86vw, 430px);
    padding: 10px 14px 10px 12px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: .2px;
    color: var(--text);
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 0.97);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.99) 0%, rgba(255, 252, 254, 0.97) 100%);
    border: 1px solid rgba(var(--c-primary-rgb), 0.22);
    box-shadow:
        0 10px 26px -22px rgba(var(--c-primary-rgb), 0.45),
        0 2px 8px rgba(23, 32, 63, 0.035),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
    overflow: hidden;
    animation: toastIn 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
/* 左侧浅粉氛围条：所有状态统一 */
.toast-container .toast::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 2px;
    border-radius: 0 2px 2px 0;
    background: linear-gradient(180deg, rgba(var(--c-primary-rgb), 0.38) 0%, rgba(var(--c-primary-rgb), 0.08) 100%);
}
/* 图标：无底色、无描边、无滤镜，仅一枚浅粉图标 */
.toast-container .toast > i:first-child:not(.toast-close),
.toast-container .toast > .toast-icon:not(.toast-close) {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    font-size: 13px;
    background: none;
    box-shadow: none;
    color: var(--c-primary);
    opacity: 0.8;
}
.toast-container .toast > span {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}
.toast-container .toast-close {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
    border-radius: 50%;
    font-size: 11px;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0.7;
    transition: var(--transition);
}
.toast-container .toast-close:hover {
    opacity: 1;
    color: var(--c-primary-deep, #b85c85);
    background: rgba(var(--c-primary-rgb), 0.16);
}
/* 状态仅通过图标形状区分，配色统一浅粉 */
.toast-container .toast.success,
.toast-container .toast.error,
.toast-container .toast.warning,
.toast-container .toast.info {
    color: var(--text);
    border-color: rgba(var(--c-primary-rgb), 0.22);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.99) 0%, rgba(255, 252, 254, 0.97) 100%);
}
.toast-container .toast.success > i:first-child:not(.toast-close),
.toast-container .toast.error > i:first-child:not(.toast-close),
.toast-container .toast.warning > i:first-child:not(.toast-close),
.toast-container .toast.info > i:first-child:not(.toast-close),
.toast-container .toast.success > .toast-icon,
.toast-container .toast.error > .toast-icon,
.toast-container .toast.warning > .toast-icon,
.toast-container .toast.info > .toast-icon {
    background: none;
    box-shadow: none;
    color: var(--c-primary);
    opacity: 0.8;
}
@keyframes toastIn {
    from { opacity: 0; transform: translate3d(0, -10px, 0) scale(0.96); }
    to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes toastOut {
    from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    to   { opacity: 0; transform: translate3d(0, -8px, 0) scale(0.97); }
}

/* ========== 响应式 ========== */
@media (max-width: 1100px) {
    .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mobile-filter-group { display: inline-flex; }
    .desktop-filter-group { display: none; }
}
@media (max-width: 640px) {
    .container { padding: 0 12px 40px; }
    .main-content { padding-top: 88px; }
    .header { top: 10px; width: calc(100% - 20px); padding: 7px 10px 7px 12px; border-radius: 18px; }
    .logo { font-size: 13.5px; gap: 8px; }
    .nav a span { display: none; }
    .nav a { padding: 8px 10px; }
    .nav-user .username { display: none; }
    .nav-divider { margin: 0 2px; }
    .page-header-card { padding: 20px; border-radius: 20px; }
    .page-title { font-size: 19px; gap: 10px; }
    .icon-box { width: 40px; height: 40px; border-radius: 12px; font-size: 16px; }
    .func-card { padding: 14px; gap: 10px; }
    .func-card .icon-box { width: 34px; height: 34px; border-radius: 10px; font-size: 14px; }
    .func-card h4 { font-size: 14px; }
    .func-card p { font-size: 11.5px; }
    .card { padding: 18px; border-radius: 16px; }
    .toast-container { top: 78px; right: 12px; left: 12px; align-items: stretch; }
    .toast-container .toast { min-width: 0; max-width: none; width: 100%; }
}
@media (max-width: 400px) {
    .grid-3 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ==========================================================
   全站兼容层
   旧页面在 </head> 末尾引入本文件，同优先级规则会覆盖其内联样式，
   因此无需改动各页面结构即可统一到新视觉。
   ========================================================== */

/* 顶栏：带用户区时三栏居中（logo 左 / 导航居中 / 用户右） */
.header:has(> .nav-user) {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-content: normal;
}
.header:has(> .nav-user) > .logo { justify-self: start; }
.header:has(> .nav-user) > nav.nav { justify-self: center; }
.header > .nav-user { justify-self: end; }
@media (max-width: 860px) {
    .header:has(> .nav-user) { display: flex; justify-content: space-between; }
    .header:has(> .nav-user) > nav.nav { justify-self: auto; }
}

/* 头像 + 用户名外壳 */
.user-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 12px 2px 2px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 5px 12px -10px rgba(23, 32, 63, 0.5);
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}
.user-chip:hover {
    background-color: #ffffff;
    box-shadow: 0 8px 16px -11px rgba(23, 32, 63, 0.55);
}
.nav-user {
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.85);
    padding: 3px 4px;
    border-radius: 999px;
    gap: 5px;
}
.nav-user .user-chip .username { color: var(--text); font-weight: 600; }
.nav-user .username { color: var(--text-light); font-weight: 500; margin-right: 0; line-height: 1; }
.nav-user .user-avatar,
.nav-user .username { cursor: pointer; transition: var(--transition); }
.nav-user .user-avatar:hover { box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb), 0.45); }
.nav-user .username:hover { color: var(--c-primary-deep, var(--c-primary)); }
.nav-user .logout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 0 !important;
}
.nav-user .logout-btn i {
    display: block;
    position: relative;
    top: 1px;
    line-height: 1;
    font-size: 12px;
}
.user-avatar {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--c-primary-deep, #c74b86);
    background-image: linear-gradient(150deg, #ffffff 0%, rgba(var(--c-primary-rgb), 0.55) 100%);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 10px -6px rgba(var(--c-primary-rgb), 0.9);
}
.logo { font-weight: 600; }
.logo > i { flex: 0 0 auto; }

/* 顶栏滚动收缩 */
.header.is-scrolled {
    top: 10px;
    padding-top: 6px;
    padding-bottom: 6px;
    background-color: rgba(255, 255, 255, 0.86);
    box-shadow: var(--shadow-lg), var(--glass-inner);
}

/* 旧页面 <h3 class="page-title"><i></i>标题</h3> 自动渲染成头图卡 */
.container > .page-title,
.main-content > .page-title {
    position: relative;
    overflow: hidden;
    padding: 24px 26px;
    margin-bottom: 18px;
    border-radius: 24px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--text);
    background-color: var(--glass-strong);
    background-image:
        radial-gradient(120% 160% at 0% 0%, rgba(var(--c-primary-rgb), 0.34) 0%, rgba(var(--c-primary-rgb), 0.06) 46%, rgba(255, 255, 255, 0) 72%),
        linear-gradient(158deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.5) 58%, rgba(255, 255, 255, 0.66) 100%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: var(--shadow), var(--glass-inner);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
}
.container > .page-title > i,
.main-content > .page-title > i,
.container > .page-title > .icon-box,
.main-content > .page-title > .icon-box {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--c-primary-deep, var(--c-primary));
    background-color: rgba(var(--c-primary-rgb), 0.16);
    background-image: linear-gradient(150deg, rgba(255, 255, 255, 0.95) 0%, rgba(var(--c-primary-rgb), 0.28) 100%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 6px 14px -6px rgba(var(--c-primary-rgb), 0.85), var(--glass-inner);
}

/* 卡片内标题：旧页面用行内粉色，统一为深色字 + 粉色图标 */
.card > h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--text) !important;
}
.card > h4 > i { color: var(--c-primary-deep, var(--c-primary)); }

/* 分段切换（旧页面 .mode-switch） */
.mode-switch .btn.active-mode {
    border-style: solid;
    border-color: rgba(var(--c-primary-rgb), 0.85);
    background-color: rgba(var(--c-primary-rgb), 0.2);
    color: var(--c-primary-deep, var(--c-primary));
    font-weight: 600;
}
.mode-switch .btn:not(.active-mode) { color: var(--text-light); }

/* 卡片 hover 保持玻璃质感 */
.card:hover {
    background-color: var(--glass-hover);
    background-image: var(--glass-sheen);
}

/* 按钮 */
.btn-primary:hover { filter: none; }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.btn-ghost { background-color: rgba(255, 255, 255, 0.42); }
.mode-switch .btn { border-radius: 999px; }

/* 表单 */
label { display: flex; }

/* 上传区图标（旧页面把图标直接画在 .upload-icon 上） */
.upload-icon {
    margin: 0 auto 10px;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: var(--c-primary-deep, var(--c-primary));
    background-color: rgba(var(--c-primary-rgb), 0.16);
    background-image: linear-gradient(150deg, rgba(255, 255, 255, 0.95) 0%, rgba(var(--c-primary-rgb), 0.28) 100%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 6px 14px -6px rgba(var(--c-primary-rgb), 0.85);
}
.upload-icon i { font-size: inherit; }

/* 提示 / 下载 */
.tech-title { color: var(--text); }
.download-btn { border-radius: 999px; }
.modal-close,
.popup-btn { text-shadow: 0 1px 2px rgba(35, 20, 30, 0.18); }

/* 表头统一字色 */
th { color: var(--text-light); font-weight: 600; }

/* 滚动条与选中色 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(23, 32, 63, 0.16);
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(23, 32, 63, 0.28); background-clip: content-box; }
::selection { background: rgba(var(--c-primary-rgb), 0.45); color: var(--text); }

@media (max-width: 640px) {
    .container > .page-title,
    .main-content > .page-title { padding: 20px; border-radius: 20px; font-size: 19px; gap: 10px; }
    .container > .page-title > i,
    .main-content > .page-title > i { width: 40px; height: 40px; border-radius: 12px; font-size: 16px; }
}

/* ========== 首页数据面板 ========== */
.dash-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.dash-hello {
    position: relative;
    z-index: 1;
    margin-bottom: 6px;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--text);
}
.dash-hero .page-desc { margin: 0; }

/* 快捷服务 Dock */
.quick-dock {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-bottom: 18px;
    padding: 5px;
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: var(--shadow-sm), var(--glass-inner);
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
}
.dock-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 6px 8px;
    border-radius: 11px;
    text-decoration: none;
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
    transition: var(--transition);
}
.dock-item + .dock-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 20px;
    transform: translateY(-50%);
    background-color: rgba(23, 32, 63, 0.08);
    transition: opacity 0.2s ease;
}
.dock-item:hover,
.dock-item:focus-visible {
    background-color: rgba(var(--c-primary-rgb), 0.13);
    color: var(--c-primary-deep, var(--c-primary));
}
.dock-item:hover::before,
.dock-item:hover + .dock-item::before,
.dock-item:focus-visible::before,
.dock-item:focus-visible + .dock-item::before { opacity: 0; }
.dock-icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    color: var(--c-primary-deep, #d9558c);
    background-image: linear-gradient(140deg, rgba(255, 255, 255, 0.92) 0%, rgba(var(--c-primary-rgb), 0.5) 100%);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 7px 14px -8px rgba(var(--c-primary-rgb), 1);
    transition: var(--transition);
}
.dock-item:hover .dock-icon {
    transform: translateY(-1px) rotate(-5deg);
    background-image: linear-gradient(140deg, var(--c-primary) 0%, rgba(var(--c-primary-rgb), 0.62) 100%);
    box-shadow: 0 9px 18px -7px rgba(var(--c-primary-rgb), 1);
}

/* 近 7 日打标图 */
.dash-chart .card-head { margin-bottom: 14px; }
.chart-sub {
    margin-top: 4px;
    font-size: 10.5px;
    letter-spacing: 0.8px;
    color: var(--text-muted);
}
.chart-body {
    position: relative;
    height: 196px;
    margin: 4px 0 22px;
}
.chart-grid {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}
.chart-grid span {
    display: block;
    height: 1px;
    background-color: rgba(23, 32, 63, 0.06);
}
.chart-bars {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 0 6px 22px;
}
.chart-col {
    position: relative;
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
}
.chart-bar {
    width: min(34px, 58%);
    min-height: 4px;
    border-radius: 8px 8px 5px 5px;
    background-image: linear-gradient(180deg, var(--c-primary) 0%, rgba(var(--c-primary-rgb), 0.45) 100%);
    box-shadow: 0 8px 16px -8px rgba(var(--c-primary-rgb), 0.95);
    transition: var(--transition);
}
.chart-col:hover .chart-bar {
    filter: saturate(1.2);
    box-shadow: 0 10px 20px -8px rgba(var(--c-primary-rgb), 1);
}
.chart-date {
    position: absolute;
    bottom: -20px;
    font-size: 10.5px;
    color: var(--text-muted);
    white-space: nowrap;
}
.chart-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px dashed rgba(23, 32, 63, 0.07);
    font-size: 11.5px;
    color: var(--text-muted);
}
.chart-foot b {
    font-weight: 700;
    color: var(--c-primary-deep, var(--c-primary));
}
.chart-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: var(--c-primary-deep, var(--c-primary));
    background-color: rgba(var(--c-primary-rgb), 0.14);
    border: 1px solid rgba(255, 255, 255, 0.85);
}

/* 统计卡 */
.dash-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}
.stat-card {
    position: relative;
    overflow: hidden;
    padding: 16px 18px 18px;
    border-radius: 18px;
    background-color: var(--glass);
    background-image: var(--glass-sheen);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow), var(--glass-inner);
    backdrop-filter: blur(var(--blur)) saturate(170%);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(170%);
    transition: var(--transition);
    animation: glassRise 0.5s cubic-bezier(0.22, 0.9, 0.28, 1) backwards;
}
.stat-card:nth-child(2) { animation-delay: 0.05s; }
.stat-card:nth-child(3) { animation-delay: 0.1s; }
.stat-card:nth-child(4) { animation-delay: 0.15s; }
.stat-card::after {
    content: '';
    position: absolute;
    top: -46px;
    right: -34px;
    width: 124px;
    height: 124px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--c-primary-rgb), 0.3) 0%, rgba(var(--c-primary-rgb), 0) 70%);
    pointer-events: none;
}
.stat-card:hover {
    transform: translateY(-3px);
    background-color: var(--glass-hover);
    box-shadow: var(--shadow-lg), var(--glass-inner);
}
.stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--c-primary-deep, var(--c-primary));
    background-color: rgba(var(--c-primary-rgb), 0.16);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 6px 14px -8px rgba(var(--c-primary-rgb), 0.9);
}
.stat-tag {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    background-color: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.8);
}
.stat-value {
    font-size: 32px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -1.2px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.stat-unit {
    margin-left: 5px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--text-light);
}
.stat-label {
    margin-top: 6px;
    font-size: 13px;
    color: var(--text-light);
}
.stat-sub {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-muted);
}

/* 主区域布局 */
.dash-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}
.dash-grid > .card {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}
.dash-grid .dash-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.dash-recent { margin-top: 18px; }
.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.card-head .card-title { margin-bottom: 0; }
.card-more,
.card-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
}
.card-more:hover { color: var(--c-primary-deep, var(--c-primary)); }
.card-more i { font-size: 9px; }

/* 最近打标动态 */
.activity-list { display: flex; flex-direction: column; }
.activity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 4px;
    border-bottom: 1px dashed rgba(23, 32, 63, 0.07);
}
.activity-item:last-child { border-bottom: none; }
.activity-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--c-primary-deep, var(--c-primary));
    background-color: rgba(var(--c-primary-rgb), 0.14);
}
.activity-main { flex: 1; min-width: 0; }
.activity-file {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.activity-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--text-muted);
}
.activity-meta i { font-size: 10px; opacity: 0.8; }
.meta-dot { opacity: 0.5; }
.type-badge {
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--c-primary-deep, var(--c-primary));
    background-color: rgba(var(--c-primary-rgb), 0.16);
}
.activity-time {
    flex: 0 0 auto;
    font-size: 11.5px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* 空状态 */
.dash-empty {
    padding: 36px 16px;
    text-align: center;
    color: var(--text-muted);
}
.dash-empty i { display: block; margin-bottom: 10px; font-size: 26px; opacity: 0.35; }
.dash-empty p { margin-bottom: 4px; font-size: 13.5px; color: var(--text-light); }
.dash-empty span { font-size: 11.5px; color: var(--text-muted); }
.dash-empty.compact { padding: 22px 8px; }

/* 群聊列表 */
.group-list { display: flex; flex-direction: column; }
.group-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 4px;
    border-bottom: 1px dashed rgba(23, 32, 63, 0.07);
}
.group-row:last-child { border-bottom: none; }
.group-avatar {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--c-primary-deep, var(--c-primary));
    background-color: rgba(var(--c-primary-rgb), 0.13);
}
.group-info { flex: 1; min-width: 0; }
.group-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.group-meta {
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.group-today {
    flex: 0 0 auto;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.group-today i {
    display: block;
    font-style: normal;
    font-size: 9.5px;
    font-weight: 400;
    opacity: 0.7;
}
.group-today.is-hot { color: var(--c-primary-deep, var(--c-primary)); }

@media (max-width: 900px) {
    .quick-dock { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dock-item + .dock-item::before { display: none; }
    .dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .dash-hello { font-size: 19px; }
    .quick-dock { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 6px; }
    .dock-item { justify-content: flex-start; padding: 7px 12px; }
    .dash-stats { gap: 12px; }
    .stat-card { padding: 15px 16px 16px; border-radius: 16px; }
    .stat-value { font-size: 26px; }
    .activity-time { display: none; }
}
@media (max-width: 400px) {
    .dash-stats { grid-template-columns: 1fr; }
}

/* 顶栏 logo 图标：站点图标 + 粉色描边光晕 */
.logo > i {
    width: 32px;
    height: 32px;
    padding: 2px;
    border-radius: 9px;
    background-color: transparent;
    background-image: url('/apple-touch-icon.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-origin: content-box;
    background-clip: content-box;
    border: 1.5px solid rgba(var(--c-primary-rgb), 0.8);
    box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb), 0.22), 0 6px 12px -8px rgba(var(--c-primary-rgb), 0.85);
    color: transparent !important;
    font-size: 0 !important;
    overflow: hidden;
}

/* ========== 功能汇总：筛选条（与首页快捷 Dock 同风格） ========== */
.filter-bar {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 0.55);
    box-shadow: var(--shadow-sm), var(--glass-inner);
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
}
.filter-chip {
    position: relative;
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 10px;
    border: 0;
    border-radius: 11px;
    background: none;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--text);
    cursor: pointer;
    transition: var(--transition);
}
.filter-chip > i {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    color: var(--c-primary-deep, #d98ab0);
    background-image: linear-gradient(140deg, #ffffff 0%, rgba(var(--c-primary-rgb), 0.55) 100%);
    border: 1px solid #ffffff;
    box-shadow: 0 4px 10px -8px rgba(var(--c-primary-rgb), 1);
    opacity: 1;
    transition: var(--transition);
}

/* ========== 全局弹窗统一：白色玻璃 + 粉色点缀 ========== */
.modal-content,
.modal-dialog,
.popup-content {
    background-color: rgba(255, 255, 255, 0.94) !important;
    background-image:
        radial-gradient(120% 100% at 0% 0%, rgba(255, 205, 228, 0.72) 0%, rgba(255, 205, 228, 0.16) 42%, rgba(255, 255, 255, 0) 70%),
        linear-gradient(158deg, rgba(255, 255, 255, 0.99) 0%, rgba(255, 246, 250, 0.96) 50%, rgba(255, 255, 255, 0.98) 100%) !important;
    border-color: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 24px 60px -18px rgba(var(--c-primary-rgb, 255, 189, 218), 0.45), 0 12px 28px -14px rgba(23, 32, 63, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(26px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(26px) saturate(170%) !important;
}
.filter-chip em {
    min-width: 0;
    padding: 0;
    background: none;
    font-style: normal;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    opacity: 0.9;
    transition: var(--transition);
}
.filter-chip + .filter-chip::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 50%;
    width: 1px;
    height: 20px;
    transform: translateY(-50%);
    background-color: rgba(23, 32, 63, 0.07);
}
.filter-chip:hover {
    background-color: rgba(255, 255, 255, 0.85);
    box-shadow: none;
}
.filter-chip:hover > i { transform: translateY(-1px) rotate(-4deg); }
.filter-chip.active {
    color: var(--text);
    background-color: rgba(var(--c-primary-rgb), 0.16);
    box-shadow: inset 0 0 0 1px rgba(var(--c-primary-rgb), 0.26);
}
.filter-chip.active em { color: var(--text-light); opacity: 1; }
.filter-chip.active::after { display: none; }

@media (max-width: 640px) {
    .filter-bar {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .filter-bar::-webkit-scrollbar { display: none; }
    .filter-chip { flex: 0 0 auto; padding: 7px 11px; font-size: 12px; }
    .filter-chip + .filter-chip::before { display: none; }
}

/* 绑定 QQ 头像 */
.user-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

@media (max-width: 640px) {
    .filter-bar { gap: 6px; }
    .filter-chip { padding: 7px 11px; font-size: 12px; }
}