/* ============================================================
   富贵导航 · Star 模板（第二套主题，完全独立）
   ------------------------------------------------------------
   视觉基线：eeenav.com 首页（2026-11-05 实测取值）
     · 顶栏 fixed 80，内层胶囊 1420×60、圆角 8、rgba(245,245,245,.75)+blur(15px)
     · 横幅 450 高，铺满整宽
     · 内容区宽 1305 左右：左轨 100 + 主区 + 右栏 250
     · 卡片圆角 8，站点卡 59 高：图标 30 + 站名 14/500 + 描述 12
     · 页面底色 #f2f4f7，正文 #484b4f，次要 #93959a
   本模板不加载 default 的任何 CSS / JS，也不 include default 的页面片段。
   ============================================================ */

/* ---------------- 一、令牌 ---------------- */
@font-face {
    font-family: "DingTalk JinBuTi";
    src: url("../fonts/DingTalk-JinBuTi.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --main-radius: 8px;
    --radius-sm: 6px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    --main-bg-color: #ffffff;
    --card-bg: #ffffff;
    --body-bg-color: #f2f4f7;
    --muted-bg: #f2f3f5;
    --muted-bg-a-color: rgba(0, 0, 0, .03);

    --text-color: #484b4f;
    --text-strong: #2c3038;
    --text-muted: #93959a;
    --text-xs: #a3a6ab;
    --line-color: #eceef1;
    --line-strong: #e3e6ea;

    --theme-color: #f1404b;
    --theme-soft: rgba(241, 64, 75, .08);

    --main-shadow: rgba(16, 24, 40, .06);
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04);
    --shadow-md: 0 6px 18px rgba(16, 24, 40, .08);
    --shadow-lg: 0 16px 40px rgba(16, 24, 40, .14);

    --ease: cubic-bezier(.22, .61, .36, 1);

    --page-max: 1900px;
    --card-padding: 10px;

    /* 全站正文字体 = 钉钉进步体。eeenav 也是这么干的：把 DingTalk-JinBuTi 命名成 moe
       挂在 body 上，所以它的导航/卡片文字都长这样。只有 400 一档，层级靠字号和颜色，
       不要再用 700 之类的合成粗体。 */
    --font-app: "DingTalk JinBuTi", -apple-system, BlinkMacSystemFont, "Segoe UI",
        "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    --font-brand: "DingTalk JinBuTi", var(--font-app);

    color-scheme: light;
}

html[data-theme="dark"] {
    --main-bg-color: #1e2024;
    --card-bg: #1e2024;
    --body-bg-color: #14161a;
    --muted-bg: #24262b;
    --muted-bg-a-color: rgba(255, 255, 255, .04);

    --text-color: #d7dae0;
    --text-strong: #f2f4f7;
    --text-muted: #8c919b;
    --text-xs: #767c86;
    --line-color: #2a2d33;
    --line-strong: #34383f;

    --theme-soft: rgba(241, 64, 75, .16);
    --main-shadow: rgba(0, 0, 0, .4);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, .35);

    color-scheme: dark;
}

/* ---------------- 二、基础 ---------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--body-bg-color);
    color: var(--text-color);
    font-family: var(--font-app);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    padding-top: 0;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.mdi { line-height: 1; vertical-align: middle; }

/* 按钮化组件复位：.st-more / 虚位卡用 <button> 实现，避免 href="javascript:void(0)" */
/* 只重置字体家族与交互属性；字号/行高交给组件自己的规则，避免覆盖 .st-more 的 12px */
button.st-more,
button.st-feat-card {
    font-family: inherit;
    line-height: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
button.st-more {
    border: 0;
    background: none;
    padding: 0;
}

/* 键盘用户跳过导航 */
.st-skip {
    position: absolute;
    left: 16px;
    top: -64px;
    z-index: 999;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--main-bg-color);
    color: var(--text-color);
    box-shadow: var(--shadow-md);
    font-size: 13px;
    transition: top .2s var(--ease);
}
.st-skip:focus { top: 16px; }

/* ---------------- 三、顶栏（悬浮胶囊，压在看板背景上） ---------------- */
.st-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 80px;
    z-index: 200;
    padding: 0 10px;
    background: transparent;
    border: 0;
    pointer-events: none;   /* 让空白区域透出下面的横幅，胶囊自己再收回点击 */

    /* 移动端「下滚收起、上滚滑出」的过渡（逻辑见 js/modules/header-hide.js）。
       ease-out 让回来时是慢慢推出来，不是弹一下。 */
    transition: transform .34s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}

