/* ==========================================================
   古文书斋 · 前台样式 v3（Vue 3）
   暖纸底 + 米白书页 + 宋体正文
   阅读区按「长时间看不累」调：字号 17.5 / 行高 2.15 / 字距 0.03em
   ========================================================== */

:root {
    /* 底色：取自古文岛的暖灰米，比正文区明显深一档，把书页衬出来 */
    --paper: #D2D0B9;
    --paper-2: #C7C5AC;
    /* 书页：偏中性的米白，不黄不白 */
    --panel: #F2F0E1;
    --panel-2: #EAE8D5;
    /* 文字：深墨但不到纯黑，长文阅读不刺 */
    --ink: #2E2E28;
    --ink-2: #4C4A40;
    --ink-3: #63604F;
    /* 线条 */
    --line: #D3D1BC;
    --line-soft: #E2E0CE;
    /* 主色：译文绿（与古文岛一致） */
    --green: #4E7F5E;
    --green-2: #3C6549;
    --green-soft: #EAF0E7;
    --accent: #8C6239;
    --red: #A33A2B;

    --radius: 5px;
    --shadow-sm: 0 1px 2px rgba(58, 54, 38, .06), 0 8px 20px -14px rgba(58, 54, 38, .3);
    --shadow: 0 1px 2px rgba(72, 62, 40, .05), 0 12px 30px -20px rgba(72, 62, 40, .3);
    --shadow-lg: 0 2px 6px rgba(72, 62, 40, .06), 0 24px 60px -28px rgba(72, 62, 40, .42);

    --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, "SimSun", "Microsoft YaHei", serif;
    --sans: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;

    /* 阅读区字号，阅读页的「字号」按钮会改它 */
    --read-size: 17.5px;
    --read-lh: 2.15;

    /* 字重补偿：本机宋体（STSong/SimSun）只有常规一档，
       font-weight 400→500 没有字形可用、600 又直接跳到粗体，
       所以用极细描边把笔画加厚约 40%，得到介于两者之间的「中粗」。
       想再调浓淡就改这一个值（.2 轻 / .3 中 / .4 重）。 */
    --ink-stroke: .3px;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

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

body {
    background-color: var(--paper);
    background-image:
        radial-gradient(circle at 12% 4%, rgba(255, 255, 255, .1), transparent 50%),
        radial-gradient(circle at 88% 98%, rgba(255, 255, 255, .06), transparent 45%);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 15.5px;
    line-height: 1.9;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -webkit-text-stroke: var(--ink-stroke) currentColor;
}

/* 本身就是 600/700 的元素不要再叠描边，否则会糊成一团 */
h1, h2, h3, h4, h5, h6,
.brand-logo,
.nav a.active,
.section-head h2,
b, strong,
button, .btn,
input, textarea, select,
.badge, .tag, .chip,
.user-menu-head {
    -webkit-text-stroke: 0;
}

/* 10–12px 的小字描边占比过大，会显得发虚，还原成常规 */
.brand-sub,
.item-meta,
.meta,
.foot,
.footer,
.pager,
.breadcrumb {
    -webkit-text-stroke: 0;
}

a {
    color: var(--green-2);
    text-decoration: none;
    transition: color .16s ease;
}

a:hover {
    color: var(--accent);
}

img {
    max-width: 100%;
    border: 0;
}

button {
    font-family: inherit;
}

::selection {
    background: #D8E4D5;
    color: var(--ink);
}

/* ---------------- 启动占位 ---------------- */

.boot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    gap: 10px;
}

.boot-mark {
    font-size: 26px;
    letter-spacing: .3em;
    color: var(--ink-2);
}

.boot-tip {
    font-size: 13px;
    letter-spacing: .18em;
    color: var(--ink-3);
}

