@charset "UTF-8";

/*
** ========================================================
** 👑 终极融合版：大厂级暗黑美学色卡库 (CSS Variables)
** 架构：原版骨架(防错位) + 底部强行覆盖(换肤) + 毛玻璃特效
** ========================================================
*/
:root, [data-bs-theme=dark], [data-bs-theme=light] {
    /* 【主题切换开关】
      极客蓝 (Apple风): #0A84FF / 悬停: #0062cc
      猩红 (Netflix风): #E50914 / 悬停: #b80710
      青绿 (Spotify风): #1ED760 / 悬停: #16b84e
      鎏金 (小爪原风): #facc15 / 悬停: #eab308
    */
    --xzm-accent: #0A84FF;       /* 全局主点缀色 (默认：极客蓝) */
    --xzm-accent-hover: #0062cc; /* 全局点缀色(悬停深色) */
    
    /* 背景分层 (Vercel True Black 极简风格) */
    --xzm-bg-deep: #000000;      /* 最底层深渊黑 */
    --xzm-bg-card: #111111;      /* 悬浮卡片色 */
    --xzm-bg-hover: #1a1a1a;     /* 卡片悬停色 */
    --xzm-border: rgba(255,255,255,0.08); /* 极细磨砂边框 */
    
    /* 文本层级 */
    --xzm-text-main: #f5f5f7;    /* 主标题/正文 (非纯白，不刺眼) */
    --xzm-text-muted: #86868b;   /* 次要信息/描述 */

    /* 兼容原主题底层变量，强制挂载新色彩 */
    --bs-blue: var(--xzm-accent);
    --bs-blue-rgb: 10, 132, 255;
    --bs-primary: var(--xzm-accent);
    --bs-link-color: var(--xzm-text-main);
    --bs-link-hover-color: var(--xzm-accent);
    
    color-scheme: dark;
}

/* 👑 终极防溢出结界：彻底消灭手机端向右滑动的多余空白 */
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden !important; 
}

.btn {
    --bs-btn-font-size: 0.875rem;
    --bs-btn-padding-x: 0.625rem;
    --bs-btn-padding-y: 0.3125rem;
}

.btn-lg,
.btn-group-lg > .btn {
    --bs-btn-font-size: 1rem;
}

.btn-sm, .btn-group-sm > .btn {
    --bs-btn-font-size: 0.75rem;
}

.breadcrumb {
    --bs-breadcrumb-margin-bottom: 0;
}

.dropdown-menu {
    --bs-dropdown-font-size: 0.875rem;
}

.form-select {
    font-size: 0.875rem;
}

.offcanvas-lg {
    --bs-offcanvas-width: max(260px, min(75%, 360px));
}

@media (max-width: 992px) {
    .offcanvas-lg {
        opacity: 0 !important;
    }
}

.offcanvas-lg.showing,
.offcanvas-lg.show {
    opacity: 1 !important;
}

.offcanvas-backdrop {
    opacity: unset !important;
    background-color: unset !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* 添加文章内容的基础样式 */
.article-content {
    max-width: 790px;
    word-wrap: break-word;
    word-break: break-all;
    overflow-wrap: break-word;
}

/*
** bootstrap
*/
@media (min-width: 1400px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1200px;
    }
}

svg.bi {
    width: 1em;
    min-width: 1em;
    height: 1em;
    min-height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    fill: currentcolor;
}

/*
** plyr
*/
.plyr {
    --plyr-color-main: rgba(var(--bs-blue-rgb), 1);
    --plyr-audio-controls-background: rgba(var(--bs-blue-rgb), 0.05);
}

@media (max-width: 768px) {
    [data-plyr="fullscreen"] {
        display: none !important;
    }
}

/*
** 滚动条
*/
::-webkit-scrollbar-corner {
    background-color: inherit !important;
}

::-webkit-scrollbar-track {
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: var(--gray-200);
    border-radius: 0;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--gray-600);
    border-radius: 10px;
}

/*
** 公共
*/
blockquote, pre, hr, caption, form, fieldset, legend, input, button, textarea, h1, h2, h3, h4, h5, h6, ul, ol, dl, dt, dd, p {
    margin: 0;
    padding: 0;
}

input,
select,
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

ul,
ol {
    list-style: none;
}

a {
    text-decoration: var(--bs-link-decoration);
}

hr {
    opacity: 0.125;
}

.reset-input,
.reset-button {
    outline: 0;
    border: 0;
    background: transparent;
}

.flex-center,
.flex-h-center,
.flex-v-center,
.flex-v-between,
.flex-start-center,
.flex-end-center,
.text-v-center {
    display: flex;
}

.flex-center,
.flex-start-center,
.flex-end-center,
.flex-v-center,
.flex-v-between {
    align-items: center;
}

.flex-v-between {
    justify-content: space-between;
}

.flex-center,
.flex-h-center {
    justify-content: center;
}

.flex-start-center {
    justify-content: flex-start;
}

.flex-end-center {
    justify-content: flex-end;
}

.text-v-center {
    align-content: center;
}

img {
    max-width: 100%;
}

.text-truncate.field-sort {
    max-width: 8em;
}


.aio-h1 { font-size: 1.375rem; }
.aio-h2 { font-size: 1.25rem; }
.aio-h3 { font-size: 1.125rem; }
.aio-h4 { font-size: 1rem; }
.aio-h5 { font-size: 0.875rem; }
.aio-h6 { font-size: 0.75rem; }

@media (max-width: 768px) {
    .aio-h1, .aio-h2 { font-size: 1rem; }
    .aio-h3, .aio-h4 { font-size: 0.875rem; }
    .aio-h5, .aio-h6 { font-size: 0.75rem; }
}

.iconfont {
    font-size: 1em;
}

.logo-fill {
    --alipay: #1976FF;
    --amazon: #ED9F41;
    --android: #98BF24;
    --angularjs: #C50030;
    --app-store: #1594F1;
    --apple: #000000;
    --baidu: #2932E1;
    --bard: #050402;
    --behance: #0056FF;
    --bilibili: #FB7299;
    --blender: #275787;
    --blogger: #FF6501;
    --bluesky: #12A4C8;
    --bootstrap: #7345AB;
    --centos: #9B1E7F;
    --chrome: #349834;
    --codepen: #232323;
    --copilot: #0B55C2;
    --coreos: #53A3DA;
    --dingding: #3296FA;
    --discord: #5865F2;
    --disqus: #3EA0ED;
    --douban: #06BC12;
    --dribbble: #EB5793;
    --drive: #000000;
    --dropbox: #007CE4;
    --edge: #3277BB;
    --evernote: #00A82D;
    --facebook: #3C56A1;
    --finder: #3075B4;
    --firefox: #D9550B;
    --flickr: #0161DA;
    --flutter: #1D4D7D;
    --friendica: #FEBF19;
    --gatsby: #66339A;
    --github: #1F2328;
    --gitlab: #E24329;
    --google: #4285F4;
    --honor: #000000;
    --ie: #1295C1;
    --instagram: #5957C7;
    --invision: #FD2D66;
    --kakao: #C9BC17;
    --linkedin: #015989;
    --kick: #24272C;
    --microsoft: #003D93;
    --mastercard: #CC0001;
    --mastodon: #3189D4;
    --medium: #01AB6D;
    --messenger: #11100E;
    --meta: #0264E2;
    --mini-program: #2BA440;
    --netease: #E10000;
    --netflix: #B9090B;
    --notion: #000000;
    --npmjs: #231F20;
    --openai: #402894;
    --openbase: #020202;
    --open-source: #3EA63A;
    --opera: #CF2126;
    --patreon: #000000;
    --paypal: #003088;
    --pinterest: #FF9800;
    --pixelfed: #081132;
    --playstation: #0750A0;
    --product-hunt: #D5502A;
    --qq: #0175AD;
    --reactjs: #292C2D;
    --reddit: #F14923;
    --remixicon: #006BFF;
    --remix-run: #121212;
    --safari: #1879FE;
    --skype: #00AFF0;
    --slack: #4B144B;
    --snapchat: #D3CE05;
    --soundcloud: #EE4037;
    --spectrum: #1A1A1A;
    --spotify: #1ED55F;
    --stack-overflow: #F2740D;
    --stackshare: #068DFE;
    --steam: #161A23;
    --supabase: #37996B;
    --svelte: #FF3E00;
    --switch: #FF0103;
    --taobao: #FF4B02;
    --telegram: #229ED9;
    --threads: #020202;
    --tiktok: #010101;
    --trello: #0177BE;
    --tumblr: #2C435E;
    --twitch: #9246FF;
    --twitter: #55ACEF;
    --ubuntu: #DE4815;
    --unsplash: #000000;
    --vimeo: #00ADEF;
    --vk: #000000;
    --visa: #232964;
    --vuejs: #46B584;
    --wechat: #23AE00;
    --weibo: #D1132C;
    --whatsapp: #24A913;
    --windows: #00ADEF;
    --wordpress: #0071E1;
    --xbox: #0F7C0F;
    --xing: #xing;
    --youtube: #F40002;
    --yuque: #46CE7C;
    --zcool: #F4C921;
    --zhihu: #0165FF;
}

.logo-fill-row,
.logo-fill-column {
    display: flex;
    flex-wrap: wrap;
}

.logo-fill > .logo-item {
    margin: 5px;
}

.logo-fill-row { flex-direction: row; }
.logo-fill-column { flex-direction: column; }

.logo-fill [class^="bi-"],
.logo-fill [class^="ri-"],
.logo-fill [class^="iconfont-"] {
    border-radius: var(--bs-border-radius);
    background-color: #222222;
    color: #ffffff;
    line-height: 1;
    display: inline-block;
    font-size: 1.25rem;
    padding: 0.5rem;
    box-shadow: 0 0 0.125rem rgba(255, 255, 255, 0.5);
}

