/* ============================================================
   风格主题包 —— 自动生成，勿手动编辑！
   数据源：frontend/themes.json
   生成器：scripts/build-themes.js
   ============================================================ */

/* 装饰层载体（三个页面均放置 <div class="style-fx">）：
   必须 fixed + z-index:-1 + pointer-events:none，
   否则主题伪元素装饰层会浮在内容之上拦截点击 */
.style-fx {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
body.has-wallpaper .style-fx {
  display: none;
}

/* ============================================================
   1) Soft 柔和浮雕 — soft
   ============================================================ */
:root:not([data-style]) .style-fx::before,
:root:not([data-style]) .style-fx::after,
:root[data-style='soft'] .style-fx::before,
:root[data-style='soft'] .style-fx::after {
  content: '';
  position: absolute;
  filter: blur(72px);
  border-radius: 50%;
  animation: fx-soft-a 32s ease-in-out infinite;
}

:root:not([data-style]) .style-fx::before,
:root[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;
}

:root:not([data-style]) .style-fx::after,
:root[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;
}

:root[data-theme='dark']:not([data-style]) .style-fx::before,
:root[data-theme='dark'][data-style='soft'] .style-fx::before { opacity: 0.28; }

:root[data-theme='dark']:not([data-style]) .style-fx::after,
:root[data-theme='dark'][data-style='soft'] .style-fx::after { opacity: 0.24; }

:root:not([data-style]) .card,
:root:not([data-style]) .admin-panel,
:root[data-style='soft'] .card,
:root[data-style='soft'] .admin-panel {
  border-radius: 20px;
}

@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); }
}

:root:not([data-style]) .style-fx::before,
:root:not([data-style]) .style-fx::after,
:root[data-style='soft'] .style-fx::before,
:root[data-style='soft'] .style-fx::after {
  content: '';
  position: absolute;
  filter: blur(72px);
  border-radius: 50%;
  animation: fx-soft-a 32s ease-in-out infinite;
}

:root:not([data-style]) .style-fx::before,
:root[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;
}

:root:not([data-style]) .style-fx::after,
:root[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;
}

:root:not([data-style]) .card,
:root:not([data-style]) .admin-panel,
:root[data-style='soft'] .card,
:root[data-style='soft'] .admin-panel {
  border-radius: 20px;
}


/* ============================================================
   2) Aurora 动态极光（柔光渐变 · 缓慢流动 · 光环描边） — aurora
   ============================================================ */
:root[data-theme='light'][data-style='aurora'] {
  --bg-grad: linear-gradient(180deg, #f7f9ff 0%, #eef3ff 100%);
  --surface: rgba(255, 255, 255, 0.78);
  --surface-2: rgba(240, 244, 255, 0.92);
  --text: #172033;
  --text-muted: #5b6884;
  --accent: #4f7cff;
  --on-accent: #ffffff;
  --accent-soft: rgba(79, 124, 255, 0.14);
  --accent-hover: #3b64e6;
  --danger: #d94b57;
  --on-danger: #ffffff;
  --success: #1f9068;
  --on-success: #ffffff;
  --edge: rgba(79, 124, 255, 0.2);
  --edge-weak: rgba(23, 32, 51, 0.07);
  --overlay: rgba(15, 23, 42, 0.35);
  --sh-dark: rgba(37, 71, 148, 0.16);
  --sh-light: rgba(255, 255, 255, 0.85);
  --accent-glow: rgba(79, 124, 255, 0.35);
  --raised-sm: 0 1px 2px rgba(37, 71, 148, 0.08);
  --raised: 0 6px 20px -8px rgba(37, 71, 148, 0.22);
  --raised-lg: 0 14px 36px -14px rgba(37, 71, 148, 0.28);
  --pressed-sm: inset 0 1px 2px rgba(37, 71, 148, 0.14);
  --inset: inset 0 1px 2px rgba(37, 71, 148, 0.08);
  --hover-bg: rgba(79, 124, 255, 0.09);
  --scroll-thumb: rgba(79, 124, 255, 0.3);
  --tr: 220ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

:root[data-theme='dark'][data-style='aurora'] {
  --bg-grad: linear-gradient(180deg, #080b14 0%, #0e1424 100%);
  --surface: rgba(18, 25, 42, 0.72);
  --surface-2: rgba(28, 37, 58, 0.85);
  --text: #e9efff;
  --text-muted: #98a7c6;
  --accent: #7f9dff;
  --on-accent: #0a0d17;
  --accent-soft: rgba(127, 157, 255, 0.16);
  --accent-hover: #9db4ff;
  --danger: #ff8a92;
  --on-danger: #0a0d17;
  --success: #4fd1a5;
  --on-success: #0a0d17;
  --edge: rgba(127, 157, 255, 0.22);
  --edge-weak: rgba(255, 255, 255, 0.08);
  --overlay: rgba(0, 0, 0, 0.6);
  --sh-dark: rgba(0, 0, 0, 0.5);
  --sh-light: rgba(255, 255, 255, 0.04);
  --accent-glow: rgba(127, 157, 255, 0.3);
  --raised-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --raised: 0 8px 24px -10px rgba(0, 0, 0, 0.65);
  --raised-lg: 0 18px 44px -18px rgba(0, 0, 0, 0.75);
  --pressed-sm: inset 0 1px 2px rgba(0, 0, 0, 0.5);
  --inset: inset 0 1px 2px rgba(0, 0, 0, 0.35);
  --hover-bg: rgba(127, 157, 255, 0.12);
  --scroll-thumb: rgba(127, 157, 255, 0.3);
  --tr: 220ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@property --aurora-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

[data-style='aurora'] .style-fx::before,
[data-style='aurora'] .style-fx::after {
  content: '';
  position: absolute;
  inset: -20%;
  pointer-events: none;
  will-change: transform;
}

[data-style='aurora'] .style-fx::before {
  background:
    radial-gradient(46vw 40vw at 22% 16%, rgba(79, 124, 255, 0.2) 0%, rgba(79, 124, 255, 0) 68%),
    radial-gradient(42vw 38vw at 82% 34%, rgba(139, 92, 246, 0.16) 0%, rgba(139, 92, 246, 0) 70%);
  animation: aurora-mesh-a 42s ease-in-out infinite alternate;
}

[data-style='aurora'] .style-fx::after {
  background:
    radial-gradient(40vw 36vw at 48% 94%, rgba(34, 211, 238, 0.13) 0%, rgba(34, 211, 238, 0) 72%),
    radial-gradient(30vw 26vw at 8% 62%, rgba(79, 124, 255, 0.1) 0%, rgba(79, 124, 255, 0) 74%);
  animation: aurora-mesh-b 54s ease-in-out infinite alternate;
}

:root[data-theme='dark'][data-style='aurora'] .style-fx::before {
  background:
    radial-gradient(46vw 40vw at 22% 16%, rgba(79, 124, 255, 0.26) 0%, rgba(79, 124, 255, 0) 68%),
    radial-gradient(42vw 38vw at 82% 34%, rgba(139, 92, 246, 0.22) 0%, rgba(139, 92, 246, 0) 70%);
}

:root[data-theme='dark'][data-style='aurora'] .style-fx::after {
  background:
    radial-gradient(40vw 36vw at 48% 94%, rgba(34, 211, 238, 0.16) 0%, rgba(34, 211, 238, 0) 72%),
    radial-gradient(30vw 26vw at 8% 62%, rgba(79, 124, 255, 0.14) 0%, rgba(79, 124, 255, 0) 74%);
}

@keyframes aurora-mesh-a {
  0% { transform: translate3d(-2%, -1%, 0) scale(1); }
  50% { transform: translate3d(2.5%, 2%, 0) scale(1.08); }
  100% { transform: translate3d(-1.5%, 1.5%, 0) scale(1.03); }
}

@keyframes aurora-mesh-b {
  0% { transform: translate3d(2%, 1.5%, 0) scale(1.04); }
  50% { transform: translate3d(-3%, -1.5%, 0) scale(1); }
  100% { transform: translate3d(1.5%, -1%, 0) scale(1.06); }
}

[data-style='aurora'] .topbar,
[data-style='aurora'] .search-box {
  background: var(--surface);
  border: 1px solid var(--edge);
  box-shadow: var(--raised-sm);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

[data-style='aurora'] .topbar {
  border-radius: 18px;
  padding: 10px 16px;
  position: relative;
}

[data-style='aurora'] .topbar::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), rgba(139, 92, 246, 0.9), transparent);
  background-size: 200% 100%;
  opacity: 0.75;
  animation: aurora-line 8s linear infinite;
  pointer-events: none;
}

@keyframes aurora-line {
  to { background-position: 200% 0; }
}

[data-style='aurora'] .search-box {
  border-radius: 16px;
}

[data-style='aurora'] .search-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), 0 0 22px -8px var(--accent-glow);
}

[data-style='aurora'] .card {
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--edge);
  box-shadow: var(--raised-sm);
  isolation: isolate;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
}

[data-style='aurora'] .card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(300px 230px at var(--px, 50%) var(--py, 0%), rgba(79, 124, 255, 0.26) 0%, rgba(139, 92, 246, 0.16) 42%, rgba(34, 211, 238, 0) 72%);
  opacity: 0;
  transition: opacity 280ms var(--ease);
  pointer-events: none;
}

[data-style='aurora'] .card::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: 2;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--aurora-angle), rgba(79, 124, 255, 0), rgba(79, 124, 255, 0.95), rgba(139, 92, 246, 0.95), rgba(34, 211, 238, 0.9), rgba(79, 124, 255, 0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 240ms var(--ease);
  pointer-events: none;
}

[data-style='aurora'] .card:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: var(--raised-lg), 0 0 26px -10px var(--accent-glow);
}

[data-style='aurora'] .card:hover::before {
  opacity: 1;
  animation: aurora-spin 4s linear infinite;
}

[data-style='aurora'] .card:hover::after {
  opacity: 1;
}

[data-style='aurora'] .card:active {
  transform: translateY(0) scale(0.99);
  box-shadow: var(--pressed-sm);
}

@keyframes aurora-spin {
  to { --aurora-angle: 360deg; }
}

[data-style='aurora'] .card .icon {
  border-radius: 12px;
}

[data-style='aurora'] .group,
[data-style='aurora'] .group-parent {
  background: transparent;
  border: 1px solid var(--edge-weak);
  border-radius: 20px;
  box-shadow: none;
}

[data-style='aurora'] .group:hover,
[data-style='aurora'] .group-parent:hover {
  transform: none;
  box-shadow: none;
}

[data-style='aurora'] .group-parent-head {
  background: transparent;
  border: none;
  box-shadow: none;
  padding-left: 0;
}

[data-style='aurora'] .group-parent-head:hover {
  transform: none;
  box-shadow: none;
}

[data-style='aurora'] .group-parent-head h3 {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--text);
}

[data-style='aurora'] .group-child {
  background: transparent;
  border: none;
  border-left: 2px solid var(--accent);
  border-radius: 14px;
  box-shadow: none;
}

[data-style='aurora'] .clock-time {
  background: linear-gradient(100deg, var(--accent), #a78bfa, #22d3ee, var(--accent));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 22px var(--accent-glow));
  animation: aurora-text 10s linear infinite;
}

@keyframes aurora-text {
  to { background-position: 300% 0; }
}

[data-style='aurora'] .btn-primary,
[data-style='aurora'] .search-box .search-btn {
  background-image: linear-gradient(110deg, var(--accent), #8b5cf6, var(--accent));
  background-size: 200% 100%;
  animation: aurora-sheen 6s linear infinite;
  box-shadow: 0 6px 18px -8px var(--accent-glow);
}

@keyframes aurora-sheen {
  to { background-position: 200% 0; }
}

[data-style='aurora'] .btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--raised), 0 0 18px -8px var(--accent-glow);
}

[data-style='aurora'] .btn:active {
  transform: scale(0.98);
}

[data-style='aurora'] .icon-btn:hover {
  transform: translateY(-1px);
  color: var(--accent);
  box-shadow: 0 0 16px -8px var(--accent-glow);
}

[data-style='aurora'] .nm-item.active .nm-face {
  background: linear-gradient(135deg, var(--accent), #8b5cf6);
  border-color: transparent;
}

[data-style='aurora'] .group-nav,
[data-style='aurora'] .engine-menu,
[data-style='aurora'] .search-history-dropdown,
[data-style='aurora'] .card-context-menu,
[data-style='aurora'] .modal-box,
[data-style='aurora'] .toast {
  border-radius: 16px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

[data-style='aurora'] .card:focus-visible,
[data-style='aurora'] .btn:focus-visible,
[data-style='aurora'] .icon-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-soft);
}

@media (prefers-reduced-motion: reduce) {
  [data-style='aurora'] *,
  [data-style='aurora'] *::before,
  [data-style='aurora'] *::after {
    animation: none !important;
    transition-duration: 1ms !important;
  }
}


/* ============================================================
   3) Blueprint 工程蓝图（深蓝底 · 白线网格 · 等宽字 · 橙色标注） — blueprint
   ============================================================ */
: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;
}

[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;
}

[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; }

[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;
}

[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;
}

[data-style='blueprint'] .topbar,
[data-style='blueprint'] .group-header {
  border-bottom: 1px dashed var(--edge);
}

[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;
}

[data-style='blueprint'] .divider,
[data-style='blueprint'] hr {
  border: none;
  border-top: 1px dashed var(--edge-weak);
  background: none;
}

[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;
}

[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; }

[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);
}

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