/* ---------------- 顶部 ---------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(235, 234, 216, .95);
    border-bottom: 1px solid var(--line);
    backdrop-filter: saturate(140%) blur(8px);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 26px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
    height: 62px;
}

.brand {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-shrink: 0;
}

.brand-logo {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--ink);
}

.brand-sub {
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: .22em;
    color: var(--ink-3);
}

.nav {
    display: flex;
    gap: 24px;
    flex-shrink: 0;
}

.nav a {
    position: relative;
    padding: 4px 0;
    font-size: 15.5px;
    letter-spacing: .12em;
    color: var(--ink-2);
}

.nav a:hover {
    color: var(--green-2);
}

.nav a.active {
    color: var(--ink);
    font-weight: 600;
}

.nav a.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -3px;
    width: 18px;
    height: 2px;
    margin-left: -9px;
    border-radius: 2px;
    background: var(--green);
}

.search-form {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
    max-width: 300px;
    margin-left: auto;
    height: 34px;
    padding: 0 4px 0 14px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: var(--panel);
    transition: border-color .16s ease, box-shadow .16s ease;
}

.search-form:focus-within {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(78, 127, 94, .1);
}

.search-form input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    font-family: var(--serif);
    font-size: 13.5px;
}

.search-form input::placeholder {
    color: #93897A;
}

.search-form button {
    flex-shrink: 0;
    padding: 0 12px;
    height: 26px;
    border: 0;
    border-radius: 13px;
    background: var(--green);
    color: #FBFDF9;
    font-family: var(--serif);
    font-size: 12.5px;
    letter-spacing: .1em;
    cursor: pointer;
    transition: background-color .16s ease;
}

.search-form button:hover {
    background: var(--green-2);
}

.header-user {
    position: relative;
    flex-shrink: 0;
}

.user-login {
    padding: 5px 14px 6px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--panel);
    color: var(--ink-2);
    font-family: var(--serif);
    font-size: 13px;
    letter-spacing: .06em;
    cursor: pointer;
    transition: border-color .16s ease, color .16s ease;
}

.user-login:hover {
    border-color: var(--green);
    color: var(--green-2);
}

.user-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px 10px 3px 3px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--panel);
    color: var(--ink-2);
    font-family: var(--serif);
    font-size: 13px;
    cursor: pointer;
    transition: border-color .16s ease;
}

.user-chip:hover {
    border-color: var(--green);
}

.user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--green);
    color: #FBFDF9;
    font-size: 13px;
}

.member-badge {
    padding: 1px 6px 2px;
    border-radius: 4px;
    background: var(--green-soft);
    color: var(--green-2);
    font-size: 10.5px;
    letter-spacing: .06em;
}

.member-badge.off {
    background: #DEDCC7;
    color: var(--ink-3);
}

.user-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 186px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.user-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-menu-head {
    padding: 4px 8px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

.user-menu-sub {
    padding: 1px 8px 8px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 11.5px;
    color: var(--ink-3);
}

.user-menu button {
    display: block;
    width: 100%;
    padding: 7px 8px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--ink-2);
    font-family: var(--serif);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.user-menu button:hover {
    background: var(--panel-2);
}

.user-menu .user-menu-vip {
    color: var(--accent);
}

.header-admin {
    flex-shrink: 0;
    font-size: 12.5px;
    color: var(--ink-3);
    letter-spacing: .06em;
}

.header-admin:hover {
    color: var(--accent);
}

/* ---------------- 布局 ---------------- */

.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 26px 24px 60px;
}

.layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 268px;
    gap: 26px;
    align-items: start;
}

.main-col {
    min-width: 0;
}

.side-col {
    position: sticky;
    top: 84px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fade-in {
    animation: fadeUp .28s ease-out both;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------------- 卡片 ---------------- */

.card {
    padding: 22px 26px 26px;
    margin-bottom: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow-sm);
}

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--line-soft);
}

.section-head h2 {
    margin: 0;
    font-size: 16.5px;
    font-weight: 600;
    letter-spacing: .16em;
    color: var(--ink);
}

.section-head h2::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 13px;
    margin-right: 9px;
    vertical-align: -1px;
    border-radius: 2px;
    background: var(--green);
}

.section-head .more,
.section-head > span {
    font-size: 12.5px;
    color: var(--ink-3);
    letter-spacing: .04em;
}

/* ---------------- 首页 hero ---------------- */

.hero {
    padding: 40px 26px 34px;
    margin-bottom: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.hero h1 {
    margin: 0 0 6px;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: .28em;
    text-indent: .28em;
    color: var(--ink);
}

.hero .slogan {
    margin: 0 0 22px;
    font-size: 13.5px;
    letter-spacing: .3em;
    text-indent: .3em;
    color: var(--ink-3);
}

.hero-search {
    display: flex;
    align-items: center;
    max-width: 470px;
    margin: 0 auto;
    padding: 0 5px 0 18px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--panel-2);
    transition: border-color .16s ease, box-shadow .16s ease;
}

.hero-search:focus-within {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(78, 127, 94, .1);
}

.hero-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    font-family: var(--serif);
    font-size: 14.5px;
}

.hero-search input::placeholder {
    color: #93897A;
}

.hero-search button {
    flex-shrink: 0;
    height: 34px;
    padding: 0 20px;
    border: 0;
    border-radius: 17px;
    background: var(--green);
    color: #FBFDF9;
    font-family: var(--serif);
    font-size: 13.5px;
    letter-spacing: .14em;
    cursor: pointer;
    transition: background-color .16s ease;
}

.hero-search button:hover {
    background: var(--green-2);
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: 44px;
    margin-top: 26px;
}

