a {
    text-decoration: none;
}
ul {
    list-style-type: none;
}
* {
  margin: 0;
  padding: 0;
}
#menu {
    display: none;
}
.menu {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease,
                box-shadow 0.18s ease, transform 0.12s ease,
                bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.2s ease, height 0.2s ease, border-radius 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    font-size: 0;
    line-height: 1;
    color: #2B333D;
    text-align: center;
    border: 1px solid #E4E7EC;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(22, 26, 33, 0.10);

    position: fixed;
    bottom: 18px;
    left: 18px;
    z-index: 101;

    cursor: pointer;   /*鼠标hover显示小手*/
    user-select: none;   /* 防止双击选中文字 */
}
.menu svg {
    width: 20px;
    height: 20px;
    flex: none;
}
/* 只显示一个图标：关着是三条横线，打开时换成 × */
.menu .menu-ico-close { display: none; }
#menu:checked ~ .menu .menu-ico-open { display: none; }
#menu:checked ~ .menu .menu-ico-close { display: block; }

.menu:hover {
    color: #1B4F8A;
    border-color: #BFD3E8;
    box-shadow: 0 8px 22px rgba(22, 26, 33, 0.14);
    transform: translateY(-1px);
}
.menu:active {
    transform: translateY(0) scale(0.96);
}

/* 打开时：按钮挪进侧栏右上角，去掉底色和阴影，跟侧栏连成一体 */
/* 打开时：左下角那颗按钮淡出（不再飞到右上角，避免"瞬移"的怪异感），
   关闭则交给侧栏顶部那个 × */
#menu:checked ~ .menu {
    opacity: 0;
    transform: scale(.9);
    pointer-events: none;
}

/* 侧栏顶部的关闭按钮 */
.menu-close {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    margin-left: auto;
    padding: 0;
    color: #8A93A0;
    background: none;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    transition: color 140ms ease-out, background-color 140ms ease-out;
}

.menu-close:hover {
    color: #171D26;
    background: #F1F3F7;
}

.menu-close svg { width: 16px; height: 16px; }
#menu:checked ~ .menu:hover {
    color: #171D26;
}

/* 窄屏 / 竖屏的遮罩：菜单是临时抽屉，点空白处就关 */
.menu-backdrop {
    display: none;
}

@media (orientation: portrait), (max-width: 860px) {
    .menu-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 99;
        background: rgba(22, 24, 29, 0.38);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.26s ease;
    }
    body.menu-open .menu-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
}
/* 以上是菜单按钮的css */
.menu-sidebar {
    width: 276px;
    height: 100%;
    z-index: 100;
    background-color: #FFFFFF;
    border-right: 1px solid #E7EAF0;
    box-shadow: 0 0 40px rgba(22, 26, 33, .06);

    position: fixed;
    top: 0;
    left: 0;
    /* 用 transform 整块推出去：无论宽度怎么调，收起时都不会露边 */
    transform: translateX(-100%);

    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    overflow-y: auto;        /* 内容超出时出现滚动条 */
        /* ★★★ 隐藏滚动条 ★★★ */
    scrollbar-width: none;         /* Firefox 浏览器 */
    -ms-overflow-style: none;      /* IE 和旧版 Edge */
}
/* ★★★ WebKit 内核浏览器（Chrome / Edge / Safari）隐藏滚动条 ★★★ */
.menu-sidebar::-webkit-scrollbar {
    display: none;
}

#menu:checked ~ .menu-sidebar {
    transform: none;
}
.container {
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#menu:checked ~ .container {
    margin-left: 276px;
}
#menu:checked ~ .menu {
    box-shadow: none;
}
/* ========================================================================== */
.menu-header {
    display: flex;
    align-items: center;
    height: 62px;
    padding: 0 16px;
    border-bottom: 1px solid #F1F3F7;
}
.menu-header span {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}
.menu-header > span + div {
    display: none;
}
.menu-header > span + div img {
    height: 40px;
    border-radius: 10px;
}

/* 顶部的 Logo + 站名 */
.menu-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.menu-logo {
    width: 28px;
    height: 28px;
    display: block;
    flex: none;
}

