/* ============================================================
   风格主题包：html[data-style] 驱动，26 种风格 × 深浅双态
   soft（柔和界面风）为默认基线，common.css 提供基础变量，此处增强覆盖
   其余 25 风格各自覆盖变量 + .style-fx 装饰层（壁纸启用时隐藏）
   深浅由 html[data-theme] 区分，两个块必须成对维护
   ============================================================ */

/* 装饰层载体（三个页面均放置 <div class="style-fx">） */
.style-fx {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
body.has-wallpaper .style-fx {
  display: none;
}

/* ============================================================
   0) soft 柔和浮雕（Go 版 4 层浮雕系统） —— 同色系表面 · Cloud Float · Friendly Viscosity
   4 层正负对立阴影（正偏暗+远暗 / 负偏亮+远亮 + inset 顶部高光），
   surface 与 bg 同色系（#e8ecf6），edge 半透明白，accent blue-ish #5c7cfa，
   hover 阴影加深（保持浮雕不 translate），active 4 层全 inset 按压，
   transition 260ms ease-in-out（Friendly Viscosity）。
   ============================================================ */
:root[data-theme='light'][data-style='soft'] {
  --bg-grad: linear-gradient(160deg, #eef0f8 0%, #e6eaf6 45%, #dce1f1 100%);
  --surface: #e8ecf6;
  --surface-2: #edf0f8;
  --text: #3b4354;
  --text-muted: #646b78;
  --accent: #5c7cfa;
  --on-accent: #0c0d10;
  --accent-soft: rgba(92, 124, 250, 0.16);
  --accent-hover: #4a6bf0;
  --danger: #e05d5d;
  --on-danger: #0c0d10;
  --success: #3fa981;
  --on-success: #0c0d10;
  --edge: rgba(255, 255, 255, 0.62);
  --edge-weak: rgba(59, 67, 84, 0.08);
  --overlay: rgba(60, 70, 90, 0.35);
  --sh-dark: rgba(148, 156, 200, 0.5);
  --sh-light: rgba(255, 255, 255, 0.92);
  --accent-glow: rgba(92, 124, 250, 0.32);
  /* 4 层浮雕阴影：正偏暗近 + 远暗 / 负偏亮近 + 远亮 / inset 顶部高光 */
  --raised-sm: 2px 2px 5px rgba(148, 156, 200, 0.42), 5px 5px 12px rgba(148, 156, 200, 0.3),
    -2px -2px 5px rgba(255, 255, 255, 1), -5px -5px 12px rgba(255, 255, 255, 0.82),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --raised: 4px 4px 9px rgba(148, 156, 200, 0.38), 10px 10px 24px rgba(148, 156, 200, 0.32),
    -4px -4px 9px rgba(255, 255, 255, 1), -10px -10px 24px rgba(255, 255, 255, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --raised-lg: 6px 6px 14px rgba(148, 156, 200, 0.34), 18px 18px 40px rgba(148, 156, 200, 0.3),
    -6px -6px 14px rgba(255, 255, 255, 1), -18px -18px 40px rgba(255, 255, 255, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --pressed-sm: inset 1px 1px 3px rgba(148, 156, 200, 0.5), inset 3px 3px 9px rgba(148, 156, 200, 0.32),
    inset -1px -1px 3px rgba(255, 255, 255, 0.95), inset -3px -3px 9px rgba(255, 255, 255, 0.7);
  --inset: inset 2px 2px 5px rgba(148, 156, 200, 0.45), inset 5px 5px 12px rgba(148, 156, 200, 0.28),
    inset -2px -2px 5px rgba(255, 255, 255, 0.95), inset -5px -5px 12px rgba(255, 255, 255, 0.65);
  --hover-bg: rgba(92, 124, 250, 0.08);
  --scroll-thumb: rgba(148, 156, 200, 0.58);
  --tr: 260ms;
  --ease: ease-in-out;
}
:root[data-theme='dark'][data-style='soft'] {
  --bg-grad: linear-gradient(160deg, #2f3441 0%, #282d39 45%, #222734 100%);
  --surface: #2a2f3c;
  --surface-2: #2e3340;
  --text: #d6dbe6;
  --text-muted: #8f98ab;
  --accent: #7189ff;
  --on-accent: #0c0d10;
  --accent-soft: rgba(113, 137, 255, 0.16);
  --accent-hover: #869bff;
  --danger: #ef7068;
  --on-danger: #0c0d10;
  --success: #52bd92;
  --on-success: #0c0d10;
  --edge: rgba(255, 255, 255, 0.055);
  --edge-weak: rgba(255, 255, 255, 0.06);
  --overlay: rgba(0, 0, 0, 0.55);
  --sh-dark: rgba(0, 0, 0, 0.5);
  --sh-light: rgba(140, 160, 255, 0.055);
  --accent-glow: rgba(113, 137, 255, 0.28);
  --raised-sm: 2px 2px 5px rgba(0, 0, 0, 0.5), 5px 5px 12px rgba(0, 0, 0, 0.32),
    -2px -2px 5px rgba(255, 255, 255, 0.055), -5px -5px 12px rgba(255, 255, 255, 0.028),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --raised: 4px 4px 9px rgba(0, 0, 0, 0.45), 10px 10px 24px rgba(0, 0, 0, 0.35),
    -4px -4px 9px rgba(255, 255, 255, 0.055), -10px -10px 24px rgba(255, 255, 255, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --raised-lg: 6px 6px 14px rgba(0, 0, 0, 0.45), 18px 18px 40px rgba(0, 0, 0, 0.4),
    -6px -6px 14px rgba(255, 255, 255, 0.05), -18px -18px 40px rgba(255, 255, 255, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --pressed-sm: inset 1px 1px 3px rgba(0, 0, 0, 0.55), inset 3px 3px 9px rgba(0, 0, 0, 0.35),
    inset -1px -1px 3px rgba(255, 255, 255, 0.05), inset -3px -3px 9px rgba(255, 255, 255, 0.02);
  --inset: inset 2px 2px 5px rgba(0, 0, 0, 0.5), inset 5px 5px 12px rgba(0, 0, 0, 0.3),
    inset -2px -2px 5px rgba(255, 255, 255, 0.05), inset -5px -5px 12px rgba(255, 255, 255, 0.02);
  --hover-bg: rgba(113, 137, 255, 0.12);
  --scroll-thumb: rgba(0, 0, 0, 0.45);
  --tr: 260ms;
  --ease: ease-in-out;
}

/* soft 组件：同色系浮雕 · 圆角 20-14px · hover 阴影加深不浮起 */
/* —— .style-fx：indigo + purple 呼吸 blob（Go 版） —— */
[data-style='soft'] .style-fx::before,
[data-style='soft'] .style-fx::after {
  content: '';
  position: absolute;
  filter: blur(72px);
  border-radius: 50%;
  animation: fx-soft-a 32s ease-in-out infinite;
}
[data-style='soft'] .style-fx::before {
  width: 48vw;
  height: 48vw;
  left: -14vw;
  top: -16vw;
  background: radial-gradient(circle at 42% 42%, rgba(92, 124, 250, 0.38), transparent 65%);
  opacity: 0.55;
}
[data-style='soft'] .style-fx::after {
  width: 44vw;
  height: 44vw;
  right: -12vw;
  bottom: -16vw;
  background: radial-gradient(circle at 55% 45%, rgba(139, 92, 246, 0.3), transparent 62%);
  border-radius: 55% 45% 42% 58% / 50% 55% 45% 50%;
  animation: fx-soft-b 36s ease-in-out infinite;
  opacity: 0.45;
}
[data-theme='dark'][data-style='soft'] .style-fx::before { opacity: 0.28; }
[data-theme='dark'][data-style='soft'] .style-fx::after { opacity: 0.24; }
@keyframes fx-soft-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(3vw, 2vw) scale(1.06); }
}
@keyframes fx-soft-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-3vw, -2vw) scale(0.96); }
}

/* —— .card：同色系浮雕 · 20px 圆角 —— */
[data-style='soft'] .card {
  border: none;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--raised);
  transition: box-shadow var(--tr) var(--ease), background var(--tr) var(--ease) !important;
}
[data-style='soft'] .card .icon {
  border-radius: 14px;
}
[data-style='soft'] .card:hover {
  /* 浮雕 hover：阴影加深（不 translateY！） */
  box-shadow: var(--raised-lg);
}
[data-style='soft'] .card:active {
  /* Pillow Press：4 层全 inset 按压 */
  box-shadow: var(--pressed-sm);
}

[data-style='soft'] .glass,
[data-style='soft'] .glass-strong {
  border: none;
  border-radius: 20px;
  background: var(--surface-2);
  box-shadow: var(--raised-lg);
}

/* —— .btn：14px 圆角 · 浮雕 hover 阴影加深 —— */
[data-style='soft'] .btn {
  border: none;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--raised-sm);
  transition: box-shadow var(--tr) var(--ease), background var(--tr) var(--ease), color var(--tr) var(--ease) !important;
}
[data-style='soft'] .btn:hover {
  box-shadow: var(--raised);
}
[data-style='soft'] .btn:active {
  box-shadow: var(--pressed-sm);
}
[data-style='soft'] .btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  box-shadow: var(--raised-sm);
}
[data-style='soft'] .btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: var(--raised);
}
[data-style='soft'] .btn-primary:active {
  box-shadow: var(--pressed-sm);
}

/* —— .input/.select/.textarea：14px 圆角 · 4 层 inset 凹陷 —— */
[data-style='soft'] .input,
[data-style='soft'] .select,
[data-style='soft'] .textarea {
  border: none;
  border-radius: 14px;
  background: var(--surface-2);
  box-shadow: var(--inset);
  transition: box-shadow var(--tr) var(--ease), background var(--tr) var(--ease);
}
[data-style='soft'] .input:focus,
[data-style='soft'] .select:focus,
[data-style='soft'] .textarea:focus {
  background: var(--surface);
  box-shadow: var(--raised-sm), 0 0 0 2px rgba(92, 124, 250, 0.25);
}

/* —— .ntab-btn：rounded-full · 浮雕阴影 —— */
[data-style='soft'] .ntab-btn {
  border: none !important;
  border-radius: 999px !important;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--raised-sm);
  transition: box-shadow var(--tr) var(--ease), background var(--tr) var(--ease), color var(--tr) var(--ease) !important;
}
[data-style='soft'] .ntab-btn:hover {
  box-shadow: var(--raised);
  background: var(--hover-bg);
}
[data-style='soft'] .ntab-btn.active {
  background: var(--accent) !important;
  color: var(--on-accent);
  box-shadow: var(--raised-sm);
}

/* —— .admin-panel：20px 圆角 · 大浮雕 —— */
[data-style='soft'] .admin-panel {
  border: none;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--raised-lg);
}

/* —— focus-visible：accent 2px ring —— */
[data-style='soft'] :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============================================================
   1) nature 自然拟态 —— 翡翠水色 · 有机 blob · 治愈流动
   ============================================================ */