.hero-stats > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hero-stats b {
    font-size: 19px;
    font-weight: 600;
    color: var(--ink);
}

.hero-stats span {
    font-size: 11.5px;
    letter-spacing: .12em;
    color: var(--ink-3);
}

/* ---------------- 列表 ---------------- */

.item-list {
    display: flex;
    flex-direction: column;
}

.item {
    padding: 15px 0;
    border-bottom: 1px dashed var(--line-soft);
}

.item:first-child {
    padding-top: 4px;
}

.item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.item-title {
    font-size: 17px;
    line-height: 1.7;
    letter-spacing: .03em;
    color: var(--ink);
}

.item-title a {
    color: var(--ink);
}

.item-title a:hover {
    color: var(--green-2);
}

.item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--ink-3);
}

.item-meta .author {
    color: var(--ink-2);
}

.item-meta .dot {
    color: var(--line);
}

.item-text {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.95;
    color: var(--ink-2);
}

.item-text.full {
    margin-top: 10px;
    padding: 14px 16px;
    border-radius: 5px;
    background: var(--panel-2);
    white-space: pre-wrap;
}

.clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 9px;
}

.tag-pill {
    display: inline-block;
    padding: 2px 9px 3px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--panel-2);
    color: var(--ink-3);
    font-size: 11.5px;
    letter-spacing: .04em;
    transition: border-color .16s ease, color .16s ease;
}

.tag-pill:hover {
    border-color: var(--green);
    color: var(--green-2);
}

.tag-pill.active {
    border-color: var(--green);
    background: var(--green-soft);
    color: var(--green-2);
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
}

.filter-bar .label {
    margin-right: 2px;
    font-size: 12.5px;
    color: var(--ink-3);
}

/* 分类展开后的分组：每个部占一整行，左边是部名，右边是它下面的类 */
.cat-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 2px 0;
}

.cat-bu {
    flex: 0 0 74px;
    font-size: 12px;
    letter-spacing: .1em;
    color: var(--ink-2);
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
}

.cat-bu i {
    margin-left: 3px;
    font-style: normal;
    font-size: 11px;
    opacity: .6;
}

.cat-bu:hover, .cat-bu.active {
    color: var(--green-2);
    border-bottom-color: var(--green);
}

.cat-more {
    margin-left: 2px;
    font-size: 12px;
    color: var(--green-2);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}

.cat-more:hover { text-decoration: underline; }

.cat-more .arw {
    font-size: 10px;
    opacity: .8;
}

@media (max-width: 640px) {
    .cat-bu { flex-basis: 100%; margin-top: 4px; }
}

/* ---------------- 分页 ---------------- */

.pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--line-soft);
}

.pager a,
.pager span {
    min-width: 30px;
    padding: 3px 9px 4px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--panel);
    font-size: 13px;
    text-align: center;
    color: var(--ink-2);
}

.pager a:hover {
    border-color: var(--green);
    color: var(--green-2);
}

.pager .current {
    border-color: var(--green);
    background: var(--green);
    color: #FBFDF9;
}

.pager .disabled {
    color: #A9A08C;
    background: transparent;
}

/* ---------------- 空 / 错 / 骨架 ---------------- */

.empty {
    padding: 44px 0;
    text-align: center;
    color: var(--ink-3);
    font-size: 13.5px;
    letter-spacing: .06em;
}

.empty .icon {
    display: block;
    margin-bottom: 8px;
    font-size: 22px;
    opacity: .4;
}

.error-box {
    padding: 40px 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    text-align: center;
    color: var(--ink-2);
}

.error-box b {
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
    letter-spacing: .1em;
}

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

.sk-line {
    height: 13px;
    margin-bottom: 14px;
    border-radius: 3px;
    background: linear-gradient(90deg, #DEDCC8 25%, #EBE9D6 50%, #DEDCC8 75%);
    background-size: 400% 100%;
    animation: shimmer 1.3s infinite linear;
}

.sk-line.tall {
    height: 26px;
}

.sk-line.w40 {
    width: 40%;
}

.sk-line.w70 {
    width: 70%;
}

.sk-line.w90 {
    width: 90%;
}

@keyframes shimmer {
    from {
        background-position: 100% 0;
    }
    to {
        background-position: 0 0;
    }
}

/* ---------------- 面包屑 ---------------- */

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    font-size: 12.5px;
    color: var(--ink-3);
}

.breadcrumb a {
    color: var(--ink-3);
}

.breadcrumb a:hover {
    color: var(--green-2);
}

.breadcrumb .sep {
    color: #BDB49E;
}