.logo-fill [class*="alipay"] { background-color: var(--alipay); }
.logo-fill [class*="amazon"] { background-color: var(--amazon); }
.logo-fill [class*="android"] { background-color: var(--android); }
.logo-fill [class*="angularjs"] { background-color: var(--angularjs); }
.logo-fill [class*="app-store"] { background-color: var(--app-store); }
.logo-fill [class*="apple"] { background-color: var(--apple); }
.logo-fill [class*="baidu"] { background-color: var(--baidu); }
.logo-fill [class*="bard"] { background-color: var(--bard); }
.logo-fill [class*="behance"] { background-color: var(--behance); }
.logo-fill [class*="bilibili"] { background-color: var(--bilibili); }
.logo-fill [class*="blender"] { background-color: var(--blender); }
.logo-fill [class*="blogger"] { background-color: var(--blogger); }
.logo-fill [class*="bluesky"] { background-color: var(--bluesky); }
.logo-fill [class*="bootstrap"] { background-color: var(--bootstrap); }
.logo-fill [class*="centos"] { background-color: var(--centos); }
.logo-fill [class*="chrome"] { background-color: var(--chrome); }
.logo-fill [class*="codepen"] { background-color: var(--codepen); }
.logo-fill [class*="copilot"] { background-color: var(--copilot); }
.logo-fill [class*="coreos"] { background-color: var(--coreos); }
.logo-fill [class*="dingding"] { background-color: var(--dingding); }
.logo-fill [class*="discord"] { background-color: var(--discord); }
.logo-fill [class*="disqus"] { background-color: var(--disqus); }
.logo-fill [class*="douban"] { background-color: var(--douban); }
.logo-fill [class*="dribbble"] { background-color: var(--dribbble); }
.logo-fill [class*="drive"] { background-color: var(--drive); }
.logo-fill [class*="dropbox"] { background-color: var(--dropbox); }
.logo-fill [class*="edge"] { background-color: var(--edge); }
.logo-fill [class*="evernote"] { background-color: var(--evernote); }
.logo-fill [class*="facebook"] { background-color: var(--facebook); }
.logo-fill [class*="finder"] { background-color: var(--finder); }
.logo-fill [class*="firefox"] { background-color: var(--firefox); }
.logo-fill [class*="flutter"] { background-color: var(--flutter); }
.logo-fill [class*="friendica"] { background-color: var(--friendica); }
.logo-fill [class*="gatsby"] { background-color: var(--gatsby); }
.logo-fill [class*="github"] { background-color: var(--github); }
.logo-fill [class*="gitlab"] { background-color: var(--gitlab); }
.logo-fill [class*="google"] { background-color: var(--google); }
.logo-fill [class*="honor"] { background-color: var(--honor); }
.logo-fill [class*="ie"] { background-color: var(--ie); }
.logo-fill [class*="instagram"] { background-color: var(--instagram); }
.logo-fill [class*="invision"] { background-color: var(--invision); }
.logo-fill [class*="kakao"] { background-color: var(--kakao); }
.logo-fill [class*="linkedin"] { background-color: var(--linkedin); }
.logo-fill [class*="kick"] { background-color: var(--kick); }
.logo-fill [class*="microsoft"] { background-color: var(--microsoft); }
.logo-fill [class*="mastercard"] { background-color: var(--mastercard); }
.logo-fill [class*="mastodon"] { background-color: var(--mastodon); }
.logo-fill [class*="medium"] { background-color: var(--medium); }
.logo-fill [class*="messenger"] { background-color: var(--messenger); }
.logo-fill [class*="meta"] { background-color: var(--meta); }
.logo-fill [class*="mini-program"] { background-color: var(--mini-program); }
.logo-fill [class*="netease"] { background-color: var(--netease); }
.logo-fill [class*="netflix"] { background-color: var(--netflix); }
.logo-fill [class*="notion"] { background-color: var(--notion); }
.logo-fill [class*="npmjs"] { background-color: var(--npmjs); }
.logo-fill [class*="openai"] { background-color: var(--openai); }
.logo-fill [class*="openbase"] { background-color: var(--openbase); }
.logo-fill [class*="open-source"] { background-color: var(--open-source); }
.logo-fill [class*="opera"] { background-color: var(--opera); }
.logo-fill [class*="patreon"] { background-color: var(--patreon); }
.logo-fill [class*="paypal"] { background-color: var(--paypal); }
.logo-fill [class*="pinterest"] { background-color: var(--pinterest); }
.logo-fill [class*="pixelfed"] { background-color: var(--pixelfed); }
.logo-fill [class*="playstation"] { background-color: var(--playstation); }
.logo-fill [class*="product-hunt"] { background-color: var(--product-hunt); }
.logo-fill [class*="qq"] { background-color: var(--qq); }
.logo-fill [class*="reactjs"] { background-color: var(--reactjs); }
.logo-fill [class*="reddit"] { background-color: var(--reddit); }
.logo-fill [class*="remixicon"] { background-color: var(--remixicon); }
.logo-fill [class*="remix-run"] { background-color: var(--remix-run); }
.logo-fill [class*="safari"] { background-color: var(--safari); }
.logo-fill [class*="skype"] { background-color: var(--skype); }
.logo-fill [class*="slack"] { background-color: var(--slack); }
.logo-fill [class*="snapchat"] { background-color: var(--snapchat); }
.logo-fill [class*="soundcloud"] { background-color: var(--soundcloud); }
.logo-fill [class*="spectrum"] { background-color: var(--spectrum); }
.logo-fill [class*="spotify"] { background-color: var(--spotify); }
.logo-fill [class*="stack-overflow"] { background-color: var(--stack-overflow); }
.logo-fill [class*="stackshare"] { background-color: var(--stackshare); }
.logo-fill [class*="steam"] { background-color: var(--steam); }
.logo-fill [class*="supabase"] { background-color: var(--supabase); }
.logo-fill [class*="svelte"] { background-color: var(--svelte); }
.logo-fill [class*="switch"] { background-color: var(--switch); }
.logo-fill [class*="taobao"] { background-color: var(--taobao); }
.logo-fill [class*="telegram"] { background-color: var(--telegram); }
.logo-fill [class*="threads"] { background-color: var(--threads); }
.logo-fill [class*="tiktok"] { background-color: var(--tiktok); }
.logo-fill [class*="trello"] { background-color: var(--trello); }
.logo-fill [class*="tumblr"] { background-color: var(--tumblr); }
.logo-fill [class*="twitch"] { background-color: var(--twitch); }
.logo-fill [class*="twitter"] { background-color: var(--twitter); }
.logo-fill [class*="ubuntu"] { background-color: var(--ubuntu); }
.logo-fill [class*="unsplash"] { background-color: var(--unsplash); }
.logo-fill [class*="vimeo"] { background-color: var(--vimeo); }
.logo-fill [class*="vk"] { background-color: var(--vk); }
.logo-fill [class*="visa"] { background-color: var(--visa); }
.logo-fill [class*="vuejs"] { background-color: var(--vuejs); }
.logo-fill [class*="wechat"] { background-color: var(--wechat); }
.logo-fill [class*="weibo"] { background-color: var(--weibo); }
.logo-fill [class*="whatsapp"] { background-color: var(--whatsapp); }
.logo-fill [class*="windows"] { background-color: var(--windows); }
.logo-fill [class*="wordpress"] { background-color: var(--wordpress); }
.logo-fill [class*="xbox"] { background-color: var(--xbox); }
.logo-fill [class*="xing"] { background-color: var(--xing); }
.logo-fill [class*="youtube"] { background-color: var(--youtube); }
.logo-fill [class*="yuque"] { background-color: var(--yuque); }
.logo-fill [class*="zcool"] { background-color: var(--zcool); }
.logo-fill [class*="zhihu"] { background-color: var(--zhihu); }

