/* ==========================================================================
   竹笛 · 全站配色与古风皮肤  （LightSNS 模块：zhudi-*-gadget-theme）
   --------------------------------------------------------------------------
   这个文件由模块启用后注入到每一个页面的 <head>，所以改这里的变量 = 改全站。

   想改配色，**优先改同目录的 theme.js**（不用动 CSS，刷新就生效）。
   这里是最底层的默认值，theme.js 没写到的项就回落到这里的值。

   变量一览：
     --zd-bg        整站背景色（最常改的一个）
     --zd-bg-2      背景第二层（渐变末端 / 悬停底色）
     --zd-card      卡片底色
     --zd-card-2    卡片渐变末端
     --zd-line      边框线
     --zd-line-soft 更浅的线（分隔线）
     --zd-ink       正文字色
     --zd-ink-soft  次级文字
     --zd-muted     弱化文字 / 占位符
     --zd-primary   主色（链接、选中、进度）
     --zd-primary-d 主色·深（悬停）
     --zd-accent    强调色（主按钮、公告、印章）
     --zd-accent-d  强调色·深
     --zd-radius    方角程度（0–6px 之间最像纸）
     --zd-texture   纸纹强度 0–1
     --zd-bamboo    竹影强度 0–1（0 = 关闭）
     --zd-font-serif / --zd-font-kai  字体族
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 默认配色：宣纸 + 竹青 + 朱砂
   -------------------------------------------------------------------------- */
html:root {
    --zd-bg: #efe5d1;
    --zd-bg-2: #e4d7bb;
    --zd-card: #fefcf6;
    --zd-card-2: #faf4e6;
    --zd-line: #dbcbab;
    --zd-line-soft: #ece0c8;
    --zd-ink: #2f2a23;
    --zd-ink-soft: #5b5346;
    --zd-muted: #958b78;
    --zd-primary: #4e6f52;
    --zd-primary-rgb: 78, 111, 82;
    --zd-primary-d: #3c5a41;
    --zd-accent: #a4372a;
    --zd-accent-rgb: 164, 55, 42;
    --zd-accent-d: #8d2c20;
    --zd-on-accent: #fdf6e8;
    --zd-radius: 3px;
    --zd-texture: 0.55;
    --zd-bamboo: 0.7;
    --zd-font-serif: "Songti SC", "Source Han Serif SC", "Noto Serif SC", "Noto Serif CJK SC", "STSong", "SimSun", "宋体", serif;
    --zd-font-kai: "Kaiti SC", "STKaiti", "KaiTi", "楷体", "LXGW WenKai", "Songti SC", "SimSun", serif;

    /* 下面几项由 theme.js 按配色算出来，这里给浅色纸面的默认值 */
    --zd-hover: #f4eddd;                       /* 卡片内的悬停/输入底 */
    --zd-surface: rgba(255, 255, 255, 0.45);   /* 半透明的面（搜索框、描边按钮） */
    --zd-hi: rgba(255, 255, 255, 0.85);        /* 卡片上沿的高光 */
    --zd-header: rgba(250, 246, 236, 0.92);    /* 头部底色 */
    --zd-foot: linear-gradient(180deg, rgba(251, 246, 234, 0) 0%, rgba(240, 232, 214, 0.75) 100%);
    --zd-foot-bottom: rgba(238, 230, 210, 0.6);
}

/* --------------------------------------------------------------------------
   2. 映射到 LightSNS 自己的变量：底色 / 卡片 / 文字 / 线（任何模式都生效）
   -------------------------------------------------------------------------- */
