/*version:v1 — Storia unified */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

:root {
    --cover-w: 240px;
    --bg: #0b0b0d;
    --panel: #101014;
    --line: #1f2030;
    --text: #eaeaf1;
    --sub: #9aa0b7;
    --brand: #335cff;
    --radius: 14px;
    --max: 1200px;
}

html, body {
    background: var(--bg);
    color: var(--text);
    font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto
}

a {
    color: inherit;
    text-decoration: none
}

img {
    display: block;
    max-width: 100%
}

.container {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 16px
}

.page {
    max-width: var(--max);
    margin: 0 auto;
    padding: 16px
}

/* ---------------------------- header ---------------------------- */
:root {
    --hdr-bg: #0b0b0d;
    --hdr-line: #1f2030;
}

.st-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--hdr-bg);
    border-bottom: 1px solid var(--hdr-line);
}

.st-header__inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.st-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-weight: 900;
    font-size: 20px;
}

.st-logo img {
    width: 32px;
    height: 32px;
    border-radius: 6px;
}

.st-nav {
    display: flex;
    gap: 16px;
    margin-left: 8px;
}

.st-nav__item {
    color: #cfd0d9;
    font-weight: 600;
}

.st-nav__item:hover {
    color: #fff;
}

.st-btn {
    border: 1px solid transparent;
    cursor: pointer;
    color: #fff;
    font-weight: 800;
    background: transparent;
}

.st-btn--pill {
    margin-left: auto;
    height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    line-height: 36px;
    background: rgba(51, 92, 255, .12);
    color: #6b8bff;
    border-color: rgba(51, 92, 255, .25);
}

.st-btn--pill:hover {
    background: rgba(51, 92, 255, .18);
}

/* mobile header tweak */
@media (max-width: 768px) {
    .st-nav {
        display: none;
    }

    .st-logo span {
        display: none;
    }

    #search_root #st-download {
        display: none;
    }
}

/* ---------------------------- footer ---------------------------- */
.site-footer {
    background: #0b0b0d;
    border-top: 1px solid var(--line);
    padding: 28px 0;
    text-align: center;
    color: var(--sub)
}

.site-footer .container {
    max-width: var(--max)
}

/* ---------------------------- home: blocks ---------------------------- */
/* 标题条 */
.block-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 4px 12px
}

.block-title h2 {
    color: #fff;
    font-size: 18px
}

.block-title .sub {
    color: var(--sub);
    font-size: 12px
}

/* 周排行横滑 */
/* --- Weekly Ranking：纵向/网格平铺，替换原先的横向滑动样式 --- */
.weekly {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px;
}

/* 改为网格：手机1列，平板2列，桌面3列 */
.weekly-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    /* 去除横向滚动相关 */
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
}

@media (min-width: 720px) {
    .weekly-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .weekly-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

.w-card {
    scroll-snap-align: unset;
    position: relative;
    flex: none;
    width: 100%;
    display: flex;
    gap: 10px;
    background: #0f1020;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px;
    text-decoration: none;
    align-items: flex-start;
}

.w-cover {
    width: 72px;
    height: 100px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--line);
}

.w-title {
    color: #fff;
    font-size: 14px;
    line-height: 1.35;
    margin: 2px 0 6px;
    max-height: 3.7em;
    overflow: hidden;
}

#home .w-cate {
    color: #cfd0d9;
    font-size: 12px;
    line-height: 1.5;
    max-height: 3.2em;
    overflow: hidden;
}

.w-desc {
    color: #cfd0d9;
    font-size: 12px;
    line-height: 1.5;
    max-height: 3.2em;
    overflow: hidden;
}

.w-rank {
    position: absolute;
    left: 8px;
    top: 8px;
    background: linear-gradient(90deg, #6b8bff, #335cff);
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    border-radius: 999px;
    padding: 2px 8px;
}



.masonry {
    column-count: 2;
    column-gap: 14px;
    margin-top: 18px
}

.b-card {
    display: block;
    break-inside: avoid;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    margin: 0 0 14px;
    overflow: hidden
}

.b-cover {
    width: 100%;
    height: 400px;
    object-fit: cover
}

.b-body {
    padding: 12px
}

.b-title {
    color: #fff;
    font-size: 16px;
    line-height: 1.35;
    margin: 2px 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.b-desc {
    color: #cfd0d9;
    font-size: 13px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden
}

@media (min-width: 600px) {
    .masonry {
        column-count: 3
    }
}

@media (min-width: 1000px) {
    .masonry {
        column-count: 4
    }
}

.empty {
    color: #9aa0b7;
    text-align: center;
    padding: 40px 0
}

/* ---------------------------- book detail ---------------------------- */
@media (max-width: 768px) {
    :root {
        --cover-w: 120px;
        --max: 600px;
    }
}

/* 手机端 */
.head {
    display: grid;
    grid-template-columns: var(--cover-w) 1fr; /* 关键：左列改为变量宽度 */
    gap: 16px;
    padding: 16px;
}

.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius)
}