[data-style='blueprint'] .modal-box {
  border-radius: 0;
  border: 1px solid var(--edge);
  background: var(--surface);
  box-shadow: var(--raised-lg);
}

[data-style='blueprint'] .admin-panel .btn {
  border-radius: 0;
}

[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);
}

[data-style='blueprint'] .selected,
[data-style='blueprint'] .active-tab,
[data-style='blueprint'] .nav-item.active {
  border-left: 2px solid var(--annotation);
  padding-left: 10px;
}


/* ============================================================
   4) Clarity 清透极简（雾白细线 · 大留白 · 静谧蓝） — clarity
   ============================================================ */
:root[data-theme='light'][data-style='clarity'] {
  --bg-grad: linear-gradient(180deg, #fbfbfd 0%, #f3f4f7 100%);
  --surface: #ffffff;
  --surface-2: #f6f7f9;
  --text: #17181c;
  --text-muted: #6b7280;
  --accent: #2f6bff;
  --on-accent: #ffffff;
  --accent-soft: rgba(47, 107, 255, 0.12);
  --accent-hover: #245ce0;
  --danger: #e5484d;
  --on-danger: #ffffff;
  --success: #12a594;
  --on-success: #ffffff;
  --edge: rgba(17, 24, 39, 0.09);
  --edge-weak: rgba(17, 24, 39, 0.055);
  --overlay: rgba(17, 24, 39, 0.32);
  --sh-dark: rgba(17, 24, 39, 0.08);
  --sh-light: rgba(255, 255, 255, 0.9);
  --accent-glow: transparent;
  --raised-sm: 0 1px 2px rgba(17, 24, 39, 0.05);
  --raised: 0 1px 2px rgba(17, 24, 39, 0.04), 0 10px 28px -14px rgba(17, 24, 39, 0.16);
  --raised-lg: 0 2px 4px rgba(17, 24, 39, 0.04), 0 20px 48px -20px rgba(17, 24, 39, 0.2);
  --pressed-sm: inset 0 1px 2px rgba(17, 24, 39, 0.08);
  --inset: inset 0 1px 2px rgba(17, 24, 39, 0.05);
  --hover-bg: rgba(17, 24, 39, 0.045);
  --scroll-thumb: rgba(17, 24, 39, 0.18);
  --tr: 180ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

:root[data-theme='dark'][data-style='clarity'] {
  --bg-grad: linear-gradient(180deg, #0f1013 0%, #14151a 100%);
  --surface: #17181c;
  --surface-2: #1d1f24;
  --text: #f2f3f5;
  --text-muted: #9aa0aa;
  --accent: #8ba4ff;
  --on-accent: #0d1117;
  --accent-soft: rgba(139, 164, 255, 0.16);
  --accent-hover: #a3b7ff;
  --danger: #ff6b70;
  --on-danger: #0d1117;
  --success: #42c9b4;
  --on-success: #0d1117;
  --edge: rgba(255, 255, 255, 0.09);
  --edge-weak: rgba(255, 255, 255, 0.06);
  --overlay: rgba(0, 0, 0, 0.6);
  --sh-dark: rgba(0, 0, 0, 0.5);
  --sh-light: rgba(255, 255, 255, 0.04);
  --accent-glow: transparent;
  --raised-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --raised: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -16px rgba(0, 0, 0, 0.7);
  --raised-lg: 0 2px 6px rgba(0, 0, 0, 0.45), 0 24px 56px -24px rgba(0, 0, 0, 0.8);
  --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.06);
  --scroll-thumb: rgba(255, 255, 255, 0.18);
  --tr: 180ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-style='clarity'] .style-fx::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -24vw;
  width: 120vw;
  height: 62vw;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(47, 107, 255, 0.1), transparent 72%);
  pointer-events: none;
}

[data-style='clarity'] .style-fx::after { content: none; }

:root[data-theme='dark'][data-style='clarity'] .style-fx::before {
  background: radial-gradient(50% 50% at 50% 50%, rgba(139, 164, 255, 0.13), transparent 70%);
}

[data-style='clarity'] .topbar {
  border-radius: 16px;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--edge);
  box-shadow: var(--raised-sm);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

[data-style='clarity'] .brand img,
[data-style='clarity'] .ann-pill,
[data-style='clarity'] .icon-btn,
[data-style='clarity'] .group-add-btn {
  border-radius: 10px;
  box-shadow: none;
}

[data-style='clarity'] .ann-pill {
  background: var(--surface-2);
  border: 1px solid var(--edge);
}

[data-style='clarity'] .search-box {
  border-radius: 14px;
  padding: 8px 8px 8px 14px;
  background: var(--surface);
  border: 1px solid var(--edge);
  box-shadow: var(--raised-sm);
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}

[data-style='clarity'] .search-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

[data-style='clarity'] .search-box .search-btn {
  border-radius: 10px;
  padding: 8px 20px;
  box-shadow: none;
}

[data-style='clarity'] .search-box .search-btn:hover {
  transform: none;
  background: var(--accent-hover);
  box-shadow: none;
}

[data-style='clarity'] .search-box .search-btn:active {
  transform: scale(0.98);
  box-shadow: none;
}

[data-style='clarity'] .engine-menu,
[data-style='clarity'] .search-history-dropdown,
[data-style='clarity'] .card-context-menu {
  border-radius: 12px;
  box-shadow: var(--raised);
}

[data-style='clarity'] .engine-item {
  border-radius: 8px;
}

[data-style='clarity'] .card {
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--edge);
  box-shadow: var(--raised-sm);
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms var(--ease);
}

[data-style='clarity'] .card:hover {
  transform: translateY(-2px);
  border-color: rgba(47, 107, 255, 0.32);
  box-shadow: var(--raised);
}

[data-style='clarity'] .card:active {
  transform: translateY(0) scale(0.995);
  box-shadow: var(--raised-sm);
}

[data-style='clarity'] .card .icon {
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

[data-style='clarity'] .card.app-card {
  border-radius: 18px;
}

[data-style='clarity'] .card.app-card .icon {
  border-radius: 14px;
}

[data-style='clarity'] .glass {
  border-radius: 20px;
  box-shadow: var(--raised-sm);
}

[data-style='clarity'] .glass:hover {
  transform: none;
  box-shadow: var(--raised);
}

[data-style='clarity'] .glass-strong {
  border-radius: 20px;
}

[data-style='clarity'] .group {
  padding: 18px 20px 20px;
  border-radius: 20px;
  background: transparent;
  border: 1px solid var(--edge);
  box-shadow: none;
}

[data-style='clarity'] .group:hover {
  transform: none;
  box-shadow: none;
}

[data-style='clarity'] .group-parent {
  border-radius: 20px;
  background: transparent;
  border: 1px solid var(--edge);
  box-shadow: none;
}

[data-style='clarity'] .group-parent-head {
  background: transparent;
  border: none;
  box-shadow: none;
}

[data-style='clarity'] .group-parent-head:hover {
  transform: none;
  box-shadow: none;
}

[data-style='clarity'] .group-child {
  border-radius: 14px;
  border: none;
  border-left: 2px solid var(--accent);
  background: transparent;
  box-shadow: none;
}

[data-style='clarity'] .group-parent-head h3 {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--text);
  letter-spacing: -0.01em;
}

[data-style='clarity'] h1,
[data-style='clarity'] h2,
[data-style='clarity'] h3 {
  letter-spacing: -0.01em;
}

[data-style='clarity'] .btn {
  border-radius: 12px;
  border: 1px solid var(--edge);
  box-shadow: none;
  transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease);
}

[data-style='clarity'] .btn:hover {
  transform: none;
  background: var(--surface-2);
  border-color: var(--edge);
  box-shadow: none;
}

[data-style='clarity'] .btn:active {
  transform: scale(0.985);
  box-shadow: none;
}

[data-style='clarity'] .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 1px 2px var(--sh-dark);
}

[data-style='clarity'] .btn-primary:hover {
  transform: none;
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--on-accent);
  box-shadow: 0 1px 2px var(--sh-dark);
}

[data-style='clarity'] .btn-primary:active {
  transform: scale(0.985);
  box-shadow: none;
}

[data-style='clarity'] .input,
[data-style='clarity'] .select,
[data-style='clarity'] .textarea {
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--edge);
  box-shadow: none;
}

[data-style='clarity'] .input:focus,
[data-style='clarity'] .select:focus,
[data-style='clarity'] .textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

[data-style='clarity'] .group-nav {
  border-radius: 14px;
}

[data-style='clarity'] .modal-box,
[data-style='clarity'] .admin-panel {
  border-radius: 20px;
}

[data-style='clarity'] .divider,
[data-style='clarity'] hr {
  height: 1px;
  border: none;
  background: var(--edge-weak);
}

[data-style='clarity'] table th,
[data-style='clarity'] table td {
  border-bottom: 1px solid var(--edge-weak);
}

[data-style='clarity'] .clock-time {
  letter-spacing: 2px;
  text-shadow: none;
}

[data-style='clarity'] :focus-visible {
  border-radius: 10px;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

[data-style='clarity'] .group-parent-head {
  background: transparent;
  border: none;
  box-shadow: none;
  padding-left: 0;
}

[data-style='clarity'] .group-parent-head:hover {
  transform: none;
  box-shadow: none;
}

[data-style='clarity'] .icon-btn:hover {
  transform: none;
  color: var(--accent);
  border-color: var(--accent-soft);
  box-shadow: none;
}

[data-style='clarity'] .icon-btn:active {
  transform: scale(0.98);
  box-shadow: var(--pressed-sm);
}

[data-style='clarity'] .topbar-fab {
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--edge);
  color: var(--text);
  box-shadow: var(--raised-sm);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

[data-style='clarity'] .back-top {
  border-radius: 12px;
  box-shadow: var(--raised-sm);
}

[data-style='clarity'] .back-top:hover {
  transform: none;
  box-shadow: var(--raised);
}

[data-style='clarity'] .back-top:active {
  transform: scale(0.98);
  box-shadow: var(--pressed-sm);
}

[data-style='clarity'] .gn-toggle {
  box-shadow: var(--raised-sm);
}

[data-style='clarity'] .card .lan-badge {
  background: #e7edff;
  color: #245ce0;
}

:root[data-theme='dark'][data-style='clarity'] .card .lan-badge {
  background: rgba(139, 164, 255, 0.22);
  color: #cfdaff;
}

[data-style='clarity'] .engine-btn {
  border-radius: 8px;
  transition: background 180ms var(--ease);
}

[data-style='clarity'] .engine-btn:hover {
  background: var(--hover-bg);
}

[data-style='clarity'] .engine-item.active {
  background: var(--accent-soft);
}

[data-style='clarity'] .card:focus-visible,
[data-style='clarity'] .btn:focus-visible,
[data-style='clarity'] .icon-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-soft);
}

[data-style='clarity'] .group.search-active {
  box-shadow: 0 0 0 2px var(--accent), var(--raised-sm);
}

:root[data-theme='dark'][data-style='clarity'] .card:hover {
  border-color: rgba(139, 164, 255, 0.42);
}

[data-style='clarity'] .toast {
  border-radius: 12px;
  box-shadow: var(--raised);
}


/* ============================================================
   5) Corporate Clean 企业简洁（白卡细边 · 蓝主色 · 焦点环 · 轻浮起） — corporate-clean
   ============================================================ */
:root[data-theme='light'][data-style='corporate-clean'] {
  --bg-grad: #f8fafc;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --bg-soft: #eef2f7;
  --text: #0f172a;
  --text-muted: #64748b;
  --text-secondary: #334155;
  --accent: #2563eb;
  --on-accent: #ffffff;
  --accent-soft: rgba(37, 99, 235, 0.12);
  --accent-hover: #1d4ed8;
  --danger: #dc2626;
  --on-danger: #ffffff;
  --success: #16a34a;
  --on-success: #ffffff;
  --edge: #e2e8f0;
  --edge-weak: #eef2f6;
  --border: #cbd5e1;
  --overlay: rgba(15, 23, 42, 0.4);
  --sh-dark: rgba(15, 23, 42, 0.08);
  --sh-light: rgba(255, 255, 255, 0.9);
  --accent-glow: rgba(37, 99, 235, 0.18);
  --raised-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --raised: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --raised-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
  --pressed-sm: inset 0 1px 2px rgba(15, 23, 42, 0.12);
  --inset: inset 0 1px 2px rgba(15, 23, 42, 0.06);
  --hover-bg: #f1f5f9;
  --scroll-thumb: rgba(100, 116, 139, 0.35);
  --tr: 200ms;
  --ease: ease-out;
}

:root[data-theme='dark'][data-style='corporate-clean'] {
  --bg-grad: #0b1220;
  --surface: #111c30;
  --surface-2: #17233a;
  --bg-soft: #0e1728;
  --text: #e8eef8;
  --text-muted: #93a4bd;
  --text-secondary: #c3d0e3;
  --accent: #60a5fa;
  --on-accent: #08111f;
  --accent-soft: rgba(96, 165, 250, 0.16);
  --accent-hover: #93c5fd;
  --danger: #f87171;
  --on-danger: #08111f;
  --success: #4ade80;
  --on-success: #08111f;
  --edge: #24334b;
  --edge-weak: rgba(255, 255, 255, 0.06);
  --border: #334765;
  --overlay: rgba(0, 0, 0, 0.62);
  --sh-dark: rgba(0, 0, 0, 0.5);
  --sh-light: rgba(255, 255, 255, 0.04);
  --accent-glow: rgba(96, 165, 250, 0.22);
  --raised-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --raised: 0 4px 8px rgba(0, 0, 0, 0.5);
  --raised-lg: 0 12px 24px rgba(0, 0, 0, 0.55);
  --pressed-sm: inset 0 1px 2px rgba(0, 0, 0, 0.5);
  --inset: inset 0 1px 2px rgba(0, 0, 0, 0.35);
  --hover-bg: rgba(96, 165, 250, 0.1);
  --scroll-thumb: rgba(147, 164, 189, 0.35);
  --tr: 200ms;
  --ease: ease-out;
}