/* 收起侧边推荐栏（详情页 / 阅读页）。选择记在 localStorage，见 toggleSide() */
.side-toggle {
    margin-left: auto;
    padding: 3px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--ink-3);
    font-family: inherit;
    font-size: 12px;
    line-height: 1.7;
    white-space: nowrap;
    /* 同 .fc-wx：button 被全局重置了描边，12px 小字没描边会发虚 */
    -webkit-text-stroke: var(--ink-stroke) currentColor;
    cursor: pointer;
    transition: color .16s ease, border-color .16s ease, background .16s ease;
}

.side-toggle:hover {
    color: var(--green-2);
    border-color: var(--green-2);
    background: var(--panel);
}

.layout.no-side {
    grid-template-columns: minmax(0, 1fr);
}

.layout.no-side .side-col {
    display: none;
}

/* ---------------- 诗文网格 ---------------- */

.poem-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.poem-card {
    padding: 16px 18px;
    border: 1px solid var(--line-soft);
    border-radius: 5px;
    background: var(--panel-2);
    transition: border-color .16s ease, background-color .16s ease;
}

.poem-card:hover {
    border-color: var(--line);
    background: #E9E7D4;
}

.poem-card h3 {
    margin: 0 0 3px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .04em;
}

.poem-card h3 a {
    color: var(--ink);
}

.poem-card h3 a:hover {
    color: var(--green-2);
}

.poem-card .meta {
    font-size: 11.5px;
    color: var(--ink-3);
}

.poem-card .excerpt {
    margin-top: 7px;
    font-size: 13.5px;
    line-height: 1.95;
    color: var(--ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------------- 章节网格 ---------------- */

.chapter-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px 10px;
}

.chapter-grid a {
    display: flex;
    align-items: baseline;
    gap: 5px;
    padding: 7px 9px;
    border-radius: 4px;
    color: var(--ink-2);
    font-size: 13.5px;
    line-height: 1.6;
    transition: background-color .14s ease, color .14s ease;
}

.chapter-grid a:hover {
    background: var(--green-soft);
    color: var(--green-2);
}

.chapter-grid .no {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--ink-3);
}

/* ---------------- 作者 ---------------- */

.author-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.author-card {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    border: 1px solid var(--line-soft);
    border-radius: 5px;
    background: var(--panel-2);
    transition: border-color .16s ease;
}

.author-card:hover {
    border-color: var(--line);
}

.author-card .name {
    display: block;
    font-size: 14.5px;
    color: var(--ink);
}

.author-card .dyn {
    display: block;
    font-size: 11.5px;
    color: var(--ink-3);
}

.avatar,
.avatar-lg,
.avatar-ph,
.avatar-lg-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--green-soft);
    color: var(--green-2);
    object-fit: cover;
}

.avatar,
.avatar-ph {
    width: 34px;
    height: 34px;
    font-size: 14px;
}

.avatar-lg,
.avatar-lg-ph {
    width: 62px;
    height: 62px;
    font-size: 24px;
}

.author-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.author-head h1 {
    margin: 0 0 5px;
    font-size: 24px;
    letter-spacing: .12em;
}

.pills {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.pills span {
    padding: 1px 9px 2px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--panel-2);
    font-size: 11.5px;
    color: var(--ink-3);
}

.author-bio {
    margin: 0;
    font-size: 14.5px;
    line-height: 2;
    color: var(--ink-2);
    text-align: justify;
}

/* ---------------- 详情 ---------------- */

.detail-card {
    padding: 40px 52px 34px;
    margin-bottom: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow-sm);
}

.detail-title {
    margin: 0 0 12px;
    font-size: 27px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: .14em;
    text-align: center;
    color: var(--ink);
}

.detail-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 26px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 13px;
    color: var(--ink-3);
}

.detail-meta a {
    color: var(--ink-2);
}

.detail-meta a:hover {
    color: var(--green-2);
}

.detail-meta .dyn {
    color: var(--ink-3);
}

/* 正文：长文阅读的核心参数 */
.detail-content {
    font-size: var(--read-size);
    line-height: var(--read-lh);
    letter-spacing: .03em;
    color: var(--ink);
}

.detail-content p {
    margin: 0 0 .38em;
    text-align: justify;
    text-indent: 2em;
    word-break: break-word;
}

.detail-content p:last-child {
    margin-bottom: 0;
}

.detail-content.prose p {
    margin-bottom: .5em;
}

.detail-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
    margin-top: 26px;
    padding-top: 16px;
    border-top: 1px solid var(--line-soft);
}

/* 译文 / 注释 / 赏析 */
.note-block {
    padding: 20px 26px;
    margin-bottom: 14px;
    border: 1px solid var(--line-soft);
    border-left: 3px solid var(--green);
    border-radius: 0 5px 5px 0;
    background: var(--panel);
}

