/* ============================================================================
   皮肤系统 · skins.css（2026-11-07，D32）

   设计约束
   1. 皮肤只覆盖「颜色 / 阴影」token，不改圆角、间距、字号、布局与单据版式；
      结构维度仍由「经典 / iOS」两套风格（body.ui-ios）决定，两者正交、可自由组合。
   2. classic 为默认皮肤，本文件对它**零覆盖**（:not([data-skin="classic"])），
      保证「切回经典」= 100% 回到改动前的视觉，可随时回退。
   3. 变量定义在 body 上且本文件最后加载，特异性高于 theme-ios.css 的 body.ui-ios，
      因此 iOS 风格下皮肤同样生效。
   4. 单据预览 / _render.html 是独立文档，不加载本文件 → 1:1 版式不受任何影响。

   参考：网易云音乐 PC 客户端可观察的设计语言（红黑配色、暗侧栏、品牌红贯穿选中态与图标、
   磨砂顶栏、克制的滑动反馈），以及网易设计团队公开强调的「一致性：色彩 / 文本 / 控件 /
   交互逻辑统一」。网易并未公开一份名为「软件设计规范」的官方设计系统文档，此处为对其
   客户端视觉语言的归纳，不是引用官方规范条款。
   ========================================================================== */

/* ---------- 皮肤无关的派生色（用 color-mix，避免每套皮肤重复写半透明值） ---------- */
body[data-skin]:not([data-skin="classic"]) {
  --sk-side-text: #C3CEDD;
  --sk-side-name: #F2F7FF;
  --sk-side-muted: #93A5BC;
  --sk-glow: color-mix(in srgb, var(--accent) 18%, transparent);
  --sk-logo-shadow: color-mix(in srgb, var(--accent) 38%, transparent);
  --sk-ic-on: color-mix(in srgb, var(--accent) 42%, transparent);
  --sk-nav-on-a: color-mix(in srgb, var(--accent) 26%, transparent);
  --sk-nav-on-b: color-mix(in srgb, var(--accent) 7%, transparent);
  --sk-badge-bg: color-mix(in srgb, var(--accent) 18%, transparent);
  --sk-badge-line: color-mix(in srgb, var(--accent) 32%, transparent);
  --sk-row-hover: color-mix(in srgb, var(--accent) 5%, var(--surface));
  --sk-topbar: color-mix(in srgb, var(--surface) 92%, transparent);
  --sk-overlay: rgba(10, 20, 36, .46);
  --sk-toast: rgba(14, 26, 43, .95);
  --sk-shadow-brand: color-mix(in srgb, var(--accent) 30%, transparent);
  /* app.css 的 .subnav 一直引用了未定义的 --text-3（既有小缺陷）；仅在新皮肤里补上，
     classic 皮肤保持零覆盖、视觉完全不变 */
  --text-3: var(--muted);
}

/* ---------------------------------------------------------------- 皮肤 1：网易红（参考网易云音乐） */
body[data-skin="netease"],
body.ui-ios[data-skin="netease"] {
  /* 侧栏 #2D2D2D 深灰黑（不用纯黑），内容区 #F8F6F1 米白，主红 #C20C0C */
  --navy-800: #333333;
  --navy-950: #2D2D2D;
  --bg: #F8F6F1;
  --bg-soft: #FFFDF9;
  --surface: #FFFFFF;
  --text: #262626;
  --text-2: #5A5A5A;
  --muted: #717171;
  --faint: #949494;
  --line: #E5E2DE;
  --line-soft: #EFECE7;
  --accent: #C20C0C;
  --accent-2: #E0433A;
  --accent-ink: #A30A0A;
  --accent-soft: #FCEDEC;
  --accent-line: #F1CBC8;
  --danger: #A4262C;
  --danger-soft: #FBEEEE;
  --danger-line: #EFC9C9;
  --ds-primary: #C20C0C;
  --ds-primary-hover: #A30A0A;
  --ds-danger: #A4262C;
  --ds-danger-hover: #7F1D22;
  --ds-focus-ring: rgba(194, 12, 12, .30);
  --ds-shadow-solid: 0 1px 2px rgba(60, 20, 20, .12);
}