[data-style='corporate-clean'] .style-fx::before,
[data-style='corporate-clean'] .style-fx::after { content: none; }

[data-style='corporate-clean'] body { background: var(--bg-grad); }

[data-style='corporate-clean'] .topbar { border-radius: 12px; background: var(--surface); border: 1px solid var(--edge); box-shadow: var(--raised-sm); backdrop-filter: none; -webkit-backdrop-filter: none; }

[data-style='corporate-clean'] .topbar-fab { border-radius: 10px; background: var(--surface); border: 1px solid var(--edge); color: var(--text); box-shadow: var(--raised-sm); backdrop-filter: none; -webkit-backdrop-filter: none; }

[data-style='corporate-clean'] .icon-btn { border-radius: 8px; background: var(--surface); border: 1px solid var(--edge); color: var(--text-secondary); box-shadow: var(--raised-sm); transition: transform 200ms ease-out, box-shadow 200ms ease-out, border-color 200ms ease-out, color 200ms ease-out, background-color 200ms ease-out; }

[data-style='corporate-clean'] .icon-btn:hover { transform: translateY(-1px); background: var(--surface-2); color: var(--accent); border-color: #bfdbfe; box-shadow: var(--raised); }

[data-style='corporate-clean'] .icon-btn:active { transform: scale(0.98); box-shadow: var(--raised-sm); }

[data-theme='dark'][data-style='corporate-clean'] .icon-btn:hover { border-color: #3b5580; }

[data-style='corporate-clean'] .search-box { border-radius: 12px; background: var(--surface); border: 1px solid var(--edge); box-shadow: var(--raised-sm); backdrop-filter: none; -webkit-backdrop-filter: none; transition: border-color 200ms ease-out, box-shadow 200ms ease-out; }

[data-style='corporate-clean'] .search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

[data-style='corporate-clean'] .search-box .search-btn { border-radius: 8px; font-weight: 600; box-shadow: var(--raised-sm); transition: transform 200ms ease-out, box-shadow 200ms ease-out, background-color 200ms ease-out; }

[data-style='corporate-clean'] .search-box .search-btn:hover { transform: translateY(-1px); box-shadow: var(--raised); opacity: 1; }

[data-style='corporate-clean'] .search-box .search-btn:active { transform: scale(0.98); box-shadow: var(--raised-sm); }

[data-style='corporate-clean'] .card { border-radius: 12px; background: var(--surface); border: 1px solid var(--edge); box-shadow: var(--raised-sm); transition: transform 200ms ease-out, box-shadow 200ms ease-out, border-color 200ms ease-out; }

[data-style='corporate-clean'] .card:hover { transform: translateY(-2px); border-color: #cbd5e1; box-shadow: var(--raised); }

[data-style='corporate-clean'] .card:active { transform: scale(0.98); box-shadow: var(--raised-sm); }

[data-theme='dark'][data-style='corporate-clean'] .card:hover { border-color: #334765; }

[data-style='corporate-clean'] .card .icon { border-radius: 10px; background: var(--accent-soft); color: var(--accent); box-shadow: none; transition: background-color 200ms ease-out, color 200ms ease-out, transform 200ms ease-out; }

[data-style='corporate-clean'] .card:hover .icon { background: var(--accent); color: var(--on-accent); transform: scale(1.08); }

[data-style='corporate-clean'] .group,
[data-style='corporate-clean'] .group-parent { background: transparent; border: none; border-radius: 0; box-shadow: none; }

[data-style='corporate-clean'] .group:hover,
[data-style='corporate-clean'] .group-parent:hover { transform: none; box-shadow: none; }

[data-style='corporate-clean'] .group-head { padding-bottom: 10px; border-bottom: 1px solid var(--edge); }

[data-style='corporate-clean'] .group-head h2 { letter-spacing: -0.01em; font-weight: 600; }

[data-style='corporate-clean'] .group-parent-head { background: transparent; border: none; box-shadow: none; padding-left: 0; }

[data-style='corporate-clean'] .group-parent-head:hover { transform: none; box-shadow: none; }

[data-style='corporate-clean'] .group-parent-head h3 { background: none; -webkit-text-fill-color: currentColor; color: var(--text); font-weight: 600; letter-spacing: -0.01em; }

[data-style='corporate-clean'] .group-child { background: transparent; border: none; border-radius: 0; padding-left: 0; padding-right: 0; box-shadow: none; }

[data-style='corporate-clean'] .group-child + .group-child { border-top: 1px solid var(--edge-weak); }

[data-style='corporate-clean'] .group-add-btn { border-radius: 8px; border: 1px solid var(--edge); background: var(--surface); color: var(--accent); box-shadow: none; transition: background-color 200ms ease-out, border-color 200ms ease-out, color 200ms ease-out; }

[data-style='corporate-clean'] .group-add-btn:hover { transform: none; background: var(--surface-2); border-color: var(--accent); color: var(--accent); opacity: 1; }

[data-style='corporate-clean'] .btn { border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 500; box-shadow: var(--raised-sm); transition: transform 200ms ease-out, box-shadow 200ms ease-out, border-color 200ms ease-out, background-color 200ms ease-out, color 200ms ease-out; }

[data-style='corporate-clean'] .btn:hover { transform: translateY(-2px); background: var(--surface-2); border-color: #cbd5e1; box-shadow: var(--raised); opacity: 1; }

[data-style='corporate-clean'] .btn:active { transform: scale(0.98); box-shadow: var(--raised-sm); }

[data-style='corporate-clean'] .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: var(--raised-sm); }

[data-style='corporate-clean'] .btn-primary:hover { transform: translateY(-2px); background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); box-shadow: var(--raised); }

[data-style='corporate-clean'] .btn-primary:active { transform: scale(0.98); box-shadow: var(--raised-sm); }

[data-style='corporate-clean'] .btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

[data-style='corporate-clean'] .input,
[data-style='corporate-clean'] .select,
[data-style='corporate-clean'] .textarea { border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); box-shadow: none; transition: border-color 200ms ease-out, box-shadow 200ms ease-out; }

[data-style='corporate-clean'] .input:focus,
[data-style='corporate-clean'] .select:focus,
[data-style='corporate-clean'] .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

[data-style='corporate-clean'] .badge { border-radius: 6px; background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }

[data-style='corporate-clean'] .lan-badge { border-radius: 6px; background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }

[data-style='corporate-clean'] .hidden-badge { border-radius: 6px; background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }

[data-theme='dark'][data-style='corporate-clean'] .badge { background: #17233a; color: #c3d0e3; border-color: #24334b; }

[data-theme='dark'][data-style='corporate-clean'] .lan-badge { background: rgba(96, 165, 250, 0.16); color: #bfdbfe; border-color: rgba(96, 165, 250, 0.35); }

[data-theme='dark'][data-style='corporate-clean'] .hidden-badge { background: rgba(251, 191, 36, 0.16); color: #fcd34d; border-color: rgba(251, 191, 36, 0.3); }

[data-style='corporate-clean'] .clock-time { color: var(--text); letter-spacing: -0.02em; text-shadow: none; font-variant-numeric: tabular-nums; }

[data-style='corporate-clean'] .group-nav,
[data-style='corporate-clean'] .search-history-dropdown,
[data-style='corporate-clean'] .card-context-menu,
[data-style='corporate-clean'] .engine-menu,
[data-style='corporate-clean'] .modal-box,
[data-style='corporate-clean'] .toast { border-radius: 12px; border: 1px solid var(--edge); background: var(--surface); box-shadow: var(--raised-lg); backdrop-filter: none; -webkit-backdrop-filter: none; }

[data-style='corporate-clean'] .nm-face { border-radius: 10px; border: 1px solid var(--edge); background: var(--surface); box-shadow: none; }

[data-style='corporate-clean'] .nm-item.active .nm-face { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

[data-style='corporate-clean'] table tbody tr { transition: background-color 200ms ease-out; }

[data-style='corporate-clean'] table tbody tr:hover { background: var(--surface-2); }

[data-style='corporate-clean'] table th,
[data-style='corporate-clean'] table td { border-bottom: 1px solid var(--edge); }

[data-style='corporate-clean'] :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }

[data-style='corporate-clean'] ::selection { background: var(--accent-soft); color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  [data-style='corporate-clean'] *,
  [data-style='corporate-clean'] *::before,
  [data-style='corporate-clean'] *::after {
    animation: none !important;
    transition-duration: 1ms !important;
  }
}


/* ============================================================
   6) IRIS 光圈（深空 HUD · 氙蓝酸绿 · 漂移网格） — iris
   ============================================================ */
:root[data-theme='light'][data-style='iris'] {
  --bg-grad: linear-gradient(180deg, #e9eef3 0%, #dfe5ec 100%);
  --surface: rgba(255, 255, 255, 0.62);
  --surface-2: rgba(255, 255, 255, 0.82);
  --text: #0a1118;
  --text-muted: #55616e;
  --accent: #005f73;
  --on-accent: #ffffff;
  --accent-soft: rgba(0, 124, 150, 0.14);
  --accent-hover: #004b5c;
  --danger: #c02a48;
  --on-danger: #ffffff;
  --success: #557500;
  --on-success: #ffffff;
  --edge: rgba(8, 20, 32, 0.14);
  --edge-weak: rgba(8, 20, 32, 0.08);
  --overlay: rgba(8, 20, 32, 0.35);
  --sh-dark: rgba(8, 20, 32, 0.16);
  --sh-light: rgba(255, 255, 255, 0.8);
  --accent-glow: rgba(0, 124, 150, 0.28);
  --raised-sm: 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 8px -4px rgba(8, 20, 32, 0.18);
  --raised: 0 10px 30px -18px rgba(8, 20, 32, 0.28);
  --raised-lg: 0 22px 50px -24px rgba(8, 20, 32, 0.32);
  --pressed-sm: inset 0 1px 2px rgba(8, 20, 32, 0.14);
  --inset: inset 0 1px 2px rgba(8, 20, 32, 0.1);
  --hover-bg: rgba(0, 124, 150, 0.08);
  --scroll-thumb: rgba(0, 95, 115, 0.35);
  --field-a: rgba(0, 124, 150, 0.13);
  --field-b: rgba(120, 160, 0, 0.08);
  --field-a-fade: rgba(0, 124, 150, 0);
  --field-b-fade: rgba(120, 160, 0, 0);
  --accent-fade: rgba(0, 124, 150, 0);
  --grid-color: rgba(8, 20, 32, 0.05);
  --acid: #557500;
  --flare: #c02a48;
  --sp-mx: 72%;
  --sp-my: 22%;
  --sp-mx2: 72%;
  --sp-my2: 22%;
  --tr: 240ms;
  --ease: cubic-bezier(0.22, 0.8, 0.24, 1);
}

:root[data-theme='dark'][data-style='iris'] {
  --bg-grad: linear-gradient(180deg, #080b10 0%, #05070a 100%);
  --surface: rgba(17, 22, 30, 0.56);
  --surface-2: rgba(22, 28, 38, 0.78);
  --text: #e9eef5;
  --text-muted: #9aa6b6;
  --accent: #59e6ff;
  --on-accent: #04131a;
  --accent-soft: rgba(89, 230, 255, 0.12);
  --accent-hover: #7decff;
  --danger: #ff5f7e;
  --on-danger: #12060b;
  --success: #c6f24a;
  --on-success: #12200a;
  --edge: rgba(255, 255, 255, 0.085);
  --edge-weak: rgba(255, 255, 255, 0.05);
  --overlay: rgba(0, 0, 0, 0.6);
  --sh-dark: rgba(0, 0, 0, 0.55);
  --sh-light: rgba(255, 255, 255, 0.04);
  --accent-glow: rgba(89, 230, 255, 0.3);
  --raised-sm: 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 16px -10px rgba(0, 0, 0, 0.8);
  --raised: 0 18px 44px -26px rgba(0, 0, 0, 0.9);
  --raised-lg: 0 30px 70px -40px #000000;
  --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(89, 230, 255, 0.08);
  --scroll-thumb: rgba(89, 230, 255, 0.3);
  --field-a: rgba(89, 230, 255, 0.11);
  --field-b: rgba(198, 242, 74, 0.055);
  --field-a-fade: rgba(89, 230, 255, 0);
  --field-b-fade: rgba(198, 242, 74, 0);
  --accent-fade: rgba(89, 230, 255, 0);
  --grid-color: rgba(255, 255, 255, 0.035);
  --acid: #c6f24a;
  --flare: #ff5f7e;
  --sp-mx: 72%;
  --sp-my: 22%;
  --sp-mx2: 72%;
  --sp-my2: 22%;
  --tr: 240ms;
  --ease: cubic-bezier(0.22, 0.8, 0.24, 1);
}

[data-style='iris'] .style-fx::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(66vw 54vw at var(--sp-mx2, 72%) var(--sp-my2, 22%), var(--field-a) 0%, var(--field-a-fade) 76%),
    radial-gradient(32vw 26vw at var(--sp-mx, 72%) var(--sp-my, 22%), var(--accent-soft) 0%, var(--accent-fade) 82%),
    radial-gradient(44vw 36vw at 12% 86%, var(--field-b) 0%, var(--field-b-fade) 70%);
  animation: iris-breathe 14s ease-in-out infinite;
  will-change: opacity;
  pointer-events: none;
}

@keyframes iris-breathe {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

[data-style='iris'] .style-fx::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 78%);
  pointer-events: none;
}

[data-style='iris'] .topbar {
  border-radius: 2px;
  padding: 10px 18px;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-bottom-color: var(--accent-glow);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

[data-style='iris'] .brand .title {
  font-family: "Bahnschrift", "DIN Alternate", "Segoe UI Variable Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

[data-style='iris'] .brand img,
[data-style='iris'] .icon-btn,
[data-style='iris'] #themeBtn,
[data-style='iris'] #lanBtn,
[data-style='iris'] .ann-pill,
[data-style='iris'] .group-add-btn,
[data-style='iris'] .back-top,
[data-style='iris'] .topbar-fab {
  border-radius: 2px;
  border: 1px solid var(--edge);
  background: transparent;
  box-shadow: none;
}

[data-style='iris'] .icon-btn {
  transition: border-color 240ms var(--ease), color 240ms var(--ease), background 240ms var(--ease);
}

[data-style='iris'] .icon-btn:hover {
  transform: none;
  color: var(--accent);
  border-color: var(--accent);
  background: var(--hover-bg);
  box-shadow: 0 0 14px -6px var(--accent-glow);
}

[data-style='iris'] .icon-btn:active {
  transform: scale(0.98);
}

[data-style='iris'] .ann-pill {
  color: var(--text-muted);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
}

[data-style='iris'] .search-box {
  border-radius: 2px;
  background: var(--surface);
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: border-color 240ms var(--ease), box-shadow 240ms var(--ease);
}

[data-style='iris'] .search-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-soft), 0 0 24px -10px var(--accent-glow);
}

[data-style='iris'] .search-box .search-btn {
  border-radius: 2px;
  padding: 9px 22px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 8px 22px -12px var(--accent-glow);
  transition: box-shadow 240ms var(--ease), transform 240ms var(--ease), background 240ms var(--ease);
}

[data-style='iris'] .search-box .search-btn:hover {
  transform: none;
  background: var(--accent-hover);
  box-shadow: 0 12px 30px -12px var(--accent-glow), 0 0 0 1px var(--accent);
}

[data-style='iris'] .search-box .search-btn:active {
  transform: scale(0.98);
}

[data-style='iris'] .engine-menu,
[data-style='iris'] .search-history-dropdown,
[data-style='iris'] .card-context-menu,
[data-style='iris'] .modal-box,
[data-style='iris'] .group-nav,
[data-style='iris'] .toast {
  border-radius: 2px;
  background: var(--surface-2);
  border: 1px solid var(--edge);
  box-shadow: var(--raised);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}

[data-style='iris'] .engine-item {
  border-radius: 2px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12.5px;
  letter-spacing: 0.04em;
}

[data-style='iris'] .engine-item.active {
  background: var(--accent-soft);
  color: var(--accent);
}

[data-style='iris'] .card {
  border-radius: 2px;
  background: var(--surface);
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  isolation: isolate;
  transition: border-color 300ms var(--ease), transform 350ms var(--ease), box-shadow 350ms var(--ease);
}

[data-style='iris'] .card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(280px 220px at var(--px, 50%) var(--py, 0%), var(--accent-soft) 0%, var(--accent-fade) 74%);
  opacity: 0;
  transition: opacity 320ms var(--ease);
  pointer-events: none;
}

[data-style='iris'] .card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image:
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent));
  background-size: 10px 1px, 1px 10px, 10px 1px, 1px 10px;
  background-position: left 5px top 5px, left 5px top 5px, right 5px bottom 5px, right 5px bottom 5px;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 300ms var(--ease);
  pointer-events: none;
}

[data-style='iris'] .card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 18px 44px -26px var(--accent-glow), 0 0 22px -12px var(--accent-glow);
}

