/**
 * Material Design 3 ????
 * ?? Google Material Design 3 ????
 */

/* ===== Material Design 3 ???? ===== */
:root {
    /* ????*/
    --md-sys-color-primary: #1976d2;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #d0e4ff;
    --md-sys-color-on-primary-container: #001d35;
    
    /* ???? */
    --md-sys-color-secondary: #424242;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: #e0e0e0;
    --md-sys-color-on-secondary-container: #1c1c1c;
    
    /* ???? */
    --md-sys-color-surface: #ffffff;
    --md-sys-color-on-surface: #1c1c1c;
    --md-sys-color-surface-variant: #f5f5f5;
    --md-sys-color-on-surface-variant: #424242;
    --md-sys-color-surface-container: #f5f5f5;
    --md-sys-color-on-surface-container: #1c1c1c;
    
    /* ???? */
    --md-sys-color-background: #ffffff;
    --md-sys-color-on-background: #1c1c1c;
    
    /* ???? */
    --md-sys-color-error: #b00020;
    --md-sys-color-on-error: #ffffff;
    --md-sys-color-error-container: #fdeaea;
    --md-sys-color-on-error-container: #410002;
    
    /* ???? */
    --md-sys-color-outline: #757575;
    --md-sys-color-outline-variant: #bdbdbd;
    
    /* ?? */
    --md-sys-elevation-level0: none;
    --md-sys-elevation-level1: 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.24);
    --md-sys-elevation-level2: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);
    --md-sys-elevation-level3: 0px 10px 20px rgba(0, 0, 0, 0.19), 0px 6px 6px rgba(0, 0, 0, 0.23);
    --md-sys-elevation-level4: 0px 15px 25px rgba(0, 0, 0, 0.15), 0px 5px 10px rgba(0, 0, 0, 0.05);
    --md-sys-elevation-level5: 0px 20px 40px rgba(0, 0, 0, 0.2);
    
    /* ?? */
    --md-sys-shape-corner-none: 0px;
    --md-sys-shape-corner-extra-small: 4px;
    --md-sys-shape-corner-small: 8px;
    --md-sys-shape-corner-medium: 12px;
    --md-sys-shape-corner-large: 16px;
    --md-sys-shape-corner-extra-large: 28px;
    
    /* 字体：中英文混合字体栈，浏览器自动选择合适字体 */
    /* 中文：PingFang SC (macOS/iOS), Microsoft YaHei (Windows), 思源黑体 (Linux) */
    /* 英文：Roboto (Material Design 标准字体) */
    --md-sys-typescale-body-large-font: 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans CN', 'Roboto', sans-serif;
    --md-sys-typescale-body-large-size: 16px;
    --md-sys-typescale-body-large-weight: 400;
    --md-sys-typescale-body-large-line-height: 24px;
    
    --md-sys-typescale-headline-large-font: 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans CN', 'Roboto', sans-serif;
    --md-sys-typescale-headline-large-size: 32px;
    --md-sys-typescale-headline-large-weight: 400;
    --md-sys-typescale-headline-large-line-height: 40px;
    
    --md-sys-typescale-title-large-font: 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans CN', 'Roboto', sans-serif;
    --md-sys-typescale-title-large-size: 22px;
    --md-sys-typescale-title-large-weight: 400;
    --md-sys-typescale-title-large-line-height: 28px;
    
    --md-sys-typescale-label-large-font: 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans CN', 'Roboto', sans-serif;
    --md-sys-typescale-label-large-size: 14px;
    --md-sys-typescale-label-large-weight: 500;
    --md-sys-typescale-label-large-line-height: 20px;
    
    --md-sys-typescale-label-medium-font: 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans CN', 'Roboto', sans-serif;
    --md-sys-typescale-body-medium-font: 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans CN', 'Roboto', sans-serif;
    --md-sys-typescale-body-small-font: 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans CN', 'Roboto', sans-serif;
    --md-sys-typescale-headline-medium-font: 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans CN', 'Roboto', sans-serif;
}

/* ?????????????? */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --md-sys-color-primary: #fff9c4; /* 淡黄色 */
        --md-sys-color-on-primary: #1a1a00; /* 深色文字（在淡黄色上） */
        --md-sys-color-primary-container: #ffcc02; /* 稍深的黄色容器 */
        --md-sys-color-on-primary-container: #1a1a00; /* 深色文字（在黄色容器上） */
        
        --md-sys-color-surface: #121212;
        --md-sys-color-on-surface: #f5f5f5; /* 更亮的文本颜色（从 #e0e0e0 提升到 #f5f5f5） */
        --md-sys-color-surface-variant: #2c2c2c;
        --md-sys-color-on-surface-variant: #e8e8e8; /* 更亮的次要文本颜色（从 #c0c0c0 提升到 #e8e8e8） */
        --md-sys-color-surface-container: #1e1e1e;
        --md-sys-color-on-surface-container: #f5f5f5; /* 更亮的容器文本颜色 */
        --md-sys-color-background: #121212;
        --md-sys-color-on-background: #f5f5f5; /* 更亮的背景文本颜色（从 #e0e0e0 提升到 #f5f5f5） */
        
        --md-sys-color-outline: #a0a0a0; /* 更亮的轮廓颜色（从 #8e8e8e 提升到 #a0a0a0） */
        --md-sys-color-outline-variant: #6a6a6a; /* 更亮的次要轮廓颜色（从 #5a5a5a 提升到 #6a6a6a） */
        
        /* 淡黄色阴影效果 */
        --md-sys-elevation-level1: 0px 1px 3px rgba(255, 249, 196, 0.3), 0px 1px 2px rgba(255, 249, 196, 0.4);
        --md-sys-elevation-level2: 0px 3px 6px rgba(255, 249, 196, 0.35), 0px 3px 6px rgba(255, 249, 196, 0.45);
        --md-sys-elevation-level3: 0px 10px 20px rgba(255, 249, 196, 0.4), 0px 6px 6px rgba(255, 249, 196, 0.5);
        --md-sys-elevation-level4: 0px 15px 25px rgba(255, 249, 196, 0.45), 0px 5px 10px rgba(255, 249, 196, 0.4);
        --md-sys-elevation-level5: 0px 20px 40px rgba(255, 249, 196, 0.5);
    }
}