.cover {
    width: var(--cover-w);
    aspect-ratio: 3 / 4;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--line);
}

.h-title {
    font-size: 22px;
    line-height: 1.25;
    color: var(--text);
    margin: 2px 0 8px;
    word-break: break-word
}

.meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--sub);
    font-size: 13px;
    margin-bottom: 12px
}

.meta .dot::before {
    content: "•";
    margin: 0 8px;
    color: #555
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 0
}

.author {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
    margin: 8px 0 0
}

.tag {
    font-size: 12px;
    color: #c9d1ff;
    background: #181a28;
    border: 1px solid #2a2e45;
    border-radius: 999px;
    padding: 4px 10px
}

.btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.btn {
    height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #181a28;
    color: #fff;
    font-weight: 600;
    cursor: pointer
}

.btn.primary {
    background: var(--brand);
    border-color: var(--brand)
}

.tabs {
    display: flex;
    gap: 20px;
    border-bottom: 1px solid var(--line);
    padding: 0 16px;
    margin-top: 16px
}

.tab {
    padding: 12px 0;
    color: var(--sub);
    font-weight: 600;
    cursor: pointer
}

.tab.active {
    color: #fff;
    border-bottom: 2px solid var(--brand)
}

.panel {
    padding: 16px
}

.section-title {
    font-size: 16px;
    color: #fff;
    margin: 0 0 8px
}

.intro {
    color: #cfd0d9;
    line-height: 1.8;
    white-space: pre-wrap
}

.toc {
    margin-top: 8px
}

.chap-row {
    display: grid;
    grid-template-columns:1fr auto;
    gap: 8px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--line)
}

.chap-link {
    color: #e7e9ff
}

.chap-link:hover {
    text-decoration: underline
}

.chap-meta {
    color: #8f92a6;
    font-size: 12px
}

/* ========== Related books (inside About) ========== */
.rel {
    margin-top: 8px;
}

.rel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (min-width: 640px) {
    .rel-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .rel-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.rel-card {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px;
    text-decoration: none;
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.rel-card:hover {
    transform: translateY(-2px);
    border-color: #2a2e45;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}

.rel-cover {
    width: 64px;
    height: 88px;
    flex: 0 0 64px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--line);
}

.rel-body {
    min-width: 0;
}

.rel-title {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 6px;
}

.rel-sub {
    color: var(--sub);
    font-size: 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

/* layout columns for detail */
.grid {
    display: grid;
    grid-template-columns:1fr;
    gap: 16px;
    margin-top: 16px
}

@media (min-width: 1024px) {
    .grid {
    }
}

/* sticky bottom CTA (mobile) */
.sticky-cta {
    position: sticky;
    bottom: 12px;
    z-index: 5;
    display: none;
    padding: 0 16px
}

@media (max-width: 768px) {
    .sticky-cta {
        display: block
    }

    .head {
        grid-template-columns:88px 1fr
    }

    .cover {
        width: 88px;
        height: 120px
    }
}

.cta-btn {
    width: 100%;
    height: 46px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(90deg, #6b8bff, #335cff 60%, #1a3bff);
    color: #fff;
    font-weight: 800
}

/* 让顶部导航在 .page.grid 中占一整行 */
.page.grid > .b-topbar {
    grid-column: 1 / -1; /* 横跨所有列 */
    margin: 6px 0 12px; /* 去掉原来的负 margin，避免顶到 sticky header */
    padding: 0 8px;
    border-bottom: 1px solid var(--line); /* 可选：底线分隔 */
}

/* 顶部条本身 */
.b-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px; /* 用 min-height 更稳 */
    color: var(--sub);
}

/* 面包屑内容，不让长标题把布局撑坏 */
.b-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    min-width: 0; /* 允许收缩 */
}

.b-breadcrumb > * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 小屏收紧一点留白 */
@media (max-width: 768px) {
    .page.grid > .b-topbar {
        margin: 4px 0 8px;
        padding: 0 6px;
    }
}

/* ========== Reader page ========== */
.r-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 0 8px;
    margin: -8px 0 8px 0;
    color: var(--sub);
}

.r-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.r-bc-link {
    color: #cfd0d9
}

.r-bc-link:hover {
    color: #fff
}

.r-bc-sep {
    opacity: .5
}

.r-progress {
    font-size: 12px;
    color: var(--sub)
}

/* ----------------- Chapter Nav (Prev/Next) ----------------- */
.chap-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin: 8px 0 12px;
}

.chap-nav .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #181a28;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.chap-nav .btn:hover {
    background: #202336;
}

.chap-nav .btn[disabled],
.chap-nav .btn.is-disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

.chap-nav .btn:focus-visible {
    outline: 2px solid rgba(51, 92, 255, .6);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .chap-nav {
        gap: 8px;
    }

    .chap-nav .btn {
        padding: 0 12px;
    }
}

.reader {
    width: min(900px, 100%);
    margin: 0 auto;
    background: transparent;
    padding-inline: 12px;
}

