/*!
 * MD3（Material Design 3 / Material You）完整风格层
 * -----------------------------------------------------------------------------
 * 对应后台「Material Design 3」选项，与 MD2 风格二选一。
 *
 * 实现要点：
 *   - 设计令牌命名沿用 https://www.mdui.org/zh-cn/ 的 MD3 文档（--mdui-*）；
 *   - 颜色由 css/md3-tokens.css 依据主题主色 / 强调色生成（浅色 + 深色两套语义色）；
 *   - 只重绘「界面容器与控件」：应用栏、抽屉、卡片、按钮、FAB、表单、对话框等；
 *   - **不修改任何 Banner / 特色图 / 懒加载图片 / 填充图层的背景与显示方式**，
 *     文章头图、页面头图、首页大图、列表缩略图均保持主题原有渲染逻辑；
 *   - 圆角只用在 MD3 规范明确规定的组件上（按钮胶囊、卡片 12px、对话框 28px 等），
 *     整页容器、Banner、图片不会被套上大圆角。
 * -----------------------------------------------------------------------------
 */

/* ==========================================================================
 * 0. 设计令牌
 * ========================================================================== */
html.mdx-md3 {
    --mdui-shape-corner-none: 0;
    --mdui-shape-corner-extra-small: 4px;
    --mdui-shape-corner-small: 8px;
    --mdui-shape-corner-medium: 12px;
    --mdui-shape-corner-large: 16px;
    --mdui-shape-corner-extra-large: 28px;
    --mdui-shape-corner-full: 999px;

    --mdui-state-layer-hover: 0.08;
    --mdui-state-layer-focus: 0.12;
    --mdui-state-layer-pressed: 0.12;

    --mdui-elevation-level0: none;
    --mdui-elevation-level1: 0 1px 2px rgba(var(--mdui-color-shadow), 0.3), 0 1px 3px 1px rgba(var(--mdui-color-shadow), 0.15);
    --mdui-elevation-level2: 0 1px 2px rgba(var(--mdui-color-shadow), 0.3), 0 2px 6px 2px rgba(var(--mdui-color-shadow), 0.15);
    --mdui-elevation-level3: 0 1px 3px rgba(var(--mdui-color-shadow), 0.3), 0 4px 8px 3px rgba(var(--mdui-color-shadow), 0.15);

    --mdui-motion-duration-short3: 150ms;
    --mdui-motion-duration-short4: 200ms;
    --mdui-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);

    --mdui-font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;

    --mdui-typescale-display-small-size: 36px;
    --mdui-typescale-display-small-line-height: 44px;
    --mdui-typescale-headline-large-size: 32px;
    --mdui-typescale-headline-large-line-height: 40px;
    --mdui-typescale-headline-medium-size: 28px;
    --mdui-typescale-headline-medium-line-height: 36px;
    --mdui-typescale-headline-small-size: 24px;
    --mdui-typescale-headline-small-line-height: 32px;
    --mdui-typescale-title-large-size: 22px;
    --mdui-typescale-title-large-line-height: 28px;
    --mdui-typescale-title-medium-size: 16px;
    --mdui-typescale-title-medium-line-height: 24px;
    --mdui-typescale-title-small-size: 14px;
    --mdui-typescale-title-small-line-height: 20px;
    --mdui-typescale-body-large-size: 16px;
    --mdui-typescale-body-large-line-height: 24px;
    --mdui-typescale-body-medium-size: 14px;
    --mdui-typescale-body-medium-line-height: 20px;
    --mdui-typescale-label-large-size: 14px;
    --mdui-typescale-label-large-line-height: 20px;
    --mdui-typescale-label-medium-size: 12px;
    --mdui-typescale-label-medium-line-height: 16px;
}

/* MD3 字体（Roboto，仅拉丁字符，通过 .mdx-md3-font 启用） */
@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/Roboto-Light.woff2") format("woff2");
}
@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/Roboto-Regular.woff2") format("woff2");
}
@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/Roboto-Medium.woff2") format("woff2");
}
@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/Roboto-Bold.woff2") format("woff2");
}

html.mdx-md3.mdx-md3-font .mdui-typo-headline,
html.mdx-md3.mdx-md3-font .mdx-logo,
html.mdx-md3.mdx-md3-font .PostTitle h1,
html.mdx-md3.mdx-md3-font .PostTitle2 h1,
html.mdx-md3.mdx-md3-font .PostTitlePage h1,
html.mdx-md3.mdx-md3-font article h1,
html.mdx-md3.mdx-md3-font article h2,
html.mdx-md3.mdx-md3-font article h3,
html.mdx-md3.mdx-md3-font article h4,
html.mdx-md3.mdx-md3-font .mdui-card-primary-title,
html.mdx-md3.mdx-md3-font .mdx-slide-content h1,
html.mdx-md3.mdx-md3-font .theFirstPageSay {
    font-family: Roboto, var(--mdui-font-family) !important;
}