[data-style='iris'] .card:hover::before {
  opacity: 1;
}

[data-style='iris'] .card:hover::after {
  opacity: 0.85;
}

[data-style='iris'] .card:active {
  transform: translateY(0) scale(0.995);
}

[data-style='iris'] .card .icon {
  border-radius: 2px;
  box-shadow: 0 0 20px -8px var(--accent-glow);
}

[data-style='iris'] .card.app-card {
  border-radius: 2px;
}

[data-style='iris'] .card.app-card .icon {
  border-radius: 2px;
}

[data-style='iris'] .group,
[data-style='iris'] .group-parent {
  background: transparent;
  border: 1px solid var(--edge-weak);
  border-radius: 2px;
  box-shadow: none;
}

[data-style='iris'] .group:hover,
[data-style='iris'] .group-parent:hover {
  transform: none;
  box-shadow: none;
}

[data-style='iris'] .group-head h2::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 2px;
  margin-right: 10px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
  vertical-align: middle;
}

[data-style='iris'] .group-head h2 {
  font-family: "Bahnschrift", "DIN Alternate", "Segoe UI Variable Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0.03em;
}

[data-style='iris'] .group-parent-head {
  background: transparent;
  border: none;
  box-shadow: none;
  padding-left: 0;
}

[data-style='iris'] .group-parent-head:hover {
  transform: none;
  box-shadow: none;
}

[data-style='iris'] .group-parent-head h3 {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--accent);
  font-family: "Bahnschrift", "DIN Alternate", "Segoe UI Variable Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0.04em;
}

[data-style='iris'] .group-child {
  background: transparent;
  border: none;
  border-left: 2px solid var(--accent);
  border-radius: 2px;
  box-shadow: none;
}

[data-style='iris'] .btn {
  border-radius: 2px;
  border: 1px solid var(--edge);
  background: transparent;
  color: var(--text);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  box-shadow: none;
  transition: border-color 240ms var(--ease), color 240ms var(--ease), background 240ms var(--ease);
}

[data-style='iris'] .btn:hover {
  transform: none;
  color: var(--accent);
  border-color: var(--accent);
  background: var(--hover-bg);
  box-shadow: none;
}

[data-style='iris'] .btn:active {
  transform: scale(0.98);
}

[data-style='iris'] .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 8px 26px -14px var(--accent-glow);
}

[data-style='iris'] .btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--on-accent);
  box-shadow: 0 12px 32px -12px var(--accent-glow), 0 0 0 1px var(--accent);
}

[data-style='iris'] .btn-primary:active {
  transform: scale(0.98);
  box-shadow: 0 4px 14px -10px var(--accent-glow);
}

[data-style='iris'] .input,
[data-style='iris'] .select,
[data-style='iris'] .textarea {
  border-radius: 2px;
  background: var(--surface);
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 240ms var(--ease), box-shadow 240ms var(--ease);
}

[data-style='iris'] .input:focus,
[data-style='iris'] .select:focus,
[data-style='iris'] .textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-soft), 0 0 20px -10px var(--accent-glow);
}

[data-style='iris'] .input::placeholder,
[data-style='iris'] .textarea::placeholder {
  color: var(--text-muted);
}

[data-style='iris'] .lan-badge,
[data-style='iris'] .hidden-badge,
[data-style='iris'] .badge {
  border-radius: 2px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  padding: 1px 7px;
}

[data-style='iris'] .lan-badge {
  background: var(--accent-soft);
  color: var(--accent);
}

[data-style='iris'] .hidden-badge {
  background: color-mix(in srgb, var(--acid) 14%, transparent);
  color: var(--acid);
  border: 1px solid color-mix(in srgb, var(--acid) 40%, transparent);
}

[data-style='iris'] .badge {
  background: color-mix(in srgb, var(--flare) 12%, transparent);
  color: var(--flare);
  border: 1px solid color-mix(in srgb, var(--flare) 36%, transparent);
}

[data-style='iris'] .clock-time {
  font-family: "Bahnschrift", "DIN Alternate", "Segoe UI Variable Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 3px;
  text-shadow: 0 0 32px var(--accent-glow);
}

[data-style='iris'] .clock-date,
[data-style='iris'] .weather .w-sub {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  letter-spacing: 0.08em;
}

[data-style='iris'] .weather .w-temp {
  text-shadow: 0 0 22px var(--accent-glow);
}

[data-style='iris'] .nm-face,
[data-style='iris'] .gn-toggle {
  border-radius: 2px;
  border: 1px solid var(--edge);
  background: var(--surface);
  box-shadow: none;
}

[data-style='iris'] .nm-item.active .nm-face {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 0 18px -6px var(--accent-glow);
}

[data-style='iris'] .divider,
[data-style='iris'] hr {
  height: 1px;
  border: none;
  background: var(--edge-weak);
}

[data-style='iris'] table th,
[data-style='iris'] table td {
  border-bottom: 1px solid var(--edge-weak);
}

[data-style='iris'] table th {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

[data-style='iris'] :focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-style='iris'] *,
  [data-style='iris'] *::before,
  [data-style='iris'] *::after {
    animation: none !important;
    transition-duration: 1ms !important;
  }
}


/* ============================================================
   7) Liquid Glass 液态玻璃（默认 · 磨砂透光 · 流动光斑 · 仅浅色） — liquid-glass
   ============================================================ */
:root[data-theme='light'][data-style='liquid-glass'] {
  --bg-grad: linear-gradient(140deg, #eef3ff 0%, #f7f1ff 36%, #e9fbf6 68%, #fff3ea 100%);
  --surface: rgba(255, 255, 255, 0.46);
  --surface-2: rgba(255, 255, 255, 0.62);
  --bg-soft: rgba(255, 255, 255, 0.3);
  --text: #202733;
  --text-muted: #47525f;
  --text-secondary: #333d4b;
  --accent: #4f6bed;
  --on-accent: #ffffff;
  --accent-soft: rgba(79, 107, 237, 0.14);
  --accent-hover: #3f59d6;
  --danger: #d9534f;
  --on-danger: #ffffff;
  --success: #2f9e78;
  --on-success: #ffffff;
  --edge: rgba(255, 255, 255, 0.75);
  --edge-weak: rgba(255, 255, 255, 0.5);
  --border: rgba(255, 255, 255, 0.8);
  --overlay: rgba(32, 39, 51, 0.32);
  --sh-dark: rgba(43, 58, 120, 0.18);
  --sh-light: rgba(255, 255, 255, 0.9);
  --accent-glow: rgba(79, 107, 237, 0.22);
  --raised-sm: 0 6px 18px -12px rgba(43, 58, 120, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --raised: 0 12px 32px -16px rgba(43, 58, 120, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --raised-lg: 0 24px 54px -24px rgba(43, 58, 120, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --pressed-sm: inset 0 2px 6px rgba(43, 58, 120, 0.18);
  --inset: inset 0 2px 6px rgba(43, 58, 120, 0.12);
  --hover-bg: rgba(255, 255, 255, 0.66);
  --scroll-thumb: rgba(79, 107, 237, 0.28);
  --tr: 240ms;
  --ease: cubic-bezier(0.22, 0.9, 0.28, 1);
}

:root[data-theme='dark'][data-style='liquid-glass'] {
  --bg-grad: linear-gradient(140deg, #eef3ff 0%, #f7f1ff 36%, #e9fbf6 68%, #fff3ea 100%);
  --surface: rgba(255, 255, 255, 0.46);
  --surface-2: rgba(255, 255, 255, 0.62);
  --bg-soft: rgba(255, 255, 255, 0.3);
  --text: #202733;
  --text-muted: #47525f;
  --text-secondary: #333d4b;
  --accent: #4f6bed;
  --on-accent: #ffffff;
  --accent-soft: rgba(79, 107, 237, 0.14);
  --accent-hover: #3f59d6;
  --danger: #d9534f;
  --on-danger: #ffffff;
  --success: #2f9e78;
  --on-success: #ffffff;
  --edge: rgba(255, 255, 255, 0.75);
  --edge-weak: rgba(255, 255, 255, 0.5);
  --border: rgba(255, 255, 255, 0.8);
  --overlay: rgba(32, 39, 51, 0.32);
  --sh-dark: rgba(43, 58, 120, 0.18);
  --sh-light: rgba(255, 255, 255, 0.9);
  --accent-glow: rgba(79, 107, 237, 0.22);
  --raised-sm: 0 6px 18px -12px rgba(43, 58, 120, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --raised: 0 12px 32px -16px rgba(43, 58, 120, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --raised-lg: 0 24px 54px -24px rgba(43, 58, 120, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --pressed-sm: inset 0 2px 6px rgba(43, 58, 120, 0.18);
  --inset: inset 0 2px 6px rgba(43, 58, 120, 0.12);
  --hover-bg: rgba(255, 255, 255, 0.66);
  --scroll-thumb: rgba(79, 107, 237, 0.28);
  --tr: 240ms;
  --ease: cubic-bezier(0.22, 0.9, 0.28, 1);
}

:root[data-theme='dark'][data-style='liquid-glass'] { color-scheme: light; }

[data-style='liquid-glass'] body { background: var(--bg-grad); background-attachment: fixed; }

[data-style='liquid-glass'] .admin-header,
[data-style='liquid-glass'] .admin-tabs { background: rgba(255, 255, 255, 0.66); border: 1px solid var(--border); box-shadow: var(--raised-sm); backdrop-filter: blur(20px) saturate(170%); -webkit-backdrop-filter: blur(20px) saturate(170%); }

[data-style='liquid-glass'] .admin-header:hover,
[data-style='liquid-glass'] .admin-tabs:hover { transform: none; }

[data-style='liquid-glass'] .admin-header .brand { color: var(--text); }

[data-style='liquid-glass'] .admin-header #whoami { color: var(--text-secondary) !important; }

[data-style='liquid-glass'] .admin-header .btn { color: var(--text); }

[data-style='liquid-glass'] .admin-tabs .tab { color: var(--text-secondary); }

[data-style='liquid-glass'] .admin-tabs .tab:hover { color: var(--text); background: rgba(255, 255, 255, 0.7); }

[data-style='liquid-glass'] .admin-tabs .tab.active { background: rgba(255, 255, 255, 0.92); color: var(--accent); box-shadow: var(--raised-sm); }

[data-style='liquid-glass'] .style-fx::before,
[data-style='liquid-glass'] .style-fx::after { content: ''; position: absolute; border-radius: 50%; filter: blur(70px) saturate(120%); will-change: transform; pointer-events: none; }

[data-style='liquid-glass'] .style-fx::before { width: 62vw; height: 62vw; left: -14vw; top: -16vw; background: radial-gradient(circle at 40% 40%, rgba(150, 168, 255, 0.72), rgba(150, 168, 255, 0) 68%), radial-gradient(circle at 70% 62%, rgba(167, 240, 228, 0.58), rgba(167, 240, 228, 0) 66%); animation: lg-blob-a 28s ease-in-out infinite alternate; }

[data-style='liquid-glass'] .style-fx::after { width: 58vw; height: 58vw; right: -16vw; bottom: -18vw; background: radial-gradient(circle at 50% 45%, rgba(255, 209, 232, 0.62), rgba(255, 209, 232, 0) 66%), radial-gradient(circle at 34% 66%, rgba(255, 217, 194, 0.58), rgba(255, 217, 194, 0) 68%); animation: lg-blob-b 34s ease-in-out infinite alternate; }

@keyframes lg-blob-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(6vw, 5vw, 0) scale(1.12); }
}

@keyframes lg-blob-b {
  from { transform: translate3d(0, 0, 0) scale(1.05); }
  to { transform: translate3d(-7vw, -5vw, 0) scale(0.94); }
}

[data-style='liquid-glass'] .topbar { border-radius: 20px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.5); box-shadow: var(--raised); backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%); }

[data-style='liquid-glass'] .topbar-fab { border-radius: 14px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.58); color: var(--text); box-shadow: var(--raised-sm); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); }

[data-style='liquid-glass'] .icon-btn { border-radius: 12px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.45); color: var(--text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); transition: transform 240ms var(--ease), background-color 240ms var(--ease), box-shadow 240ms var(--ease), color 240ms var(--ease); }

[data-style='liquid-glass'] .icon-btn:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.72); color: var(--accent); box-shadow: var(--raised-sm); }