/* ---------------------------------------------------------------- 皮肤 2：黑胶暗色 */
body[data-skin="ink"],
body.ui-ios[data-skin="ink"] {
  --navy-800: #1C2028;
  --navy-950: #101216;
  --bg: #15171C;
  --bg-soft: #1B1E25;
  --surface: #20242C;
  --text: #E9ECF3;
  --text-2: #AEB6C4;
  --muted: #828B9C;
  --faint: #656E80;
  --line: #333945;
  --line-soft: #2A303A;
  --accent: #E5484D;
  --accent-2: #FF7A73;
  --accent-ink: #FF9A92;
  --accent-soft: rgba(229, 72, 77, .14);
  --accent-line: rgba(229, 72, 77, .30);
  --ok: #3DD598;
  --ok-soft: rgba(61, 213, 152, .14);
  --ok-line: rgba(61, 213, 152, .28);
  --warn: #F5C451;
  --warn-soft: rgba(245, 196, 81, .14);
  --warn-line: rgba(245, 196, 81, .28);
  --danger: #FF6B6B;
  --danger-soft: rgba(255, 107, 107, .14);
  --danger-line: rgba(255, 107, 107, .28);
  --purple: #B49BFF;
  --purple-soft: rgba(180, 155, 255, .14);
  --purple-line: rgba(180, 155, 255, .28);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .38);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .42);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .58);
  --ds-primary: #E5484D;
  --ds-primary-hover: #F36B6F;
  --ds-danger: #C93A40;
  --ds-danger-hover: #E04B51;
  --ds-focus-ring: rgba(229, 72, 77, .42);
  --ds-shadow-solid: 0 1px 2px rgba(0, 0, 0, .40);
  --sk-side-text: #A7B0BF;
  --sk-side-muted: #7B8595;
  --sk-overlay: rgba(0, 0, 0, .66);
  --sk-toast: rgba(38, 42, 50, .97);
}

/* ---------------------------------------------------------------- 皮肤 3：雾青（低饱和护眼） */
body[data-skin="jade"],
body.ui-ios[data-skin="jade"] {
  --navy-800: #1D4744;
  --navy-950: #123330;
  --bg: #F4F8F7;
  --bg-soft: #F9FCFB;
  --surface: #FFFFFF;
  --text: #17302E;
  --text-2: #47615E;
  --muted: #5F7673;
  --faint: #789B94;
  --line: #DDE9E6;
  --line-soft: #EAF2F0;
  --accent: #0E8A78;
  --accent-2: #34A895;
  --accent-ink: #0A6E60;
  --accent-soft: #E6F5F1;
  --accent-line: #C7E7DF;
  --ds-primary: #0E8A78;
  --ds-primary-hover: #0A6E60;
  --ds-focus-ring: rgba(14, 138, 120, .30);
  --ds-shadow-solid: 0 1px 2px rgba(10, 70, 60, .12);
}

/* ---------------------------------------------------------------- 皮肤 4：暖砂 */
body[data-skin="sand"],
body.ui-ios[data-skin="sand"] {
  --navy-800: #4A3A2C;
  --navy-950: #31261D;
  --bg: #F8F5EF;
  --bg-soft: #FCFAF5;
  --surface: #FFFFFF;
  --text: #33291E;
  --text-2: #665848;
  --muted: #7B6F5F;
  --faint: #A49278;
  --line: #E9E1D4;
  --line-soft: #F2ECE1;
  --accent: #B26B2C;
  --accent-2: #D08B48;
  --accent-ink: #8C4F1E;
  --accent-soft: #FBF0E3;
  --accent-line: #EEDBC0;
  --ds-primary: #B26B2C;
  --ds-primary-hover: #8C4F1E;
  --ds-focus-ring: rgba(178, 107, 44, .30);
  --ds-shadow-solid: 0 1px 2px rgba(80, 55, 25, .12);
}

/* ============================================================================
   覆盖 app.css / theme-ios.css 里写死的颜色
   选择器统一带 body[data-skin]:not([data-skin="classic"])，特异性高于 body.ui-ios.xxx
   ========================================================================== */