/* ==========================================================================
 * 1. 基础
 * ========================================================================== */
html.mdx-md3 body {
    background-color: rgb(var(--mdui-color-surface)) !important;
    color: rgb(var(--mdui-color-on-surface)) !important;
    font-family: var(--mdui-font-family);
    -webkit-font-smoothing: antialiased;
}

html.mdx-md3 ::selection {
    background-color: rgba(var(--mdui-color-primary), 0.24);
}

html.mdx-md3 :focus-visible {
    outline: 2px solid rgb(var(--mdui-color-primary));
    outline-offset: 2px;
}

html.mdx-md3 .mdui-divider,
html.mdx-md3 hr {
    background-color: rgb(var(--mdui-color-outline-variant)) !important;
    border-color: rgb(var(--mdui-color-outline-variant)) !important;
    opacity: 1;
}

html.mdx-md3 a {
    color: rgb(var(--mdui-color-primary));
}

/* ==========================================================================
 * 2. 顶部应用栏（不改变主题原有的透明/主题色行为，只处理字号与图标）
 * ========================================================================== */
html.mdx-md3 .titleBarGobal .mdx-logo,
html.mdx-md3 .titleBarGobal .mdui-typo-headline {
    font-size: var(--mdui-typescale-title-large-size) !important;
    line-height: var(--mdui-typescale-title-large-line-height) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    color: inherit !important;
}

/* 顶栏内的图标按钮沿用主题的文字颜色（透明样式 + 白字或主题色底 + 白字） */
html.mdx-md3 .titleBarGobal .mdui-btn-icon,
html.mdx-md3 #titleBar .mdui-btn-icon,
html.mdx-md3 #titleBarinPost .mdui-btn-icon,
html.mdx-md3 #SearchBar .mdui-btn-icon {
    color: inherit !important;
    background-color: transparent !important;
    transition: background-color var(--mdui-motion-duration-short3) var(--mdui-motion-easing-standard);
}
html.mdx-md3 .titleBarGobal .mdui-btn-icon:hover,
html.mdx-md3 #titleBar .mdui-btn-icon:hover,
html.mdx-md3 #titleBarinPost .mdui-btn-icon:hover,
html.mdx-md3 #SearchBar .mdui-btn-icon:hover {
    background-color: rgba(255, 255, 255, 0.14) !important;
}

/* 全屏搜索：保留主题的遮罩与配色，只把输入框做成 MD3 圆角搜索框 */
html.mdx-md3 .outOfSearch {
    background-color: rgb(var(--mdui-color-surface-container-high)) !important;
    border-radius: var(--mdui-shape-corner-full) !important;
    transition: box-shadow var(--mdui-motion-duration-short3) var(--mdui-motion-easing-standard);
}
html.mdx-md3 .outOfSearch:focus-within {
    box-shadow: 0 0 0 2px rgba(var(--mdui-color-primary), 0.45) !important;
}
html.mdx-md3 .seainput {
    color: rgb(var(--mdui-color-on-surface)) !important;
    font-size: var(--mdui-typescale-body-large-size) !important;
}
html.mdx-md3 .seainput::placeholder {
    color: rgb(var(--mdui-color-on-surface-variant)) !important;
    opacity: 1;
}
html.mdx-md3 .seaicon {
    color: rgb(var(--mdui-color-on-surface-variant)) !important;
}

/* ==========================================================================
 * 3. 抽屉导航
 * ========================================================================== */
html.mdx-md3 .mdui-drawer,
html.mdx-md3 #left-drawer,
html.mdx-md3 #mdx-right-drawer {
    background-color: rgb(var(--mdui-color-surface-container-low)) !important;
    color: rgb(var(--mdui-color-on-surface)) !important;
    box-shadow: var(--mdui-elevation-level1) !important;
}
html.mdx-md3 #left-drawer {
    border-radius: 0 var(--mdui-shape-corner-large) var(--mdui-shape-corner-large) 0 !important;
}
html.mdx-md3 #mdx-right-drawer {
    border-radius: var(--mdui-shape-corner-large) 0 0 var(--mdui-shape-corner-large) !important;
}
html.mdx-md3 .mdui-drawer .mdui-list {
    padding: 8px 12px;
}
html.mdx-md3 .mdui-drawer .mdui-list-item {
    border-radius: var(--mdui-shape-corner-medium) !important;
    color: rgb(var(--mdui-color-on-surface-variant)) !important;
    transition: background-color var(--mdui-motion-duration-short3) var(--mdui-motion-easing-standard),
        color var(--mdui-motion-duration-short3) var(--mdui-motion-easing-standard);
}
html.mdx-md3 .mdui-drawer .mdui-list-item:hover {
    background-color: rgba(var(--mdui-color-on-surface), var(--mdui-state-layer-hover)) !important;
}
html.mdx-md3 .mdui-drawer .mdui-list-item.current-menu-item,
html.mdx-md3 .mdui-drawer .mdui-list-item.mdui-list-item-active {
    background-color: rgb(var(--mdui-color-secondary-container)) !important;
    color: rgb(var(--mdui-color-on-secondary-container)) !important;
    font-weight: 500;
}
html.mdx-md3 .mdui-drawer .mdui-list-item i {
    color: inherit !important;
}
html.mdx-md3 .mdx-side-title,
html.mdx-md3 .side-info-head {
    color: rgb(var(--mdui-color-on-surface)) !important;
}