:root[data-theme='light'][data-style='nature'] {
  --bg-grad: linear-gradient(165deg, #e3f2ea 0%, #d8eee3 40%, #dff0f1 100%);
  --surface: #e1efe7;
  --surface-2: #e9f4ed;
  --text: #25463b;
  --text-muted: #587267;
  --accent: #0e7a5f;
  --accent-soft: rgba(14, 122, 95, 0.15);
  --accent-hover: #0a6a52;
  --danger: #c8503f;
  --success: #25865e;
  --edge: rgba(255, 255, 255, 0.66);
  --edge-weak: rgba(46, 74, 65, 0.09);
  --overlay: rgba(30, 60, 52, 0.35);
  --sh-dark: rgba(140, 168, 155, 0.5);
  --sh-light: rgba(255, 255, 255, 0.92);
  --accent-glow: rgba(14, 122, 95, 0.3);
  --raised-sm: 2px 2px 5px rgba(140, 168, 155, 0.45), 5px 5px 12px rgba(140, 168, 155, 0.32),
    -2px -2px 5px rgba(255, 255, 255, 1), -5px -5px 12px rgba(255, 255, 255, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --raised: 4px 4px 9px rgba(140, 168, 155, 0.4), 10px 10px 24px rgba(140, 168, 155, 0.34),
    -4px -4px 9px rgba(255, 255, 255, 1), -10px -10px 24px rgba(255, 255, 255, 0.88),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --raised-lg: 6px 6px 14px rgba(140, 168, 155, 0.36), 18px 18px 40px rgba(140, 168, 155, 0.32),
    -6px -6px 14px rgba(255, 255, 255, 1), -18px -18px 40px rgba(255, 255, 255, 0.92),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --pressed-sm: inset 1px 1px 3px rgba(140, 168, 155, 0.5), inset 3px 3px 9px rgba(140, 168, 155, 0.32),
    inset -1px -1px 3px rgba(255, 255, 255, 0.95), inset -3px -3px 9px rgba(255, 255, 255, 0.72);
  --inset: inset 2px 2px 5px rgba(140, 168, 155, 0.46), inset 5px 5px 12px rgba(140, 168, 155, 0.3),
    inset -2px -2px 5px rgba(255, 255, 255, 0.95), inset -5px -5px 12px rgba(255, 255, 255, 0.68);
  --hover-bg: rgba(14, 122, 95, 0.1);
  --scroll-thumb: rgba(140, 168, 155, 0.6);
}
:root[data-theme='dark'][data-style='nature'] {
  --bg-grad: linear-gradient(165deg, #16241f 0%, #131f1b 45%, #101a17 100%);
  --surface: #1a2823;
  --surface-2: #1f2f28;
  --text: #cfe7db;
  --text-muted: #83a093;
  --accent: #4fd1a5;
  --accent-soft: rgba(79, 209, 165, 0.16);
  --accent-hover: #6bddb7;
  --danger: #e57a6e;
  --success: #6fddaa;
  --on-accent: #06281d;
  --on-danger: #3a110d;
  --on-success: #08301d;
  --edge: rgba(255, 255, 255, 0.06);
  --edge-weak: rgba(255, 255, 255, 0.07);
  --overlay: rgba(0, 0, 0, 0.55);
  --sh-dark: rgba(0, 0, 0, 0.5);
  --sh-light: rgba(120, 255, 200, 0.035);
  --accent-glow: rgba(79, 209, 165, 0.26);
  --raised-sm: 2px 2px 5px rgba(0, 0, 0, 0.5), 5px 5px 12px rgba(0, 0, 0, 0.32),
    -2px -2px 5px rgba(255, 255, 255, 0.055), -5px -5px 12px rgba(255, 255, 255, 0.028),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --raised: 4px 4px 9px rgba(0, 0, 0, 0.45), 10px 10px 24px rgba(0, 0, 0, 0.35),
    -4px -4px 9px rgba(255, 255, 255, 0.055), -10px -10px 24px rgba(255, 255, 255, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --raised-lg: 6px 6px 14px rgba(0, 0, 0, 0.45), 18px 18px 40px rgba(0, 0, 0, 0.4),
    -6px -6px 14px rgba(255, 255, 255, 0.05), -18px -18px 40px rgba(255, 255, 255, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --pressed-sm: inset 1px 1px 3px rgba(0, 0, 0, 0.55), inset 3px 3px 9px rgba(0, 0, 0, 0.35),
    inset -1px -1px 3px rgba(255, 255, 255, 0.05), inset -3px -3px 9px rgba(255, 255, 255, 0.02);
  --inset: inset 2px 2px 5px rgba(0, 0, 0, 0.5), inset 5px 5px 12px rgba(0, 0, 0, 0.3),
    inset -2px -2px 5px rgba(255, 255, 255, 0.05), inset -5px -5px 12px rgba(255, 255, 255, 0.02);
  --hover-bg: rgba(79, 209, 165, 0.12);
  --scroll-thumb: rgba(0, 0, 0, 0.45);
}
/* nature 装饰：两枚缓呼吸变形的有机 blob */
[data-style='nature'] .style-fx::before,
[data-style='nature'] .style-fx::after {
  content: '';
  position: absolute;
  filter: blur(70px);
  border-radius: 58% 42% 38% 62% / 55% 48% 52% 45%;
  animation: fx-blob-a 18s ease-in-out infinite;
}
[data-style='nature'] .style-fx::before {
  width: 46vw;
  height: 46vw;
  left: -12vw;
  top: -14vw;
  background: radial-gradient(circle at 40% 40%, rgba(47, 165, 133, 0.5), transparent 65%);
  opacity: 0.55;
}
[data-style='nature'] .style-fx::after {
  width: 52vw;
  height: 52vw;
  right: -16vw;
  bottom: -18vw;
  background: radial-gradient(circle at 55% 45%, rgba(90, 167, 214, 0.4), transparent 62%);
  border-radius: 42% 58% 60% 40% / 48% 56% 44% 52%;
  animation: fx-blob-b 22s ease-in-out infinite;
  opacity: 0.45;
}
:root[data-theme='dark'][data-style='nature'] .style-fx::before { opacity: 0.32; }
:root[data-theme='dark'][data-style='nature'] .style-fx::after { opacity: 0.26; }
/* nature 组件：更大圆角的有机形态 */
[data-style='nature'] .card,
[data-style='nature'] .btn {
  border-radius: 22px;
}
[data-style='nature'] .card .icon {
  border-radius: 17px;
}
@keyframes fx-blob-a {
  0%, 100% { border-radius: 58% 42% 38% 62% / 55% 48% 52% 45%; transform: translate(0, 0) rotate(0deg); }
  33% { border-radius: 44% 56% 62% 38% / 48% 60% 40% 52%; transform: translate(3vw, 2vw) rotate(6deg); }
  66% { border-radius: 62% 38% 46% 54% / 58% 42% 58% 42%; transform: translate(-2vw, 3vw) rotate(-5deg); }
}
@keyframes fx-blob-b {
  0%, 100% { border-radius: 42% 58% 60% 40% / 48% 56% 44% 52%; transform: translate(0, 0) rotate(0deg); }
  50% { border-radius: 58% 42% 40% 60% / 54% 46% 54% 46%; transform: translate(-3vw, -2vw) rotate(7deg); }
}

/* ============================================================
   2) natural 自然大地 —— 苔绿/沙米/岩灰/湖蓝 · 温暖纸感
   ============================================================ */
:root[data-theme='light'][data-style='natural'] {
  /* Natural Organic: cream #faf6f1 / stone-800 #5c4033 / sage #8b9d77 / tan #d4a373 */
  --bg-grad: linear-gradient(170deg, #faf6f1 0%, #f5efe6 45%, #f0ead9 100%);
  --surface: #faf6f1;
  --surface-2: #f3ede1;
  --text: #5c4033;              /* stone-800 */
  --text-muted: #8b7355;
  --accent: #5c4033;            /* stone-800 主色 */
  --accent-soft: rgba(141, 157, 119, 0.18); /* sage 轻量 */
  --accent-hover: #4a3528;
  --danger: #b54f3a;
  --success: #6a7d55;
  --edge: rgba(141, 115, 85, 0.22);   /* border-stone-200 */
  --edge-weak: rgba(141, 115, 85, 0.14);
  --overlay: rgba(92, 64, 51, 0.35);
  --sh-dark: rgba(141, 115, 85, 0.22);
  --sh-light: rgba(255, 255, 255, 0.92);
  --accent-glow: rgba(139, 157, 119, 0.28);
  /* 克制阴影: shadow-none → shadow-md，避免 heavy shadow */
  --raised-sm: 0 1px 3px rgba(92, 64, 51, 0.08);
  --raised: 0 3px 8px rgba(92, 64, 51, 0.12), 0 1px 2px rgba(92, 64, 51, 0.06);
  --raised-lg: 0 6px 16px rgba(92, 64, 51, 0.14), 0 2px 4px rgba(92, 64, 51, 0.06);
  --pressed-sm: inset 0 1px 3px rgba(92, 64, 51, 0.18);
  --inset: inset 0 2px 6px rgba(92, 64, 51, 0.12);
  --hover-bg: rgba(139, 157, 119, 0.12);
  --scroll-thumb: rgba(141, 115, 85, 0.4);
  --tr: 500ms;                  /* Botanical Slowness */
  --ease: ease-in-out;
}
:root[data-theme='dark'][data-style='natural'] {
  /* Natural Organic dark: 深棕背景 + sage accent */
  --bg-grad: linear-gradient(170deg, #1f1c16 0%, #1a1813 45%, #15130f 100%);
  --surface: #23201a;
  --surface-2: #2b2720;
  --text: #e8dfd0;               /* stone-100 */
  --text-muted: #b5a890;
  --accent: #a8b89a;             /* sage light */
  --accent-soft: rgba(168, 184, 154, 0.16);
  --accent-hover: #bccbad;
  --danger: #c07a65;
  --success: #9ab082;
  --on-accent: #2a311e;
  --on-danger: #3a180e;
  --on-success: #1a220e;
  --edge: rgba(184, 168, 144, 0.14);
  --edge-weak: rgba(184, 168, 144, 0.08);
  --overlay: rgba(0, 0, 0, 0.55);
  --sh-dark: rgba(0, 0, 0, 0.42);
  --sh-light: rgba(255, 240, 210, 0.04);
  --accent-glow: rgba(168, 184, 154, 0.22);
  --raised-sm: 0 1px 3px rgba(0, 0, 0, 0.32);
  --raised: 0 3px 8px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
  --raised-lg: 0 6px 16px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.22);
  --pressed-sm: inset 0 1px 3px rgba(0, 0, 0, 0.45);
  --inset: inset 0 2px 6px rgba(0, 0, 0, 0.35);
  --hover-bg: rgba(168, 184, 154, 0.12);
  --scroll-thumb: rgba(0, 0, 0, 0.4);
  --tr: 500ms;
  --ease: ease-in-out;
}
/* ============================================================
   2) natural 自然有机风（STYLEKIT Natural Organic） —— 大地色系 · 纸张纹理 · 缓慢生长
   核心：stone-800 #5c4033 / cream #faf6f1 / sage #8b9d77 / tan #d4a373
   衬线字体标题、纸张纹理（repeating-linear-gradient）、不规则圆角 rounded-[2rem]、
   Soft Earth Press（hover:translate-y +0.5px 下沉不漂浮）、Botanical Slowness（duration-500+ ease-in-out）、
   阴影克制 shadow-none→shadow-md、ring-2 ring-stone-300 焦点。
   禁止：冷色调蓝紫、纯黑 #000000、尖锐几何、霓虹饱和、完美圆形/矩形。
   ============================================================ */
/* natural 装饰层：纸张/织物纹理 + 柔和土色光斑 */
[data-style='natural'] .style-fx {
  /* 纸张纤维纹理 */
  background:
    repeating-linear-gradient(0deg, rgba(141, 115, 85, 0.04) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, rgba(141, 115, 85, 0.03) 0 1px, transparent 1px 6px);
}
[data-style='natural'] .style-fx::before,
[data-style='natural'] .style-fx::after {
  content: '';
  position: absolute;
  filter: blur(90px);
  border-radius: 42% 58% 62% 38% / 38% 42% 58% 62%;
}
[data-style='natural'] .style-fx::before {
  width: 44vw;
  height: 44vw;
  right: -12vw;
  top: -18vw;
  background: radial-gradient(circle, rgba(212, 163, 115, 0.35), transparent 62%);
  animation: fx-drift-a 36s ease-in-out infinite;
}
[data-style='natural'] .style-fx::after {
  width: 38vw;
  height: 38vw;
  left: -10vw;
  bottom: -14vw;
  background: radial-gradient(circle, rgba(139, 157, 119, 0.28), transparent 60%);
  animation: fx-drift-b 32s ease-in-out infinite;
}
:root[data-theme='dark'][data-style='natural'] .style-fx {
  background:
    repeating-linear-gradient(0deg, rgba(255, 240, 210, 0.025) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, rgba(255, 240, 210, 0.02) 0 1px, transparent 1px 6px);
}
:root[data-theme='dark'][data-style='natural'] .style-fx::before { opacity: 0.35; }
:root[data-theme='dark'][data-style='natural'] .style-fx::after { opacity: 0.3; }
/* natural 组件：衬线标题 + rounded-[2rem] + Soft Earth Press hover */
[data-style='natural'] body,
[data-style='natural'] .card,
[data-style='natural'] .glass,
[data-style='natural'] .btn,
[data-style='natural'] .input {
  font-family: "Georgia", "Palatino Linotype", "Book Antiqua", serif;
}
[data-style='natural'] .card {
  border-radius: 2rem;         /* rounded-[2rem] */
  border: 1px solid rgba(141, 115, 85, 0.22);
  background: var(--surface);
  transition: transform 500ms ease-in-out, box-shadow 500ms ease-in-out, border-color 500ms ease-in-out !important;
}
[data-style='natural'] .card .icon {
  border-radius: 1.25rem;
}
[data-style='natural'] .card:hover {
  /* Soft Earth Press：轻微下沉（不漂浮！） */
  transform: translateY(0.5px);
  box-shadow: var(--raised);
  border-color: rgba(141, 115, 85, 0.35);
}
[data-style='natural'] .card:active {
  transform: translateY(1px);
  box-shadow: var(--pressed-sm);
}
[data-style='natural'] .glass,
[data-style='natural'] .glass-strong {
  border-radius: 2rem;
  border: 1px solid rgba(141, 115, 85, 0.2);
}
[data-style='natural'] .btn {
  border-radius: 999px;       /* rounded-full 按钮 */
  transition: transform 500ms ease-in-out, box-shadow 500ms ease-in-out, background 500ms ease-in-out, color 500ms ease-in-out !important;
}
[data-style='natural'] .btn:hover {
  transform: translateY(0.5px);
  background: rgba(141, 115, 85, 0.1);
}
[data-style='natural'] .btn:active {
  transform: scale(0.97);
}
[data-style='natural'] .btn-primary {
  background: #5c4033;
  color: #faf6f1;
  border-radius: 999px;
  border: none;
}
[data-style='natural'] .btn-primary:hover {
  background: #4a3528;
}
[data-style='natural'] .input,
[data-style='natural'] .textarea,
[data-style='natural'] .select {
  border-radius: 999px;
  border: 1px solid rgba(141, 115, 85, 0.28);
  transition: border-color 500ms ease-in-out, box-shadow 500ms ease-in-out !important;
}
[data-style='natural'] .input:focus,
[data-style='natural'] .textarea:focus,
[data-style='natural'] .select:focus {
  border-color: rgba(141, 115, 85, 0.5);
  box-shadow: 0 0 0 3px rgba(212, 163, 115, 0.35); /* ring-stone-300 焦点 */
}
[data-style='natural'] :focus-visible {
  outline: 2px solid rgba(212, 163, 115, 0.5);
  outline-offset: 2px;
}

/* ============================================================
   3) holo 企业简洁风（STYLEKIT Corporate Clean） —— 蓝灰扁平 · 利落交互 · 信任专业
   核心：blue-600 #2563eb 主色、slate-50 浅底、bg-white shadow-sm border-gray-200 卡片、
   rounded-lg(8px)/xl(12px)、扁平纯色按钮（**禁止渐变按钮**）、
   hover:-translate-y-0.5 + shadow-sm→shadow 微升、
   active:scale-98 触觉确认、focus:ring-2 ring-blue-500 ring-offset-2（WCAG 合规）、
   duration ≤ 200ms ease-out（**禁止超过 200ms**）。
   禁止：shadow-2xl / bg-gradient / rounded-none / 鲜艳色。
   ============================================================ */
:root[data-theme='light'][data-style='holo'] {
  --bg-grad: linear-gradient(160deg, #f8fafc 0%, #f1f5f9 100%);
  --surface: #ffffff;
  --surface-2: #f9fafb;
  --text: #111827;
  --text-muted: #6b7280;
  --accent: #2563eb;
  --accent-soft: rgba(37, 99, 235, 0.08);
  --accent-hover: #1d4ed8;
  --danger: #dc2626;
  --success: #16a34a;
  --on-accent: #ffffff;
  --on-danger: #ffffff;
  --on-success: #ffffff;
  --edge: #e5e7eb;
  --edge-weak: #d1d5db;
  --overlay: rgba(0, 0, 0, 0.45);
  --sh-dark: rgba(15, 23, 42, 0.08);
  --sh-light: rgba(255, 255, 255, 0.8);
  --accent-glow: rgba(37, 99, 235, 0.25);
  --raised-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04);
  --raised: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --raised-lg: 0 4px 6px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --pressed-sm: 0 1px 1px rgba(15, 23, 42, 0.06);
  --inset: inset 0 1px 2px rgba(15, 23, 42, 0.05);
  --hover-bg: rgba(37, 99, 235, 0.05);
  --scroll-thumb: rgba(107, 114, 128, 0.35);
  --tr: 200ms;
  --ease: ease-out;
}
:root[data-theme='dark'][data-style='holo'] {
  --bg-grad: linear-gradient(160deg, #0f172a 0%, #1e293b 100%);
  --surface: #1e293b;
  --surface-2: #334155;
  --text: #f1f5f9;
  --text-muted: #94a3b8;
  --accent: #3b82f6;
  --accent-soft: rgba(59, 130, 246, 0.12);
  --accent-hover: #60a5fa;
  --danger: #ef4444;
  --success: #22c55e;
  --on-accent: #0f172a;
  --on-danger: #ffffff;
  --on-success: #ffffff;
  --edge: #334155;
  --edge-weak: #475569;
  --overlay: rgba(0, 0, 0, 0.65);
  --sh-dark: rgba(0, 0, 0, 0.35);
  --sh-light: rgba(255, 255, 255, 0.03);
  --accent-glow: rgba(59, 130, 246, 0.2);
  --raised-sm: 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px 1px rgba(0, 0, 0, 0.2);
  --raised: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --raised-lg: 0 4px 6px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25);
  --pressed-sm: 0 1px 1px rgba(0, 0, 0, 0.25);
  --inset: inset 0 1px 2px rgba(0, 0, 0, 0.25);
  --hover-bg: rgba(59, 130, 246, 0.08);
  --scroll-thumb: rgba(100, 116, 139, 0.4);
  --tr: 200ms;
  --ease: ease-out;
}
/* holo 装饰：企业简洁风保持纯净 — style-fx 透明 */
[data-style='holo'] .style-fx {
  background-color: transparent;
}
[data-style='holo'] .style-fx::before,
[data-style='holo'] .style-fx::after {
  display: none;
}
/* holo 组件：扁平纯色 · rounded-lg/xl · shadow-sm · focus:ring-offset-2 · active:scale-98
   **所有过渡 ≤ 200ms ease-out，禁止 bounce/elastic/gradient** */
[data-style='holo'] .card {
  border-radius: 12px;
  border: 1px solid var(--edge);
  background: var(--surface);
  box-shadow: var(--raised-sm);
  transition: transform var(--tr) var(--ease), box-shadow var(--tr) var(--ease), border-color var(--tr) var(--ease), background var(--tr) var(--ease) !important;
}
[data-style='holo'] .card .icon {
  border-radius: 10px;
}
[data-style='holo'] .card:hover {
  transform: translateY(-0.5px);
  border-color: var(--edge-weak);
  box-shadow: var(--raised);
}
[data-style='holo'] .card:active {
  transform: scale(0.98);
  box-shadow: var(--pressed-sm);
}
[data-style='holo'] .glass,
[data-style='holo'] .glass-strong {
  border-radius: 12px;
  border: 1px solid var(--edge);
  background: var(--surface);
  box-shadow: var(--raised-sm);
}
[data-style='holo'] .btn {
  border-radius: 8px;
  font-weight: 500;
  border: 1px solid var(--edge);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--raised-sm);
  transition: transform var(--tr) var(--ease), box-shadow var(--tr) var(--ease), background var(--tr) var(--ease), border-color var(--tr) var(--ease), color var(--tr) var(--ease) !important;
}
[data-style='holo'] .btn:hover {
  transform: translateY(-0.5px);
  background: var(--surface-2);
  border-color: var(--edge-weak);
  box-shadow: var(--raised);
  color: var(--accent);
}
[data-style='holo'] .btn:active {
  transform: scale(0.98);
  box-shadow: var(--raised-sm);
}
[data-style='holo'] .btn-primary {
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--raised-sm);
  transition: transform var(--tr) var(--ease), box-shadow var(--tr) var(--ease), background var(--tr) var(--ease) !important;
}
[data-style='holo'] .btn-primary:hover {
  transform: translateY(-0.5px);
  background: var(--accent-hover);
  box-shadow: var(--raised);
}
[data-style='holo'] .btn-primary:active {
  transform: scale(0.98);
  background: var(--accent-hover);
}
[data-style='holo'] .input,
[data-style='holo'] .textarea,
[data-style='holo'] .select {
  border-radius: 8px;
  border: 1px solid var(--edge-weak);
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--tr) var(--ease), box-shadow var(--tr) var(--ease), background var(--tr) var(--ease) !important;
}
[data-style='holo'] .input:focus,
[data-style='holo'] .textarea:focus,
[data-style='holo'] .select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px rgba(37, 99, 235, 0.4);
}
:root[data-theme='dark'][data-style='holo'] .input:focus,
:root[data-theme='dark'][data-style='holo'] .textarea:focus,
:root[data-theme='dark'][data-style='holo'] .select:focus {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px rgba(59, 130, 246, 0.4);
}
[data-style='holo'] :focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px rgba(37, 99, 235, 0.45);
}
:root[data-theme='dark'][data-style='holo'] :focus-visible {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px rgba(59, 130, 246, 0.5);
}

/* ============================================================
/* ============================================================
/* ============================================================
   6) fabric 织物纹理 —— 亚麻编织 · 暖陶点缀 · 缝线描边
   ============================================================ */
:root[data-theme='light'][data-style='fabric'] {
  --bg-grad: linear-gradient(175deg, #eae2d2 0%, #e3dac7 50%, #dbd2bc 100%);
  --surface: #ede5d5;
  --surface-2: #f2ecdd;
  --text: #433d33;
  --text-muted: #847a68;
  --accent: #8e5126;
  --accent-soft: rgba(142, 81, 38, 0.15);
  --accent-hover: #7a451f;
  --danger: #b0443a;
  --success: #5a7a3e;
  --edge: rgba(255, 255, 255, 0.55);
  --edge-weak: rgba(67, 61, 51, 0.12);
  --overlay: rgba(50, 44, 36, 0.4);
  --sh-dark: rgba(160, 148, 126, 0.5);
  --sh-light: rgba(255, 255, 255, 0.85);
  --accent-glow: rgba(142, 81, 38, 0.3);
  --raised-sm: 2px 2px 5px rgba(160, 148, 126, 0.46), 5px 5px 12px rgba(160, 148, 126, 0.32),
    -2px -2px 5px rgba(255, 255, 255, 0.95), -5px -5px 12px rgba(255, 255, 255, 0.78),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --raised: 4px 4px 9px rgba(160, 148, 126, 0.42), 10px 10px 24px rgba(160, 148, 126, 0.34),
    -4px -4px 9px rgba(255, 255, 255, 0.95), -10px -10px 24px rgba(255, 255, 255, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --raised-lg: 6px 6px 14px rgba(160, 148, 126, 0.38), 18px 18px 40px rgba(160, 148, 126, 0.32),
    -6px -6px 14px rgba(255, 255, 255, 0.95), -18px -18px 40px rgba(255, 255, 255, 0.84),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --pressed-sm: inset 1px 1px 3px rgba(160, 148, 126, 0.52), inset 3px 3px 9px rgba(160, 148, 126, 0.34),
    inset -1px -1px 3px rgba(255, 255, 255, 0.88), inset -3px -3px 9px rgba(255, 255, 255, 0.62);
  --inset: inset 2px 2px 5px rgba(160, 148, 126, 0.48), inset 5px 5px 12px rgba(160, 148, 126, 0.3),
    inset -2px -2px 5px rgba(255, 255, 255, 0.88), inset -5px -5px 12px rgba(255, 255, 255, 0.58);
  --hover-bg: rgba(142, 81, 38, 0.09);
  --scroll-thumb: rgba(160, 148, 126, 0.6);
}
:root[data-theme='dark'][data-style='fabric'] {
  --bg-grad: linear-gradient(175deg, #27221c 0%, #221d18 50%, #1d1915 100%);
  --surface: #29241d;
  --surface-2: #302a22;
  --text: #e9e2d5;
  --text-muted: #a19580;
  --accent: #deac7c;
  --accent-soft: rgba(222, 172, 124, 0.16);
  --accent-hover: #e9bf95;
  --danger: #d98472;
  --success: #9cbb72;
  --on-accent: #2e1c0c;
  --on-danger: #3a150e;
  --on-success: #1a260e;
  --edge: rgba(255, 255, 255, 0.06);
  --edge-weak: rgba(255, 255, 255, 0.07);
  --overlay: rgba(0, 0, 0, 0.55);
  --sh-dark: rgba(0, 0, 0, 0.5);
  --sh-light: rgba(255, 240, 210, 0.04);
  --accent-glow: rgba(222, 172, 124, 0.28);
  --raised-sm: 2px 2px 5px rgba(0, 0, 0, 0.5), 5px 5px 12px rgba(0, 0, 0, 0.32),
    -2px -2px 5px rgba(255, 255, 255, 0.05), -5px -5px 12px rgba(255, 255, 255, 0.025),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  --raised: 4px 4px 9px rgba(0, 0, 0, 0.45), 10px 10px 24px rgba(0, 0, 0, 0.35),
    -4px -4px 9px rgba(255, 255, 255, 0.05), -10px -10px 24px rgba(255, 255, 255, 0.028),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --raised-lg: 6px 6px 14px rgba(0, 0, 0, 0.45), 18px 18px 40px rgba(0, 0, 0, 0.4),
    -6px -6px 14px rgba(255, 255, 255, 0.045), -18px -18px 40px rgba(255, 255, 255, 0.028),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
  --pressed-sm: inset 1px 1px 3px rgba(0, 0, 0, 0.55), inset 3px 3px 9px rgba(0, 0, 0, 0.35),
    inset -1px -1px 3px rgba(255, 255, 255, 0.05), inset -3px -3px 9px rgba(255, 255, 255, 0.02);
  --inset: inset 2px 2px 5px rgba(0, 0, 0, 0.5), inset 5px 5px 12px rgba(0, 0, 0, 0.3),
    inset -2px -2px 5px rgba(255, 255, 255, 0.05), inset -5px -5px 12px rgba(255, 255, 255, 0.02);
  --hover-bg: rgba(222, 172, 124, 0.12);
  --scroll-thumb: rgba(0, 0, 0, 0.45);
}
/* fabric 装饰：经纬编织纹理（静态，无动画） */
[data-style='fabric'] .style-fx::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(120, 105, 85, 0.05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(120, 105, 85, 0.05) 0 1px, transparent 1px 4px);
}
:root[data-theme='dark'][data-style='fabric'] .style-fx::before {
  background:
    repeating-linear-gradient(0deg, rgba(255, 240, 210, 0.025) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255, 240, 210, 0.025) 0 1px, transparent 1px 4px);
}
/* fabric 组件：缝线虚线描边 */
[data-style='fabric'] .card {
  border: 1px dashed rgba(120, 105, 85, 0.4);
  border-radius: 12px;
}
[data-style='fabric'] .card:hover {
  border-color: rgba(142, 81, 38, 0.55);
}
[data-style='fabric'] .glass {
  border: 1px dashed rgba(120, 105, 85, 0.35);
}
:root[data-theme='dark'][data-style='fabric'] .card {
  border-color: rgba(255, 240, 210, 0.14);
}
:root[data-theme='dark'][data-style='fabric'] .card:hover {
  border-color: rgba(222, 172, 124, 0.45);
}
:root[data-theme='dark'][data-style='fabric'] .glass {
  border-color: rgba(255, 240, 210, 0.12);
}

/* ============================================================
/* ============================================================
   9) scandi 斯堪的纳维亚风（STYLEKIT Scandinavian） —— 温暖灰白 · light 字重 · 极简
   核心：#f5f0eb birch white 背景、charcoal #3d3d3d 主色、font-extralight 200、
   极细边框 border-[#d4cdc5]/40、单层 shadow-sm、
   Morning Fog（晨雾）duration-700 ease-in-out、无 bounce 无 hover 位移。
   禁止：高饱和鲜艳色、粗重边框阴影、bounce 动效、hover 位移、active scale。
   ============================================================ */
:root[data-theme='light'][data-style='scandi'] {
  --bg-grad: linear-gradient(170deg, #f5f0eb 0%, #ebe5dc 50%, #e3ddd2 100%);
  --surface: #f5f0eb;
  --surface-2: #ebe5dc;
  --text: #3d3d3d;
  --text-muted: #a89279;
  --accent: #3d3d3d;
  --accent-soft: rgba(61, 61, 61, 0.08);
  --accent-hover: #2a2a2a;
  --danger: #b05a4a;
  --success: #5a7a6b;
  --on-accent: #f5f0eb;
  --edge: rgba(61, 61, 61, 0.15);
  --edge-weak: rgba(61, 61, 61, 0.1);
  --overlay: rgba(20, 20, 20, 0.35);
  --sh-dark: rgba(60, 60, 60, 0.1);
  --sh-light: rgba(255, 255, 255, 0.7);
  --accent-glow: rgba(61, 61, 61, 0.12);
  /* 极轻单层阴影 — STYLEKIT 只用 shadow-sm，无 heavy 无 inset 浮雕 */
  --raised-sm: 0 1px 2px rgba(60, 60, 60, 0.08);
  --raised: 0 1px 3px rgba(60, 60, 60, 0.1);
  --raised-lg: 0 2px 6px rgba(60, 60, 60, 0.1);
  --pressed-sm: inset 0 1px 0 rgba(60, 60, 60, 0.08);
  --inset: inset 0 1px 3px rgba(60, 60, 60, 0.08);
  --hover-bg: rgba(61, 61, 61, 0.06);
  --scroll-thumb: rgba(61, 61, 61, 0.3);
  /* Morning Fog：晨雾慢过渡 */
  --tr: 700ms;
  --ease: ease-in-out;
}
:root[data-theme='dark'][data-style='scandi'] {
  --bg-grad: linear-gradient(170deg, #2b2d30 0%, #25272a 50%, #202225 100%);
  --surface: #2b2d30;
  --surface-2: #33363a;
  --text: #e8e4df;
  --text-muted: #a89279;
  --accent: #d4cdc5;
  --accent-soft: rgba(212, 205, 197, 0.12);
  --accent-hover: #ebe5dc;
  --danger: #dc8a7a;
  --success: #7ba089;
  --on-accent: #2b2d30;
  --on-danger: #2a120e;
  --on-success: #1a2a22;
  --edge: rgba(255, 255, 255, 0.08);
  --edge-weak: rgba(255, 255, 255, 0.05);
  --overlay: rgba(0, 0, 0, 0.5);
  --sh-dark: rgba(0, 0, 0, 0.4);
  --sh-light: rgba(255, 255, 255, 0.04);
  --accent-glow: rgba(212, 205, 197, 0.1);
  --raised-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --raised: 0 1px 3px rgba(0, 0, 0, 0.35);
  --raised-lg: 0 2px 6px rgba(0, 0, 0, 0.4);
  --pressed-sm: inset 0 1px 0 rgba(0, 0, 0, 0.3);
  --inset: inset 0 1px 3px rgba(0, 0, 0, 0.3);
  --hover-bg: rgba(212, 205, 197, 0.08);
  --scroll-thumb: rgba(0, 0, 0, 0.4);
  --tr: 700ms;
  --ease: ease-in-out;
}
/* scandi 装饰：北欧柔和色块（暖沙黄+柔粉 / 鼠尾草绿+雾蓝），
   大模糊半径 + 低不透明度 — 保留现有风格 */
[data-style='scandi'] .style-fx::before,
[data-style='scandi'] .style-fx::after {
  content: '';
  position: absolute;
  filter: blur(64px);
}
[data-style='scandi'] .style-fx::before {
  width: 36vw;
  height: 36vw;
  left: -10vw;
  top: -12vw;
  border-radius: 30% 70% 62% 38% / 38% 32% 68% 62%;
  background: radial-gradient(circle at 42% 42%, rgba(232, 201, 138, 0.32), transparent 60%),
    radial-gradient(circle at 70% 65%, rgba(224, 179, 179, 0.26), transparent 58%);
  opacity: 0.4;
  animation: fx-scandi-a 32s ease-in-out infinite;
}
[data-style='scandi'] .style-fx::after {
  width: 40vw;
  height: 30vw;
  right: -11vw;
  bottom: -9vw;
  border-radius: 48% 52% 54% 46% / 60% 46% 54% 40%;
  background: radial-gradient(circle at 48% 48%, rgba(125, 168, 138, 0.28), transparent 60%),
    radial-gradient(circle at 72% 30%, rgba(158, 192, 204, 0.24), transparent 56%);
  opacity: 0.35;
  animation: fx-scandi-b 38s ease-in-out infinite;
}
:root[data-theme='dark'][data-style='scandi'] .style-fx::before { opacity: 0.18; }
:root[data-theme='dark'][data-style='scandi'] .style-fx::after { opacity: 0.15; }
/* scandi 组件：font-extralight 200 + rounded-sm 4px + 极细 border + 无 hover 位移 */
[data-style='scandi'],
[data-style='scandi'] body {
  font-weight: 200;
  letter-spacing: 0.01em;
}
[data-style='scandi'] .card {
  font-weight: 200;
  border-radius: 4px;          /* rounded-sm */
  letter-spacing: 0.01em;
  border: 1px solid rgba(212, 205, 197, 0.4);  /* border-[#d4cdc5]/40 */
  background: var(--surface);
  box-shadow: var(--raised-sm);
  transition: background var(--tr) var(--ease), border-color var(--tr) var(--ease), box-shadow var(--tr) var(--ease) !important;
}
[data-style='scandi'] .card:hover {
  /* Silent Elevation：只有背景色微变 + 边框提亮，无位移无 scale */
  background: var(--surface-2);
  border-color: rgba(61, 61, 61, 0.2);
  box-shadow: var(--raised);
}
[data-style='scandi'] .card:active {
  /* No Impact：仅明暗变化，不 scale — STYLEKIT 禁止 bounce */
  background: rgba(61, 61, 61, 0.05);
}
[data-style='scandi'] .card .icon {
  border-radius: 4px;
}
[data-style='scandi'] .btn {
  border-radius: 4px;
  font-weight: 300;
  letter-spacing: 0.02em;
  border: 1px solid rgba(212, 205, 197, 0.4);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--raised-sm);
  transition: background var(--tr) var(--ease), border-color var(--tr) var(--ease), color var(--tr) var(--ease) !important;
}
[data-style='scandi'] .btn:hover {
  background: var(--surface-2);
  border-color: rgba(61, 61, 61, 0.25);
  color: var(--accent);
  /* 无位移无 scale */
}
[data-style='scandi'] .btn:active {
  background: rgba(61, 61, 61, 0.06);
  /* active 仅明暗变化 — STYLEKIT 禁止 bounce/scale */
}
[data-style='scandi'] .btn-primary {
  border-radius: 4px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 300;
  border: 1px solid transparent;
  box-shadow: var(--raised-sm);
}
[data-style='scandi'] .btn-primary:hover {
  background: var(--accent-hover);
  color: var(--on-accent);
}
[data-style='scandi'] .input,
[data-style='scandi'] .textarea,
[data-style='scandi'] .select {
  border-radius: 4px;
  font-weight: 200;
  letter-spacing: 0.01em;
  border: 1px solid rgba(212, 205, 197, 0.4);
  background: transparent;
  color: var(--text);
  box-shadow: none;  /* 极简：无内阴影 */
  transition: border-color var(--tr) var(--ease), background var(--tr) var(--ease) !important;
}
[data-style='scandi'] .input:focus,
[data-style='scandi'] .textarea:focus,
[data-style='scandi'] .select:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.5);
}
:root[data-theme='dark'][data-style='scandi'] .input:focus,
:root[data-theme='dark'][data-style='scandi'] .textarea:focus,
:root[data-theme='dark'][data-style='scandi'] .select:focus {
  background: rgba(255, 255, 255, 0.04);
}
[data-style='scandi'] :focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}
@keyframes fx-scandi-a {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(2.8vw, 2.2vw) rotate(5deg); }
}
@keyframes fx-scandi-b {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-2.8vw, -1.8vw) rotate(-4deg); }
}