/* 只在手机/平板上收起：桌面版头部是横向胶囊，躲起来反而突兀 */
@media (max-width: 860px) {
    .st-header.is-hidden {
        transform: translateY(-105%);
    }
}

/* 系统开了「减少动态效果」就不做位移，直接跳 */
@media (prefers-reduced-motion: reduce) {
    .st-header {
        transition: none;
    }
}

.st-header-inner {
    pointer-events: auto;
    width: 100%;
    max-width: var(--page-max);
    height: 60px;
    margin: 10px auto 0;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(245, 245, 245, .75);
    -webkit-backdrop-filter: saturate(2) blur(15px);
    backdrop-filter: saturate(2) blur(15px);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

/* ---- 桌面端：下滚「收纳」成一颗小胶囊，而不是整个飞走 ----
   小屏是滑出屏幕（空间太紧），大屏空间够，就只把中间的导航链接收起来，
   胶囊从整条收成 logo + 右侧按钮的小块，悬浮在原处。 */
@media (min-width: 861px) {
    .st-header-inner {
        transition: max-width .38s var(--ease), height .3s var(--ease),
                    transform .38s var(--ease), box-shadow .3s var(--ease),
                    background .3s var(--ease);
    }
    .st-nav {
        overflow: hidden;
        transition: max-width .38s var(--ease), opacity .22s var(--ease),
                    margin .38s var(--ease), padding .38s var(--ease);
    }
    .st-header.is-compact .st-header-inner {
        max-width: 560px;
        height: 54px;               /* 顺带压扁一点，强化「收起来」的感觉 */
        transform: translateY(-3px);
        /* 滚到内容区后底下的卡片会透出来，半透明显得脏 —— 收纳态改成近乎实心 */
        background: rgba(247, 248, 250, .95);
        box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
    }
    .st-header.is-compact .st-nav {
        max-width: 0;
        margin: 0;
        padding: 0;
        opacity: 0;
        pointer-events: none;
    }
    html[data-theme="dark"] .st-header.is-compact .st-header-inner {
        background: rgba(30, 32, 36, .95);
        box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
    }
}

html[data-theme="dark"] .st-header-inner {
    background: rgba(30, 32, 36, .72);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

.st-burger {
    display: none;
    width: 36px; height: 36px;
    border: 0; border-radius: 8px;
    background: transparent;
    color: var(--text-color);
    font-size: 20px;
}
.st-burger:hover { background: rgba(0, 0, 0, .05); }

.st-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-right: 24px;
}
.st-logo img {
    width: 34px; height: 34px;
    border-radius: 8px;
    object-fit: cover;
    flex: 0 0 34px;
}
.st-logo-name {
    font-family: var(--font-brand);
    font-size: 17px;
    font-weight: 700;
    color: var(--text-strong);
    letter-spacing: .2px;
    white-space: nowrap;
}

.st-nav {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 0;
    overflow: hidden;
}
.st-nav a {
    padding: 15px 10px;
    border-radius: 6px;
    font-size: 15.5px;
    color: var(--text-color);
    white-space: nowrap;
    transition: color .15s var(--ease), background-color .15s var(--ease);
}
.st-nav a:hover { color: var(--theme-color); }
.st-nav a.on { color: var(--theme-color); font-weight: 400; }

.st-header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}
.st-hbtn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-muted);
    background: transparent;
    transition: color .15s var(--ease), background-color .15s var(--ease);
}
.st-hbtn:hover { color: var(--theme-color); background: rgba(0, 0, 0, .05); }
.st-hbtn i { font-size: 16px; }
html[data-theme="dark"] .st-hbtn:hover { background: rgba(255, 255, 255, .08); }

/* 抽屉遮罩（手机端） */
.st-overlay {
    position: fixed;
    inset: 0;
    z-index: 240;
    background: rgba(16, 18, 22, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s var(--ease), visibility .2s var(--ease);
}
.st-overlay.show { opacity: 1; visibility: visible; }

/* ---------------- 四、页面骨架 ----------------
   eeenav 实测（1440 视口）：左轨 100 + 间距 15 + 主区 1305 = 1420；
   主区内部再分：内容 980 + 15 + 右栏 310。 */
.st-wrap {
    max-width: var(--page-max);
    margin: -50px auto 0;
    padding: 0 10px 40px;
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 0 15px;
    align-items: start;
    position: relative;
    z-index: 5;
}
.st-wrap > * { min-width: 0; }

.st-main {
    min-width: 0;
    display: block;
}

.st-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 20px 15px;
    align-items: start;
    margin-top: 20px;
}