@media (min-width: 1280px) {
    .reader {
        width: min(1000px, 100%);
    }
}

.r-book-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 12px 0 16px;
}

.r-cover {
    width: 250px;
    height: 320px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--line);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

.r-book-title {
    font-size: 18px;
    font-weight: 700;
    margin: 12px 0 6px;
    color: #f3f4f6;
    text-align: center;
}

.r-author {
    font-size: 14px;
    color: var(--sub);
    margin: 0 0 8px;
}

.r-watermark {
    font-size: 12px;
    color: var(--sub);
    opacity: .7;
    margin-top: 2px;
}

.r-divider {
    border: 0;
    height: 1px;
    background: var(--line);
    margin: 18px 0;
}

.r-ch-title {
    font-size: 22px;
    line-height: 1.35;
    margin: 8px 0 8px;
    color: #fff;
}

.r-editor {
    font-size: 12px;
    color: var(--sub);
    margin: -4px 0 14px;
}

.r-content {
    font-size: 18px;
    line-height: 1.9;
    color: #e9eaf1;
    margin-inline: auto;
}

.r-content p {
    margin: 1.05rem 0;
}

.r-content em, .r-content i {
    font-style: italic;
}

.r-content strong, .r-content b {
    font-weight: 700;
}

.r-content h2, .r-content h3 {
    margin: 1.2rem 0 .6rem;
}

.r-more {
    margin: 22px 0 36px;
}

.r-more-card {
    border: 1px solid var(--line);
    background: linear-gradient(180deg, #0e101a 0%, #0b0b0d 100%);
    border-radius: 16px;
    padding: 18px;
    text-align: center;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
}

.r-more-title {
    color: #fff;
    font-weight: 800;
    font-size: 18px;
}

.r-more-sub {
    color: #cfd0d9;
    margin: 6px 0 14px;
    font-size: 14px;
}

.r-more-cta {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.r-more-tip {
    color: var(--sub);
    display: block;
    margin-top: 10px;
}

.btn {
    height: 40px;
    line-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #181a28;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.btn.primary {
    background: var(--brand);
    border-color: var(--brand)
}

@media (max-width: 720px) {
    .r-ch-title {
        font-size: 20px;
    }

    .r-content {
        font-size: 17px;
    }

    .r-cover {
        width: 140px;
        height: 192px;
    }
}


/* ========== About Page ========== */
.about-page .card {
    background: linear-gradient(180deg, #0e101a 0%, #0b0b0d 100%);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
    padding: 20px;
}

.about-page .h-title {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 12px;
    color: #fff;
}

.about-page .section-title {
    font-size: 18px;
    font-weight: 700;
    margin: 14px 0 6px;
    color: #fff;
}

.about-page .intro {
    font-size: 16px;
    line-height: 1.8;
    color: #cfd0d9;
}

.about-page ul {
    margin: 6px 0 0 1.2em;
    padding: 0;
    color: #e9eaf1;
    line-height: 1.9;
}

.about-page li {
    margin-bottom: 6px;
}

/* 通用章节行 */
.chap-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
}

/* 普通章节 */
.chap-row .chap-link {
    color: #fff;
    text-decoration: none;
}

.chap-row.vip .chap-meta {
    font-size: 12px;
    font-weight: 700;
    color: #ffae00;
    background: rgba(255, 174, 0, 0.15);
    padding: 2px 6px;
    border-radius: 6px;
}

.r-content-wrap {
    position: relative;
}

.r-lock {
    position: absolute;
    inset: 0; /* 占满容器，后续子类决定具体遮挡范围 */
    pointer-events: none; /* 避免挡住滚动到上半段 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.r-content-locked {
    max-height: 600px; /* 限制高度，仅对 VIP 章节生效 */
    overflow: hidden;
}


.r-lock--half {
    top: 55%;
    background: linear-gradient(
            to bottom,
            rgba(11, 11, 13, 0) 0%,
            rgba(11, 11, 13, 0.85) 5%,
            rgba(11, 11, 13, 0.90) 10%,
            rgba(11, 11, 13, 0.95) 20%,
            rgba(11, 11, 13, 0.98) 50%,
            rgba(11, 11, 13, 1) 100%
    );
}

.r-content-wrap .r-content {
    user-select: text;
}

.r-content-wrap .r-content::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 45%;
    bottom: 0;
    pointer-events: auto;
    -webkit-user-select: none;
    user-select: none;
}

@media (max-width: 768px) {
    .r-lock--half {
        top: 40%;
    }

    .r-content-wrap .r-content::after {
        top: 40%;
    }
}

/* 分类卡片区域 */
#category_root .cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 16px;
    margin: 16px 0;
}

#category_root .cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--panel, #1e1f2b);
    border: 1px solid var(--line, #2e3148);
    border-radius: 12px;
    padding: 16px 12px;
    cursor: pointer;
    transition: all .25s ease;
    text-align: center;
    text-wrap: auto;
}