html:root {
    --ls-bg: var(--zd-bg);
    --ls-bg-light: var(--zd-bg);
    --ls-bg-hover: var(--zd-hover);
    --ls-bg-secondary: var(--zd-hover);
    --ls-bg-white: var(--zd-card);
    --ls-card-bg: var(--zd-card);
    --ls-bg-card: var(--zd-card);
    --ls-border: var(--zd-line);
    --ls-border-light: var(--zd-line-soft);
    --ls-divider: var(--zd-line-soft);
    --ls-text: var(--zd-ink);
    --ls-text-primary: var(--zd-ink);
    --ls-text-secondary: var(--zd-ink-soft);
    --ls-text-muted: var(--zd-muted);
    --ls-text-tertiary: var(--zd-muted);
    --ls-text-placeholder: var(--zd-muted);
    --ls-shadow: 0 2px 10px -6px rgba(94, 72, 38, 0.35);
    --ls-shadow-xs: 0 1px 4px -2px rgba(94, 72, 38, 0.28);
    --ls-shadow-sm: 0 2px 8px -4px rgba(94, 72, 38, 0.30);
    --ls-shadow-md: 0 6px 20px -12px rgba(94, 72, 38, 0.40);
    --ls-shadow-lg: 0 18px 48px -20px rgba(70, 52, 26, 0.45);
    --ls-shadow-xl: 0 24px 60px -20px rgba(70, 52, 26, 0.50);
}

/* 主色 / 强调色 / 圆角：轻量模式（html.zd-lite）下不动，保持原来的现代组件外观 */
html:not(.zd-lite):root {
    --ls-primary: var(--zd-primary);
    --ls-primary-hover: var(--zd-primary-d);
    --ls-primary-light: rgba(var(--zd-primary-rgb), 0.10);
    --ls-primary-rgb: var(--zd-primary-rgb);
    --ls-radius: var(--zd-radius);
    --ls-radius-sm: calc(var(--zd-radius) - 1px);
    --ls-radius-md: var(--zd-radius);
    --ls-radius-lg: calc(var(--zd-radius) + 1px);
    --ls-radius-xl: calc(var(--zd-radius) + 1px);
    --ls-border-radius: calc(var(--zd-radius) + 1px);
    --ls-border-radius-btn: calc(var(--zd-radius) - 1px);
    --ls-border-radius-img: calc(var(--zd-radius) - 1px);
    --ls-danger: var(--zd-accent);
    --ls-danger-light: rgba(var(--zd-accent-rgb), 0.09);
    --ls-success: #5b7d5d;
    --ls-warning: #b07d3a;
    --ls-focus-ring: 0 0 0 3px rgba(var(--zd-primary-rgb), 0.14);
}

/* --------------------------------------------------------------------------
   3. 整站底色：纸色 + 纸纹 + 竹影（始终生效，这就是「整站背景色」）
   -------------------------------------------------------------------------- */
html:root {
    /* 这两支由模块后端按底色深浅给值：浅色纸面是一层暖白光晕，深色底换成极淡的提亮 + 压暗 */
    --zd-glow-top: rgba(255, 253, 246, 0.55);
    --zd-glow-bot: rgba(120, 96, 58, 0.10);
    background-color: var(--zd-bg);
    background-image:
        radial-gradient(1200px 560px at 50% -12%, var(--zd-glow-top), rgba(0, 0, 0, 0) 70%),
        radial-gradient(1000px 560px at 50% 112%, var(--zd-glow-bot), rgba(0, 0, 0, 0) 72%);
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
}

/* 纸纹：纤维颗粒，强度由 --zd-texture 控制 */
html::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("paper-grain.svg");
    background-size: 180px 180px;
    background-repeat: repeat;
    opacity: calc(var(--zd-texture) * 0.22);
}

/* 竹影：只在很宽的屏幕上露出来，强度由 --zd-bamboo 控制 */
html::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("bamboo.svg"), url("bamboo.svg");
    background-repeat: no-repeat, no-repeat;
    background-position: left -34px top -40px, right -34px bottom -60px;
    background-size: 210px auto, 210px auto;
    opacity: calc(var(--zd-bamboo) * 0.55);
    display: none;
}

@media (min-width: 1560px) {
    html::after { display: block; }
}

html body {
    background: transparent;
    color: var(--zd-ink);
    font-family: var(--zd-font-serif);
    letter-spacing: 0.012em;
    -webkit-font-smoothing: antialiased;
}

html body ::selection {
    background: rgba(var(--zd-primary-rgb), 0.20);
    color: var(--zd-ink);
}