.aio-curated,
.aio-breadcrumb {
    background-color: rgba(var(--bs-blue-rgb), 0.05);
    padding-top: var(--aio-spacing);
    padding-bottom: var(--aio-spacing);
    box-shadow: inset 0 -0.125rem 0.25rem 0px rgba(0, 0, 0, 0.05);
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-default {
    cursor: default;
}

.image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar {
    display: inline-block;
    overflow: hidden;
    width: 2.5rem;
    min-width: 2.5rem;
    height: 2.5rem;
    border-radius: 100%;
    border: 2px solid rgba(var(--bs-blue-rgb), 0.1);
}

.avatar > img {
    display: inline-block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aio-list-split-dot li:not(:first-child)::before {
    content: "•";
    color: inherit;
    padding-left: 0.5em;
    padding-right: 0.5em;
    opacity: 0.8;
}

.aio-list-additional + .aio-list-box {
    margin-top: var(--aio-spacing);
}

.aio-list > .item:not(:first-child) {
    margin-top: var(--aio-spacing);
}

/* 👑 核心修复1：电脑端列表海报宽度收缩 & 强制竖版比例 */
.aio-list > .item .thumbnail {
    width: 9em; /* 进一步缩小海报尺寸，让右侧文字更饱满 */
    min-width: 9em;
}

/* 强制海报比例 */
.aio-list > .item .thumbnail .percent-image .figure {
    padding-bottom: 140% !important; /* 约 1:1.4 竖版比例 */
}

.aio-list > .item:hover {
    border-color: var(--gray-500) !important;
}

@media (max-width: 1200px) {
    /* 👑 核心修复2：平板端宽度收缩 */
    .aio-list > .item .thumbnail {
        width: 8em;
        min-width: 8em;
    }

    .aio-list > .item .information .box-description {
        -webkit-line-clamp: 2;
    }
}

/* 👑 大厂移动端列表强化修复 (强制左图右文，消除棒棒糖) */
@media (max-width: 768px) {
    .aio-list > .item {
        padding: 12px !important;
        display: flex !important;
        flex-direction: row !important; /* 强制水平排版 */
        align-items: flex-start !important;
    }

    /* 👑 核心修复3：手机端竖版海报变窄，整体更小巧，给右侧文字留出充裕空间 */
    .aio-list > .item .thumbnail {
        width: 25% !important; /* 宽度缩减到 25% */
        min-width: 80px !important;
        margin-right: 12px !important;
        margin-bottom: 0 !important; /* 消除底部多余留白 */
    }

    .aio-list > .item .thumbnail .percent-image .figure {
        padding-bottom: 140% !important; /* 手机端也强制竖版 */
    }

    .aio-list > .item .information {
        flex: 1 !important;
        width: 75% !important;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .aio-list > .item .information .box-title {
        font-size: 1rem !important;
        line-height: 1.4 !important;
        margin-top: 0 !important;
        margin-bottom: 6px !important;
        -webkit-line-clamp: 2 !important; /* 最多两行 */
    }

    .aio-list > .item .information .box-description {
        display: none !important; /* 隐藏多余摘要 */
    }
    
    .aio-list > .item .information .aio-list-split-dot {
        font-size: 0.8rem !important;
        opacity: 0.6;
    }

    .aio-list > .item .information .box-thumb {
        margin-top: auto !important; /* 把操作区推到底部 */
    }
}

@media (max-width: 576px) {
    /* 👑 核心修复4：极小屏幕宽度再微调 */
    .aio-list > .item .thumbnail {
        width: 24% !important;
        min-width: 75px !important;
    }
}

.aio-list > .item .information {
    flex: 1;
}

.aio-list > .item ul > li:not(:first-child) {
    margin-left: 1em;
}

.aio-list > .item ul > li:nth-child(2) {
    margin-left: auto;
}

.aio-list > .item .box-media > * {
    width: 100%;
}

.aio-list > .item .box-media > .plyr + .plyr,
.aio-list > .item .box-media > video + video,
.aio-list > .item .box-media > audio + audio,
.aio-list > .item .box-media .percent-image + .percent-image {
    margin-left: 2px;
}

.aio-list > .item .box-media > .plyr:first-child,
.aio-list > .item .box-media > video:first-child,
.aio-list > .item .box-media > audio:first-child,
.aio-list > .item .box-media .percent-image:first-child {
    border-top-left-radius: var(--bs-border-radius);
    border-bottom-left-radius: var(--bs-border-radius);
}

.aio-list > .item .box-media > .plyr:last-child,
.aio-list > .item .box-media > video:last-child,
.aio-list > .item .box-media > audio:last-child,
.aio-list > .item .box-media .percent-image:last-child {
    border-top-right-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
}

.aio-list > .item .box-media .percent-image .figure {
    padding-bottom: min(70%, 280px);
}

@media (max-width: 768px) {
    .aio-list > .item .box-media .percent-image .figure {
        padding-bottom: min(70%, 200px);
    }
}

@media (max-width: 576px) {
    .aio-list > .item .box-media .percent-image .figure {
        padding-bottom: min(70%, 150px);
    }
}

.aside-list-tag {
    margin-bottom: -0.5rem;
}

.aside-list-tag > li:first-child {
    margin-top: 0 !important;
}

.aside-list-tag > li {
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.aside-list-tag > li > a {
    display: block;
    padding: 0.35em 0.65em;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.aside-list-tag > li > a:hover,
.aside-list-tag > li > a:hover span {
    border-color: var(--bs-blue) !important;
}

.aside-list-hot > li:first-child {
    margin-top: 0 !important;
}

.aside-list-hot > li .percent-image .figure > .figcaption {
    padding: 0.875rem;
}

.aside-list-hot > li .percent-image .figure > .figcaption .number {
    position: absolute;
    top: 5px;
    right: -25px;
    z-index: 2;
    width: 80px;
    line-height: 1.6;
    text-align: center;
    transform: rotate(45deg);
    color: var(--white);
}

.aside-list-hot > li:nth-child(1) .percent-image .figure > .figcaption .number {
    background-color: #eb1b1b;
}

.aside-list-hot > li:nth-child(2) .percent-image .figure > .figcaption .number {
    background-color: #e95f21;
}

.aside-list-hot > li:nth-child(3) .percent-image .figure > .figcaption .number {
    background-color: #f39a00;
}

.aside-list-hot > li:nth-child(4) .percent-image .figure > .figcaption .number {
    background-color: #bccf02;
}

.aside-list-hot > li .percent-image .figure > .figcaption .number {
    background-color: #02cf40;
}

.aside-list-dot > li {
    padding-top: 0.35em;
    padding-bottom: 0.35em;
}

.aside-list-dot > li > a {
    position: relative;
    padding-left: 1em;
}

.aside-list-dot > li > a::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    width: 6px;
    height: 6px;
    background-color: var(--gray-400);
    border-radius: 100%;
    transition: all 0.3s ease-in-out;
}

.aside-list-dot > li > a:hover::before {
    background-color: var(--gray-600);
}

.aside-list-comment > li:not(:first-child) {
    margin-top: 1em;
    padding-top: 1em;
    border-top: 1px solid var(--bs-border-color);
}

@media (max-width: 768px) {
    .aside-list-comment > li .avatar {
        width: 2rem;
        min-width: 2rem;
        height: 2rem;
    }
}

.aside-list-comment > li .box-content {
    position: relative;
    background-color: rgba(var(--bs-blue-rgb), 0.05);
}

.aside-list-comment > li .box-content::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 1.5em;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid rgba(var(--bs-blue-rgb), 0.05);
}

.aside-list-timeline {
    position: relative;
}

.aside-list-timeline::before {
    position: absolute;
    top: 0;
    bottom: 0;
    content: "";
    width: 1px;
    border-left: 1px dashed var(--bs-border-color);
}

.aside-list-timeline > li {
    padding-left: 1em;
}

.aside-list-timeline > li:first-child {
    margin-top: 0 !important;
}

.aside-list-timeline > li .information {
    position: relative;
}

.aside-list-timeline > li .time::before {
    position: absolute;
    left: calc(-16px);
    top: calc(1em / 2);
    content: "";
    width: 5px;
    height: 5px;
    background-color: var(--bs-blue);
    border-radius: 100%;
    opacity: 0.5;
    transition: all 0.3s;
}

.aside-list-timeline > li:hover .time::before {
    opacity: 1;
}

.aside-list-link > li a:hover {
    border-color: var(--bs-blue) !important;
}

.aside-list-link > li .information {
    flex: 1;
}

.aside-list-link > li .box-description {
    opacity: 0.65;
}

.aside-list-link > li .image {
    width: 40px;
    min-width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 100%;
}

/*
** 标签
*/
.ticket {
    display: inline-block;
    background-color: var(--bs-blue);
    color: var(--white) !important;
    line-height: 1;
    padding: 0.35em;
    border-radius: 0.25em;
    font-size: 12px;
    vertical-align: 2px;
}

.ticket-primary {
    background-color: var(--bs-primary);
}

.ticket-secondary {
    background-color: var(--bs-secondary);
}

.ticket-success {
    background-color: var(--bs-success);
}

.ticket-danger {
    background-color: var(--bs-danger);
}

.ticket-warning {
    background-color: var(--bs-warning);
}

.ticket-info {
    background-color: var(--bs-info);
}

.ticket-light {
    background-color: var(--bs-light);
    color: var(--bs-dark) !important;
}

.ticket-dark {
    background-color: var(--bs-dark);
}

.ticket-link {
    background-color: transparent !important;
    text-decoration: underline !important;
    color: var(--bs-blue) !important;
}

.ticket-rainbow {
    background: linear-gradient(90deg, #a33500, #008756);
}

/*
** hover-title
*/
.title-hover .title {
    display: inline;
    line-height: var(--bs-body-line-height);
    background: linear-gradient(to right, currentColor 50%, currentColor 100%);
    background-size: 0px 1px;
    background-repeat: no-repeat;
    background-position: left 100%;
    transition-duration: 0.5s;
}

.title-hover:hover .title {
    background-size: 100% 1px;
}

/*
** hover-transform
*/
.up-hover,
.down-hover,
.left-hover,
.right-hover {
    transition: all 0.3s ease-in-out;
}

.up-hover:hover {
    transform: translateY(-5px);
}

.down-hover:hover {
    transform: translateY(5px);
}

.left-hover:hover {
    transform: translateX(-5px);
}

.right-hover:hover {
    transform: translateX(5px);
}

/*
** 图片比例
*/
.percent-image {
    width: 100%;
    min-height: fit-content;
    display: block;
    overflow: hidden;
}

.percent-image .figure {
    width: 100%;
    height: 100%;
    margin: 0;
    display: block;
    position: relative;
    overflow: hidden;
}

.percent-9_16 .figure {
    padding-bottom: 56%;
}

.percent-image .figure,
.percent-10_16 .figure {
    padding-bottom: 62.5%;
}

.percent-3_4 .figure {
    padding-bottom: 75%;
}

.percent-1_1 .figure {
    padding-bottom: 100%;
}

.percent-image .figure > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    transition: all 0.6s;
    transform: scale(1.05);
}

.percent-image:not(.not-figcaption) .figure::after {
    position: absolute;
    content: "";
    height: 70%;
    width: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.8);
    background: linear-gradient(180deg, transparent, black);
    z-index: 2;
}

.percent-image:hover .figure > img,
.percent-image a:hover .figure > img {
    transform: scale(1.15);
}

.percent-image .figure > .figcaption {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    padding: var(--aio-spacing);
    color: var(--gray-100);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
}

.percent-image .figure > .figcaption .box-description,
.percent-image .figure > .figcaption .aio-list-split-dot {
    opacity: 0.75;
}

@media (max-width: 1200px) {
    :root {
        --aio-spacing: 20px;
    }
}

@media (max-width: 992px) {
    :root {
        --aio-spacing: 15px;
    }
}

@media (max-width: 768px) {
    :root {
        --aio-spacing: 12px;
    }
}

.token.cdata,
.token.comment,
.token.doctype,
.token.prolog {
    color: var(--gray-600)
}

.token.punctuation {
    color: var(--bs-pink);
}

.token.namespace {
    opacity: 0.7;
}

.token.constant,
.token.deleted,
.token.property,
.token.symbol,
.token.tag,
.token.keyword {
    color: var(--bs-cyan);
}

.token.boolean,
.token.number {
    color: var(--bs-teal);
}

.token.attr-name,
.token.builtin,
.token.char,
.token.inserted,
.token.selector,
.token.string,
.token.important,
.token.regex {
    color: var(--bs-warning);
}

.language-css .token.string,
.style .token.string,
.token.entity,
.token.operator,
.token.url,
.token.variable,
.token.atrule,
.token.attr-value,
.token.class-name,
.token.function {
    color: var(--bs-info);
}

.token.bold,
.token.important {
    font-weight: 700;
}

.token.italic {
    font-style: italic;
}

.token.entity {
    cursor: help;
}

.token > .url-link {
    text-decoration: underline;
}

.token > .url-link:hover {
    color: unset !important;
}

/* scrollbar */
pre::-webkit-scrollbar-corner {
    border-radius: var(--bs-border-radius);
}

pre::-webkit-scrollbar-track {
    box-shadow: none;
    background-color: var(--bs-dark);
    border-radius: var(--bs-border-radius);
}

pre::-webkit-scrollbar-thumb {
    background-color: var(--gray-700);
    border-radius: var(--bs-border-radius);
}

/*
** 文字截断
*/
.word-nowarp-ellipsis,
.word-warp-ellipsis-1,
.word-warp-ellipsis-2,
.word-warp-ellipsis-3,
.word-warp-ellipsis-4 {
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
}

.word-nowarp-ellipsis {
    word-break: keep-all;
    white-space: nowrap;
}

.word-warp-ellipsis-1,
.word-warp-ellipsis-2,
.word-warp-ellipsis-3,
.word-warp-ellipsis-4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.word-warp-ellipsis-1 {
    -webkit-line-clamp: 1;
}

.word-warp-ellipsis-2 {
    -webkit-line-clamp: 2;
}

.word-warp-ellipsis-3 {
    -webkit-line-clamp: 3;
}

.word-warp-ellipsis-4 {
    -webkit-line-clamp: 4;
}

/*
** 顶部
*/
.aio-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    background-color: var(--bs-white);
    box-shadow: var(--bs-box-shadow-sm);
    transition: all 0.3s;
}

.header-transform {
    transform: translateY(-100%);
}

@media screen and (min-width: 992px) {
    .aio-header > .container .navbar {
        margin-right: 1rem;
        margin-left: 1rem;
    }
}

@media screen and (max-width: 576px) {
    .aio-header > .container {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}

.aio-header > .container .logo-image + .logo-text {
    margin-left: 10px;
}

.aio-header > .container > .offcanvas-menu {
    flex: 1;
}

.btn-theme .text {
    display: none;
}

.dropdown-theme .dropdown-menu > li button > svg {
    margin-right: 0.5em;
}

/*
** 导航
*/
.btn-nav-box,
.btn-aside-box {
    width: 30px;
    max-width: 30px;
    min-width: 30px;
    height: 30px;
    position: relative;
    cursor: pointer;
}

.nav-burger,
.nav-burger::before,
.nav-burger::after,
.aside-burger,
.aside-burger::before,
.aside-burger::after {
    width: 20px;
    height: 2px;
    border-radius: 2px;
    transition: all 0.2s ease-in-out;
}

.nav-burger,
.nav-burger::before,
.nav-burger::after {
    position: absolute;
    content: '';
}

.nav-burger,
.nav-burger::before,
.nav-burger::after {
    left: 0;
}

.aside-burger,
.aside-burger::before,
.aside-burger::after {
    right: 0;
}

.nav-burger::before,
.aside-burger::before {
    transform: translateY(-8px);
}

.nav-burger::after,
.aside-burger::after {
    transform: translateY(8px);
}

.aside-burger {
    width: 16px;
}

/* .burger-open .nav-burger {
	background: transparent;
}
.burger-open .nav-burger::before {
	transform: rotate(-45deg) translateY(0);
}
.burger-open .nav-burger::after {
	transform: rotate(45deg) translateY(0);
} */

/*
** 导航
*/
.nav-list {
    font-size: calc(1rem - 1px);
}

@media screen and (min-width: 992px) {
    .nav-list > li {
        position: relative;
    }

    .nav-list > li:not(:first-child) {
        margin-left: 1.5em;
    }

    .nav-list > li > a {
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .nav-list > li > a > svg {
        margin-left: 0.25em;
    }

    .nav-child-box {
        width: 8em;
        position: absolute;
        top: 1em;
        left: calc(50% - 4.5em);
        z-index: 9;
        opacity: 0;
        visibility: hidden;
        transform-origin: top;
        transition: all 0.35s;
        transform: translateX(0) perspective(600px) rotateX(-45deg);
    }

    .nav-list > li:hover .nav-child-box {
        opacity: 1;
        visibility: visible;
        transform: translateX(0) perspective(600px) rotateX(0);
    }

    .nav-list > li:hover > a {
        color: var(--bs-blue);
    }

    .nav-list-child {
        background-color: var(--bs-white);
    }

    .nav-child-items {
        position: relative;
        margin-top: 1em;
        padding: 10px;
        background-color: var(--bs-white);
        box-shadow: var(--bs-box-shadow-sm);
        border-bottom-left-radius: var(--bs-border-radius);
        border-bottom-right-radius: var(--bs-border-radius);
    }

    .nav-child-items > li:not(:first-child) {
        margin-top: 5px;
    }

    .nav-child-items > li a {
        display: block;
        padding: 0.25em;
        overflow: hidden;
    }
}

@media screen and (min-width: 1400px) {
    .nav-list > li:not(:first-child) {
        margin-left: 2em;
    }
}

/*
** 移动导航
*/
.burger-open .offcanvas-menu .offcanvas-body {
    overflow: hidden;
}

.burger-open .offcanvas-menu .offcanvas-body,
.burger-open .offcanvas-menu .nav-list {
    flex-direction: column;
    align-items: flex-start;
}

.burger-open .offcanvas-menu .navbar {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    padding-top: 0;
    padding-bottom: 0;
}

.burger-open .offcanvas-menu .nav-subsidiary {
    opacity: 0.75;
}

.burger-open .offcanvas-menu .nav-subsidiary > * {
    flex-direction: column !important;
}

.burger-open .offcanvas-menu .nav-subsidiary > * > * {
    margin-top: 1rem !important;
    padding: 0.75em 1em !important;
    background-color: var(--ln-mobile-nav-bg) !important;
    border-color: rgba(var(--bs-border-color-rgb), 0.75) !important;
    color: var(--bs-body-color-rgb) !important;
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
}

.burger-open .offcanvas-menu .offcanvas-body > * {
    display: block !important;
}

.burger-open .offcanvas-menu .offcanvas-body > *,
.burger-open .offcanvas-menu .nav-list li,
.burger-open .offcanvas-menu .nav-list .nav-child-box {
    width: 100%;
}

.burger-open .offcanvas-menu .nav-list {
    background-color: var(--ln-mobile-nav-bg);
    padding: 0 1em;
    border-radius: var(--bs-border-radius);
    overflow: hidden;
}

.burger-open .offcanvas-menu .nav-list > li > a {
    padding: 0.75em 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.burger-open .offcanvas-menu .nav-list > li:not(:first-child) > a {
    border-top: 1px solid rgba(var(--bs-border-color-rgb), 0.5);
}

.burger-open .offcanvas-menu .nav-list li a > svg,
.burger-open .nav-list li a .bi {
    transition: all 0.3s;
    transform: rotate(-90deg);
}

.burger-open .offcanvas-menu .nav-list li .nav-child-box {
    overflow: hidden;
    max-height: 0;
}

.burger-open .offcanvas-menu .nav-list li .nav-child-box .nav-child-items {
    margin-bottom: 1em;
    border-left: 1px solid var(--bs-border-color);
}

.burger-open .offcanvas-menu .nav-list li .nav-child-items a {
    padding: 0.25em 0.5em;
    display: block;
}

.burger-open .offcanvas-menu .nav-list li.active .nav-child-box {
    overflow: hidden;
    max-height: 100vh;
    transition: all 0.5s;
}

.burger-open .offcanvas-menu .nav-list li.active a > svg,
.burger-open .offcanvas-menu .nav-list li.active a .bi {
    transform: rotate(0);
}

/*
** 搜索
*/
.aio-breadcrumb .aio-search-group {
    border: 4px solid var(--ln-search-border) !important;
    background-color: var(--ln-search-bg);
    overflow: hidden;
}

.aio-search-group > .aio-search-keyword,
.aio-search-group > .aio-search-submit {
    height: 2.5rem;
}

.aio-search-group > .aio-search-keyword,
.aio-search-group > .aio-search-clear,
.aio-search-group > .aio-search-submit {
    color: var(--gray-500);
}

.aio-search-group > .aio-search-keyword {
    width: 100%;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.aio-search-group > .aio-search-icon {
    margin-left: 1em;
}

.aio-search-group > .aio-search-submit {
    word-break: keep-all;
    background-color: rgba(var(--bs-blue-rgb), 1);
    color: var(--white);
    padding: 0 1em;
}

.aside-box-search .aio-search-group > .aio-search-submit {
    background-color: var(--bs-border-color);
    color: rgba(var(--bs-body-color-rgb), 0.75);
}

.aio-search-group > .aio-search-clear {
    margin-left: auto !important;
    margin-right: 10px;
    font-size: 1.25rem;
}

@media (min-width: 992px) {
    .aio-breadcrumb .aio-search-form {
        max-width: 70%;
        font-size: 1rem;
    }

    .aio-search-group > .aio-search-keyword,
    .aio-search-group > .aio-search-submit {
        height: 3rem;
    }
}


/*
** 边栏
*/
.aside-box:not(:first-child) {
    margin-top: var(--aio-spacing);
}

.aside-box-blogger .avatar {
    width: 4rem;
    min-width: 4rem;
    height: 4rem;
}

.aside-box-blogger .aside-body .usermeta {
    flex: 1;
}

.aside-box-calendar .calendartop,
.aside-box-calendar .calendar {
    width: 100%;
    text-align: center;
    color: var(--gray-500);
}

.aside-box-calendar .calendartop,
.aside-box-calendar .calendar {
    line-height: 2;
}

.aside-box-calendar .calendar {
    margin-top: 5px;
}

.aside-box-calendar .calendartop tr,
.aside-box-calendar .calendartop td,
.aside-box-calendar .calendar tr,
.aside-box-calendar .calendar td {
    border: 1px solid var(--bs-border-color);
}

.aside-box-calendar .calendar td a {
    text-decoration: underline;
    color: var(--bs-blue);
}

.aside-box-calendar .calendar .day {
    background-color: rgba(var(--bs-blue-rgb), 0.15);
}

/*
** 主体
*/
.aio-mainstay {
    margin-top: var(--aio-spacing);
    margin-bottom: var(--aio-spacing);
}

.aio-mainstay > .aio-main {
    flex: 1;;
}

.aio-mainstay > .aio-main + .aio-aside {
    margin-left: var(--aio-spacing)
}

@media (min-width: 992px) {
    .aio-mainstay > .aio-aside {
        width: var(--aio-aside-width);
        max-width: 360px;
        min-width: 320px;
    }
}

@media (max-width: 992px) {
    .aio-mainstay {
        flex-direction: column;
    }

    .aio-mainstay > .aio-main + .aio-aside {
        margin-left: 0;
    }
}

/*
** 底部
*/
.aio-footer > .container {
    padding-top: var(--aio-spacing);
    padding-bottom: var(--aio-spacing);
    border-top: 1px solid var(--bs-border-color);
}

.aio-footer .container > * {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/*
** 快捷按钮
*/
.aio-sidebar {
    right: 1rem;
    bottom: 1rem;
    z-index: 1010;
}

/* 👑 核心修复：强力放大“返回顶部”与侧边栏悬浮按钮，变身大厂圆形质感 */
.sidebar-button {
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important; /* 强制大尺寸，告别按不到 */
    height: 44px !important;
    background-color: var(--xzm-bg-card) !important;
    color: var(--xzm-text-main) !important;
    border: 1px solid var(--xzm-border) !important;
    border-radius: 50% !important; /* 变成正圆形 */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5) !important; /* 增加浮空感 */
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sidebar-button:hover {
    color: var(--xzm-accent) !important;
    border-color: var(--xzm-accent) !important;
    transform: translateY(-3px) !important;
}

.sidebar-button:not(:first-child) {
    margin-top: 1rem;
}

#sidebar-button-totop {
    opacity: 0;
    transform: translateY(.75rem);
    transition: all .3s cubic-bezier(0.16, 1, 0.3, 1), margin-right 0s;
    visibility: hidden;
}

#sidebar-button-totop:after {
    /* 彻底重构里面的箭头样式 */
    font-family: "iconfont" !important;
    font-size: 1.4rem !important; /* 放大箭头 */
    position: static !important; /* 解除绝对定位束缚 */
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    color: inherit !important; /* 颜色跟随父级 */
}

#sidebar-button-totop.active-progress {
    transform: translateY(0);
    visibility: visible;
}

@media (max-width: 768px) {
    .aio-sidebar {
        right: 20px;
        bottom: 20px;
    }
    
    .sidebar-button {
        width: 48px !important; /* 手机上更大一点，盲选防误触 */
        height: 48px !important;
    }

    .sidebar-button:not(:first-child) {
        margin-top: 15px !important;
    }
}

@media (min-width: 320px) {
    #sidebar-button-totop.active-progress {
        opacity: 1;
    }
}

#sidebar-button-totop svg path {
    fill: none;
}

#sidebar-button-totop svg.progress-square path {
    stroke: var(--bs-blue);
    stroke-width: 1;
    box-sizing: border-box;
    transition: all .2s linear;
}