.menu-brand-text {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
    color: #171D26;
    white-space: nowrap;
}
.menu-sidebar hr {
    border: 0;
    height: 1px;
    background: #c4c4c4;
    margin: 10px;
}
.menu-header + hr {
    margin-top: 0;
}
.menu-link {
    padding-left: 0;
}
.menu-link li {
    height: 46px;
    transition: background-color 0.2s ease;
    background-color: #FFFFFF;
    border-radius: 10px;
    margin: 2px 10px;
}
.menu-link li:hover {
    background-color: #F4F6F9;
}
/* 分组条目必须能被撑高：原来是固定 height:50px，展开的二级菜单撑不开父级，
   于是既不推下面的元素、又压住登录卡（背景透明就看不清字） */
.menu-link li.menu-group {
    height: auto;
    min-height: 46px;
}
.menu-link li a {
    color: #2B333D;
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.4;
    display: block;
    text-align: left;
}
/* ==========================================================================
   由 /JavaScript/menu/menu.config.json 生成的菜单（2026.10-4）
   - 一级条目仍是 .menu-link li（50px / 15px 圆角 / hover #F0F8FF，与旧版一致）
   - 当前页焦点改为 .is-active 类驱动（不再用行内 style 写死蓝底白字）
   - 二级菜单是手风琴：.menu-sub 用 max-height + opacity 做动画，
     展开时把下面的元素推下去（不再用 position:fixed 拖出文档流）
   ========================================================================== */
.menu-link li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    height: 46px;
    box-sizing: border-box;
}
.menu-ico {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    flex: none;
    color: #8A93A0;
    transition: color 0.18s ease;
}

.menu-ico svg {
    width: 18px;
    height: 18px;
    display: block;
}
/* 窄屏短标签：默认隐藏，只在竖屏（见文件末尾的媒体查询）替代长标签显示 */
.menu-text-short {
    display: none;
}
.menu-link li.is-active {
    background-color: #1B4F8A;
}
.menu-link li.is-active > a {
    color: #FFFFFF;
    font-weight: 600;
}
.menu-link li.is-active .menu-ico {
    color: #FFFFFF;
}
.menu-link li:hover .menu-ico {
    color: #4E5866;
}
.menu-link li.is-active:hover .menu-ico {
    color: #FFFFFF;
}

/* ---------- 一级分组（有二级菜单的那一条） ---------- */
.menu-group-toggle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    height: 46px;
    padding: 0 34px 0 12px;
    margin: 0;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.4;
    color: #2B333D;
    text-align: left;
    background: none;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
}
.menu-group-toggle:focus-visible {
    outline: 2px solid #1B4F8A;
    outline-offset: -2px;
}
.menu-caret {
    position: absolute;
    top: 50%;
    right: 16px;
    width: 7px;
    height: 7px;
    margin-top: -6px;
    border-right: 2px solid #8a9aa8;
    border-bottom: 2px solid #8a9aa8;
    transform: rotate(45deg);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease;
}
.menu-group.is-open .menu-caret {
    margin-top: -2px;
    transform: rotate(-135deg);
}

/* ---------- 二级列表：展开推下去 ---------- */
.menu-sub {
    overflow: hidden;
    max-height: 0;
    /* 兜底白底：万一被别的东西盖住，文字也是清楚的 */
    background-color: #FFFFFF;
    border-radius: 12px;
    opacity: 0;
    transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.24s ease-out;
}
.menu-group.is-open .menu-sub {
    opacity: 1;
}
.menu-sub li {
    height: 40px;
    margin: 2px 10px 2px 20px;
    background-color: #FFFFFF;
    border-radius: 9px;
    transition: background-color 0.2s ease;
}
.menu-sub li:hover {
    background-color: #F4F6F9;
}
.menu-sub li a {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 40px;
    padding: 0 10px;
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.4;
    color: #4A5461;
    box-sizing: border-box;
}

/* 文字过长时省略，绝不撑破抽屉（竖屏下二级菜单最容易溢出） */
.menu-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-group-toggle .menu-text,
.menu-link li > a .menu-text {
    flex: 1 1 auto;
}
.menu-sub .menu-ico,
.menu-sub .menu-ico svg {
    width: 16px;
    height: 16px;
}
.menu-sub li.is-active {
    background-color: #EEF3F9;
}
.menu-sub li.is-active > a {
    color: #1B4F8A;
    font-weight: 600;
}
.menu-sub li.is-active .menu-ico {
    color: #1B4F8A;
}
@media (prefers-reduced-motion: reduce) {
    .menu-sub,
    .menu-caret {
        transition: none;
    }
}