html::-webkit-scrollbar { width: 8px; height: 8px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb {
    background: rgba(var(--zd-primary-rgb), 0.28);
    border-radius: 50px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
html::-webkit-scrollbar-thumb:hover { background: rgba(var(--zd-primary-rgb), 0.45); background-clip: padding-box; }

/* --------------------------------------------------------------------------
   4. 古风皮肤（html 上没有 .zd-lite 时生效）
      轻量模式：theme.js 里 "lite": true，只保留第 2、3 节，组件造型不动
   -------------------------------------------------------------------------- */

/* --- 4.1 头部：宣纸横幅 + 竹节压边 --- */
html:not(.zd-lite) .ls-header {
    background: var(--zd-header);
    border-bottom: 1px solid var(--zd-line);
    box-shadow:
        0 1px 0 var(--zd-hi) inset,
        0 8px 24px -16px rgba(84, 62, 30, 0.45);
    backdrop-filter: saturate(150%) blur(16px);
    -webkit-backdrop-filter: saturate(150%) blur(16px);
}

/* 竹节线：一条细横线，每 46px 一个竹节 */
html:not(.zd-lite) .ls-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(90deg, rgba(var(--zd-primary-rgb), 0.55) 0 1.5px, rgba(var(--zd-primary-rgb), 0) 1.5px 46px),
        linear-gradient(to bottom, rgba(var(--zd-primary-rgb), 0.26), rgba(var(--zd-primary-rgb), 0));
    background-size: 46px 100%, 100% 100%;
    background-repeat: repeat-x, no-repeat;
}

html:not(.zd-lite) .ls-header-inner { padding: 0 28px; }

html:not(.zd-lite) .ls-logo-text {
    font-family: var(--zd-font-kai);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--zd-ink);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

html:not(.zd-lite) .ls-logo-img { border-radius: 2px; }

/* 主导航 */
html:not(.zd-lite) .ls-main-nav { gap: 2px; }

html:not(.zd-lite) .ls-nav-item > a {
    padding: 9px 14px;
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--zd-ink-soft);
    border-radius: 2px;
    text-decoration: none;
}

html:not(.zd-lite) .ls-nav-item > a:hover {
    color: var(--zd-accent);
    background: rgba(var(--zd-accent-rgb), 0.06);
}

html:not(.zd-lite) .ls-nav-item.active,
html:not(.zd-lite) .ls-nav-item.ls-active > a {
    background: transparent;
    color: var(--zd-accent);
    font-weight: 600;
}

html:not(.zd-lite) .ls-nav-item.active > a,
html:not(.zd-lite) .ls-nav-item.active > a span,
html:not(.zd-lite) .ls-nav-item.ls-active > a span {
    background: transparent;
    color: var(--zd-accent);
}

html:not(.zd-lite) .ls-nav-item.active::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 1px;
    width: 16px;
    height: 2px;
    transform: translateX(-50%);
    background: var(--zd-accent);
    border-radius: 1px;
}

html:not(.zd-lite) .ls-nav-dot { background: var(--zd-accent); }

html:not(.zd-lite) .ls-nav-badge {
    border-radius: 2px;
    letter-spacing: 0.04em;
    background: var(--zd-accent) !important;
    color: var(--zd-on-accent) !important;
}

/* 下拉面板 */
html:not(.zd-lite) .ls-hd-dropdown {
    background: var(--zd-card);
    border: 1px solid var(--zd-line);
    border-radius: 3px;
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.45), 0 1px 0 var(--zd-hi) inset;
}

html:not(.zd-lite) .ls-hd-dropdown-item {
    border-radius: 2px;
    color: var(--zd-ink-soft);
}

html:not(.zd-lite) .ls-hd-dropdown-item:hover {
    background: rgba(var(--zd-primary-rgb), 0.08);
    color: var(--zd-primary-d);
}

html:not(.zd-lite) .ls-hd-dropdown-title,
html:not(.zd-lite) .ls-hd-dropdown-header {
    font-family: var(--zd-font-kai);
    letter-spacing: 0.08em;
    color: var(--zd-ink);
    border-color: var(--zd-line-soft);
}