[data-style='liquid-glass'] .icon-btn:active { transform: scale(0.98); }

[data-style='liquid-glass'] .search-box { border-radius: 18px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.52); box-shadow: var(--raised-sm); backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%); transition: box-shadow 240ms var(--ease), background-color 240ms var(--ease); }

[data-style='liquid-glass'] .search-box:focus-within { background: rgba(255, 255, 255, 0.68); box-shadow: 0 0 0 3px var(--accent-soft), var(--raised); }

[data-style='liquid-glass'] .search-box .search-btn { border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.55); background: linear-gradient(135deg, rgba(79, 107, 237, 0.92), rgba(120, 132, 255, 0.88)); color: var(--on-accent); box-shadow: 0 8px 20px -10px rgba(79, 107, 237, 0.6); transition: transform 240ms var(--ease), box-shadow 240ms var(--ease); }

[data-style='liquid-glass'] .search-box .search-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -10px rgba(79, 107, 237, 0.7); opacity: 1; }

[data-style='liquid-glass'] .search-box .search-btn:active { transform: scale(0.98); }

[data-style='liquid-glass'] .card { border-radius: 22px; border: 1px solid rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.44); backdrop-filter: blur(18px) saturate(165%); -webkit-backdrop-filter: blur(18px) saturate(165%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 1px 0 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(43, 58, 120, 0.07), inset -1px 0 0 rgba(43, 58, 120, 0.04), 0 2px 4px -1px rgba(43, 58, 120, 0.12), 0 10px 24px -14px rgba(43, 58, 120, 0.45), 0 24px 48px -28px rgba(43, 58, 120, 0.4); transition: transform 240ms var(--ease), box-shadow 240ms var(--ease), background-color 240ms var(--ease); }

[data-style='liquid-glass'] .card:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.62); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(43, 58, 120, 0.06), 0 6px 14px -6px rgba(43, 58, 120, 0.16), 0 22px 44px -22px rgba(43, 58, 120, 0.5), 0 36px 64px -36px rgba(43, 58, 120, 0.38); }

[data-style='liquid-glass'] .card:active { transform: scale(0.99) translateY(0); box-shadow: inset 0 2px 6px rgba(43, 58, 120, 0.16), 0 2px 6px -2px rgba(43, 58, 120, 0.18); }

[data-style='liquid-glass'] .card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 38%); opacity: 0.6; pointer-events: none; z-index: 1; }

[data-style='liquid-glass'] .card .info .t { font-weight: 600; letter-spacing: -0.01em; }

[data-style='liquid-glass'] .card .icon { border-radius: 16px; background: rgba(255, 255, 255, 0.55); color: var(--accent); border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(43, 58, 120, 0.06), 0 2px 6px -4px rgba(43, 58, 120, 0.4); transition: background-color 240ms var(--ease), color 240ms var(--ease), transform 240ms var(--ease), box-shadow 240ms var(--ease); }

[data-style='liquid-glass'] .card:hover .icon { background: rgba(255, 255, 255, 0.82); transform: scale(1.04); }

[data-style='liquid-glass'] .card-bg { display: block; }

[data-style='liquid-glass'] .card-bg::before { opacity: calc(0.3 * var(--card-opacity, 1) * var(--card-opacity, 1)); animation: bg-gradient-shift 8s ease infinite; transition: opacity 240ms var(--ease); }

[data-style='liquid-glass'] .ntab-btn { border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.34); background: linear-gradient(180deg, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0.3) 52%, rgba(244, 248, 255, 0.38) 100%); color: var(--text-secondary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(43, 58, 120, 0.1), 0 1px 1px rgba(43, 58, 120, 0.1), 0 6px 14px -10px rgba(43, 58, 120, 0.42); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); transition: transform 240ms var(--ease), background-color 240ms var(--ease), border-color 240ms var(--ease), box-shadow 240ms var(--ease); }

[data-style='liquid-glass'] .ntab-btn:hover { border-color: rgba(255, 255, 255, 0.55); background: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.52) 100%); color: var(--text); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 -1px 0 rgba(43, 58, 120, 0.1), 0 4px 10px -6px rgba(43, 58, 120, 0.28), 0 10px 20px -14px rgba(43, 58, 120, 0.5); }

[data-style='liquid-glass'] .ntab-btn:active { transform: translateY(0) scale(0.985); box-shadow: inset 0 2px 5px rgba(43, 58, 120, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 2px rgba(43, 58, 120, 0.1); }

[data-style='liquid-glass'] .ntab-btn.active { border-color: rgba(255, 255, 255, 0.42); background: linear-gradient(180deg, rgba(112, 136, 255, 0.98) 0%, rgba(79, 107, 237, 0.96) 58%, rgba(63, 89, 214, 1) 100%); color: var(--on-accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(31, 46, 120, 0.35), 0 3px 8px -3px rgba(43, 58, 120, 0.28), 0 12px 24px -14px rgba(79, 107, 237, 0.7); }

[data-style='liquid-glass'] .ntab-btn.ntab-hidden:not(.active) { opacity: 0.55; }

[data-style='liquid-glass'] .group,
[data-style='liquid-glass'] .group-parent { background: transparent; border: none; border-radius: 0; box-shadow: none; }

[data-style='liquid-glass'] .group:hover,
[data-style='liquid-glass'] .group-parent:hover { transform: none; box-shadow: none; }

[data-style='liquid-glass'] .group-head { padding-bottom: 0; border-bottom: none; }

[data-style='liquid-glass'] .group-parent-head { background: transparent; border: none; box-shadow: none; padding-left: 0; }

[data-style='liquid-glass'] .group-parent-head:hover { transform: none; box-shadow: none; }

[data-style='liquid-glass'] .group-parent-head h3 { background: none; -webkit-text-fill-color: currentColor; color: var(--text); }

[data-style='liquid-glass'] .group-child { background: transparent; border: none; border-radius: 0; padding-left: 0; padding-right: 0; box-shadow: none; }

[data-style='liquid-glass'] .group-add-btn { border-radius: 12px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.5); color: var(--accent); box-shadow: none; transition: background-color 240ms var(--ease), transform 240ms var(--ease); }

[data-style='liquid-glass'] .group-add-btn:hover { transform: none; background: rgba(255, 255, 255, 0.75); opacity: 1; }

[data-style='liquid-glass'] .btn { border-radius: 12px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.52); color: var(--text); font-weight: 500; box-shadow: var(--raised-sm); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); transition: transform 240ms var(--ease), background-color 240ms var(--ease), box-shadow 240ms var(--ease), color 240ms var(--ease); }

[data-style='liquid-glass'] .btn:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.72); box-shadow: var(--raised); opacity: 1; }

[data-style='liquid-glass'] .btn:active { transform: scale(0.98); box-shadow: var(--pressed-sm); }

[data-style='liquid-glass'] .btn-primary { background: linear-gradient(135deg, rgba(79, 107, 237, 0.94), rgba(122, 134, 255, 0.9)); border-color: rgba(255, 255, 255, 0.6); color: var(--on-accent); box-shadow: 0 10px 24px -12px rgba(79, 107, 237, 0.65); }

[data-style='liquid-glass'] .btn-primary:hover { transform: translateY(-1px); background: linear-gradient(135deg, rgba(63, 89, 214, 0.96), rgba(106, 118, 250, 0.92)); color: var(--on-accent); }

[data-style='liquid-glass'] .btn-primary:active { transform: scale(0.98); }

[data-style='liquid-glass'] .input,
[data-style='liquid-glass'] .select,
[data-style='liquid-glass'] .textarea { border-radius: 12px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.5); color: var(--text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85); transition: background-color 240ms var(--ease), box-shadow 240ms var(--ease); }

[data-style='liquid-glass'] .input:focus,
[data-style='liquid-glass'] .select:focus,
[data-style='liquid-glass'] .textarea:focus { outline: none; background: rgba(255, 255, 255, 0.72); box-shadow: 0 0 0 3px var(--accent-soft), var(--raised-sm); }

[data-style='liquid-glass'] .badge,
[data-style='liquid-glass'] .lan-badge,
[data-style='liquid-glass'] .hidden-badge { border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.55); color: var(--text-secondary); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

[data-style='liquid-glass'] .lan-badge { color: #1f6f58; }

[data-style='liquid-glass'] .hidden-badge { color: #8a5a1f; }

[data-style='liquid-glass'] .clock-time { color: var(--text); letter-spacing: 1px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); }

[data-style='liquid-glass'] .group-nav,
[data-style='liquid-glass'] .search-history-dropdown,
[data-style='liquid-glass'] .card-context-menu,
[data-style='liquid-glass'] .engine-menu,
[data-style='liquid-glass'] .toast { border-radius: 20px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.72); box-shadow: var(--raised-lg); backdrop-filter: blur(26px) saturate(180%); -webkit-backdrop-filter: blur(26px) saturate(180%); }

[data-style='liquid-glass'] .modal-box { background: rgba(255, 255, 255, 0.88); border: 1px solid var(--border); box-shadow: var(--raised-lg); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); }

[data-style='liquid-glass'] .nm-face { border-radius: 16px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.46); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85); }

[data-style='liquid-glass'] .nm-item.active .nm-face { background: rgba(79, 107, 237, 0.92); border-color: rgba(255, 255, 255, 0.6); color: var(--on-accent); }

[data-style='liquid-glass'] table th,
[data-style='liquid-glass'] table td { border-bottom: 1px solid rgba(255, 255, 255, 0.5); }

[data-style='liquid-glass'] :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }

[data-style='liquid-glass'] ::selection { background: var(--accent-soft); color: var(--text); }

[data-style='liquid-glass'] ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  [data-style='liquid-glass'] *,
  [data-style='liquid-glass'] *::before,
  [data-style='liquid-glass'] *::after {
    animation: none !important;
    transition-duration: 1ms !important;
  }
}


/* ============================================================
   8) Retro Vintage 复古怀旧（羊皮纸 · 粗棕框 · 衬线大写 · 角花） — retro-vintage
   ============================================================ */