/* ???????? */
:root[data-theme="dark"],
:root.theme-dark {
    --md-sys-color-primary: #fff9c4; /* 淡黄色 */
    --md-sys-color-on-primary: #1a1a00; /* 深色文字（在淡黄色上） */
    --md-sys-color-primary-container: #ffcc02; /* 稍深的黄色容器 */
    --md-sys-color-on-primary-container: #1a1a00; /* 深色文字（在黄色容器上） */
    
    --md-sys-color-surface: #121212;
    --md-sys-color-on-surface: #f5f5f5; /* 更亮的文本颜色（从 #e0e0e0 提升到 #f5f5f5） */
    --md-sys-color-surface-variant: #2c2c2c;
    --md-sys-color-on-surface-variant: #e8e8e8; /* 更亮的次要文本颜色（从 #c0c0c0 提升到 #e8e8e8） */
    --md-sys-color-surface-container: #1e1e1e;
    --md-sys-color-on-surface-container: #f5f5f5; /* 更亮的容器文本颜色 */
    --md-sys-color-background: #121212;
    --md-sys-color-on-background: #f5f5f5; /* 更亮的背景文本颜色（从 #e0e0e0 提升到 #f5f5f5） */
    
    --md-sys-color-outline: #a0a0a0; /* 更亮的轮廓颜色（从 #8e8e8e 提升到 #a0a0a0） */
    --md-sys-color-outline-variant: #6a6a6a; /* 更亮的次要轮廓颜色（从 #5a5a5a 提升到 #6a6a6a） */
    
    /* 淡黄色阴影效果 */
    --md-sys-elevation-level1: 0px 1px 3px rgba(255, 249, 196, 0.3), 0px 1px 2px rgba(255, 249, 196, 0.4);
    --md-sys-elevation-level2: 0px 3px 6px rgba(255, 249, 196, 0.35), 0px 3px 6px rgba(255, 249, 196, 0.45);
    --md-sys-elevation-level3: 0px 10px 20px rgba(255, 249, 196, 0.4), 0px 6px 6px rgba(255, 249, 196, 0.5);
    --md-sys-elevation-level4: 0px 15px 25px rgba(255, 249, 196, 0.45), 0px 5px 10px rgba(255, 249, 196, 0.4);
    --md-sys-elevation-level5: 0px 20px 40px rgba(255, 249, 196, 0.5);
}

/* ???????????????? */
:root[data-theme="light"],
:root.theme-light {
    --md-sys-color-primary: #1976d2;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #d0e4ff;
    --md-sys-color-on-primary-container: #001d35;
    
    --md-sys-color-surface: #ffffff;
    --md-sys-color-on-surface: #1c1c1c;
    --md-sys-color-background: #ffffff;
    --md-sys-color-on-background: #1c1c1c;
}