/* 菜单 */
html.mdx-md3 .mdui-menu {
    background-color: rgb(var(--mdui-color-surface-container)) !important;
    border-radius: var(--mdui-shape-corner-extra-small) !important;
    box-shadow: var(--mdui-elevation-level2) !important;
}
html.mdx-md3 .mdui-menu-item {
    color: rgb(var(--mdui-color-on-surface)) !important;
}
html.mdx-md3 .mdui-menu-item:hover {
    background-color: rgba(var(--mdui-color-on-surface), var(--mdui-state-layer-hover)) !important;
}
html.mdx-md3 .mdui-menu-item-icon {
    color: rgb(var(--mdui-color-on-surface-variant)) !important;
}

/* ==========================================================================
 * 4. 按钮 / 图标按钮 / FAB
 * ========================================================================== */
html.mdx-md3 .mdui-btn {
    border-radius: var(--mdui-shape-corner-full) !important;
    height: 40px;
    padding: 0 24px !important;
    font-family: var(--mdui-font-family);
    font-size: var(--mdui-typescale-label-large-size) !important;
    font-weight: 500 !important;
    letter-spacing: 0.1px;
    text-transform: none;
    color: rgb(var(--mdui-color-primary)) !important;
    box-shadow: none !important;
    transition: background-color var(--mdui-motion-duration-short3) var(--mdui-motion-easing-standard),
        box-shadow var(--mdui-motion-duration-short3) var(--mdui-motion-easing-standard);
}
html.mdx-md3 .mdui-btn.mdui-color-theme,
html.mdx-md3 .mdui-btn.mdui-color-theme-accent {
    background-color: rgb(var(--mdui-color-primary)) !important;
    color: rgb(var(--mdui-color-on-primary)) !important;
}
html.mdx-md3 .mdui-btn.mdui-btn-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0 !important;
    border-radius: var(--mdui-shape-corner-full) !important;
    color: rgb(var(--mdui-color-on-surface-variant)) !important;
    background-color: transparent !important;
}
html.mdx-md3 .mdui-btn.mdui-btn-icon:hover {
    background-color: rgba(var(--mdui-color-on-surface), var(--mdui-state-layer-hover)) !important;
}
html.mdx-md3 .mdui-btn i,
html.mdx-md3 .mdui-btn .mdui-icon {
    color: inherit !important;
}

html.mdx-md3 .mdui-fab {
    border-radius: var(--mdui-shape-corner-large) !important;
    background-color: rgb(var(--mdui-color-primary-container)) !important;
    color: rgb(var(--mdui-color-on-primary-container)) !important;
    box-shadow: var(--mdui-elevation-level3) !important;
    transition: box-shadow var(--mdui-motion-duration-short3) var(--mdui-motion-easing-standard);
}
html.mdx-md3 .mdui-fab:hover {
    box-shadow: var(--mdui-elevation-level3) !important;
}
html.mdx-md3 .mdui-fab i {
    color: inherit !important;
}
/* 回到顶部按钮：保持 MD3 圆角方形 FAB（16px） */

/* ==========================================================================
 * 5. 卡片 / 文章列表（只处理卡片容器，不处理其中的 Banner 图）
 * ========================================================================== */