/* ============================================================
/* ============================================================
   11) spotlight 舞台聚光 —— 暗场对比 · 锥形光束 · 尘粒空气感
   聚焦光束自顶部中央打下，主内容置于光斑中心，四周逐级变暗；
   辅助信息以细描边（--edge）与次级光带分层。悬停提升光强
   （box-shadow 叠加 accent-glow 光晕），按下压缩并加深阴影；
   动效 180ms 平滑曲线；淡噪点（SVG feTurbulence）增加空气感
   ============================================================ */
:root[data-theme='light'][data-style='spotlight'] {
  --bg-grad: linear-gradient(180deg, #efe9df 0%, #e8e1d5 50%, #e0d8ca 100%);
  --surface: #f0e9dd;
  --surface-2: #e8e0d2;
  --text: #2e281f;
  --text-muted: #7f7465;
  --accent: #c99234;
  --accent-soft: rgba(201, 146, 52, 0.15);
  --accent-hover: #b57f28;
  --on-accent: #2a1b05;
  --danger: #b3503f;
  --success: #538a5b;
  --edge: rgba(255, 255, 255, 0.65);
  --edge-weak: rgba(46, 40, 31, 0.08);
  --overlay: rgba(20, 16, 12, 0.45);
  --sh-dark: rgba(120, 100, 75, 0.35);
  --sh-light: rgba(255, 255, 255, 0.9);
  --accent-glow: rgba(201, 146, 52, 0.32);
  --raised-sm: 0 1px 3px rgba(120, 100, 75, 0.28), 0 4px 10px rgba(120, 100, 75, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -2px 5px rgba(120, 100, 75, 0.14);
  --raised: 0 2px 6px rgba(120, 100, 75, 0.26), 0 10px 22px rgba(120, 100, 75, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.88), inset 0 -3px 7px rgba(120, 100, 75, 0.14);
  --raised-lg: 0 4px 10px rgba(120, 100, 75, 0.24), 0 18px 38px rgba(120, 100, 75, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 -4px 9px rgba(120, 100, 75, 0.12);
  --pressed-sm: inset 1px 1px 4px rgba(120, 100, 75, 0.4), inset 3px 3px 9px rgba(120, 100, 75, 0.26),
    inset -1px -1px 3px rgba(255, 255, 255, 0.7);
  --inset: inset 2px 2px 5px rgba(120, 100, 75, 0.34), inset 5px 5px 12px rgba(120, 100, 75, 0.22),
    inset -2px -2px 5px rgba(255, 255, 255, 0.75);
  --hover-bg: rgba(201, 146, 52, 0.1);
  --scroll-thumb: rgba(120, 100, 75, 0.5);
}
:root[data-theme='dark'][data-style='spotlight'] {
  --bg-grad: linear-gradient(180deg, #171216 0%, #120e13 50%, #0e0b0f 100%);
  --surface: #1f191d;
  --surface-2: #262024;
  --text: #f2ebe2;
  --text-muted: #9d8f80;
  --accent: #f2c97e;
  --accent-soft: rgba(242, 201, 126, 0.16);
  --accent-hover: #f7d89a;
  --danger: #e07a66;
  --success: #82c794;
  --on-accent: #2a1b05;
  --on-danger: #3a0d0a;
  --on-success: #0e2a14;
  --edge: rgba(255, 235, 200, 0.08);
  --edge-weak: rgba(255, 235, 200, 0.06);
  --overlay: rgba(0, 0, 0, 0.6);
  --sh-dark: rgba(0, 0, 0, 0.55);
  --sh-light: rgba(255, 214, 150, 0.05);
  --accent-glow: rgba(242, 201, 126, 0.3);
  --raised-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 235, 200, 0.06), inset 0 -2px 5px rgba(0, 0, 0, 0.4);
  --raised: 0 2px 6px rgba(0, 0, 0, 0.5), 0 10px 22px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 235, 200, 0.07), inset 0 -3px 7px rgba(0, 0, 0, 0.42);
  --raised-lg: 0 4px 10px rgba(0, 0, 0, 0.5), 0 18px 38px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 235, 200, 0.075), inset 0 -4px 9px rgba(0, 0, 0, 0.4);
  --pressed-sm: inset 1px 1px 4px rgba(0, 0, 0, 0.6), inset 3px 3px 9px rgba(0, 0, 0, 0.45),
    inset -1px -1px 3px rgba(255, 235, 200, 0.04);
  --inset: inset 2px 2px 5px rgba(0, 0, 0, 0.55), inset 5px 5px 12px rgba(0, 0, 0, 0.4),
    inset -2px -2px 5px rgba(255, 235, 200, 0.04);
  --hover-bg: rgba(242, 201, 126, 0.12);
  --scroll-thumb: rgba(0, 0, 0, 0.5);
}
/* spotlight 装饰：顶部锥形光束（缓慢摆动）+ 中央光晕 + 尘粒 + 淡噪点 */
[data-style='spotlight'] .style-fx::before {
  content: '';
  position: absolute;
  inset: -10% -20% 0;
  background:
    /* 尘粒两层（重复平铺的微光点） */
    radial-gradient(2px 2px at 12% 30%, rgba(255, 236, 200, 0.5), transparent 100%),
    radial-gradient(1.5px 1.5px at 64% 18%, rgba(255, 236, 200, 0.42), transparent 100%),
    radial-gradient(1.5px 1.5px at 34% 52%, rgba(255, 236, 200, 0.34), transparent 100%),
    radial-gradient(2px 2px at 82% 44%, rgba(255, 236, 200, 0.4), transparent 100%),
    radial-gradient(1px 1px at 48% 38%, rgba(255, 236, 200, 0.46), transparent 100%),
    radial-gradient(ellipse 58vw 52vh at 50% -12vh, rgba(242, 201, 126, 0.2), rgba(242, 201, 126, 0.07) 46%, transparent 70%);
  transform-origin: 50% -12vh;
  animation: fx-spot-beam 12s ease-in-out infinite;
  background-size: 46vw 34vh, 38vw 30vh, 52vw 40vh, 44vw 36vh, 60vw 46vh, 100% 100%;
}
[data-style='spotlight'] .style-fx::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 52vw 34vh at 50% 32vh, rgba(242, 201, 126, 0.12), rgba(242, 201, 126, 0.04) 52%, transparent 74%);
  background-size: 140px 140px, 100% 100%;
  opacity: 0.55;
}
:root[data-theme='light'][data-style='spotlight'] .style-fx::before {
  background:
    radial-gradient(2px 2px at 12% 30%, rgba(255, 252, 240, 0.9), transparent 100%),
    radial-gradient(1.5px 1.5px at 64% 18%, rgba(255, 252, 240, 0.8), transparent 100%),
    radial-gradient(1.5px 1.5px at 34% 52%, rgba(255, 252, 240, 0.66), transparent 100%),
    radial-gradient(2px 2px at 82% 44%, rgba(255, 252, 240, 0.78), transparent 100%),
    radial-gradient(1px 1px at 48% 38%, rgba(255, 252, 240, 0.85), transparent 100%),
    radial-gradient(ellipse 58vw 52vh at 50% -12vh, rgba(255, 248, 228, 0.55), rgba(255, 248, 228, 0.18) 46%, transparent 70%);
  opacity: 0.75;
}
:root[data-theme='light'][data-style='spotlight'] .style-fx::after { opacity: 0.3; }
/* spotlight 组件：悬停提升光强（叠光晕），过渡 180ms 平滑 */
[data-style='spotlight'] .btn {
  transition: all 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
[data-style='spotlight'] .btn:hover {
  box-shadow: var(--raised-sm), 0 0 20px var(--accent-glow);
}
[data-style='spotlight'] .card {
  transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
[data-style='spotlight'] .card:hover {
  box-shadow: var(--raised), 0 0 26px var(--accent-glow);
}
@keyframes fx-spot-beam {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(1.6deg); }
}

/* ============================================================
   12) neumorphism 新拟物派 —— 双光影浮雕 · 同色系软塑
   固定光源：左上亮阴影 (-X,-Y) / 右下暗阴影 (+X,+Y)，双色成对；
   元素与背景同色系，凸起表示可交互，凹陷表示输入区 / 已激活。
   交互三定律：Hover Shadowing（悬停阴影缩小，禁止增大）
   · Extrude to Intrude（按下外凸转内凹，禁止 translate 位移）
   · 输入框 focus 内阴影变浅（通道打开而非加压）。
   过渡统一 300ms ease-in-out（Smooth Molding 软塑料韧性）
   ============================================================ */
:root[data-theme='light'][data-style='neumorphism'] {
  /* === 严格按 STYLEKIT 精确值 === */
  --bg-grad: none;
  --surface: #e0e5ec;                    /* 行 69, 132, 267 */
  --surface-2: #f0f0f3;                  /* 行 69, 133, 268 */
  --text: #333333;                       /* 行 137 */
  --text-muted: #6b7280;                 /* 行 138 */
  --accent: #6d5dfc;                     /* 行 136, 269 */
  --accent-soft: rgba(109, 93, 252, 0.18);
  --accent-hover: #5a4af0;
  --danger: #ff6b6b;                     /* 行 269 */
  --success: #4ecdc4;                    /* 行 269 */
  --warn: #ffe66d;                       /* 行 269 */
  --edge: transparent;                   /* 禁止 border */
  --edge-weak: transparent;
  --overlay: rgba(80, 86, 100, 0.4);
  --sh-dark: #b8bcc2;                    /* 行 78, 134 */
  --sh-light: #ffffff;                    /* 行 79, 135 */
  --accent-glow: rgba(109, 93, 252, 0.24);
  /* 阴影层级严格按 STYLEKIT REQUIRED：btn 用 raised-sm, card 用 raised, admin 用 raised-lg */
  --raised-sm: 6px 6px 12px #b8bcc2, -6px -6px 12px #ffffff;    /* 按钮默认：REQUIRED 行 331 */
  --raised: 8px 8px 16px #b8bcc2, -8px -8px 16px #ffffff;      /* 卡片默认：REQUIRED 行 341 */
  --raised-lg: 10px 10px 20px #b8bcc2, -10px -10px 20px #ffffff;
  --pressed-sm: inset 4px 4px 8px #b8bcc2, inset -4px -4px 8px #ffffff;  /* active：行 102, 235, 333 */
  --inset: inset 6px 6px 12px #b8bcc2, inset -6px -6px 12px #ffffff;      /* input 默认深凹：Style Rules 行 108 */
  --hover-bg: rgba(109, 93, 252, 0.08);
  --scroll-thumb: #c2c7cf;
  --tr: 260ms;                           /* Style Rules 正文优先级 260ms */
  --ease: ease-in-out;                   /* Style Rules 行 123 */
  --neu-hover: 4px 4px 8px #b8bcc2, -4px -4px 8px #ffffff;    /* hover 缩小：行 101, 225, 332 */
  --neu-focus: inset 2px 2px 4px #b8bcc2, inset -2px -2px 4px #ffffff;   /* input focus 浅凹：Style Rules 行 109（绝对禁止增大行 40） */
}
:root[data-theme='dark'][data-style='neumorphism'] {
  --bg-grad: none;
  --surface: #2a2e36;
  --surface-2: #323742;
  --text: #d9dde5;
  --text-muted: #8b92a0;
  --accent: #aca3ff;
  --accent-soft: rgba(172, 163, 255, 0.18);
  --accent-hover: #bcb5ff;
  --danger: #ef7a7a;
  --success: #55cfc0;
  --on-accent: #191342;
  --on-danger: #3a110e;
  --on-success: #05302b;
  --edge: transparent;
  --edge-weak: transparent;
  --overlay: rgba(0, 0, 0, 0.6);
  --sh-dark: #1e222a;
  --sh-light: #383f4a;
  --accent-glow: rgba(172, 163, 255, 0.25);
  --raised-sm: 6px 6px 12px #1e222a, -6px -6px 12px #383f4a;
  --raised: 8px 8px 16px #1e222a, -8px -8px 16px #383f4a;
  --raised-lg: 10px 10px 20px #1e222a, -10px -10px 20px #383f4a;
  --pressed-sm: inset 4px 4px 8px #1e222a, inset -4px -4px 8px #383f4a;
  --inset: inset 6px 6px 12px #1e222a, inset -6px -6px 12px #383f4a;
  --hover-bg: rgba(172, 163, 255, 0.1);
  --scroll-thumb: #444b58;
  --tr: 260ms;
  --ease: ease-in-out;
  --neu-hover: 4px 4px 8px #1e222a, -4px -4px 8px #383f4a;
  --neu-focus: inset 2px 2px 4px #1e222a, inset -2px -2px 4px #383f4a;
}
/* 新拟物克制装饰：无背景装饰层（同色系表面即全部层次） */
[data-style='neumorphism'] .style-fx {
  display: none;
}
/* 核心：背景层必须是纯色 surface，--bg-grad: none 会让 .bg-layer 变透明 */
[data-style='neumorphism'] .bg-layer {
  background: var(--surface) !important;
  background-color: var(--surface) !important;
  background-image: none !important;
}
/* card .icon：不能 accent 填充！必须是同色系凹进去的 inset（showcase 示例） */
[data-style='neumorphism'] .card .icon {
  background: var(--surface) !important;
  color: var(--accent) !important;
  box-shadow: var(--inset);
  border-radius: 14px;
}
/* 输入框：common.css 默认 border 要禁掉；默认深 inset（内容区凹陷） */
[data-style='neumorphism'] .input,
[data-style='neumorphism'] .select,
[data-style='neumorphism'] .textarea {
  border: none !important;
  background: var(--surface) !important;
  box-shadow: var(--inset);
}
/* glass / glass-strong：同色系凸 */
[data-style='neumorphism'] .glass,
[data-style='neumorphism'] .glass-strong {
  background: var(--surface) !important;
  border: none !important;
  box-shadow: var(--raised-lg);
  backdrop-filter: none !important;
}
/* admin-panel + card 基础：同色系凸，覆盖 common.css border/background */
/* card 用 --raised（STYLEKIT REQUIRED 行 341：shadow-[8px_8px_16px...]） */
/* admin-panel 保持 --raised-lg（更大容器） */
[data-style='neumorphism'] .card {
  border: none !important;
  background: var(--surface) !important;
  box-shadow: var(--raised);
  border-radius: 22px;
  transition: box-shadow var(--tr) var(--ease);
}
[data-style='neumorphism'] .admin-panel {
  border: none !important;
  background: var(--surface) !important;
  box-shadow: var(--raised-lg);
  border-radius: 22px;
  transition: box-shadow var(--tr) var(--ease);
}
[data-style='neumorphism'] .card:hover {
  transform: none !important;
  box-shadow: var(--neu-hover);
}
[data-style='neumorphism'] .card:active {
  transform: none !important;
  box-shadow: var(--pressed-sm);
}
/* 按钮：hover 阴影缩小且禁止位移；active 外凸转内凹 */
/* 核心：所有按钮都是同色系背景 surface，禁止 accent/danger 背景填充 */
[data-style='neumorphism'] .btn {
  background: var(--surface) !important;
  color: var(--text);
  border: none !important;
  border-radius: 14px;
  box-shadow: var(--raised-sm);
  transition: box-shadow var(--tr) var(--ease), color var(--tr) var(--ease);
}
[data-style='neumorphism'] .btn:hover {
  transform: none !important;
  box-shadow: var(--neu-hover);
}
[data-style='neumorphism'] .btn:active {
  transform: none !important;
  box-shadow: var(--pressed-sm);
}
/* btn-primary：同色系背景 + accent 文字 + accent 底部 inset 指示（不用填充！） */
[data-style='neumorphism'] .btn-primary {
  background: var(--surface) !important;
  color: var(--accent) !important;
  border: none !important;
  box-shadow: var(--raised-sm), inset 0 -3px 0 0 var(--accent);
}
[data-style='neumorphism'] .btn-primary:hover {
  transform: none !important;
  color: var(--accent-hover) !important;
  box-shadow: var(--neu-hover), inset 0 -3px 0 0 var(--accent-hover);
}
[data-style='neumorphism'] .btn-primary:active {
  transform: none !important;
  box-shadow: var(--pressed-sm);
}
/* 输入框：focus 时内阴影变浅（通道开放而非加压） */
[data-style='neumorphism'] .input:focus,
[data-style='neumorphism'] .select:focus,
[data-style='neumorphism'] .textarea:focus {
  box-shadow: var(--neu-focus);
}
/* neumorphism：导航栏标签按钮 —— 外凸非激活，内凹激活（禁止 accent 背景填充） */
[data-style='neumorphism'] .ntab-btn {
  background: var(--surface);
  border: none;
  color: var(--text);
  box-shadow: var(--raised-sm);
}
[data-style='neumorphism'] .ntab-btn:hover {
  box-shadow: var(--neu-hover);
}
[data-style='neumorphism'] .ntab-btn.active {
  background: var(--surface) !important;
  color: var(--accent) !important;
  box-shadow: var(--pressed-sm);
}

/* === 新拟物：补充覆盖所有遗漏的按钮/交互元素 === */
/* Blanket：禁止任何按钮/可点击元素的 translateY 位移（新拟物铁律） */
[data-style='neumorphism'] [class*='btn']:hover,
[data-style='neumorphism'] [class*='btn']:active,
[data-style='neumorphism'] .icon-btn:hover,
[data-style='neumorphism'] .icon-btn:active,
[data-style='neumorphism'] .card .icon:hover {
  transform: none !important;
}

/* .icon-btn：图标按钮 —— 同色系凸，hover 阴影缩小，active 内凹 */
[data-style='neumorphism'] .icon-btn {
  background: var(--surface) !important;
  border: none !important;
  border-radius: 12px;
  color: var(--text);
  box-shadow: var(--raised-sm);
  transition: box-shadow var(--tr) var(--ease), color var(--tr) var(--ease);
}
[data-style='neumorphism'] .icon-btn:hover {
  color: var(--accent);
  box-shadow: var(--neu-hover);
}
[data-style='neumorphism'] .icon-btn:active {
  box-shadow: var(--pressed-sm);
}

/* .btn-danger：危险操作 —— 同色系背景 + danger 文字（禁止 danger 背景填充！） */
[data-style='neumorphism'] .btn-danger {
  background: var(--surface) !important;
  color: var(--danger) !important;
  border: none !important;
  box-shadow: var(--raised-sm);
}
[data-style='neumorphism'] .btn-danger:hover {
  background: var(--surface) !important;
  color: var(--danger) !important;
  box-shadow: var(--neu-hover);
}
[data-style='neumorphism'] .btn-danger:active {
  background: var(--surface) !important;
  color: var(--danger) !important;
  box-shadow: var(--pressed-sm);
}

/* .btn-save-order：排序保存按钮 —— 同色系 + accent 文字，禁止 accent 背景 */
[data-style='neumorphism'] .btn-save-order {
  background: var(--surface) !important;
  color: var(--accent) !important;
  border: none !important;
  box-shadow: var(--raised-sm), inset 0 -3px 0 0 var(--accent);
  transition: box-shadow var(--tr) var(--ease), color var(--tr) var(--ease);
}
[data-style='neumorphism'] .btn-save-order:hover {
  background: var(--surface) !important;
  color: var(--accent-hover) !important;
  box-shadow: var(--neu-hover), inset 0 -3px 0 0 var(--accent-hover);
  filter: none !important;
}
[data-style='neumorphism'] .btn-save-order:active {
  box-shadow: var(--pressed-sm);
  filter: none !important;
}

/* .btn-sort-toggle：分组排序切换 */
[data-style='neumorphism'] .group-sort .btn-sort-toggle {
  background: var(--surface) !important;
  border: none !important;
  box-shadow: var(--raised-sm);
}
[data-style='neumorphism'] .group-sort .btn-sort-toggle:hover {
  box-shadow: var(--neu-hover);
}

/* .acc-save-btn：账号行内保存按钮 */
[data-style='neumorphism'] .acc-save-btn {
  background: var(--surface) !important;
  border: none !important;
  box-shadow: var(--raised-sm), inset 0 -3px 0 0 var(--accent);
}
[data-style='neumorphism'] .acc-save-btn:hover {
  box-shadow: var(--neu-hover), inset 0 -3px 0 0 var(--accent-hover);
}

/* .login-card .btn-primary：登录页主按钮 —— 全宽同色系 + accent 指示 */
[data-style='neumorphism'] .login-card .btn-primary {
  background: var(--surface) !important;
  color: var(--accent) !important;
  border: none !important;
  box-shadow: var(--raised-sm), inset 0 -3px 0 0 var(--accent);
}
[data-style='neumorphism'] .login-card .btn-primary:hover {
  box-shadow: var(--neu-hover), inset 0 -3px 0 0 var(--accent-hover);
}

/* .twofa-back-btn：2FA 返回按钮 —— 同色系凸 */
[data-style='neumorphism'] .twofa-back-btn {
  background: var(--surface) !important;
  border: none !important;
  color: var(--text-muted);
  box-shadow: var(--raised-sm);
}
[data-style='neumorphism'] .twofa-back-btn:hover {
  color: var(--accent);
  box-shadow: var(--neu-hover);
}

/* :disabled 状态：保持同色系 + 更浅阴影 */
[data-style='neumorphism'] .btn[disabled],
[data-style='neumorphism'] .icon-btn[disabled],
[data-style='neumorphism'] .btn-vis[disabled] {
  background: var(--surface) !important;
  box-shadow: var(--neu-hover) !important;
  opacity: 0.5;
  cursor: not-allowed;
  color: var(--text-muted);
}

/* === Admin 标签切换（.tab / .subtab）—— 新拟物同色系 === */
/* 经典新拟物模式：容器 = 内凹模具（--inset），激活项 = 外凸按钮（--raised-sm） */
[data-style='neumorphism'] .admin-tabs {
  border: none !important;
  background: var(--surface) !important;
  box-shadow: var(--inset);
}
[data-style='neumorphism'] .admin-tabs .tab {
  background: transparent !important;
  border: none !important;
  color: var(--text-muted);
  box-shadow: none;
  transition: box-shadow var(--tr) var(--ease), color var(--tr) var(--ease);
}
[data-style='neumorphism'] .admin-tabs .tab:hover {
  color: var(--text);
  box-shadow: var(--neu-hover);
}
[data-style='neumorphism'] .admin-tabs .tab.active {
  background: var(--surface) !important;
  color: var(--accent) !important;
  box-shadow: var(--raised-sm);
  font-weight: 600;
}

/* .settings-subnav 子标签：容器也是内凹模具！ */
[data-style='neumorphism'] .settings-subnav {
  border: none !important;
  background: var(--surface) !important;
  box-shadow: var(--inset);
}
[data-style='neumorphism'] .settings-subnav .subtab {
  background: transparent !important;
  border: none !important;
  color: var(--text-muted);
  box-shadow: none;
  transition: box-shadow var(--tr) var(--ease), color var(--tr) var(--ease);
}
[data-style='neumorphism'] .settings-subnav .subtab:hover {
  background: var(--surface) !important;
  color: var(--text);
  box-shadow: var(--neu-hover);
}
[data-style='neumorphism'] .settings-subnav .subtab.active {
  background: var(--surface) !important;
  color: var(--accent) !important;
  box-shadow: var(--raised-sm);
  font-weight: 600;
}

/* .pager 分页按钮：同色系凸 */
[data-style='neumorphism'] .pager .btn {
  background: var(--surface) !important;
  border: none !important;
  box-shadow: var(--raised-sm);
}
[data-style='neumorphism'] .pager .btn:hover {
  box-shadow: var(--neu-hover);
}
[data-style='neumorphism'] .pager .btn.active {
  color: var(--accent) !important;
  box-shadow: var(--pressed-sm);
}

/* focus-visible：新拟物用 accent 内阴影环（代替 outline） */
[data-style='neumorphism'] :focus-visible {
  outline: none;
  box-shadow: var(--neu-focus), inset 0 0 0 2px var(--accent);
}
[data-style='neumorphism'] .btn:focus-visible,
[data-style='neumorphism'] .icon-btn:focus-visible,
[data-style='neumorphism'] .ntab-btn:focus-visible,
[data-style='neumorphism'] .admin-tabs .tab:focus-visible,
[data-style='neumorphism'] .settings-subnav .subtab:focus-visible {
  box-shadow: var(--raised-sm), inset 0 0 0 2px var(--accent);
}
[data-style='neumorphism'] .btn-primary:focus-visible,
[data-style='neumorphism'] .btn-save-order:focus-visible {
  box-shadow: var(--raised-sm), inset 0 -3px 0 0 var(--accent), inset 0 0 0 2px var(--accent);
}

/* .select：隐藏浏览器默认箭头 */
[data-style='neumorphism'] .select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236d5dfc' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 34px;
}
[data-theme='dark'][data-style='neumorphism'] .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23aca3ff' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