body[data-skin]:not([data-skin="classic"]) .sidebar {
  background:
    radial-gradient(220px 160px at 110% -10%, var(--sk-glow), transparent 60%),
    linear-gradient(180deg, var(--navy-800) 0%, var(--navy-950) 100%);
  color: var(--sk-side-text);
}
body[data-skin]:not([data-skin="classic"]) .brand .name { color: var(--sk-side-name); }
body[data-skin]:not([data-skin="classic"]) .brand .ver { color: var(--sk-side-muted); }
body[data-skin]:not([data-skin="classic"]) .brand .logo {
  background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent) 55%, var(--accent-ink) 100%);
  box-shadow: 0 6px 14px var(--sk-logo-shadow);
}
body[data-skin]:not([data-skin="classic"]) .nav a { color: var(--sk-side-text); }
body[data-skin]:not([data-skin="classic"]) .nav a.on {
  background: linear-gradient(90deg, var(--sk-nav-on-a), var(--sk-nav-on-b));
  color: #FFFFFF;
}
body[data-skin]:not([data-skin="classic"]) .nav a.on::before {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 70%, white), var(--accent));
}
body[data-skin]:not([data-skin="classic"]) .nav a.on .ic,
body[data-skin]:not([data-skin="classic"]) .nav a.on .ic svg {
  background: var(--sk-ic-on);
  color: #FFFFFF;
  stroke: #FFFFFF;
}
body[data-skin]:not([data-skin="classic"]) .nav .badge {
  background: var(--sk-badge-bg);
  color: var(--sk-side-name);
  border-color: var(--sk-badge-line);
}
body[data-skin]:not([data-skin="classic"]) .nav .soon {
  color: var(--sk-side-muted);
  border-color: var(--sk-badge-line);
}
body[data-skin]:not([data-skin="classic"]) .side-foot {
  color: var(--sk-side-muted);
  border-top-color: rgba(255, 255, 255, .09);
}
body[data-skin]:not([data-skin="classic"]) .avatar {
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
}
body[data-skin]:not([data-skin="classic"]) .topbar {
  background: var(--sk-topbar);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom-color: var(--line);
}
body[data-skin]:not([data-skin="classic"]) .search:hover,
body[data-skin]:not([data-skin="classic"]) .search kbd,
body[data-skin]:not([data-skin="classic"]) .list-row {
  background: var(--surface);
}
body[data-skin]:not([data-skin="classic"]) .search:hover { border-color: var(--line); }
body[data-skin]:not([data-skin="classic"]) .btn,
body.ui-ios[data-skin]:not([data-skin="classic"]) .btn {
  background: var(--surface);
  color: var(--text-2);
  border-color: var(--line);
}
body[data-skin]:not([data-skin="classic"]) .btn:hover,
body.ui-ios[data-skin]:not([data-skin="classic"]) .btn:hover {
  border-color: var(--line);
  background: var(--bg-soft);
  color: var(--text);
}
body[data-skin]:not([data-skin="classic"]) .btn.lg.pri {
  box-shadow: 0 6px 16px var(--sk-shadow-brand);
}
body[data-skin]:not([data-skin="classic"]) .btn.lg.pri:hover {
  box-shadow: 0 8px 20px var(--sk-shadow-brand);
}
body[data-skin]:not([data-skin="classic"]) .t tbody tr:hover,
body[data-skin]:not([data-skin="classic"]) .plist .row:hover {
  background: var(--sk-row-hover);
}
body[data-skin]:not([data-skin="classic"]) .plist .row.on {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}
body[data-skin]:not([data-skin="classic"]) .doc-row:hover { border-color: var(--line); }
body[data-skin]:not([data-skin="classic"]) .doc-row.sel {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px var(--sk-badge-bg);
}
/* 设置页里三处写死的浅色块（暗色皮肤下会非常突兀）：说明条、序号圆点、底部操作栏 */
body[data-skin]:not([data-skin="classic"]) .info-strip,
body.ui-ios[data-skin]:not([data-skin="classic"]) .info-strip {
  background: var(--bg-soft);
  border-color: var(--line);
  color: var(--text-2);
}
body[data-skin]:not([data-skin="classic"]) .info-strip b {
  border-color: var(--line);
  color: var(--accent-ink);
}
body[data-skin]:not([data-skin="classic"]) .settings-foot,
body.ui-ios[data-skin]:not([data-skin="classic"]) .settings-foot {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text-2);
}
body[data-skin]:not([data-skin="classic"]) .upload { border-color: var(--line); background: var(--bg-soft); }
body[data-skin]:not([data-skin="classic"]) .overlay { background: var(--sk-overlay); }
body[data-skin]:not([data-skin="classic"]) .modal,
body.ui-ios[data-skin]:not([data-skin="classic"]) .modal {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text);
}
body[data-skin]:not([data-skin="classic"]) .modal-f,
body.ui-ios[data-skin]:not([data-skin="classic"]) .modal-f {
  background: var(--bg-soft);
  border-top-color: var(--line);
}
body[data-skin]:not([data-skin="classic"]) .toast,
body.ui-ios[data-skin]:not([data-skin="classic"]) .toast {
  background: var(--sk-toast);
  color: #FFFFFF;
}
body[data-skin]:not([data-skin="classic"]) .ui-style-card.on { border-color: var(--accent); background: var(--accent-soft); }
body[data-skin]:not([data-skin="classic"]) .ui-style-swatch.sw-classic {
  background: linear-gradient(135deg, var(--navy-950) 0%, var(--navy-950) 34%, var(--bg) 34%, var(--bg) 100%);
}
body[data-skin]:not([data-skin="classic"]) .ui-anim-row input[type="checkbox"],
body[data-skin]:not([data-skin="classic"]) input[type="checkbox"] { accent-color: var(--accent); }