.note-block h3 {
    margin: 0 0 8px;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .2em;
    color: var(--green-2);
}

.note-text {
    font-size: 15px;
    line-height: 2;
    letter-spacing: .02em;
    color: var(--ink-2);
    text-align: justify;
    white-space: pre-wrap;
}

/* 名句详情 */
.quote-hero {
    text-align: center;
}

.quote-hero .big {
    font-size: 25px;
    line-height: 1.95;
    letter-spacing: .1em;
    color: var(--ink);
}

.quote-hero .from {
    margin-top: 14px;
    font-size: 13.5px;
    color: var(--ink-3);
}

.quote-hero .from a {
    color: var(--ink-2);
}

/* ==========================================================
   阅读页（古籍章节）
   段译：绿色、与原文同字号同缩进同对齐，不加框不加底
   ========================================================== */

.reader {
    padding: 40px 52px 30px;
    margin-bottom: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow-sm);
}

.reader-title {
    margin: 0 0 10px;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: .14em;
    text-align: center;
    color: var(--ink);
}

.reader-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: var(--ink-3);
}

.reader-meta a {
    color: var(--ink-2);
}

.reader-tools {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 20px 0 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line-soft);
}

.seg-switch {
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--panel-2);
}

.seg-switch button {
    min-width: 62px;
    padding: 3px 14px 4px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--ink-3);
    font-family: var(--serif);
    font-size: 13px;
    letter-spacing: .1em;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease;
}

.seg-switch button:hover {
    color: var(--green-2);
}

.seg-switch button.on {
    background: var(--panel);
    color: var(--green-2);
    box-shadow: var(--shadow-sm);
}

.seg-tip {
    font-size: 11.5px;
    color: var(--ink-3);
    letter-spacing: .04em;
}

.font-ctrl {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11.5px;
    color: var(--ink-3);
}

.font-ctrl button {
    width: 24px;
    height: 24px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--panel);
    color: var(--ink-3);
    font-size: 11.5px;
    line-height: 1;
    cursor: pointer;
}

.font-ctrl button:hover {
    border-color: var(--green);
    color: var(--green-2);
}

.font-ctrl button.on {
    border-color: var(--green);
    background: var(--green-soft);
    color: var(--green-2);
}

.reader-body {
    font-size: var(--read-size);
    line-height: var(--read-lh);
    letter-spacing: .03em;
    color: var(--ink);
}

.reader-body > p {
    margin: 0 0 .4em;
    text-align: justify;
    text-indent: 2em;
    word-break: break-word;
}

/* 段译：一段原文 + 一段译文，两段都按正文的缩进与两端对齐 */
.seg-pair {
    margin: 0 0 1.15em;
}

.seg-pair:last-child {
    margin-bottom: 0;
}

.seg-src,
.seg-dst {
    margin: 0;
    text-align: justify;
    text-indent: 2em;
    word-break: break-word;
    font-size: var(--read-size);
    line-height: var(--read-lh);
    letter-spacing: .03em;
}

.seg-src {
    color: var(--ink-2);
    font-size: calc(var(--read-size) * .94);
}

.seg-dst {
    margin-top: .45em;
    color: var(--green);
}

.seg-edit {
    display: inline-block;
    margin-left: 6px;
    padding: 0 5px 1px;
    border: 1px solid #BCD0BC;
    border-radius: 3px;
    color: #5C8468;
    font-size: 10.5px;
    letter-spacing: .04em;
    vertical-align: 2px;
    text-indent: 0;
    cursor: help;
}

.seg-loading {
    padding: 30px 0;
    text-align: center;
    font-size: 13.5px;
    color: var(--ink-3);
    letter-spacing: .1em;
}

.chapter-nav {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 34px;
    padding-top: 18px;
    border-top: 1px solid var(--line-soft);
    font-size: 13px;
}

.chapter-nav a {
    max-width: 46%;
    color: var(--ink-2);
}

.chapter-nav a:hover {
    color: var(--green-2);
}

.chapter-nav .muted {
    color: #A9A08C;
}

/* ---------------- 侧栏 ---------------- */

.side-block {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    overflow: hidden;
}

.side-title {
    padding: 11px 16px 10px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2em;
    color: var(--ink-2);
}

.side-body {
    padding: 12px 16px 14px;
}

.side-body.tight {
    padding: 4px 16px 10px;
}

.side-quote {
    padding: 9px 0;
    border-bottom: 1px dashed var(--line-soft);
}

.side-quote:last-child {
    border-bottom: 0;
}

.side-quote a {
    display: block;
    font-size: 13px;
    line-height: 1.9;
    color: var(--ink-2);
    text-align: justify;
}

.side-quote a:hover {
    color: var(--green-2);
}