/* 搜索入口 */
html:not(.zd-lite) .ls-search-trigger {
    background: var(--zd-surface);
    border: 1px solid var(--zd-line);
    border-radius: 2px;
    color: var(--zd-muted);
    font-family: var(--zd-font-serif);
    letter-spacing: 0.10em;
}

html:not(.zd-lite) .ls-search-trigger:hover {
    border-color: var(--zd-primary);
    color: var(--zd-primary);
    background: var(--zd-card);
}

html:not(.zd-lite) .ls-icon-btn {
    border-radius: 2px;
    color: var(--zd-ink-soft);
}

html:not(.zd-lite) .ls-icon-btn:hover {
    background: rgba(var(--zd-primary-rgb), 0.09);
    color: var(--zd-primary-d);
}

html:not(.zd-lite) .ls-count-badge { background: var(--zd-accent); }

html:not(.zd-lite) .ls-search-box {
    background: var(--zd-card);
    border: 1px solid var(--zd-line);
    border-radius: 3px;
    box-shadow: 0 18px 44px -22px rgba(70, 52, 26, 0.5);
}

html:not(.zd-lite) .ls-search-box input {
    font-family: var(--zd-font-serif);
    color: var(--zd-ink);
    background: transparent;
}

html:not(.zd-lite) .ls-hot-tag {
    background: rgba(var(--zd-primary-rgb), 0.08);
    border: 1px solid rgba(var(--zd-primary-rgb), 0.18);
    border-radius: 2px;
    color: var(--zd-primary-d);
}

html:not(.zd-lite) .ls-hot-tag:hover {
    background: rgba(var(--zd-accent-rgb), 0.08);
    border-color: rgba(var(--zd-accent-rgb), 0.22);
    color: var(--zd-accent);
}

/* --- 4.2 卡片：一页页摊开的宣纸 --- */
html:not(.zd-lite) .ls-card,
html:not(.zd-lite) .ls-post-item,
html:not(.zd-lite) .ls-banner,
html:not(.zd-lite) .ls-recommend,
html:not(.zd-lite) .ls-gallery,
html:not(.zd-lite) .ls-shortcuts,
html:not(.zd-lite) .ls-stories,
html:not(.zd-lite) .ls-user-card,
html:not(.zd-lite) .ls-sns-html,
html:not(.zd-lite) .ls-widget,
html:not(.zd-lite) .ls-sidebar-left .ls-card,
html:not(.zd-lite) .ls-sidebar-right .ls-card {
    background: linear-gradient(180deg, var(--zd-card) 0%, var(--zd-card-2) 100%);
    border: 1px solid var(--zd-line);
    border-radius: var(--zd-radius);
    box-shadow:
        0 1px 0 var(--zd-hi) inset,
        0 3px 12px -7px rgba(0, 0, 0, 0.22);
}

html:not(.zd-lite) .ls-post-item { padding: 18px; }

html:not(.zd-lite) .ls-post-item:hover {
    border-color: rgba(var(--zd-primary-rgb), 0.48);
    box-shadow:
        0 1px 0 var(--zd-hi) inset,
        0 10px 26px -16px rgba(0, 0, 0, 0.30);
}

/* 分区标题：楷体 + 竹节线 */
html:not(.zd-lite) .ls-widget-header {
    position: relative;
    padding-bottom: 10px;
}

html:not(.zd-lite) .ls-widget-header::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 0;
    height: 3px;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(90deg, rgba(var(--zd-primary-rgb), 0.40) 0 1px, rgba(var(--zd-primary-rgb), 0) 1px 40px),
        linear-gradient(to bottom, rgba(var(--zd-primary-rgb), 0.22), rgba(var(--zd-primary-rgb), 0));
    background-size: 40px 100%, 100% 100%;
    background-repeat: repeat-x, no-repeat;
}

html:not(.zd-lite) .ls-widget-header h3,
html:not(.zd-lite) .ls-card-header h3,
html:not(.zd-lite) .ls-recommend-header h3,
html:not(.zd-lite) .ls-gallery-header h3,
html:not(.zd-lite) .ls-sns-html-header h3,
html:not(.zd-lite) .ls-top-nav-name,
html:not(.zd-lite) .ls-nav-title {
    font-family: var(--zd-font-kai);
    color: var(--zd-ink);
    letter-spacing: 0.08em;
}