[data-bs-theme=light] #sidebar-button-theme [data-icon=dark],
[data-bs-theme=dark] #sidebar-button-theme [data-icon=light] {
    display: none;
}

[data-bs-theme=light] #sidebar-button-theme [data-icon=light],
[data-bs-theme=dark] #sidebar-button-theme [data-icon=dark] {
    display: block;
}

/*
** pagination
*/
.pagination {
    margin-top: var(--aio-spacing);
}

.pagination,
.pagination > a,
.pagination > span,
.pagination > em {
    color: var(--gray-500);
    padding: 0.5em 1em;
    display: flex;
}

.pagination > a,
.pagination > span {
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    margin: 0.25em;
}

.pagination > span {
    background-color: var(--bs-blue);
    color: var(--white);
    border-color: var(--bs-blue) !important;
}

.pagination > em {
    padding-left: 0.25em;
    padding-right: 0.25em;
}

.pagination > a:hover {
    border-color: var(--bs-blue) !important;
    color: var(--bs-blue);
}

@media (max-width: 768px) {
    .pagination {
        padding: 12px !important;
    }

    .pagination > a,
    .pagination > span {
        padding: 0.35em .85em;
        margin-left: 0.15em;
        margin-right: 0.15em;
    }
}

.aio-msg {
    background-color: var(--gray-900);
    color: var(--white);
    box-shadow: 0 0 0.125rem rgba(255, 255, 255, 0.5);
    padding: 0.75rem 1rem;
    border-radius: var(--bs-border-radius);
    min-width: 6rem;
    max-width: max(100%, 300px);
    text-align: center;
    transition: all 0.3s;
    opacity: 0;
    transform: scale(0);
}

