/* ============================================================
   nx-dark v4 —— 全站设计底座（Design System）
   ------------------------------------------------------------
   文件名保留 nx-dark.css 是为了不动 13 个页面的引入行；它的实际角色
   已经从「深色覆盖层」变成「唯一的设计底座」：令牌 + 工艺规则都在这里。

   演进史（别再走回头路）：
     v1  发光圆 / 泛金光 / 渐变卡面                  -> 土味特效
     v2  冷黑 #060609 + 青紫极光，!important 压全场  -> 与 tokens 暖黑打架
     v3  收敛为暖黑金，但金色用的是满饱和 #f59e0b    -> 读起来是「币圈/直播打赏」味
     v4  香槟金 + 明度分层 + 面积纪律

   ── 四条铁律（改这份文件前先读） ──
   ① 金色不是「亮黄」，是「香槟金」：主金 #E8B44A（对暗底 10.4:1）。
      满饱和琥珀会立刻廉价化，这是「统一了配色还是土」的真正原因。
   ② 金色面积 <= 10%，且只允许出现在四处：每屏唯一的主行动填充、当前项指示、
      链接文字、hero 里一个视觉元素。选中态一律用 12% 金色暗底 + 金字，
      不用实心金块铺底（实心金只留给主行动）。
   ③ 层次靠明度不靠色相：相邻两个面的对比度只差 1.05-1.17，超过 1.3 就显脏。
   ④ 圆角、阴影、字号一律走下面的令牌，页面里不得再出现裸值。
   ============================================================ */