html:not(.zd-lite) .ls-recommend-header h3,
html:not(.zd-lite) .ls-gallery-header h3 {
    font-size: 17px;
    font-weight: 700;
}

/* 小工具标题自带的「斜杠」装饰：改成朱砂 + 竹青两笔 */
html:not(.zd-lite).widget-title-double-slash .ls-widget-header h3::before {
    background: var(--zd-accent);
    width: 3px;
    height: 15px;
    border-radius: 1px;
    transform: translateY(-50%) rotate(12deg);
}

html:not(.zd-lite).widget-title-double-slash .ls-widget-header h3::after {
    background: var(--zd-primary);
    width: 3px;
    height: 11px;
    border-radius: 1px;
    transform: translateY(-50%) rotate(12deg);
}

/* 波浪下划线那种标题也换色 */
html:not(.zd-lite).widget-title-wave-underline .ls-widget-header h3::after {
    background-image: none;
    background-color: transparent;
    border-bottom: 2px solid rgba(var(--zd-primary-rgb), 0.55);
    height: 4px;
    width: 40px;
}

/* --- 4.3 内容流 --- */
html:not(.zd-lite) .ls-post-title,
html:not(.zd-lite) .ls-article-title,
html:not(.zd-lite) .ls-post-content .ls-post-title {
    font-family: var(--zd-font-kai);
    font-weight: 700;
    color: var(--zd-ink);
    letter-spacing: 0.02em;
}

html:not(.zd-lite) .ls-post-user-name,
html:not(.zd-lite) .ls-nickname { color: var(--zd-ink-soft); font-weight: 600; }

html:not(.zd-lite) .ls-post-meta,
html:not(.zd-lite) .ls-desc { color: var(--zd-muted); }

html:not(.zd-lite) .ls-post-content { color: var(--zd-ink); line-height: 1.85; }

/* 左侧内容菜单 */
html:not(.zd-lite) .ls-sidebar-left .ls-content-nav-item {
    border-radius: 2px;
    position: relative;
}

html:not(.zd-lite) .ls-sidebar-left .ls-content-nav-item:hover {
    background: rgba(var(--zd-primary-rgb), 0.07);
}

html:not(.zd-lite) .ls-sidebar-left .ls-content-nav-item.ls-active {
    background: rgba(var(--zd-primary-rgb), 0.10);
}

html:not(.zd-lite) .ls-sidebar-left .ls-content-nav-item.ls-active .ls-nav-title {
    color: var(--zd-primary-d);
    font-weight: 700;
}

html:not(.zd-lite) .ls-sidebar-left .ls-content-nav-item.ls-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 2px;
    height: 16px;
    transform: translateY(-50%);
    background: var(--zd-accent);
    border-radius: 1px;
}

/* 顶部栏（列表顶部模式） */
html:not(.zd-lite) .ls-top-nav-item {
    border-radius: 2px;
    color: var(--zd-ink-soft);
    letter-spacing: 0.08em;
}

html:not(.zd-lite) .ls-top-nav-item.ls-active {
    color: var(--zd-accent);
    font-weight: 700;
}

/* 公告条 */
html:not(.zd-lite) .ls-banner-tag {
    background: var(--zd-accent);
    color: var(--zd-on-accent);
    border-radius: 2px;
}

html:not(.zd-lite) .ls-banner-icon { color: var(--zd-accent); }

/* 在线动态条 */
html:not(.zd-lite) .ls-story-avatar {
    border: 1px solid rgba(var(--zd-primary-rgb), 0.35);
    padding: 2px;
    background: var(--zd-card);
}

html:not(.zd-lite) .ls-story-name { color: var(--zd-ink-soft); font-size: 12px; }

/* 快捷入口 */
html:not(.zd-lite) .ls-shortcut-icon,
html:not(.zd-lite) .ls-entry-icon {
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 2px 8px -5px rgba(70, 52, 26, 0.4);
}