/* ===== Material Design 3 ???? ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

/* 限制 body 样式只应用于响应式模板页面（有 .mdc-body 类的页面） */
body.mdc-body {
    font-family: var(--md-sys-typescale-body-large-font);
    font-size: var(--md-sys-typescale-body-large-size);
    font-weight: var(--md-sys-typescale-body-large-weight);
    line-height: var(--md-sys-typescale-body-large-line-height);
    color: var(--md-sys-color-on-surface);
    background-color: var(--md-sys-color-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 深色主题字体优化 - 改善"头重脚轻"问题（仅应用于响应式模板） */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body.mdc-body {
        font-weight: 400; /* 确保基础字体粗细适中 */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
}

:root[data-theme="dark"] body.mdc-body,
:root.theme-dark body.mdc-body {
    font-weight: 400; /* 确保基础字体粗细适中 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ===== Material Design 3 ????30px??===== */
.mdc-top-bar {
    background-color: var(--md-sys-color-surface-container) !important;
    color: var(--md-sys-color-on-surface-variant);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    position: relative;
    z-index: 1001;
    font-size: 13px;
    opacity: 1 !important;
    background-image: none !important;
    display: block !important;
    visibility: visible !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

[data-theme="dark"] .mdc-top-bar,
:root.theme-dark .mdc-top-bar {
    background-color: var(--md-sys-color-surface) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
}

.mdc-top-bar--fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

.mdc-top-bar__row {
    display: flex !important;
    align-items: center !important;
    height: 32px;
    padding: 0 16px;
    max-width: 100%;
    gap: 4px;
    visibility: visible !important;
    opacity: 1 !important;
}

.mdc-top-bar__section {
    display: flex !important;
    align-items: center;
    gap: 2px;
    visibility: visible !important;
    opacity: 1 !important;
}

.mdc-top-bar__section--align-start,
.mdc-top-bar__section.mdc-top-bar__section--align-start {
    flex: 1;
    justify-content: flex-start;
}

.mdc-top-bar__section--align-end,
.mdc-top-bar__section.mdc-top-bar__section--align-end {
    justify-content: flex-end;
    margin-left: auto;
}

.mdc-top-bar__button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px;
    padding: 0 10px;
    height: auto;
    min-height: 32px;
    font-size: 13px;
    color: var(--md-sys-color-on-surface-variant) !important;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    visibility: visible !important;
    opacity: 1 !important;
    font-weight: 400;
    pointer-events: auto !important;
    user-select: none;
    -webkit-user-select: none;
    vertical-align: middle !important;
    flex-wrap: nowrap !important;
    position: relative;
    overflow: hidden;
    margin: 0;
}

/* 电脑版（≥768px）顶部栏布局优化 */
@media (min-width: 768px) {
    /* 电脑版顶部栏：完全不透明 */
    .mdc-top-bar {
        background-color: var(--md-sys-color-surface-container) !important;
        background-image: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    [data-theme="dark"] .mdc-top-bar,
    :root.theme-dark .mdc-top-bar {
        background-color: var(--md-sys-color-surface) !important;
        background-image: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .mdc-top-bar__row {
        height: 34px;
        padding: 0 24px;
        gap: 0;
        align-items: center !important;
    }

    .mdc-top-bar__section {
        gap: 0;
    }

    /* 左侧区域：工具类按钮 */
    .mdc-top-bar__section--align-start {
        padding-right: 12px;
    }

    /* 右侧区域：用户功能按钮 */
    .mdc-top-bar__section--align-end {
        padding-left: 12px;
    }

    .mdc-top-bar__button {
        gap: 6px;
        padding: 0 12px;
        height: auto;
        min-height: 34px;
        font-size: 14px;
        border-radius: 0;
        align-items: center !important;
    }

    /* 按钮之间的分隔线 */
    .mdc-top-bar__button:not(:last-child)::after {
        content: '';
        position: absolute;
        right: 0;
        top: 20%;
        bottom: 20%;
        width: 1px;
        background: var(--md-sys-color-outline-variant);
        opacity: 0.3;
    }

    [data-theme="dark"] .mdc-top-bar__button:not(:last-child)::after,
    :root.theme-dark .mdc-top-bar__button:not(:last-child)::after {
        opacity: 0.2;
    }
}

/* 按钮悬停效果 */
.mdc-top-bar__button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--md-sys-color-primary-container);
    opacity: 0;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 6px;
    z-index: 0;
}

.mdc-top-bar__button:hover::before {
    opacity: 0.08;
}

.mdc-top-bar__button > * {
    position: relative;
    z-index: 1;
}

/* ????????????*/
[data-theme="dark"] .mdc-top-bar__button,
:root.theme-dark .mdc-top-bar__button {
    color: var(--md-sys-color-on-surface-variant) !important;
}

[data-theme="dark"] .mdc-top-bar__button .mdc-top-bar__icon,
:root.theme-dark .mdc-top-bar__button .mdc-top-bar__icon {
    color: var(--md-sys-color-on-surface-variant) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

[data-theme="dark"] .mdc-top-bar__button .mdc-top-bar__label,
:root.theme-dark .mdc-top-bar__button .mdc-top-bar__label {
    color: var(--md-sys-color-on-surface-variant) !important;
}

.mdc-top-bar__button:hover {
    color: var(--md-sys-color-on-surface) !important;
    transform: translateY(-1px);
}

.mdc-top-bar__button:active {
    transform: translateY(0);
    transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 移除焦点轮廓（避免出现红色框） */
.mdc-top-bar__button:focus,
.mdc-top-bar__button:focus-visible,
a.mdc-top-bar__button:focus,
a.mdc-top-bar__button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

[data-theme="dark"] .mdc-top-bar__button:hover,
:root.theme-dark .mdc-top-bar__button:hover {
    color: var(--md-sys-color-on-surface) !important;
}

[data-theme="dark"] .mdc-top-bar__button::before,
:root.theme-dark .mdc-top-bar__button::before {
    background: var(--md-sys-color-primary-container);
}

[data-theme="dark"] .mdc-top-bar__button:hover::before,
:root.theme-dark .mdc-top-bar__button:hover::before {
    opacity: 0.12;
}

.mdc-top-bar__icon {
    font-family: 'Material Symbols Outlined', sans-serif !important;
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
    font-weight: normal !important;
    font-style: normal !important;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20 !important;
    -webkit-font-feature-settings: 'liga' !important;
    -webkit-font-smoothing: antialiased !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
    /* 轻微上移 1px，让图标与文字基线更对齐 */
    position: relative;
    top: -1px;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--md-sys-color-on-surface-variant) !important;
    /* 确保图标始终可见 */
    min-width: 18px !important;
    min-height: 18px !important;
    /* 确保文本内容可见 */
    text-indent: 0 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    /* 强制显示图标文本 */
    text-rendering: optimizeLegibility !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* 强制所有顶部栏图标显示 - 使用最高优先级（基础样式已在 .mdc-top-bar__icon 中定义） */
.mdc-top-bar__button span.material-symbols-outlined.mdc-top-bar__icon,
.mdc-top-bar__button .material-symbols-outlined.mdc-top-bar__icon {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: var(--md-sys-color-on-surface-variant) !important;
}

/* 特别针对 hide-mobile 按钮内的图标 - 确保在电脑版显示 */
.mdc-top-bar__button.hide-mobile span.material-symbols-outlined.mdc-top-bar__icon,
.mdc-top-bar__button.hide-mobile .material-symbols-outlined.mdc-top-bar__icon,
a.mdc-top-bar__button.hide-mobile span.material-symbols-outlined.mdc-top-bar__icon,
a.mdc-top-bar__button.hide-mobile .material-symbols-outlined.mdc-top-bar__icon {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 电脑版（≥768px）图标统一颜色和大小 */
@media (min-width: 768px) {
    /* 确保所有顶部栏按钮的图标可见（基础样式已在 .mdc-top-bar__icon 中定义） */
    .mdc-top-bar__button .material-symbols-outlined.mdc-top-bar__icon,
    .mdc-top-bar__button span.material-symbols-outlined.mdc-top-bar__icon,
    a.mdc-top-bar__button .material-symbols-outlined.mdc-top-bar__icon,
    a.mdc-top-bar__button span.material-symbols-outlined.mdc-top-bar__icon {
        opacity: 1 !important;
        color: var(--md-sys-color-on-surface-variant) !important;
        visibility: visible !important;
        display: inline-flex !important;
    }

    .mdc-top-bar__button:hover .material-symbols-outlined.mdc-top-bar__icon,
    .mdc-top-bar__button:hover span.material-symbols-outlined.mdc-top-bar__icon,
    a.mdc-top-bar__button:hover .material-symbols-outlined.mdc-top-bar__icon,
    a.mdc-top-bar__button:hover span.material-symbols-outlined.mdc-top-bar__icon {
        transform: scale(1.08);
        opacity: 1 !important;
        color: var(--md-sys-color-on-surface) !important;
        visibility: visible !important;
    }
}

/* 首页图标（突出显示，但保持统一风格）*/
.mdc-top-bar__icon--home {
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20 !important;
    color: var(--md-sys-color-primary) !important;
    opacity: 1 !important;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.mdc-top-bar__button:hover .mdc-top-bar__icon--home {
    transform: scale(1.1);
    color: var(--md-sys-color-primary) !important;
}

.mdc-top-bar__label {
    font-size: 14px !important;
    line-height: 1.5 !important;
    display: inline-flex !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-weight: 400;
    align-self: center !important;
    vertical-align: middle !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), font-weight 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.02em;
    color: var(--md-sys-color-on-surface-variant) !important;
}

/* 电脑版（≥768px）文字层次优化 */
@media (min-width: 768px) {
    /* 文字层次：普通按钮 */
    .mdc-top-bar__button .mdc-top-bar__label {
        opacity: 0.9;
    }

    /* 文字层次：悬停状态 */
    .mdc-top-bar__button:hover .mdc-top-bar__label {
        font-weight: 500;
        opacity: 1;
    }

    /* 文字层次：首页按钮（突出显示） */
    .mdc-top-bar__button:has(.mdc-top-bar__icon--home) .mdc-top-bar__label {
        color: var(--md-sys-color-primary) !important;
        font-weight: 500;
        opacity: 1;
    }

    .mdc-top-bar__button:has(.mdc-top-bar__icon--home):hover .mdc-top-bar__label {
        color: var(--md-sys-color-primary) !important;
        font-weight: 600;
    }
}

.mdc-top-bar__button .mdc-badge {
    position: relative;
    top: auto;
    right: auto;
    margin-left: 4px;
    font-size: 10px;
    font-weight: 600;
    min-width: 14px;
    height: 14px;
    padding: 0 4px;
    display: none;
    border-radius: 7px;
    background: var(--md-sys-color-error);
    color: var(--md-sys-color-on-error);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    line-height: 14px;
}

.mdc-top-bar__button .mdc-badge:not(:empty) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mdc-top-bar__button:hover .mdc-badge {
    transform: scale(1.05);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.12);
}

/* ===== 顶部栏背景修正：防止出现“透明”效果 ===== */
.mdc-top-bar {
    background-color: var(--md-sys-color-surface-container) !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

[data-theme="dark"] .mdc-top-bar,
:root.theme-dark .mdc-top-bar {
    background-color: var(--md-sys-color-surface) !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ??????????*/
.mdc-top-bar .mdc-menu-surface {
    position: relative;
}

.mdc-top-bar .mdc-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    z-index: 1002;
    min-width: 120px;
}

/* ===== Material Design 3 Top App Bar ===== */
.mdc-top-app-bar {
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    box-shadow: var(--md-sys-elevation-level1);
    position: relative;
    z-index: 1000;
}

.mdc-top-app-bar--fixed {
    position: fixed;
    top: 30px; /* ????????*/
    left: 0;
    right: 0;
    z-index: 1000; /* ?????????????????? */
}

.mdc-top-app-bar__row {
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    height: 64px;
    padding: 0 16px;
}

.mdc-top-app-bar__section {
    display: flex;
    align-items: center !important;
    min-width: 0;
}

.mdc-top-app-bar__section--align-start {
    flex: 0 0 auto; /* 不伸缩，根据内容自适应 */
    justify-content: flex-start;
    margin-right: 16px; /* 减少右边距，给搜索框更多空间 */
    flex-shrink: 0;
    min-width: fit-content;
}

.mdc-top-app-bar__section--align-center {
    flex: 2; /* 增加flex值，让搜索框占据更多空间 */
    justify-content: flex-start;
    margin-left: 16px; /* 减少左边距 */
    margin-right: 16px; /* 减少右边距 */
    min-width: 0;
    flex-shrink: 1;
    max-width: none; /* 移除宽度限制，允许搜索框最大化 */
}

.mdc-top-app-bar__section--align-end {
    flex: 0 0 auto; /* 不伸缩，根据内容自适应 */
    justify-content: flex-end;
    gap: 12px; /* ????????????*/
    flex-wrap: nowrap; /* ?????? */
    flex-shrink: 0; /* ????????????*/
    min-width: fit-content; /* ??????????????*/
}

/* ??????????*/
.mdc-top-app-bar__section--align-end .mdc-button,
.mdc-top-app-bar__section--align-end .mdc-icon-button {
    flex-shrink: 0 !important; /* ????????*/
    min-width: auto; /* ??????????? */
    white-space: nowrap; /* ???????? */
    font-size: 15px !important; /* 顶部栏按钮字体大小 */
}

/* 顶部栏所有按钮和文本统一字体大小 */
.mdc-top-app-bar .mdc-button,
.mdc-top-app-bar .mdc-button__label,
.mdc-top-app-bar__section .mdc-button,
.mdc-top-app-bar__section .mdc-button__label {
    font-size: 16px !important;
}

/* 顶部栏按钮和图标垂直居中 */
.mdc-top-app-bar .mdc-button,
.mdc-top-app-bar .mdc-icon-button,
.mdc-top-app-bar__section .mdc-button,
.mdc-top-app-bar__section .mdc-icon-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
}

/* 顶部栏按钮内的图标和文本垂直居中 */
.mdc-top-app-bar .mdc-button__icon,
.mdc-top-app-bar .mdc-button__label,
.mdc-top-app-bar__section .mdc-button__icon,
.mdc-top-app-bar__section .mdc-button__label {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    line-height: 1 !important;
}

/* ??????????????????*/
.mdc-search-form .mdc-search-submit-btn {
    flex-shrink: 0 !important; /* ?????????? */
}

/* ????????????????*/
.mdc-top-app-bar__section--align-end .mdc-button--text + .mdc-button--filled,
.mdc-top-app-bar__section--align-end .mdc-button--filled + .mdc-button--text {
    margin-left: 8px; /* ?????????????? */
}

/* ????????????????????*/
.mdc-top-app-bar__section--align-center + .mdc-top-app-bar__section--align-end .mdc-icon-button,
.mdc-top-app-bar__section--align-center + .mdc-top-app-bar__section--align-end .mdc-button:first-child {
    margin-left: 16px; /* ?????????????? */
}

/* Settings ????????*/
#settingsButton {
    margin-left: 16px;
}

.mdc-top-app-bar__title {
    font-family: var(--md-sys-typescale-title-large-font);
    font-size: 15px; /* 顶部栏标题字体大小 */
    font-weight: var(--md-sys-typescale-title-large-weight);
    line-height: var(--md-sys-typescale-title-large-line-height);
    color: var(--md-sys-color-on-surface);
    margin-left: 16px;
    display: flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    height: 100%;
}

.mdc-top-app-bar__title .logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    height: 40px;
}

.mdc-top-app-bar__title .logo-img {
    height: 40px;
    max-width: 200px;
    object-fit: contain;
    display: block;
    max-height: 100%;
}

.mdc-top-app-bar__title .logo-link img {
    display: block;
    max-height: 100%;
}

.mdc-top-app-bar__title .logo-text {
    font-weight: 500;
}

.mdc-top-app-bar-spacer {
    height: 94px; /* 30px (???? + 64px (???? */
}

/* ===== Material Design 3 ???? ===== */
.mdc-icon-button {
    width: 48px;
    height: 48px;
    padding: 12px;
    border: none;
    background: transparent;
    color: var(--md-sys-color-on-surface);
    cursor: pointer;
    border-radius: 50%;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.2s;
    position: relative;
    vertical-align: middle !important;
}

.mdc-icon-button:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.mdc-icon-button:focus {
    outline: none;
    background-color: rgba(0, 0, 0, 0.08);
}

.mdc-icon-button .material-symbols-outlined {
    font-size: 24px;
    width: 24px;
    height: 24px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    line-height: 1 !important;
}

/* 单独放大顶部左侧三条杠图标（移动端菜单按钮），与右侧头像视觉尺寸一致：40px */
#navToggle .material-symbols-outlined {
    font-size: 40px !important;
    width: 40px !important;
    height: 40px !important;
}

/* ===== Material Design 3 ?? ===== */
.mdc-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 24px;
    border-radius: var(--md-sys-shape-corner-small);
    font-family: var(--md-sys-typescale-label-large-font);
    font-size: var(--md-sys-typescale-label-large-size);
    font-weight: var(--md-sys-typescale-label-large-weight);
    line-height: var(--md-sys-typescale-label-large-line-height);
    text-transform: none;
    letter-spacing: 0.1px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    white-space: nowrap;
    gap: 8px;
    vertical-align: middle !important;
}

.mdc-button--filled {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    box-shadow: var(--md-sys-elevation-level1);
}

.mdc-button--filled:hover {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary) !important;
    box-shadow: var(--md-sys-elevation-level2);
    transform: translateY(-1px);
}

