/* ============================================================================
   skins.css —— 皮肤配色层（v3.10 · 2026-10-19 · 用户拍板「换肤只改颜色」）

   ★ 定位：本表**只覆盖颜色令牌**，不含任何布局 / 间距 / 字号 / 圆角 / 位移规则。
     `data-skin` 只是「另一套配色」，`data-theme`（深/浅）仍是原维度 ⇒ 两维正交：
         html[data-theme="dark|light"][data-skin="cool|amber|bamboo|begonia|jilan|mushanzi"]
     默认皮肤＝cool（青蓝），其值一律由 tech.css 提供；本表**没有 cool 的块**，
     所以「不带 data-skin 或 data-skin="cool"」时本表零生效 ⇒ 默认皮肤像素级不变。

   ★ 层级（spec 优先级）：
       .t-root                                   (0,1,0) ← tech.css 默认块
       [data-skin="..."] .t-root                 (0,2,0) ← 本表：皮肤·深
       [data-theme="light"] .t-root              (0,2,0) ← tech.css 浅色块（同层，靠源序）
       [data-theme="light"][data-skin="..."] .t-root (0,3,0) ← 本表：皮肤·浅（最高）
     本表在 tech.css **之后**引入 ⇒ 同层也压得住。

   ★ 刻意不动的部分（属「图上的颜色」，与皮肤无关）：
       .t-d-plate .vt 封面铭牌（#eef3f5 / rgba(238,243,245,*)）、
       模态遮罩 rgba(8,18,24,.62)、玻璃高光 rgba(255,255,255,.05~.16)、
       成功横幅的语义绿 #2ecc71。
   ========================================================================== */

/* ── 1. 赭石 · 深（暖纸底 + 琥珀主色）────────────────────────────────────── */
[data-skin="amber"] .t-root{
  --bg:#14100c; --bg-2:#1d1712;
  --panel:rgba(255,236,214,.05); --panel-2:rgba(255,236,214,.08);
  --line:rgba(255,226,190,.11); --line-2:rgba(255,226,190,.065);
  --fg:#f5eee3; --fg-2:#c2b09a; --fg-3:#9f8d77;
  --acc:#f4a548; --acc-2:#d96a45; --acc-3:#8fc47a; --warn:#ff8577;

  --acc-rgb:244,165,72; --acc-2-rgb:217,106,69; --acc-3-rgb:143,196,122;
  --shadow-rgb:36,22,8;
  --cta-b:#d9822b; --on-acc:#1c1207; --cta-ink:#1c1207;
  --fallback-a:#241a12; --fallback-b:#160e07;
}

/* ── 1. 赭石 · 浅（米纸底 + 赭石主色）──────────────────────────────────── */
[data-theme="light"][data-skin="amber"] .t-root{
  --bg:#f7f3eb; --bg-2:#eee7dc;
  --panel:rgba(255,255,255,.72); --panel-2:#fffdf8;
  --line:rgba(58,40,24,.14); --line-2:rgba(58,40,24,.08);
  --fg:#241a12; --fg-2:#5d4a37; --fg-3:#7b6752;
  --acc:#9c4f12; --acc-2:#b04a2e; --acc-3:#4d7a3a; --warn:#a82a1c;

  --acc-rgb:156,79,18; --acc-2-rgb:176,74,46; --acc-3-rgb:77,122,58;
  --shadow-rgb:58,40,24;
  --cta-b:#7a3c0d; --on-acc:#fff; --cta-ink:#fff;
  --fallback-a:#2a1d12; --fallback-b:#1a1108;
}

/* ── 2. 竹青 · 深（墨玉修竹 + 碧翠主色）──────────────────────────────────── */
[data-skin="bamboo"] .t-root{
  --bg:#0a130e; --bg-2:#111c15;
  --panel:rgba(230,255,240,.05); --panel-2:rgba(230,255,240,.08);
  --line:rgba(180,240,205,.12); --line-2:rgba(180,240,205,.065);
  --fg:#ebf5ee; --fg-2:#98b3a1; --fg-3:#75917e;
  --acc:#2ce08c; --acc-2:#3ce5cf; --acc-3:#72e56e; --warn:#ff7e6b;

  --acc-rgb:44,224,140; --acc-2-rgb:60,229,207; --acc-3-rgb:114,229,110;
  --shadow-rgb:4,24,13;
  --cta-b:#1abf70; --on-acc:#04180d; --cta-ink:#04180d;
  --fallback-a:#182b20; --fallback-b:#0e1a13;
}