.side-quote .from {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: var(--ink-3);
    text-align: right;
}

.side-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 10px;
}

.side-links a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    padding: 4px 0;
    font-size: 12.5px;
    color: var(--ink-2);
}

.side-links a:hover {
    color: var(--green-2);
}

.side-links .cnt {
    font-size: 11px;
    color: var(--ink-3);
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tag-list a {
    padding: 2px 8px 3px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--panel-2);
    font-size: 11.5px;
    color: var(--ink-3);
}

.tag-list a:hover {
    border-color: var(--green);
    color: var(--green-2);
}

.stat-rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.stat-rows > div {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.stat-rows b {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}

.stat-rows span {
    font-size: 11px;
    color: var(--ink-3);
}

/* ---------------- 页脚 ---------------- */

.site-footer {
    padding: 26px 24px 34px;
    border-top: 1px solid var(--line);
    background: rgba(232, 231, 213, .7);
    text-align: center;
}

.foot-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    margin-bottom: 8px;
}

.foot-links a {
    font-size: 12.5px;
    color: var(--ink-3);
}

.foot-links a:hover {
    color: var(--green-2);
}

.copy {
    font-size: 11.5px;
    letter-spacing: .06em;
    color: #93897A;
}

/* 页脚联系作者 */
.foot-contact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 12.5px;
    color: var(--ink-3);
}

.foot-contact .fc-label {
    letter-spacing: .08em;
    color: #93897A;
}

.foot-contact .fc-label::after {
    content: "：";
}

.foot-contact a {
    color: var(--green-2);
}

.foot-contact a:hover {
    color: var(--accent);
}

.foot-contact .fc-sep {
    color: #C4BBA6;
}

/* 微信号做成按钮：点一下就复制，省得手打 */
/* ★ button 会被全局 `button { -webkit-text-stroke: 0 }` 重置描边，
   12.5px 小字没描边就发虚，跟旁边的邮箱链接不一样粗，这里补回来 */
.foot-contact .fc-wx {
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--green-2);
    -webkit-text-stroke: var(--ink-stroke) currentColor;
    text-rendering: optimizeLegibility;
    cursor: pointer;
    border-bottom: 1px dashed rgba(60, 101, 73, .35);
    transition: color .16s ease, border-color .16s ease;
}

.foot-contact .fc-wx:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ---------------- 登录 / 注册 ---------------- */

.auth-mask,
.vip-mask {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(40, 36, 26, .4);
    backdrop-filter: blur(3px);
}

.auth-card,
.vip-card {
    position: relative;
    width: 372px;
    max-width: 100%;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 26px 26px 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
    box-shadow: var(--shadow-lg);
    animation: popIn .2s ease-out;
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.985);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.auth-close,
.dict-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ink-3);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.auth-close:hover,
.dict-close:hover {
    background: var(--panel-2);
    color: var(--ink);
}

.auth-tabs {
    display: flex;
    gap: 20px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line-soft);
}

.auth-tabs button {
    position: relative;
    padding: 4px 0 9px;
    border: 0;
    background: transparent;
    color: var(--ink-3);
    font-family: var(--serif);
    font-size: 15px;
    letter-spacing: .14em;
    cursor: pointer;
}

.auth-tabs button.on {
    color: var(--ink);
}

.auth-tabs button.on::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--green);
}

.auth-tip {
    margin: 12px 0 14px;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--ink-3);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.auth-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.auth-form label span {
    font-size: 12px;
    letter-spacing: .1em;
    color: var(--ink-3);
}

.auth-form input {
    height: 36px;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--panel-2);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 14px;
    outline: 0;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.auth-form input:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(78, 127, 94, .1);
}

.auth-form .row-mail,
.auth-form .row-nick {
    display: none;
}

.auth-mask.is-register .row-mail,
.auth-mask.is-register .row-nick {
    display: flex;
}

.auth-err {
    min-height: 17px;
    font-size: 12px;
    color: var(--red);
}

.auth-submit {
    height: 38px;
    border: 0;
    border-radius: 5px;
    background: var(--green);
    color: #FBFDF9;
    font-family: var(--serif);
    font-size: 14.5px;
    letter-spacing: .2em;
    cursor: pointer;
    transition: background-color .16s ease;
}

.auth-submit:hover {
    background: var(--green-2);
}

.auth-submit:disabled {
    opacity: .65;
    cursor: default;
}

.auth-foot {
    margin-top: 14px;
    padding-top: 11px;
    border-top: 1px dashed var(--line-soft);
    font-size: 11.5px;
    text-align: center;
    color: var(--ink-3);
}

/* ---------------- 开通会员 ---------------- */

.vip-card {
    width: 460px;
    padding: 24px 24px 16px;
}