/* ============================================================
   13) skeuomorphism 拟物设计 —— 真实材质 · 逼真光影 · 物理按压
   皮革棕 / 木材米 / 纸张白自然材质色系；表面用纵向渐变造立体，
   元素统一「顶部高光 + 底部暗边」inset 细节（光源恒定来自上方），
   阴影为多层柔焦（禁硬边阴影）。交互：hover 1px 上浮且阴影加深
   （Tactile Resistance），active 1px 下压 + 更紧凑阴影，模拟按键
   阻尼，无弹跳放大；输入焦点加深外阴影（非外发光）。200ms ease-out
   ============================================================ */
:root[data-theme='light'][data-style='skeuomorphism'] {
  --bg-grad: linear-gradient(180deg, #e8dfd1 0%, #d4c4a8 100%);
  --surface: #e7ddcc;
  --surface-2: #f1eadb;
  --text: #372c1f;
  --text-muted: #7c6648;
  --accent: #5d4a30;
  --accent-soft: rgba(93, 74, 48, 0.16);
  --accent-hover: #4d3d27;
  --on-accent: #ffffff;
  --danger: #a84c40;
  --success: #5a7a4a;
  --edge: #a89880;
  --edge-weak: rgba(168, 152, 128, 0.5);
  --overlay: rgba(58, 47, 34, 0.45);
  --sh-dark: rgba(58, 47, 34, 0.4);
  --sh-light: rgba(255, 255, 255, 0.75);
  --accent-glow: rgba(93, 74, 48, 0.3);
  --raised-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  --raised: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23),
    inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  --raised-lg: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23),
    inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  --pressed-sm: 0 1px 2px rgba(0, 0, 0, 0.24), inset 0 2px 4px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(0, 0, 0, 0.12);
  --inset: inset 2px 2px 5px rgba(0, 0, 0, 0.14), inset -1px -1px 2px rgba(255, 255, 255, 0.6);
  --hover-bg: rgba(93, 74, 48, 0.1);
  --scroll-thumb: #a89880;
  --tr: 200ms;
  --ease: ease-out;
  --skeu-hover: 0 6px 12px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
:root[data-theme='dark'][data-style='skeuomorphism'] {
  --bg-grad: linear-gradient(180deg, #29241c 0%, #201c16 100%);
  --surface: #2d2820;
  --surface-2: #373024;
  --text: #f0e9da;
  --text-muted: #b5a584;
  --accent: #e0c184;
  --accent-soft: rgba(224, 193, 132, 0.18);
  --accent-hover: #ead29b;
  --danger: #d97a6a;
  --success: #8faf7e;
  --on-accent: #2c2113;
  --on-danger: #3a0d0a;
  --on-success: #06291a;
  --edge: rgba(184, 168, 138, 0.35);
  --edge-weak: rgba(0, 0, 0, 0.35);
  --overlay: rgba(0, 0, 0, 0.6);
  --sh-dark: rgba(0, 0, 0, 0.5);
  --sh-light: rgba(255, 244, 214, 0.08);
  --accent-glow: rgba(224, 193, 132, 0.28);
  --raised-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 244, 214, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.4);
  --raised: 0 3px 6px rgba(0, 0, 0, 0.45), 0 3px 6px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 244, 214, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.4);
  --raised-lg: 0 10px 20px rgba(0, 0, 0, 0.5), 0 6px 6px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 244, 214, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.38);
  --pressed-sm: 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 2px 4px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(0, 0, 0, 0.45);
  --inset: inset 2px 2px 5px rgba(0, 0, 0, 0.45), inset -1px -1px 2px rgba(255, 244, 214, 0.05);
  --hover-bg: rgba(224, 193, 132, 0.12);
  --scroll-thumb: #4a4232;
  --tr: 200ms;
  --ease: ease-out;
  --skeu-hover: 0 6px 12px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 244, 214, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.38);
}
/* skeuomorphism 装饰：极淡织物纹理缓慢受光位移（Texture Shimmer） */
[data-style='skeuomorphism'] .style-fx::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.035) 0px,
    rgba(255, 255, 255, 0.035) 1px,
    transparent 1px,
    transparent 4px,
    rgba(0, 0, 0, 0.02) 4px,
    rgba(0, 0, 0, 0.02) 5px,
    transparent 5px,
    transparent 9px
  );
  animation: fx-skeu-weave 26s ease-in-out infinite alternate;
}
[data-style='skeuomorphism'] .style-fx::after { content: none; }
/* skeuomorphism 表面：面板用纵向渐变模拟受光立体（卡面 + 主按钮皮革渐变） */
[data-style='skeuomorphism'] .glass,
[data-style='skeuomorphism'] .glass-strong {
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
}
[data-style='skeuomorphism'] .card {
  border-radius: 12px;
}
[data-style='skeuomorphism'] .btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--skeu-hover);
}
[data-style='skeuomorphism'] .btn:active {
  transform: translateY(1px);
}
[data-style='skeuomorphism'] .btn-primary {
  background: linear-gradient(180deg, #c8b494, #a08a68);
  border-color: #a89880;
  color: #2c2113;
}
[data-style='skeuomorphism'] .btn-primary:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #d4c2a4, #b09a75);
  box-shadow: var(--skeu-hover);
}
[data-style='skeuomorphism'] .btn-primary:active {
  transform: translateY(1px);
}
:root[data-theme='dark'][data-style='skeuomorphism'] .btn-primary {
  background: linear-gradient(180deg, #d8bc82, #b89a5e);
}
:root[data-theme='dark'][data-style='skeuomorphism'] .btn-primary:hover {
  background: linear-gradient(180deg, #e3cb95, #c4a86c);
}
/* 输入焦点：外阴影加深（Embossed Focus，非外发光轮廓），纸面材质 */
[data-style='skeuomorphism'] .input,
[data-style='skeuomorphism'] .select,
[data-style='skeuomorphism'] .textarea {
  background: #f5efe6;
}
:root[data-theme='dark'][data-style='skeuomorphism'] .input,
:root[data-theme='dark'][data-style='skeuomorphism'] .select,
:root[data-theme='dark'][data-style='skeuomorphism'] .textarea {
  background: #24201a;
}
[data-style='skeuomorphism'] .input:focus,
[data-style='skeuomorphism'] .select:focus,
[data-style='skeuomorphism'] .textarea:focus {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
/* skeuomorphism：导航栏标签按钮 —— 拟物凸起非激活，按压激活 */
[data-style='skeuomorphism'] .ntab-btn {
  background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(0,0,0,0.04));
  border: 1px solid rgba(0,0,0,0.15);
  box-shadow: 0 2px 4px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.5);
}
[data-style='skeuomorphism'] .ntab-btn:hover {
  box-shadow: 0 3px 6px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.6);
}
[data-style='skeuomorphism'] .ntab-btn.active {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.25), inset 0 -1px 0 rgba(255,255,255,0.15);
}
@keyframes fx-skeu-weave {
  from { background-position: 0 0; }
  to { background-position: 44px 30px; }
}

/* ============================================================
   14) immersive-photo 沉浸摄影 —— 图即内容 · 磨砂玻璃 · 琥珀金
   墨色 #0C0D10 / 纸色 #F4F1EA 双态，唯一强调色琥珀金 #E8B04B
   （从照片暖光取样，仅用于关键 CTA 与高亮）。UI 全面退后：
   磨砂玻璃面板（backdrop-blur）+ 白系细描边，阴影为黑系大模糊
   慢节拍。交互：hover 仅阴影加深（无位移无缩放），active 轻缩
   （scale .98），300ms ease-out 电影感慢过渡；启用壁纸时装饰层
   自动隐藏（has-wallpaper），壁纸即成为全幅主角——正合「图即
   内容」信条
   ============================================================ */
:root[data-theme='light'][data-style='immersive-photo'] {
  --bg-grad: linear-gradient(160deg, #f4f1e8 0%, #f4f1e8 55%, #e9e5da 100%);
  --surface: rgba(255, 255, 255, 0.68);
  --surface-2: rgba(255, 255, 255, 0.84);
  --text: #14161b;
  --text-muted: #555a63;
  --accent: #b27516;
  --accent-soft: rgba(178, 117, 22, 0.18);
  --accent-hover: #96620f;
  --on-accent: #1d1303;
  --danger: #b3473b;
  --success: #457a5a;
  --edge: rgba(255, 255, 255, 0.7);
  --edge-weak: rgba(12, 13, 16, 0.1);
  --overlay: rgba(12, 13, 16, 0.5);
  --sh-dark: rgba(0, 0, 0, 0.28);
  --sh-light: rgba(0, 0, 0, 0.12);
  --accent-glow: rgba(178, 117, 22, 0.32);
  --raised-sm: 0 2px 8px rgba(0, 0, 0, 0.22);
  --raised: 0 8px 28px rgba(0, 0, 0, 0.28);
  --raised-lg: 0 24px 60px rgba(0, 0, 0, 0.34);
  --pressed-sm: inset 0 1px 2px rgba(0, 0, 0, 0.22);
  --inset: inset 0 1px 3px rgba(0, 0, 0, 0.18);
  --hover-bg: rgba(255, 255, 255, 0.55);
  --scroll-thumb: rgba(12, 13, 16, 0.3);
  --tr: 300ms;
  --ease: ease-out;
}
:root[data-theme='dark'][data-style='immersive-photo'] {
  --bg-grad: linear-gradient(160deg, #0b0c0f 0%, #0b0c0f 55%, #121418 100%);
  --surface: rgba(255, 255, 255, 0.08);
  --surface-2: rgba(255, 255, 255, 0.12);
  --text: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.66);
  --accent: #f4c166;
  --accent-soft: rgba(244, 193, 102, 0.2);
  --accent-hover: #f8d085;
  --danger: #e07a6c;
  --success: #63b98a;
  --on-accent: #1d1303;
  --on-danger: #3a0d0a;
  --on-success: #0e2a14;
  --edge: rgba(255, 255, 255, 0.28);
  --edge-weak: rgba(255, 255, 255, 0.18);
  --overlay: rgba(0, 0, 0, 0.7);
  --sh-dark: rgba(0, 0, 0, 0.5);
  --sh-light: rgba(0, 0, 0, 0.2);
  --accent-glow: rgba(244, 193, 102, 0.35);
  --raised-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --raised: 0 8px 28px rgba(0, 0, 0, 0.4);
  --raised-lg: 0 24px 60px rgba(0, 0, 0, 0.5);
  --pressed-sm: inset 0 1px 2px rgba(0, 0, 0, 0.35);
  --inset: inset 0 1px 3px rgba(0, 0, 0, 0.3);
  --hover-bg: rgba(255, 255, 255, 0.2);
  --scroll-thumb: rgba(255, 255, 255, 0.3);
  --tr: 300ms;
  --ease: ease-out;
}
/* immersive-photo 装饰：暗角 scrim（文字压图可读性纪律的无图版） */
[data-style='immersive-photo'] .style-fx::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.16), transparent 40%),
    radial-gradient(ellipse 120vw 90vh at 50% 40%, transparent 62%, rgba(0, 0, 0, 0.14) 100%);
}
[data-style='immersive-photo'] .style-fx::after { content: none; }
:root[data-theme='light'][data-style='immersive-photo'] .style-fx::before {
  background: radial-gradient(ellipse 120vw 90vh at 50% 40%, transparent 64%, rgba(12, 13, 16, 0.07) 100%);
}
/* immersive-photo 表面：磨砂玻璃让 UI 浮于任意影像之上 */
[data-style='immersive-photo'] .glass,
[data-style='immersive-photo'] .glass-strong {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
[data-style='immersive-photo'] .card {
  border-radius: 18px;
}
[data-style='immersive-photo'] .btn:hover {
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.32);
}
[data-style='immersive-photo'] .btn:active {
  transform: scale(0.98);
}
[data-style='immersive-photo'] .input,
[data-style='immersive-photo'] .select,
[data-style='immersive-photo'] .textarea {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
/* 深色下拉框：option 是操作系统原生渲染，不支持 backdrop-filter，
   必须用不透明实色覆盖 surface 半透明，否则展开后选项消失 */
:root[data-theme='dark'][data-style='immersive-photo'] .select {
  background: #1b1d22;
}
:root[data-theme='dark'][data-style='immersive-photo'] .select option {
  background: #1b1d22;
  color: #ffffff;
}
[data-style='immersive-photo'] .input:focus,
[data-style='immersive-photo'] .select:focus,
[data-style='immersive-photo'] .textarea:focus {
  box-shadow: 0 0 0 2px var(--edge), var(--raised);
}

/* ============================================================
   15) ghibli 吉卜力 —— 手绘水彩 · 治愈自然 · 微风动效
   天空蓝→奶油→草绿梦幻渐变背景，鼠尾草绿为交互主色；阴影是
   本体色的水彩扩散（绿系，绝不用厚重黑影破坏水彩质地）；圆角
   rounded-2xl 级、细描边 hand-drawn 感。交互：Gentle Breeze
   （hover 轻微胀大 1.02）、Soft Cushion（active 温和按压 0.98）、
   300ms ease-out 从容节奏。装饰：多朵柔焦白云缓缓漂移 + 晨光
   光晕（自然元素：云）
   ============================================================ */
:root[data-theme='light'][data-style='ghibli'] {
  --bg-grad: linear-gradient(180deg, #d8ecf3 0%, #f4e4bc 55%, #cfe8d8 100%);
  --surface: #f7ecd2;
  --surface-2: #fbf3e0;
  --text: #3a3122;
  --text-muted: #7e6f59;
  --accent: #2e6b59;
  --accent-soft: rgba(46, 107, 89, 0.16);
  --accent-hover: #275c4c;
  --danger: #c26553;
  --success: #6fa378;
  --edge: rgba(66, 128, 110, 0.4);
  --edge-weak: rgba(66, 128, 110, 0.25);
  --overlay: rgba(90, 74, 58, 0.45);
  --sh-dark: rgba(66, 128, 110, 0.3);
  --sh-light: rgba(255, 252, 240, 0.8);
  --accent-glow: rgba(46, 107, 89, 0.35);
  --raised-sm: 0 2px 8px rgba(66, 128, 110, 0.15);
  --raised: 0 4px 16px rgba(66, 128, 110, 0.2);
  --raised-lg: 0 8px 32px rgba(66, 128, 110, 0.25);
  --pressed-sm: 0 2px 8px rgba(66, 128, 110, 0.18), inset 0 1px 2px rgba(90, 74, 58, 0.08);
  --inset: inset 1px 2px 4px rgba(66, 128, 110, 0.25);
  --hover-bg: rgba(46, 107, 89, 0.12);
  --scroll-thumb: rgba(66, 128, 110, 0.55);
  --tr: 300ms;
  --ease: ease-out;
  --gh-hover: 0 8px 24px rgba(46, 107, 89, 0.3);
}
:root[data-theme='dark'][data-style='ghibli'] {
  --bg-grad: linear-gradient(180deg, #1b2a31 0%, #22363d 50%, #2c3d35 100%);
  --surface: #2c3e3d;
  --surface-2: #334845;
  --text: #f2ecdc;
  --text-muted: #9fb0a0;
  --accent: #b1e1d2;
  --accent-soft: rgba(177, 225, 210, 0.18);
  --accent-hover: #c3ebe0;
  --danger: #e0917f;
  --success: #9cc7a3;
  --on-accent: #0d2a23;
  --on-danger: #3a0d0a;
  --on-success: #06291a;
  --edge: rgba(177, 225, 210, 0.3);
  --edge-weak: rgba(177, 225, 210, 0.18);
  --overlay: rgba(10, 20, 18, 0.6);
  --sh-dark: rgba(14, 26, 24, 0.5);
  --sh-light: rgba(255, 244, 200, 0.06);
  --accent-glow: rgba(177, 225, 210, 0.3);
  --raised-sm: 0 2px 8px rgba(14, 26, 24, 0.4);
  --raised: 0 4px 16px rgba(14, 26, 24, 0.45);
  --raised-lg: 0 8px 32px rgba(14, 26, 24, 0.5);
  --pressed-sm: 0 2px 8px rgba(14, 26, 24, 0.42), inset 0 1px 2px rgba(0, 0, 0, 0.25);
  --inset: inset 1px 2px 4px rgba(0, 0, 0, 0.3);
  --hover-bg: rgba(177, 225, 210, 0.12);
  --scroll-thumb: rgba(177, 225, 210, 0.4);
  --tr: 300ms;
  --ease: ease-out;
  --gh-hover: 0 8px 24px rgba(14, 26, 24, 0.55);
}
/* ghibli 装饰：柔焦云朵缓缓漂移（Gentle Breeze）+ 晨光光晕 */
[data-style='ghibli'] .style-fx::before {
  content: '';
  position: absolute;
  inset: -6% -10%;
  background:
    radial-gradient(56px 22px at 12% 22%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 72%),
    radial-gradient(40px 16px at 16% 19%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 72%),
    radial-gradient(70px 26px at 66% 14%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 72%),
    radial-gradient(48px 18px at 72% 11%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 72%),
    radial-gradient(60px 22px at 42% 30%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 72%),
    radial-gradient(38px 15px at 88% 26%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 72%);
  animation: fx-ghibli-drift 22s ease-in-out infinite alternate;
}
[data-style='ghibli'] .style-fx::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60vw 40vh at 70% 10%, rgba(255, 224, 160, 0.2), transparent 70%);
}
:root[data-theme='dark'][data-style='ghibli'] .style-fx::before {
  background:
    radial-gradient(56px 22px at 12% 22%, rgba(220, 240, 235, 0.14), rgba(220, 240, 235, 0) 72%),
    radial-gradient(40px 16px at 16% 19%, rgba(220, 240, 235, 0.16), rgba(220, 240, 235, 0) 72%),
    radial-gradient(70px 26px at 66% 14%, rgba(220, 240, 235, 0.12), rgba(220, 240, 235, 0) 72%),
    radial-gradient(48px 18px at 72% 11%, rgba(220, 240, 235, 0.13), rgba(220, 240, 235, 0) 72%),
    radial-gradient(60px 22px at 42% 30%, rgba(220, 240, 235, 0.1), rgba(220, 240, 235, 0) 72%),
    radial-gradient(38px 15px at 88% 26%, rgba(220, 240, 235, 0.09), rgba(220, 240, 235, 0) 72%);
}
:root[data-theme='dark'][data-style='ghibli'] .style-fx::after {
  background: radial-gradient(ellipse 60vw 40vh at 70% 10%, rgba(190, 225, 255, 0.08), transparent 70%);
}
/* ghibli 组件：hover 轻胀 1.02（非位移），active 温和按压 0.98 */
[data-style='ghibli'] .btn:hover {
  transform: scale(1.02);
  box-shadow: var(--gh-hover);
}
[data-style='ghibli'] .btn:active {
  transform: scale(0.98);
}
[data-style='ghibli'] .card {
  border-radius: 18px;
}
[data-style='ghibli'] .card:hover {
  box-shadow: var(--gh-hover);
}
[data-style='ghibli'] .input,
[data-style='ghibli'] .select,
[data-style='ghibli'] .textarea {
  background: #faf5eb;
}
:root[data-theme='dark'][data-style='ghibli'] .input,
:root[data-theme='dark'][data-style='ghibli'] .select,
:root[data-theme='dark'][data-style='ghibli'] .textarea {
  background: #263633;
}
[data-style='ghibli'] .card,
[data-style='ghibli'] .admin-panel {
  border-radius: 18px;
}
@keyframes fx-ghibli-drift {
  from { transform: translateX(-1.5%); }
  to { transform: translateX(1.5%); }
}

/* ============================================================
   16) fluent 流利设计（STYLEKIT Fluent Design） —— 微软蓝 · 亚克力 · Reveal 光效
   核心：
     主蓝 #0078d4 / hover #106ebe / active #005a9e（三级蓝层次）
     背景 #f3f2f1 → #eaeef2（Mica 渐变）
     文字 #323130 / 次要 #605e5c / 弱化 #a19f9d
   设计原则：
     柔和分层双层阴影（大模糊 + 近距贴影），圆角克制 8-10px，
     亚克力只选择性用于 glass 面板（**禁止滥用于 card/btn**），
     卡片 hover Z 轴上浮 4px + 阴影扩张 + Reveal 背景提亮，
     图标容器 group-hover:scale(1.05 微交互，
     按钮 hover 上浮 2px，active:scale(0.97) + 贴面阴影归零，
     全部可交互元素 focus ring-2 + ring-offset-2（焦点永不缺席），
     按钮 duration-150 / 卡片 duration-200 ease-out（**禁止超 200ms**）。
   禁止：duration > 200ms / 重阴影 / 过度亚克力 / 忽略焦点 / active != scale(0.97)。
   ============================================================ */
:root[data-theme='light'][data-style='fluent'] {
  --bg-grad: linear-gradient(180deg, #f3f2f1 0%, #eaeef2 100%);
  --surface: rgba(255, 255, 255, 0.72);  /* 亚克力基底 */
  --surface-2: #ffffff;
  --text: #323130;
  --text-muted: #605e5c;
  --accent: #0078d4;               /* 微软蓝（主色） */
  --accent-soft: rgba(0, 120, 212, 0.12);
  --accent-hover: #106ebe;         /* hover 深蓝 */
  --danger: #d13438;
  --success: #107c41;
  --on-accent: #ffffff;
  --on-danger: #ffffff;
  --on-success: #ffffff;
  --edge: #e1e1e1;
  --edge-weak: rgba(225, 225, 225, 0.6);
  --overlay: rgba(0, 0, 0, 0.42);
  --sh-dark: rgba(0, 0, 0, 0.16);
  --sh-light: rgba(255, 255, 255, 0.9);
  --accent-glow: rgba(0, 120, 212, 0.25);
  /* Fluent 柔和分层双层阴影 */
  --raised-sm: 0 1.6px 3.6px rgba(0, 0, 0, 0.13), 0 0.3px 0.9px rgba(0, 0, 0, 0.1);
  --raised: 0 3.2px 7.2px rgba(0, 0, 0, 0.13), 0 0.6px 1.8px rgba(0, 0, 0, 0.1);
  --raised-lg: 0 6.4px 14.4px rgba(0, 0, 0, 0.13), 0 1.2px 3.6px rgba(0, 0, 0, 0.1);
  --pressed-sm: inset 0 0.6px 1.8px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --inset: inset 0 1px 2px rgba(0, 0, 0, 0.08);
  --hover-bg: rgba(0, 0, 0, 0.04);
  --scroll-thumb: #c8c6c4;
  --tr: 200ms;                     /* 卡片默认 */
  --ease: ease-out;
  --ring-offset: #ffffff;
}
:root[data-theme='dark'][data-style='fluent'] {
  --bg-grad: linear-gradient(180deg, #202020 0%, #1b1b1b 100%);
  --surface: rgba(45, 45, 45, 0.72);
  --surface-2: rgba(58, 58, 58, 0.88);
  --text: #ffffff;
  --text-muted: #c8c6c4;
  --accent: #3a96dd;               /* dark 模式亮蓝 */
  --accent-soft: rgba(58, 150, 221, 0.22);
  --accent-hover: #5cb0e8;
  --danger: #e81123;
  --success: #107c41;
  --on-accent: #041c33;
  --on-danger: #ffffff;
  --on-success: #ffffff;
  --edge: #3d3d3d;
  --edge-weak: rgba(255, 255, 255, 0.06);
  --overlay: rgba(0, 0, 0, 0.6);
  --sh-dark: rgba(0, 0, 0, 0.45);
  --sh-light: rgba(255, 255, 255, 0.06);
  --accent-glow: rgba(58, 150, 221, 0.3);
  --raised-sm: 0 1.6px 3.6px rgba(0, 0, 0, 0.35), 0 0.3px 0.9px rgba(0, 0, 0, 0.3);
  --raised: 0 3.2px 7.2px rgba(0, 0, 0, 0.4), 0 0.6px 1.8px rgba(0, 0, 0, 0.3);
  --raised-lg: 0 6.4px 14.4px rgba(0, 0, 0, 0.45), 0 1.2px 3.6px rgba(0, 0, 0, 0.35);
  --pressed-sm: inset 0 0.6px 1.8px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --inset: inset 0 1px 2px rgba(0, 0, 0, 0.3);
  --hover-bg: rgba(255, 255, 255, 0.06);
  --scroll-thumb: #4a4a4a;
  --tr: 200ms;
  --ease: ease-out;
  --ring-offset: #202020;
}

/* ========== fluent 装饰：顶部 Mica 微光（克制的光效元素） ========== */
[data-style='fluent'] .style-fx::before { content: none; }
[data-style='fluent'] .style-fx::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70vw 34vh at 50% -6vh, rgba(0, 120, 212, 0.07), transparent 70%);
}
:root[data-theme='dark'][data-style='fluent'] .style-fx::after {
  background: radial-gradient(ellipse 70vw 34vh at 50% -6vh, rgba(58, 150, 221, 0.07), transparent 70%);
}

/* ========== fluent 字体：Segoe UI 字体风格 ========== */
[data-style='fluent'] body,
[data-style='fluent'] .card,
[data-style='fluent'] .btn,
[data-style='fluent'] .input,
[data-style='fluent'] .textarea,
[data-style='fluent'] .select,
[data-style='fluent'] .ntab-btn,
[data-style='fluent'] .admin-panel {
  font-family: 'Segoe UI', 'Segoe UI Web', system-ui, -apple-system, sans-serif;
}

/* ========== fluent 表面：亚克力面板（**只用于 glass/glass-strong，禁止滥用于 card/btn**） ========== */
[data-style='fluent'] .glass,
[data-style='fluent'] .glass-strong {
  backdrop-filter: blur(24px) saturate(1.25);
  -webkit-backdrop-filter: blur(24px) saturate(1.25);
  border-radius: 10px;
}

/* ========== fluent 卡片：亚克力基底 + Reveal 光效 + Z 轴深度 ========== */
[data-style='fluent'] .card {
  border-radius: 10px;
  border: 1px solid var(--edge);
  background: var(--surface);        /* 亚克力半透明白基底 */
  box-shadow: var(--raised);
  /* 卡片 duration-200 ease-out（Fluent 节奏，不超 200ms） */
  transition: transform 200ms ease-out, box-shadow 200ms ease-out, background 200ms ease-out, border-color 200ms ease-out !important;
}
[data-style='fluent'] .card .icon {
  border-radius: 6px;
  transition: transform 200ms ease-out !important;
}
/* Reveal 高光：hover 时背景提亮 + 边框变亮 + Z 轴上浮 */
[data-style='fluent'] .card:hover {
  transform: translateY(-4px);       /* hover:-translate-y-1 Z 轴上浮 */
  background: var(--surface-2);       /* Reveal 提亮 white/70 → white/85 等效 */
  border-color: rgba(255, 255, 255, 0.5);  /* Reveal 边框变亮 */
  box-shadow: 0 6.4px 14.4px rgba(0, 0, 0, 0.18), 0 1.2px 3.6px rgba(0, 0, 0, 0.14);  /* 阴影扩张 */
}
/* 图标 group-hover:scale-105 微交互 */
[data-style='fluent'] .card:hover .icon {
  transform: scale(1.05);
}
/* 卡片 active 按压 */
[data-style='fluent'] .card:active {
  transform: scale(0.98) translateY(0);
  box-shadow: var(--pressed-sm);
}

/* ========== fluent 按钮：duration-150 + hover 上浮 + active scale(0.97) + 贴面按压 ========== */
[data-style='fluent'] .btn {
  border-radius: 8px;                 /* rounded-md */
  border: 1px solid var(--edge);
  background: var(--surface-2);
  box-shadow: var(--raised-sm);
  /* 按钮 duration-150 ease-out（Fluent 按钮更利落） */
  transition: transform 150ms ease-out, box-shadow 150ms ease-out, background 150ms ease-out, color 150ms ease-out !important;
}
[data-style='fluent'] .btn:hover {
  transform: translateY(-2px);       /* hover:-translate-y-0.5 */
  box-shadow: 0 3.2px 7.2px rgba(0, 0, 0, 0.18), 0 0.6px 1.8px rgba(0, 0, 0, 0.12);
  background: var(--hover-bg);
}
/* Fluent 核心触觉：active:scale(0.97)（比 corporate-clean 的 0.98 幅度大）+ 贴面阴影归零 */
[data-style='fluent'] .btn:active {
  transform: scale(0.97) translateY(0);
  box-shadow: none;
}
[data-style='fluent'] .btn-primary {
  background: #0078d4;                /* 微软蓝按钮 */
  color: #ffffff;
  border: 1px solid #006cc1;
  box-shadow: 0 1.6px 3.6px rgba(0, 0, 0, 0.18), 0 0.3px 0.9px rgba(0, 0, 0, 0.12);
}
[data-style='fluent'] .btn-primary:hover {
  background: #106ebe;                /* hover 深蓝 */
  box-shadow: 0 3.2px 7.2px rgba(0, 0, 0, 0.2), 0 0.6px 1.8px rgba(0, 0, 0, 0.14);
}
[data-style='fluent'] .btn-primary:active {
  background: #005a9e;                /* active 更深蓝 */
  transform: scale(0.97) translateY(0);
  box-shadow: none;
}

/* ========== fluent 输入框：border-[#8a8886] + focus 微软蓝 ========== */
[data-style='fluent'] .input,
[data-style='fluent'] .textarea,
[data-style='fluent'] .select {
  border-radius: 8px;                 /* rounded-md */
  border: 1px solid #8a8886;          /* Fluent 输入框边框 */
  background: var(--surface-2);
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out !important;
}
[data-theme='dark'][data-style='fluent'] .input,
[data-theme='dark'][data-style='fluent'] .textarea,
[data-theme='dark'][data-style='fluent'] .select {
  border-color: #4a4a4a;
  background: #2d2d2d;
}
[data-style='fluent'] .input:focus,
[data-style='fluent'] .select:focus,
[data-style='fluent'] .textarea:focus {
  border-color: var(--accent);       /* focus:border-[#0078d4] */
  /* focus:ring-2 focus:ring-offset-2（双层 box-shadow 实现） */
  box-shadow: 0 0 0 2px var(--ring-offset), 0 0 0 4px var(--accent);
  outline: none;
}

/* ========== .ntab-btn：圆角胶囊 + 微软蓝 active ========== */
[data-style='fluent'] .ntab-btn {
  border: 1px solid var(--edge) !important;
  border-radius: 8px !important;
  background: var(--surface-2);
  color: var(--text);
  box-shadow: var(--raised-sm);
  transition: transform 150ms ease-out, box-shadow 150ms ease-out, background 150ms ease-out, color 150ms ease-out !important;
}
[data-style='fluent'] .ntab-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--raised);
  background: var(--hover-bg);
}
[data-style='fluent'] .ntab-btn.active {
  background: var(--accent) !important;
  color: #ffffff;
  border-color: var(--accent) !important;
  box-shadow: 0 1.6px 3.6px rgba(0, 0, 0, 0.18), 0 0.3px 0.9px rgba(0, 0, 0, 0.12);
}