html:not(.zd-lite) .ls-shortcut-name,
html:not(.zd-lite) .ls-entry-name { color: var(--zd-ink-soft); letter-spacing: 0.04em; }

/* 今日推荐 */
html:not(.zd-lite) .ls-recommend-card {
    border-radius: 3px;
    border: 1px solid var(--zd-line);
    background: var(--zd-card);
    overflow: hidden;
}

html:not(.zd-lite) .ls-recommend-card:hover { border-color: rgba(var(--zd-primary-rgb), 0.42); }

html:not(.zd-lite) .ls-recommend-title { font-family: var(--zd-font-kai); color: var(--zd-ink); }
html:not(.zd-lite) .ls-recommend-more { color: var(--zd-primary); }

/* --- 4.4 按钮：朱砂印章 --- */
html:not(.zd-lite) .ls-create-btn,
html:not(.zd-lite) .ls-load-more .ls-load-btn,
html:not(.zd-lite) .ls-publish-submit .ls-submit-btn,
html:not(.zd-lite) .ls-btn-primary {
    background: linear-gradient(180deg, var(--zd-accent) 0%, var(--zd-accent-d) 100%);
    border: 1px solid var(--zd-accent-d);
    border-radius: 2px;
    color: var(--zd-on-accent);
    font-family: var(--zd-font-serif);
    font-weight: 600;
    letter-spacing: 0.14em;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.22) inset,
        0 3px 10px -6px rgba(120, 40, 25, 0.75);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}

html:not(.zd-lite) .ls-create-btn:hover,
html:not(.zd-lite) .ls-load-more .ls-load-btn:hover,
html:not(.zd-lite) .ls-publish-submit .ls-submit-btn:hover,
html:not(.zd-lite) .ls-btn-primary:hover {
    color: #fffaf0;
    filter: brightness(1.08);
}

/* 登录：描边小印，不和「发布」抢眼 */
html:not(.zd-lite) .ls-auth-btns .ls-register-btn,
html:not(.zd-lite) .ls-register-btn {
    background: var(--zd-surface);
    border: 1px solid var(--zd-line);
    border-radius: 2px;
    color: var(--zd-ink-soft);
    font-family: var(--zd-font-serif);
    font-weight: 600;
    letter-spacing: 0.16em;
    box-shadow: none;
    text-shadow: none;
}

html:not(.zd-lite) .ls-auth-btns .ls-register-btn:hover,
html:not(.zd-lite) .ls-register-btn:hover {
    background: rgba(var(--zd-accent-rgb), 0.08);
    border-color: rgba(var(--zd-accent-rgb), 0.45);
    color: var(--zd-accent);
}

html:not(.zd-lite) .ls-load-more .ls-load-btn {
    font-family: var(--zd-font-kai);
    letter-spacing: 0.22em;
    padding: 10px 36px;
}

/* 通用按钮（弹窗、表单里到处都是） */
html:not(.zd-lite) .ls-btn {
    border-radius: 2px;
    font-family: var(--zd-font-serif);
    font-weight: 600;
    letter-spacing: 0.08em;
}

html:not(.zd-lite) .ls-btn-secondary,
html:not(.zd-lite) .ls-btn-ghost,
html:not(.zd-lite) .ls-btn-text {
    background: transparent;
    border: 1px solid var(--zd-line);
    color: var(--zd-ink-soft);
}

html:not(.zd-lite) .ls-btn-secondary:hover,
html:not(.zd-lite) .ls-btn-ghost:hover,
html:not(.zd-lite) .ls-btn-text:hover {
    background: rgba(var(--zd-accent-rgb), 0.06);
    border-color: rgba(var(--zd-accent-rgb), 0.40);
    color: var(--zd-accent);
}

/* 次级按钮（图标动作） */
html:not(.zd-lite) .ls-quick-action,
html:not(.zd-lite) .ls-action-btn {
    border-radius: 2px;
    color: var(--zd-ink-soft);
}

html:not(.zd-lite) .ls-quick-action:hover,
html:not(.zd-lite) .ls-action-btn:hover {
    background: rgba(var(--zd-primary-rgb), 0.09);
    color: var(--zd-primary-d);
}

