/* ============================================================
   模板：淡雅雾蓝（#E0ECF0 浅雾蓝方案）
   雾蓝浅底 + 水蓝点缀，清爽淡雅。
   data-bs-theme="light"。布局变量与各模板一致 → 切换不错位。
   ============================================================ */

[data-theme-template="mist-blue"] {
    --theme-bg: #E0ECF0;
    --theme-bg-secondary: #D5E4EA;
    --theme-bg-tertiary: #C8DBE3;
    --theme-card-bg: #F2F8FA;
    --theme-card-bg-hover: #E6F1F5;

    --theme-text-primary: #26343B;
    --theme-text-secondary: #495B64;
    --theme-text-muted: #6C8089;
    --theme-text-weak: #93A6AE;

    --theme-border: #B9CDD6;
    --theme-border-light: #D2E1E8;

    --theme-primary: #3D8FB0;
    --theme-primary-hover: #317C9C;
    --theme-primary-light: rgba(61, 143, 176, 0.13);
    --theme-primary-dark: #266380;

    --theme-accent: #5A9FC4;
    --theme-accent-light: rgba(90, 159, 196, 0.12);
    --theme-accent2: #6E8B9A;
    --theme-accent2-light: rgba(110, 139, 154, 0.1);

    --theme-success: #4E9B8C;
    --theme-info: #3D9AB0;
    --theme-warning: #B08C3A;
    --theme-danger: #C05A5A;

    --theme-shadow-sm: 0 1px 3px 0 rgba(40, 80, 100, 0.07), 0 1px 2px -1px rgba(40, 80, 100, 0.05);
    --theme-shadow-md: 0 4px 12px -2px rgba(40, 80, 100, 0.1), 0 2px 6px -2px rgba(40, 80, 100, 0.06);
    --theme-shadow-lg: 0 14px 30px -6px rgba(40, 80, 100, 0.14), 0 6px 14px -4px rgba(40, 80, 100, 0.08);
    --theme-shadow-xl: 0 22px 46px -8px rgba(40, 80, 100, 0.18), 0 10px 22px -6px rgba(40, 80, 100, 0.1);

    --primary-gradient: linear-gradient(135deg, #5A9FC4 0%, #266380 100%);
    --primary-gradient-soft: linear-gradient(135deg, #7FB8D6 0%, #5A9FC4 100%);
    --bg-gradient: radial-gradient(ellipse at 15% 0%, rgba(90, 159, 196, 0.09) 0%, transparent 50%), radial-gradient(ellipse at 85% 0%, rgba(61, 143, 176, 0.06) 0%, transparent 45%);

    --navbar-bg: rgba(242, 248, 250, 0.8);
    --navbar-border: rgba(185, 205, 214, 0.9);

    /* 导航/网址卡的品牌色 */
    --theme-nav-primary: #3D8FB0;
    --theme-nav-primary-deep: #2E7390;
    --theme-nav-soft: rgba(61, 143, 176, 0.11);
    --theme-nav-soft-strong: rgba(61, 143, 176, 0.16);
    --theme-nav-shadow: rgba(61, 143, 176, 0.2);
    --theme-nav-border-soft: rgba(61, 143, 176, 0.4);

    /* 公告区域 */
    --announce-top-bg: linear-gradient(135deg, #d3e6ec, #bfd8e2);
    --announce-top-border: #3a728c;
    --announce-top-icon: #3a728c;
    --announce-bg: rgba(61, 143, 176, 0.09);
    --announce-border: #3D8FB0;
    --announce-icon: #3D8FB0;

    /* 布局变量：各模板保持完全一致，避免切换错位 */
    --theme-radius-sm: 10px;
    --theme-radius-md: 14px;
    --theme-radius-lg: 18px;
    --theme-radius-xl: 24px;
    --theme-radius-full: 9999px;

    --theme-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --theme-transition-bounce: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    --theme-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;

    --card-shadow: var(--theme-shadow-sm);
    --card-hover-shadow: var(--theme-shadow-md);
    --border-radius: var(--theme-radius-md);
    --transition: var(--theme-transition);
}

/* 页面底色 + 水蓝晕染 */
[data-theme-template="mist-blue"] body {
    background-color: var(--theme-bg);
    background-image: var(--bg-gradient);
}

/* 导航栏：雾蓝磨砂 */
[data-theme-template="mist-blue"] .navbar {
    background-color: var(--navbar-bg) !important;
    border-bottom: 1px solid var(--navbar-border) !important;
    backdrop-filter: blur(16px) saturate(1.08);
    -webkit-backdrop-filter: blur(16px) saturate(1.08);
}

[data-theme-template="mist-blue"] footer {
    background: linear-gradient(180deg, transparent 0%, rgba(213, 228, 234, 0.55) 100%);
}

[data-theme-template="mist-blue"] .user-profile-header {
    background: linear-gradient(135deg, var(--theme-primary-dark) 0%, #5A9FC4 100%);
}

[data-theme-template="mist-blue"] .stat-icon,
[data-theme-template="mist-blue"] [class*="stat-icon-"] {
    background: rgba(61, 143, 176, 0.12);
    color: var(--theme-primary);
}