/* =====================================================================
   ASTEM 渐变玻璃主题（Gradient Glass）v2.0
   ---------------------------------------------------------------------
   基于《AI时代的山河课堂》讲座 PPT 视觉系统，适配 ASTEM Web/PWA。
   全部规则限定 [data-theme="glass"]，不影响 light / cyber / system。
   版本: v2.0 · 2026-10-11 · 精致度对标设计稿
   ===================================================================== */


/* ============================================================
   0. 变量定义（glass 主题全局）
   ============================================================ */
[data-theme="glass"] {
    /* 主渐变四色 */
    --glass-blue: #A8C8E8;
    --glass-lavender: #C5B8E0;
    --glass-pink: #E8B8D0;
    --glass-peach: #F5C8C0;

    /* 玻璃面板 */
    --glass-bg: rgba(255, 255, 255, 0.28);
    --glass-bg-hover: rgba(255, 255, 255, 0.38);
    --glass-bg-input: rgba(255, 255, 255, 0.35);
    --glass-border: rgba(255, 255, 255, 0.75);
    --glass-shadow: rgba(30, 41, 59, 0.08);
    --glass-shadow-hover: rgba(30, 41, 59, 0.12);

    /* 文字 */
    --glass-text-primary: #1E293B;
    --glass-text-body: #334155;
    --glass-text-muted: #64748B;
    --glass-text-strong: #0F172A;
    --glass-text-disabled: #94A3B8;

    /* 强调色 */
    --glass-accent: #7BA7D9;
    --glass-accent-hover: #6A97C9;
    --glass-accent-light: #9BBCE5;
    --glass-select: #B8A8D8;
    --glass-success: #E8A8B8;
    --glass-danger: #E8848C;

    /* 覆盖 ASTEM 主题变量 */
    --primary: var(--glass-accent);
    --primary-light: var(--glass-accent-light);
    --primary-dark: var(--glass-accent-hover);
    --bg: transparent;
    --bg-primary: transparent;
    --bg-card: var(--glass-bg);
    --bg-input: var(--glass-bg-input);
    --bg-sidebar: rgba(255, 255, 255, 0.22);
    --bg-sidebar-grad: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.18));
    --bg-hover: rgba(255, 255, 255, 0.15);
    --bg-message-user: linear-gradient(135deg, #7BA7D9, #9BBCE5);
    --bg-message-assistant: var(--glass-bg);
    --text: var(--glass-text-body);
    --text-dark: var(--glass-text-primary);
    --text-muted: var(--glass-text-muted);
    --border: rgba(255, 255, 255, 0.5);
    --radius: 24px;
    --radius-sm: 14px;
    --shadow: 0 8px 32px var(--glass-shadow);
    --nav-bg: rgba(255, 255, 255, 0.22);
    --overlay-bg: rgba(30, 41, 59, 0.35);
    --orb-1: rgba(168, 200, 232, 0.4);
    --orb-2: rgba(197, 184, 224, 0.35);
    --orb-3: rgba(232, 184, 208, 0.3);
    --accent-a: rgba(168, 200, 232, 0.25);
    --accent-s: rgba(197, 184, 224, 0.25);
    --accent-t: rgba(232, 184, 208, 0.25);
    --accent-e: rgba(245, 200, 192, 0.25);
    --accent-m: rgba(155, 188, 229, 0.25);

    /* 修复未定义变量（brainstorm/approve 等页面使用） */
    --bg-body: transparent;

    /* Agent 广场独立变量系统（--as-* 前缀） */
    --as-bg: transparent;
    --as-text: var(--glass-text-body);
    --as-orb1: rgba(168, 200, 232, 0.3);
    --as-orb2: rgba(197, 184, 224, 0.25);
    --as-card: var(--glass-bg);
    --as-card-border: rgba(255, 255, 255, 0.5);
    --as-card-hover: var(--glass-bg-hover);
    --as-muted: var(--glass-text-muted);
    --as-faint: var(--glass-text-disabled);
    --as-tab-bg: rgba(255, 255, 255, 0.2);
    --as-divider: rgba(255, 255, 255, 0.35);
    --as-dashed: rgba(255, 255, 255, 0.4);
    --as-modal: var(--glass-bg);
    --as-modal-border: rgba(255, 255, 255, 0.6);
    --as-modal-overlay: rgba(30, 41, 59, 0.35);
    --as-input-bg: var(--glass-bg-input);
    --as-input-border: rgba(255, 255, 255, 0.6);
    --as-toast-bg: rgba(255, 255, 255, 0.9);
    --as-toast-border: rgba(123, 167, 217, 0.3);
    --as-name: var(--glass-text-primary);
    --as-label: var(--glass-text-muted);
    --as-hint: var(--glass-text-muted);
    --as-btn-cancel-bg: rgba(255, 255, 255, 0.2);
    --as-btn-cancel-text: var(--glass-text-body);
    --as-btn-cancel-hover: rgba(255, 255, 255, 0.3);
    --as-shadow: rgba(30, 41, 59, 0.1);
    --as-accent: var(--glass-accent);
    --as-cover-fallback: linear-gradient(135deg, rgba(123,167,217,0.2), rgba(155,188,229,0.1));
    --as-cover-icon: rgba(255, 255, 255, 0.7);
    --as-cover-overlay-1: rgba(30, 41, 59, 0.85);
    --as-cover-overlay-2: rgba(30, 41, 59, 0.6);
    --as-cover-overlay-3: rgba(30, 41, 59, 0);

    /* 其他页面独立变量 */
    --card-bg: var(--glass-bg);
    --bg-nav: rgba(255, 255, 255, 0.15);
    --bg-page: transparent;
}