/* ========== .admin-panel ========== */
[data-style='fluent'] .admin-panel {
  border-radius: 10px;
  border: 1px solid var(--edge);
  background: var(--surface);
  box-shadow: var(--raised-lg);
}

/* ========== 全局 focus-visible：ring-2 + ring-offset-2（焦点永不缺席） ========== */
[data-style='fluent'] :focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ring-offset), 0 0 0 4px var(--accent);
  border-radius: 8px;
}

/* ============================================================
/* ============================================================
   18) warm-dashboard 暖色仪表盘 —— 珊瑚赤陶 · 奶油白 · 青绿金黄点缀
   珊瑚 #d4a088 背景 + 奶油白 #faf8f5 卡片，青绿 #4a9d9a 主强调，
   金黄 #e8b86d 图表色，柔和漫射阴影
   ============================================================ */
:root[data-theme='light'][data-style='warm-dashboard'] {
  --bg-grad: linear-gradient(165deg, #dca98f 0%, #cf987d 50%, #c28a6e 100%);
  --surface: #faf7f2;
  --surface-2: #ffffff;
  --text: #2e2a26;
  --text-muted: #655a50;
  --accent: #287e7b;
  --accent-soft: rgba(40, 126, 123, 0.15);
  --accent-hover: #206b68;
  --danger: #b5604f;
  --success: #5a9d72;
  --edge: rgba(46, 42, 38, 0.1);
  --edge-weak: rgba(46, 42, 38, 0.06);
  --overlay: rgba(46, 42, 38, 0.3);
  --sh-dark: rgba(0, 0, 0, 0.08);
  --sh-light: rgba(255, 255, 255, 0.9);
  --accent-glow: rgba(40, 126, 123, 0.25);
  --raised-sm: 4px 4px 10px rgba(0, 0, 0, 0.08), -2px -2px 6px rgba(255, 255, 255, 0.6);
  --raised: 8px 8px 20px rgba(0, 0, 0, 0.1), -4px -4px 10px rgba(255, 255, 255, 0.5);
  --raised-lg: 12px 12px 30px rgba(0, 0, 0, 0.12), -6px -6px 16px rgba(255, 255, 255, 0.5);
  --pressed-sm: inset 2px 2px 5px rgba(0, 0, 0, 0.1), inset -1px -1px 3px rgba(255, 255, 255, 0.5);
  --inset: inset 2px 2px 5px rgba(0, 0, 0, 0.08), inset -1px -1px 3px rgba(255, 255, 255, 0.4);
  --hover-bg: rgba(40, 126, 123, 0.08);
  --scroll-thumb: rgba(0, 0, 0, 0.18);
  --tr: 200ms;
  --ease: ease-out;
}
:root[data-theme='dark'][data-style='warm-dashboard'] {
  --bg-grad: linear-gradient(165deg, #3a2f26 0%, #2b221d 50%, #201a16 100%);
  --surface: #382f27;
  --surface-2: #43392f;
  --text: #e8dccd;
  --text-muted: #ad9d8a;
  --accent: #94d6d2;
  --accent-soft: rgba(148, 214, 210, 0.2);
  --accent-hover: #aee2de;
  --danger: #d48878;
  --success: #86c79a;
  --on-accent: #0c2a29;
  --on-danger: #3a0d0a;
  --on-success: #0e2a14;
  --edge: rgba(255, 255, 255, 0.08);
  --edge-weak: rgba(255, 255, 255, 0.04);
  --overlay: rgba(0, 0, 0, 0.5);
  --sh-dark: rgba(0, 0, 0, 0.5);
  --sh-light: rgba(255, 255, 255, 0.04);
  --accent-glow: rgba(148, 214, 210, 0.25);
  --raised-sm: 4px 4px 10px rgba(0, 0, 0, 0.5), -2px -2px 6px rgba(255, 255, 255, 0.03);
  --raised: 8px 8px 20px rgba(0, 0, 0, 0.55), -4px -4px 10px rgba(255, 255, 255, 0.04);
  --raised-lg: 12px 12px 30px rgba(0, 0, 0, 0.6), -6px -6px 16px rgba(255, 255, 255, 0.04);
  --pressed-sm: inset 2px 2px 5px rgba(0, 0, 0, 0.55);
  --inset: inset 2px 2px 5px rgba(0, 0, 0, 0.45);
  --hover-bg: rgba(148, 214, 210, 0.1);
  --scroll-thumb: rgba(255, 255, 255, 0.15);
  --tr: 200ms;
  --ease: ease-out;
}
/* warm-dashboard 装饰：暖色光晕 */
[data-style='warm-dashboard'] .style-fx::before { content: none; }
[data-style='warm-dashboard'] .style-fx::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60vw 40vh at 85% 15%, rgba(232, 184, 109, 0.08), transparent 60%);
}
[data-style='warm-dashboard'] .card {
  border-radius: 16px;
  transition: all 300ms ease-out;
}
[data-style='warm-dashboard'] .card:hover {
  transform: translateY(-4px);
  box-shadow: var(--raised-lg);
}

/* ============================================================
/* ============================================================
/* ============================================================
/* ============================================================
   22) blueprint 工程蓝图 —— 蓝底白线 · 网格坐标 · 标注线
   氰版蓝图印刷工艺灵感，深蓝底 + 白色线条 + 网格背景 + 工程橙标注；
   直角、等宽字体感、虚线辅助线；动效精准干脆（100ms 级）；
   绝对禁止：暖色调 / 圆角 / 渐变 / 发光 / 衬线字体
   ============================================================ */
:root[data-theme='light'][data-style='blueprint'] {
  --bg-grad: linear-gradient(180deg, #f0f4f8 0%, #e4eaf0 100%);
  --surface: #f7f9fb;
  --surface-2: #eef1f5;
  --text: #1e3a5f;
  --text-muted: #4a6b8a;
  --accent: #1e3a5f;
  --accent-soft: rgba(30, 58, 95, 0.12);
  --accent-hover: #152a47;
  --danger: #d94f3f;
  --success: #2d7a5a;
  --annotation: #ff6b35;
  --edge: rgba(30, 58, 95, 0.35);
  --edge-weak: rgba(30, 58, 95, 0.18);
  --overlay: rgba(30, 58, 95, 0.5);
  --sh-dark: rgba(30, 58, 95, 0.15);
  --sh-light: rgba(255, 255, 255, 0.7);
  --accent-glow: transparent;
  --raised-sm: 0 1px 4px rgba(30, 58, 95, 0.12);
  --raised: 0 2px 10px rgba(30, 58, 95, 0.18);
  --raised-lg: 0 4px 18px rgba(30, 58, 95, 0.22);
  --pressed-sm: inset 0 1px 2px rgba(30, 58, 95, 0.15);
  --inset: inset 0 1px 2px rgba(30, 58, 95, 0.12);
  --hover-bg: rgba(30, 58, 95, 0.08);
  --scroll-thumb: rgba(30, 58, 95, 0.35);
  --tr: 100ms;
  --ease: linear;
}
:root[data-theme='dark'][data-style='blueprint'] {
  --bg-grad: linear-gradient(180deg, #1e3a5f 0%, #162c4a 100%);
  --surface: rgba(255, 255, 255, 0.06);
  --surface-2: rgba(255, 255, 255, 0.1);
  --text: #ffffff;
  --text-muted: #a0c4e8;
  --accent: #ffffff;
  --accent-soft: rgba(255, 255, 255, 0.15);
  --accent-hover: #d0e4f5;
  --danger: #ff8a7a;
  --success: #7fcfaf;
  --annotation: #ff6b35;
  --edge: rgba(255, 255, 255, 0.3);
  --edge-weak: rgba(255, 255, 255, 0.15);
  --overlay: rgba(0, 0, 0, 0.55);
  --sh-dark: rgba(0, 0, 0, 0.4);
  --sh-light: rgba(255, 255, 255, 0.04);
  --accent-glow: transparent;
  --raised-sm: 0 1px 4px rgba(0, 0, 0, 0.4);
  --raised: 0 2px 10px rgba(0, 0, 0, 0.45);
  --raised-lg: 0 4px 18px rgba(0, 0, 0, 0.5);
  --pressed-sm: inset 0 1px 2px rgba(0, 0, 0, 0.5);
  --inset: inset 0 1px 2px rgba(0, 0, 0, 0.4);
  --hover-bg: rgba(255, 255, 255, 0.1);
  --scroll-thumb: rgba(255, 255, 255, 0.3);
  --tr: 100ms;
  --ease: linear;
}

/* blueprint 装饰：深蓝网格背景 + 虚线辅助线 */
[data-style='blueprint'] .style-fx::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(30, 58, 95, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 58, 95, 0.06) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}
[data-style='blueprint'] .style-fx::after { content: none; }
:root[data-theme='dark'][data-style='blueprint'] .style-fx::before {
  background:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* blueprint 卡片：直角、细描边、半透明玻璃面 */
[data-style='blueprint'] .card {
  border-radius: 0;
  border: 1px solid var(--edge);
  background: var(--surface);
  box-shadow: none;
  transition: border-color 100ms linear, background 100ms linear;
}
[data-style='blueprint'] .card:hover {
  border-color: var(--accent);
  box-shadow: var(--raised);
}
[data-style='blueprint'] .card .icon {
  border-radius: 0;
  border: 1px solid var(--edge-weak);
  box-shadow: none;
}
[data-style='blueprint'] .card .icon.has-img { box-shadow: none; }

/* blueprint 按钮：直角、虚线可选、无圆角 */
[data-style='blueprint'] .btn {
  border-radius: 0;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--text);
  font-family: ui-monospace, 'SF Mono', Consolas, Menlo, monospace;
  letter-spacing: 0.05em;
  transition: background 100ms linear, border-color 100ms linear, color 100ms linear;
}
[data-style='blueprint'] .btn:hover {
  background: var(--accent);
  color: #ffffff;
  box-shadow: none;
}
[data-style='blueprint'] .btn:active {
  transform: none;
  background: var(--annotation);
  color: #fff;
}
[data-style='blueprint'] .btn-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}
:root[data-theme='dark'][data-style='blueprint'] .btn:hover {
  background: var(--accent);
  color: #1e3a5f;
}
:root[data-theme='dark'][data-style='blueprint'] .btn-primary {
  background: var(--accent);
  color: #1e3a5f;
}

/* blueprint 输入框：直角、细描边、等宽字体感 */
[data-style='blueprint'] .input,
[data-style='blueprint'] .select,
[data-style='blueprint'] .textarea {
  border-radius: 0;
  border: 1px solid var(--edge);
  background: transparent;
  color: var(--text);
  font-family: ui-monospace, 'SF Mono', Consolas, Menlo, monospace;
  box-shadow: none;
}
[data-style='blueprint'] .input:focus,
[data-style='blueprint'] .select:focus,
[data-style='blueprint'] .textarea:focus {
  border-color: var(--annotation);
  box-shadow: none;
}
:root[data-theme='dark'][data-style='blueprint'] .select,
:root[data-theme='dark'][data-style='blueprint'] .select option {
  background: #142840;
  color: #ffffff;
}

/* blueprint 顶栏 / 分组头 */
[data-style='blueprint'] .topbar,
[data-style='blueprint'] .group-header {
  border-bottom: 1px dashed var(--edge);
}

/* blueprint 等宽字体装饰：标题 */
[data-style='blueprint'] h1,
[data-style='blueprint'] h2,
[data-style='blueprint'] h3,
[data-style='blueprint'] .section-title,
[data-style='blueprint'] .group-title {
  font-family: ui-monospace, 'SF Mono', Consolas, Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* blueprint 虚线装饰：分割线 */
[data-style='blueprint'] .divider,
[data-style='blueprint'] hr {
  border: none;
  border-top: 1px dashed var(--edge-weak);
  background: none;
}

/* blueprint 高亮标注色 */
[data-style='blueprint'] .annotation,
[data-style='blueprint'] .accent-tag,
[data-style='blueprint'] .badge-accent {
  color: var(--annotation);
}
[data-style='blueprint'] .badge {
  border-radius: 0;
  border: 1px solid var(--edge);
  font-family: ui-monospace, 'SF Mono', Consolas, Menlo, monospace;
}

/* blueprint 角落标记装饰（伪元素） */
[data-style='blueprint'] .card::before,
[data-style='blueprint'] .card::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: var(--annotation);
  border-style: solid;
  pointer-events: none;
  opacity: 0.4;
}
[data-style='blueprint'] .card::before {
  top: 3px;
  left: 3px;
  border-width: 1px 0 0 1px;
}
[data-style='blueprint'] .card::after {
  bottom: 3px;
  right: 3px;
  border-width: 0 1px 1px 0;
}
[data-style='blueprint'] .card { position: relative; }

/* blueprint 表格：直角 + 细描边 + 虚线行分隔 */
[data-style='blueprint'] table {
  border-collapse: collapse;
}
[data-style='blueprint'] table th,
[data-style='blueprint'] table td {
  border: 1px solid var(--edge-weak);
  font-family: ui-monospace, 'SF Mono', Consolas, Menlo, monospace;
}
[data-style='blueprint'] table th {
  border-bottom: 1px solid var(--accent);
}

/* blueprint admin 面板 */
[data-style='blueprint'] .admin-panel {
  border-radius: 0;
  border: 1px solid var(--edge);
  background: var(--surface);
}
[data-style='blueprint'] .admin-panel .btn {
  border-radius: 0;
}

/* blueprint 禁止圆角覆盖 */
[data-style='blueprint'] * {
  border-radius: 0 !important;
}
[data-style='blueprint'] .avatar,
[data-style='blueprint'] .avatar img,
[data-style='blueprint'] .profile-avatar {
  border-radius: 0 !important;
  border: 1px solid var(--edge);
}

/* blueprint 选中态（工程橙点亮） */
[data-style='blueprint'] .selected,
[data-style='blueprint'] .active-tab,
[data-style='blueprint'] .nav-item.active {
  border-left: 2px solid var(--annotation);
  padding-left: 10px;
}

/* ============================================================
   可访问性：偏好减少动效时停用所有装饰动画
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .style-fx::before,
  .style-fx::after {
    animation: none !important;
  }
}

/* ============================================================
   23) sketch-style 铅笔手绘风 —— 纸张素描 · 虚线描边 · 交叉阴影 · 轻微倾斜
   模拟铅笔手绘效果：纸张米色底、虚线描边代替实线、硬边交叉线阴影、
   元素微微倾斜（rotate -0.5deg）增加手绘不稳定感。交互短促直接
   （120ms），hover 模拟铅笔涂黑（透明底→铅笔灰反白）。
   绝对禁止：完美圆角 / 纯白背景 / 渐变 / 玻璃模糊 / 饱和色 / 长时间平滑动画
   ============================================================ */