html.mdx-md3 .mdui-card,
html.mdx-md3 .post-item,
html.mdx-md3 .postDiv,
html.mdx-md3 .indexgaid,
html.mdx-md3 .staDivgaid,
html.mdx-md3 .searchCard,
html.mdx-md3 .mdx-hot-posts,
html.mdx-md3 .mdx-same-posts .mdui-card,
html.mdx-md3 .mdx-author-c,
html.mdx-md3 .mdx-ad-in-list,
html.mdx-md3 .links-co-grid {
    background-color: rgb(var(--mdui-color-surface-container-low)) !important;
    color: rgb(var(--mdui-color-on-surface)) !important;
    border-radius: var(--mdui-shape-corner-medium) !important;
    box-shadow: none !important;
    overflow: hidden;
    transition: background-color var(--mdui-motion-duration-short3) var(--mdui-motion-easing-standard),
        box-shadow var(--mdui-motion-duration-short3) var(--mdui-motion-easing-standard);
}
html.mdx-md3 .post-item:hover,
html.mdx-md3 .indexgaid:hover,
html.mdx-md3 .staDivgaid:hover,
html.mdx-md3 .mdui-card.mdui-hoverable:hover {
    background-color: rgb(var(--mdui-color-surface-container)) !important;
    box-shadow: var(--mdui-elevation-level1) !important;
}
html.mdx-md3 .mdui-card-primary-title,
html.mdx-md3 .ainList {
    color: rgb(var(--mdui-color-on-surface)) !important;
    font-weight: 500 !important;
}
html.mdx-md3 .mdui-card-primary-title {
    font-size: var(--mdui-typescale-title-large-size) !important;
    line-height: 1.35 !important;
}
html.mdx-md3 .mdui-card-primary-subtitle,
html.mdx-md3 .ct1-p,
html.mdx-md3 .mdx-postlist-simple .card-text {
    color: rgb(var(--mdui-color-on-surface-variant)) !important;
    font-size: var(--mdui-typescale-body-medium-size) !important;
    line-height: 1.65 !important;
}

/* 图片覆盖式卡片：文字叠在深色图片上，必须保持白色，不能套用 on-surface 深色 */
html.mdx-md3 .mdui-card-media-covered,
html.mdx-md3 .mdui-card-media-covered a,
html.mdx-md3 .mdui-card-media-covered .mdui-card-primary-title,
html.mdx-md3 .mdui-card-media-covered .mdui-card-primary-subtitle {
    color: #fff !important;
}
html.mdx-md3 .mdui-card-media-covered .mdui-card-primary-subtitle,
html.mdx-md3 .mdui-card-media-covered .ct1-p {
    color: rgba(255, 255, 255, 0.78) !important;
}
html.mdx-md3 .mdui-card-media-covered .mdui-card-primary-title {
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
html.mdx-md3 .coun-read {
    color: rgb(var(--mdui-color-primary)) !important;
    background: transparent !important;
}
html.mdx-md3 .mdx-all-posts h3,
html.mdx-md3 .mdx-hot-posts h3 {
    color: rgb(var(--mdui-color-on-surface)) !important;
    font-size: var(--mdui-typescale-title-medium-size) !important;
}
html.mdx-md3 main.postList,
html.mdx-md3 .mdx-all-posts {
    background: transparent !important;
}
html.mdx-md3 .mdx-card-actions,
html.mdx-md3 .mdui-card-actions {
    padding: 8px 12px !important;
}

/* ==========================================================================
 * 6. 文章页 / 页面（保留头图与填充层，只调整容器与排版）
 * ========================================================================== */
html.mdx-md3 .PostTitle h1,
html.mdx-md3 .PostTitle2 h1,
html.mdx-md3 .PostTitlePage h1 {
    font-size: clamp(30px, 4.2vw, var(--mdui-typescale-display-small-size)) !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;
    letter-spacing: -0.25px !important;
}
html.mdx-md3 .time-in-post-title,
html.mdx-md3 .timeInPost {
    font-size: var(--mdui-typescale-label-medium-size) !important;
}
html.mdx-md3 #crumbs,
html.mdx-md3 #crumbs a {
    font-size: var(--mdui-typescale-label-large-size) !important;
}

html.mdx-md3 .ArtMain0,
html.mdx-md3 .ArtMain,
html.mdx-md3 .PostMain .mdx-clean-footer,
html.mdx-md3 .PostMain2 .mdx-clean-footer {
    background-color: rgb(var(--mdui-color-surface-container-lowest)) !important;
    color: rgb(var(--mdui-color-on-surface)) !important;
    border-radius: var(--mdui-shape-corner-large) !important;
    box-shadow: var(--mdui-elevation-level1) !important;
    /* 建立 BFC，避免 article 的上下外边距与卡片合并；不使用 overflow:hidden，
       否则会把卡片左侧悬浮的分享按钮裁掉（主题里有 display:block!important，需一并覆盖） */
    display: flow-root !important;
    overflow: visible !important;
}

/* 文章特色图与卡片顶部圆角贴合 */
html.mdx-md3 .PostMainImg0 {
    border-radius: var(--mdui-shape-corner-large) var(--mdui-shape-corner-large) 0 0 !important;
}

/* 容器内边距：MD3 卡片式正文左右留白，避免文字贴边 */
html.mdx-md3 .ArtMain > article,
html.mdx-md3 .ArtMain0 > article,
html.mdx-md3 .mdx-clean-footer > article {
    margin-left: 24px !important;
    margin-right: 24px !important;
    box-sizing: border-box;
}
html.mdx-md3 .PostMain,
html.mdx-md3 .PostMain2,
html.mdx-md3 .PostMainPage,
html.mdx-md3 .main,
html.mdx-md3 .main-in-other {
    background-color: transparent !important;
}
html.mdx-md3 .mdx-say-after.mdui-card {
    background-color: rgb(var(--mdui-color-surface-container)) !important;
    border-radius: var(--mdui-shape-corner-medium) !important;
}
html.mdx-md3 .mdx-post-money {
    background-color: rgb(var(--mdui-color-surface-container-low)) !important;
    border-radius: var(--mdui-shape-corner-medium) !important;
}