/* ============================================================
   1. 背景系统：珠光渐变 + 细闪肌理 + 装饰光斑
   ============================================================ */
[data-theme="glass"] body {
    background: linear-gradient(
        135deg,
        var(--glass-blue) 0%,
        var(--glass-lavender) 35%,
        var(--glass-pink) 70%,
        var(--glass-peach) 100%
    ) !important;
    background-attachment: fixed !important;
    min-height: 100vh;
    position: relative;
}

/* 珠光细闪肌理（noise texture） */
[data-theme="glass"] body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.06;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

/* 装饰光斑（模拟水球/花瓣的光影层次） */
[data-theme="glass"] body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 600px 500px at 15% 20%, rgba(168, 200, 232, 0.35), transparent),
        radial-gradient(ellipse 500px 400px at 80% 15%, rgba(197, 184, 224, 0.3), transparent),
        radial-gradient(ellipse 550px 450px at 25% 80%, rgba(232, 184, 208, 0.25), transparent),
        radial-gradient(ellipse 450px 400px at 75% 75%, rgba(245, 200, 192, 0.28), transparent);
}

/* 确保内容在装饰层之上 */
[data-theme="glass"] body > div,
[data-theme="glass"] body > main,
[data-theme="glass"] body > section,
[data-theme="glass"] body > #app,
[data-theme="glass"] .app-layout,
[data-theme="glass"] .bp-page {
    position: relative;
    z-index: 1;
}

/* Agent 广场：.bg 固定背景层透明化，让 body 渐变透出 */
[data-theme="glass"] .bg {
    display: none !important;
}

/* Toast 提示框：glass 主题下默认隐藏，显示时玻璃化 */
[data-theme="glass"] .toast {
    transform: translateX(-50%) translateY(-80px) !important;
    background: rgba(255, 255, 255, 0.35) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    backdrop-filter: blur(16px) !important;
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 255, 255, 0.6),
        0 8px 32px rgba(30, 41, 59, 0.1) !important;
    border: none !important;
    color: var(--glass-text-body) !important;
    border-radius: 14px !important;
}
[data-theme="glass"] .toast.show {
    transform: translateX(-50%) translateY(0) !important;
}