/* ??????????????? hover ??????????????*/
.mdc-button--filled:hover,
.mdc-button--filled:hover span,
.mdc-button--filled:hover *,
.mdc-button--filled:hover [data-i18n],
a.mdc-button--filled:hover,
a.mdc-button--filled:hover span,
a.mdc-button--filled:hover * {
    color: #ffffff !important;
}

.mdc-button--text {
    background-color: transparent;
    color: var(--md-sys-color-primary);
    box-shadow: none;
}

.mdc-button--text:hover {
    background-color: rgba(255, 249, 196, 0.08); /* 淡黄色悬停背景 */
}

.mdc-button--outlined {
    background-color: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline);
    box-shadow: none;
}

.mdc-button--outlined:hover {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    border-color: var(--md-sys-color-primary);
    box-shadow: var(--md-sys-elevation-level1);
}

.mdc-button--icon {
    padding: 10px;
    min-width: 48px;
}

.mdc-button--fullwidth {
    width: 100%;
}

.mdc-button__icon {
    font-size: 20px;
    width: 20px;
    height: 20px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    line-height: 1 !important;
}

.mdc-button__label {
    flex: 1;
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    line-height: 1 !important;
}

/* ===== Material Design 3 ?? ===== */
.mdc-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    background-color: var(--md-sys-color-surface);
    box-shadow: var(--md-sys-elevation-level3);
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    z-index: 2000;
    overflow-y: auto;
}