.st-flow {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ---------------- 五、左栏（图标导航，对齐 eeenav 的左轨） ----------------
   eeenav 左轨的特征：品牌 logo 在最上、图标统一深灰单色、文字同色，
   当前项不反白，只在最左侧压一条主题色竖条。 */
.st-side {
    position: sticky;
    top: 90px;
    width: 100px;
    max-height: calc(100vh - 104px);
    overflow-y: auto;
    scrollbar-width: none;
    padding: 8px 0 10px;
    background: var(--main-bg-color);
    border-radius: var(--main-radius);
    box-shadow: var(--shadow-sm);
}
.st-side::-webkit-scrollbar { display: none; }

.st-side-title {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 顶部品牌 logo 已移除（顶栏已有同一个图标），这里只剩收起按钮 */
    height: 30px;
    margin-bottom: 4px;
    padding: 0 8px;
}
.st-side-title > span { display: none; }   /* eeenav 左轨没有标题，只留收起按钮 */

/* 收起按钮：原来 absolute 贴在右上角 —— logo 拿掉之后，右上角只剩一个小箭头，
   看着像没收干净的杂物。改成顶部通栏的小胶囊（箭头 + 「收起」），
   和下面的图标列同一条中线，一眼能认出这是「把这一栏收起来」。 */
.st-side-toggle {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    height: 24px;
    padding: 0;
    border: 1px solid var(--line-color);
    border-radius: 7px;
    background: var(--main-bg-color);
    color: var(--text-muted);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: color .15s var(--ease), border-color .15s var(--ease), background-color .15s var(--ease);
}
.st-side-toggle i { font-size: 15px; transition: transform .25s var(--ease); }
.st-side-toggle-tx { line-height: 1; }
.st-side-toggle:hover {
    color: var(--theme-color);
    border-color: var(--theme-color);
    background: var(--theme-soft);
}

.st-menu { display: flex; flex-direction: column; gap: 0; padding: 0 8px; }

.st-menu a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    /* 内容实际要 62px（图标 28 + 间距 5 + 文字 17 + 内边距 12）。
       原来写死 height:62 且 gap/padding 更大，flex 会把标签压到 11px 高，
       中文字身被上下各切掉一截——所以改成 min-height 让内容自己撑开。 */
    height: auto;
    min-height: 62px;
    padding: 6px 2px;
    border-radius: 6px;
    color: var(--text-color);
    text-align: center;
    transition: background-color .15s var(--ease), color .15s var(--ease);
}
/* 悬停：文字先沾上该分类的颜色（比激活轻一档，不喧宾夺主） */
.st-menu a:hover { background: rgba(0, 0, 0, .035); color: var(--rail-c, var(--text-strong)); }

/* ============================================================
   当前项：分类色，而不是一律的深灰
   ------------------------------------------------------------
   每个 <a> 由 sidebar.php 注入 --rail-c（按分类顺序取色板）。
   激活时竖条、图标、文字全用这一个色，图标再垫一层同色淡底，
   一眼就能看出"现在在哪"，也不至于像彩色贴纸那样花。
   ============================================================ */
.st-menu a.on { color: var(--rail-c, var(--text-strong)); }
.st-menu a.on .st-side-label { font-weight: 600; }
.st-menu a.on::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 32px;
    border-radius: 0 3px 3px 0;
    background: var(--rail-c, var(--theme-color));
}

/* 图标容器垫底：悬停浅灰，选中用分类色的 14% 淡底 */
.st-menu a .mi {
    border-radius: 9px;
    transition: background-color .15s var(--ease);
}
.st-menu a:hover .mi { background: rgba(0, 0, 0, .045); }
.st-menu a.on .mi {
    /* 老浏览器不认 color-mix 时退回浅灰，不会白块 */
    background: rgba(0, 0, 0, .05);
    background: color-mix(in srgb, var(--rail-c) 14%, transparent);
}
.st-menu a:hover .mi .mdi,
.st-menu a.on .mi .mdi { color: var(--rail-c, currentColor); }