/* Agent 广场：内容区域和卡片彻底玻璃化 */
[data-theme="glass"] .content {
    background: transparent !important;
}
[data-theme="glass"] .agent-grid {
    background: transparent !important;
}
[data-theme="glass"] .agent-card {
    background: rgba(255, 255, 255, 0.22) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.6),
        0 8px 32px rgba(30, 41, 59, 0.08) !important;
    border: none !important;
    border-radius: 20px !important;
}
[data-theme="glass"] .agent-card:hover {
    background: rgba(255, 255, 255, 0.32) !important;
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.78),
        0 12px 40px rgba(30, 41, 59, 0.12) !important;
}
[data-theme="glass"] .agent-card.has-cover {
    background: rgba(255, 255, 255, 0.15) !important;
}
[data-theme="glass"] .create-card {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 2px dashed rgba(255, 255, 255, 0.4) !important;
}
[data-theme="glass"] .agent-name {
    color: #FFFFFF !important;
    text-shadow:
        0 1px 3px rgba(30, 41, 59, 0.28),
        0 0 16px rgba(255, 255, 255, 0.18) !important;
}
[data-theme="glass"] .agent-desc {
    color: rgba(255, 255, 255, 0.92) !important;
    text-shadow: 0 1px 3px rgba(30, 41, 59, 0.24) !important;
}
[data-theme="glass"] .agent-tag {
    background: rgba(255, 255, 255, 0.25) !important;
    color: var(--glass-text-body) !important;
}
[data-theme="glass"] .action-btn {
    background: rgba(255, 255, 255, 0.25) !important;
    color: var(--glass-accent) !important;
    border: none !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
[data-theme="glass"] .tab {
    background: rgba(255, 255, 255, 0.2) !important;
    color: var(--glass-text-muted) !important;
    border: none !important;
}
[data-theme="glass"] .tab.active {
    background: rgba(184, 168, 216, 0.3) !important;
    color: var(--glass-text-primary) !important;
}
[data-theme="glass"] .tabs { border-color: rgba(255, 255, 255, 0.3) !important; }
[data-theme="glass"] .theme-toggle-btn {
    background: rgba(255, 255, 255, 0.2) !important;
    color: var(--glass-text-body) !important;
    border: none !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

/* 数据大屏：glass 主题适配（投屏页也要玻璃风格） */
[data-theme="glass"] body.data-screen {
    background: linear-gradient(
        135deg,
        var(--glass-blue) 0%,
        var(--glass-lavender) 35%,
        var(--glass-pink) 70%,
        var(--glass-peach) 100%
    ) !important;
    background-attachment: fixed !important;
}
[data-theme="glass"] body.data-screen #stage {
    background: transparent !important;
}
[data-theme="glass"] body.data-screen #stage::before {
    border-color: rgba(255, 255, 255, 0.3) !important;
}
[data-theme="glass"] body.data-screen .corner i {
    background: linear-gradient(90deg, var(--glass-accent), var(--glass-select)) !important;
}
[data-theme="glass"] body.data-screen .kpi {
    background: var(--glass-bg) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: none !important;
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 255, 255, 0.6),
        0 4px 20px rgba(30, 41, 59, 0.08);
    border-radius: 16px;
}
[data-theme="glass"] body.data-screen .kpi .lb { color: var(--glass-text-muted) !important; }
[data-theme="glass"] body.data-screen .kpi .lb svg { stroke: var(--glass-accent) !important; }
[data-theme="glass"] body.data-screen .kpi .num { color: var(--glass-text-primary) !important; }
[data-theme="glass"] body.data-screen .kpi .sub { color: var(--glass-text-muted) !important; }
[data-theme="glass"] body.data-screen .panel {
    background: rgba(255, 255, 255, 0.18) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: none !important;
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 255, 255, 0.5),
        0 4px 20px rgba(30, 41, 59, 0.06);
    border-radius: 16px;
}
[data-theme="glass"] body.data-screen .panel .ph span { color: var(--glass-text-body) !important; }
[data-theme="glass"] body.data-screen .panel .ph i { color: var(--glass-text-muted) !important; }
[data-theme="glass"] body.data-screen .panel .ph b { background: linear-gradient(180deg, var(--glass-accent), var(--glass-select)) !important; }
[data-theme="glass"] body.data-screen .brand .t1 { color: var(--glass-text-primary) !important; }
[data-theme="glass"] body.data-screen .brand .t2 { color: var(--glass-text-muted) !important; }
[data-theme="glass"] body.data-screen footer { color: var(--glass-text-muted) !important; }
[data-theme="glass"] body.data-screen .back-btn {
    background: var(--glass-bg) !important;
    color: var(--glass-text-body) !important;
    border: none !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    border-radius: 8px;
}
[data-theme="glass"] body.data-screen .live {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: var(--glass-text-body) !important;
}