.vip-title {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .16em;
    color: var(--ink);
}

.vip-sub {
    margin: 0 0 16px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--ink-3);
}

.vip-plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    transition: opacity .15s ease;
}

.vip-plans.dim {
    opacity: .45;
    pointer-events: none;
}

.plan {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 16px 8px 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-2);
    color: var(--ink);
    font-family: var(--serif);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, transform .12s ease;
}

.plan:hover {
    border-color: var(--green);
    background: var(--panel);
    transform: translateY(-2px);
}

.plan.hot {
    border-color: var(--green);
    background: var(--panel);
}

.plan-badge {
    position: absolute;
    top: -1px;
    right: -1px;
    padding: 1px 7px 2px;
    border-radius: 0 8px 0 7px;
    background: var(--green);
    color: #FBFDF9;
    font-size: 10.5px;
    letter-spacing: .04em;
}

.plan-name {
    font-size: 13.5px;
    letter-spacing: .14em;
    color: var(--ink-2);
}

.plan-price {
    font-size: 25px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--green-2);
}

.plan-price i {
    margin-right: 1px;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

.plan-days {
    font-size: 11.5px;
    color: var(--ink-3);
}

.plan-monthly {
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--ink-3);
}

.vip-loading {
    grid-column: 1 / -1;
    padding: 26px 0;
    text-align: center;
    font-size: 13px;
    color: var(--ink-3);
}

.vip-pay {
    text-align: center;
}

.vip-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 196px;
    height: 196px;
    margin: 0 auto 12px;
    padding: 8px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: #fff;
}

.vip-qr img {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

.vip-qr.no-qr {
    border-style: dashed;
    background: var(--panel-2);
}

.vip-qr-tip {
    display: none;
    padding: 0 10px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--ink-3);
}

.vip-qr.no-qr .vip-qr-tip {
    display: block;
}

.vip-amount {
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--green-2);
}

.vip-hint {
    margin: 0 0 8px;
    font-size: 12.5px;
    color: var(--ink-3);
}

.vip-pay.no-qr .vip-hint {
    display: none;
}

.vip-status {
    min-height: 20px;
    font-size: 12.5px;
    color: var(--green-2);
}

.vip-status.warn {
    color: var(--red);
}

.vip-back {
    margin-top: 10px;
    padding: 5px 14px 6px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--panel-2);
    color: var(--ink-2);
    font-family: var(--serif);
    font-size: 12.5px;
    letter-spacing: .1em;
    cursor: pointer;
}

.vip-back:hover {
    border-color: var(--green);
    color: var(--green-2);
}

.vip-foot {
    margin: 14px 0 0;
    padding-top: 10px;
    border-top: 1px dashed var(--line-soft);
    font-size: 11.5px;
    text-align: center;
    color: var(--ink-3);
}

/* ---------------- 划词辞典 ---------------- */

.dict-btn {
    position: fixed;
    z-index: 190;
    padding: 4px 11px 5px;
    border: 1px solid var(--green);
    border-radius: 4px;
    background: var(--panel);
    color: var(--green-2);
    font-family: var(--serif);
    font-size: 12.5px;
    letter-spacing: .06em;
    box-shadow: var(--shadow);
    cursor: pointer;
    animation: popIn .12s ease-out;
    /* 手指按在按钮上不能把选区清掉，否则按钮跟着消失、click 也发不出来 */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

.dict-panel {
    position: fixed;
    z-index: 195;
    width: 344px;
    max-width: calc(100vw - 20px);
    max-height: 62vh;
    overflow-y: auto;
    padding: 16px 18px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: var(--shadow-lg);
    animation: popIn .14s ease-out;
}

/* 手机上贴底：微信 / 安卓浏览器的地址栏会伸缩，按选区坐标算经常把面板顶出屏幕，
   表现就是「点了没反应」。贴底后位置恒定，不用再猜视口高度。 */
.dict-panel.bottom {
    left: 8px;
    right: 8px;
    bottom: 8px;
    top: auto;
    z-index: 220;
    width: auto;
    max-width: none;
    max-height: 68vh;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    animation: sheetUp .18s ease-out;
}

@keyframes sheetUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.dict-head {
    padding-right: 20px;
}

.dict-word {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--ink);
}

.dict-py {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.dict-py-text {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--green-2);
}

.dict-audio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--panel-2);
    color: var(--ink-3);
    cursor: pointer;
}

.dict-audio:hover {
    border-color: var(--green);
    color: var(--green-2);
}

.dict-zy {
    margin-top: 3px;
    font-size: 12px;
    color: var(--ink-3);
    letter-spacing: .04em;
}

.dict-defs {
    margin: 12px 0 0;
    padding-left: 18px;
}