:root[data-theme='light'][data-style='retro-vintage'] {
  --bg-grad: #f5e6d3;
  --surface: #f7ead8;
  --surface-2: #e8d5c0;
  --surface-hover: #eedbc2;
  --bg-soft: #efe0cb;
  --text: #8b4513;
  --text-strong: #5c2e0a;
  --text-muted: #6b4423;
  --text-secondary: #7a4a1f;
  --accent: #8b4513;
  --on-accent: #f5e6d3;
  --accent-soft: rgba(139, 69, 19, 0.12);
  --accent-hover: #6f3610;
  --danger: #c94c4c;
  --on-danger: #f7ead8;
  --success: #2e4a3f;
  --on-success: #f5e6d3;
  --edge: #8b4513;
  --edge-weak: rgba(139, 69, 19, 0.35);
  --border: #8b4513;
  --overlay: rgba(74, 42, 16, 0.48);
  --sh-dark: rgba(139, 69, 19, 0.22);
  --sh-light: rgba(255, 250, 240, 0.7);
  --accent-glow: rgba(139, 69, 19, 0.16);
  --raised-sm: 0 2px 4px rgba(139, 69, 19, 0.10);
  --raised: 0 4px 8px rgba(139, 69, 19, 0.15);
  --raised-lg: 0 8px 16px rgba(139, 69, 19, 0.20);
  --pressed-sm: inset 0 2px 4px rgba(139, 69, 19, 0.18);
  --inset: inset 0 2px 4px rgba(139, 69, 19, 0.12);
  --hover-bg: rgba(139, 69, 19, 0.08);
  --scroll-thumb: rgba(139, 69, 19, 0.35);
  --tr: 700ms;
  --ease: ease-in-out;
  --rv-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Songti SC", "Noto Serif SC", Georgia, serif;
}

:root[data-theme='dark'][data-style='retro-vintage'] {
  --bg-grad: #201812;
  --surface: #2a2018;
  --surface-2: #34281e;
  --surface-hover: #3a2c20;
  --bg-soft: #1a1410;
  --text: #ecd9c0;
  --text-strong: #f6e5cc;
  --text-muted: #b39a7d;
  --text-secondary: #d3bba0;
  --accent: #d9a05b;
  --on-accent: #201812;
  --accent-soft: rgba(217, 160, 91, 0.16);
  --accent-hover: #e8b678;
  --danger: #e08b8b;
  --on-danger: #201812;
  --success: #7fae97;
  --on-success: #201812;
  --edge: #8b6a45;
  --edge-weak: rgba(217, 160, 91, 0.30);
  --border: #8b6a45;
  --overlay: rgba(0, 0, 0, 0.66);
  --sh-dark: rgba(0, 0, 0, 0.55);
  --sh-light: rgba(236, 217, 192, 0.05);
  --accent-glow: rgba(217, 160, 91, 0.18);
  --raised-sm: 0 2px 5px rgba(0, 0, 0, 0.45);
  --raised: 0 5px 12px rgba(0, 0, 0, 0.5);
  --raised-lg: 0 10px 22px rgba(0, 0, 0, 0.55);
  --pressed-sm: inset 0 2px 4px rgba(0, 0, 0, 0.5);
  --inset: inset 0 2px 4px rgba(0, 0, 0, 0.35);
  --hover-bg: rgba(217, 160, 91, 0.1);
  --scroll-thumb: rgba(217, 160, 91, 0.32);
  --tr: 700ms;
  --ease: ease-in-out;
  --rv-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Songti SC", "Noto Serif SC", Georgia, serif;
}