/* 正文排版 */
html.mdx-md3 article.mdui-typo {
    color: rgb(var(--mdui-color-on-surface));
    font-size: var(--mdui-typescale-body-large-size) !important;
    line-height: 1.8 !important;
}
html.mdx-md3 article.mdui-typo p,
html.mdx-md3 article p {
    color: rgba(var(--mdui-color-on-surface), 0.9) !important;
    font-size: var(--mdui-typescale-body-large-size) !important;
    line-height: 1.8 !important;
}
html.mdx-md3 article.mdui-typo h1,
html.mdx-md3 article h1 {
    font-size: var(--mdui-typescale-headline-large-size) !important;
    line-height: var(--mdui-typescale-headline-large-line-height) !important;
    font-weight: 500 !important;
    color: rgb(var(--mdui-color-on-surface)) !important;
}
html.mdx-md3 article.mdui-typo h2,
html.mdx-md3 article h2 {
    font-size: var(--mdui-typescale-headline-small-size) !important;
    line-height: var(--mdui-typescale-headline-small-line-height) !important;
    font-weight: 500 !important;
    color: rgb(var(--mdui-color-on-surface)) !important;
}
html.mdx-md3 article.mdui-typo h3,
html.mdx-md3 article h3 {
    font-size: var(--mdui-typescale-title-large-size) !important;
    line-height: var(--mdui-typescale-title-large-line-height) !important;
    font-weight: 500 !important;
    color: rgb(var(--mdui-color-on-surface)) !important;
}
html.mdx-md3 article.mdui-typo h4,
html.mdx-md3 article h4 {
    font-size: var(--mdui-typescale-title-medium-size) !important;
    font-weight: 500 !important;
    color: rgb(var(--mdui-color-on-surface)) !important;
}
html.mdx-md3 article.mdui-typo a,
html.mdx-md3 article a {
    color: rgb(var(--mdui-color-primary)) !important;
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--mdui-color-primary), 0.35);
}
html.mdx-md3 article.mdui-typo blockquote,
html.mdx-md3 article blockquote {
    background-color: rgb(var(--mdui-color-surface-container)) !important;
    border-left: 4px solid rgb(var(--mdui-color-primary)) !important;
    border-radius: 0 var(--mdui-shape-corner-medium) var(--mdui-shape-corner-medium) 0 !important;
    color: rgb(var(--mdui-color-on-surface-variant)) !important;
    padding: 14px 20px !important;
}
html.mdx-md3 article.mdui-typo blockquote p {
    color: inherit !important;
}
html.mdx-md3 article.mdui-typo pre {
    background-color: rgb(var(--mdui-color-surface-container-highest)) !important;
    border-radius: var(--mdui-shape-corner-medium) !important;
    border: 1px solid rgba(var(--mdui-color-outline-variant), 0.6);
}
html.mdx-md3 article.mdui-typo code {
    background-color: rgba(var(--mdui-color-on-surface), 0.06);
    border-radius: var(--mdui-shape-corner-extra-small);
}
html.mdx-md3 article.mdui-typo pre code {
    background: none;
}
html.mdx-md3 article.mdui-typo table {
    border-radius: var(--mdui-shape-corner-small);
    overflow: hidden;
    border: 1px solid rgb(var(--mdui-color-outline-variant));
}
html.mdx-md3 article.mdui-typo th {
    background-color: rgb(var(--mdui-color-surface-container-high)) !important;
    color: rgb(var(--mdui-color-on-surface)) !important;
}
html.mdx-md3 article figcaption {
    color: rgb(var(--mdui-color-on-surface-variant)) !important;
    font-size: var(--mdui-typescale-label-medium-size) !important;
}

/* 阅读信息 / 版权 */
html.mdx-md3 .mdx-reading-meta {
    color: rgba(var(--mdui-color-on-surface), 0.6) !important;
}
html.mdx-md3 .mdx-license {
    background-color: rgb(var(--mdui-color-surface-container)) !important;
    color: rgba(var(--mdui-color-on-surface), 0.72) !important;
    border-radius: var(--mdui-shape-corner-medium) !important;
}

/* ==========================================================================
 * 7. 表单 / 评论
 * ========================================================================== */