/* ── 2. 竹青 · 浅（春苔冷宣 + 官绿主色）──────────────────────────────────── */
[data-theme="light"][data-skin="bamboo"] .t-root{
  --bg:#f3f7f4; --bg-2:#e5eee7;
  --panel:rgba(255,255,255,.72); --panel-2:#fafffc;
  --line:rgba(18,48,28,.12); --line-2:rgba(18,48,28,.065);
  --fg:#102316; --fg-2:#3f5446; --fg-3:#5e7566;
  --acc:#0d7a46; --acc-2:#248a7b; --acc-3:#2d7a3a; --warn:#a83820;

  --acc-rgb:13,122,70; --acc-2-rgb:36,138,123; --acc-3-rgb:45,122,58;
  --shadow-rgb:20,45,28;
  --cta-b:#085b33; --on-acc:#fff; --cta-ink:#fff;
  --fallback-a:#14261a; --fallback-b:#0b1710;
}

/* ── 3. 海棠 · 深（暮霭绛云 + 朝霞胭脂）──────────────────────────────────── */
[data-skin="begonia"] .t-root{
  --bg:#140c12; --bg-2:#1c1219;
  --panel:rgba(255,230,240,.05); --panel-2:rgba(255,230,240,.08);
  --line:rgba(255,190,215,.12); --line-2:rgba(255,190,215,.065);
  --fg:#f6eef4; --fg-2:#b8a3b2; --fg-3:#947f8e;
  --acc:#ff5a76; --acc-2:#ba7fed; --acc-3:#6fe287; --warn:#ff7a6b;

  --acc-rgb:255,90,118; --acc-2-rgb:186,127,237; --acc-3-rgb:111,226,135;
  --shadow-rgb:28,5,11;
  --cta-b:#e33556; --on-acc:#1c050b; --cta-ink:#1c050b;
  --fallback-a:#2a1524; --fallback-b:#180a14;
}

/* ── 3. 海棠 · 浅（暮云浅粉 + 海棠红主色）────────────────────────────────── */
[data-theme="light"][data-skin="begonia"] .t-root{
  --bg:#f9f4f5; --bg-2:#efe4e7;
  --panel:rgba(255,255,255,.75); --panel-2:#fffafb;
  --line:rgba(56,22,34,.12); --line-2:rgba(56,22,34,.065);
  --fg:#22111a; --fg-2:#5e4b55; --fg-3:#7a6570;
  --acc:#a82442; --acc-2:#7a3fa0; --acc-3:#457a4a; --warn:#aa2828;

  --acc-rgb:168,36,66; --acc-2-rgb:122,63,160; --acc-3-rgb:69,122,74;
  --shadow-rgb:56,22,34;
  --cta-b:#821630; --on-acc:#fff; --cta-ink:#fff;
  --fallback-a:#291620; --fallback-b:#190b13;
}

/* ── 4. 霁蓝 · 深（青釉夜色 + 天青主色）──────────────────────────────────── */
[data-skin="jilan"] .t-root{
  --bg:#070e17; --bg-2:#0e1824;
  --panel:rgba(210,230,255,.05); --panel-2:rgba(210,230,255,.08);
  --line:rgba(160,205,255,.12); --line-2:rgba(160,205,255,.065);
  --fg:#edf3fa; --fg-2:#96a9c2; --fg-3:#7588a1;
  --acc:#4da3ff; --acc-2:#38e1d5; --acc-3:#63e68c; --warn:#ff7e6b;

  --acc-rgb:77,163,255; --acc-2-rgb:56,225,213; --acc-3-rgb:99,230,140;
  --shadow-rgb:4,13,26;
  --cta-b:#2680e6; --on-acc:#040d1a; --cta-ink:#040d1a;
  --fallback-a:#122238; --fallback-b:#09121f;
}