:root[data-theme='light'][data-style='sketch-style'] {
  --bg-grad: #f5f0e8;
  --surface: #faf5ed;
  --surface-2: #efe8da;
  --text: #2c2c2c;
  --text-muted: #5a5a5a;
  --accent: #2c2c2c;
  --accent-soft: rgba(44, 44, 44, 0.1);
  --accent-hover: #1a1a1a;
  --on-accent: #f5f0e8;
  --danger: #c0392b;
  --success: #27ae60;
  --on-danger: #f5f0e8;
  --on-success: #f5f0e8;
  --edge: #2c2c2c;
  --edge-weak: rgba(44, 44, 44, 0.2);
  --overlay: rgba(44, 44, 44, 0.35);
  --sh-dark: rgba(44, 44, 44, 0.3);
  --sh-light: rgba(255, 255, 255, 0.85);
  --accent-glow: transparent;
  --raised-sm: 1px 1px 0px rgba(44, 44, 44, 0.3), 3px 3px 0px rgba(44, 44, 44, 0.18);
  --raised: 2px 2px 0px rgba(44, 44, 44, 0.3), 5px 5px 0px rgba(44, 44, 44, 0.2);
  --raised-lg: 3px 3px 0px rgba(44, 44, 44, 0.3), 7px 7px 0px rgba(44, 44, 44, 0.22);
  --pressed-sm: inset 1px 1px 0px rgba(44, 44, 44, 0.25), inset -1px -1px 0px rgba(255, 255, 255, 0.6);
  --inset: inset 2px 2px 0px rgba(44, 44, 44, 0.2), inset -2px -2px 0px rgba(255, 255, 255, 0.5);
  --hover-bg: rgba(44, 44, 44, 0.08);
  --scroll-thumb: #a8a098;
  --tr: 120ms;
  --ease: steps(3);
}
:root[data-theme='dark'][data-style='sketch-style'] {
  --bg-grad: #2a2824;
  --surface: #353330;
  --surface-2: #3d3b38;
  --text: #e8e2d5;
  --text-muted: #b0a898;
  --accent: #e8e2d5;
  --accent-soft: rgba(232, 226, 213, 0.1);
  --accent-hover: #f0eadf;
  --on-accent: #2a2824;
  --danger: #e74c3c;
  --success: #2ecc71;
  --on-danger: #2a2824;
  --on-success: #2a2824;
  --edge: rgba(232, 226, 213, 0.5);
  --edge-weak: rgba(232, 226, 213, 0.2);
  --overlay: rgba(0, 0, 0, 0.5);
  --sh-dark: rgba(0, 0, 0, 0.5);
  --sh-light: rgba(255, 255, 255, 0.04);
  --accent-glow: transparent;
  --raised-sm: 1px 1px 0px rgba(0, 0, 0, 0.5), 3px 3px 0px rgba(0, 0, 0, 0.3);
  --raised: 2px 2px 0px rgba(0, 0, 0, 0.5), 5px 5px 0px rgba(0, 0, 0, 0.35);
  --raised-lg: 3px 3px 0px rgba(0, 0, 0, 0.5), 7px 7px 0px rgba(0, 0, 0, 0.4);
  --pressed-sm: inset 1px 1px 0px rgba(0, 0, 0, 0.4), inset -1px -1px 0px rgba(255, 255, 255, 0.06);
  --inset: inset 2px 2px 0px rgba(0, 0, 0, 0.4), inset -2px -2px 0px rgba(255, 255, 255, 0.05);
  --hover-bg: rgba(232, 226, 213, 0.08);
  --scroll-thumb: #555250;
  --tr: 120ms;
  --ease: steps(3);
}

/* sketch-style 附加规则：纸张纹理 · 铅笔勾线 · 手写体 · 颗粒感 · 手绘抖动 */
/* —— .style-fx 多层交叉阴影 + 噪点颗粒感 —— */
[data-style='sketch-style'] .style-fx {
  background-image:
    /* 细交叉阴影 */
    repeating-linear-gradient(0deg, rgba(44,44,44,0.04) 0px, rgba(44,44,44,0.04) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(90deg, rgba(44,44,44,0.04) 0px, rgba(44,44,44,0.04) 1px, transparent 1px, transparent 4px),
    /* 斜向铅笔涂抹感 */
    repeating-linear-gradient(45deg, rgba(44,44,44,0.025) 0px, rgba(44,44,44,0.025) 2px, transparent 2px, transparent 6px),
    repeating-linear-gradient(-45deg, rgba(44,44,44,0.025) 0px, rgba(44,44,44,0.025) 2px, transparent 2px, transparent 6px);
  opacity: 0.7;
}
[data-theme='dark'][data-style='sketch-style'] .style-fx {
  background-image:
    repeating-linear-gradient(0deg, rgba(232,226,213,0.05) 0px, rgba(232,226,213,0.05) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(90deg, rgba(232,226,213,0.05) 0px, rgba(232,226,213,0.05) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(45deg, rgba(232,226,213,0.03) 0px, rgba(232,226,213,0.03) 2px, transparent 2px, transparent 6px),
    repeating-linear-gradient(-45deg, rgba(232,226,213,0.03) 0px, rgba(232,226,213,0.03) 2px, transparent 2px, transparent 6px);
}

/* —— .card：虚线铅笔勾线 + 轻微抖动旋转 + 铅笔涂抹阴影 —— */
[data-style='sketch-style'] .card {
  border: 2px dashed var(--edge);
  border-radius: 2px;
  box-shadow: var(--raised);
  background: var(--surface);
  position: relative;
  transition: transform var(--tr) var(--ease), box-shadow var(--tr) var(--ease), background var(--tr) var(--ease) !important;
}
/* 每张卡片不同的微小旋转角度（模拟手绘不精准） */
[data-style='sketch-style'] .card:nth-child(5n+1) { transform: rotate(-0.8deg); }
[data-style='sketch-style'] .card:nth-child(5n+2) { transform: rotate(0.5deg); }
[data-style='sketch-style'] .card:nth-child(5n+3) { transform: rotate(-0.3deg); }
[data-style='sketch-style'] .card:nth-child(5n+4) { transform: rotate(0.9deg); }
[data-style='sketch-style'] .card:nth-child(5n)   { transform: rotate(-0.5deg); }

/* —— 铅笔双层勾线：.card::before 模拟第二层轻微偏移的虚线 —— */
[data-style='sketch-style'] .card::before {
  content: '';
  position: absolute;
  inset: 1px;
  border: 1px dashed rgba(44, 44, 44, 0.35);
  border-radius: 1px;
  pointer-events: none;
  z-index: 1;
}
[data-theme='dark'][data-style='sketch-style'] .card::before {
  border-color: rgba(232, 226, 213, 0.35);
}

/* —— .card .icon 加铅笔交叉线底纹 —— */
[data-style='sketch-style'] .card .icon {
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.15) 0px, rgba(255,255,255,0.15) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 1px, transparent 1px, transparent 4px);
}
[data-theme='dark'][data-style='sketch-style'] .card .icon {
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.12) 0px, rgba(255,255,255,0.12) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.1) 0px, rgba(0,0,0,0.1) 1px, transparent 1px, transparent 4px);
}

/* —— 手写体标题 —— */
[data-style='sketch-style'] .card .info .t {
  font-family: 'Comic Sans MS', 'Segoe Print', 'Bradley Hand', cursive;
  font-weight: 700;
  letter-spacing: 0.3px;
}
[data-style='sketch-style'] .card .info .d {
  font-family: 'Comic Sans MS', 'Segoe Print', cursive;
  font-size: 11.5px;
}

/* —— hover：铅笔加深（反白）+ 阴影涂抹开 —— */
[data-style='sketch-style'] .card:hover {
  box-shadow: var(--raised-lg);
  background: var(--hover-bg);
  filter: brightness(1.02);
  /* 保持 nth-child 的旋转角度 */
}
[data-style='sketch-style'] .card:nth-child(5n+1):hover { transform: rotate(-0.6deg) translateY(-1px); }
[data-style='sketch-style'] .card:nth-child(5n+2):hover { transform: rotate(0.3deg) translateY(-1px); }
[data-style='sketch-style'] .card:nth-child(5n+3):hover { transform: rotate(-0.1deg) translateY(-1px); }
[data-style='sketch-style'] .card:nth-child(5n+4):hover { transform: rotate(0.7deg) translateY(-1px); }
[data-style='sketch-style'] .card:nth-child(5n):hover   { transform: rotate(-0.3deg) translateY(-1px); }

[data-style='sketch-style'] .glass,
[data-style='sketch-style'] .glass-strong {
  border: 2px dashed var(--edge);
  border-radius: 2px;
  box-shadow: var(--raised-sm);
  background: var(--surface-2);
  backdrop-filter: none;
}

/* —— .btn：铅笔勾线按钮 + 手写体 —— */
[data-style='sketch-style'] .btn {
  border: 2px dashed var(--edge);
  border-radius: 2px;
  box-shadow: var(--raised-sm);
  transform: none !important;
  font-family: 'Comic Sans MS', 'Segoe Print', cursive;
  font-weight: 700;
  position: relative;
  transition: background var(--tr) var(--ease), color var(--tr) var(--ease), box-shadow var(--tr) var(--ease) !important;
}
/* 按钮也有铅笔双层描边 */
[data-style='sketch-style'] .btn::before {
  content: '';
  position: absolute;
  inset: 1px;
  border: 1px dashed rgba(44, 44, 44, 0.3);
  border-radius: 1px;
  pointer-events: none;
}
[data-style='sketch-style'] .btn:hover {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--raised);
}
[data-style='sketch-style'] .btn:active {
  box-shadow: var(--pressed-sm);
}
[data-style='sketch-style'] .btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border: 2px solid var(--edge);
}
[data-style='sketch-style'] .btn-primary:hover {
  background: var(--accent-hover);
}

[data-style='sketch-style'] .input,
[data-style='sketch-style'] .select,
[data-style='sketch-style'] .textarea {
  border: 2px dashed var(--edge);
  border-radius: 2px;
  background: var(--surface);
  font-family: 'Comic Sans MS', 'Segoe Print', cursive;
}
[data-style='sketch-style'] .input:focus,
[data-style='sketch-style'] .select:focus,
[data-style='sketch-style'] .textarea:focus {
  box-shadow: var(--raised-sm);
  outline: none;
}

/* —— .ntab-btn：铅笔勾线 + 手写体 —— */
[data-style='sketch-style'] .ntab-btn {
  border: 2px dashed var(--edge) !important;
  border-radius: 2px !important;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--raised-sm);
  font-family: 'Comic Sans MS', 'Segoe Print', cursive;
  font-weight: 700;
  position: relative;
}
[data-style='sketch-style'] .ntab-btn:hover {
  background: var(--hover-bg);
  box-shadow: var(--raised);
}
[data-style='sketch-style'] .ntab-btn.active {
  background: var(--accent) !important;
  color: var(--on-accent);
  border-style: solid !important;
  box-shadow: var(--raised);
}

[data-style='sketch-style'] .admin-panel {
  border: 2px dashed var(--edge);
  border-radius: 2px;
  box-shadow: var(--raised);
}

/* ============================================================
   24) watercolor-style 水彩画风 —— 纸张底色 · 柔和渐变 · 大圆角 · 液态流动
   模拟水彩画效果：半透明色层叠加、柔和边缘、湿纸渐变渗透。
   交互：hover 颜料晕开（阴影大幅扩散）、duration-400 ease-in-out 液态缓动、
   active scale(0.98) 模拟湿润纸面上的按压。
   绝对禁止：硬边框 / 纯黑底 / 直角 / 饱和刺眼颜色
   ============================================================ */
:root[data-theme='light'][data-style='watercolor-style'] {
  --bg-grad: #faf8f5;
  --surface: rgba(255, 255, 255, 0.75);
  --surface-2: #f0ebe3;
  --text: #3a3a3a;
  --text-muted: #6b6b6b;
  --accent: #4a6fa5;
  --accent-soft: rgba(74, 111, 165, 0.15);
  --accent-hover: #3d5e8f;
  --on-accent: #ffffff;
  --danger: #c0392b;
  --success: #27ae60;
  --on-danger: #ffffff;
  --on-success: #ffffff;
  --edge: rgba(74, 111, 165, 0.2);
  --edge-weak: rgba(74, 111, 165, 0.1);
  --overlay: rgba(74, 111, 165, 0.3);
  --sh-dark: rgba(74, 111, 165, 0.15);
  --sh-light: rgba(255, 255, 255, 0.9);
  --accent-glow: rgba(74, 111, 165, 0.25);
  --raised-sm: 0 2px 10px rgba(74, 111, 165, 0.1);
  --raised: 0 4px 20px rgba(74, 111, 165, 0.12);
  --raised-lg: 0 8px 30px rgba(74, 111, 165, 0.15);
  --pressed-sm: 0 1px 5px rgba(74, 111, 165, 0.1), inset 0 2px 4px rgba(74, 111, 165, 0.08);
  --inset: inset 0 2px 6px rgba(74, 111, 165, 0.1);
  --hover-bg: rgba(74, 111, 165, 0.08);
  --scroll-thumb: rgba(74, 111, 165, 0.4);
  --tr: 400ms;
  --ease: ease-in-out;
}
:root[data-theme='dark'][data-style='watercolor-style'] {
  --bg-grad: #1e2a38;
  --surface: rgba(30, 42, 56, 0.8);
  --surface-2: #253548;
  --text: #e8eef5;
  --text-muted: #9ab0c8;
  --accent: #8ab4e8;
  --accent-soft: rgba(138, 180, 232, 0.15);
  --accent-hover: #a5c6f0;
  --on-accent: #1e2a38;
  --danger: #e74c3c;
  --success: #2ecc71;
  --on-danger: #1e2a38;
  --on-success: #1e2a38;
  --edge: rgba(138, 180, 232, 0.2);
  --edge-weak: rgba(138, 180, 232, 0.1);
  --overlay: rgba(0, 0, 0, 0.45);
  --sh-dark: rgba(0, 0, 0, 0.35);
  --sh-light: rgba(138, 180, 232, 0.04);
  --accent-glow: rgba(138, 180, 232, 0.2);
  --raised-sm: 0 2px 10px rgba(0, 0, 0, 0.25);
  --raised: 0 4px 20px rgba(0, 0, 0, 0.3);
  --raised-lg: 0 8px 30px rgba(0, 0, 0, 0.35);
  --pressed-sm: 0 1px 5px rgba(0, 0, 0, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.2);
  --inset: inset 0 2px 6px rgba(0, 0, 0, 0.2);
  --hover-bg: rgba(138, 180, 232, 0.1);
  --scroll-thumb: rgba(138, 180, 232, 0.35);
  --tr: 400ms;
  --ease: ease-in-out;
}

/* watercolor-style 附加规则：颜料晕染 · 纸张纹理 · 液态流动 · 多层色层叠加 */
/* —— .style-fx：多色水彩晕染斑点 + 纸张纤维纹理 —— */
[data-style='watercolor-style'] .style-fx::before {
  content: '';
  position: absolute;
  width: 640px; height: 640px;
  top: -100px; left: -80px;
  background:
    radial-gradient(circle at 30% 40%, rgba(232, 168, 124, 0.28) 0%, transparent 60%),
    radial-gradient(circle at 70% 60%, rgba(133, 205, 202, 0.22) 0%, transparent 55%),
    radial-gradient(circle at 50% 80%, rgba(74, 111, 165, 0.12) 0%, transparent 50%);
  filter: blur(50px);
  animation: wcBloom 14s ease-in-out infinite alternate;
}
[data-style='watercolor-style'] .style-fx::after {
  content: '';
  position: absolute;
  width: 560px; height: 560px;
  bottom: -80px; right: -60px;
  background:
    radial-gradient(circle at 40% 30%, rgba(155, 187, 220, 0.28) 0%, transparent 60%),
    radial-gradient(circle at 60% 70%, rgba(200, 220, 210, 0.22) 0%, transparent 55%),
    radial-gradient(circle at 30% 50%, rgba(180, 140, 120, 0.14) 0%, transparent 50%);
  filter: blur(50px);
  animation: wcBloom 16s ease-in-out infinite alternate-reverse;
}
/* 纸张纤维纹理层 */
[data-style='watercolor-style'] .style-fx {
  background-image:
    repeating-linear-gradient(0deg, rgba(74, 111, 165, 0.012) 0px, rgba(74, 111, 165, 0.012) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg, rgba(74, 111, 165, 0.012) 0px, rgba(74, 111, 165, 0.012) 1px, transparent 1px, transparent 3px);
}
@-webkit-keyframes wcBloom {
  0%   { -webkit-transform: scale(1) translate(0, 0); opacity: 0.6; }
  50%  { -webkit-transform: scale(1.1) translate(15px, -10px); opacity: 0.9; }
  100% { -webkit-transform: scale(1.2) translate(-10px, 15px); opacity: 1; }
}
@keyframes wcBloom {
  0%   { transform: scale(1) translate(0, 0); opacity: 0.6; }
  50%  { transform: scale(1.1) translate(15px, -10px); opacity: 0.9; }
  100% { transform: scale(1.2) translate(-10px, 15px); opacity: 1; }
}

/* —— .card：多层半透明色层叠加 + 边缘颜料晕染 —— */
[data-style='watercolor-style'] .card {
  border: none;
  border-radius: 24px;
  box-shadow: var(--raised);
  background: var(--surface);
  position: relative;
  overflow: visible;
  transition: transform var(--tr) var(--ease), box-shadow var(--tr) var(--ease), background var(--tr) var(--ease) !important;
}
/* 水彩边缘晕染：.card::before 做四周模糊渐变 —— */
[data-style='watercolor-style'] .card::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 26px;
  background: var(--surface);
  z-index: -1;
  filter: blur(8px);
  opacity: 0.5;
}
/* .card::after：额外边框细线（柔和渐变边框效果） */
[data-style='watercolor-style'] .card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  border: 1px solid rgba(74, 111, 165, 0.15);
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 20% 15%, rgba(74, 111, 165, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 80% 85%, rgba(133, 205, 202, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(232, 168, 124, 0.04) 0%, transparent 55%);
  pointer-events: none;
}

/* —— .card .icon：水彩晕染底纹（渐变叠加） —— */
[data-style='watercolor-style'] .card .icon {
  background: var(--accent);
  position: relative;
  overflow: hidden;
}
[data-style='watercolor-style'] .card .icon::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 30% 30%, rgba(255,255,255,0.35) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 70% 70%, rgba(0,0,0,0.12) 0%, transparent 60%);
  pointer-events: none;
}

/* —— .card 标题用更柔和的字体 —— */
[data-style='watercolor-style'] .card .info .t {
  font-family: 'Georgia', 'Noto Serif SC', serif;
  font-weight: 500;
  letter-spacing: 0.4px;
}
[data-style='watercolor-style'] .card .info .d {
  font-family: inherit;
}

/* —— hover：scale + 更大阴影（水彩晕染开） —— */
[data-style='watercolor-style'] .card:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 48px rgba(74, 111, 165, 0.28);
  filter: brightness(1.03);
}
[data-style='watercolor-style'] .card:active {
  transform: scale(0.98);
  box-shadow: var(--pressed-sm);
}

[data-style='watercolor-style'] .glass,
[data-style='watercolor-style'] .glass-strong {
  border: 1px solid var(--edge);
  border-radius: 24px;
  background: var(--surface);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--raised);
}

/* —— .btn：柔和水彩按钮 —— */
[data-style='watercolor-style'] .btn {
  border: 1px solid var(--edge);
  border-radius: 16px;
  box-shadow: var(--raised-sm);
  background: var(--surface);
  transition: transform var(--tr) var(--ease), box-shadow var(--tr) var(--ease), background var(--tr) var(--ease) !important;
  font-weight: 500;
  font-family: 'Georgia', 'Noto Serif SC', serif;
}
[data-style='watercolor-style'] .btn:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 28px rgba(74, 111, 165, 0.22);
  background: rgba(255, 255, 255, 0.5);
}
[data-style='watercolor-style'] .btn:active {
  transform: scale(0.98);
  box-shadow: var(--pressed-sm);
}
[data-style='watercolor-style'] .btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
}
[data-style='watercolor-style'] .btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 8px 28px rgba(74, 111, 165, 0.32);
}

[data-style='watercolor-style'] .input,
[data-style='watercolor-style'] .select,
[data-style='watercolor-style'] .textarea {
  border: 1px solid var(--edge);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.6);
  font-family: 'Georgia', serif;
}
[data-theme='dark'][data-style='watercolor-style'] .input,
[data-theme='dark'][data-style='watercolor-style'] .select,
[data-theme='dark'][data-style='watercolor-style'] .textarea {
  background: rgba(255, 255, 255, 0.05);
}
[data-style='watercolor-style'] .input:focus,
[data-style='watercolor-style'] .select:focus,
[data-style='watercolor-style'] .textarea:focus {
  box-shadow: 0 4px 24px rgba(74, 111, 165, 0.22);
  outline: none;
  border-color: var(--accent);
}

/* —— .ntab-btn：水彩标签按钮 —— */
[data-style='watercolor-style'] .ntab-btn {
  border: 1px solid var(--edge) !important;
  border-radius: 999px !important;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--raised-sm);
  font-weight: 500;
  font-family: 'Georgia', serif;
  transition: transform var(--tr) var(--ease), box-shadow var(--tr) var(--ease), background var(--tr) var(--ease), color var(--tr) var(--ease) !important;
}
[data-style='watercolor-style'] .ntab-btn:hover {
  background: var(--hover-bg);
  transform: scale(1.02);
  box-shadow: 0 8px 28px rgba(74, 111, 165, 0.22);
}
[data-style='watercolor-style'] .ntab-btn.active {
  background: var(--accent) !important;
  color: var(--on-accent);
  border-color: transparent !important;
  box-shadow: 0 8px 28px rgba(74, 111, 165, 0.32);
}

[data-style='watercolor-style'] .admin-panel {
  border-radius: 24px;
  border: 1px solid var(--edge);
  background: var(--surface);
  box-shadow: var(--raised);
}
/* ============================================================
/* ============================================================
   26) collage-art 拼贴艺术风 —— 纸片剪切 · 硬偏移阴影 · 和纸胶带 · 混搭字体
   达达/波普混合媒材美学：陈旧纸张底 + 深炭灰硬偏移阴影（Npx Npx 0px）+
   无圆角 + 混色强调（红/蓝/黄/紫）+ 200ms ease-out 干脆缓动。
   hover 纸片掀起 scale(1.02)+旋转微调+阴影扩张；active 桌面按压阴影骤减。
   绝对禁止：渐变 / 毛玻璃 / 软圆角 / 柔和偏移阴影。
   ============================================================ */
:root[data-theme='light'][data-style='collage-art'] {
  --bg-grad: #f5f0e8;
  --surface: #faf5ed;
  --surface-2: #ebe4d8;
  --text: #2d2d2d;
  --text-muted: #5a5a5a;
  --accent: #e74c3c;
  --accent-soft: rgba(231, 76, 60, 0.15);
  --accent-hover: #c0392b;
  --on-accent: #ffffff;
  --danger: #e74c3c;
  --success: #27ae60;
  --on-danger: #ffffff;
  --on-success: #ffffff;
  --edge: #2d2d2d;
  --edge-weak: rgba(45, 45, 45, 0.2);
  --overlay: rgba(45, 45, 45, 0.4);
  --sh-dark: #2d2d2d;
  --sh-light: rgba(255, 255, 255, 0.9);
  --accent-glow: transparent;
  --raised-sm: 3px 3px 0px #2d2d2d;
  --raised: 5px 5px 0px #2d2d2d;
  --raised-lg: 7px 7px 0px #2d2d2d;
  --pressed-sm: 1px 1px 0px #2d2d2d;
  --inset: inset 1px 1px 0px rgba(45, 45, 45, 0.2);
  --hover-bg: #ebe4d8;
  --scroll-thumb: #2d2d2d;
  --tr: 200ms;
  --ease: ease-out;
}
:root[data-theme='dark'][data-style='collage-art'] {
  --bg-grad: #2a2824;
  --surface: #353330;
  --surface-2: #3d3b38;
  --text: #f5f0e8;
  --text-muted: #b0a898;
  --accent: #f39c12;
  --accent-soft: rgba(243, 156, 18, 0.15);
  --accent-hover: #e67e22;
  --on-accent: #2a2824;
  --danger: #e74c3c;
  --success: #2ecc71;
  --on-danger: #2a2824;
  --on-success: #2a2824;
  --edge: #f5f0e8;
  --edge-weak: rgba(245, 240, 232, 0.25);
  --overlay: rgba(0, 0, 0, 0.5);
  --sh-dark: #000000;
  --sh-light: rgba(245, 240, 232, 0.1);
  --accent-glow: transparent;
  --raised-sm: 3px 3px 0px #000000;
  --raised: 5px 5px 0px #000000;
  --raised-lg: 7px 7px 0px #000000;
  --pressed-sm: 1px 1px 0px #000000;
  --inset: inset 1px 1px 0px rgba(0, 0, 0, 0.4);
  --hover-bg: #3d3b38;
  --scroll-thumb: #555250;
  --tr: 200ms;
  --ease: ease-out;
}