/* ============================================================
   2. 玻璃面板基础（通用卡片/容器）
   ============================================================ */
[data-theme="glass"] .card,
[data-theme="glass"] .feature-card,
[data-theme="glass"] .modal-box,
[data-theme="glass"] .theme-modal,
[data-theme="glass"] .rp-info-card,
[data-theme="glass"] .bp-card,
[data-theme="glass"] .agent-card,
[data-theme="glass"] .kb-card,
[data-theme="glass"] .group-card,
[data-theme="glass"] .dash-card,
[data-theme="glass"] .points-card,
[data-theme="glass"] .settings-card,
[data-theme="glass"] .profile-card,
[data-theme="glass"] .stat-card,
[data-theme="glass"] .form-card,
[data-theme="glass"] .list-card,
[data-theme="glass"] .panel,
[data-theme="glass"] .glass-panel,
[data-theme="glass"] .content-card,
[data-theme="glass"] .info-card {
    background: var(--glass-bg) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.65),
        0 8px 32px var(--glass-shadow);
    border: none !important;
    border-radius: 20px;
}

[data-theme="glass"] .card:hover,
[data-theme="glass"] .feature-card:hover,
[data-theme="glass"] .agent-card:hover,
[data-theme="glass"] .kb-card:hover,
[data-theme="glass"] .group-card:hover,
[data-theme="glass"] .dash-card:hover {
    background: var(--glass-bg-hover) !important;
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.78),
        0 12px 40px var(--glass-shadow-hover);
}


/* ============================================================
   3. 侧边栏 & 导航
   ============================================================ */
[data-theme="glass"] .sidebar,
[data-theme="glass"] .left-panel,
[data-theme="glass"] .nav-sidebar {
    background: var(--bg-sidebar-grad) !important;
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    backdrop-filter: blur(24px) saturate(140%);
    box-shadow:
        inset -1px 0 0 rgba(255, 255, 255, 0.4),
        4px 0 24px rgba(30, 41, 59, 0.06);
    border-right: none !important;
}

[data-theme="glass"] .nav-item,
[data-theme="glass"] .sidebar-nav-item,
[data-theme="glass"] .conv-item,
[data-theme="glass"] .sidebar-conv-item,
[data-theme="glass"] .agent-item {
    border-radius: 12px;
    color: var(--glass-text-body);
}

[data-theme="glass"] .nav-item:hover,
[data-theme="glass"] .sidebar-nav-item:hover,
[data-theme="glass"] .conv-item:hover,
[data-theme="glass"] .sidebar-conv-item:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="glass"] .nav-item.active,
[data-theme="glass"] .sidebar-nav-item.active,
[data-theme="glass"] .conv-item.active,
[data-theme="glass"] .sidebar-conv-item.active {
    background: rgba(184, 168, 216, 0.3) !important;
    color: var(--glass-text-primary) !important;
    font-weight: 600;
}

[data-theme="glass"] .nav-icon,
[data-theme="glass"] .sidebar-nav-icon {
    color: var(--glass-text-muted);
}
[data-theme="glass"] .nav-item.active .nav-icon,
[data-theme="glass"] .sidebar-nav-item.active .sidebar-nav-icon {
    color: var(--glass-text-primary);
}


/* ============================================================
   4. 对话气泡
   ============================================================ */
[data-theme="glass"] .message-bubble {
    border-radius: 18px;
    box-shadow: 0 2px 12px rgba(30, 41, 59, 0.06);
}
[data-theme="glass"] .message.user .message-bubble {
    background: var(--bg-message-user) !important;
    color: #fff !important;
}
[data-theme="glass"] .message.assistant .message-bubble,
[data-theme="glass"] .message:not(.user) .message-bubble {
    background: var(--glass-bg) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 255, 255, 0.55),
        0 4px 16px rgba(30, 41, 59, 0.06);
    color: var(--glass-text-body);
}