/* ---------- 菜单加载骨架：方块 + 流光（Fluent 式 shimmer） ----------
   设计目标：骨架和最终布局"只差内容"，所以骨架直接复用 .menu-link li 的尺寸
   （50px 高 / 15px 圆角 / 3px 8px 外边距），只换底色并加一道扫过的流光。
   骨架写在 #pfMenuNav 里，menu.js 渲染时整段 innerHTML 替换掉，不需要额外清理。
   规范见 docs/architecture/2026-11-ui-loading.md */
.menu-link li.menu-skel-item {
    position: relative;
    overflow: hidden;
    height: 46px;
    min-height: 0;
    pointer-events: none;
    background: #EDEFF3;
}
.menu-skel-item::after,
.menu-skel-avatar::after,
.menu-skel-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.9) 50%,
        rgba(255, 255, 255, 0) 100%);
    animation: menu-skel-sweep 1.35s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
/* 逐行错开，形成一道从上往下扫的流光，而不是整块一起闪 */
.menu-skel-item:nth-child(2)::after { animation-delay: 0.08s; }
.menu-skel-item:nth-child(3)::after { animation-delay: 0.16s; }
.menu-skel-item:nth-child(4)::after { animation-delay: 0.24s; }
.menu-skel-item:nth-child(5)::after { animation-delay: 0.32s; }
.menu-skel-item:nth-child(6)::after { animation-delay: 0.40s; }
.menu-skel-item:nth-child(7)::after { animation-delay: 0.48s; }

/* 底部登录卡：46px 圆头像 + 两行文字条，位置与真实卡片一致 */
.menu-skel-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
}
.menu-skel-avatar {
    position: relative;
    overflow: hidden;
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #EDEFF3;
}
.menu-skel-lines {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.menu-skel-bar {
    position: relative;
    overflow: hidden;
    display: block;
    height: 12px;
    border-radius: 4px;
    background: #EDEFF3;
}
.menu-skel-bar + .menu-skel-bar {
    width: 58%;
    height: 10px;
}
@keyframes menu-skel-sweep {
    100% {
        transform: translateX(100%);
    }
}
/* 骨架不是装饰：关掉动效时保留色块，位置信息仍然成立 */
@media (prefers-reduced-motion: reduce) {
    .menu-skel-item::after,
    .menu-skel-avatar::after,
    .menu-skel-bar::after {
        animation: none;
        opacity: 0;
    }
    .menu-link li.menu-skel-item,
    .menu-skel-avatar,
    .menu-skel-bar {
        background: #E6E9EE;
    }
}
@media (orientation: portrait) {
    .menu-link li.menu-skel-item {
        height: 45px;
    }
    .menu-skel-avatar {
        width: 34px;
        height: 34px;
    }
}

@media (orientation: portrait) {
    .menu {
        width: 130px;
        height: 40px;
        font-size: 20px;
        line-height: 35px;
        border-radius: 15px;

        position: fixed;
        left: 10px;
    }
    /* 抽屉宽度/字号统一由下面的"移动端"块决定，这里不重复定义 */
    .menu-header > span + div {
        display: none;
    }
    #menu:checked ~ .container {
        margin-left: 0;
    }
    .menu-sub li {
        height: 40px;
        border-radius: 10px;
    }
    .menu-sub li a {
        font-size: 15px;
        line-height: 40px;
    }
    /* 竖屏：长标签换成"短标签"（JSON 的 short 字段），高亮小标签隐藏；
       绝不隐藏 .menu-text 本身——老写法 `.menu-sub li span{display:none}` 会把包着文字的那个
       span 一起藏掉，手机端就整行看不见了 */
    .menu-sub a.has-short .menu-text,
    .menu-group-toggle.has-short .menu-text {
        display: none;
    }
    .menu-sub a.has-short .menu-text-short,
    .menu-group-toggle.has-short .menu-text-short {
        display: inline;
    }
    .menu-sub a .menu-text span {
        display: none;   /* 隐藏 MarkDown 里 ar/own 这类高亮小标签 */
    }
}