.aio-msg.show {
    opacity: 1;
    transform: scale(1);
}

/*
** 文章
*/
.aio-article .aio-list-split-dot li:not(:first-child)::before {
    padding-left: 1em;
    padding-right: 1em;
}

.article-description {
    padding: 0.75em;
    border-left: 5px solid rgba(var(--bs-blue-rgb), 0.2);
    background-color: rgba(var(--bs-blue-rgb), 0.1);
    border-radius: var(--bs-border-radius);
    opacity: 0.7;
}

.copyright-plugin {
    background-color: rgba(var(--bs-blue-rgb), 0.05);
    opacity: 0.8;
}

.copyright-plugin > li {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}

.article-content {
    font-size: 15px;
    line-height: 2.0;
}

.article-content > * {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.article-content .plyr,
.article-content video,
.article-content audio,
.article-content img,
.article-content svg,
.article-content table {
    max-width: 100%;
    border-radius: var(--bs-border-radius);
}

.article-content img {
    transition: all 0.3s;
}

.article-content img:hover {
    transform: translateY(-3px);
}

/* In aio.global.css */

.article-content a {
  color: var(--bs-blue);
  text-decoration: none; /* Changed from underline to none */
}

/* Optional: add underline on hover for links in article content */
.article-content a:hover {
  text-decoration: underline;
}

.markdown a {
  text-decoration: none; /* Changed from underline to none */
}

/* Optional: add underline on hover for links in markdown */
.markdown a:hover {
  text-decoration: underline;
}

.article-content blockquote {
    position: relative;
    padding: 1em 2.5em;
    border-radius: var(--bs-border-radius);
    background-color: rgba(var(--bs-blue-rgb), 0.1);
    opacity: 0.75;
}

.article-content blockquote::before,
.article-content blockquote::after {
    position: absolute;
    font-family: 'aio' !important;
    font-size: 12px;
    opacity: 0.3;
}

.article-content blockquote::before {
    content: "\e659";
    left: 0.75em;
    top: 0.75em;
}

.article-content blockquote::after {
    content: "\e65a";
    right: 0.75em;
    bottom: 0.75em;
}

.article-content ul,
.article-content ol {
    margin-left: 1em;
}

.article-content ul {
    list-style: disc;
}

.article-content ol {
    list-style: decimal;
}

.article-content table {
    width: 100%;
    border-color: rgba(var(--bs-blue-rgb), 0.05);
}

.article-content table tr th,
.article-content table tr td {
    padding: 0.5em 1em;
    border: 1px solid var(--bs-border-color);
}

.article-content table tr th {
    white-space: nowrap;
    word-break: keep-all;
}

.article-content table thead tr {
    background-color: rgba(var(--bs-blue-rgb), 0.05);
}

/* 👑 核心修复：让上一篇/下一篇完美对齐且同生共死（等高） */
.article-neighbor {
    display: flex !important;
    flex-direction: row !important;
    gap: 15px !important; /* 左右间距 */
    align-items: stretch !important; /* 强制两边等高！ */
    margin-top: 30px !important;
}

.article-neighbor > .btn {
    flex: 1 !important; /* 各占50% */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* 垂直居中文字 */
    height: auto !important; /* 允许拉伸 */
    margin: 0 !important; /* 清除原有边距 */
    padding: 15px !important;
}

@media (max-width: 768px) {
    .article-neighbor {
        gap: 10px !important; /* 手机端间距紧凑点 */
    }
    .article-neighbor > .btn {
        padding: 12px 10px !important;
    }
    .article-neighbor > .btn::before {
        margin-bottom: 5px !important; /* 上/下一篇的提示词和标题隔开一点 */
    }
}

.article-neighbor > .btn::before {
    font-size: 0.75rem;
    content: attr(aria-label);
    text-transform: uppercase;
    color: rgba(var(--bs-body-color-rgb), 0.5);
}

.article-neighbor > a.btn:active::before,
.article-neighbor > a.btn:hover::before {
    color: unset;
}

/*
** 评论
*/
.comment-post {
    background-color: rgba(var(--bs-blue-rgb), 0.05);
    overflow: hidden;
}

.comment-form input:not(.form-control),
.comment-form button:not(.btn),
.comment-form textarea:not(.form-control) {
    outline: 0;
    border: 0;
    background-color: transparent;
}

.comment-form-head .input-box {
    flex: 1;
}

.comment-form-head {
    border-bottom: 1px solid var(--bs-border-color);
}

@media (min-width: 768px) {
    .comment-form-head .input-box:not(:first-child)::before {
        content: '|';
        color: rgba(var(--bs-body-color-rgb), 0.2);
    }
}

@media (max-width: 768px) {
    .comment-form-head {
        flex-direction: column !important;
    }

    .comment-form-head .input-box:not(:first-child) {
        border-top: 1px solid var(--bs-border-color);
    }
}

.comment-form-head input {
    width: 100%;
    padding: 1em;
    color: rgba(var(--bs-body-color-rgb), 0.7);
}

.comment-form-body {
    padding: 1em;
}

.comment-form-body textarea {
    resize: none;
    width: 100%;
    color: rgba(var(--bs-body-color-rgb), 0.7);
}

textarea::-webkit-scrollbar-track {
    box-shadow: none;
    background-color: transparent;
}

textarea::-webkit-scrollbar-thumb {
    background-color: rgba(--gray-900);
}

.comment-post-code .captcha,
.comment-post-code .input-post-code {
    height: 30px;
}

.comment-post-code .input-post-code {
    padding: 0 0.5em;
}

.comment-list .comment-item {
    border-top: 1px solid var(--bs-border-color);
    padding-top: 1em;
    margin-top: 1em;
}

.comment-list .comment-item > .avatar {
    margin-right: 10px;
}

@media (min-width: 768px) {
    .comment-list > .comment-list-children {
        margin-left: 50px;
    }
}

.comment-item-box {
    flex: 1;
}

.comment-item-box .comment-post {
    margin-top: 1em;
}

.comment-item-content {
    position: relative;
    background-color: rgba(var(--bs-blue-rgb), 0.05);
}

.comment-item-content::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 1.5em;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid rgba(var(--bs-blue-rgb), 0.05);
}

/*
** 首页
*/
.sift-thumb-left,
.sift-thumb-right {
    width: 50%;
}

.aio-curated .percent-image {
    box-shadow: var(--bs-box-shadow-sm);
}

@media (max-width: 992px) {
    .container-curated {
        flex-direction: column;
    }

    .sift-thumb-left,
    .sift-thumb-right {
        width: 100%;
    }

    .sift-thumb-left {
        margin-right: 0;
        margin-bottom: var(--aio-spacing);
    }
}

.sift-thumb-left {
    margin-right: var(--aio-spacing);
}

.sift-thumb-right-bottom .percent-image + .percent-image {
    margin-left: var(--aio-spacing);
}

.sift-thumb-right-bottom {
    margin-top: var(--aio-spacing);
}

.sift-thumb-left .percent-image .figure,
.sift-thumb-right-bottom .percent-image .figure {
    padding-bottom: 100%;
}

.sift-thumb-right-top .percent-image .figure {
    padding-bottom: 50%;
}

.sift-thumb-right-bottom .percent-image .figure {
    padding-bottom: calc(100% - var(--aio-spacing) / 2);
}

@media (max-width: 992px) {
    .sift-thumb-left .percent-image .figure {
        padding-bottom: 56%;
    }

    .sift-thumb-right-bottom .percent-image .figure {
        padding-bottom: 62.5%;
    }
}

@media (max-width: 768px) {
    .percent-image .figure > .figcaption .box-description,
    .percent-image .figure > .figcaption .aio-list-split-dot {
        display: none;
    }

    .sift-thumb-right-top .percent-image .figure {
        padding-bottom: 40%;
    }

    .sift-thumb-right-bottom .percent-image .figure {
        padding-bottom: 75%;
    }

    .sift-thumb-right .percent-image .figure > .figcaption .box-title {
        -webkit-line-clamp: 1;
    }

    .percent-image .figure > .figcaption .box-title {
        margin-top: 5px !important;
    }

    .percent-image .figure > .figcaption .box-information {
        margin-top: 1px !important;
    }
}


/**
 * markdown 输出样式
 */

 .markdown {
    overflow-wrap: break-word;
    text-align: justify
}

.markdown h1 {
    font-size: 1.8rem !important;
    margin-top: 1em;
    margin-bottom: 16px;
    font-weight: bold;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
    letter-spacing: 1px
}

.markdown h2 {
    font-size: 1.5rem !important;
    margin-top: 1em;
    margin-bottom: 16px;
    font-weight: bold;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
    letter-spacing: 1px
}

.markdown h3 {
    font-size: 1.3rem !important;
    line-height: 1.43;
    font-weight: bold
}

.markdown h4 {
    font-size: 1.2em !important;
    margin-bottom: 16px;
    font-weight: bold;
    line-height: 1.4;
    letter-spacing: 0.5px
}