/* collage-art 附加规则：纸片剪切 · 和纸胶带 · 硬偏移阴影 · 混排字体 · 撕纸边缘 */
/* —— .style-fx 加强交叉阴影（opacity 0.04→0.12 明显可见） —— */
[data-style='collage-art'] .style-fx {
  background-image:
    repeating-linear-gradient(45deg, rgba(231, 76, 60, 0.12) 0px, rgba(231, 76, 60, 0.12) 2px, transparent 2px, transparent 10px),
    repeating-linear-gradient(-45deg, rgba(52, 152, 219, 0.12) 0px, rgba(52, 152, 219, 0.12) 2px, transparent 2px, transparent 10px),
    repeating-linear-gradient(0deg, rgba(155, 89, 182, 0.06) 0px, rgba(155, 89, 182, 0.06) 1px, transparent 1px, transparent 16px),
    repeating-linear-gradient(90deg, rgba(243, 156, 18, 0.06) 0px, rgba(243, 156, 18, 0.06) 1px, transparent 1px, transparent 16px);
  opacity: 0.85;
}

/* —— .card 核心：纸片 + 硬偏移阴影 + 轻微随机旋转 —— */
[data-style='collage-art'] .card {
  border: 2px solid var(--edge);
  border-radius: 2px;
  box-shadow: var(--raised);
  background: var(--surface);
  transition: transform var(--tr) var(--ease), box-shadow var(--tr) var(--ease), background var(--tr) var(--ease) !important;
  position: relative;
  /* 注意：不使用 clip-path，否则会剪裁掉和纸胶带伪元素 */
}
/* 轻微随机旋转：用 nth-child 做 4 种角度 */
[data-style='collage-art'] .card:nth-child(4n+1) { transform: rotate(-1deg); }
[data-style='collage-art'] .card:nth-child(4n+2) { transform: rotate(0.8deg); }
[data-style='collage-art'] .card:nth-child(4n+3) { transform: rotate(-0.5deg); }
[data-style='collage-art'] .card:nth-child(4n)   { transform: rotate(1.2deg); }

/* —— 和纸胶带：.card::before 半透明条纹条，右上角对角 —— */
[data-style='collage-art'] .card::before {
  content: '';
  position: absolute;
  top: -8px; right: 16px;
  width: 60px; height: 16px;
  transform: rotate(8deg);
  background: repeating-linear-gradient(
    90deg,
    rgba(231, 76, 60, 0.35) 0px, rgba(231, 76, 60, 0.35) 3px,
    rgba(255, 255, 255, 0.25) 3px, rgba(255, 255, 255, 0.25) 6px,
    rgba(52, 152, 219, 0.35) 6px, rgba(52, 152, 219, 0.35) 9px,
    rgba(255, 255, 255, 0.25) 9px, rgba(255, 255, 255, 0.25) 12px
  );
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  z-index: 3;
  pointer-events: none;
  opacity: 0.85;
}
/* 第二条胶带：左下角不同颜色 */
[data-style='collage-art'] .card::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 24px;
  width: 48px; height: 14px;
  transform: rotate(-5deg);
  background: repeating-linear-gradient(
    90deg,
    rgba(243, 156, 18, 0.4) 0px, rgba(243, 156, 18, 0.4) 4px,
    rgba(255, 255, 255, 0.3) 4px, rgba(255, 255, 255, 0.3) 7px,
    rgba(155, 89, 182, 0.4) 7px, rgba(155, 89, 182, 0.4) 10px
  );
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  z-index: 3;
  pointer-events: none;
  opacity: 0.9;
}

/* —— 纸片掀起 hover：scale + 更大阴影 + 旋转微调 —— */
[data-style='collage-art'] .card:hover {
  transform: translateY(-4px) rotate(-0.5deg) scale(1.02) !important;
  box-shadow: 10px 10px 0px var(--sh-dark);
  z-index: 5;
}
/* —— 桌面按压 active：阴影骤减 + 下移 —— */
[data-style='collage-art'] .card:active {
  transform: translateY(2px) rotate(0.3deg) !important;
  box-shadow: 1px 1px 0px var(--sh-dark);
}

/* —— 混排字体：标题 serif，标签 monospace —— */
[data-style='collage-art'] .card .info .t {
  font-family: 'Georgia', 'Noto Serif SC', serif;
  font-weight: 700;
}
[data-style='collage-art'] .card .lan-badge {
  font-family: 'Courier New', Courier, monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 2px solid var(--edge);
  border-radius: 0;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 2px 2px 0px var(--sh-dark);
  top: -10px;
  right: 8px;
}
/* 描述行虚线剪切线效果 */
[data-style='collage-art'] .card .info .d {
  font-family: 'Arial', sans-serif;
  border-top: 1px dashed var(--edge);
  padding-top: 3px;
}

[data-style='collage-art'] .glass,
[data-style='collage-art'] .glass-strong {
  border: 2px solid var(--edge);
  border-radius: 2px;
  box-shadow: var(--raised-sm);
  background: var(--surface-2);
  backdrop-filter: none;
}

[data-style='collage-art'] .btn {
  border: 2px solid var(--edge);
  border-radius: 2px;
  box-shadow: var(--raised-sm);
  font-family: 'Georgia', serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: transform var(--tr) var(--ease), box-shadow var(--tr) var(--ease), background var(--tr) var(--ease), color var(--tr) var(--ease) !important;
  position: relative;
}
/* 按钮和纸胶带装饰 */
[data-style='collage-art'] .btn::before {
  content: '';
  position: absolute;
  top: -6px; left: 12px;
  width: 28px; height: 8px;
  transform: rotate(-6deg);
  background: repeating-linear-gradient(
    90deg,
    rgba(155, 89, 182, 0.5) 0px, rgba(155, 89, 182, 0.5) 3px,
    rgba(255, 255, 255, 0.3) 3px, rgba(255, 255, 255, 0.3) 5px
  );
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  pointer-events: none;
  opacity: 0.8;
}
[data-style='collage-art'] .btn:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: var(--raised);
}
[data-style='collage-art'] .btn:active {
  transform: translate(3px, 3px) !important;
  box-shadow: none;
}
[data-style='collage-art'] .btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border: 2px solid var(--edge);
}
[data-style='collage-art'] .btn-primary:hover {
  background: var(--accent-hover);
}

[data-style='collage-art'] .input,
[data-style='collage-art'] .select,
[data-style='collage-art'] .textarea {
  border: 2px solid var(--edge);
  border-radius: 2px;
  background: var(--surface);
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0.02em;
}
[data-style='collage-art'] .input:focus,
[data-style='collage-art'] .select:focus,
[data-style='collage-art'] .textarea:focus {
  box-shadow: var(--raised-sm);
  outline: none;
}

[data-style='collage-art'] .ntab-btn {
  border: 2px solid var(--edge) !important;
  border-radius: 2px !important;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--raised-sm);
  font-family: 'Georgia', serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: transform var(--tr) var(--ease), box-shadow var(--tr) var(--ease), background var(--tr) var(--ease), color var(--tr) var(--ease) !important;
  position: relative;
}
[data-style='collage-art'] .ntab-btn:hover {
  background: var(--hover-bg);
  transform: translate(-1px, -1px) !important;
  box-shadow: var(--raised);
}
[data-style='collage-art'] .ntab-btn.active {
  background: var(--accent) !important;
  color: var(--on-accent);
  border: 2px solid var(--edge) !important;
  box-shadow: var(--raised);
}

[data-style='collage-art'] .admin-panel {
  border: 2px solid var(--edge);
  border-radius: 2px;
  box-shadow: var(--raised);
  background: var(--surface);
}

/* ============================================================
   26) ghibli 吉卜力风格（STYLEKIT Ghibli Style） —— 手绘水彩 · 治愈自然 · 微风感
   灵感：吉卜力工作室动画 —— 温暖奶油色 + 鼠尾草绿 + 天空蓝 + 珊瑚橙
   核心配色：
     鼠尾草绿 #7cb9a8（主色）/ 奶油色 #f4e4bc（底）/ 天空蓝 #85cdca
     珊瑚橙 #e8a87c / 玫瑰粉 #c38d94 / 深棕 #5a4a3a（文字）
   组件规则：
     rounded-2xl（16px 圆润柔和）、border border-[#7cb9a8]/40（水彩边框）、
     阴影使用鼠尾草绿系水彩扩散（rgba(124,185,168,...) 柔和，**禁止厚重黑影**）、
     hover:scale(1.02) **无位移**（微风感，轻放大而非漂浮）、
     active:scale(0.98)（Soft Cushion 温和按压）、
     duration-500 ease-in-out（Magic Longing 童话般从容）、
     装饰层 style-fx：云朵光斑（天空蓝 + 珊瑚橙 + 玫瑰粉）、
     无硬边框、无锐利边角、无高对比刺眼色、无冰冷科技感。
   禁止：shadow-2xl / 纯黑阴影 / translateY hover / duration < 300ms / 尖锐边缘。
   ============================================================ */
:root[data-theme='light'][data-style='ghibli'] {
  --bg-grad: linear-gradient(170deg, #f4e4bc 0%, #ead9b8 45%, #e0d4a8 100%);
  --surface: #f4e4bc;
  --surface-2: #faf5eb;
  --text: #3a3226;                 /* 深棕（对奶油色对比度 ≥10:1 ✅ WCAG AAA） */
  --text-muted: #8a7a6a;
  --accent: #7cb9a8;               /* 鼠尾草绿主色 */
  --accent-soft: rgba(124, 185, 168, 0.18);
  --accent-hover: #6aa897;
  --danger: #d4786a;
  --success: #6aa897;
  --on-accent: #ffffff;
  --on-danger: #ffffff;
  --on-success: #ffffff;
  --edge: rgba(124, 185, 168, 0.4);
  --edge-weak: rgba(124, 185, 168, 0.25);
  --overlay: rgba(90, 74, 58, 0.3);
  --sh-dark: rgba(124, 185, 168, 0.22);
  --sh-light: rgba(255, 255, 255, 0.85);
  --accent-glow: rgba(124, 185, 168, 0.3);
  --raised-sm: 0 2px 8px rgba(124, 185, 168, 0.15);
  --raised: 0 4px 16px rgba(124, 185, 168, 0.2);
  --raised-lg: 0 8px 32px rgba(124, 185, 168, 0.25);
  --pressed-sm: inset 0 1px 3px rgba(90, 74, 58, 0.12);
  --inset: inset 0 2px 6px rgba(90, 74, 58, 0.1);
  --hover-bg: rgba(124, 185, 168, 0.12);
  --scroll-thumb: rgba(124, 185, 168, 0.4);
  --tr: 500ms;                     /* Magic Longing */
  --ease: ease-in-out;
}
:root[data-theme='dark'][data-style='ghibli'] {
  --bg-grad: linear-gradient(170deg, #1f3a35 0%, #1a3028 45%, #152822 100%);
  --surface: #2d4840;
  --surface-2: #3a5a50;
  --text: #f4e4bc;                 /* 奶油色（对深鼠尾草 ≥8:1 ✅ WCAG AAA） */
  --text-muted: #c8b89a;
  --accent: #85cdca;               /* 天空蓝 */
  --accent-soft: rgba(133, 205, 202, 0.2);
  --accent-hover: #98d8d5;
  --danger: #e8a87c;
  --success: #a8d8b8;
  --on-accent: #1a3028;
  --on-danger: #3a2015;
  --on-success: #1a3028;
  --edge: rgba(133, 205, 202, 0.35);
  --edge-weak: rgba(133, 205, 202, 0.2);
  --overlay: rgba(0, 0, 0, 0.5);
  --sh-dark: rgba(0, 0, 0, 0.35);
  --sh-light: rgba(255, 244, 220, 0.04);
  --accent-glow: rgba(133, 205, 202, 0.25);
  --raised-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --raised: 0 4px 16px rgba(0, 0, 0, 0.35);
  --raised-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
  --pressed-sm: inset 0 1px 3px rgba(0, 0, 0, 0.4);
  --inset: inset 0 2px 6px rgba(0, 0, 0, 0.3);
  --hover-bg: rgba(133, 205, 202, 0.15);
  --scroll-thumb: rgba(133, 205, 202, 0.4);
  --tr: 500ms;
  --ease: ease-in-out;
}

/* ========== ghibli 装饰层：云朵光斑 ========== */
[data-style='ghibli'] .style-fx {
  background:
    radial-gradient(ellipse 50% 40% at 20% 15%, rgba(133, 205, 202, 0.25) 0%, transparent 60%),
    radial-gradient(ellipse 45% 35% at 80% 25%, rgba(232, 168, 124, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 50% 85%, rgba(195, 141, 148, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 85% 75%, rgba(124, 185, 168, 0.22) 0%, transparent 55%);
}
[data-style='ghibli'] .style-fx::before,
[data-style='ghibli'] .style-fx::after {
  content: '';
  position: absolute;
  filter: blur(120px);
  border-radius: 50%;
}
[data-style='ghibli'] .style-fx::before {
  width: 40vw;
  height: 40vw;
  top: -10vw;
  left: 10vw;
  background: radial-gradient(circle, rgba(133, 205, 202, 0.22), transparent 65%);
  animation: fx-drift-a 40s ease-in-out infinite;
}
[data-style='ghibli'] .style-fx::after {
  width: 50vw;
  height: 35vw;
  bottom: -8vw;
  right: 5vw;
  background: radial-gradient(circle, rgba(232, 168, 124, 0.2), transparent 62%);
  animation: fx-drift-b 36s ease-in-out infinite;
}
:root[data-theme='dark'][data-style='ghibli'] .style-fx {
  background:
    radial-gradient(ellipse 50% 40% at 20% 15%, rgba(133, 205, 202, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse 45% 35% at 80% 25%, rgba(232, 168, 124, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 50% 85%, rgba(195, 141, 148, 0.1) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 85% 75%, rgba(124, 185, 168, 0.18) 0%, transparent 55%);
}
:root[data-theme='dark'][data-style='ghibli'] .style-fx::before { opacity: 0.5; }
:root[data-theme='dark'][data-style='ghibli'] .style-fx::after { opacity: 0.4; }

/* ========== ghibli 组件：rounded-2xl + 水彩边框 + 鼠尾草绿阴影 + 微风感 scale hover ========== */
[data-style='ghibli'] .card {
  border: 1px solid var(--edge);
  border-radius: 16px;            /* rounded-2xl */
  background: var(--surface);
  box-shadow: var(--raised);
  transition: transform 500ms ease-in-out, box-shadow 500ms ease-in-out, border-color 500ms ease-in-out, background 500ms ease-in-out !important;
}
[data-style='ghibli'] .card .icon {
  border-radius: 12px;
  background: rgba(124, 185, 168, 0.2);
  color: var(--text);
}
[data-style='ghibli'] .card:hover {
  /* 微风感：scale(1.02) —— 无 translateY 位移！ */
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(124, 185, 168, 0.3);
  border-color: rgba(124, 185, 168, 0.55);
}
[data-style='ghibli'] .card:active {
  transform: scale(0.98);
  box-shadow: var(--pressed-sm);
}

[data-style='ghibli'] .glass,
[data-style='ghibli'] .glass-strong {
  border: 1px solid var(--edge);
  border-radius: 16px;
  background: var(--surface-2);
  box-shadow: var(--raised-lg);
  backdrop-filter: none;
}

[data-style='ghibli'] .btn {
  border: 1px solid var(--edge);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--raised-sm);
  transition: transform 500ms ease-in-out, box-shadow 500ms ease-in-out, background 500ms ease-in-out, color 500ms ease-in-out !important;
}
[data-style='ghibli'] .btn:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(124, 185, 168, 0.3);
  background: rgba(124, 185, 168, 0.12);
}
[data-style='ghibli'] .btn:active {
  transform: scale(0.98);
  box-shadow: var(--pressed-sm);
}
[data-style='ghibli'] .btn-primary {
  background: #7cb9a8;
  color: #ffffff;
  border: 1px solid #6aa897;
  box-shadow: 0 4px 16px rgba(124, 185, 168, 0.3);
}
[data-style='ghibli'] .btn-primary:hover {
  background: #6aa897;
  box-shadow: 0 8px 24px rgba(124, 185, 168, 0.4);
}
[data-style='ghibli'] .btn-primary:active {
  transform: scale(0.98);
  box-shadow: 0 2px 8px rgba(124, 185, 168, 0.25);
}

[data-style='ghibli'] .input,
[data-style='ghibli'] .textarea,
[data-style='ghibli'] .select {
  border: 1px solid var(--edge);
  border-radius: 16px;
  background: #faf5eb;
  color: var(--text);
  transition: border-color 500ms ease-in-out, box-shadow 500ms ease-in-out !important;
}
[data-theme='dark'][data-style='ghibli'] .input,
[data-theme='dark'][data-style='ghibli'] .textarea,
[data-theme='dark'][data-style='ghibli'] .select {
  background: #3a5a50;
  color: var(--text);
}
[data-style='ghibli'] .input:focus,
[data-style='ghibli'] .textarea:focus,
[data-style='ghibli'] .select:focus {
  border-color: rgba(124, 185, 168, 0.6);
  box-shadow: 0 0 0 3px rgba(124, 185, 168, 0.28), 0 4px 16px rgba(124, 185, 168, 0.25);
  outline: none;
}

[data-style='ghibli'] .ntab-btn {
  border: 1px solid var(--edge) !important;
  border-radius: 999px !important;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--raised-sm);
  transition: transform 500ms ease-in-out, box-shadow 500ms ease-in-out, background 500ms ease-in-out, color 500ms ease-in-out !important;
}
[data-style='ghibli'] .ntab-btn:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 16px rgba(124, 185, 168, 0.25);
  background: var(--hover-bg);
}
[data-style='ghibli'] .ntab-btn.active {
  background: #7cb9a8 !important;
  color: #ffffff;
  border-color: #6aa897 !important;
  box-shadow: 0 4px 16px rgba(124, 185, 168, 0.35);
}

[data-style='ghibli'] .admin-panel {
  border: 1px solid var(--edge);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--raised-lg);
}

[data-style='ghibli'] :focus-visible {
  outline: 2px solid rgba(124, 185, 168, 0.6);
  outline-offset: 2px;
  border-radius: 12px;
  box-shadow: 0 0 0 4px rgba(124, 185, 168, 0.2);
}

/* ============================================================
   27) neo-brutalist 新野兽派（STYLEKIT Neo-Brutalist） —— 纯黑粗边框 · 硬边直角阴影 · 碾压按压
   核心：
     纯黑 #000000 边框（border-2 移动端 / border-4 桌面端）
     硬边缘阴影 shadow-[Xpx_Xpx_0px_0px_rgba(0,0,0,1)]（禁止 blur）
     圆角 rounded-none（**全风格直角，**禁止任何圆角**）**
     强调色：粉 #ff006e / 亮黄 #ffff00 / 绿 #ccff00 / 蓝 #00d9ff
   交互物理：
     Physical Crushing：button active:translate(6px,6px) + shadow-none（位移量=原始阴影像素值）
     Brutal Snap：hover 背景硬切到强调色（0ms 过渡）+ 阴影增大到 accented shadow
     按钮 duration-150 / 卡片 duration-150 ease-out（生猛碰撞感）
     hover 无 opacity 过渡（必须瞬间切换）
   装饰层：白-黑硬条纹背景（拒绝渐变）
   禁止：任何圆角 / 渐变 / 模糊阴影 / 灰色边框 / 半透明 opacity 过渡。
   ============================================================ */
:root[data-theme='light'][data-style='neo-brutalist'] {
  --bg-grad: none;                    /* 禁止渐变！ */
  --surface: #ffffff;
  --surface-2: #f5f5f5;
  --text: #000000;
  --text-muted: #404040;
  --accent: #ff006e;                  /* 粉色 CTA */
  --accent-soft: rgba(255, 0, 110, 0.15);
  --accent-hover: #e60062;
  --danger: #ff006e;
  --success: #ccff00;
  --on-accent: #ffffff;
  --on-danger: #ffffff;
  --on-success: #000000;
  --edge: #000000;                    /* 纯黑边框 */
  --edge-weak: #000000;
  --overlay: rgba(0, 0, 0, 0.7);
  --sh-dark: rgba(0, 0, 0, 1);
  --sh-light: rgba(255, 255, 255, 1);
  --accent-glow: rgba(255, 0, 110, 0.5);
  /* 硬边缘偏移阴影（**零 blur**） */
  --raised-sm: 3px 3px 0 0 rgba(0, 0, 0, 1);
  --raised: 6px 6px 0 0 rgba(0, 0, 0, 1);
  --raised-lg: 10px 10px 0 0 rgba(0, 0, 0, 1);
  --raised-hover-accent: 10px 10px 0 0 rgba(255, 0, 110, 1);
  --pressed-sm: none;
  --inset: none;
  --hover-bg: #ffff00;                /* 亮黄 hover 背景（硬切） */
  --scroll-thumb: #000000;
  --tr: 150ms;
  --ease: ease-out;
}
:root[data-theme='dark'][data-style='neo-brutalist'] {
  --bg-grad: none;
  --surface: #ffffff;                 /* dark 也用白卡片，反黑边！ */
  --surface-2: #ffffff;
  --text: #000000;                    /* 白卡黑字，保持高对比 */
  --text-muted: #404040;
  --accent: #ff006e;
  --accent-soft: rgba(255, 0, 110, 0.15);
  --accent-hover: #e60062;
  --danger: #ff006e;
  --success: #ccff00;
  --on-accent: #ffffff;
  --on-danger: #ffffff;
  --on-success: #000000;
  --edge: #000000;                    /* 依然纯黑边框 */
  --edge-weak: #000000;
  --overlay: rgba(0, 0, 0, 0.7);
  --sh-dark: rgba(0, 0, 0, 1);
  --sh-light: rgba(255, 255, 255, 1);
  --accent-glow: rgba(255, 0, 110, 0.5);
  --raised-sm: 3px 3px 0 0 rgba(0, 0, 0, 1);
  --raised: 6px 6px 0 0 rgba(0, 0, 0, 1);
  --raised-lg: 10px 10px 0 0 rgba(0, 0, 0, 1);
  --raised-hover-accent: 10px 10px 0 0 rgba(255, 0, 110, 1);
  --pressed-sm: none;
  --inset: none;
  --hover-bg: #ffff00;
  --scroll-thumb: #000000;
  --tr: 150ms;
  --ease: ease-out;
}
/* dark 模式背景也要硬：白底 + 纯黑条纹 */
:root[data-theme='dark'][data-style='neo-brutalist'] {
  --bg-grad: none;
}

/* ========== neo-brutalist 字体：正文 font-mono / 标题 font-black ========== */
[data-style='neo-brutalist'] body,
[data-style='neo-brutalist'] .card,
[data-style='neo-brutalist'] .btn,
[data-style='neo-brutalist'] .input,
[data-style='neo-brutalist'] .textarea,
[data-style='neo-brutalist'] .select,
[data-style='neo-brutalist'] .ntab-btn,
[data-style='neo-brutalist'] .admin-panel,
[data-style='neo-brutalist'] .glass,
[data-style='neo-brutalist'] .glass-strong {
  font-family: 'Courier New', Courier, 'Lucida Console', monospace;
}
[data-style='neo-brutalist'] h1,
[data-style='neo-brutalist'] h2,
[data-style='neo-brutalist'] h3,
[data-style='neo-brutalist'] h4 {
  font-weight: 900;                    /* font-black */
  letter-spacing: -0.02em;
}

/* ========== neo-brutalist 装饰层：白底 + 粗黑条纹 ========== */
[data-style='neo-brutalist'] .style-fx {
  background: #ffffff;
}
[data-style='neo-brutalist'] .style-fx::before,
[data-style='neo-brutalist'] .style-fx::after {
  content: none;
}
:root[data-theme='dark'][data-style='neo-brutalist'] .style-fx {
  background: #000000;
}
:root[data-theme='dark'][data-style='neo-brutalist'] body,
:root[data-theme='dark'][data-style='neo-brutalist'] .bg-layer {
  background: #000000 !important;
}

/* ========== neo-brutalist 玻璃面板（**禁止 blur，必须实心白底 + 黑边**） ========== */
[data-style='neo-brutalist'] .glass,
[data-style='neo-brutalist'] .glass-strong {
  border: 4px solid #000000;           /* border-4 */
  border-radius: 0;                    /* rounded-none */
  background: #ffffff;
  box-shadow: var(--raised);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ========== neo-brutalist 卡片 ========== */
[data-style='neo-brutalist'] .card {
  border: 4px solid #000000;           /* border-4 md 粗黑边框 */
  border-radius: 0;                    /* rounded-none **核心** */
  background: #ffffff;
  box-shadow: var(--raised);           /* 6px 6px 硬边阴影 */
  transition: transform 150ms ease-out, box-shadow 150ms ease-out, background-color 150ms steps(1) !important;
  cursor: pointer;
}
[data-style='neo-brutalist'] .card .icon {
  border: 2px solid #000000;
  border-radius: 0;
  background: #ffffff;
  color: #000000;
}
/* Brutal Snap：hover 背景硬切到亮黄 + 阴影变粉 + 向左上偏移 */
[data-style='neo-brutalist'] .card:hover {
  transform: translate(-2px, -2px);
  background: #ffff00;                 /* 硬切亮黄 hover 背景 */
  box-shadow: var(--raised-hover-accent);  /* 阴影变粉色 */
}
/* 图标也跟着缩放 */
[data-style='neo-brutalist'] .card:hover .icon {
  background: #ff006e;
  color: #ffffff;
}
/* Physical Crushing：active 完全压平（位移量=原始阴影 6px） */
[data-style='neo-brutalist'] .card:active {
  transform: translate(6px, 6px);
  box-shadow: none;                    /* **阴影完全消失，碾压感** */
  background: #ff006e;
}

/* ========== neo-brutalist 按钮 ========== */
[data-style='neo-brutalist'] .btn {
  border: 4px solid #000000;
  border-radius: 0;                    /* rounded-none */
  background: #ffffff;
  color: #000000;
  box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 1);
  font-weight: 900;                    /* font-black */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: transform 150ms ease-out, box-shadow 150ms ease-out, background-color 150ms steps(1), color 150ms steps(1) !important;
  cursor: pointer;
}
/* hover 阴影增大 + 向左上偏移（强调力量感） */
[data-style='neo-brutalist'] .btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 10px 10px 0 0 rgba(0, 0, 0, 1);
  background: #ffff00;
  color: #000000;
}
/* Physical Crushing：位移量=原始阴影 6px，阴影归零，完全压平 */
[data-style='neo-brutalist'] .btn:active {
  transform: translate(6px, 6px);
  box-shadow: none;                    /* 碾压！ */
}
[data-style='neo-brutalist'] .btn-primary {
  background: #ff006e;
  color: #ffffff;
  border: 4px solid #000000;
  box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 1);
}
[data-style='neo-brutalist'] .btn-primary:hover {
  background: #e60062;
  transform: translate(-2px, -2px);
  box-shadow: 10px 10px 0 0 rgba(255, 0, 110, 1);
}
[data-style='neo-brutalist'] .btn-primary:active {
  transform: translate(6px, 6px);
  box-shadow: none;
  background: #cc005a;
}