.st-menu a .mi {
    width: 28px; height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
}
/* 图标统一用 MDI 单色字形：和文字同色，靠透明度分层 */
.st-menu a .mi .mdi {
    font-size: 28px;
    line-height: 1;
    opacity: .9;
    transition: opacity .15s var(--ease), transform .15s var(--ease);
}
.st-menu a:hover .mi .mdi { opacity: 1; transform: translateY(-1px); }
.st-menu a.on .mi .mdi { opacity: 1; }

.st-side-label {
    font-size: 12.5px;
    /* 1.2 只有 15px，而 12.5px 中文字身接近 16px，上下会被切；给到 1.35 才完整 */
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 78px;
}

.st-side-actions {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
    padding: 8px 8px 0;
    border-top: 1px solid var(--line-color);
}
.st-side-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 48px;
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-color);
}
.st-side-btn i { font-size: 18px; opacity: .9; }
.st-side-btn:hover { background: rgba(0, 0, 0, .035); color: var(--text-strong); }
html[data-theme="dark"] .st-menu a:hover,
html[data-theme="dark"] .st-side-btn:hover { background: rgba(255, 255, 255, .05); }
.st-side-btn.is-primary { color: var(--text-color); background: var(--theme-soft); }
.st-side-btn.is-primary i { color: var(--theme-color); opacity: 1; }
.st-side-btn.is-primary:hover { background: var(--theme-soft); color: var(--theme-color); }

/* 收起态：只留图标，主区让出空间 */
@media (min-width: 861px) {
    html.is-side-collapsed .st-wrap { grid-template-columns: 56px minmax(0, 1fr); }
    html.is-side-collapsed .st-side { width: 56px; padding: 6px 2px; }
    html.is-side-collapsed .st-side-title { height: 30px; padding: 0 6px; }
    html.is-side-collapsed .st-side-label,
    html.is-side-collapsed .st-side-btn span { display: none; }
    /* 收起态只剩 40px 宽，胶囊里的「收起」两个字放不下，留箭头 */
    html.is-side-collapsed .st-side-toggle { width: 100%; margin: 0; }
    html.is-side-collapsed .st-side-toggle-tx { display: none; }
    html.is-side-collapsed .st-menu { padding: 0 4px; }
    html.is-side-collapsed .st-menu a { height: 44px; min-height: 44px; padding: 6px 2px; }
    html.is-side-collapsed .st-menu a.on::before { left: -4px; }
    html.is-side-collapsed .st-side-actions { display: none; }
}

/* ---------------- 六、右栏 ---------------- */
/* 右栏模块多（信息卡/随机/赞助/热搜/公告），比视口高，
   所以不做 sticky，跟着页面滚，和 eeenav 一致 */
.st-rside {
    position: static;
    width: 310px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.st-rside::-webkit-scrollbar { display: none; }

.st-card {
    background: var(--main-bg-color);
    border-radius: var(--main-radius);
    box-shadow: var(--shadow-sm);
    padding: 12px;
}
.st-card-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}
.st-card-title {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-strong);
}
.st-card-title i { color: var(--theme-color); font-size: 16px; }
.st-card-act {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-muted);
}
.st-card-act:hover { color: var(--theme-color); }

.st-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    text-align: center;
}
.st-stats-col { min-width: 0; }
.st-stats-label { font-size: 12px; color: var(--text-muted); }
.st-stats-val {
    margin-top: 4px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

.st-latest { display: flex; flex-direction: column; gap: 1px; }
.st-latest-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px;
    border-radius: 6px;
    font-size: 13px;
}
.st-latest-item:hover { background: var(--muted-bg); }
.st-latest-idx {
    width: 16px;
    flex: 0 0 16px;
    font-size: 12px;
    color: var(--text-xs);
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.st-latest-item:nth-child(-n+3) .st-latest-idx { color: var(--theme-color); font-weight: 700; }
.st-latest-ico {
    width: 18px; height: 18px;
    flex: 0 0 18px;
    border-radius: 4px;
    object-fit: contain;
}
.st-latest-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-color);
}

.st-empty {
    padding: 8px 0;
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}


/* 暗色：图标垫底反色，分类色提亮一档，深底上才不发闷 */
html[data-theme="dark"] .st-menu a:hover .mi { background: rgba(255, 255, 255, .07); }
html[data-theme="dark"] .st-menu a.on .mi {
    background: rgba(255, 255, 255, .09);
    background: color-mix(in srgb, var(--rail-c) 22%, transparent);
}
html[data-theme="dark"] .st-menu a.on .mi .mdi,
html[data-theme="dark"] .st-menu a:hover .mi .mdi { filter: brightness(1.12) saturate(1.05); }