.markdown h5 {
    font-size: 1rem !important;
    margin-top: 1em;
    margin-bottom: 16px;
    font-weight: bold;
    line-height: 1.4
}

.markdown h6 {
    font-size: 1rem !important;
    color: #777;
    margin-top: 1em;
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 16px
}

.markdown strong {
    font-weight: bold;
    font-size: 1rem !important
}

.markdown del {
    text-decoration: line-through
}


.markdown blockquote {
    color: #666;
    border-left: 4px solid #ddd;
    padding-left: 20px;
    margin-left: 0;
    font-size: 14px;
    font-style: italic
}

.markdown ul {
    padding-left: 2em;
    margin-bottom: 16px
}

.markdown ol {
    padding-left: 2em;
    margin-bottom: 16px
}

.markdown li {
    font-size: 15px !important;
    line-height: 2
}

.markdown hr {
    height: 1px;
    border: none;
    border-top: 1px solid #ddd;
    background: none
}

.markdown pre.prettyprint {
    padding: 10px;
    border: 1px solid #ddd;
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.6
}

pre {
    word-break: break-word !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere;
}

.markdown table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: auto;
    word-break: keep-all;
    border-collapse: collapse;
    margin-bottom: 16px;
    table-layout: auto;
}

.markdown thead tr {
    background-color: #f5f5f6
}

.markdown td {
    padding: 6px 13px;
    border: 1px solid #00000019
}

.markdown th {
    padding: 6px 13px;
    border: 1px solid #00000019
}

.markdown table tr:nth-child(even) {
    background: #f5f5f6
}

/* 选择不在 <pre> 标签中的 <code> 元素 */
.markdown code:not(pre > code) {
    border-radius: 3px;
    font-size: 14px;
    margin-right: 4px;
    color: #f6607d;
    background: #00000019;
    padding: 2px 4px;
}

.markdown pre {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #00000019;
    background: #00000019;
    overflow: auto
}

.markdown img {
    display: block;
    margin: auto;
    box-sizing: border-box;
    border: 0
}

.markdown hr {
    margin: 7px 0 7px 0
}

.input-post-code {
    height: 38px;
    padding: 0 10px;
    margin-left: 5px;
    color: rgba(var(--bs-body-color-rgb), 0.7);
}

.captcha {
    cursor: pointer;
    width: 100px;
    height: 38px;
}
/* ===== 暗黑模式适配 ===== */
[data-bs-theme=dark] .category-section {
    background-color: var(--dark-color-800) !important;
    border-color: var(--dark-color-600) !important;
}

[data-bs-theme=dark] .category-section h3 {
    color: var(--gray-300) !important;
}

[data-bs-theme=dark] .card.dark\:bg-dark-secondary {
    background-color: var(--dark-color-700) !important;
    border-color: var(--dark-color-600) !important;
}

[data-bs-theme=dark] .card-title.text-dark.dark\:text-light {
    color: var(--gray-200) !important;
}

[data-bs-theme=dark] .card-footer small.text-muted.dark\:text-gray-400 {
    color: var(--gray-500) !important;
}

[data-bs-theme=dark] .btn-outline-secondary {
    border-color: var(--dark-color-600);
    color: var(--gray-400);
}

[data-bs-theme=dark] .btn-outline-secondary:hover {
    background-color: var(--dark-color-600);
    color: var(--gray-100) !important;
}

[data-bs-theme=dark] .cover-aspect {
    background-color: var(--dark-color-900);
}

/* ===== 👑 布局修复与大厂极简排版 (首页竖版分离卡片) ===== */
/* 封面比例系统 (海报) */
.cover-aspect {
    position: relative;
    padding-top: 133.33%; /* 默认 3:4 比例，防止图片过长 */
    overflow: hidden;
    background: var(--xzm-bg-card); /* 统一暗黑底色 */
}

.cover-aspect img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 卡片标题控制 */
.card-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    -webkit-line-clamp: 2; /* 电脑端也限制为2行，保持清爽 */
    margin-bottom: 8px;
    font-weight: bold;
}

.card-body {
    padding: 1rem; /* 合理的内边距 */
}

/* 移动端极简排版适配 (海报+下方片名 分离模式) */
@media (max-width: 768px) {
    /* 网格微调，增加空隙 */
    .category-section .row {
        --bs-gutter-x: 0.5rem;
        --bs-gutter-y: 0.5rem;
        margin-left: -0.25rem;
        margin-right: -0.25rem;
    }
    
    .category-section .col-4, .category-section .col-6 {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
        margin-bottom: 0.5rem;
    }
    
    /* 👑 采用物理分离：卡片外层圆角包裹，内部上方图片、下方文字 */
    .card {
        position: relative !important; /* 绝对定位基准 */
        border: 1px solid var(--xzm-border) !important; 
        border-radius: 12px !important;
        overflow: hidden !important;
        background-color: var(--xzm-bg-card) !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .card .cover-aspect, 
    .card .thumbnail {
        position: relative !important;
        z-index: 1 !important;
        border-radius: 0 !important; /* 由外层 card 控制圆角 */
        pointer-events: none; /* 让海报不阻挡任何东西 */
    }
    
    /* 👑 核心修复：解除层级封印，让标题的链接膜能盖住整个卡片 */
    .card .card-body {
        position: static !important; /* 必须是static，不能限制绝对定位 */
        padding: 10px 8px !important; /* 紧凑内边距 */
        background: transparent !important;
        flex-grow: 1;
        display: flex;
        align-items: center; /* 垂直居中标题 */
        pointer-events: auto !important; /* 恢复点击 */
    }
    
    .card-title {
        position: static !important; /* 必须是static */
        -webkit-line-clamp: 2 !important;
        font-size: 0.85rem !important;
        line-height: 1.35 !important;
        margin-bottom: 0 !important;
        min-height: auto !important;
        color: var(--xzm-text-main) !important;
        text-shadow: none !important; /* 不需要阴影了 */
        white-space: normal !important; 
        text-align: center; /* 居中对齐看起来像 App Store */
        width: 100%;
    }
    
    .card-title a {
        display: inline !important;
    }
    
    /* 👑 终极物理外挂：覆盖整个卡片的点击膜 */
    .card-title a::after {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 99 !important; 
        display: block !important;
        background-color: rgba(0,0,0,0) !important; 
        cursor: pointer;
    }

    /* 大厂断舍离：隐藏日期、描述等次要信息，绝对聚焦海报！ */
    .card-footer, 
    .card-text,
    .card-body .text-muted,
    .card-body .box-description {
        display: none !important;
    }
    
    /* 封面比例微调为 2:3，稍微变短一点点 */
    .cover-aspect {
        padding-top: 145%;
    }
}

/* 防止图片挤压变形 */
.card {
    overflow: hidden;
}

/* ===== 图片悬停动画 ===== */
.cover-aspect img {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform; /* 优化动画性能 */
}

.card:hover .cover-aspect img {
    transform: scale(1.05) translateZ(0);
}

/* 修复移动端触摸反馈 */
@media (hover: hover) and (pointer: fine) {
    .card:hover .cover-aspect img {
        transform: scale(1.05);
    }
}

/* 连带卡片整体微动效果 */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 
                0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

[data-bs-theme=dark] .card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3),
                0 4px 6px -2px rgba(0, 0, 0, 0.25);
}

/* General link styling */
a {
    text-decoration: none; /* 移除下划线 */
}

/* Optional: Add underline on hover for better user experience */
a:hover {
    text-decoration: underline;
}

/*
** ========================================================
** 👑 大王专属：大厂级暗黑美学重构 (Big Tech Dark Mode)
** ========================================================
*/

/* --- 1. 基础容器与文本 --- */
body, .aio-mainer, .aio-mainstay, .bg-light, .bg-white, .offcanvas, .offcanvas-header, .offcanvas-body, .aio-header, .aio-footer, .breadcrumb, .list-group-item, .modal-content { 
    background-color: var(--xzm-bg-deep) !important; 
    color: var(--xzm-text-main) !important; 
}

.text-dark { color: var(--xzm-text-main) !important; }
.text-muted { color: var(--xzm-text-muted) !important; }
.border, .border-top, .border-bottom, .border-end, .border-start, hr { 
    border-color: var(--xzm-border) !important; 
}

/* --- 2. 提升区块层次感：让侧边栏、卡片和下拉菜单浮起来 --- */
.aio-aside .border, .aside-items-box .border, .card, .dropdown-menu, .nav-child-box, .xzm-article-card {
    background-color: var(--xzm-bg-card) !important;
    border: 1px solid var(--xzm-border) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.8) !important;
    border-radius: 16px !important;
    overflow: hidden;
}