/* ========================================================================== */
/* ========== 菜单用户状态卡片 ========== */
/* 结构由 menu.js 按 menu.config.json 的 user 段生成：
   .menu-user > .user-status > (.menu-user-inner.user-guest | .menu-user-inner.user-loggedin)
   登录后由 JS 给 .menu-user 加 .is-logged-in 切换显示（不再靠行内 style.display） */
.user-status {
  padding: 10px 10px 12px;
}

.menu-user-inner {
  display: block;
  overflow: hidden;  /* 清除内部浮动 */
  padding: 8px 10px;
  border-radius: 12px;
  transition: background-color 0.2s ease;
  text-decoration: none;
}

a.menu-user-inner:hover {
  background-color: #F0F8FF;
}

.menu-user .user-loggedin {
  display: none;
}

.menu-user.is-logged-in .user-loggedin {
  display: block;
}

.menu-user.is-logged-in .user-guest {
  display: none;
}

.menu-avatar {
  float: left;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  background: #d0d5dd;
}

.menu-avatar span {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.menu-avatar-img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* 方形头像 */
.menu-avatar.is-square {
  border-radius: 12px;
}

.menu-avatar.is-square .menu-avatar-img {
  border-radius: 12px;
}

.menu-avatar-gradient {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
}

.menu-user-info {
  margin-left: 54px;  /* 42px 头像 + 12px 间距 */
}

.menu-user-name {
  font-size: 14px;
  font-weight: 600;
  color: #1a2639;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-user-account {
  font-size: 12px;
  color: #8a9aa8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-label {
  color: #6b7a8f;
  font-weight: 400;
}

/* 竖屏不再单独缩排用户卡：抽屉宽度已经和桌面接近（≥300px），
   直接沿用桌面样式（46px 头像 + 昵称/账号两行），比原来缩小挤在一起好看。 */

/* ========================================================================== */
/* ========== 菜单底部操作区（投稿 / 我的投稿） ========== */
.menu-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 12px 10px;
}

