/* 站内吸顶导航条：菜单项与高亮由后端 inject_site_nav 统一注入
   布局用「左锚定」：菜单项的起点只取决于左边的固定槽位（图标 + 品牌位），
   右侧的页名、按钮一律排在菜单之后，切换页面时菜单位置不会再跳。 */
.sn {
    box-sizing: border-box; width: 100%;
    background: #fff; padding: 8px 12px;
    display: flex; align-items: center; gap: 8px;
    position: sticky; top: 0; z-index: 60;
    border-bottom: 1px solid #ECF0EC;
}
.sn-logo {
    width: 30px; height: 30px; flex: 0 0 auto; border-radius: 8px;
    background: url('/static/app-icon.png') center/cover no-repeat;
}
/* 品牌位宽度写死，避免各页文字长短影响菜单起点 */
.sn-brand {
    display: flex; align-items: baseline; gap: 8px;
    flex: 0 0 72px; min-width: 0; overflow: hidden;
}
.sn-name {
    font-size: 16px; font-weight: bold; letter-spacing: 1px;
    color: var(--text, #2E3B2E); white-space: nowrap;
}
.sn-slogan { font-size: 13px; color: var(--sub, #8FA08F); display: none; white-space: nowrap; }
.sn-links {
    display: flex; flex: 1 1 auto; min-width: 0;
    gap: 2px; row-gap: 4px; justify-content: flex-start; flex-wrap: wrap;
}
.sn-links a {
    flex: 0 0 auto; padding: 6px 9px; border-radius: 8px; white-space: nowrap;
    color: var(--text, #2E3B2E); font-size: 13px; font-weight: 500; text-decoration: none;
}
.sn-links a:hover { background: #F1F8E9; }
.sn-links a.on { color: #E67E22; }
.sn-links .ico { display: none; }
.sn-links .nav-mini { display: none; }
/* 页名统一放在品牌位（与文案库页一致），右侧不再重复显示 */
.sn-page { display: none; }

/* 手机：只留图标，菜单用两字短标签，一行放满；更窄的机型自动折行 */
@media (max-width: 599px) {
    .sn { padding: 8px 10px; gap: 6px; }
    .sn-brand { display: none; }
    .sn-links a { padding: 6px 6px; font-size: 12px; }
    .sn-links .nav-full { display: none; }
    .sn-links .nav-mini { display: inline; }
}

/* 笔记本：菜单字号收一档、品牌位只放站名，保证七个菜单一行放得下 */
@media (min-width: 1000px) and (max-width: 1349px) {
    .sn { padding: 14px 32px; gap: 20px; box-shadow: 0 1px 6px rgba(0,0,0,0.04); }
    .sn-logo { width: 42px; height: 42px; border-radius: 12px; }
    .sn-brand { flex-basis: 110px; }
    .sn-name { font-size: 22px; }
    .sn-links { gap: 4px; }
    .sn-links a { padding: 9px 12px; font-size: 14px; border-radius: 10px; }
}

/* 宽屏：完整品牌位；内容区与 site.css 一样按 1440 居中 */
@media (min-width: 1350px) {
    .sn {
        padding: 14px 32px; gap: 20px; box-shadow: 0 1px 6px rgba(0,0,0,0.04);
        padding-left: calc(32px + max(0px, (100% - 1504px) / 2));
        padding-right: calc(32px + max(0px, (100% - 1504px) / 2));
    }
    .sn-logo { width: 42px; height: 42px; border-radius: 12px; }
    .sn-brand { flex-basis: 350px; gap: 14px; }
    .sn-name { font-size: 22px; }
    .sn-slogan { display: block; }
    .sn-links { gap: 4px; }
    .sn-links a { padding: 9px 14px; font-size: 15px; border-radius: 10px; }
}

/* 超宽屏才加菜单图标 */
@media (min-width: 1500px) {
    .sn-links a { padding: 9px 16px; }
    .sn-links .ico { display: inline; }
}

/* 尾部两个按钮点开的面板：二维码弹窗 + 小程序侧栏，全站共用 */
.sn-links a { cursor: pointer; }

.qr-modal {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.25); z-index: 9999;
    align-items: center; justify-content: center; backdrop-filter: blur(6px);
}
.qr-modal.show { display: flex; }
.qr-modal-content {
    background: #fff; border-radius: 16px; padding: 24px;
    max-width: 90vw; max-height: 90vh; overflow: auto;
    text-align: center; position: relative; min-width: 900px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.1);
}
.qr-modal-close {
    position: absolute; top: 12px; right: 16px; font-size: 22px;
    cursor: pointer; color: #9CAF88; background: none; border: none;
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.qr-modal-close:hover { color: #2E3B2E; background: rgba(124,179,66,0.1); }
.qr-header { text-align: center; margin-bottom: 20px; }
.qr-header-sub { font-size: 11px; color: #9CAF88; letter-spacing: 2px; margin-bottom: 4px; }
.qr-header-title { font-size: 18px; color: #2E3B2E; font-weight: 600; }
.qr-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.qr-card {
    background: #fff; border-radius: 12px; padding: 14px;
    border: 1px solid #E8F0E0;
    transition: transform 0.2s, box-shadow 0.2s;
}
.qr-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(124,179,66,0.12); }
.qr-card-label { font-size: 13px; color: #6B7C6B; margin-bottom: 10px; font-weight: 500; }
.qr-card img {
    width: 100%; aspect-ratio: 1; object-fit: contain;
    border-radius: 8px; background: #FAFCFA; padding: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.qr-card-tip { font-size: 13px; color: #9CAF88; margin-top: 10px; }

/* 小程序推广面板：藏在右侧，导航「小程序」或大图菜单「下载原图」滑入 */
.mp-tip {
    position: fixed; right: 0; bottom: 0; z-index: 9999;
    width: 316px; max-width: calc(100% - 60px); margin: 30px; overflow: hidden;
    border: 2px solid rgba(240,240,240,0.1); border-radius: 8px;
    background-color: rgba(0,0,0,0.55);
    backdrop-filter: blur(30px) saturate(180%) brightness(80%);
    -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(80%);
    transform: translateX(calc(100% + 60px));
    transition: transform 0.35s ease-out;
}
.mp-tip.show { transform: none; }
.mp-tip img { display: block; width: 100%; height: 198px; object-fit: contain; background: #fff; }
.mp-tip-desc { margin: 11px 12px; color: #fff; font-size: 13px; line-height: 1.7; }
.mp-tip .close {
    display: block; margin: 0 12px 12px; padding: 0; border: 0; background: none;
    color: #fff; font-size: 13px; cursor: pointer; text-align: left;
}
.mp-tip .close:hover { color: #4DB6AC; }

@media (max-width: 900px) {
    .qr-modal-content { min-width: auto; }
    .qr-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .qr-modal-content { min-width: auto; padding: 20px; }
    .qr-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}