[data-style='retro-vintage'] .style-fx { background-color: var(--bg-grad); background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22%3E%3Cfilter id=%22p%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.8%22 numOctaves=%224%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22160%22 height=%22160%22 filter=%22url(%23p)%22 opacity=%220.10%22/%3E%3C/svg%3E'); }

[data-theme='dark'][data-style='retro-vintage'] .style-fx { background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22%3E%3Cfilter id=%22p%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.8%22 numOctaves=%224%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22160%22 height=%22160%22 filter=%22url(%23p)%22 opacity=%220.08%22/%3E%3C/svg%3E'); }

[data-style='retro-vintage'] body { font-family: var(--rv-serif); background: var(--bg-grad); }

[data-style='retro-vintage'] h1,
[data-style='retro-vintage'] h2,
[data-style='retro-vintage'] h3 { font-family: var(--rv-serif); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; }

[data-style='retro-vintage'] .topbar { border-radius: 2px; border: 2px solid var(--edge); background: var(--surface); box-shadow: var(--raised-sm); backdrop-filter: none; -webkit-backdrop-filter: none; }

[data-style='retro-vintage'] .topbar-fab { border-radius: 2px; border: 2px solid var(--edge); background: var(--surface); color: var(--text); box-shadow: var(--raised-sm); backdrop-filter: none; -webkit-backdrop-filter: none; }

[data-style='retro-vintage'] .icon-btn { border-radius: 2px; border: 2px solid var(--edge); background: transparent; color: var(--text); box-shadow: none; transition: background-color 700ms ease-in-out, color 700ms ease-in-out, border-color 700ms ease-in-out; }

[data-style='retro-vintage'] .icon-btn:hover { transform: none; background: var(--surface-hover); color: var(--text-strong); border-color: var(--accent-hover); box-shadow: none; }

[data-style='retro-vintage'] .icon-btn:active { transform: none; opacity: 0.75; }

[data-style='retro-vintage'] .search-box { border-radius: 2px; border: 2px solid var(--edge); background: var(--surface); box-shadow: var(--raised-sm); backdrop-filter: none; -webkit-backdrop-filter: none; transition: border-color 700ms ease-in-out, background-color 700ms ease-in-out; }

[data-style='retro-vintage'] .search-box:focus-within { border-color: var(--accent-hover); background: var(--surface-hover); box-shadow: var(--raised-sm); }

[data-style='retro-vintage'] .search-box input { font-family: var(--rv-serif); }

[data-style='retro-vintage'] .search-box .search-btn { border-radius: 2px; border: 2px solid var(--edge); background: var(--accent); color: var(--on-accent); font-family: var(--rv-serif); font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; box-shadow: none; transition: background-color 700ms ease-in-out, color 700ms ease-in-out, border-color 700ms ease-in-out; }

[data-style='retro-vintage'] .search-box .search-btn:hover { transform: none; background: var(--accent-hover); color: var(--on-accent); box-shadow: none; }

[data-style='retro-vintage'] .search-box .search-btn:active { transform: none; opacity: 0.75; }

[data-style='retro-vintage'] .card { border-radius: 2px; border: 2px solid var(--edge); background: var(--surface); box-shadow: var(--raised-sm); transition: background-color 700ms ease-in-out, color 700ms ease-in-out, border-color 700ms ease-in-out, box-shadow 700ms ease-in-out, opacity 700ms ease-in-out; }

[data-style='retro-vintage'] .card::before { content: ''; position: absolute; top: 4px; left: 4px; width: 10px; height: 10px; border-top: 2px solid var(--edge); border-left: 2px solid var(--edge); opacity: 0.3; transition: opacity 700ms ease-in-out; pointer-events: none; }

[data-style='retro-vintage'] .card::after { content: ''; position: absolute; right: 4px; bottom: 4px; width: 10px; height: 10px; border-right: 2px solid var(--edge); border-bottom: 2px solid var(--edge); opacity: 0.3; transition: opacity 700ms ease-in-out; pointer-events: none; }

[data-style='retro-vintage'] .card:hover { transform: none; background: var(--surface-hover); border-color: var(--accent-hover); box-shadow: var(--raised); }

[data-style='retro-vintage'] .card:hover::before,
[data-style='retro-vintage'] .card:hover::after { opacity: 1; }

[data-style='retro-vintage'] .card:hover .info .t,
[data-style='retro-vintage'] .card:hover .info .d { color: var(--text-strong); }

[data-style='retro-vintage'] .card:active { transform: none; opacity: 0.78; box-shadow: var(--pressed-sm); }

[data-style='retro-vintage'] .card .info .t { font-family: var(--rv-serif); letter-spacing: 0.04em; }

[data-style='retro-vintage'] .card .info .d { font-family: var(--rv-serif); color: var(--text-muted); }

[data-style='retro-vintage'] .card .icon { border-radius: 2px; background: var(--accent); color: var(--on-accent); border: 2px solid var(--edge); box-shadow: none; }

[data-style='retro-vintage'] .card .icon.has-img img { filter: sepia(0.35) brightness(0.94) contrast(1.02); transition: filter 700ms ease-in-out; }

[data-style='retro-vintage'] .card:hover .icon.has-img img { filter: sepia(0.18) brightness(0.98); }

[data-style='retro-vintage'] .group,
[data-style='retro-vintage'] .group-parent { background: transparent; border: none; border-radius: 0; box-shadow: none; }

[data-style='retro-vintage'] .group:hover,
[data-style='retro-vintage'] .group-parent:hover { transform: none; box-shadow: none; }

[data-style='retro-vintage'] .group-head { padding-bottom: 10px; border-bottom: 2px solid var(--edge-weak); }

[data-style='retro-vintage'] .group-head h2 { font-family: var(--rv-serif); text-transform: uppercase; letter-spacing: 0.2em; }

[data-style='retro-vintage'] .group-head .desc { font-family: var(--rv-serif); letter-spacing: 0.06em; color: var(--text-muted); }

[data-style='retro-vintage'] .group-parent-head { background: transparent; border: none; box-shadow: none; padding-left: 0; }

[data-style='retro-vintage'] .group-parent-head:hover { transform: none; box-shadow: none; }

[data-style='retro-vintage'] .group-parent-head h3 { background: none; -webkit-text-fill-color: currentColor; color: var(--text); text-transform: uppercase; letter-spacing: 0.16em; font-family: var(--rv-serif); }

[data-style='retro-vintage'] .group-child { background: transparent; border: none; border-radius: 0; padding-left: 0; padding-right: 0; box-shadow: none; }

[data-style='retro-vintage'] .group-child + .group-child { border-top: 2px solid var(--edge-weak); }

[data-style='retro-vintage'] .group-add-btn { border-radius: 2px; border: 2px solid var(--edge-weak); background: transparent; color: var(--text); box-shadow: none; transition: background-color 700ms ease-in-out, color 700ms ease-in-out, border-color 700ms ease-in-out; }

[data-style='retro-vintage'] .group-add-btn:hover { transform: none; border-color: var(--accent); background: var(--surface-hover); color: var(--text-strong); opacity: 1; }

[data-style='retro-vintage'] .btn { border-radius: 2px; border: 2px solid var(--edge); background: transparent; color: var(--accent); font-family: var(--rv-serif); font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; box-shadow: none; transition: background-color 700ms ease-in-out, color 700ms ease-in-out, border-color 700ms ease-in-out; }

[data-style='retro-vintage'] .btn:hover { transform: none; background: var(--accent); color: var(--on-accent); border-color: var(--edge); box-shadow: none; opacity: 1; }

[data-style='retro-vintage'] .btn:active { transform: none; opacity: 0.75; }

[data-style='retro-vintage'] .btn-primary { background: var(--accent); border-color: var(--edge); color: var(--on-accent); }

[data-style='retro-vintage'] .btn-primary:hover { transform: none; background: var(--accent-hover); color: var(--on-accent); }

[data-style='retro-vintage'] .input,
[data-style='retro-vintage'] .select,
[data-style='retro-vintage'] .textarea { border-radius: 2px; border: 2px solid var(--edge); background: transparent; color: var(--text); font-family: var(--rv-serif); box-shadow: none; transition: border-color 700ms ease-in-out, background-color 700ms ease-in-out; }

[data-style='retro-vintage'] .input:focus,
[data-style='retro-vintage'] .select:focus,
[data-style='retro-vintage'] .textarea:focus { outline: none; border-color: var(--accent-hover); background: var(--surface-hover); box-shadow: none; }

[data-style='retro-vintage'] .input::placeholder,
[data-style='retro-vintage'] .textarea::placeholder { color: var(--text-muted); opacity: 0.8; }

[data-style='retro-vintage'] .badge,
[data-style='retro-vintage'] .lan-badge,
[data-style='retro-vintage'] .hidden-badge { border-radius: 0; border: 1px solid var(--edge); background: transparent; color: var(--accent); font-family: var(--rv-serif); letter-spacing: 0.12em; }

[data-style='retro-vintage'] .clock-time { font-family: var(--rv-serif); color: var(--text); letter-spacing: 0.08em; text-shadow: none; }

[data-style='retro-vintage'] .clock-date { font-family: var(--rv-serif); color: var(--text-muted); letter-spacing: 0.1em; }

[data-style='retro-vintage'] .group-nav,
[data-style='retro-vintage'] .search-history-dropdown,
[data-style='retro-vintage'] .card-context-menu,
[data-style='retro-vintage'] .engine-menu,
[data-style='retro-vintage'] .modal-box,
[data-style='retro-vintage'] .toast { border-radius: 2px; border: 2px solid var(--edge); background: var(--surface); box-shadow: var(--raised-lg); backdrop-filter: none; -webkit-backdrop-filter: none; }

[data-style='retro-vintage'] .nm-face { border-radius: 2px; border: 2px solid var(--edge-weak); background: transparent; box-shadow: none; }

[data-style='retro-vintage'] .nm-item.active .nm-face { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

[data-style='retro-vintage'] .divider,
[data-style='retro-vintage'] hr { height: 0; border: none; border-top: 2px solid var(--edge-weak); background: none; }

[data-style='retro-vintage'] table th,
[data-style='retro-vintage'] table td { border-bottom: 2px solid var(--edge-weak); }

[data-style='retro-vintage'] table tbody tr { transition: background-color 700ms ease-in-out; }

[data-style='retro-vintage'] table tbody tr:hover { background: var(--surface-hover); }

[data-style='retro-vintage'] :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }

[data-style='retro-vintage'] ::selection { background: var(--edge); color: var(--on-accent); }

[data-style='retro-vintage'] ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 0; }

@media (prefers-reduced-motion: reduce) {
  [data-style='retro-vintage'] *,
  [data-style='retro-vintage'] *::before,
  [data-style='retro-vintage'] *::after {
    animation: none !important;
    transition-duration: 1ms !important;
  }
}


/* ============================================================
   9) 铅笔手绘风（纸张纹理 · 虚线铅笔框 · 涂黑反白） — sketch-style
   ============================================================ */
:root[data-theme='light'][data-style='sketch-style'] {
  --bg-grad: #f5f0e8;
  --surface: #f7f2e9;
  --surface-2: #faf5ed;
  --bg-soft: #efe9dd;
  --text: #2c2c2c;
  --text-muted: #5a5a5a;
  --text-secondary: #3f3f3f;
  --accent: #c0392b;
  --primary: #2c2c2c;
  --on-accent: #f5f0e8;
  --accent-soft: rgba(192,57,43,0.12);
  --accent-hover: #a93226;
  --danger: #c0392b;
  --on-danger: #f5f0e8;
  --success: #1e7a4e;
  --on-success: #f5f0e8;
  --edge: #2c2c2c;
  --edge-weak: rgba(44,44,44,0.38);
  --border: #2c2c2c;
  --overlay: rgba(44,44,44,0.45);
  --sh-dark: rgba(44,44,44,0.30);
  --sh-light: rgba(245,240,232,0.65);
  --accent-glow: rgba(44,44,44,0.18);
  --raised-xs: 1px 1px 0 rgba(44,44,44,0.28);
  --raised-sm: 1px 1px 0 rgba(44,44,44,0.30);
  --raised: 2px 2px 0 rgba(44,44,44,0.30);
  --raised-lg: 3px 3px 0 rgba(44,44,44,0.30);
  --pressed-sm: 1px 1px 0 rgba(44,44,44,0.16);
  --inset: inset 1px 1px 0 rgba(44,44,44,0.18);
  --hover-bg: rgba(44,44,44,0.07);
  --scroll-thumb: rgba(44,44,44,0.32);
  --tr: 140ms;
  --ease: ease-out;
  --sk-hand: "Kaiti SC", "STKaiti", "KaiTi", "Georgia", "Songti SC", "Noto Serif SC", serif;
}

:root[data-theme='dark'][data-style='sketch-style'] {
  --bg-grad: #24211c;
  --surface: #2b2721;
  --surface-2: #332e27;
  --bg-soft: #1e1b17;
  --text: #ece5d8;
  --text-muted: #b5ab99;
  --text-secondary: #d8d0c1;
  --accent: #e8837a;
  --primary: #ece5d8;
  --on-accent: #24211c;
  --accent-soft: rgba(232,131,122,0.16);
  --accent-hover: #f09a92;
  --danger: #e8837a;
  --on-danger: #24211c;
  --success: #7fce9f;
  --on-success: #24211c;
  --edge: #d9d0c0;
  --edge-weak: rgba(217,208,192,0.38);
  --border: #d9d0c0;
  --overlay: rgba(0,0,0,0.62);
  --sh-dark: rgba(0,0,0,0.55);
  --sh-light: rgba(236,229,216,0.06);
  --accent-glow: rgba(236,229,216,0.14);
  --raised-xs: 1px 1px 0 rgba(0,0,0,0.50);
  --raised-sm: 1px 1px 0 rgba(0,0,0,0.55);
  --raised: 2px 2px 0 rgba(0,0,0,0.55);
  --raised-lg: 3px 3px 0 rgba(0,0,0,0.55);
  --pressed-sm: 1px 1px 0 rgba(0,0,0,0.30);
  --inset: inset 1px 1px 0 rgba(0,0,0,0.35);
  --hover-bg: rgba(236,229,216,0.08);
  --scroll-thumb: rgba(236,229,216,0.28);
  --tr: 140ms;
  --ease: ease-out;
  --sk-hand: "Kaiti SC", "STKaiti", "KaiTi", "Georgia", "Songti SC", "Noto Serif SC", serif;
}

[data-style='sketch-style'] .style-fx { background-color: var(--bg-grad); background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22140%22 height=%22140%22%3E%3Cfilter id=%22p%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.85%22 numOctaves=%224%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22140%22 height=%22140%22 filter=%22url(%23p)%22 opacity=%220.07%22/%3E%3C/svg%3E'), repeating-linear-gradient(45deg, rgba(44,44,44,0.045) 0 1px, transparent 1px 9px), repeating-linear-gradient(-45deg, rgba(44,44,44,0.035) 0 1px, transparent 1px 11px); }

[data-theme='dark'][data-style='sketch-style'] .style-fx { background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22140%22 height=%22140%22%3E%3Cfilter id=%22p%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.85%22 numOctaves=%224%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22140%22 height=%22140%22 filter=%22url(%23p)%22 opacity=%220.10%22/%3E%3C/svg%3E'), repeating-linear-gradient(45deg, rgba(236,229,216,0.035) 0 1px, transparent 1px 9px), repeating-linear-gradient(-45deg, rgba(236,229,216,0.025) 0 1px, transparent 1px 11px); }

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

[data-style='sketch-style'] .glass:hover, [data-style='sketch-style'] .glass-strong:hover { transform: none; box-shadow: var(--raised); }

[data-style='sketch-style'] .topbar { border-radius: 3px; border: 2px dashed var(--edge); }

[data-style='sketch-style'] .topbar-fab { border-radius: 3px; border: 2px dashed var(--edge); background: transparent; color: var(--text); box-shadow: var(--raised-sm); }

[data-style='sketch-style'] .icon-btn { border-radius: 3px; border: 2px dashed var(--edge); background: transparent; color: var(--text); box-shadow: var(--raised-sm); transition: background-color 120ms ease-out, color 120ms ease-out, box-shadow 120ms ease-out, rotate 120ms ease-out; }

[data-style='sketch-style'] .icon-btn:hover { background: var(--edge); color: var(--bg-grad); transform: none; box-shadow: none; }

[data-style='sketch-style'] .icon-btn:active { rotate: -3deg; translate: 1px 1px; box-shadow: none; }

[data-style='sketch-style'] .clock-time { font-family: var(--sk-hand); font-style: italic; font-weight: 600; letter-spacing: 0.05em; color: var(--text); text-shadow: none; }

[data-style='sketch-style'] .clock-date { font-family: var(--sk-hand); font-style: italic; color: var(--text-muted); letter-spacing: 0.06em; padding-bottom: 6px; background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%226%22%3E%3Cpath d=%22M0 3.5 Q 4 0.5 8 3.5 T 16 3.5%22 fill=%22none%22 stroke=%22%232c2c2c%22 stroke-width=%221.5%22 stroke-linecap=%22round%22/%3E%3C/svg%3E'); background-repeat: repeat-x; background-position: left bottom; background-size: 16px 6px; }

[data-theme='dark'][data-style='sketch-style'] .clock-date { background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%226%22%3E%3Cpath d=%22M0 3.5 Q 4 0.5 8 3.5 T 16 3.5%22 fill=%22none%22 stroke=%22%23d9d0c0%22 stroke-width=%221.5%22 stroke-linecap=%22round%22/%3E%3C/svg%3E'); }

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

[data-style='sketch-style'] .search-box:focus-within { border-color: var(--accent); box-shadow: 2px 2px 0 var(--sh-dark); }

[data-style='sketch-style'] .search-box input { background: transparent; font-family: var(--sk-hand); }

[data-style='sketch-style'] .search-box .search-btn { border-radius: 3px; border: 2px dashed var(--edge); background: transparent; color: var(--text); font-family: var(--sk-hand); font-weight: 600; box-shadow: var(--raised-sm); transition: background-color 120ms ease-out, color 120ms ease-out, box-shadow 120ms ease-out, rotate 120ms ease-out; }

[data-style='sketch-style'] .search-box .search-btn:hover { background: var(--edge); color: var(--bg-grad); box-shadow: none; }

[data-style='sketch-style'] .search-box .search-btn:active { rotate: -2deg; translate: 1px 1px; box-shadow: none; }

[data-style='sketch-style'] .group { border-radius: 3px; border: 2px dashed var(--edge-weak); background: transparent; box-shadow: none; transition: border-color 140ms ease-out; }

[data-style='sketch-style'] .group:hover { border-color: var(--edge); box-shadow: none; transform: none; }

[data-style='sketch-style'] .group-head h2 { font-family: var(--sk-hand); font-style: italic; font-weight: 600; letter-spacing: 0.01em; padding-bottom: 7px; background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%226%22%3E%3Cpath d=%22M0 3.5 Q 4 0.5 8 3.5 T 16 3.5%22 fill=%22none%22 stroke=%22%232c2c2c%22 stroke-width=%221.5%22 stroke-linecap=%22round%22/%3E%3C/svg%3E'); background-repeat: repeat-x; background-position: left bottom; background-size: 18px 6px; }

[data-theme='dark'][data-style='sketch-style'] .group-head h2 { background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%226%22%3E%3Cpath d=%22M0 3.5 Q 4 0.5 8 3.5 T 16 3.5%22 fill=%22none%22 stroke=%22%23d9d0c0%22 stroke-width=%221.5%22 stroke-linecap=%22round%22/%3E%3C/svg%3E'); }

[data-style='sketch-style'] .group-head .desc { font-family: var(--sk-hand); font-style: italic; color: var(--text-muted); }

[data-style='sketch-style'] .group-add-btn { border-radius: 3px; border: 2px dashed var(--edge-weak); background: transparent; color: var(--text); box-shadow: none; }

[data-style='sketch-style'] .card { border-radius: 3px; border: 2px dashed var(--edge); background: var(--surface); box-shadow: var(--raised-sm); transition: background-color 120ms ease-out, color 120ms ease-out, box-shadow 120ms ease-out, rotate 120ms ease-out, translate 120ms ease-out; }

[data-style='sketch-style'] .card:nth-child(3n+1) { rotate: -0.35deg; }

[data-style='sketch-style'] .card:nth-child(3n+2) { rotate: 0.3deg; }

[data-style='sketch-style'] .card:hover { background: var(--edge); color: var(--bg-grad); box-shadow: 1px 1px 0 var(--sh-dark); translate: -1px -1px; rotate: -0.8deg; transform: none; }

[data-style='sketch-style'] .card:hover .info .t, [data-style='sketch-style'] .card:hover .info .d { color: var(--bg-grad); }

[data-style='sketch-style'] .card:hover .icon { border-color: var(--bg-grad); color: var(--bg-grad); }

[data-style='sketch-style'] .card:active { rotate: 1.1deg; translate: 1px 1px; box-shadow: none; transform: none; }

[data-style='sketch-style'] .card .icon { width: 46px; height: 46px; border-radius: 3px; background: transparent; border: 2px dashed var(--edge-weak); color: var(--text); box-shadow: none; font-family: var(--sk-hand); }

[data-style='sketch-style'] .btn { border-radius: 3px; border: 2px dashed var(--edge); background: transparent; color: var(--text); box-shadow: var(--raised-sm); font-family: var(--sk-hand); font-weight: 600; transition: background-color 120ms ease-out, color 120ms ease-out, box-shadow 120ms ease-out, rotate 120ms ease-out; }

[data-style='sketch-style'] .btn:hover { background: var(--edge); color: var(--bg-grad); }

[data-style='sketch-style'] .btn:active { rotate: -1.2deg; translate: 1px 1px; box-shadow: none; }

[data-style='sketch-style'] .btn-primary { background: var(--edge); color: var(--bg-grad); border-color: var(--edge); }

[data-style='sketch-style'] .btn-primary:hover { background: var(--text); color: var(--bg-grad); }

[data-style='sketch-style'] .input, [data-style='sketch-style'] .select, [data-style='sketch-style'] .textarea { border-radius: 3px; border: 2px dashed var(--edge); background: var(--surface-2); font-family: var(--sk-hand); box-shadow: none; }

[data-style='sketch-style'] .input:focus, [data-style='sketch-style'] .select:focus, [data-style='sketch-style'] .textarea:focus { border-color: var(--accent); box-shadow: 2px 2px 0 var(--sh-dark); outline: none; }

[data-style='sketch-style'] .nm-face { border-radius: 3px; border: 2px dashed var(--edge-weak); background: transparent; box-shadow: none; }

[data-style='sketch-style'] .nm-item.active .nm-face { background: var(--edge); border-color: var(--edge); color: var(--bg-grad); box-shadow: none; }

[data-style='sketch-style'] .group-nav, [data-style='sketch-style'] .engine-menu, [data-style='sketch-style'] .card-context-menu, [data-style='sketch-style'] .search-history-dropdown, [data-style='sketch-style'] .modal-box, [data-style='sketch-style'] .toast { border-radius: 3px; border: 2px dashed var(--edge); background: var(--surface); box-shadow: var(--raised-lg); backdrop-filter: none; -webkit-backdrop-filter: none; }

[data-style='sketch-style'] h1, [data-style='sketch-style'] h2, [data-style='sketch-style'] h3 { font-family: var(--sk-hand); font-style: italic; letter-spacing: 0.01em; }

[data-style='sketch-style'] a { text-decoration-thickness: 2px; text-decoration-style: dashed; text-underline-offset: 3px; }

[data-style='sketch-style'] .badge, [data-style='sketch-style'] .lan-badge, [data-style='sketch-style'] .hidden-badge { border-radius: 2px; }

[data-style='sketch-style'] :focus-visible { outline: 2px dashed var(--accent); outline-offset: 3px; box-shadow: none; }

[data-style='sketch-style'] ::selection { background: var(--edge); color: var(--bg-grad); }

[data-style='sketch-style'] ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 0; }

[data-style='sketch-style'] .divider, [data-style='sketch-style'] hr { height: 0; border: none; border-top: 2px dashed var(--edge-weak); background: none; }

[data-style='sketch-style'] table th, [data-style='sketch-style'] table td { border-bottom: 2px dashed var(--edge-weak); }

@media (prefers-reduced-motion: reduce) { [data-style='sketch-style'] *, [data-style='sketch-style'] *::before, [data-style='sketch-style'] *::after { animation: none !important; transition-duration: 1ms !important; rotate: 0deg !important; translate: none !important; } }


/* ============================================================
   10) Soft Utility 柔和工具（深青主色 · 薄荷状态 · 清晰边界） — soft-utility
   ============================================================ */
:root[data-theme='light'][data-style='soft-utility'] {
  --bg-grad: linear-gradient(180deg, #f4f8f6 0%, #eaf2ef 100%);
  --surface: #ffffff;
  --surface-2: #eef5f2;
  --text: #203b40;
  --text-muted: #52696d;
  --accent: #2d5b63;
  --on-accent: #ffffff;
  --accent-soft: rgba(45, 91, 99, 0.14);
  --accent-hover: #24494f;
  --danger: #b0433c;
  --on-danger: #ffffff;
  --success: #1f6b58;
  --on-success: #ffffff;
  --edge: rgba(45, 91, 99, 0.24);
  --edge-weak: rgba(45, 91, 99, 0.13);
  --overlay: rgba(32, 59, 64, 0.36);
  --sh-dark: rgba(32, 59, 64, 0.12);
  --sh-light: #ffffff;
  --accent-glow: transparent;
  --raised-sm: 0 1px 2px rgba(32, 59, 64, 0.06);
  --raised: 0 4px 12px rgba(32, 59, 64, 0.09);
  --raised-lg: 0 10px 26px rgba(32, 59, 64, 0.13);
  --pressed-sm: inset 0 1px 2px rgba(32, 59, 64, 0.12);
  --inset: inset 0 1px 2px rgba(32, 59, 64, 0.07);
  --hover-bg: rgba(45, 91, 99, 0.08);
  --scroll-thumb: rgba(45, 91, 99, 0.28);
  --tr: 200ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

:root[data-theme='dark'][data-style='soft-utility'] {
  --bg-grad: linear-gradient(180deg, #10262a 0%, #0c1e21 100%);
  --surface: #173338;
  --surface-2: #1d3d42;
  --text: #e8f2ef;
  --text-muted: #aac4bf;
  --accent: #a9d8cc;
  --on-accent: #10262a;
  --accent-soft: rgba(169, 216, 204, 0.18);
  --accent-hover: #c3e7dd;
  --danger: #f0a49c;
  --on-danger: #10262a;
  --success: #a9d8cc;
  --on-success: #10262a;
  --edge: rgba(169, 216, 204, 0.26);
  --edge-weak: rgba(169, 216, 204, 0.14);
  --overlay: rgba(0, 0, 0, 0.6);
  --sh-dark: rgba(0, 0, 0, 0.45);
  --sh-light: rgba(255, 255, 255, 0.05);
  --accent-glow: transparent;
  --raised-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --raised: 0 4px 14px rgba(0, 0, 0, 0.45);
  --raised-lg: 0 12px 28px 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.35);
  --hover-bg: rgba(169, 216, 204, 0.1);
  --scroll-thumb: rgba(169, 216, 204, 0.3);
  --tr: 200ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

[data-style='soft-utility'] .style-fx::before,
[data-style='soft-utility'] .style-fx::after { content: none; }

[data-style='soft-utility'] .glass {
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--edge);
  box-shadow: var(--raised-sm);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

[data-style='soft-utility'] .glass:hover {
  transform: none;
  box-shadow: var(--raised);
}

[data-style='soft-utility'] .topbar {
  border-radius: 16px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--edge);
  box-shadow: var(--raised-sm);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

[data-style='soft-utility'] .brand img,
[data-style='soft-utility'] .icon-btn,
[data-style='soft-utility'] #themeBtn,
[data-style='soft-utility'] #lanBtn,
[data-style='soft-utility'] .group-add-btn {
  border-radius: 10px;
}

[data-style='soft-utility'] .icon-btn {
  background: var(--surface);
  border: 1px solid var(--edge);
  box-shadow: none;
  transition: background 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease), transform 200ms var(--ease);
}

[data-style='soft-utility'] .icon-btn:hover {
  transform: none;
  color: var(--accent);
  background: var(--surface-2);
  border-color: var(--accent);
  box-shadow: none;
}

[data-style='soft-utility'] .icon-btn:active {
  transform: scale(0.98);
  box-shadow: var(--pressed-sm);
}

[data-style='soft-utility'] .ann-pill {
  background: var(--surface-2);
  border: 1px solid var(--edge);
  box-shadow: none;
}

[data-style='soft-utility'] .search-box {
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--edge);
  box-shadow: var(--raised-sm);
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}

[data-style='soft-utility'] .search-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

[data-style='soft-utility'] .search-box .search-btn {
  border-radius: 10px;
  border: 1px solid var(--accent);
  box-shadow: none;
  font-weight: 500;
}

[data-style='soft-utility'] .search-box .search-btn:hover {
  transform: none;
  background: var(--accent-hover);
  box-shadow: none;
  opacity: 0.95;
}

[data-style='soft-utility'] .search-box .search-btn:active {
  transform: scale(0.98);
  box-shadow: none;
}

[data-style='soft-utility'] .engine-menu {
  border-radius: 12px;
  border: 1px solid var(--edge);
  box-shadow: var(--raised);
}

[data-style='soft-utility'] .engine-item {
  border-radius: 8px;
}

[data-style='soft-utility'] .card {
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--edge);
  box-shadow: var(--raised-sm);
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease), transform 200ms var(--ease);
}

[data-style='soft-utility'] .card:hover {
  transform: none;
  border-color: var(--accent);
  box-shadow: var(--raised);
}

[data-style='soft-utility'] .card:active {
  transform: scale(0.98);
  box-shadow: var(--pressed-sm);
}

[data-style='soft-utility'] .card .icon {
  border-radius: 10px;
  box-shadow: none;
}

[data-style='soft-utility'] .card.app-card {
  border-radius: 16px;
}

[data-style='soft-utility'] .card.app-card .icon {
  border-radius: 12px;
}

[data-style='soft-utility'] .group,
[data-style='soft-utility'] .group-parent {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

[data-style='soft-utility'] .group:hover,
[data-style='soft-utility'] .group-parent:hover {
  transform: none;
  box-shadow: none;
}

[data-style='soft-utility'] .group-head {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--edge-weak);
}

[data-style='soft-utility'] .group-parent-head {
  background: transparent;
  border: none;
  box-shadow: none;
  padding-left: 0;
}

[data-style='soft-utility'] .group-parent-head:hover {
  transform: none;
  box-shadow: none;
}

[data-style='soft-utility'] .group-parent-head h3 {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.01em;
}

[data-style='soft-utility'] .group-child {
  background: transparent;
  border: none;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
  box-shadow: none;
}

[data-style='soft-utility'] .group-child + .group-child {
  border-top: 1px solid var(--edge-weak);
}

[data-style='soft-utility'] h1,
[data-style='soft-utility'] h2,
[data-style='soft-utility'] h3 {
  letter-spacing: -0.01em;
}

[data-style='soft-utility'] .btn {
  border-radius: 10px;
  border: 1px solid var(--edge);
  background: var(--surface);
  color: var(--accent);
  font-weight: 500;
  box-shadow: var(--raised-sm);
  transition: background 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease), transform 200ms var(--ease);
}

[data-style='soft-utility'] .btn:hover {
  transform: none;
  color: var(--accent);
  background: var(--surface-2);
  border-color: var(--accent);
  box-shadow: var(--raised-sm);
  opacity: 1;
}

[data-style='soft-utility'] .btn:active {
  transform: scale(0.98);
  box-shadow: var(--pressed-sm);
}

[data-style='soft-utility'] .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--raised-sm);
}

[data-style='soft-utility'] .btn-primary:hover {
  transform: none;
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--on-accent);
}

[data-style='soft-utility'] .btn-primary:active {
  transform: scale(0.98);
}

[data-style='soft-utility'] .btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

[data-style='soft-utility'] .input,
[data-style='soft-utility'] .select,
[data-style='soft-utility'] .textarea {
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--edge);
  box-shadow: none;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}