html.mdx-md3 .mdui-textfield-input,
html.mdx-md3 input[type="text"],
html.mdx-md3 input[type="email"],
html.mdx-md3 input[type="url"],
html.mdx-md3 input[type="password"],
html.mdx-md3 input[type="search"],
html.mdx-md3 textarea {
    font-family: var(--mdui-font-family) !important;
    color: rgb(var(--mdui-color-on-surface)) !important;
    background-color: transparent !important;
    border: 1px solid rgb(var(--mdui-color-outline)) !important;
    border-radius: var(--mdui-shape-corner-extra-small) !important;
    box-shadow: none !important;
    transition: border-color var(--mdui-motion-duration-short3) var(--mdui-motion-easing-standard),
        box-shadow var(--mdui-motion-duration-short3) var(--mdui-motion-easing-standard);
}
html.mdx-md3 .mdui-textfield-input:focus,
html.mdx-md3 input:focus,
html.mdx-md3 textarea:focus {
    border-color: rgb(var(--mdui-color-primary)) !important;
    box-shadow: inset 0 0 0 1px rgb(var(--mdui-color-primary)) !important;
    outline: none !important;
}
html.mdx-md3 .mdui-textfield-label {
    color: rgb(var(--mdui-color-on-surface-variant)) !important;
}
html.mdx-md3 .mdui-textfield-focus .mdui-textfield-label,
html.mdx-md3 .mdui-textfield-not-empty .mdui-textfield-label {
    color: rgb(var(--mdui-color-primary)) !important;
}
html.mdx-md3 .mdui-textfield-error {
    color: rgb(var(--mdui-color-error)) !important;
}
html.mdx-md3 .mdui-select {
    background-color: transparent !important;
    border: 1px solid rgb(var(--mdui-color-outline)) !important;
    border-radius: var(--mdui-shape-corner-extra-small) !important;
    color: rgb(var(--mdui-color-on-surface)) !important;
}
html.mdx-md3 #respond,
html.mdx-md3 .mdx-comment-login-needed {
    background-color: rgb(var(--mdui-color-surface-container-lowest)) !important;
    color: rgb(var(--mdui-color-on-surface)) !important;
    border-radius: var(--mdui-shape-corner-large) !important;
    box-shadow: var(--mdui-elevation-level1) !important;
}
html.mdx-md3 #respond .mdui-btn.mdui-color-theme {
    background-color: rgb(var(--mdui-color-primary)) !important;
    color: rgb(var(--mdui-color-on-primary)) !important;
}
html.mdx-md3 .mdx-admin {
    background-color: rgb(var(--mdui-color-primary-container)) !important;
    color: rgb(var(--mdui-color-on-primary-container)) !important;
}

/* ==========================================================================
 * 8. 对话框 / Snackbar / 通知 / Cookie
 * ========================================================================== */
html.mdx-md3 .mdui-dialog {
    background-color: rgb(var(--mdui-color-surface-container-high)) !important;
    color: rgb(var(--mdui-color-on-surface)) !important;
    border-radius: var(--mdui-shape-corner-extra-large) !important;
    box-shadow: var(--mdui-elevation-level3) !important;
}
html.mdx-md3 .mdui-dialog-title {
    color: rgb(var(--mdui-color-on-surface)) !important;
    font-size: var(--mdui-typescale-headline-small-size) !important;
    font-weight: 400 !important;
}
html.mdx-md3 .mdui-dialog-content {
    color: rgb(var(--mdui-color-on-surface-variant)) !important;
}
html.mdx-md3 .mdui-dialog-actions .mdui-btn {
    color: rgb(var(--mdui-color-primary)) !important;
    background: transparent !important;
}
html.mdx-md3 .mdui-overlay {
    background-color: rgba(var(--mdui-color-scrim), 0.5) !important;
}
html.mdx-md3 .mdui-snackbar {
    background-color: rgb(var(--mdui-color-inverse-surface)) !important;
    color: rgb(var(--mdui-color-inverse-on-surface)) !important;
    border-radius: var(--mdui-shape-corner-extra-small) !important;
    box-shadow: var(--mdui-elevation-level3) !important;
}
html.mdx-md3 .mdui-snackbar .mdui-snackbar-action {
    color: rgb(var(--mdui-color-inverse-primary)) !important;
}
html.mdx-md3 .mdxNotice {
    background-color: rgb(var(--mdui-color-primary-container)) !important;
    color: rgb(var(--mdui-color-on-primary-container)) !important;
    border-radius: var(--mdui-shape-corner-large) !important;
    box-shadow: var(--mdui-elevation-level1) !important;
}
html.mdx-md3 .mdxNotice i {
    color: inherit !important;
}
html.mdx-md3 #mdx-cookie-notice {
    background-color: rgb(var(--mdui-color-surface-container-high)) !important;
    color: rgb(var(--mdui-color-on-surface)) !important;
    border-radius: var(--mdui-shape-corner-large) !important;
    box-shadow: var(--mdui-elevation-level3) !important;
}
html.mdx-md3 #mdx-cookie-notice p {
    color: rgb(var(--mdui-color-on-surface-variant)) !important;
}
html.mdx-md3 #mdx-cookie-notice .mdui-btn {
    background-color: rgb(var(--mdui-color-primary)) !important;
    color: rgb(var(--mdui-color-on-primary)) !important;
}