/* PC版移除导航抽屉阴影 */
@media (min-width: 768px) {
    .mdc-drawer {
        box-shadow: none !important;
    }
}

.mdc-drawer--modal {
    width: 360px;
}

.mdc-drawer--end {
    left: auto;
    right: 0;
    transform: translateX(100%);
}

.mdc-drawer--end.mdc-drawer--open {
    transform: translateX(0);
}

.mdc-drawer--open {
    transform: translateX(0);
}

.mdc-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.mdc-drawer__logo {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
}

.mdc-drawer__logo .drawer-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    height: 40px;
}

.mdc-drawer__logo .drawer-logo-img {
    height: 40px;
    max-width: 180px;
    object-fit: contain;
    display: block;
    max-height: 100%;
}

.mdc-drawer__logo .drawer-logo-text {
    font-family: var(--md-sys-typescale-title-large-font);
    font-size: var(--md-sys-typescale-title-large-size);
    font-weight: var(--md-sys-typescale-title-large-weight);
    color: var(--md-sys-color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mdc-drawer__title {
    font-family: var(--md-sys-typescale-title-large-font);
    font-size: var(--md-sys-typescale-title-large-size);
    font-weight: var(--md-sys-typescale-title-large-weight);
    color: var(--md-sys-color-on-surface);
}

.mdc-drawer__close {
    margin-left: auto;
}

.mdc-drawer__content {
    padding: 8px 0;
}

/* 手机版抽屉内容美化 */
@media (max-width: 767px) {
    .mdc-drawer__content {
        padding: 12px 0;
    }
    
    /* 第一个和最后一个菜单项的圆角优化 */
    .mdc-list .mdc-list-item:first-child {
        margin-top: 4px;
    }
    
    .mdc-list .mdc-list-item:last-child {
        margin-bottom: 4px;
    }
}

.mdc-drawer-scrim {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.32);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 1999;
}

.mdc-drawer-scrim--visible {
    opacity: 1;
    visibility: visible;
}

/* ===== Material Design 3 抽屉菜单列表 ===== */
.mdc-list {
    list-style: none;
    padding: 8px 0;
    margin: 0;
}

/* 手机版抽屉菜单项美化 */
@media (max-width: 767px) {
    .mdc-list-item {
        display: flex;
        align-items: center;
        padding: 14px 20px;
        margin: 2px 8px;
        color: var(--md-sys-color-on-surface);
        text-decoration: none;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
        position: relative;
        border-radius: 12px;
        /* 为左侧激活指示条预留空间 */
        padding-left: 56px;
        min-height: 56px;
        /* 添加微妙的背景和边框 */
        background-color: transparent;
        border: 1px solid transparent;
    }
    
    /* 左侧激活指示条（手机版更宽更明显） */
    .mdc-list-item--activated::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 32px;
        background: linear-gradient(180deg, 
            var(--md-sys-color-primary) 0%, 
            var(--md-sys-color-primary-container) 100%);
        border-radius: 0 4px 4px 0;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 2px 8px rgba(103, 80, 164, 0.3);
    }
    
    /* 激活状态背景（手机版更明显） */
    .mdc-list-item--activated {
        background: linear-gradient(90deg, 
            rgba(103, 80, 164, 0.12) 0%, 
            rgba(103, 80, 164, 0.06) 100%);
        color: var(--md-sys-color-primary);
        font-weight: 600;
        border-color: rgba(103, 80, 164, 0.2);
        box-shadow: 0 2px 8px rgba(103, 80, 164, 0.1);
    }
    
    /* 深色模式激活状态 */
    :root[data-theme="dark"] .mdc-list-item--activated,
    :root.theme-dark .mdc-list-item--activated,
    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) .mdc-list-item--activated {
            background: linear-gradient(90deg, 
                rgba(187, 134, 252, 0.18) 0%, 
                rgba(187, 134, 252, 0.08) 100%);
            border-color: rgba(187, 134, 252, 0.3);
        }
    }
    
    /* hover效果（手机版更明显） */
    .mdc-list-item:hover {
        background-color: rgba(0, 0, 0, 0.06);
        transform: translateX(4px);
        border-color: rgba(0, 0, 0, 0.1);
    }
    
    /* 深色模式hover效果 */
    :root[data-theme="dark"] .mdc-list-item:hover,
    :root.theme-dark .mdc-list-item:hover,
    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) .mdc-list-item:hover {
            background-color: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.15);
        }
    }
    
    /* 激活状态hover效果 */
    .mdc-list-item--activated:hover {
        background: linear-gradient(90deg, 
            rgba(103, 80, 164, 0.16) 0%, 
            rgba(103, 80, 164, 0.08) 100%);
        transform: translateX(4px);
        box-shadow: 0 4px 12px rgba(103, 80, 164, 0.15);
    }
    
    /* 深色模式激活状态hover */
    :root[data-theme="dark"] .mdc-list-item--activated:hover,
    :root.theme-dark .mdc-list-item--activated:hover,
    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) .mdc-list-item--activated:hover {
            background: linear-gradient(90deg, 
                rgba(187, 134, 252, 0.22) 0%, 
                rgba(187, 134, 252, 0.12) 100%);
        }
    }
}

/* PC版保持原有样式 */
@media (min-width: 768px) {
    .mdc-list-item {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        color: var(--md-sys-color-on-surface);
        text-decoration: none;
        transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
        position: relative;
        padding-left: 20px;
    }
    
    /* 左侧激活指示条 */
    .mdc-list-item--activated::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 24px;
        background-color: var(--md-sys-color-primary);
        border-radius: 0 2px 2px 0;
        transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                    background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .mdc-list-item:hover {
        background-color: rgba(0, 0, 0, 0.04);
        transform: translateX(2px);
    }
    
    :root[data-theme="dark"] .mdc-list-item:hover,
    :root.theme-dark .mdc-list-item:hover,
    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) .mdc-list-item:hover {
            background-color: rgba(255, 255, 255, 0.08);
        }
    }
    
    .mdc-list-item--activated {
        background-color: rgba(103, 80, 164, 0.08);
        color: var(--md-sys-color-primary);
        font-weight: 500;
    }
    
    :root[data-theme="dark"] .mdc-list-item--activated,
    :root.theme-dark .mdc-list-item--activated,
    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) .mdc-list-item--activated {
            background-color: rgba(187, 134, 252, 0.12);
        }
    }
    
    .mdc-list-item--activated:hover {
        background-color: rgba(103, 80, 164, 0.12);
        transform: translateX(2px);
    }
    
    :root[data-theme="dark"] .mdc-list-item--activated:hover,
    :root.theme-dark .mdc-list-item--activated:hover,
    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) .mdc-list-item--activated:hover {
            background-color: rgba(187, 134, 252, 0.16);
        }
    }
}

.mdc-list-item:hover {
    background-color: rgba(0, 0, 0, 0.04);
    transform: translateX(2px);
}

/* 深色模式hover效果 */
:root[data-theme="dark"] .mdc-list-item:hover,
:root.theme-dark .mdc-list-item:hover,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .mdc-list-item:hover {
        background-color: rgba(255, 255, 255, 0.08);
    }
}