/* 输入区域 */
[data-theme="glass"] .chat-input-area,
[data-theme="glass"] .input-area,
[data-theme="glass"] .input-wrapper {
    background: var(--glass-bg-input) !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 255, 255, 0.6),
        0 4px 20px rgba(30, 41, 59, 0.08);
    border-radius: 16px;
    border: none !important;
}


/* ============================================================
   5. 按钮
   ============================================================ */
/* 主按钮 */
[data-theme="glass"] button[type="submit"],
[data-theme="glass"] .btn-primary,
[data-theme="glass"] .bp-go,
[data-theme="glass"] .btn-login,
[data-theme="glass"] .btn-save,
[data-theme="glass"] .btn-confirm,
[data-theme="glass"] .btn-send,
[data-theme="glass"] .btn-generate {
    background: linear-gradient(135deg, var(--glass-accent), var(--glass-accent-light)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(123, 167, 217, 0.35);
    font-weight: 600;
    transition: all 0.2s ease;
}
[data-theme="glass"] button[type="submit"]:hover,
[data-theme="glass"] .btn-primary:hover,
[data-theme="glass"] .bp-go:hover,
[data-theme="glass"] .btn-login:hover,
[data-theme="glass"] .btn-save:hover,
[data-theme="glass"] .btn-confirm:hover,
[data-theme="glass"] .btn-send:hover,
[data-theme="glass"] .btn-generate:hover {
    background: linear-gradient(135deg, var(--glass-accent-hover), var(--glass-accent)) !important;
    box-shadow: 0 6px 20px rgba(123, 167, 217, 0.45);
    transform: translateY(-1px);
}

/* 次按钮 / 玻璃按钮 */
[data-theme="glass"] .btn-secondary,
[data-theme="glass"] .btn-glass,
[data-theme="glass"] .btn-cancel,
[data-theme="glass"] .btn-back,
[data-theme="glass"] .chip,
[data-theme="glass"] .bp-chip {
    background: var(--glass-bg) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
    border: none !important;
    border-radius: 12px;
    color: var(--glass-text-body);
    transition: all 0.2s ease;
}
[data-theme="glass"] .btn-secondary:hover,
[data-theme="glass"] .btn-glass:hover,
[data-theme="glass"] .chip:hover,
[data-theme="glass"] .bp-chip:hover {
    background: var(--glass-bg-hover) !important;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7);
}

/* chip 选中态 */
[data-theme="glass"] .chip.active,
[data-theme="glass"] .bp-chip.active {
    background: var(--glass-accent) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(123, 167, 217, 0.3);
}


/* ============================================================
   6. 输入框
   ============================================================ */
[data-theme="glass"] input[type="text"],
[data-theme="glass"] input[type="password"],
[data-theme="glass"] input[type="email"],
[data-theme="glass"] input[type="number"],
[data-theme="glass"] input[type="search"],
[data-theme="glass"] textarea,
[data-theme="glass"] select {
    background: var(--glass-bg-input) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
    border: none !important;
    border-radius: 12px;
    color: var(--glass-text-body);
    transition: box-shadow 0.2s ease;
}
[data-theme="glass"] input:focus,
[data-theme="glass"] textarea:focus,
[data-theme="glass"] select:focus {
    box-shadow:
        inset 0 0 0 2px var(--glass-accent),
        0 0 0 3px rgba(123, 167, 217, 0.15);
    outline: none;
}
[data-theme="glass"] input::placeholder,
[data-theme="glass"] textarea::placeholder {
    color: var(--glass-text-disabled);
}


/* ============================================================
   7. 弹窗 & 模态框
   ============================================================ */
[data-theme="glass"] .modal-overlay,
[data-theme="glass"] .theme-modal-overlay,
[data-theme="glass"] .crop-modal {
    background: var(--overlay-bg) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

[data-theme="glass"] .modal-box,
[data-theme="glass"] .theme-modal {
    background: var(--glass-bg) !important;
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    backdrop-filter: blur(28px) saturate(150%);
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.7),
        0 16px 48px rgba(30, 41, 59, 0.15);
    border-radius: 24px;
    border: none !important;
}