/* ── 4. 霁蓝 · 浅（白瓷胎骨 + 霁蓝主色）──────────────────────────────────── */
[data-theme="light"][data-skin="jilan"] .t-root{
  --bg:#f2f5f9; --bg-2:#e2e8f2;
  --panel:rgba(255,255,255,.75); --panel-2:#f8faff;
  --line:rgba(20,40,70,.12); --line-2:rgba(20,40,70,.065);
  --fg:#0e1826; --fg-2:#415269; --fg-3:#5e718c;
  --acc:#1a5fb4; --acc-2:#0f858a; --acc-3:#337a4d; --warn:#a83820;

  --acc-rgb:26,95,180; --acc-2-rgb:15,133,138; --acc-3-rgb:51,122,77;
  --shadow-rgb:20,40,70;
  --cta-b:#10458a; --on-acc:#fff; --cta-ink:#fff;
  --fallback-a:#122033; --fallback-b:#0a1320;
}

/* ── 5. 暮山紫 · 深（深紫黛墨 + 霞光紫主色）────────────────────────────────── */
[data-skin="mushanzi"] .t-root{
  --bg:#0e0914; --bg-2:#171020;
  --panel:rgba(240,225,255,.05); --panel-2:rgba(240,225,255,.08);
  --line:rgba(210,180,240,.12); --line-2:rgba(210,180,240,.065);
  --fg:#f5effa; --fg-2:#ab9bb9; --fg-3:#8b7a99;
  --acc:#be7df7; --acc-2:#4de2d0; --acc-3:#6ee28a; --warn:#ff7a6b;

  --acc-rgb:190,125,247; --acc-2-rgb:77,226,208; --acc-3-rgb:110,226,138;
  --shadow-rgb:19,5,33;
  --cta-b:#a858f0; --on-acc:#130521; --cta-ink:#130521;
  --fallback-a:#231433; --fallback-b:#140a1e;
}

/* ── 5. 暮山紫 · 浅（暮霭浅笺 + 暮山紫主色）────────────────────────────────── */
[data-theme="light"][data-skin="mushanzi"] .t-root{
  --bg:#f8f5fa; --bg-2:#ece5f0;
  --panel:rgba(255,255,255,.75); --panel-2:#fdfbfe;
  --line:rgba(50,30,65,.12); --line-2:rgba(50,30,65,.065);
  --fg:#1b1124; --fg-2:#52445e; --fg-3:#70607d;
  --acc:#6f359e; --acc-2:#2a7e88; --acc-3:#387a48; --warn:#a82a20;

  --acc-rgb:111,53,158; --acc-2-rgb:42,126,136; --acc-3-rgb:56,122,72;
  --shadow-rgb:50,30,65;
  --cta-b:#501d78; --on-acc:#fff; --cta-ink:#fff;
  --fallback-a:#241530; --fallback-b:#150b1d;
}

/* ── 6. 丹枫 · 深（焦赭秋夜 + 霜叶红主色）──────────────────────────────────── */
[data-skin="danfeng"] .t-root{
  --bg:#160e0c; --bg-2:#201512;
  --panel:rgba(255,230,225,.05); --panel-2:rgba(255,230,225,.08);
  --line:rgba(255,195,185,.12); --line-2:rgba(255,195,185,.065);
  --fg:#f6ede8; --fg-2:#bfaaa2; --fg-3:#99857d;
  --acc:#f0623a; --acc-2:#e69a37; --acc-3:#86d96a; --warn:#ff7a6b;

  --acc-rgb:240,98,58; --acc-2-rgb:230,154,55; --acc-3-rgb:134,217,106;
  --shadow-rgb:32,10,6;
  --cta-b:#d44720; --on-acc:#1c0804; --cta-ink:#1c0804;
  --fallback-a:#2b1612; --fallback-b:#190b08;
}

/* ── 6. 丹枫 · 浅（米白暖宣 + 丹枫茜红主色）────────────────────────────────── */
[data-theme="light"][data-skin="danfeng"] .t-root{
  --bg:#faf5ee; --bg-2:#efe6da;
  --panel:rgba(255,255,255,.75); --panel-2:#fffaf5;
  --line:rgba(60,25,18,.13); --line-2:rgba(60,25,18,.07);
  --fg:#261914; --fg-2:#5e483e; --fg-3:#7e665b;
  --acc:#b83b1d; --acc-2:#b56a1b; --acc-3:#3e7845; --warn:#aa241c;

  --acc-rgb:184,59,29; --acc-2-rgb:181,106,27; --acc-3-rgb:62,120,69;
  --shadow-rgb:60,25,18;
  --cta-b:#94260d; --on-acc:#fff; --cta-ink:#fff;
  --fallback-a:#291812; --fallback-b:#180d09;
}