.menu-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 36px;
  padding: 0 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--pf-accent, #1B4F8A);
  background: var(--pf-accent-soft, #E7EFF8);
  border: 1px solid var(--pf-accent-line, #2F6FB6);
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .16s ease, color .16s ease;
}

.menu-action:hover {
  background: #DCE8F6;
}

.menu-action.is-primary {
  color: #fff;
  background: var(--pf-accent, #1B4F8A);
  border-color: var(--pf-accent, #1B4F8A);
}

.menu-action.is-primary:hover {
  background: var(--pf-accent-hover, #163F6E);
  border-color: var(--pf-accent-hover, #163F6E);
}

/* 后台入口：永远贴在菜单最下面 */
.menu-admin-entry {
  padding: 0 12px 12px;
}

.menu-admin-entry a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pf-text-sub, #4D5560);
  background: var(--pf-surface-sub, #EEF0F3);
  border: 1px solid var(--pf-border, #D9DDE3);
  border-radius: 8px;
  text-decoration: none;
  transition: color .16s ease, border-color .16s ease;
}

.menu-admin-entry a:hover {
  color: var(--pf-accent, #1B4F8A);
  border-color: var(--pf-accent-line, #2F6FB6);
}

@media (orientation: portrait) {
  .menu-actions { padding: 2px 8px 8px; gap: 6px; }
  .menu-admin-entry { padding: 0 8px 10px; }
  .menu-action,
  .menu-admin-entry a { height: 34px; font-size: 13px; }
}

/* ========================================================================== */
/* ========== 菜单内推荐搜索栏（recommend 页"搜索此页面"） ========== */
.menu-search {
  padding: 12px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.menu-search-label {
  font-size: 14px;
  font-weight: 600;
  color: #1a2639;
}
.menu-search-input {
  box-sizing: border-box;
  width: 100%;
  height: 38px;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  padding: 0 12px;
  font-size: 14px;
  outline: none;
  background: #f8fafc;
  color: #1e1e1e;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.menu-search-input::placeholder { color: #98a2b3; }
.menu-search-input:focus {
  border-color: #3b82f6;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.menu-search-btn {
  box-sizing: border-box;
  width: 100%;
  height: 38px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.2s, transform 0.1s;
}
.menu-search-btn:hover { filter: brightness(1.08); }
.menu-search-btn:active { transform: translateY(1px); }

/* ========================================================================== */
/* ========== 菜单内置顶博客（blog 页"📌 置顶博客"） ========== */
.sidebar-pinned-section {
  margin: 4px 8px 0;
  padding: 12px;
  background: #f7f9fc;
  border: 1px solid #e8eaee;
  border-radius: 14px;
}
.sidebar-pinned-title {
  font-size: 13px;
  font-weight: 700;
  color: #4d5560;
  margin: 0 0 8px;
  padding-left: 2px;
}
.sidebar-pinned-item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  color: #1b4f8a;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  transition: background-color 0.15s ease-out, color 0.15s ease-out;
}
.sidebar-pinned-item:hover { background: #e7eff8; color: #163f6e; }
.sidebar-pinned-empty { font-size: 11px; color: #8a919c; padding: 4px 10px; }

@media (orientation: portrait) {
  .menu-search { padding: 10px 10px 12px; }
  .menu-search-label { font-size: 13px; }
  .sidebar-pinned-section { margin: 2px 6px 0; padding: 8px; }
  .sidebar-pinned-title { font-size: 12px; }
  .sidebar-pinned-item { padding: 6px 8px; font-size: 12px; }
}
/* ========================================================================== */
/* 在下面追加推荐，博客等的菜单样式 */
/* ===== 移动端 / 竖屏菜单自适应 =====
   这里不用强制覆盖语法：同一份文件内靠"源码顺序靠后"覆盖桌面规则；
   需要压过各页面自己的 .container / .pf-main / .pf-grid-* 规则时，用 #menu ~ 提高特异性。
   ========================================================================== */
@media (orientation: portrait), (max-width: 860px) {
    .menu {
        width: 52px;
        height: 52px;
        padding: 0;
        border-radius: 16px;
        bottom: 18px;
        left: 16px;
        background: rgba(255, 255, 255, 0.94);
        border: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 6px 20px rgba(22, 26, 33, 0.14);
    }
    .menu svg { width: 22px; height: 22px; }

    /* 竖屏同样淡出（关闭交给侧栏顶部 × 或右侧遮罩） */
    #menu:checked ~ .menu {
        opacity: 0;
        transform: scale(.9);
        pointer-events: none;
    }

    /* 抽屉：只用 transform 收放（不再用 left），否则关不干净也没有动画 */
    .menu-sidebar {
        width: min(78vw, 264px);
        box-shadow: 4px 0 28px rgba(0, 0, 0, 0.18);
    }
    #menu:checked ~ .menu-sidebar {
        transform: none;
    }
    /* 悬浮抽屉：严禁推动内容容器导致右侧溢出 */
    #menu:checked ~ .container {
        margin-left: 0;
    }
    .container,
    #menu ~ .container {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        overflow-x: hidden;
    }
    .recommend-content,
    .pf-main,
    #menu ~ .container .recommend-content,
    #menu ~ .container .pf-main {
        padding: 16px 12px 64px;
        max-width: 100%;
        box-sizing: border-box;
    }
    .pf-grid-3,
    .pf-grid-2,
    #menu ~ .container .pf-grid-3,
    #menu ~ .container .pf-grid-2 {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    /* 抽屉内尺寸同步缩小，配合更窄的宽度 */
    .menu-header {
        height: 60px;
    }
    .menu-header span {
        font-size: 20px;
        line-height: 60px;
    }
    .menu-link li,
    .menu-link li.menu-group {
        height: auto;
        min-height: 45px;
    }
    .menu-link li a,
    .menu-group-toggle {
        font-size: 17px;
        line-height: 45px;
        padding-left: 8px;
    }
    .menu-group-toggle {
        height: 45px;
    }
}

/* 超窄手机（≤380px）：再收窄一档 */
@media (max-width: 380px) {
    .menu-sidebar {
        width: min(88vw, 300px);
    }
    .menu-link li a,
    .menu-group-toggle {
        font-size: 16px;
    }
    .menu-sub li a {
        font-size: 14px;
    }
    .menu-user-name {
        font-size: 12px;
    }
    .menu-user-account {
        font-size: 10px;
    }
}