/* ==========================================================================
 * 9. 页脚 / 翻页 / 进度
 * ========================================================================== */
html.mdx-md3 footer.foot {
    background-color: rgb(var(--mdui-color-surface-container-low)) !important;
    color: rgb(var(--mdui-color-on-surface-variant)) !important;
    border-top: 1px solid rgba(var(--mdui-color-outline-variant), 0.6);
}
html.mdx-md3 footer.foot a,
html.mdx-md3 .foot .click {
    color: rgb(var(--mdui-color-primary)) !important;
}
html.mdx-md3 .page-footer-nav.mdui-color-theme,
html.mdx-md3 .page-footer-nav.mdui-color-theme * {
    background-color: rgb(var(--mdui-color-surface-container)) !important;
    color: rgb(var(--mdui-color-on-surface)) !important;
}
html.mdx-md3 .page-footer-nav a {
    color: rgb(var(--mdui-color-primary)) !important;
}
html.mdx-md3 .mdui-progress {
    background-color: rgb(var(--mdui-color-surface-container-highest)) !important;
}
html.mdx-md3 .mdui-progress-indeterminate,
html.mdx-md3 .mdui-progress-determinate {
    background-color: rgb(var(--mdui-color-primary)) !important;
}
html.mdx-md3 .mdui-spinner {
    color: rgb(var(--mdui-color-primary));
}
html.mdx-md3 .mdui-shadow-0 {
    box-shadow: none !important;
}
html.mdx-md3 .mdui-shadow-2 {
    box-shadow: var(--mdui-elevation-level2) !important;
}

/* ==========================================================================
 * 10. 标签 / TOC / 短代码
 * ========================================================================== */
html.mdx-md3 .mdx-toc-item,
html.mdx-md3 .mdx-toc-preview-item {
    border-radius: var(--mdui-shape-corner-full) !important;
    transition: background-color var(--mdui-motion-duration-short3) var(--mdui-motion-easing-standard);
}
html.mdx-md3 .mdx-toc-item:hover,
html.mdx-md3 .mdx-toc-preview-item:hover {
    background-color: rgba(var(--mdui-color-on-surface), var(--mdui-state-layer-hover)) !important;
}
html.mdx-md3 .mdui-panel-item {
    background-color: rgb(var(--mdui-color-surface-container-low)) !important;
    border-radius: var(--mdui-shape-corner-medium) !important;
    border: 1px solid rgba(var(--mdui-color-outline-variant), 0.6) !important;
}
html.mdx-md3 .mdui-panel-item-header {
    color: rgb(var(--mdui-color-on-surface)) !important;
}
html.mdx-md3 .mdui-panel-item-body {
    color: rgb(var(--mdui-color-on-surface-variant)) !important;
}
html.mdx-md3 .mdx-warning {
    background-color: rgb(var(--mdui-color-error-container)) !important;
    color: rgb(var(--mdui-color-on-error-container)) !important;
    border-left-color: rgb(var(--mdui-color-error)) !important;
    border-radius: 0 var(--mdui-shape-corner-medium) var(--mdui-shape-corner-medium) 0 !important;
}
html.mdx-md3 .mdx-say-after,
html.mdx-md3 .mdx-github-cot,
html.mdx-md3 .mdx-post-cot,
html.mdx-md3 .mdx-sc-list {
    background-color: rgb(var(--mdui-color-surface-container-low)) !important;
    border-radius: var(--mdui-shape-corner-medium) !important;
}

/* ==========================================================================
 * 11. 深色模式细节
 * ========================================================================== */
html.mdx-md3 body.mdui-theme-layout-dark .ArtMain0,
html.mdx-md3 body.mdui-theme-layout-dark .ArtMain,
html.mdx-md3 body.mdui-theme-layout-dark .mdx-clean-footer {
    background-color: rgb(var(--mdui-color-surface-container-low)) !important;
}
html.mdx-md3 body.mdui-theme-layout-dark .mdui-drawer,
html.mdx-md3 body.mdui-theme-layout-dark #left-drawer,
html.mdx-md3 body.mdui-theme-layout-dark #mdx-right-drawer {
    background-color: rgb(var(--mdui-color-surface-container-low)) !important;
}
html.mdx-md3 body.mdui-theme-layout-dark .mdui-card,
html.mdx-md3 body.mdui-theme-layout-dark .post-item,
html.mdx-md3 body.mdui-theme-layout-dark .indexgaid,
html.mdx-md3 body.mdui-theme-layout-dark .staDivgaid,
html.mdx-md3 body.mdui-theme-layout-dark .mdx-hot-posts,
html.mdx-md3 body.mdui-theme-layout-dark .searchCard {
    background-color: rgb(var(--mdui-color-surface-container-low)) !important;
}
html.mdx-md3 body.mdui-theme-layout-dark footer.foot {
    background-color: rgb(var(--mdui-color-surface-container-low)) !important;
}
html.mdx-md3 body.mdui-theme-layout-dark #respond {
    background-color: rgb(var(--mdui-color-surface-container-lowest)) !important;
}