/* ── 7. 墨黛 · 深（松烟墨夜 + 冷银黛墨主色）────────────────────────────────── */
[data-skin="modai"] .t-root{
  --bg:#111418; --bg-2:#1a1e24;
  --panel:rgba(235,242,250,.05); --panel-2:rgba(235,242,250,.08);
  --line:rgba(200,215,230,.12); --line-2:rgba(200,215,230,.065);
  --fg:#edf1f5; --fg-2:#b5c0ce; --fg-3:#8f9ba8;
  --acc:#9bb0c7; --acc-2:#e05d5d; --acc-3:#4ecdc4; --warn:#ff7a6b;

  --acc-rgb:155,176,199; --acc-2-rgb:224,93,93; --acc-3-rgb:78,205,196;
  --shadow-rgb:8,12,16;
  --cta-b:#7088a3; --on-acc:#0a1017; --cta-ink:#0a1017;
  --fallback-a:#1e242c; --fallback-b:#101418;
}

/* ── 7. 墨黛 · 浅（冷宣纸底 + 徽墨黛色主色）────────────────────────────────── */
[data-theme="light"][data-skin="modai"] .t-root{
  --bg:#f4f5f7; --bg-2:#e5e7eb;
  --panel:rgba(255,255,255,.78); --panel-2:#fafbfc;
  --line:rgba(30,41,59,.13); --line-2:rgba(30,41,59,.07);
  --fg:#1a202c; --fg-2:#4a5568; --fg-3:#596677;
  --acc:#2d3d52; --acc-2:#9c2a2a; --acc-3:#1f6d68; --warn:#aa321c;

  --acc-rgb:45,61,82; --acc-2-rgb:156,42,42; --acc-3-rgb:31,109,104;
  --shadow-rgb:30,41,59;
  --cta-b:#1b2636; --on-acc:#fff; --cta-ink:#fff;
  --fallback-a:#222c38; --fallback-b:#141b24;
}

/* ── 8. 沧浪 · 深（深潭寒碧 + 荧光水碧主色）────────────────────────────────── */
[data-skin="canglang"] .t-root{
  --bg:#091414; --bg-2:#101e1e;
  --panel:rgba(215,255,255,.05); --panel-2:rgba(215,255,255,.08);
  --line:rgba(165,245,245,.12); --line-2:rgba(165,245,245,.065);
  --fg:#e8f4f4; --fg-2:#95b5b5; --fg-3:#749696;
  --acc:#3ecdc7; --acc-2:#40aae8; --acc-3:#6fe29b; --warn:#ff7a6b;

  --acc-rgb:62,205,199; --acc-2-rgb:64,170,232; --acc-3-rgb:111,226,155;
  --shadow-rgb:3,22,22;
  --cta-b:#23b0aa; --on-acc:#031716; --cta-ink:#031716;
  --fallback-a:#122b2b; --fallback-b:#091818;
}

/* ── 8. 沧浪 · 浅（冰川水绿 + 沧浪青碧主色）────────────────────────────────── */
[data-theme="light"][data-skin="canglang"] .t-root{
  --bg:#f0f6f6; --bg-2:#e0ecec;
  --panel:rgba(255,255,255,.75); --panel-2:#f7fdfd;
  --line:rgba(18,48,49,.13); --line-2:rgba(18,48,49,.07);
  --fg:#0f2122; --fg-2:#3d5657; --fg-3:#5a7677;
  --acc:#156f6c; --acc-2:#166894; --acc-3:#2a7a4b; --warn:#aa3222;

  --acc-rgb:21,111,108; --acc-2-rgb:22,104,148; --acc-3-rgb:42,122,75;
  --shadow-rgb:18,48,49;
  --cta-b:#0c5553; --on-acc:#fff; --cta-ink:#fff;
  --fallback-a:#132626; --fallback-b:#0a1717;
}