/* 主题弹窗选项 */
[data-theme="glass"] .theme-option {
    border-radius: 16px;
    transition: all 0.2s ease;
}
[data-theme="glass"] .theme-option:hover {
    background: rgba(255, 255, 255, 0.15);
}
[data-theme="glass"] .theme-option.active {
    background: rgba(184, 168, 216, 0.25);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6);
}


/* ============================================================
   8. 右侧面板 & 布局容器
   ============================================================ */
/* 保持右侧抽屉定位，不被响应式或其他样式搞成底部面板 */
[data-theme="glass"] .right-panel {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    right: -340px !important;
    width: 340px !important;
    max-width: 85vw !important;
    height: 100vh !important;
    border-radius: 0 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-right: none !important;
    background: rgba(255, 255, 255, 0.22) !important;
    -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
    backdrop-filter: blur(24px) saturate(150%) !important;
    box-shadow: -8px 0 32px rgba(30, 41, 59, 0.12) !important;
    transform: none !important;
}
[data-theme="glass"] .right-panel.open {
    right: 0 !important;
    transform: none !important;
}

/* 窄屏下仍从右侧全宽滑出，不从底部升起 */
@media (max-width: 768px) {
    [data-theme="glass"] .right-panel {
        right: -100% !important;
        width: 100% !important;
        max-width: 100% !important;
        border-left: none !important;
    }
    [data-theme="glass"] .right-panel.open {
        right: 0 !important;
    }
}

[data-theme="glass"] .right-panel-overlay {
    background: rgba(30, 41, 59, 0.25) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    backdrop-filter: blur(4px) !important;
}

[data-theme="glass"] .right-panel-content {
    background: transparent !important;
}

[data-theme="glass"] .right-panel-header {
    background: rgba(255, 255, 255, 0.12) !important;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.3);
}

[data-theme="glass"] .right-panel-tabs {
    border-bottom-color: rgba(255, 255, 255, 0.25) !important;
}
[data-theme="glass"] .right-panel-tab {
    color: rgba(255, 255, 255, 0.75) !important;
}
[data-theme="glass"] .right-panel-tab:hover {
    color: #FFFFFF !important;
}
[data-theme="glass"] .right-panel-tab.active {
    color: #FFFFFF !important;
}
[data-theme="glass"] .right-panel-tab.active::after {
    background: linear-gradient(90deg, var(--glass-accent), var(--glass-select)) !important;
}

[data-theme="glass"] .main-content,
[data-theme="glass"] .chat-container,
[data-theme="glass"] .chat-messages {
    background: transparent !important;
}


/* ============================================================
   9. 头部 & 顶部导航
   ============================================================ */
[data-theme="glass"] .header,
[data-theme="glass"] .topbar,
[data-theme="glass"] .chat-header,
[data-theme="glass"] .page-header {
    background: rgba(255, 255, 255, 0.15) !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.35);
}


/* ============================================================
   10. 文字系统（确保深色视认性）
   ============================================================ */
[data-theme="glass"] h1, [data-theme="glass"] h2,
[data-theme="glass"] h3, [data-theme="glass"] h4,
[data-theme="glass"] h5, [data-theme="glass"] h6 {
    color: var(--glass-text-primary);
}

[data-theme="glass"] p,
[data-theme="glass"] li,
[data-theme="glass"] td,
[data-theme="glass"] span { color: inherit; }

[data-theme="glass"] a { color: #5A8CC0; }
[data-theme="glass"] a:hover { color: #4A7BB0; }

[data-theme="glass"] .text-muted,
[data-theme="glass"] .text-secondary,
[data-theme="glass"] .text-dim {
    color: var(--glass-text-muted) !important;
}


/* ============================================================
   11. 特殊页面覆盖
   ============================================================ */

/* --- Dashboard 特色卡片 --- */
[data-theme="glass"] .dash-card {
    background: rgba(255, 255, 255, 0.22) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 255, 255, 0.6),
        0 8px 28px rgba(30, 41, 59, 0.07);
    border-radius: 20px;
    border: none !important;
}
[data-theme="glass"] .dash-card:hover {
    background: rgba(255, 255, 255, 0.32) !important;
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.78),
        0 12px 36px rgba(30, 41, 59, 0.1);
    transform: translateY(-2px);
}
[data-theme="glass"] .dash-card h3 { color: var(--glass-text-primary); }
[data-theme="glass"] .dash-card p { color: #475569; }

/* --- 脑洞打印机页面 --- */
[data-theme="glass"] .bp-page {
    background: transparent !important;
}
[data-theme="glass"] .bp-back {
    color: var(--glass-text-body);
    border-radius: 10px;
}
[data-theme="glass"] .bp-back:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: var(--glass-accent) !important;
}
[data-theme="glass"] .bp-breath {
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 16px;
}