[data-style='soft-utility'] .input:focus,
[data-style='soft-utility'] .select:focus,
[data-style='soft-utility'] .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

[data-style='soft-utility'] .input.is-error,
[data-style='soft-utility'] .select.is-error,
[data-style='soft-utility'] .textarea.is-error,
[data-style='soft-utility'] .input[aria-invalid='true'] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(176, 67, 60, 0.16);
}

[data-style='soft-utility'] .input.is-success,
[data-style='soft-utility'] .select.is-success,
[data-style='soft-utility'] .textarea.is-success {
  border-color: var(--success);
  box-shadow: 0 0 0 3px rgba(31, 107, 88, 0.16);
}

:root[data-theme='dark'][data-style='soft-utility'] .input.is-error,
:root[data-theme='dark'][data-style='soft-utility'] .select.is-error,
:root[data-theme='dark'][data-style='soft-utility'] .textarea.is-error,
:root[data-theme='dark'][data-style='soft-utility'] .input[aria-invalid='true'] {
  box-shadow: 0 0 0 3px rgba(240, 164, 156, 0.22);
}

:root[data-theme='dark'][data-style='soft-utility'] .input.is-success,
:root[data-theme='dark'][data-style='soft-utility'] .select.is-success,
:root[data-theme='dark'][data-style='soft-utility'] .textarea.is-success {
  box-shadow: 0 0 0 3px rgba(169, 216, 204, 0.22);
}

[data-style='soft-utility'] .input:disabled,
[data-style='soft-utility'] .select:disabled,
[data-style='soft-utility'] .textarea:disabled {
  background: var(--surface-2);
  color: var(--text-muted);
  border-color: var(--edge-weak);
  opacity: 1;
  cursor: not-allowed;
}

[data-style='soft-utility'] .lan-badge {
  background: #a9d8cc;
  color: #1d4b46;
}

[data-style='soft-utility'] .hidden-badge {
  background: #f3c98b;
  color: #4a3413;
  border: 1px solid rgba(74, 52, 19, 0.2);
}

[data-style='soft-utility'] .badge {
  background: #b8c9ed;
  color: #24395e;
  border: 1px solid rgba(36, 57, 94, 0.2);
}

[data-style='soft-utility'] .divider,
[data-style='soft-utility'] hr {
  height: 1px;
  border: none;
  background: var(--edge-weak);
}

[data-style='soft-utility'] table th,
[data-style='soft-utility'] table td {
  border-bottom: 1px solid var(--edge-weak);
}

[data-style='soft-utility'] .group-nav,
[data-style='soft-utility'] .search-history-dropdown,
[data-style='soft-utility'] .card-context-menu,
[data-style='soft-utility'] .modal-box {
  border-radius: 14px;
  border: 1px solid var(--edge);
}

[data-style='soft-utility'] .clock-time {
  font-weight: 700;
  letter-spacing: 2px;
  text-shadow: none;
}

[data-style='soft-utility'] :focus-visible {
  outline: none;
  border-radius: 10px;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

@media (prefers-reduced-motion: reduce) {
  [data-style='soft-utility'] *,
  [data-style='soft-utility'] *::before,
  [data-style='soft-utility'] *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

[data-style='soft-utility'] .topbar-fab {
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--edge);
  color: var(--text);
  box-shadow: var(--raised-sm);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

[data-style='soft-utility'] .back-top {
  border-radius: 12px;
  border: 1px solid var(--edge);
  box-shadow: var(--raised-sm);
}

[data-style='soft-utility'] .back-top:hover {
  transform: none;
  border-color: var(--accent);
  box-shadow: var(--raised);
}

[data-style='soft-utility'] .back-top:active {
  transform: scale(0.98);
  box-shadow: var(--pressed-sm);
}

[data-style='soft-utility'] .gn-toggle {
  border: 1px solid var(--edge);
  border-left: none;
  box-shadow: var(--raised-sm);
}

[data-style='soft-utility'] .group-add-btn {
  border: 1px solid var(--edge);
  background: var(--surface);
  border-radius: 8px;
  color: var(--accent);
}

[data-style='soft-utility'] .group-add-btn:hover {
  border-color: var(--accent);
  transform: none;
  opacity: 1;
}

[data-style='soft-utility'] .toast {
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--edge);
  box-shadow: var(--raised);
}

[data-style='soft-utility'] .engine-btn {
  border-radius: 8px;
  transition: background 200ms var(--ease);
}

[data-style='soft-utility'] .engine-btn:hover {
  background: var(--hover-bg);
}

[data-style='soft-utility'] .engine-item.active {
  background: var(--accent-soft);
  color: var(--accent);
}

[data-style='soft-utility'] .card:focus-visible,
[data-style='soft-utility'] .btn:focus-visible,
[data-style='soft-utility'] .icon-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-soft);
}

[data-style='soft-utility'] .group.search-active {
  box-shadow: 0 0 0 2px var(--accent), var(--raised-sm);
}

:root[data-theme='dark'][data-style='soft-utility'] .nm-item.active .nm-face {
  color: var(--on-accent);
}

[data-style='soft-utility'] .card .hidden-badge {
  background: #f3c98b;
  color: #4a3413;
  border-color: rgba(74, 52, 19, 0.2);
}

[data-style='soft-utility'] .search-history-dropdown,
[data-style='soft-utility'] .engine-menu,
[data-style='soft-utility'] .card-context-menu {
  background: var(--surface);
  box-shadow: var(--raised-lg);
}