/* 跳转链接聚焦态的字色在 tech.css 里是字面 #04121a（默认皮肤零变化）
   ⇒ 各浅色皮肤主色底上近黑字对比不足，统一提白。 */
[data-theme="light"][data-skin] .t-root .skip:focus{color:#fff}

/* ============================================================================
   下拉点选面板（Dropdown Menu）与色标 Swatch
   ★ 浮层采用 position:absolute 脱离文档流，展开收起绝对不影响页面任何元素几何尺寸
   ============================================================================ */
.t-skin-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
}

/* 下拉面板容器 */
.t-skin-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:164px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--r-card, 14px);
  box-shadow:0 12px 36px rgba(var(--shadow-rgb),.28), 0 2px 8px rgba(var(--shadow-rgb),.12);
  padding:6px;
  z-index:120;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
}
.t-skin-menu[hidden]{
  display:none !important;
}

/* 列表区 */
.t-skin-list{
  display:flex;
  flex-direction:column;
  gap:2px;
}

/* 单项按钮 */
.t-skin-item{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:7px 8px;
  border:1px solid transparent;
  border-radius:calc(var(--r-card, 14px) - 6px);
  background:transparent;
  color:var(--fg-2);
  font-family:inherit;
  font-size:13px;
  line-height:1;
  text-align:left;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
  box-sizing:border-box;
}
.t-skin-item:hover,
.t-skin-item:focus-visible{
  background:var(--panel-2, rgba(255,255,255,.08));
  color:var(--fg);
  outline:none;
}
.t-skin-item[aria-selected="true"]{
  background:var(--panel, rgba(255,255,255,.05));
  border-color:var(--line);
  color:var(--fg);
  font-weight:600;
}

/* 双拼色圆形色标 */
.t-skin-swatch{
  width:13px;
  height:13px;
  border-radius:50%;
  flex-shrink:0;
  background:linear-gradient(135deg, var(--sw-l) 50%, var(--sw-d) 50%);
  box-shadow:0 0 0 1px rgba(var(--shadow-rgb),.2), inset 0 0 0 1px rgba(255,255,255,.2);
}

/* 皮肤文字与标签 */
.t-skin-name{
  flex:1;
  display:flex;
  align-items:center;
  gap:4px;
}
.t-skin-tag{
  font-size:10px;
  font-weight:400;
  padding:1px 4px;
  border-radius:4px;
  background:var(--line);
  color:var(--fg-3);
  transform:scale(.9);
}

/* 选中勾 */
.t-skin-check{
  font-size:12px;
  color:var(--acc);
  opacity:0;
  transition:opacity .15s ease;
}
.t-skin-item[aria-selected="true"] .t-skin-check{
  opacity:1;
}

/* 底部「更多传统色」折叠抽屉 */
.t-skin-more-wrap{
  margin-top:4px;
  padding-top:4px;
  border-top:1px solid var(--line-2, rgba(255,255,255,.06));
}
.t-skin-more-btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:6px 8px;
  border:none;
  border-radius:calc(var(--r-card, 14px) - 6px);
  background:transparent;
  color:var(--fg-3);
  font-family:inherit;
  font-size:12px;
  cursor:pointer;
  transition:color .15s ease, background .15s ease;
  box-sizing:border-box;
}
.t-skin-more-btn:hover,
.t-skin-more-btn:focus-visible{
  background:var(--panel-2, rgba(255,255,255,.05));
  color:var(--fg-2);
  outline:none;
}
.t-skin-more-arrow{
  font-size:11px;
  transition:transform .2s ease;
}
.t-skin-more-btn[aria-expanded="true"] .t-skin-more-arrow{
  transform:rotate(180deg);
}
.t-skin-more-panel{
  padding:6px 8px 4px;
}
.t-skin-more-panel[hidden]{
  display:none !important;
}
.t-skin-more-tip{
  font-size:11px;
  line-height:1.4;
  color:var(--fg-3);
  background:var(--panel, rgba(255,255,255,.03));
  border:1px dashed var(--line);
  border-radius:6px;
  padding:6px 8px;
  text-align:center;
}