@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;
  src:url(https://cdn.jsdelivr.net/npm/@fontsource-variable/space-grotesk@5/files/space-grotesk-latin-wght-normal.woff2) format("woff2-variations")}

/* ═══════════════════ 1. 令牌 ═══════════════════ */
:root{
  /* ---- 中性阶：暖近黑，相邻面差距刻意压小（对比度 1.05 / 1.10 / 1.17） ---- */
  --bg-0:      #0c0b0a;
  --bg-1:      #141312;
  --bg-2:      #181716;
  --bg-3:      #1c1b1a;
  --bg-deep:   #080806;

  /* ---- 描边：发丝线走白 alpha（能贴在任意面上），实心档给卡片用 ---- */
  --line-1:    rgba(255,255,255,.07);
  --line-2:    rgba(255,255,255,.12);
  --line-3:    rgba(255,255,255,.20);
  --line-solid:#242322;
  --line-solid-2:#2c2a28;

  /* ---- 香槟金三档 ---- */
  --gold:      #e8b44a;
  --gold-hi:   #f5c451;
  --gold-dim:  #9c8442;   /* 5.4:1（原 #8a7433 当文字只有 4.3:1，暗金标签偏糊） */
  --gold-tint: rgba(232,180,74,.12);
  --gold-tint-2:rgba(232,180,74,.07);
  --gold-on:   #121214;
  --mono-num:  tabular-nums;

  /* ---- 文字：四档，全部实算过对比度 ---- */
  --fg-1:      #edeae4;
  --fg-2:      #c4bfb6;
  --fg-3:      #97918a;
  --fg-4:      #8a837a;   /* 5.1:1（原 #6b6660 只有 3.4:1，说明文字/时间戳偏糊） */

  /* ---- 语义色：--warn 必须与金色拉开，否则警示和强调分不清 ---- */
  --ok:        #3fb950;
  --warn:      #e8813a;
  --danger:    #f85149;
  --info:      #6b9fef;
  --ok-soft:   rgba(63,185,80,.13);
  --warn-soft: rgba(232,129,58,.13);
  --danger-soft:rgba(248,81,73,.12);
  --info-soft: rgba(107,159,239,.13);

  /* ---- 圆角阶梯：只允许这五档 ---- */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  20px;
  --r-pill:999px;

  /* ---- 字阶 ---- */
  --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-15:15px;
  --fs-16:16px; --fs-18:18px; --fs-20:20px; --fs-24:24px;
  --fs-28:28px; --fs-36:36px; --fs-48:48px;

  /* ---- 行高 ---- */
  --lh-body:   1.75;
  --lh-tight:  1.3;
  --lh-display:1.22;

  /* ---- 版心 ---- */
  --shell-w:   1360px;
  --prose-w:   720px;

  /* ---- 动效：只有三档，交互反馈一律 <=150ms ---- */
  --dur-1:     150ms;
  --dur-2:     250ms;
  --dur-3:     420ms;
  --ease-out:  cubic-bezier(.16,1,.3,1);

  /* ---- 阴影：暗色下基本取消，只留浮层投影 ---- */
  --sh-1:      none;
  --sh-2:      0 1px 2px rgba(0,0,0,.28);
  --sh-3:      0 8px 24px rgba(0,0,0,.34);
  --sh-4:      0 16px 48px rgba(0,0,0,.44);

  /* ---- 字体栈：必须写全，只写 -apple-system 在 Windows 会掉到默认 ---- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "HarmonyOS Sans SC", "MiSans", "Noto Sans SC", "Hiragino Sans GB",
          "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  --font-latin: "Space Grotesk", var(--font);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* ============================================================
     2. 兼容别名 —— 把 tokens.css / member.css / admin.css 已有的变量名
        指向上面的新值，老样式表不用改一行就跟着换肤。
     ============================================================ */
  --bg:        var(--bg-0);
  --surface:   rgba(255,255,255,.035);
  --surface-2: rgba(255,255,255,.06);
  --surface-3: rgba(255,255,255,.10);
  --card:      var(--bg-2);
  --card-2:    var(--bg-2);
  --card-3:    var(--bg-3);
  --border:    var(--line-1);
  --border-soft:rgba(255,255,255,.05);
  --border-strong:var(--line-3);
  --text:      var(--fg-1);
  --text-2:    var(--fg-2);
  --muted:     var(--fg-3);
  --faint:     var(--fg-4);
  --field-bg:  rgba(255,255,255,.04);
  --field-text:var(--fg-1);
  --editor-bg: var(--bg-1);
  --toolbar-bg:var(--bg-2);
  --toolbar-bg2:var(--gold-tint-2);
  --side-bg:   var(--bg-1);
  --side-text: var(--fg-3);
  --side-active:var(--gold);
  --side-active-bg: var(--gold-tint);
  --side-active-text: var(--gold);
  --radius-sm: var(--r-sm);
  --radius:    var(--r-md);
  --radius-lg: var(--r-lg);
  --shadow:    var(--sh-2);
  --shadow-lg: var(--sh-3);
  --scrim:     rgba(0,0,0,.62);
  --scrim-strong: rgba(0,0,0,.88);
  --on-fill:   #fff;
  --watermark: rgba(255,255,255,.07);

  /* ---- 品牌色：全部落到香槟金三档 ---- */
  --brand-1:   var(--gold);
  --brand-2:   var(--gold-dim);
  --brand-3:   var(--gold-hi);
  --brand-1-rgb: 232 180 74;
  --brand-2-rgb: 138 116 51;
  --brand-3-rgb: 245 196 81;
  --brand-strong: var(--gold);
  --brand-text:   var(--gold);
  --brand-soft:   var(--gold-tint);
  --brand-softer: var(--gold-tint-2);
  --brand-ring:   rgba(232,180,74,.28);
  --brand-2-ring: rgba(232,180,74,.18);
  --brand-grad:   linear-gradient(180deg, var(--gold-hi), var(--gold));
  --brand-grad-135:linear-gradient(180deg, var(--gold-hi), var(--gold));
  --brand-on:     var(--gold-on);

  /* ---- 语义兼容别名 ---- */
  --ok-rgb:    63 185 80;
  --warn-rgb:  232 129 58;
  --danger-rgb:248 81 73;
  --lime:      var(--gold);
  --lime-2:    var(--gold-hi);
  --lime-soft: var(--gold-tint);
  --lime-ring: rgba(232,180,74,.28);
  --ok-text:   #56d364;
  --warn-text: #eda05f;
  --danger-text:#ff7b72;
  --info-text: #93c5fd;
  --ok-ring:   rgba(63,185,80,.3);
  --warn-ring: rgba(232,129,58,.3);
  --danger-ring:rgba(248,81,73,.3);
  --info-ring: rgba(107,159,239,.3);
  --on-lime:   var(--gold-on);

  /* ---- 浅色孤岛（刻意不翻色的容器）---- */
  --island:      #17161a;
  --island-2:    #1d1c20;
  --island-3:    #101013;
  --island-text: var(--fg-1);
  --island-muted:var(--fg-2);
  --island-faint:var(--fg-4);
  --island-border:var(--line-2);
  --island-ok:   var(--ok);

  /* ---- 旧代码里的 --g-* 别名 ---- */
  --g-1: var(--gold);
  --g-2: var(--gold-hi);
  --g-3: var(--gold-dim);
  --g-soft: var(--gold-tint);
  --g-ring: rgba(232,180,74,.34);
  --g-line: rgba(232,180,74,.30);

  color-scheme: dark;
}

/* ============================================================
   浅色模式令牌（2026-09-12 修主人实测的「字体显示看不清楚」）
   ------------------------------------------------------------
   根因：本文件是「唯一设计底座」，可 :root 里**全是深色令牌**；tokens.css 的浅色块
   只覆盖 --bg/--card/--text/--muted 那几个名字 —— nx-dark 自己的 --fg-1..4 没人改。
   于是切到白天模式后，正文用的还是深色主题的近白色：
     --fg-1 #edeae4 画在 #faf7f0 上 = 1.05:1（几乎看不见）、--fg-2 #c4bfb6 = 1.5:1、
     --fg-3 #97918a = 2.6:1 —— 全部远低于 WCAG AA 的 4.5:1。
   这就是表单标签、占位符、说明文字、禁用按钮在白天模式下"糊成一片"的原因。

   两条覆盖路径都要管（theme.js 只在**显式选择/锁定**时才写 data-theme）：
     ① 用户点了「白天模式」→ html[data-theme="light"]
     ② 没点过、系统是浅色 → html 上根本没有 data-theme，只能靠媒体查询
   两块的声明值必须保持一致（下面每档都标了实算对比度）。
   ============================================================ */
html[data-theme="light"] {
  color-scheme: light;            /* 让表单控件/滚动条也跟着变浅色 */

  /* 面：相邻面只差一点明度，别用彩色 */
  --bg-0:      #faf7f0;
  --bg-1:      #f3ede2;
  --bg-2:      #ffffff;           /* = 卡片面 */
  --bg-3:      #f4efe5;
  --bg-deep:   #ece5d8;

  /* 描边：浅底上必须走黑 alpha（白 alpha 会完全看不见） */
  --line-1:     rgba(15,23,42,.10);
  --line-2:     rgba(15,23,42,.14);
  --line-3:     rgba(15,23,42,.22);
  --line-solid: #e6ded0;
  --line-solid-2:#dcd3c4;

  /* 阴影：浅底靠投影分层，深色下那套"取消阴影"反而让卡片糊在一起 */
  --sh-1: none;
  --sh-2: 0 1px 2px rgba(15,23,42,.06);
  --sh-3: 0 6px 20px rgba(15,23,42,.10);
  --sh-4: 0 16px 48px rgba(15,23,42,.14);

  /* 文字四档 —— 全部实算过（对着 #faf7f0 / #ffffff）
     2026-09-18 修正 --fg-4：原 #7a7164 对最亮的 --bg-0 #faf7f0 只有 4.49:1，
     差 0.01 卡在 WCAG AA 线下（画布列表页"1 个画布""暂无生成成果"实测 4.49 不达标）。
     换成 #6e6556 后最差面（--bg-deep #ece5d8）也有 4.58:1，六种浅色面全部达标。 */
  --fg-1: #0f172a;                /* 16.7:1  标题/正文主色 */
  --fg-2: #3f3a31;                /* 10.6:1  段落文字 */
  --fg-3: #6b6252;                /*  5.6:1  次要说明（原来是 2.6:1） */
  --fg-4: #6e6556;                /*  4.6:1  占位符/最浅提示（原 #7a7164 只有 4.49:1） */

  /* 金：填充仍是香槟金（配 --gold-on 深字），但"金色文字"必须换成暗金。
     关键依据：全项目没有任何规则拿 --brand-1 当**背景填充**（填充一律走 --brand-grad-*
     与 --gold/--gold-hi；nx-dark.css 还把 --brand-grad-135 覆写成纯金渐变），
     而 --brand-1 被大量当作**文字色**用（余额数字、流水 +10、kind-tag、顶栏当前项、--accent 别名…）。
     所以浅色下整体压暗 --brand-1 是安全的：文字全部变可读，按钮填充一点不动。 */
  --brand-1:     #7d5f14;         /*  5.6:1（原 #e8b44a 在白底只有 1.9:1） */
  --brand-1-rgb: 125 95 20;
  --gold-dim:  #7d5f14;           /*  5.6:1  金色文字/链接 */
  --brand-2-rgb: 125 95 20;
  --brand-text: #7d5f14;
  --brand-2:   #7d5f14;

  /* 语义色：浅底上用深一档的实色（深色那套 #56d364 在浅底是 1.4:1） */
  --ok:     #067647;   --ok-text:     #067647;   --ok-ring:     rgba(6,118,71,.26);
  --warn:   #b45309;   --warn-text:   #b45309;   --warn-ring:   rgba(180,83,9,.26);
  --danger: #c2251f;   --danger-text: #c2251f;   --danger-ring: rgba(194,37,31,.24);
  --info:   #1d4ed8;   --info-text:   #1d4ed8;   --info-ring:   rgba(29,78,216,.24);
  --ok-soft:     rgba(6,118,71,.10);
  --warn-soft:   rgba(180,83,9,.11);
  --danger-soft: rgba(194,37,31,.09);
  --info-soft:   rgba(29,78,216,.09);

  /* 半透明面层：深色那套是"白 alpha"，浅底上等于不存在 */
  --surface:   rgba(15,23,42,.035);
  --surface-2: rgba(15,23,42,.055);
  --surface-3: rgba(15,23,42,.09);
  --border-soft: rgba(15,23,42,.07);
  --field-bg:  #ffffff;
  --field-text:#0f172a;
  --editor-bg: #ffffff;
  --toolbar-bg:#f0ebe0;
  --side-bg:   #ffffff;
  --side-text: #5c5344;           /*  7.1:1 */
  --side-active-text: #1c1200;
  --scrim:        rgba(15,23,42,.45);
  --scrim-strong: rgba(15,23,42,.82);
  --on-fill:      #ffffff;
  --watermark:    rgba(15,23,42,.08);

  /* 深色孤岛必须自锁颜色：岛内底色仍是近黑，用浅色的 --fg-* 会变成黑字黑底 */
  --island-text:  #edeae4;
  --island-muted: #c4bfb6;
  --island-faint: #8f8a82;
  --island-border:rgba(255,255,255,.12);
}

/* 跟随系统浅色（用户没显式选过主题时才走这里；值与上面完全一致） */
/* 跟随系统浅色（已停用 · 2026-09-18）
   原来是 @media (prefers-color-scheme: light) + html:not([data-theme])：用户没显式选过
   主题时跟随操作系统。主人要求「网站默认暗色，必须手动才能调成亮色」，而主题引擎现在
   在首帧前就把没选过偏好的情况显式写成 data-theme="dark"（见 static/ding/static/js/theme.js），
   那个 :not([data-theme]) 永远不会命中，整块变成死代码。
   为免后人看到这块以为"还没做默认暗色"又改回去，这里删掉；浅色值一个字未丢——
   上面 html[data-theme="light"] 块里有一份逐变量完全相同的拷贝（已逐个核对）。 */

/* ═══════════════════ 3. 基础 ═══════════════════ */
html{background:var(--bg-0)}
body{
  background-color:var(--bg-0);
  background-image:radial-gradient(1100px 480px at 50% -18%, rgba(232,180,74,.045), transparent 64%);
  background-repeat:no-repeat;
  background-attachment:fixed;
  color:var(--fg-1);
  font-family:var(--font-latin);
  font-size:var(--fs-14);
  line-height:var(--lh-body);
  font-variant-numeric:var(--mono-num);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
::selection{background:rgba(232,180,74,.26);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.13);border-radius:6px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.22);background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}
/* 浅色模式：选中色与滚动条原本走白 alpha，浅底上等于不存在（选中白字也看不见） */
html[data-theme="light"] ::selection{background:rgba(232,180,74,.34);color:#1c1200}
html[data-theme="light"] ::-webkit-scrollbar-thumb{background:rgba(15,23,42,.22);border-radius:6px;border:2px solid transparent;background-clip:content-box}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover{background:rgba(15,23,42,.34)}

/* ═══════════════════ 4. 排版 ═══════════════════
   暗底上同字重感知偏虚，标题一律 700（500 与 400 在暗底几乎无差别），禁用 300。
   中文行高给到 1.75，比西文需要更舒展。 */
h1,h2,h3,h4,h5{color:var(--fg-1);font-weight:700;line-height:var(--lh-tight);letter-spacing:-.01em}
h1{font-size:clamp(30px,4.2vw,48px);line-height:var(--lh-display);letter-spacing:-.022em}
h2{font-size:clamp(22px,2.6vw,32px)}
h3{font-size:var(--fs-18)}
h4{font-size:var(--fs-15)}
p{line-height:var(--lh-body);color:var(--fg-2)}
strong,b{font-weight:700;color:var(--fg-1)}
small{font-size:var(--fs-12);color:var(--fg-3)}
hr{border:0;border-top:1px solid var(--line-1)}
/* 正文类元素抬到 15px：原来全站拿 11-13px 当正文用，是「小气」最直接的来源 */
main p,section p,article p,.card>p,.content p{font-size:var(--fs-15)}
.num,.stat b,.q-stat b,[data-num],td.num,th.num{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.prose{max-width:var(--prose-w)}
.prose p{font-size:var(--fs-16);line-height:1.85}

/* ═══════════════════ 5. 图标 ═══════════════════ */
svg.ic,.ic{
  width:1.06em;height:1.06em;flex:0 0 auto;
  vertical-align:-.14em;
  stroke-width:1.6;
}
/* 工作台侧栏是手写内联 SVG（.sic），不是 data-ic 系统，描边单独收敛 */
svg.sic,.sic svg{stroke-width:1.6}
.ic-solid,.liked svg.ic,.is-on svg.ic{fill:currentColor}
svg.ic + span,svg.ic + b,svg.ic + em{margin-left:0}
.g-icon svg.ic{width:1em;height:1em}

/* ═══════════════════ 6. 版心 ═══════════════════
   原来 .wrap 只有 1040px、个人中心 820px（占屏 53%），
   宽屏上就是中间细细一条——这是被明确骂过的。统一放宽到 --shell-w。 */
.wrap,.container,.page-wrap,.detail-wrap,.me-wrap,.member-wrap{
  max-width:var(--shell-w) !important;
}
@media (max-width:1420px){
  .wrap,.container,.page-wrap,.detail-wrap,.me-wrap,.member-wrap{max-width:100% !important}
}

/* ── 页头规范：应用内每一页都该有「页面标题 + 一句话说明」 ──
   原来工作台与钱包直接进卡片、没有 h1，既缺语义层级，也让页面没有起点。 */
.page-hd{margin:0 0 20px}
.page-hd h1{margin:0 0 8px;font-size:clamp(21px,2.4vw,28px);line-height:1.25;letter-spacing:-.02em}
.page-hd p{margin:0;max-width:62ch;font-size:var(--fs-14);line-height:1.7;color:var(--fg-3)}

/* ═══════════════════ 7. 顶栏 ═══════════════════ */
.topbar,.q-header,.nx-nav,.ws-topbar{
  background:rgba(12,11,10,.78) !important;
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--line-1) !important;
}
.dy-global-nav a{border-radius:var(--r-md);transition:color var(--dur-1),background var(--dur-1)}
.dy-global-nav a:hover{color:var(--fg-1);background:var(--surface-2)}
.dy-global-nav a.is-active,.dy-global-nav a[aria-current]{color:var(--gold)}

/* ═══════════════════ 8. 卡片 ═══════════════════
   取消重阴影与整圈渐变描边：层次靠「面比底亮一档 + 一条发丝线」。 */
.card,.feat,.plan-card,.q-card,.nx-mock,.mkt-card,
.reply-card,.post-card,.wx-card,.stat,.q-stat,
.ws-project-item,.skill-card,.ticket-card,.aicard,.panel{
  background:var(--bg-2) !important;
  border:1px solid var(--line-1) !important;
  border-radius:var(--r-lg) !important;
  box-shadow:none !important;
  transition:border-color var(--dur-2),background var(--dur-2),transform var(--dur-2) var(--ease-out) !important;
}
.card:hover,.feat:hover,.plan-card:hover,.post-card:hover{
  border-color:var(--line-2) !important;
  transform:translateY(-2px);
}
.card.is-active,.card[aria-selected="true"]{border-color:var(--gold-tint) !important}
.panel-solid,.card.bg-solid{background:var(--bg-2) !important;border-color:var(--line-1) !important}

/* ═══════════════════ 9. 按钮 ═══════════════════
   每屏只允许一个实心金主行动；其余一律描边幽灵按钮。
   注意 .hero-create：页面用 position:absolute 把它悬浮定位，这里若写
   position:relative 会把它压回文档流、盖住统计数字。凡页面自己定位过的
   按钮都必须从这条规则里排除。 */
.btn:not(.btn-ghost):not(.btn-lime):not(.q-btn--ghost):not(.hero-create),
button.btn-primary,.ws-primary-btn{
  position:relative;overflow:hidden;
  background:var(--gold) !important;
  color:var(--gold-on) !important;
  border:1px solid rgba(0,0,0,.22) !important;
  border-radius:var(--r-md) !important;
  font-weight:700 !important;
  letter-spacing:.005em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30) !important;
  transition:background var(--dur-1),transform var(--dur-1),box-shadow var(--dur-1) !important;
}
.btn:not(.btn-ghost):not(.btn-lime):not(.q-btn--ghost):not(.hero-create)::after{
  content:"";position:absolute;top:-20%;bottom:-20%;left:-70%;width:40%;
  transform:skewX(-22deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transition:left .7s var(--ease-out);
}
.btn:not(.btn-ghost):not(.btn-lime):not(.q-btn--ghost):not(.hero-create):hover::after{left:132%}
.btn:not(.btn-ghost):not(.btn-lime):not(.q-btn--ghost):not(.hero-create):hover{
  background:var(--gold-hi) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 3px var(--gold-tint) !important;
}
.btn:not(.btn-ghost):not(.btn-lime):not(.q-btn--ghost):not(.hero-create):active{transform:translateY(1px)}
.btn-ghost,.q-btn--ghost{
  border:1px solid var(--line-2) !important;
  background:var(--surface) !important;color:var(--fg-1) !important;
  border-radius:var(--r-md) !important;font-weight:600 !important;
  transition:border-color var(--dur-1),color var(--dur-1),background var(--dur-1) !important;
}
.btn-ghost:hover,.q-btn--ghost:hover{border-color:var(--gold-tint) !important;color:var(--gold) !important;background:var(--gold-tint-2) !important}
/* 禁用态原来是 opacity:.42 —— 浅色模式下主按钮（金底深字）一禁用，文字就糊没了
   （主人实测截图里「立即充值」四个字几乎看不见）。0.62 仍明显弱于可用态，但字读得清。 */
.btn:disabled,.btn[disabled],button:disabled{opacity:.62;cursor:not-allowed !important}
/* .btn-lime 被上面两条规则同时排除（dy-shell 与底座都 :not(.btn-lime)），
   于是落回 member.css 的 10px 裸值——10 不在圆角阶梯里，这里补回来。 */
.btn-lime{border-radius:var(--r-md) !important}
/* 按钮文字不换行、不被 flex 挤扁。
   版心放宽后表单行最容易出这个 bug：input 是 flex:1，按钮一旦可收缩
   就会被压到比文字还窄，中文于是逐字竖排（「发验证码」变成四行）。 */
.btn,button.btn,.btn-ghost{white-space:nowrap}
[class*="-row"]>button,[class*="-row"]>.btn,[class*="-row"]>a.btn{flex:0 0 auto !important;min-width:max-content}

/* ═══════════════════ 10. 表单 ═══════════════════ */
input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select{
  background:var(--field-bg) !important;
  border:1px solid var(--line-2) !important;
  color:var(--fg-1) !important;
  border-radius:var(--r-sm) !important;
  transition:border-color var(--dur-1),background var(--dur-1),box-shadow var(--dur-1) !important;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):hover,textarea:hover,select:hover{border-color:var(--line-3) !important}
input:focus,textarea:focus,select:focus{
  outline:none !important;
  border-color:var(--gold-dim) !important;
  background:rgba(255,255,255,.055) !important;
  box-shadow:0 0 0 3px var(--gold-tint) !important;
}
::placeholder{color:var(--fg-4) !important}
input[type=checkbox],input[type=radio]{accent-color:var(--gold)}
select option{background:var(--bg-3);color:var(--fg-1)}
:focus-visible{outline:2px solid var(--gold-dim) !important;outline-offset:2px !important}
input:-webkit-autofill,textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--fg-1) !important;
  -webkit-box-shadow:0 0 0 1000px var(--bg-2) inset !important;
}