/* --- 登录/着陆页 --- */
[data-theme="glass"] .hero,
[data-theme="glass"] .homepage {
    background: transparent !important;
}
[data-theme="glass"] .homepage-nav {
    background: rgba(255, 255, 255, 0.15) !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

/* --- 数据大屏 --- */
[data-theme="glass"] .data-screen,
[data-theme="glass"] .screen-card {
    background: rgba(255, 255, 255, 0.15) !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

/* --- 签到/审批等使用 --bg-body 的页面 --- */
[data-theme="glass"] .checkin-page,
[data-theme="glass"] .approve-page {
    background: transparent !important;
}


/* ============================================================
   12. 滚动条（玻璃风格）
   ============================================================ */
[data-theme="glass"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-theme="glass"] ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.08); }
[data-theme="glass"] ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.45);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
[data-theme="glass"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.62); }


/* ============================================================
   13. 标签 & 徽章
   ============================================================ */
[data-theme="glass"] .tag,
[data-theme="glass"] .badge,
[data-theme="glass"] .label {
    background: rgba(255, 255, 255, 0.25) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    color: var(--glass-text-body);
    border: none !important;
}


/* ============================================================
   14. 表格
   ============================================================ */
[data-theme="glass"] table {
    border-radius: 16px;
    overflow: hidden;
}
[data-theme="glass"] th {
    background: rgba(255, 255, 255, 0.2) !important;
    color: var(--glass-text-primary);
    font-weight: 600;
}
[data-theme="glass"] td {
    background: rgba(255, 255, 255, 0.1);
    color: var(--glass-text-body);
}
[data-theme="glass"] tr:hover td {
    background: rgba(255, 255, 255, 0.18);
}


/* ============================================================
   15. 工具栏 & 操作栏
   ============================================================ */
[data-theme="glass"] .toolbar,
[data-theme="glass"] .chat-toolbar,
[data-theme="glass"] .action-bar {
    background: rgba(255, 255, 255, 0.12) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-radius: 12px;
}


/* ============================================================
   16. 知识库 & Agent 卡片
   ============================================================ */
[data-theme="glass"] .kb-item,
[data-theme="glass"] .agent-item-card {
    background: var(--glass-bg) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 255, 255, 0.55),
        0 4px 20px rgba(30, 41, 59, 0.06);
    border-radius: 18px;
    border: none !important;
}


/* ============================================================
   17. 下拉菜单 & 弹出层
   ============================================================ */
[data-theme="glass"] .dropdown,
[data-theme="glass"] .dropdown-menu,
[data-theme="glass"] .popup,
[data-theme="glass"] .context-menu {
    background: var(--glass-bg) !important;
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 255, 255, 0.65),
        0 12px 40px rgba(30, 41, 59, 0.12);
    border-radius: 16px;
    border: none !important;
}


/* ============================================================
   18. 进度条 & 加载
   ============================================================ */
[data-theme="glass"] .progress-bar,
[data-theme="glass"] .progress-track {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 999px;
}
[data-theme="glass"] .progress-fill,
[data-theme="glass"] .progress-value {
    background: linear-gradient(90deg, var(--glass-accent), var(--glass-select));
    border-radius: 999px;
}


/* ============================================================
   19. 分隔线
   ============================================================ */
[data-theme="glass"] hr,
[data-theme="glass"] .divider {
    border-color: rgba(255, 255, 255, 0.35) !important;
}


/* ============================================================
   20. 选中 & 高亮
   ============================================================ */
[data-theme="glass"] ::selection {
    background: rgba(184, 168, 216, 0.4);
    color: var(--glass-text-strong);
}