html:not(.zd-lite) .ls-expand-btn,
html:not(.zd-lite) .ls-post-more { color: var(--zd-primary); }

/* 表单 */
html:not(.zd-lite) .ls-publish {
    border: 1px solid var(--zd-line);
    border-radius: 3px;
    background: linear-gradient(180deg, var(--zd-card) 0%, var(--zd-card-2) 100%);
    box-shadow: 0 1px 0 var(--zd-hi) inset, 0 2px 10px -6px rgba(0, 0, 0, 0.18);
}

html:not(.zd-lite) .ls-publish-textarea {
    font-family: var(--zd-font-serif);
    font-size: 14.5px;
    line-height: 1.9;
    color: var(--zd-ink);
    background: transparent;
}

html:not(.zd-lite) .ls-publish-textarea::placeholder,
html:not(.zd-lite) .ls-placeholder {
    color: var(--zd-muted);
    font-family: var(--zd-font-kai);
    letter-spacing: 0.06em;
}

/* 标签 */
html:not(.zd-lite) .ls-post-tags a,
html:not(.zd-lite) .ls-tag,
html:not(.zd-lite) .ls-at-tag,
html:not(.zd-lite) .ls-hot-topic-tag,
html:not(.zd-lite) .ls-board-link {
    background: rgba(var(--zd-primary-rgb), 0.08);
    border: 1px solid rgba(var(--zd-primary-rgb), 0.18);
    border-radius: 2px;
    color: var(--zd-primary-d);
    letter-spacing: 0.04em;
}

html:not(.zd-lite) .ls-post-tags a:hover,
html:not(.zd-lite) .ls-tag:hover,
html:not(.zd-lite) .ls-hot-topic-tag:hover {
    background: rgba(var(--zd-accent-rgb), 0.08);
    border-color: rgba(var(--zd-accent-rgb), 0.25);
    color: var(--zd-accent);
}

/* 头像加一道淡墨边 */
html:not(.zd-lite) .ls-avatar > img,
html:not(.zd-lite) .ls-story-avatar > img {
    box-shadow: 0 0 0 1px rgba(47, 42, 35, 0.12);
}

/* --- 4.5 弹窗 / 提示 --- */
html:not(.zd-lite) .ls-modal,
html:not(.zd-lite) .ls-modal-content,
html:not(.zd-lite) .ls-login-box,
html:not(.zd-lite) .ls-dialog,
html:not(.zd-lite) .ls-popup-panel,
html:not(.zd-lite) .ls-action-sheet {
    background: var(--zd-card);
    border: 1px solid var(--zd-line);
    border-radius: 3px;
    box-shadow: 0 26px 60px -24px rgba(60, 44, 20, 0.55);
}

html:not(.zd-lite) .ls-modal-header,
html:not(.zd-lite) .ls-modal-footer {
    border-color: var(--zd-line-soft);
}

html:not(.zd-lite) .ls-modal-title,
html:not(.zd-lite) .ls-dialog-title,
html:not(.zd-lite) .ls-dialog-header,
html:not(.zd-lite) .ls-popup-title,
html:not(.zd-lite) .ls-action-title {
    font-family: var(--zd-font-kai);
    letter-spacing: 0.08em;
    color: var(--zd-ink);
}

html:not(.zd-lite) .ls-toast,
html:not(.zd-lite) .ls-tips {
    background: rgba(47, 42, 35, 0.92);
    color: #f6efdf;
    border-radius: 2px;
}

/* --- 4.6 页脚 --- */
html:not(.zd-lite) .ls-footer {
    background: var(--zd-foot);
    border-top: 1px solid var(--zd-line);
    margin-top: 32px;
}

html:not(.zd-lite) .ls-footer-logo-text,
html:not(.zd-lite) .ls-footer-nav-title {
    font-family: var(--zd-font-kai);
    color: var(--zd-ink);
    letter-spacing: 0.14em;
}