#category_root .cat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

#category_root .cat-card.is-active {
    border-color: #556bda;
    box-shadow: 0 0 0 2px rgba(85, 107, 218, .4);
}

#category_root .cat-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 8px;
}

#category_root .cat-badge {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #556bda;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

#category_root .cat-name {
    font-size: 14px;
    color: var(--text, #e0e0e0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 分类 pills */
#category_root .cat-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

#category_root .pill {
    background: var(--panel, #1e1f2b);
    border: 1px solid var(--line, #2e3148);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    color: var(--sub, #b0b3c6);
    cursor: pointer;
    transition: all .2s;
}

#category_root .pill:hover {
    color: #fff;
    border-color: #556bda;
}

#category_root .pill.is-active {
    background: #556bda;
    color: #fff;
    border-color: #556bda;
}

/* 瀑布流容器：保持已有的 masonry */
#category_root .masonry {
    column-count: 2;
    column-gap: 16px;
}

@media (min-width: 768px) {
    #category_root .masonry {
        column-count: 3;
    }
}

@media (min-width: 1200px) {
    #category_root .masonry {
        column-count: 4;
    }
}

#category_root .b-card {
    display: inline-block;
    margin: 0 0 16px;
    width: 100%;
    break-inside: avoid;
    background: var(--panel, #1e1f2b);
    border: 1px solid var(--line, #2e3148);
    border-radius: 12px;
    overflow: hidden;
    transition: all .25s ease;
}

#category_root .b-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}

#category_root .b-cover {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}

#category_root .b-body {
    padding: 10px 12px;
}

#category_root .b-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text, #fff);
    margin: 0 0 4px;
}

#category_root .b-desc {
    font-size: 13px;
    color: var(--sub, #b0b3c6);
    line-height: 1.4;
    max-height: 4.2em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sharebar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.sharebar-left {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.share_title {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

.sharebtns {
    display: inline-flex;
    gap: 8px;
}

.sharebtn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
    outline: none;
    background: #999; /* fallback */
}

.sharebtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .15);
}

/* 平台色 + 图标（用内置 emoji 简洁表示，也可换成 SVG） */
.sharebtn.fb {
    background: #1877F2;
}

.sharebtn.fb::before {
    content: "f";
    font: 600 16px/1 Arial;
}

.sharebtn.tw {
    background: #0F1419;
}

/* X */
.sharebtn.tw::before {
    content: "✖";
    font-size: 16px;
}

.sharebtn.wa {
    background: #25D366;
}

.sharebtn.wa::before {
    content: "✆";
    font-size: 16px;
}

.sharebtn.tg {
    background: #289FD9;
}

.sharebtn.tg::before {
    content: "➤";
    font-size: 16px;
}

.sharebtn.rd {
    background: #FF4500;
}

.sharebtn.rd::before {
    content: "r";
    font: 700 16px/1 Arial;
}

.sharebtn.cp {
    background: #6B7280;
}

.sharebtn.cp::before {
    content: "⧉";
    font-size: 16px;
}

.head > div {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 顶部信息在上，按钮+分享在下 */
}

.actions {
    margin-top: auto; /* 推到容器底部 */
    display: flex;
    flex-direction: column;
    gap: 8px; /* 按钮和分享之间留空 */
}

/*******footer******/
.st-footer {
    border-top: 1px solid #1f2030;
    background: #151523;
}

.st-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 16px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 24px;
}

.st-foot__logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #fff;
    font-weight: 900;
}

.st-foot__logo img {
    width: 28px;
    height: 28px;
    border-radius: 6px;
}

.st-foot__copy {
    color: #9aa0b7;
    font-size: 12px;
    margin-top: 10px;
}

.st-foot__title {
    color: #cfd0d9;
    font-weight: 800;
    margin-bottom: 8px;
}

.st-foot__link {
    color: #9aa0b7;
    text-decoration: none;
    display: block;
    margin: 6px 0;
}

.st-foot__link:hover {
    color: #fff;
}

@media (max-width: 768px) {
    .st-footer {
        display: none;
    }
}