/* ========== neo-brutalist 输入框 ========== */
[data-style='neo-brutalist'] .input,
[data-style='neo-brutalist'] .textarea,
[data-style='neo-brutalist'] .select {
  border: 4px solid #000000;
  border-radius: 0;
  background: #ffffff;
  color: #000000;
  font-family: 'Courier New', Courier, monospace;
  box-shadow: none;
  transition: box-shadow 150ms ease-out, background-color 150ms steps(1) !important;
}
[data-theme='dark'][data-style='neo-brutalist'] .input,
[data-theme='dark'][data-style='neo-brutalist'] .textarea,
[data-theme='dark'][data-style='neo-brutalist'] .select {
  background: #ffffff;
  color: #000000;
}
[data-style='neo-brutalist'] .input:focus,
[data-style='neo-brutalist'] .select:focus,
[data-style='neo-brutalist'] .textarea:focus {
  border-color: #000000;
  box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 1);  /* focus 加硬阴影 */
  background: #ffff00;
  outline: none;
}

/* ========== .ntab-btn ========== */
[data-style='neo-brutalist'] .ntab-btn {
  border: 4px solid #000000 !important;
  border-radius: 0 !important;
  background: #ffffff;
  color: #000000;
  box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 1);
  font-weight: 900;
  text-transform: uppercase;
  transition: transform 150ms ease-out, box-shadow 150ms ease-out, background-color 150ms steps(1) !important;
}
[data-style='neo-brutalist'] .ntab-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 0 rgba(0, 0, 0, 1);
  background: #ffff00;
}
[data-style='neo-brutalist'] .ntab-btn.active {
  background: #ff006e !important;
  color: #ffffff;
  border-color: #000000 !important;
  box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 1);
}
[data-style='neo-brutalist'] .ntab-btn.active:active {
  transform: translate(6px, 6px);
  box-shadow: none;
}

/* ========== .admin-panel ========== */
[data-style='neo-brutalist'] .admin-panel {
  border: 4px solid #000000;
  border-radius: 0;
  background: #ffffff;
  box-shadow: 10px 10px 0 0 rgba(0, 0, 0, 1);
}

/* ========== 全局 focus-visible ========== */
[data-style='neo-brutalist'] :focus-visible {
  outline: 4px dashed #ff006e;         /* 粉色虚线轮廓（拒绝柔和 ring） */
  outline-offset: 2px;
  border-radius: 0;
}

/* ============================================================
   23) doodle 手绘涂鸦风（STYLEKIT Hand-Drawn Doodle） —— 笔记本纸 · 虚线手绘 · 标记笔三色 · 颤动感
   核心：#fffef5 奶白纸张、#2c2c2c 墨黑虚线边框 border-2 border-dashed、
   硬边偏移阴影 shadow-[Npx_Npx_0px_#4ecdc4]（蓝绿标记笔）、
   标记笔红 #ff6b6b / 蓝绿 #4ecdc4 / 黄 #ffd93d 三色点缀、
   rounded-sm 2px 小圆角（禁止大圆角）、
   笔记本横线背景 + 红色页边线 + 微妙 rotate 手绘不规则感、
   Stop-Motion Jitter hover（微小 translate 抖动，禁止平滑上浮）、
   Paper Press active（translate deeper + shadow-none 压平反馈）、
   duration-200 ease-in-out。
   禁止：渐变 / backdrop-blur / border-solid / rounded-lg+ / shadow-md+。
   ============================================================ */
:root[data-theme='light'][data-style='doodle'] {
  --bg-grad: linear-gradient(180deg, #fffef5 0%, #faf9f0 100%);
  --surface: #fffef5;
  --surface-2: #f8f7f0;
  --text: #2c2c2c;
  --text-muted: #5a5a5a;
  --accent: #ff6b6b;
  --accent-soft: rgba(255, 107, 107, 0.12);
  --accent-hover: #ff5252;
  --danger: #ff6b6b;
  --success: #4ecdc4;
  --on-accent: #fffef5;
  --on-danger: #fffef5;
  --on-success: #2c2c2c;
  --edge: #2c2c2c;
  --edge-weak: #2c2c2c;
  --overlay: rgba(44, 44, 44, 0.55);
  --sh-dark: rgba(44, 44, 44, 0.1);
  --sh-light: rgba(255, 255, 255, 0.8);
  --accent-glow: rgba(78, 205, 196, 0.15);
  --raised-sm: 2px 2px 0px #4ecdc4;
  --raised: 3px 3px 0px #4ecdc4;
  --raised-lg: 4px 4px 0px #4ecdc4;
  --pressed-sm: 0px 0px 0px #2c2c2c;
  --inset: none;
  --hover-bg: rgba(78, 205, 196, 0.08);
  --scroll-thumb: #4ecdc4;
  --tr: 200ms;
  --ease: ease-in-out;
}
:root[data-theme='dark'][data-style='doodle'] {
  --bg-grad: linear-gradient(180deg, #1e1e2a 0%, #17172a 100%);
  --surface: #2a2a3a;
  --surface-2: #33334a;
  --text: #f0ece0;
  --text-muted: #b0a898;
  --accent: #ff8a80;
  --accent-soft: rgba(255, 138, 128, 0.15);
  --accent-hover: #ffab91;
  --danger: #ff6b6b;
  --success: #4ecdc4;
  --on-accent: #1e1e2a;
  --on-danger: #1e1e2a;
  --on-success: #f0ece0;
  --edge: #f0ece0;
  --edge-weak: #c8c0b0;
  --overlay: rgba(0, 0, 0, 0.5);
  --sh-dark: rgba(0, 0, 0, 0.3);
  --sh-light: rgba(255, 255, 255, 0.05);
  --accent-glow: rgba(78, 205, 196, 0.1);
  --raised-sm: 2px 2px 0px #4ecdc4;
  --raised: 3px 3px 0px #4ecdc4;
  --raised-lg: 4px 4px 0px #4ecdc4;
  --pressed-sm: 0px 0px 0px #f0ece0;
  --inset: none;
  --hover-bg: rgba(78, 205, 196, 0.1);
  --scroll-thumb: #4ecdc4;
  --tr: 200ms;
  --ease: ease-in-out;
}
/* doodle 装饰：笔记本横线 + 红色页边线 + 蓝色横线 */
[data-style='doodle'] .style-fx {
  background-color: var(--surface);
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 27px,
      rgba(78, 135, 180, 0.18) 27px,
      rgba(78, 135, 180, 0.18) 28px
    );
}
[data-style='doodle'] .style-fx::before {
  content: '';
  position: absolute;
  left: 62px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255, 107, 107, 0.25);
}
:root[data-theme='dark'][data-style='doodle'] .style-fx::before {
  background: rgba(255, 138, 128, 0.2);
}
[data-style='doodle'] .style-fx::after {
  display: none;
}
/* doodle 卡片：虚线边框 + 硬边蓝绿标记笔阴影 + 微旋转 */
[data-style='doodle'] .card {
  border-radius: 2px;
  border: 2px dashed var(--edge);
  background: var(--surface);
  box-shadow: var(--raised);
  transform: rotate(-0.3deg);
  transition: transform var(--tr) var(--ease), box-shadow var(--tr) var(--ease), background var(--tr) var(--ease), border-color var(--tr) var(--ease) !important;
}
[data-style='doodle'] .card .icon {
  border-radius: 2px;
  border: 2px dashed var(--edge);
  background: var(--surface-2);
}
[data-style='doodle'] .card:hover {
  transform: translate(-1px, -1px) rotate(-0.5deg);
  border-color: var(--accent);
  box-shadow: 5px 5px 0px #4ecdc4;
}
[data-style='doodle'] .card:active {
  transform: translate(2px, 2px) rotate(-0.1deg);
  box-shadow: none;
}
[data-style='doodle'] .glass,
[data-style='doodle'] .glass-strong {
  border-radius: 2px;
  border: 2px dashed var(--edge);
  background: var(--surface);
  box-shadow: var(--raised-sm);
}
/* doodle 按钮：虚线边框 + 硬边标记笔阴影 + Stop-Motion Jitter hover + Paper Press active */
[data-style='doodle'] .btn {
  border-radius: 2px;
  border: 2px dashed var(--edge);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: 3px 3px 0px #4ecdc4;
  transform: rotate(0.2deg);
  transition: transform var(--tr) var(--ease), box-shadow var(--tr) var(--ease), background var(--tr) var(--ease), border-color var(--tr) var(--ease), color var(--tr) var(--ease) !important;
}
[data-style='doodle'] .btn:hover {
  transform: translate(-1px, -1px) rotate(-0.5deg);
  background: var(--hover-bg);
  border-color: var(--success);
  box-shadow: 4px 4px 0px #ffd93d;
  color: var(--text);
}
[data-style='doodle'] .btn:active {
  transform: translate(2px, 2px) rotate(0deg);
  box-shadow: none;
}
[data-style='doodle'] .btn-primary {
  border-radius: 2px;
  border: 2px dashed var(--edge);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  box-shadow: 3px 3px 0px #ffd93d;
  transform: rotate(-0.2deg);
  transition: transform var(--tr) var(--ease), box-shadow var(--tr) var(--ease), background var(--tr) var(--ease) !important;
}
[data-style='doodle'] .btn-primary:hover {
  transform: translate(-1px, -1px) rotate(-0.5deg);
  background: var(--accent-hover);
  box-shadow: 5px 5px 0px #4ecdc4;
}
[data-style='doodle'] .btn-primary:active {
  transform: translate(2px, 2px) rotate(0deg);
  box-shadow: none;
}
/* doodle 输入框：虚线边框 + 纸张背景 + 黄色标记笔焦点环 */
[data-style='doodle'] .input,
[data-style='doodle'] .textarea,
[data-style='doodle'] .select {
  border-radius: 2px;
  border: 2px dashed var(--edge);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  transition: border-color var(--tr) var(--ease), box-shadow var(--tr) var(--ease), background var(--tr) var(--ease) !important;
}
[data-style='doodle'] .input:focus,
[data-style='doodle'] .textarea:focus,
[data-style='doodle'] .select:focus {
  border-color: #4ecdc4;
  box-shadow: 0 0 0 3px #ffd93d;
}
[data-style='doodle'] :focus-visible {
  outline: 2px dashed #ffd93d;
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================
   28) comic-style 漫画风格（STYLEKIT Comic Style） —— 粗墨线 · 半调网点 · 硬边印刷阴影 · POW! 爆发感
   核心：
     粗墨线 border-3 移动端 / border-4 桌面端（#1a1a1a 深黑）
     硬边缘阴影 shadow-[Xpx_Xpx_0_0_#1a1a1a]（零 blur，模拟印刷偏移）
     圆角 rounded-lg（唯一允许的圆角级别，拒绝 rounded-xl/2xl/3xl）
     强调色：红 #ff3333 (CTA) / 黄 #ffcc00 (高亮) / 蓝 #3366ff (信息) / 绿 #33cc33 (成功)
     正文：大写粗体 uppercase font-black
   交互物理：
     POW! Explosion：hover scale-110 + rotate(-3deg) + 颜色瞬间翻转
     Heavy Ink Pressing：active shadow-none + translate(4px,4px) 墨水压迫
     Shadow Amplification：hover 阴影从 4px → 8px，配合 translate(-2px,-2px)
     Halftone Reveal：hover 浮现半调网点背景（opacity-20）
   装饰层：半调网点 radial-gradient(circle, #000 1px, transparent 1px) 4px 4px
   禁止：细边框 / 渐变主视觉 / soft 圆角 / 长 duration（≤150ms）
   ============================================================ */
:root[data-theme='light'][data-style='comic-style'] {
  --bg-grad: none;
  --surface: #ffffff;
  --surface-2: #fffef0;                 /* 微微泛黄的纸感白 */
  --text: #1a1a1a;
  --text-muted: #4a4a4a;
  --accent: #ff3333;                    /* 动作红 CTA */
  --accent-soft: rgba(255, 51, 51, 0.12);
  --accent-hover: #e62d2d;
  --danger: #ff3333;
  --success: #33cc33;
  --on-accent: #ffffff;
  --on-danger: #ffffff;
  --on-success: #1a1a1a;
  --edge: #1a1a1a;                      /* 深墨线 */
  --edge-weak: #4a4a4a;
  --overlay: rgba(26, 26, 26, 0.75);
  --sh-dark: #1a1a1a;
  --sh-light: #ffffff;
  --accent-glow: rgba(255, 51, 51, 0.4);
  --raised-sm: 3px 3px 0 0 #1a1a1a;
  --raised: 4px 4px 0 0 #1a1a1a;
  --raised-lg: 8px 8px 0 0 #1a1a1a;
  --raised-hover-accent: 8px 8px 0 0 #ff3333;
  --pressed-sm: none;
  --inset: none;
  --hover-bg: #ffcc00;                  /* 亮黄 hover 背景 */
  --scroll-thumb: #1a1a1a;
  --tr: 150ms;
  --ease: ease-out;
}
:root[data-theme='dark'][data-style='comic-style'] {
  --bg-grad: none;
  --surface: #0d0d14;                    /* 深墨蓝黑（深夜漫画底色） */
  --surface-2: #14141f;                  /* 略浅的次级面板 */
  --text: #f0f0f0;                       /* 白描边文字 */
  --text-muted: #a0a0b0;
  --accent: #ffd93d;                     /* 荧光黄 CTA（深夜漫画高光） */
  --accent-soft: rgba(255, 217, 61, 0.15);
  --accent-hover: #ffeb66;
  --danger: #ff4466;                     /* 荧光红 */
  --success: #00ffaa;                    /* 荧光青 */
  --on-accent: #0d0d14;
  --on-danger: #0d0d14;
  --on-success: #0d0d14;
  --edge: #ffffff;                       /* 纯白描边 */
  --edge-weak: #c0c0d0;
  --overlay: rgba(0, 0, 0, 0.85);
  --sh-dark: #000000;
  --sh-light: #ffffff;
  --accent-glow: rgba(255, 217, 61, 0.5);
  --raised-sm: 3px 3px 0 0 #000000;
  --raised: 4px 4px 0 0 #000000;
  --raised-lg: 8px 8px 0 0 #000000;
  --raised-hover-accent: 8px 8px 0 0 #ffd93d;
  --pressed-sm: none;
  --inset: none;
  --hover-bg: #ffd93d;
  --scroll-thumb: #404050;
  --tr: 150ms;
  --ease: ease-out;
}

/* ========== comic-style 字体：大写粗体（模拟漫画音效字体） ========== */
[data-style='comic-style'] body,
[data-style='comic-style'] .card,
[data-style='comic-style'] .btn,
[data-style='comic-style'] .input,
[data-style='comic-style'] .textarea,
[data-style='comic-style'] .select,
[data-style='comic-style'] .ntab-btn,
[data-style='comic-style'] .admin-panel,
[data-style='comic-style'] .glass,
[data-style='comic-style'] .glass-strong {
  font-family: 'Impact', 'Arial Black', 'Noto Sans SC', 'PingFang SC', sans-serif;
}
[data-style='comic-style'] h1,
[data-style='comic-style'] h2,
[data-style='comic-style'] h3,
[data-style='comic-style'] h4 {
  font-weight: 900;                      /* font-black */
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
[data-style='comic-style'] body,
[data-style='comic-style'] .card p,
[data-style='comic-style'] .btn {
  font-weight: 700;                      /* font-bold */
}

/* ========== comic-style 半调网点背景 ========== */
[data-style='comic-style'] .style-fx {
  background-color: var(--surface);
  background-image: radial-gradient(circle, var(--edge) 1px, transparent 1px);
  background-size: 4px 4px;
  opacity: 0.06;
}
[data-style='comic-style'] .style-fx::before,
[data-style='comic-style'] .style-fx::after {
  content: none;
}
[data-theme='dark'][data-style='comic-style'] .style-fx {
  opacity: 0.1;
}

/* ========== comic-style 玻璃面板 ========== */
[data-style='comic-style'] .glass,
[data-style='comic-style'] .glass-strong {
  border: 3px solid var(--edge);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--raised);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ========== comic-style 卡片 ========== */
[data-style='comic-style'] .card {
  border: 3px solid var(--edge);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--raised);
  transition: transform 150ms ease-out, box-shadow 150ms ease-out, background-color 150ms ease-out !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
[data-style='comic-style'] .card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--edge) 1.5px, transparent 1.5px);
  background-size: 5px 5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease-out;
  z-index: 0;
}
[data-style='comic-style'] .card > * { position: relative; z-index: 1; }
[data-style='comic-style'] .card .icon {
  border: 2px solid var(--edge);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 2px 2px 0 0 var(--edge);
}
[data-style='comic-style'] .card:hover {
  transform: translate(-2px, -2px) rotate(-1deg);
  background: var(--hover-bg);
  color: var(--edge);
  box-shadow: var(--raised-hover-accent);
}
[data-style='comic-style'] .card:hover::before { opacity: 0.12; }
[data-style='comic-style'] .card:hover .icon {
  background: var(--accent);
  color: var(--on-accent);
}
[data-style='comic-style'] .card:active {
  transform: translate(4px, 4px);
  box-shadow: none;
  background: var(--accent);
  color: var(--on-accent);
}

/* ========== comic-style 按钮 ========== */
[data-style='comic-style'] .btn {
  border: 3px solid var(--edge);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 4px 4px 0 0 var(--edge);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: transform 150ms ease-out, box-shadow 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out !important;
  cursor: pointer;
}
[data-style='comic-style'] .btn:hover {
  transform: scale(1.05) rotate(-2deg);
  box-shadow: 8px 8px 0 0 var(--edge);
  background: var(--hover-bg);
  color: var(--edge);
}
[data-style='comic-style'] .btn:active {
  transform: translate(4px, 4px);
  box-shadow: none;
  background: var(--accent);
  color: var(--on-accent);
}
[data-style='comic-style'] .btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border: 3px solid var(--edge);
  box-shadow: 4px 4px 0 0 var(--edge);
}
[data-style='comic-style'] .btn-primary:hover {
  background: var(--accent-hover);
  transform: scale(1.05) rotate(-2deg);
  box-shadow: 8px 8px 0 0 var(--accent);
}
[data-style='comic-style'] .btn-primary:active {
  transform: translate(4px, 4px);
  box-shadow: none;
  background: var(--accent);
  filter: brightness(0.9);
}

/* ========== comic-style 输入框 ========== */
[data-style='comic-style'] .input,
[data-style='comic-style'] .textarea,
[data-style='comic-style'] .select {
  border: 3px solid var(--edge);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font-family: 'Arial', 'PingFang SC', sans-serif;
  font-weight: 700;
  box-shadow: none;
  transition: box-shadow 150ms ease-out, background-color 150ms ease-out !important;
}
[data-style='comic-style'] .input:focus,
[data-style='comic-style'] .select:focus,
[data-style='comic-style'] .textarea:focus {
  border-color: var(--edge);
  box-shadow: 4px 4px 0 0 var(--accent);
  background: var(--hover-bg);
  color: var(--edge);
  outline: none;
}

/* ========== .ntab-btn ========== */
[data-style='comic-style'] .ntab-btn {
  border: 3px solid var(--edge) !important;
  border-radius: 12px !important;
  background: var(--surface);
  color: var(--text);
  box-shadow: 3px 3px 0 0 var(--edge);
  font-weight: 900;
  text-transform: uppercase;
  transition: transform 150ms ease-out, box-shadow 150ms ease-out, background-color 150ms ease-out !important;
}
[data-style='comic-style'] .ntab-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 6px 6px 0 0 var(--edge);
  background: var(--hover-bg);
  color: var(--edge);
}
[data-style='comic-style'] .ntab-btn.active {
  background: var(--accent) !important;
  color: var(--on-accent);
  border-color: var(--edge) !important;
  box-shadow: 4px 4px 0 0 var(--edge);
}
[data-style='comic-style'] .ntab-btn.active:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}

/* ========== .admin-panel ========== */
[data-style='comic-style'] .admin-panel {
  border: 3px solid var(--edge);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 8px 8px 0 0 var(--edge);
}

/* ========== 全局 focus-visible ========== */
[data-style='comic-style'] :focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}