/* --- 3. 链接与按钮接管 --- */
a { color: var(--xzm-text-main); transition: color 0.2s, border-color 0.2s, background-color 0.2s; text-decoration: none; }
a:hover { color: var(--xzm-accent); }
.btn-primary, .bg-primary { background-color: var(--xzm-accent) !important; color: #fff !important; border-color: var(--xzm-accent) !important; font-weight: bold; }
.btn-primary:hover { background-color: var(--xzm-accent-hover) !important; border-color: var(--xzm-accent-hover) !important; color: #fff !important; }
.text-primary { color: var(--xzm-accent) !important; }

/* 👑 修复文章内相关按钮（上下篇、边框按钮等）的可见性与主题跟随 */
.article-neighbor > .btn, 
.article-content .btn,
.btn-outline-secondary {
    background-color: var(--xzm-bg-card) !important; /* 让按钮从底层背景中微微浮现 */
    border: 1px solid var(--xzm-border) !important;  /* 加上高光磨砂细边框 */
    color: var(--xzm-text-main) !important;
    border-radius: 12px !important;
    transition: all 0.3s ease;
}
.article-neighbor > .btn:hover, 
.article-content .btn:hover,
.btn-outline-secondary:hover {
    background-color: var(--xzm-bg-hover) !important; /* 悬停时背景提亮 */
    border-color: var(--xzm-accent) !important;       /* 边框变为全局点缀色！ */
    color: var(--xzm-accent) !important;              /* 字体变为全局点缀色！ */
    transform: translateY(-2px);                      /* 微微上浮 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}
/* 上一篇/下一篇按钮内部的小字提示也要跟随变色 */
.article-neighbor > .btn::before {
    color: var(--xzm-text-muted) !important;
    transition: all 0.3s ease;
}
.article-neighbor > .btn:hover::before {
    color: var(--xzm-accent) !important;
    opacity: 0.8;
}

/* --- 4. 导航、Logo与汉堡包菜单 --- */
.aio-header { background-color: var(--xzm-bg-deep) !important; border-bottom: 1px solid var(--xzm-border); box-shadow: none; }
.aio-footer { background-color: var(--xzm-bg-deep) !important; border-top: 1px solid var(--xzm-border); }
.nav-list a { color: var(--xzm-text-main); }
.nav-list > li > a:hover { color: var(--xzm-accent) !important; }
.nav-child-items li a { color: var(--xzm-text-muted) !important; }
.nav-child-items li a:hover { color: var(--xzm-accent) !important; background: var(--xzm-bg-hover) !important; }

.aio-header > .container .logo-text {
    background-image: none !important;
    color: var(--xzm-text-main) !important;
    -webkit-text-fill-color: var(--xzm-text-main) !important;
    text-shadow: none !important;
    font-weight: 900;
}
.nav-burger, .nav-burger::before, .nav-burger::after,
.aside-burger, .aside-burger::before, .aside-burger::after {
    background-color: var(--xzm-text-main) !important;
}

/* --- 5. 表单控件与评论框错位修复 --- */
.form-control, .form-select, .reset-input, input[type="text"], input[type="search"], textarea {
    background-color: var(--xzm-bg-card) !important;
    border: 1px solid var(--xzm-border) !important;
    color: var(--xzm-text-main) !important;
    border-radius: 8px;
}
.form-control:focus, .form-select:focus, .reset-input:focus, textarea:focus {
    border-color: var(--xzm-accent) !important;
    box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.25) !important; 
    outline: none;
}

.comment-form-head, .comment-form-body {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 15px;
}
.comment-form-body textarea, .comment-form-head input {
    width: 100% !important; 
    max-width: 100% !important;
    box-sizing: border-box !important; 
    background-color: var(--xzm-bg-card) !important;
    border: 1px solid var(--xzm-border) !important;
    color: var(--xzm-text-main) !important;
    padding: 15px !important;
    border-radius: 12px !important;
    font-size: 14px;
    resize: vertical !important; 
}
.comment-form-body textarea { min-height: 120px !important; }
.comment-list .comment-item-content { background: var(--xzm-bg-card) !important; border: 1px solid var(--xzm-border) !important; border-radius: 12px; padding: 15px; }
.comment-list .comment-item-content::before { display: none; }

/* 👑 核心修复：“展开评论”升级为极光悬浮胶囊 */
#load-comments-button {
    background: linear-gradient(135deg, rgba(var(--bs-blue-rgb), 0.2), rgba(var(--bs-blue-rgb), 0.05)) !important;
    color: var(--xzm-accent) !important;
    border: 1px solid rgba(var(--bs-blue-rgb), 0.4) !important;
    font-weight: bold !important;
    border-radius: 25px !important;
    padding: 12px 35px !important;
    font-size: 1rem !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 15px rgba(var(--bs-blue-rgb), 0.15) !important;
    display: block;
    margin: 20px auto !important;
    width: fit-content;
}
#load-comments-button:hover { 
    background: var(--xzm-accent) !important; 
    color: #fff !important; 
    border-color: var(--xzm-accent) !important; 
    box-shadow: 0 8px 25px rgba(var(--bs-blue-rgb), 0.4) !important;
    transform: translateY(-2px);
}

/* --- 6. 搜索框与分页 --- */
.aio-breadcrumb .aio-search-group { border: 1px solid var(--xzm-border) !important; background-color: var(--xzm-bg-card); border-radius: 25px; overflow: hidden; }
.aio-search-group > .aio-search-keyword, .aio-search-group > .aio-search-submit { height: 2.5rem; }
.aio-search-group > .aio-search-keyword { width: 100%; padding-left: 0.5em; padding-right: 0.5em; }
.aio-search-group > .aio-search-icon { margin-left: 1em; color: var(--xzm-text-muted); }
.aio-search-group > .aio-search-submit { background-color: var(--xzm-accent); color: #fff; padding: 0 1.5em; font-weight: bold; transition: all 0.3s;}
.aio-search-group > .aio-search-submit:hover { background-color: var(--xzm-accent-hover); }
.aio-search-group > .aio-search-clear { margin-left: auto !important; margin-right: 10px; font-size: 1.25rem; }

.pagination .page-link { background-color: var(--xzm-bg-card) !important; border-color: var(--xzm-border) !important; color: var(--xzm-text-main) !important; }
.pagination .page-link:hover { background-color: var(--xzm-bg-hover) !important; color: var(--xzm-accent) !important; }

/* 👑 核心修复：全面接管分页的当前激活页样式 */
.pagination .active .page-link, 
.pagination .active span, 
.pagination .current, 
.pagination > span { 
    background-color: var(--xzm-accent) !important; 
    border-color: var(--xzm-accent) !important; 
    color: #fff !important; 
    font-weight: bold; 
}

/* --- 7. 👑 TMDB & 选片神器的重铸 (Swipeable Dynamic Island) --- */
/* 让 TMDB 按钮变成悬浮于海报上方的发光胶囊 */
.tmdb-info-trigger-wrapper {
    display: flex !important;
    align-items: center !important;
    /* 👑 核心微调：大幅向上提拉 4.5rem，使其真正悬浮在海报内部偏下的位置 */
    margin: -4.5rem auto 2.5rem auto !important; 
    position: relative !important;
    z-index: 20 !important; 
    width: 75% !important;
    max-width: 240px !important; 
    height: 48px !important; /* 稍微加高一点，容纳滑动手指 */
    
    /* 👑 灵动岛毛玻璃质感转移到外壳 */
    background: rgba(10, 132, 255, 0.15) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important; 
    box-shadow: 0 8px 20px rgba(0,0,0,0.5), 0 0 15px rgba(10, 132, 255, 0.2) !important;
    border-radius: 50px !important; 
    
    /* 核心：为内部文字的滑动准备跑道 */
    overflow: hidden !important; 
    padding: 0 !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 外壳悬停发光 */
.tmdb-info-trigger-wrapper:hover {
    background: rgba(10, 132, 255, 0.35) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-3px) scale(1.02) !important; 
    box-shadow: 0 12px 25px rgba(0,0,0,0.6), 0 0 25px rgba(10, 132, 255, 0.4) !important;
}

/* 2. 内部链接：变成纯手动的丝滑横向滑动轨道 */
.tmdb-info-trigger-wrapper a, 
.tmdb-trigger-button {
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #ffffff !important; 
    
    /* 👑 缩小的字号，与正文更搭 */
    font-size: 0.9rem !important; 
    line-height: 48px !important; 
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    
    white-space: nowrap !important;
    margin: 0 !important;
    
    /* 👑 开启横向顺滑拖拽，关闭跑马灯动画 */
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important; /* Firefox */
    padding: 0 24px !important; /* 恢复两边留白 */
    width: 100% !important;
}

/* 隐藏滚动条 Chrome/Safari */
.tmdb-info-trigger-wrapper a::-webkit-scrollbar,
.tmdb-trigger-button::-webkit-scrollbar {
    display: none !important;
}

/* 隐藏可能导致文字错位的前缀小图标 */
.tmdb-info-trigger-wrapper a i,
.tmdb-trigger-button i { 
    margin-right: 6px; 
    color: #ffffff !important;
}

/* 手机端适配 */
@media (max-width: 768px) {
    .tmdb-info-trigger-wrapper {
        max-width: 85% !important; 
    }
}

/* --- 8. 侧边日历 --- */
#calendar, #aside-body-calendar table { width: 100%; color: var(--xzm-text-muted); border-collapse: collapse; text-align: center; }
#calendar caption, #aside-body-calendar caption { color: var(--xzm-text-main); font-weight: bold; padding-bottom: 15px; }
#calendar th, #aside-body-calendar th { color: var(--xzm-text-muted); padding: 8px 0; font-weight: normal; border-bottom: 1px solid var(--xzm-border); }
#calendar td, #aside-body-calendar td { padding: 6px 0; vertical-align: middle; }
#calendar tbody td a, #aside-body-calendar tbody td a { color: var(--xzm-accent) !important; font-weight: bold; background: transparent; padding: 0; text-decoration: underline !important; }
#calendar tbody td a:hover, #aside-body-calendar tbody td a:hover { color: var(--xzm-text-main) !important; }
#calendar caption a, #aside-body-calendar caption a { color: var(--xzm-text-main) !important; background: transparent !important; padding: 0 8px; font-size: 1.1rem; text-decoration: none; }
.aside-box-calendar .calendar .day { background-color: var(--xzm-bg-hover); border-radius: 4px; }

/* --- 9. 插件专属 UI 接管 (Plugin Overrides) --- */

/* my_tag_filter 分类标签过滤插件容器 */
.my-tag-filter-bar {
    display: flex !important;
    flex-direction: column !important; 
    align-items: stretch !important;
    border-bottom: 1px solid var(--xzm-border) !important;
    padding-bottom: 15px !important;
    margin-bottom: 20px !important;
    position: relative;
}

.my-tag-filter-tags {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px;
    width: 100%;
}

/* 👑 彻底剔除任何形式的标签提示文字（包括变蓝的那几个字） */
.my-tag-filter-label,
.my-tag-filter-tags > span,
.my-tag-filter-tags > b,
.my-tag-filter-tags > label,
.my-tag-filter-tags > strong {
    display: none !important;
}

/* 👑 核心修复：独立行轨道与锁定滑动 */
.tag-group-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; 
    overflow-x: auto !important; 
    -webkit-overflow-scrolling: touch !important; 
    scrollbar-width: none !important; 
    gap: 8px;
    align-items: center;
    width: 100%;
    touch-action: pan-x !important; 
    padding: 4px 0;
}

.tag-group-row::-webkit-scrollbar {
    display: none !important; 
}

/* 👑 改进未选中标签的质感：更像 Apple Music 的亮灰磨砂胶囊 */
.my-tag-filter-button {
    background-color: rgba(255, 255, 255, 0.06) !important; /* 微微透亮的磨砂底 */
    border: 1px solid rgba(255, 255, 255, 0.04) !important; /* 极弱的高光边 */
    color: var(--xzm-text-main) !important; /* 👑 使用主文字色（亮灰白），告别暗淡！ */
    border-radius: 12px !important; /* 更圆润的胶囊感 */
    padding: 6px 14px !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    margin: 0 !important;
    flex-shrink: 0 !important; 
    white-space: nowrap !important;
}

.my-tag-filter-button:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

/* 激活的标签 */
.my-tag-filter-button.active,
.my-tag-filter-button.active:hover {
    background-color: var(--xzm-accent) !important; /* 跟随主题色 */
    border-color: var(--xzm-accent) !important;     /* 跟随主题色 */
    color: #ffffff !important; /* 激活时字体纯白 */
    font-weight: bold !important;
    box-shadow: 0 4px 15px rgba(var(--bs-blue-rgb), 0.35) !important; 
    transform: translateY(-2px) !important;
}

/* 👑 “仅看更新中”按钮重铸：高级呼吸状态灯开关 */
.my-tag-filter-toggle {
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: 15px !important;
    width: 100%;
}