#home .tag-grid{
    display:grid !important;
    grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important;
    gap:16px !important;
}
#home .tag-card{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-decoration:none !important;
    color:var(--text) !important;
    background:var(--panel,#1e1f2b) !important;
    border:1px solid var(--line,#2e3148) !important;
    border-radius:12px !important;
    padding:16px 12px !important;
    transition:transform .25s, box-shadow .25s, border-color .25s !important;
}
#home .tag-card:hover{ transform:translateY(-2px) !important; box-shadow:0 4px 12px rgba(0,0,0,.15) !important; }
#home .tag-card.is-active{ border-color:#556bda !important; box-shadow:0 0 0 2px rgba(85,107,218,.4) !important; }
#home .tag-name{ font-size:14px !important; font-weight:600 !important; color:var(--text,#e0e0e0) !important; }

#home .b-cat{
    display:inline-block;
    padding:4px 10px;
    font-size:12px;
    line-height:1;
    color:#c9d1ff;
    background:#181a28;
    border:1px solid #2a2e45;
    border-radius:999px;
    text-decoration:none;
    white-space:nowrap;
    vertical-align:middle;
    cursor:pointer; /* span 做跳转时给手型 */
}
#home .b-cat:hover{ color:#fff; }
#home .w-cate,.b-catline{ margin:4px 0 6px; line-height:1; }
#home .weekly .w-card > div{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:6px;
}
#home .weekly .w-title{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:2px 0 4px; }
#home .weekly .w-desc { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
/* 按钮 */
.st-search-btn{
    margin-left: 8px;
    width: 36px;height: 36px;border-radius: 50%;
    border:1px solid var(--line); background: transparent;
    color: var(--sub); display:flex;align-items:center;justify-content:center;
    cursor:pointer; transition: background .2s,color .2s,border-color .2s;
}
.st-search-btn:hover{ background: rgba(255,255,255,.06); color:#fff; border-color:#2a2e45; }

/* 弹层 */
.st-search{ position: fixed; inset:0; z-index: 1000; display:none; }
.st-search.is-open{ display:block; }
.st-search__mask{
    position:absolute; inset:0; backdrop-filter: blur(2px);
    background: rgba(0,0,0,.35);
}

/* 容器 */
.st-search__wrap{
    position: relative; max-width: min(960px, 92vw); margin: 48px auto 0;
    background: var(--panel); border:1px solid var(--line); border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

/* 输入条 */
.st-search__bar{
    position: sticky; top: 0;
    display:flex; align-items:center; gap:10px;
    height: 56px; padding: 0 12px 0 16px;
    border-bottom:1px solid var(--line);
    border-top-left-radius:14px; border-top-right-radius:14px;
    background: #0f1016;
}
.st-search__icon{ color:#98a2b3; flex:0 0 auto; }
.st-search__input{
    flex:1; height:40px; border:none; background:transparent; color:#fff; font-size:16px;
    outline:none;
}
.st-search__close{
    width:32px; height:32px; border-radius:50%; border:1px solid var(--line);
    background: transparent; color:#cfd0d9; cursor:pointer;
}
.st-search__close:hover{ background:#1a1d2b; color:#fff; }

/* 面板区 */
.st-search__panel{ padding:16px 18px 18px; }
.st-search__section{ margin-bottom:16px; }
.st-search__title{ color:#cfd0d9; font-weight:800; margin-bottom:10px; }
.st-search__title--row{ display:flex; align-items:center; justify-content:space-between; }

.st-search__list{ display:grid; grid-template-columns:1fr; gap:8px; }
@media (min-width:720px){ .st-search__list{ grid-template-columns:1fr 1fr; } }

.st-search__item{
    width:100%; text-align:left; padding:10px 12px; border-radius:10px;
    background:#131425; border:1px solid #22243a; color:#eaeaf1; cursor:pointer;
}
.st-search__item:hover{ background:#171a2e; border-color:#2a2e45; }

.st-search__chips{ display:flex; flex-wrap:wrap; gap:8px; }
.st-search__chip{
    padding:6px 12px; border-radius:999px; background:#1a1d2b; color:#cfd0d9;
    border:1px solid #2a2e45; cursor:pointer; font-size:13px;
}
.st-search__chip:hover{ color:#fff; border-color:#556bda; }

.st-search__clear{
    background:transparent; border:none; color:#7aa2ff; cursor:pointer; font-weight:700;
}
.st-search__hint{ color:#9aa0b7; font-size:12px; margin-top:6px; }
body.st-no-scroll{ overflow:hidden; }
#home .tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 14px;
    font-weight: 500;
    color: #c9d1ff;

    background: #181a28;
    border: 1px solid #2a2e45;
    border-radius: 999px;

    padding: 6px 14px;                 /* 改成上下 6px，左右 14px */
    white-space: nowrap;               /* 禁止换行 */
    cursor: pointer;
    transition: all 0.2s ease;
}

st-search-form { margin-left: auto; }
.st-search__form{
    display:flex; align-items:center; gap:8px;
    width:min(560px, 60vw);
    background:#11131b; border:1px solid #2a2e45; border-radius:999px;
    padding:6px 10px;
}
.st-search__iconbtn{ display:inline-flex; align-items:center; justify-content:center;
    width:28px; height:28px; border:0; background:transparent; color:#9aa0b7; cursor:pointer;
}
.st-search__iconbtn:hover{ color:#cfd0d9; }

.st-search__input{
    flex:1; background:transparent; border:0; outline:none; color:#fff;
    font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto;
}
.st-search__input::placeholder{ color:#7f86a3; }

.st-search__clear{
    display:none; /* 有内容时用 JS 显示 */
    width:26px; height:26px; border:0; border-radius:999px;
    background:#1d2234; color:#aeb5d4; cursor:pointer;
}
.st-search__clear:hover{ background:#242a40; color:#fff; }

@media (max-width: 768px){
    .st-search__form{ width: 100%; }
}

.st-search__confirm {
    background: #3b82f6; /* 蓝色，可按品牌色调整 */
    color: white;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    margin-left: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s;
}
.st-search__confirm:hover {
    background: #2563eb;
}
.rel-grid {
    display: grid;
    grid-template-columns: 1fr !important;  /* 关键：强制单列 */
    gap: 10px;
}

.rel-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
}
.rel-cover {
    width: 56px;
    height: 80px;
    flex: 0 0 56px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--line);
}
.rel-title {
    font-size: 13px;
    line-height: 1.35;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.rel-sub {
    font-size: 12px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 480px) {
    .rel-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px;
    }
    .rel-card {
        flex-direction: column;
        align-items: stretch;
    }
    .rel-cover {
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 4;
        flex: none;
    }
    .rel-title { font-size: 14px; -webkit-line-clamp: 2; }
    .rel-sub   { -webkit-line-clamp: 3; }
}

@media (min-width: 900px) {
    .rel-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    html, body { max-width: 100%; overflow-x: hidden; }

    #root,
    .page, .grid, .col,
    .card, .head, .tabs, .panel,
    .b-topbar, .sticky-cta {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .head > div,
    .b-breadcrumb,
    .meta, .actions,
    .rel-body {
        min-width: 0;
    }

    .h-title, .section-title,
    .intro, .rel-title, .rel-sub, .chap-link {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    img, .cover, .rel-cover { max-width: 100%; height: auto; }

    .rel-grid {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 10px;
    }
}

@media (min-width: 480px) {
    .rel-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 12px; }
    .rel-card { flex-direction: column; align-items: stretch; }
    .rel-cover { width: 100%; height: auto; aspect-ratio: 3 / 4; flex: none; }
}
@media (min-width: 900px) {
    .rel-grid { grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
}

@media (max-width: 768px) {
    .sharebar {
        display: flex;
        flex-wrap: wrap;         /* 允许换行 */
        gap: 8px 10px;           /* 行间距更紧凑 */
        max-width: 100%;
    }

    .sharebar-left {
        flex: 0 0 auto;          /* 左侧小标题占自身宽度 */
        min-width: 0;
    }

    .share_title {
        font-size: 13px;
        white-space: nowrap;     /* 标题不折行，避免挤压 */
    }

    .sharebtns {
        display: flex;
        flex-wrap: wrap;         /* 关键：按钮可折到下一行 */
        gap: 8px;
        flex: 1 1 100%;          /* 第二行占满宽度 */
        min-width: 0;
        max-width: 100%;
    }

    .sharebtn {
        flex: 0 0 34px;          /* 固定圆点尺寸，不被压扁 */
        width: 34px; height: 34px;
    }
}

/* 容器布局 */
.weekly2-row{
    display:grid;
    grid-template-columns: 480px 1fr; /* 左大右自适应 */
    gap:16px;
}
@media (max-width: 1024px){
    .weekly2-row{ grid-template-columns: 1fr; }
}

/* 左侧大卡轮播 */
/* --- Weekly3 (左侧三本叠放) --- */
.weekly3-left{
    position:relative;
    border:1px solid var(--line);
    border-radius:12px;
    background: radial-gradient(120% 120% at 50% 0%, #2a2232, #1a1722 60%, #111420 100%);
    overflow:hidden;
    min-height:300px;
}

.w3-slide{
    position:absolute; inset:0;
    display:block;
    padding:14px 14px 90px;               /* 预留底部文案区 */
    transition: transform .45s ease, opacity .35s ease, filter .35s ease;
    will-change: transform, opacity;
    opacity:0; pointer-events:none;
}
.w3-cover{
    position:absolute; left:50%; top:22px;
    width:min(46%, 280px); aspect-ratio:3/4; transform: translateX(-50%);
    border-radius:12px; border:1px solid rgba(255,255,255,.12);
    box-shadow: 0 16px 48px rgba(0,0,0,.45);
    object-fit:cover;
}
.w3-mask{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.75) 100%);
    pointer-events:none;
}
.w3-info{
    position:absolute; left:16px; right:16px; bottom:14px;
    color:#fff;
}
.w3-title{ font-size:20px; font-weight:800; margin:2px 0 6px; }
.w3-meta{ font-size:13px; color:#cfd0d9; margin-bottom:6px; }
.w3-desc{
    font-size:13px; color:#d7daf5; line-height:1.6;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* 三态：prev / active / next（只显示三本） */
.w3-slide.is-active{
    opacity:1; pointer-events:auto;
    transform: translateX(0) scale(1);
    z-index:3;
}
.w3-slide.is-prev{
    opacity:.9; transform: translateX(-24%) scale(.92);
    filter: saturate(.85) brightness(.92);
    z-index:2;
}
.w3-slide.is-next{
    opacity:.9; transform: translateX(24%) scale(.92);
    filter: saturate(.85) brightness(.92);
    z-index:2;
}

/* 动画方向：统一看起来是“向左滑” */
.weekly3-left.is-anim-left .w3-slide.is-active{ transition-timing-function:cubic-bezier(.22,.61,.36,1); }
.wf-slide{
    position:absolute; inset:0;
    display:block;
    opacity:0; transform: scale(1.02);
    transition: opacity .45s ease, transform .6s ease;
}
.wf-slide.is-active{
    opacity:1; transform: scale(1);
    pointer-events:auto;
}
.wf-bg{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover;
    filter: saturate(0.9) brightness(0.8);
}
.wf-mask{
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(0,0,0,.0) 30%, rgba(0,0,0,.65) 100%);
}
.wf-body{
    position:absolute; left:16px; right:16px; bottom:14px;
    color:#fff;
}
.wf-title{
    font-size:20px; line-height:1.25; margin:4px 0 6px; font-weight:800;
    text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.wf-meta{
    font-size:13px; color:#cfd0d9; margin-bottom:6px
}
.wf-desc{
    font-size:13px; color:#d7daf5; line-height:1.6;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* 圆点 */
.wf-dots{
    position:absolute; left:12px; bottom:12px;
    display:flex; gap:8px; z-index:2;
}
.wf-dot{
    width:8px; height:8px; border-radius:50%;
    border:0; background:rgba(255,255,255,.35); cursor:pointer;
    transition: transform .2s, background .2s;
}
.wf-dot.is-active{ background:#fff; transform:scale(1.2); }

/* 右侧小卡 */
.weekly2-right{
    border-radius:12px;
}
.weekly2-grid{
    display:grid;
    grid-template-columns: repeat(6, minmax(0,1fr));
    gap:12px;
}
@media (max-width: 1280px){ .weekly2-grid{ grid-template-columns: repeat(5, minmax(0,1fr)); } }
@media (max-width: 1024px){ .weekly2-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 640px){  .weekly2-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 420px){  .weekly2-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

.w2-card{
    display:flex; flex-direction:column; gap:6px;
}
.w2-cover{
    width:100%; aspect-ratio:3/4; object-fit:cover;
    border-radius:10px; border:1px solid var(--line);
    background:#111320;
}
.w2-title{
    font-size:13px; color:#fff; line-height:1.35;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.w2-sub{
    font-size:12px; color:#9aa0b7;
}

.w-rate {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 4px;
    color: #ffd166;
    font-weight: 700;
    font-size: 13px;
}

.w-rate { font-size: 12px; }
.rate-star {
    width: 14px;
    height: 14px;
    display: inline-block;
    fill: currentColor;
}

/* 详情页评分 */
.rate{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin:10px 0 4px;
    padding:6px 0;
}

.rate-stars{
    position:relative;
    display:inline-block;
    font-size:18px;
    line-height:1;
    letter-spacing:2px;
    color:#9aa0b7;
    min-width:110px;
}
.rate-stars::before{
    content:"★★★★★";
    opacity:.35;
}
.rate-stars::after{
    content:"★★★★★";
    position:absolute; inset:0 auto 0 0;
    color:#ffd166;
    width:var(--p, 0%);
    overflow:hidden;
}

.rate-num{
    font-weight:800;
    color:#fff;
}
.rate-count{
    color:#9aa0b7;
    font-size:13px;
}

/* 容器：上舞台 + 下信息栏，天然不重叠 */
.weekly3-left{
    --stageH: 320px;   /* 封面舞台高度 */
    --gap: 14px;       /* 舞台与信息栏间距 */
    border: 1px solid var(--line);
    background: #0f1020;
    border-radius: 12px;
    padding: 14px;
}

/* 舞台区域 */
.w3-stage{
    position: relative;
    height: var(--stageH);
    overflow: visible;
    border-radius: 12px;
}

/* 三张封面：绝对定位在舞台内部 */
.w3-slide{
    position: absolute; inset: 0;
    display: grid; place-items: center;
    opacity: 0; pointer-events: none;
    transition: transform .45s ease, opacity .35s ease, filter .35s ease;
}
.w3-cover{
    height: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0,0,0,.45);
}

/* 三态：让左右两张露出但不遮挡过多 */
.w3-slide.is-active{
    z-index: 3; opacity: 1; transform: translateX(0) scale(1); pointer-events: auto;
}
.w3-slide.is-prev{
    z-index: 2; opacity: .8; transform: translateX(-28%) scale(.9);
    filter: brightness(.95) saturate(.95); pointer-events: auto;
}
.w3-slide.is-next{
    z-index: 2; opacity: .8; transform: translateX( 28%) scale(.9);
    filter: brightness(.95) saturate(.95); pointer-events: auto;
}

/* 信息栏：单独一条，不与封面重叠 */
.w3-infoBar{
    display: block;
    margin-top: var(--gap);
    text-decoration: none;
    color: #fff;
    background: rgba(6,7,12,.6);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,.28);
}
.w3-title{ font-size: 20px; font-weight: 800; line-height: 1.25; margin-bottom: 6px; }
.w3-meta { font-size: 13px; color:#cfd0d9; margin-bottom: 6px; }
.w3-desc {
    font-size: 13px; color:#d7daf5; line-height: 1.6;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

@media (max-width: 640px){
    .weekly3-left{ --stageH: 260px; }
    .w3-title{ font-size: 18px; }
}

.page.grid { grid-template-columns: 1fr; }

.page.grid .col {
    width: 100%;
    margin: 0;
}

.page.grid { --cover-w: 170px; }
@media (min-width: 1280px) { .page.grid { --cover-w: 300px; } }
@media (max-width: 768px)  { .page.grid { --cover-w: 120px; } }

.panel .intro { max-width: 72ch; }

.head > div { max-width: 100%; }
/* === Locale switcher styles (scoped) === */
.st-locale { position: relative; }
.st-locale__btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line, #23242a);
    background: transparent; color: inherit; font-weight: 600; cursor: pointer;
}
.st-locale__btn:hover { background: rgba(255,255,255,.06); }
.st-locale__flag { font-size: 16px; line-height: 1; }
.st-locale__caret { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid currentColor; opacity:.7; }
.st-locale__panel {
    position: absolute; top: 100%; right: 0; z-index: 40; min-width: 280px;
    margin-top: 8px; padding: 10px; border-radius: 12px; border: 1px solid var(--line, #23242a);
    background: #0f1014; box-shadow: 0 8px 24px rgba(0,0,0,.45); display: none;
}
.st-locale.is-open .st-locale__panel { display: block; }
.st-locale__title { font-size: 12px; letter-spacing: .4px; opacity:.8; margin: 4px 6px 8px; }
.st-locale__list { display: grid; grid-template-columns: 1fr; gap: 6px; }
.st-locale__item {
    display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px;
    border: 1px solid transparent; text-decoration: none; color: inherit; background: transparent;
}
.st-locale__item:hover { background: rgba(255,255,255,.06); border-color: var(--line, #23242a); }
.st-locale__meta { display:flex; flex-direction:column; }
.st-locale__name { font-weight: 700; }
.st-locale__sub { font-size: 12px; opacity:.75; }
.st-locale__current { margin-left: 6px; font-size: 12px; opacity: .75; }

/* Mobile trigger icon */
.st-locale__iconbtn {
    display: none; border: 1px solid var(--line, #23242a); background: transparent; color: inherit;
    border-radius: 12px; padding: 8px; line-height: 0; cursor: pointer;
}
.st-locale__iconbtn svg { width: 20px; height: 20px; }

/* Mobile sheet */
.st-locale-sheet { position: fixed; inset: 0; display: none; z-index: 60; }
.st-locale-sheet.is-open { display: block; }
.st-locale-sheet__mask { position:absolute; inset:0; background: rgba(0,0,0,.5); }
.st-locale-sheet__panel {
    position:absolute; left:0; right:0; bottom:0; background:#0f1014; border-top-left-radius:16px; border-top-right-radius:16px;
    padding:14px 14px 18px; max-height:70vh; overflow:auto; box-shadow: 0 -8px 24px rgba(0,0,0,.45);
}
.st-locale-sheet__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.st-locale-sheet__title { font-weight:800; }
.st-locale-sheet__close { border: none; background: transparent; color: inherit; font-size: 22px; line-height: 1; padding: 6px 8px; cursor: pointer; }

/* Responsive: desktop shows full dropdown, mobile shows icon */
@media (max-width: 768px) {
    .st-locale { display: none; }
    .st-locale__iconbtn { display: inline-flex; }
}

.st-header__inner .st-locale {
    margin-left: auto;   /* 把右侧空间推开 */
    order: 10;           /* 排在下载按钮前 */
}
.st-header__inner #st-download {
    margin-left: 0;      /* 移除原来的 auto */
    order: 11;           /* 排在 locale 之后 */
}

@media (max-width: 768px) {
    .st-header__inner .st-locale {
        display: none;
    }
    .st-header__inner #st-download {
        margin-left: auto;
    }
}

.st-header__inner{
    flex-wrap: nowrap;            /* 不换行 */
}
.st-header__inner > *{
    min-width: 0;                 /* 允许子项收缩，避免被撑换行 */
    flex-shrink: 1;
}
.st-nav{
    margin-right: auto;           /* 把后面的控件（搜索/语言/下载）推到右侧 */
}
.st-header__inner .st-locale{
    margin-left: 0;
    order: 10;                    /* 在下载按钮之前 */
}
.st-header__inner #st-download{
    order: 11;
    white-space: nowrap;          /* 按钮文字不换行，避免拉高行高导致掉行 */
    flex: 0 0 auto;
}
@media (max-width: 1200px){
    .st-header__inner #st-download{
        padding: 0 12px;
    }
}
@media (max-width: 768px){
    .st-header__inner .st-locale{ display: none; }
    .st-header__inner #st-download{ margin-left: auto; }
}