/* ═══════════════════ 11. 表格 ═══════════════════ */
table{border-collapse:collapse}
th{
  color:var(--fg-3) !important;font-weight:700 !important;
  background:transparent !important;
  border-color:var(--line-1) !important;
  font-size:var(--fs-12);letter-spacing:.03em;
}
td{border-color:var(--line-1) !important;color:var(--fg-2)}
tbody tr{transition:background var(--dur-1)}
tbody tr:hover{background:rgba(255,255,255,.028) !important}

/* ═══════════════════ 12. 侧栏 / 子导航 ═══════════════════
   选中态改为「金色 12% 暗底 + 金字 + 左侧 2px 金条」，
   不再用实心金块铺底——实心金只留给主行动。 */
.subnav,.wb-side,.ecnav,.ws-side-nav{background:transparent !important}
.subnav a,.ecnav-item,.ws-side-nav-link{
  border-radius:var(--r-md) !important;
  transition:background var(--dur-1),color var(--dur-1) !important;
}
.subnav a.is-active,.ecnav-item.active,
.wb-side-nav a.active,.ws-side-nav-link.is-active{
  background:var(--gold-tint) !important;
  color:var(--gold) !important;font-weight:700 !important;
  border-color:transparent !important;
  box-shadow:inset 2px 0 0 var(--gold) !important;
}
.subnav a:not(.is-active):hover,.ecnav-item:not(.active):hover,
.wb-side-nav a:not(.active):hover{
  background:var(--surface-2) !important;color:var(--fg-1) !important}