.my-tag-filter-toggle .my-tag-filter-button {
    background: linear-gradient(145deg, rgba(var(--bs-blue-rgb), 0.15), rgba(var(--bs-blue-rgb), 0.05)) !important;
    border: 1px solid rgba(var(--bs-blue-rgb), 0.3) !important;
    color: var(--xzm-accent) !important;
    padding: 6px 18px !important;
    border-radius: 20px !important; /* 饱满的跑道圆 */
    font-size: 0.82rem !important; /* 字号略缩小显得精致 */
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 0 15px rgba(var(--bs-blue-rgb), 0.1) !important;
    backdrop-filter: blur(8px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 增加一个仿生呼吸灯圆点 */
.my-tag-filter-toggle .my-tag-filter-button::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--xzm-accent);
    margin-right: 8px;
    box-shadow: 0 0 8px var(--xzm-accent);
    transition: all 0.3s ease;
}

.my-tag-filter-toggle .my-tag-filter-button:hover {
    background: rgba(var(--bs-blue-rgb), 0.25) !important;
    color: #fff !important;
    box-shadow: 0 4px 20px rgba(var(--bs-blue-rgb), 0.4) !important;
    transform: translateY(-2px) scale(1.02) !important;
}

.my-tag-filter-toggle .my-tag-filter-button:hover::before {
    background-color: #fff;
    box-shadow: 0 0 10px #fff;
}

/* 激活状态：开启全量高光与呼吸动画 */
.my-tag-filter-toggle .my-tag-filter-button.active {
    background: linear-gradient(135deg, var(--xzm-accent), #8b5cf6) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 20px rgba(var(--bs-blue-rgb), 0.5) !important;
}

.my-tag-filter-toggle .my-tag-filter-button.active::before {
    background-color: #fff;
    box-shadow: 0 0 12px #fff;
    animation: pulse-glow 2s infinite; /* 激活时增加呼吸动画 */
}

@keyframes pulse-glow {
    0% { transform: scale(0.95); opacity: 0.8; }
    50% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.8; }
}

/* 👑 电脑端特殊对齐逻辑 */
@media (min-width: 769px) {
    .my-tag-filter-bar {
        flex-direction: row !important; 
    }
    .tag-group-row {
        flex-wrap: wrap !important; 
        overflow: visible !important;
    }
    .my-tag-filter-toggle {
        width: auto !important;
        margin-top: 0 !important;
        margin-left: auto !important;
    }
}

/* --- 10. 👑 列表页筛选结果统计条美化 (Dashboard Summary Bar) --- */
/* 把原始傻大黑粗的 H2 爆改为“高级发光指示牌” */
.aio-main > h2.mb-4 {
    font-size: 0.95rem !important; /* 整体字号稍微减小，显得精致 */
    font-weight: 500;
    line-height: 1.6;
    padding: 12px 18px !important;
    background: linear-gradient(135deg, var(--xzm-bg-card), var(--xzm-bg-deep)) !important;
    border: 1px solid var(--xzm-border) !important;
    border-left: 4px solid var(--xzm-accent) !important; /* 强调左侧霓虹边框 */
    border-radius: 12px !important;
    color: var(--xzm-text-muted) !important; /* 默认辅助文字（共XX篇）用淡灰 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
    margin-bottom: 24px !important;
    word-break: break-word;
    display: block; /* 使用 block 保证混合文本的自然换行 */
}

/* 其中的分类与标签主标题提亮加粗 */
.aio-main > h2.mb-4 a {
    color: var(--xzm-text-main) !important;
    font-size: 1.1rem;
    font-weight: 900;
    margin-right: 4px;
    position: relative;
    text-decoration: none !important;
}

.aio-main > h2.mb-4 a:hover {
    color: var(--xzm-accent) !important;
}


/* --- 11. 👑 文章正文精装修 (Article Page Pro-UI) --- */
/* 1. 移动端大标题与元数据降级紧凑化 */
@media (max-width: 768px) {
    /* 强力接管正文标题，无差别打击所有可能的选择器 */
    .article-title,
    .log-title,
    .aio-mainstay > .aio-main > h2:not(.mb-4), 
    .aio-mainstay > .aio-main > h1,
    .article-header h1,
    .article-header h2,
    .title-hover .title,
    h2.title,
    h1.title,
    .aio-mainstay > .aio-main > .title-hover,
    .aio-mainstay > .aio-main > .title,
    .aio-article h1,
    .aio-article h2 {
        font-size: 1.15rem !important; /* 👑 强制缩小大标题字号 (从巨无霸降级) */
        font-weight: 800 !important;
        line-height: 1.4 !important;
        margin-top: 10px !important;
        margin-bottom: 12px !important;
        white-space: normal !important;
    }
    
    /* 缩小作者、发布时间、编辑等信息的区域 */
    .article-info, 
    .article-meta,
    .aio-article .text-muted,
    .aio-mainstay > .aio-main > ul.text-muted,
    .aio-mainstay > .aio-main > div.text-muted {
        font-size: 0.75rem !important;
        opacity: 0.6;
        margin-bottom: 20px !important;
    }
}

/* 2. 正文海报光影融合 (主视觉图悬浮高光) */
/* 自动匹配正文内的第一张图（通常是海报） */
.article-content > p:first-of-type > img,
.article-content > p:nth-child(2) > img,
.article-content > img:first-of-type {
    border-radius: 12px !important; /* 赋予高级圆角 */
    box-shadow: 0 15px 35px rgba(0,0,0,0.5) !important; /* 深邃悬浮阴影 */
    margin: 0 auto !important; /* 强制居中 */
    border: 1px solid var(--xzm-border) !important; /* 极简反光边线 */
    display: block !important;
}

/* 👑 电脑端锁死海报最大高度，彻底告别“全屏巨无霸”竖版海报！ */
@media (min-width: 769px) {
    .article-content > p:first-of-type > img,
    .article-content > p:nth-child(2) > img,
    .article-content > img:first-of-type {
        max-height: 65vh !important; /* 限制垂直高度为屏幕的65%，宽度将完美等比收缩！ */
        width: auto !important; 
        max-width: 100% !important; 
    }
}

/* --- 12. 👑 全局弹窗优化 (Modal & Lightbox Pro-UI) --- */
/* 强力解除 Bootstrap 等框架对 fixed 定位的封印 */
.modal-dialog,
.layui-layer {
    transform: none !important;
}

/* 强行接管各种弹窗的“关闭按钮”，移至底部正中，化身大厂悬浮关闭器 */
.modal-header .btn-close,
.modal-header .close,
.modal .btn-close,
.modal .close,
[data-bs-dismiss="modal"],
[data-dismiss="modal"],
.fancybox-button--close,
.layui-layer-setwin .layui-layer-close,
.layui-layer-setwin a,
.tmdb-modal .close,
.tmdb-close-btn,
.tmdb-close,
#tmdb-close,
[class*="tmdb"] .close,
[class*="tmdb"] [class*="close"],
[id*="tmdb"] .close,
[id*="tmdb"] [class*="close"] {
    position: fixed !important;
    top: auto !important;
    bottom: 6vh !important; /* 避开底部安全区，停留在最顺手的大拇指区域 */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 56px !important;
    height: 56px !important;
    background: rgba(40, 40, 40, 0.75) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 50% !important;
    z-index: 2147483647 !important; /* 必须在最顶层 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* 👑 核心修复：文字消形术！把原生按钮里的纯文本字号设为0，颜色变透明，彻底抹除原有的双胞胎X！ */
    font-size: 0 !important; 
    color: transparent !important; 
    
    opacity: 1 !important;
    box-shadow: 0 10px 35px rgba(0,0,0,0.6) !important;
    margin: 0 !important;
    padding: 0 !important;
    text-shadow: none !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    background-image: none !important; /* 强行清除原生 SVG 背景 */
}

/* 统一绘制完美的纯白十字叉 */
.modal-header .btn-close::before,
.modal-header .close::before,
.modal .btn-close::before,
.modal .close::before,
[data-bs-dismiss="modal"]::before,
[data-dismiss="modal"]::before,
.fancybox-button--close::before,
.layui-layer-setwin .layui-layer-close::before,
.layui-layer-setwin a::before,
.tmdb-modal .close::before,
.tmdb-close-btn::before,
.tmdb-close::before,
#tmdb-close::before,
[class*="tmdb"] .close::before,
[class*="tmdb"] [class*="close"]::before,
[id*="tmdb"] .close::before,
[id*="tmdb"] [class*="close"]::before {
    content: "×" !important;
    font-size: 2.2rem !important; /* 我们自己的 X 保持大字号 */
    font-weight: 300 !important;
    line-height: 1 !important;
    display: block !important;
    margin-top: -4px !important; /* 光学居中微调 */
    color: #ffffff !important; /* 强制纯白 */
}

/* 强行屏蔽按钮内部原有的 span 字符或图标，防止重影 */
.modal-header .btn-close span,
.modal-header .close span,
.modal .btn-close span,
.modal .close span,
[data-bs-dismiss="modal"] span,
[data-dismiss="modal"] span,
[class*="tmdb"] [class*="close"] span,
[id*="tmdb"] [class*="close"] span,
[class*="tmdb"] [class*="close"] i,
[id*="tmdb"] [class*="close"] i,
[class*="tmdb"] [class*="close"] svg,
[id*="tmdb"] [class*="close"] svg {
    display: none !important;
}

/* 修正悬停状态 */
.modal-header .btn-close:hover,
.modal-header .close:hover,
.modal .btn-close:hover,
.modal .close:hover,
[data-bs-dismiss="modal"]:hover,
[data-dismiss="modal"]:hover,
.fancybox-button--close:hover,
[class*="tmdb"] [class*="close"]:hover,
[id*="tmdb"] [class*="close"]:hover {
    background: var(--xzm-accent) !important;
    border-color: var(--xzm-accent) !important;
    transform: translateX(-50%) scale(1.1) !important;
    color: transparent !important; /* 保持透明，防原生文字诈尸 */
    box-shadow: 0 10px 35px rgba(var(--bs-blue-rgb), 0.5) !important;
}

/* 赋予弹窗高级圆角与发光质感 */
.modal-content,
.fancybox-content,
.layui-layer {
    border-radius: 20px !important;
    /* overflow: hidden !important; 👑 必须移除 overflow hidden，否则悬浮底部的按钮会被截断！ */
    border: 1px solid var(--xzm-border) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8) !important;
    background-color: var(--xzm-bg-card) !important;
}

/* 为模态框内部加上圆角，防止内容溢出变直角 */
.modal-header {
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    border-bottom: 1px solid var(--xzm-border) !important;
}
.modal-footer {
    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
    border-top: 1px solid var(--xzm-border) !important;
}

/* 给弹窗内部留出底边距，防止长内容被悬浮关闭按钮遮挡 */
.modal-body,
.layui-layer-content {
    padding-bottom: 12vh !important; 
}