.mdc-list-item--activated {
    background-color: rgba(103, 80, 164, 0.08); /* 使用主题色的低透明度背景 */
    color: var(--md-sys-color-primary);
    font-weight: 500; /* 激活状态字体稍粗 */
}

/* 深色模式激活状态背景 */
:root[data-theme="dark"] .mdc-list-item--activated,
:root.theme-dark .mdc-list-item--activated,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .mdc-list-item--activated {
        background-color: rgba(187, 134, 252, 0.12); /* 深色模式使用更亮的主题色 */
    }
}

/* 激活状态hover效果 */
.mdc-list-item--activated:hover {
    background-color: rgba(103, 80, 164, 0.12);
    transform: translateX(2px);
}

/* 深色模式激活状态hover */
:root[data-theme="dark"] .mdc-list-item--activated:hover,
:root.theme-dark .mdc-list-item--activated:hover,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .mdc-list-item--activated:hover {
        background-color: rgba(187, 134, 252, 0.16);
    }
}

.mdc-list-item__graphic {
    margin-right: 16px;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 24px !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    visibility: visible !important;
    opacity: 1 !important;
    /* 确保Material Symbols图标正确显示 */
    font-family: 'Material Symbols Outlined', sans-serif !important;
    font-weight: normal !important;
    font-style: normal !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    white-space: nowrap !important;
    word-wrap: normal !important;
    direction: ltr !important;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
    -webkit-font-feature-settings: 'liga' !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    text-indent: 0 !important;
    overflow: visible !important;
    /* hover效果：图标颜色变化和轻微缩放 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 手机版图标美化 */
@media (max-width: 767px) {
    .mdc-list-item__graphic {
        font-size: 28px !important;
        width: 28px !important;
        height: 28px !important;
        margin-right: 20px;
        /* 图标背景圆形装饰 */
        position: relative;
    }
    
    /* 图标背景圆形（激活状态显示） */
    .mdc-list-item--activated .mdc-list-item__graphic::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 40px;
        height: 40px;
        background: rgba(103, 80, 164, 0.1);
        border-radius: 50%;
        z-index: -1;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* 深色模式图标背景 */
    :root[data-theme="dark"] .mdc-list-item--activated .mdc-list-item__graphic::after,
    :root.theme-dark .mdc-list-item--activated .mdc-list-item__graphic::after,
    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) .mdc-list-item--activated .mdc-list-item__graphic::after {
            background: rgba(187, 134, 252, 0.15);
        }
    }
    
    /* hover时图标背景 */
    .mdc-list-item:hover .mdc-list-item__graphic::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 40px;
        height: 40px;
        background: rgba(0, 0, 0, 0.05);
        border-radius: 50%;
        z-index: -1;
    }
    
    :root[data-theme="dark"] .mdc-list-item:hover .mdc-list-item__graphic::after,
    :root.theme-dark .mdc-list-item:hover .mdc-list-item__graphic::after,
    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) .mdc-list-item:hover .mdc-list-item__graphic::after {
            background: rgba(255, 255, 255, 0.08);
        }
    }
}

/* PC版（≥768px）隐藏抽屉菜单图标 */
@media (min-width: 768px) {
    .mdc-drawer .mdc-list-item__graphic {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        margin-right: 0 !important;
    }
    
    /* PC版调整菜单项左边距（因为图标隐藏了） */
    .mdc-drawer .mdc-list-item {
        padding-left: 16px !important;
    }
}

/* 手机版（<768px）显示抽屉菜单图标 */
@media (max-width: 767px) {
    .mdc-drawer .mdc-list-item__graphic {
        display: flex !important;
        visibility: visible !important;
        width: 28px !important;
        height: 28px !important;
        margin-right: 20px !important;
        font-size: 28px !important;
    }
    
    /* 特别针对"首页"图标确保在手机版显示（最高优先级） */
    #navDrawer .mdc-list-item[data-i18n="common.home"] .material-symbols-outlined.mdc-list-item__graphic,
    #navDrawer .mdc-list-item[data-i18n="common.home"] .mdc-list-item__graphic.material-symbols-outlined,
    .mdc-drawer .mdc-list-item[data-i18n="common.home"] .material-symbols-outlined.mdc-list-item__graphic,
    #navDrawer .mdc-list-item[data-i18n="common.home"] [data-icon="home"],
    .mdc-drawer .mdc-list-item[data-i18n="common.home"] [data-icon="home"],
    #navDrawer .mdc-list-item[data-i18n="common.home"] span.material-symbols-outlined,
    .mdc-drawer .mdc-list-item[data-i18n="common.home"] span.material-symbols-outlined {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-family: 'Material Symbols Outlined', sans-serif !important;
        font-size: 28px !important;
        width: 28px !important;
        height: 28px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-indent: 0 !important;
        font-weight: normal !important;
        font-style: normal !important;
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 28 !important;
        -webkit-font-feature-settings: 'liga' !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
        text-rendering: optimizeLegibility !important;
        color: var(--md-sys-color-on-surface-variant) !important;
        margin-right: 20px !important;
        position: relative !important; /* 确保图标容器有相对定位，以便::before伪元素正确定位 */
    }
    
    /* 激活状态首页图标 */
    .mdc-list-item--activated[data-i18n="common.home"] .mdc-list-item__graphic,
    .mdc-list-item--activated[data-i18n="common.home"] span.material-symbols-outlined {
        color: var(--md-sys-color-primary) !important;
    }
    
    /* 使用::before伪元素作为备用显示（如果文本内容被清空） */
    #navDrawer .mdc-list-item[data-i18n="common.home"] .material-symbols-outlined.mdc-list-item__graphic::before,
    .mdc-drawer .mdc-list-item[data-i18n="common.home"] .material-symbols-outlined.mdc-list-item__graphic::before,
    #navDrawer .mdc-list-item[data-i18n="common.home"] span.material-symbols-outlined::before {
        content: 'home' !important;
        font-family: 'Material Symbols Outlined', sans-serif !important;
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 28 !important;
        -webkit-font-feature-settings: 'liga' !important;
        display: inline-block !important;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        line-height: 1;
    }
    
    /* 如果图标文本内容为空，显示::before伪元素 */
    #navDrawer .mdc-list-item[data-i18n="common.home"] .material-symbols-outlined.mdc-list-item__graphic:empty::before,
    .mdc-drawer .mdc-list-item[data-i18n="common.home"] .material-symbols-outlined.mdc-list-item__graphic:empty::before,
    #navDrawer .mdc-list-item[data-i18n="common.home"] span.material-symbols-outlined:empty::before {
        display: inline-block !important;
    }
    
    .mdc-list-item--activated[data-i18n="common.home"] .mdc-list-item__graphic::before,
    .mdc-list-item--activated[data-i18n="common.home"] span.material-symbols-outlined::before {
        color: var(--md-sys-color-primary) !important;
    }
}