/* ═══════════════════ 13. 标签 ═══════════════════ */
.chip,.badge,.tag,[class*="tag"]:not(.cat-tag):not(.pin-tag):not(.feat-tag):not(.best-tag){
  border-radius:var(--r-pill);
}
.cat-tag,.pin-tag,.feat-tag,.best-tag{border:1px solid var(--line-2)}
.mk-panel{background:var(--surface) !important;border-color:var(--line-1) !important}

/* ═══════════════════ 14. 链接 ═══════════════════ */
a{transition:color var(--dur-1)}
a:hover{color:var(--gold-hi)}
main a:not(.btn):not(.btn-ghost):hover{color:var(--gold-hi)}

/* ═══════════════════ 15. 空状态 ═══════════════════ */
.empty,.empty-state,[class*="empty"] p{color:var(--fg-3)}
.empty svg.ic,[class*="empty"] svg.ic{opacity:.38}

/* ═══════════════════ 16. 会员价数字 ═══════════════════ */
.plan-card .price{font-style:normal !important;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* ═══════════════════ 17. 固定深色：隐藏「白天模式」切换 ═══════════════════
   2026-09-18：画布两页解锁亮色后需要切换入口，所以这里放行画布自己的那个开关
   （id=canvasThemeSwitch，由 common.js 在 body.dy-canvas 下渲染，事件走
   static/js/theme.js 的 [data-theme-toggle] 契约）。其余页面维持原样，一行未改。
   注意别放行 #themeSwitch：那是 DING 主题引擎（static/ding/static/js/theme.js）的开关，
   它只写 data-theme 不管画布的 .theme-dark 类，点了会出现「浅色令牌 + 深色类」的混搭。 */
.theme-switch:not(#canvasThemeSwitch),
.q-theme,
#themeSwitch:not(#canvasThemeSwitch){display:none !important}

/* ═══════════════════ 18. 画布列表（惊蛰整包 · Tailwind 浅色）适配 ═══════════════════ */
body.dy-shell .wb-home{background:transparent !important;color:var(--fg-1) !important}
body.dy-shell .wb-home h1,body.dy-shell .wb-home h2,
body.dy-shell .wb-home h3,body.dy-shell .wb-home b{color:var(--fg-1) !important}
body.dy-shell .wb-home .muted,body.dy-shell .wb-home p{color:var(--fg-3) !important}
body.dy-shell .ws-topbar{background:rgba(12,11,10,.82) !important;border-bottom:1px solid var(--line-1) !important}
body.dy-shell .ws-icon-btn,body.dy-shell .wb-icon-action{
  background:var(--surface) !important;color:var(--fg-1) !important;
  border:1px solid var(--line-1) !important;border-radius:var(--r-md) !important;
  transition:border-color var(--dur-1),color var(--dur-1),background var(--dur-1) !important}
body.dy-shell .ws-icon-btn:hover,body.dy-shell .wb-icon-action:hover{
  border-color:var(--gold-tint) !important;color:var(--gold) !important;background:var(--gold-tint-2) !important}
body.dy-shell .wb-intent-card{
  background:var(--bg-2) !important;
  border:1px solid var(--line-1) !important;color:var(--fg-1) !important;
  border-radius:var(--r-lg) !important;
  transition:border-color var(--dur-2),transform var(--dur-2) var(--ease-out) !important}
body.dy-shell .wb-intent-card:hover{border-color:var(--gold-tint) !important;transform:translateY(-2px) !important}
body.dy-shell .wb-continue-item{
  background:var(--surface) !important;color:var(--fg-1) !important;
  border:1px solid var(--line-1) !important;border-radius:var(--r-md) !important}
body.dy-shell .wb-continue-item:hover{border-color:var(--gold-tint) !important}
body.dy-shell .ws-newproj-input,body.dy-shell .trigger,body.dy-shell .menu{
  background:var(--bg-3) !important;color:var(--fg-1) !important;border-color:var(--line-2) !important}
body.dy-shell .ws-project-item{color:var(--fg-1) !important}
body.dy-shell .ws-mini-btn{background:var(--surface) !important;color:var(--fg-1) !important;border:1px solid var(--line-1) !important}
body.dy-shell .ws-trash-entry{color:var(--fg-3) !important}
body.dy-shell .ws-side-nav-link.is-active{
  background:var(--gold-tint) !important;color:var(--gold) !important;
  box-shadow:inset 2px 0 0 var(--gold) !important}
body.dy-shell .ws-side-nav-link.is-active svg{color:var(--gold) !important}

/* ═══════════════════ 19. 移动端 ═══════════════════ */
@media (max-width:760px){
  body.dy-canvas .workspace{flex-direction:column !important;height:auto !important;min-height:100vh;overflow:visible !important}
  body.dy-canvas .ws-sidebar{flex:0 0 auto !important;width:100% !important;max-height:36vh !important;
    min-width:0 !important;border-right:none !important;border-bottom:1px solid var(--line-1) !important;
    overflow-y:auto}
  body.dy-canvas .wb-home{width:100% !important}
  .topbar{flex-wrap:wrap !important;row-gap:8px;padding:10px 14px !important}
  .topbar-left{width:100%;flex-wrap:wrap;row-gap:6px}
  .topbar .brand{white-space:nowrap}
  .dy-global-nav{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
    display:flex !important;gap:16px;padding-bottom:2px;scrollbar-width:none !important}
  .dy-global-nav::-webkit-scrollbar{display:none}
  .dy-global-nav a{white-space:nowrap;flex:0 0 auto}
  .top-actions{margin-left:auto !important}
  .card,.feat,.plan-card{border-radius:var(--r-md) !important}
}

/* ═══════════════════ 20. 无障碍：尊重减少动效 ═══════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ═══════════════════ 21. 浅色模式反制（2026-09-12） ═══════════════════
   背景：主人实测「白天模式下字体显示看不清楚」。根因是本文件里的**硬编码深色**：
     ① 顶栏写死 rgba(12,11,10,.78) —— 浅色下文字翻成深色，等于黑字黑底（品牌名实测 1.1:1）；
     ② 侧栏/子导航选中项是「金字 + 金色暗底」—— 同色相相叠只有 1.6:1（实测），完全读不出。
   这两条原始规则都带 !important，反制必须同样 !important 且选择器更具体，故写在本文件末尾。
   浅色下：顶栏改半透明白；选中项改「金色暗底 + 暗金字 #7d5f14 = 5.6:1」。
   （两段声明值须一致：显式选白天 / 跟随系统浅色各一段。） */
html[data-theme="light"] .topbar,
html[data-theme="light"] .q-header,
html[data-theme="light"] .nx-nav,
html[data-theme="light"] .ws-topbar{background:rgba(255,255,255,.88) !important}

html[data-theme="light"] .subnav a.is-active,
html[data-theme="light"] .ecnav-item.active,
html[data-theme="light"] .wb-side-nav a.active,
html[data-theme="light"] .ws-side-nav-link.is-active{
  background:rgba(232,180,74,.18) !important;
  color:#7d5f14 !important;
  box-shadow:inset 2px 0 0 #7d5f14 !important;
}

/* 原来这里还有一段 @media (prefers-color-scheme: light){ html:not([data-theme="dark"]) ... }，
   声明值与上面 600-610 行完全相同，已删（2026-09-18）。
   删的理由：颜色不该取决于操作系统。那段只在「系统是浅色」时生效，于是**用户显式点了白天模式、
   但系统恰好是深色**时，顶栏和选中态拿不到浅色反制 —— 同一次选择，观感时有时无。
   上面用 html[data-theme="light"] 的一段就够：引擎会在用户主动选择后写这个属性。 */