html:not(.zd-lite) .ls-footer-desc,
html:not(.zd-lite) .ls-footer-nav-link,
html:not(.zd-lite) .ls-footer-copyright { color: var(--zd-ink-soft); }

html:not(.zd-lite) .ls-footer-nav-link:hover { color: var(--zd-accent); }

html:not(.zd-lite) .ls-footer-bottom {
    border-top: 1px solid var(--zd-line-soft);
    background: var(--zd-foot-bottom);
}

/* --- 4.7 杂项 --- */
html:not(.zd-lite) a { color: var(--zd-primary); }
html:not(.zd-lite) a:hover { color: var(--zd-accent); }

html:not(.zd-lite) :focus-visible {
    outline: 2px solid rgba(var(--zd-primary-rgb), 0.45);
    outline-offset: 2px;
}

html:not(.zd-lite) .ls-empty,
html:not(.zd-lite) .ls-post-empty,
html:not(.zd-lite) .ls-nav-empty,
html:not(.zd-lite) .ls-msg-empty,
html:not(.zd-lite) .ls-comment-empty {
    color: var(--zd-muted);
    font-family: var(--zd-font-kai);
    letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   5. 移动端（mb 模板：.ls-page / .ls-navbar / .ls-tabbar）
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    html:root {
        --zd-radius: 4px;
    }

    html:not(.zd-lite) .ls-navbar {
        position: relative;
        background: var(--zd-header);
        border-bottom: 1px solid var(--zd-line);
        box-shadow: 0 1px 0 var(--zd-hi) inset;
        backdrop-filter: saturate(140%) blur(14px);
        -webkit-backdrop-filter: saturate(140%) blur(14px);
    }

    html:not(.zd-lite) .ls-navbar::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 2px;
        pointer-events: none;
        background-image:
            repeating-linear-gradient(90deg, rgba(var(--zd-primary-rgb), 0.45) 0 1.5px, rgba(var(--zd-primary-rgb), 0) 1.5px 34px),
            linear-gradient(to bottom, rgba(var(--zd-primary-rgb), 0.20), rgba(var(--zd-primary-rgb), 0));
        background-size: 34px 100%, 100% 100%;
        background-repeat: repeat-x, no-repeat;
    }

    html:not(.zd-lite) .ls-tabbar {
        background: var(--zd-header);
        border-top: 1px solid var(--zd-line);
        box-shadow: 0 -1px 0 var(--zd-hi) inset;
        backdrop-filter: saturate(140%) blur(14px);
        -webkit-backdrop-filter: saturate(140%) blur(14px);
    }

    html:not(.zd-lite) .ls-tabbar-item.ls-active,
    html:not(.zd-lite) .ls-tabbar-item.active { color: var(--zd-primary-d); }

    html:not(.zd-lite) .ls-navbar-title,
    html:not(.zd-lite) .ls-navbar-title-text,
    html:not(.zd-lite) .ls-navbar-logo-text {
        font-family: var(--zd-font-kai);
        letter-spacing: 0.10em;
        color: var(--zd-ink);
    }

    html:not(.zd-lite) .ls-card,
    html:not(.zd-lite) .ls-post-item,
    html:not(.zd-lite) .ls-banner,
    html:not(.zd-lite) .ls-recommend,
    html:not(.zd-lite) .ls-gallery,
    html:not(.zd-lite) .ls-shortcuts,
    html:not(.zd-lite) .ls-stories,
    html:not(.zd-lite) .ls-user-card,
    html:not(.zd-lite) .ls-widget {
        background: linear-gradient(180deg, var(--zd-card) 0%, var(--zd-card-2) 100%);
        border: 1px solid var(--zd-line);
        border-radius: 4px;
        box-shadow: 0 2px 10px -8px rgba(86, 64, 32, 0.5);
    }

    html:not(.zd-lite) .ls-btn-outline {
        border: 1px solid rgba(var(--zd-primary-rgb), 0.45);
        color: var(--zd-primary-d);
        border-radius: 3px;
        background: transparent;
    }

    html:not(.zd-lite) .ls-comment-input-wrap,
    html:not(.zd-lite) .ls-comment-editor {
        background: var(--zd-card);
    }
}