/* hover时图标颜色变化和轻微缩放 */
.mdc-list-item:hover .mdc-list-item__graphic {
    color: var(--md-sys-color-primary);
    transform: scale(1.1);
}

/* 手机版hover图标效果 */
@media (max-width: 767px) {
    .mdc-list-item:hover .mdc-list-item__graphic {
        transform: scale(1.15);
        color: var(--md-sys-color-primary);
    }
}

/* 激活状态图标颜色 */
.mdc-list-item--activated .mdc-list-item__graphic {
    color: var(--md-sys-color-primary);
}

/* 手机版激活状态图标 */
@media (max-width: 767px) {
    .mdc-list-item--activated .mdc-list-item__graphic {
        color: var(--md-sys-color-primary);
        transform: scale(1.05);
    }
}

.mdc-list-item--activated .mdc-list-item__graphic {
    color: var(--md-sys-color-primary);
}

/* PC版（≥768px）首页图标样式（通用规则，会被手机版媒体查询覆盖） */
@media (min-width: 768px) {
    /* PC版不显示图标，已在媒体查询中处理 */
}

/* 通用规则：首页图标基础样式（PC版和手机版共用，手机版会被媒体查询覆盖） */
#navDrawer .mdc-list-item[data-i18n="common.home"] .material-symbols-outlined.mdc-list-item__graphic,
#navDrawer .mdc-list-item[data-i18n="common.home"] .mdc-list-item__graphic.material-symbols-outlined,
.mdc-drawer .mdc-list-item[data-i18n="common.home"] .material-symbols-outlined.mdc-list-item__graphic,
#navDrawer .mdc-list-item[data-i18n="common.home"] [data-icon="home"],
.mdc-drawer .mdc-list-item[data-i18n="common.home"] [data-icon="home"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-family: 'Material Symbols Outlined', sans-serif !important;
    font-size: 24px !important;
    width: 24px !important;
    height: 24px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-indent: 0 !important;
    font-weight: normal !important;
    font-style: normal !important;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
    -webkit-font-feature-settings: 'liga' !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    color: var(--md-sys-color-on-surface-variant) !important;
}

.mdc-list-item--activated[data-i18n="common.home"] .mdc-list-item__graphic {
    color: var(--md-sys-color-primary) !important;
}

.mdc-list-item__text {
    flex: 1;
    font-family: var(--md-sys-typescale-body-large-font);
    font-size: var(--md-sys-typescale-body-large-size);
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                font-weight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 手机版文字美化 */
@media (max-width: 767px) {
    .mdc-list-item__text {
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 0.15px;
    }
    
    /* 激活状态文字 */
    .mdc-list-item--activated .mdc-list-item__text {
        font-weight: 600;
        letter-spacing: 0.2px;
    }
    
    /* hover状态文字 */
    .mdc-list-item:hover .mdc-list-item__text {
        color: var(--md-sys-color-primary);
    }
}

/* ===== Material Design 3 ?? ===== */
/* ??????????????????????*/
.mdc-navigation {
    display: none !important; /* ?????????? */
    background-color: var(--md-sys-color-surface);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    box-shadow: var(--md-sys-elevation-level1);
}

.mdc-navigation__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

.mdc-navigation__list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 8px;
}

.mdc-navigation__item {
    position: relative;
}

.mdc-navigation__link {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    color: var(--md-sys-color-on-surface);
    text-decoration: none;
    font-family: var(--md-sys-typescale-label-large-font);
    font-size: var(--md-sys-typescale-label-large-size);
    font-weight: var(--md-sys-typescale-label-large-weight);
    transition: color 0.2s;
    position: relative;
}

.mdc-navigation__item--active .mdc-navigation__link,
.mdc-navigation__link:hover {
    color: var(--md-sys-color-primary);
}

.mdc-navigation__item--active .mdc-navigation__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 2px;
    background-color: var(--md-sys-color-primary);
}

/* ===== Material Design 3 ???? ===== */
.mdc-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    flex: 1;
    min-width: 0;
}

.mdc-text-field {
    position: relative;
    flex: 1;
}

.mdc-text-field--outlined {
    border: 1px solid var(--md-sys-color-outline-variant, #bdbdbd);
    border-radius: var(--md-sys-shape-corner-small);
    background-color: var(--md-sys-color-surface);
}

.mdc-text-field--with-leading-icon {
    padding-left: 0; /* 由内层 input padding-left 控制文字起始位置 */
}

.mdc-text-field__icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--md-sys-color-on-surface-variant);
    font-size: 20px;
    pointer-events: none;
}

/* 前导图标与文字间距：图标后约 8px 空隙，padding-left 40px 与 form-inputs 一致 */
.mdc-text-field--with-leading-icon .mdc-text-field__input {
    padding-left: 40px;
}

.mdc-text-field__input {
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: transparent;
    font-family: var(--md-sys-typescale-body-large-font);
    font-size: var(--md-sys-typescale-body-large-size);
    color: var(--md-sys-color-on-surface);
    outline: none;
}

.mdc-text-field__input::placeholder {
    color: var(--md-sys-color-on-surface-variant);
}

.mdc-text-field--outlined:focus-within {
    border-color: var(--md-sys-color-primary, #1976d2);
    border-width: 2px;
    /* 移除 box-shadow，避免与 border 叠加形成双层框 */
}

/* 与登录/注册统一：最小高度、尾图标（校验状态） */
.mdc-text-field--outlined {
    min-height: 56px; /* MD3标准：56px（从44px提升） */
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.mdc-text-field--with-trailing-icon .mdc-text-field__input {
    padding-right: 48px;
}

.mdc-text-field__trailing-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--md-sys-color-on-surface-variant);
    font-size: 18px;
    pointer-events: none;
    line-height: 1;
    width: 22px;
    text-align: center;
}

.mdc-text-field__trailing-icon.mdc-text-field__trailing-icon--error {
    color: var(--md-sys-color-error);
}