/* ---------------------------------------------------------------- 皮肤选择卡片 */
/* 竖卡：色块做整条预览、名称与说明在下方，避免窄屏里标题被折成两行 */
.ui-skin-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.ui-skin-card {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  padding: 8px 9px 10px; min-height: 104px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  cursor: pointer; position: relative; overflow: hidden;
  transition: border-color var(--mo-2, 200ms) var(--mo-ease, ease),
              background-color var(--mo-2, 200ms) var(--mo-ease, ease),
              transform var(--mo-1, 120ms) var(--mo-ease, ease),
              box-shadow var(--mo-2, 200ms) var(--mo-ease, ease);
}
.ui-skin-card:hover { border-color: var(--accent-line); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ui-skin-card:active { transform: translateY(0) scale(.98); }
.ui-skin-card.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--ds-focus-ring); }
.ui-skin-swatch {
  width: 100%; height: 40px; flex: none; border-radius: 8px; border: 1px solid var(--line);
  background: linear-gradient(135deg, var(--sw1) 0%, var(--sw1) 40%, var(--sw2) 40%, var(--sw2) 62%, var(--sw3) 62%, var(--sw3) 100%);
}
.ui-skin-txt { min-width: 0; }
.ui-skin-txt b { font-size: 13px; font-weight: 600; color: var(--text); display: block; white-space: nowrap; }
.ui-skin-txt .sub2 { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.ui-skin-card .pill { position: absolute; top: 13px; right: 13px; height: 18px; padding: 0 7px; font-size: 10px; }
.ui-skin-head { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.ui-skin-head b { font-size: 13px; color: var(--text); }
.ui-skin-head .sub { font-size: 11px; color: var(--muted); }

/* 皮肤切换时颜色平滑过渡（只给容器，不覆盖控件自身的 transform 过渡） */
body[data-skin] .sidebar,
body[data-skin] .topbar,
body[data-skin] .main,
body[data-skin] .card,
body[data-skin] .modal,
body[data-skin] .side-foot {
  transition: background-color var(--mo-3, 320ms) var(--mo-ease, ease),
              color var(--mo-3, 320ms) var(--mo-ease, ease),
              border-color var(--mo-3, 320ms) var(--mo-ease, ease);
}