.dict-defs li {
    margin-bottom: 9px;
    font-size: 13.5px;
    line-height: 1.9;
    color: var(--ink-2);
}

.dict-def {
    text-align: justify;
}

/* 英文对译、书证出处、「释义来自 xx」都已去掉，相关样式一并删除：
   面板上只留「拼音 / 注音 / 释义」，不再出现任何引用信息 */

.dict-empty {
    padding: 12px 0 4px;
    font-size: 13px;
    color: var(--ink-3);
}

.dict-hint {
    margin-top: 8px;
    font-size: 12px;
    color: var(--ink-3);
}

.dict-chars {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.dict-char {
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--panel-2);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 16px;
    cursor: pointer;
}

.dict-char:hover {
    border-color: var(--green);
    color: var(--green-2);
}

.dict-char.on {
    border-color: var(--green);
    background: var(--green-wash, rgba(90, 122, 98, .10));
    color: var(--green-2);
}

/* 整词没收录、自动降级成逐字查时的提示 */
.dict-miss-tip {
    margin: 2px 0 10px;
    padding: 7px 9px;
    border-left: 2px solid var(--green);
    border-radius: 0 3px 3px 0;
    background: var(--panel-2);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ink-3);
}

.dict-loading {
    padding: 10px 0;
    font-size: 13px;
    color: var(--ink-3);
}

/* ---------------- 提示 ---------------- */

.toast {
    position: fixed;
    left: 50%;
    bottom: 46px;
    z-index: 300;
    padding: 9px 20px;
    border-radius: 6px;
    background: rgba(46, 42, 34, .92);
    color: #F7F3E9;
    font-size: 13px;
    letter-spacing: .04em;
    opacity: 0;
    transform: translate(-50%, 10px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

.toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ---------------- 响应式 ---------------- */

@media (max-width: 1080px) {
    .layout {
        grid-template-columns: minmax(0, 1fr) 240px;
        gap: 20px;
    }

    .chapter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .author-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 880px) {
    .layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .side-col {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .search-form {
        max-width: 200px;
    }

    .header-inner {
        gap: 16px;
    }

    .nav {
        gap: 16px;
    }
}

@media (max-width: 700px) {
    .container {
        padding: 16px 14px 40px;
    }

    .header-inner {
        height: 54px;
        padding: 0 14px;
        gap: 12px;
    }

    .brand-logo {
        font-size: 18px;
        letter-spacing: .1em;
    }

    .brand-sub {
        display: none;
    }

    .search-form {
        display: none;
    }

    .nav {
        gap: 13px;
    }

    .nav a {
        font-size: 14px;
        letter-spacing: .06em;
    }

    .header-admin {
        display: none;
    }

    .hero {
        padding: 28px 16px 24px;
    }

    .hero h1 {
        font-size: 26px;
    }

    .hero-stats {
        gap: 24px;
    }

    .card {
        padding: 16px 15px 18px;
    }

    .detail-card,
    .reader {
        padding: 24px 18px 22px;
    }

    .detail-title,
    .reader-title {
        font-size: 21px;
        letter-spacing: .08em;
    }

    .poem-grid,
    .side-col {
        grid-template-columns: minmax(0, 1fr);
    }

    .chapter-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .author-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .seg-switch button {
        min-width: 54px;
        padding: 3px 10px 4px;
    }

    .reader-tools {
        flex-wrap: wrap;
        gap: 10px;
    }

    .vip-card {
        padding: 20px 16px 14px;
    }

    .vip-plans {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .plan {
        flex-direction: row;
        justify-content: space-between;
        padding: 12px 14px;
    }

    .plan-price {
        font-size: 20px;
    }

    .plan-monthly {
        margin-top: 0;
    }

    .item-title {
        font-size: 16px;
    }

    .dict-panel {
        width: calc(100vw - 20px);
    }
}

@media (max-width: 560px) {
    .header-inner {
        gap: 8px;
        padding: 0 12px;
    }

    .brand-logo {
        font-size: 17px;
        letter-spacing: .06em;
    }

    .nav {
        gap: 9px;
    }

    .nav a {
        font-size: 13.5px;
        letter-spacing: 0;
    }

    .user-login {
        padding: 4px 9px 5px;
        font-size: 12px;
    }

    .user-chip {
        gap: 5px;
        padding: 2px 8px 2px 2px;
        font-size: 12px;
    }

    .user-name {
        display: none;
    }

    .user-avatar {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .member-badge {
        font-size: 10px;
    }
}

@media (max-width: 380px) {
    .nav {
        gap: 7px;
    }

    .nav a {
        font-size: 12.5px;
    }

    .brand-logo {
        font-size: 16px;
    }
}