.mdc-text-field--outlined.valid,
.mdc-text-field--outlined.mdc-text-field--valid {
    border-color: var(--md-sys-color-success, #4caf50);
    background: var(--md-sys-color-success-container, #e8f5e9);
    box-shadow: 0 0 0 1px var(--md-sys-color-success-container, rgba(76, 175, 80, 0.2));
}

.mdc-text-field--outlined.invalid,
.mdc-text-field--outlined.mdc-text-field--invalid {
    border-color: var(--md-sys-color-error, #ba1a1a);
    background: var(--md-sys-color-error-container, #ffebee);
    box-shadow: 0 0 0 1px var(--md-sys-color-error-container, rgba(186, 26, 26, 0.2));
}

/* ===== Material Design 3 淡蓝色卡片容器 ===== */
/* 用于验证码区域、提示信息等需要突出显示的区块 */
.mdc-primary-container-card {
    padding: 16px;
    background: var(--md-sys-color-primary-container, #e3f2fd);
    border-radius: 12px;
    border: 1px solid var(--md-sys-color-outline-variant, #e0e0e0);
    box-sizing: border-box;
}

/* 卡片内的标签和提示文字使用深色（适配淡蓝色背景） */
.mdc-primary-container-card > label,
.mdc-primary-container-card label,
.mdc-primary-container-card .login-captcha-hint,
.mdc-primary-container-card .register-captcha-hint,
.mdc-primary-container-card .register-captcha-hint-inline {
    color: var(--md-sys-color-on-primary-container, #001d35);
}

/* 深色模式下淡蓝色卡片 */
:root[data-theme="dark"] .mdc-primary-container-card,
:root.theme-dark .mdc-primary-container-card {
    background: var(--md-sys-color-primary-container, rgba(25, 118, 210, 0.2));
    border-color: var(--md-sys-color-outline-variant, rgba(255,255,255,0.12));
}

/* 深色模式下卡片内的文字颜色 */
:root[data-theme="dark"] .mdc-primary-container-card > label,
:root.theme-dark .mdc-primary-container-card > label,
:root[data-theme="dark"] .mdc-primary-container-card label,
:root.theme-dark .mdc-primary-container-card label,
:root[data-theme="dark"] .mdc-primary-container-card .login-captcha-hint,
:root.theme-dark .mdc-primary-container-card .login-captcha-hint,
:root[data-theme="dark"] .mdc-primary-container-card .register-captcha-hint,
:root.theme-dark .mdc-primary-container-card .register-captcha-hint,
:root[data-theme="dark"] .mdc-primary-container-card .register-captcha-hint-inline,
:root.theme-dark .mdc-primary-container-card .register-captcha-hint-inline {
    color: var(--md-sys-color-on-primary-container, #d0e4ff);
}

/* ===== Material Design 3 ?? ===== */
.mdc-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    min-width: 200px;
    background-color: var(--md-sys-color-surface);
    border-radius: var(--md-sys-shape-corner-small);
    box-shadow: var(--md-sys-elevation-level3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
    z-index: 3000;
}

.mdc-menu-surface--open .mdc-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ===== Material Design 3 ?? ===== */
.mdc-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    background-color: var(--md-sys-color-error);
    color: var(--md-sys-color-on-error);
    border-radius: 9px;
    font-size: 11px;
    font-weight: 500;
    display: none; /* ??????????????*/
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.mdc-badge:not(:empty) {
    display: flex; /* ?????? */
}

/* ===== Material Design 3 ?? ===== */
.mdc-footer-content {
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    padding: 48px 0 24px;
    margin-top: 48px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

/* 手机版隐藏传统页脚，只显示底部导航条 */
@media (max-width: 767px) {
    .mdc-footer-content {
        display: none !important; /* 手机版隐藏传统页脚 */
    }
}

.mdc-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

.mdc-footer-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
    margin-bottom: 32px;
}

.mdc-footer-links__section {
    display: flex;
    flex-direction: column;
}

.mdc-footer-links__title {
    font-family: var(--md-sys-typescale-title-large-font);
    font-size: var(--md-sys-typescale-title-large-size);
    font-weight: var(--md-sys-typescale-title-large-weight);
    color: var(--md-sys-color-on-surface);
    margin-bottom: 16px;
}

.mdc-footer-links__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mdc-footer-links__list a {
    color: var(--md-sys-color-on-surface-variant);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}

.mdc-footer-links__list a:hover {
    color: var(--md-sys-color-primary);
}

.mdc-footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    text-align: center;
}

.mdc-footer-icp {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
}

.mdc-footer-icp__link {
    color: var(--md-sys-color-on-surface-variant);
    text-decoration: none;
}

.mdc-footer-icp__link:hover {
    color: var(--md-sys-color-primary);
}

.mdc-footer-copyright {
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
}

/* ===== Material Design 3 FAB???????? ===== */
.mdc-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    border: none;
    box-shadow: none !important; /* 移除阴影 */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    z-index: 1001; /* 高于导航条的z-index: 1000 */
    opacity: 0;
    visibility: hidden;
    transform: scale(0);
}

.mdc-fab--extended {
    width: auto;
    padding: 0 20px;
    border-radius: 28px;
    gap: 8px;
}

.mdc-fab--visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.mdc-fab:hover {
    box-shadow: none !important; /* 移除悬停时的阴影 */
    transform: scale(1.05);
}

.mdc-fab__icon {
    font-size: 24px;
}

.mdc-fab__label {
    font-family: var(--md-sys-typescale-label-large-font);
    font-size: var(--md-sys-typescale-label-large-size);
    font-weight: var(--md-sys-typescale-label-large-weight);
}

/* ===== ?????? ===== */
.hide-xs {
    display: block;
}

.hide-sm {
    display: block;
}

/* 响应式工具类：hide-xs 和 hide-sm（登录/注册按钮现在使用 hide-mobile 类，断点为 767px） */
@media (max-width: 862px) {
    .hide-xs {
        display: none !important;
    }
}

@media (min-width: 863px) {
    .hide-xs {
        display: block !important;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .hide-sm {
        display: none !important;
    }
}

/* ===== 移动端优化 ===== */
/* 手机版页头：从768px开始进入手机版样式 */
@media (max-width: 767px) {
    /* 手机版隐藏顶部栏（30px）- 完全隐藏，包括所有子元素 */
    .mdc-top-bar,
    .mdc-top-bar--fixed,
    .mdc-top-bar__row,
    .mdc-top-bar__section,
    .mdc-top-bar__button,
    .mdc-top-bar__icon,
    .mdc-top-bar__label {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
    
    /* 手机版主页头从顶部开始（因为顶部栏已隐藏） */
    .mdc-top-app-bar--fixed {
        top: 0 !important;
    }
    
    .mdc-top-app-bar__row {
        height: 56px;
        padding: 0 4px;
    }
    
    /* 手机版隐藏logo */
    .mdc-top-app-bar__title {
        display: none !important;
    }
    
    /* 手机版页头布局优化 */
    .mdc-top-app-bar__section--align-start {
        flex-shrink: 0;
        min-width: 48px;
    }
    
    .mdc-top-app-bar__section--align-center {
        flex: 1;
        min-width: 0;
        margin: 0 4px;
    }
    
    .mdc-top-app-bar__section--align-end {
        flex-shrink: 0;
    }
    
    /* 调整主内容区域间距（因为顶部栏已隐藏，只需要主页头的56px） */
    .mdc-top-app-bar-spacer {
        height: 56px !important; /* 移动端主页头高度，不再需要顶部栏的30px */
    }
    
    .mdc-navigation {
        display: none;
    }
    
    .mdc-footer-links {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .mdc-fab {
        bottom: 80px; /* 在导航条上方（导航条高度64px + 间距16px） */
        right: 16px;
        width: 56px;
        height: 56px;
    }
    
    /* 确保聊天按钮在移动端藏到右侧边缘，不被 .mdc-fab 覆盖 */
    .mdc-chat-fab {
        top: 50% !important;
        bottom: auto !important;
        right: 0 !important;
        transform: translateX(36px) translateY(-50%) !important;
        opacity: 0.5 !important;
        visibility: visible !important;
    }
    
    .mdc-fab--extended {
        width: 56px;
        padding: 0;
    }
    
    .mdc-fab__label {
        display: none;
    }
}