/* ==========================================================================
 * 11.5 MD3 线性阅读进度（替代环形进度，显示在页面顶部）
 * ========================================================================== */
html.mdx-md3 #indic {
    position: fixed !important;
    /* 紧贴顶部应用栏下沿，避免与主题色应用栏同色而看不见 */
    top: 64px !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 4px !important;
    opacity: 0;
    background-color: rgb(var(--mdui-color-surface-container-highest)) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    pointer-events: none;
    z-index: 3000 !important;
    transform: none !important;
    transition: opacity var(--mdui-motion-duration-short3) var(--mdui-motion-easing-standard) !important;
}
html.mdx-md3 #indic .mdx-md3-linear-progress-indicator {
    display: block;
    width: 0;
    height: 100%;
    background-color: rgb(var(--mdui-color-primary)) !important;
    border-radius: inherit;
    transition: width var(--mdui-motion-duration-short2, 100ms) linear;
}
/* 登录状态下 WordPress 管理工具栏会下移 32px */
html.mdx-md3 body.has-admin-bar #indic {
    top: 96px !important;
}
html.mdx-md3 body.has-admin-bar #indic .mdx-md3-linear-progress-indicator {
    background-color: rgb(var(--mdui-color-primary)) !important;
}

/* ==========================================================================
 * 11.6 深色模式：关闭主题对标题 / 控件的 invert 滤镜
 *      （MD3 已经给出浅色语义色，再叠加 invert 会让文字重新变暗）
 * ========================================================================== */
html.mdx-md3 body.mdui-theme-layout-dark article > h1,
html.mdx-md3 body.mdui-theme-layout-dark article > h2,
html.mdx-md3 body.mdui-theme-layout-dark article > h3,
html.mdx-md3 body.mdui-theme-layout-dark article > h4,
html.mdx-md3 body.mdui-theme-layout-dark article > h5,
html.mdx-md3 body.mdui-theme-layout-dark article > h6,
html.mdx-md3 body.mdui-theme-layout-dark article.searchCard h1,
html.mdx-md3 body.mdui-theme-layout-dark #postlist h1,
html.mdx-md3 body.mdui-theme-layout-dark #postlist h2,
html.mdx-md3 body.mdui-theme-layout-dark .mdui-progress,
html.mdx-md3 body.mdui-theme-layout-dark .mdui-spinner,
html.mdx-md3 body.mdui-theme-layout-dark .mdui-tab-indicator,
html.mdx-md3 body.mdui-theme-layout-dark #mdx_menu .current-menu-item,
html.mdx-md3 body.mdui-theme-layout-dark #mdx_menu .current-menu-item > ul,
html.mdx-md3 body.mdui-theme-layout-dark .mdx-side-title a,
html.mdx-md3 body.mdui-theme-layout-dark .mdx-toc-item.mdui-list-item-active,
html.mdx-md3 body.mdui-theme-layout-dark .mdx-toc-item.mdui-list-item-active > span,
html.mdx-md3 body.mdui-theme-layout-dark #mdx-cookie-notice i.mdui-icon {
    filter: none !important;
}

/* ==========================================================================
 * 12. 响应式
 * ========================================================================== */
@media (max-width: 840px) {
    html.mdx-md3 #indic {
        top: 56px !important;
    }
    html.mdx-md3 body.has-admin-bar #indic {
        top: 102px !important;
    }
    html.mdx-md3 .mdui-btn {
        height: 38px;
        padding: 0 20px !important;
    }
    html.mdx-md3 .PostTitle h1,
    html.mdx-md3 .PostTitle2 h1,
    html.mdx-md3 .PostTitlePage h1 {
        font-size: 28px !important;
    }
    html.mdx-md3 .ArtMain0,
    html.mdx-md3 .PostMain .mdx-clean-footer {
        border-radius: var(--mdui-shape-corner-medium) !important;
    }
    html.mdx-md3 .ArtMain > article,
    html.mdx-md3 .ArtMain0 > article {
        margin-left: 16px !important;
        margin-right: 16px !important;
    }
}

@media print {
    html.mdx-md3 body {
        background: #fff !important;
    }
    html.mdx-md3 .mdui-btn,
    html.mdx-md3 .mdui-fab {
        box-shadow: none !important;
    }
}