@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap');

/* ============ 鸿蒙字体 ============
 * 用 GB2312 子集（6763 汉字 + 拉丁与标点，约 2.7 MB/三档），母版 TTF 在 design/fonts。
 * 生僻字不在子集内，由 stack 末尾的 PingFang/微软雅黑 兜底；重新生成见 OPS-01 §12。 */
@font-face {
  font-family: 'HarmonyOS Sans SC';
  src: url('/public/fonts/HarmonyOS_Sans_SC_Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'HarmonyOS Sans SC';
  src: url('/public/fonts/HarmonyOS_Sans_SC_Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'HarmonyOS Sans SC';
  src: url('/public/fonts/HarmonyOS_Sans_SC_Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


:root {
  --brand-primary: #00f0ff;
  --brand-primary-light: #66f7ff;
  --brand-primary-dark: #00b8c5;
  --brand-primary-foreground: #0a0a14;
  --brand-secondary: #ff2d95;
  --brand-secondary-light: #ff6bb0;
  --brand-secondary-dark: #cc0070;
  --brand-secondary-foreground: #ffffff;
  --brand-background: #0a0a14;
  --brand-foreground: #e0e0ff;
  --brand-card: #12121f;
  --brand-card-foreground: #e0e0ff;
  --brand-popover: #16162a;
  --brand-popover-foreground: #e0e0ff;
  --brand-muted: #555588;
  --brand-muted-foreground: #8888bb;
  --brand-border: #2a2a55;
  --brand-input: #1a1a30;
  --brand-ring: #00f0ff;
  --color-status-online: #22c55e;
  --color-status-warning: #f59e0b;
  --color-status-error: #ef4444;
  --color-bg-surface: #16162a;
  --color-bg-elevated: #1a1a30;
  --font-display: 'Orbitron', 'Rajdhani', monospace;
  --font-body: 'HarmonyOS Sans SC', 'Rajdhani', 'Share Tech Mono', 'Segoe UI', sans-serif;
  --brand-radius-sm: 2px;
  --brand-radius-md: 6px;
  --brand-radius-lg: 10px;
  --brand-radius-xl: 16px;
  --card-border-width: 1px;
  --card-box-shadow: none;
  --card-hover-shadow: 0 0 15px rgba(0,240,255,0.12);
  --color-glow-primary: rgba(0,240,255,0.25);
  --color-glow-secondary: rgba(255,45,149,0.25);
  --btn-glow-shadow: 0 0 10px rgba(0,240,255,0.2);
  --btn-hover-glow-shadow: 0 0 20px rgba(0,240,255,0.35), 0 0 40px rgba(0,240,255,0.1);
  --logo-text: 'NEXUS';
  --logo-letter-spacing: 2px;
  --logo-text-shadow: 0 0 12px rgba(0,240,255,0.5), 0 0 24px rgba(0,240,255,0.2);
  --scanline-opacity: 1;
  --grid-opacity: 0.04;
  --animations-enabled: 1;
  /* RGB 通道：供 Tailwind 的 /opacity 修饰符使用 */
  --brand-primary-rgb: 0 240 255;
  --brand-primary-light-rgb: 102 247 255;
  --brand-primary-dark-rgb: 0 184 197;
  --brand-primary-foreground-rgb: 10 10 20;
  --brand-secondary-rgb: 255 45 149;
  --brand-secondary-light-rgb: 255 107 176;
  --brand-secondary-dark-rgb: 204 0 112;
  --brand-secondary-foreground-rgb: 255 255 255;
  --brand-background-rgb: 10 10 20;
  --brand-foreground-rgb: 224 224 255;
  --brand-card-rgb: 18 18 31;
  --brand-card-foreground-rgb: 224 224 255;
  --brand-popover-rgb: 22 22 42;
  --brand-popover-foreground-rgb: 224 224 255;
  --brand-muted-rgb: 85 85 136;
  --brand-muted-foreground-rgb: 136 136 187;
  --brand-border-rgb: 42 42 85;
  --brand-input-rgb: 26 26 48;
  --brand-ring-rgb: 0 240 255;
  --color-status-online-rgb: 34 197 94;
  --color-status-warning-rgb: 245 158 11;
  --color-status-error-rgb: 239 68 68;
  --color-bg-surface-rgb: 22 22 42;
  --color-bg-elevated-rgb: 26 26 48;
}

/* ============ C 端站点令牌（原 apps/site/src/assets/website/website.css） ============
 * 整套取色从站点样式搬进来，选择器、值与相对顺序逐条保持不变，因此这里仍是
 * `.sf-site` 作用域而不是并进上面的 :root，理由有两个：
 *   1) :root 的 --font-body 与站点历史值不同（站点多 Noto/PingFang 兜底、少 Rajdhani），
 *      同名合并会把后台与 C 端 App 的字体栈一起换掉；
 *   2) useTheme 用行内样式把 :root 上的 --brand-* 写成当前主题值，行内优先级高于
 *      :root 规则，站点令牌挂到 :root 既会被它覆盖，也会引入首帧与换肤后的取色时序差。
 * 与 :root 的同名不同值口径（--font-body）登记在 ARC-05，等产品定稿后再统一。 */
.sf-site {
  --bg: #0a0a14;
  --surface: #12121f;
  --surface-2: #16162a;
  --elevated: #1a1a30;
  --fg: #e6e9ff;
  --muted: #989dc2;
  --muted-2: #62678e;
  --line: #26264d;
  --line-soft: rgba(90, 90, 160, 0.18);
  --cyan: #00f0ff;
  --cyan-rgb: 0, 240, 255;
  --cyan-light: #66f7ff;
  --cyan-dark: #00b8c5;
  --cyan-dark-rgb: 0, 184, 197;
  --cyan-soft: rgba(0, 240, 255, 0.1);
  --accent-ink: #041014;
  --accent-ink-rgb: 5, 16, 20;
  --magenta: #ff2d95;
  --magenta-rgb: 255, 45, 149;
  --magenta-light: #ff9bc8;
  --magenta-soft: rgba(255, 45, 149, 0.1);
  --gold: #f0b45a;
  --gold-rgb: 240, 180, 90;
  --green: #22c55e;
  --green-rgb: 34, 197, 94;
  --bg-rgb: 10, 10, 20;
  --surface-rgb: 18, 18, 31;
  --surface-2-rgb: 22, 22, 42;
  --surface-3-rgb: 14, 14, 27;
  --elevated-rgb: 26, 26, 48;
  --panel-rgb: 20, 20, 38;
  --panel-2-rgb: 18, 18, 34;
  --deep-rgb: 13, 13, 26;
  --deep-2-rgb: 14, 14, 28;
  --ink-rgb: 8, 8, 16;
  --ink-2-rgb: 8, 8, 18;
  --line-rgb: 90, 90, 160;
  --line-2-rgb: 90, 90, 150;
  --line-3-rgb: 92, 92, 170;
  --media-bg: #0c0c16;
  --bg-deep: #08080f;
  --font-display: 'Orbitron', 'Rajdhani', monospace;
  --font-body: 'HarmonyOS Sans SC', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --font-mono: 'Share Tech Mono', 'Cascadia Code', ui-monospace, monospace;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --header-h: 68px;
  --max-w: 1440px;
}

/* ---------- IRONCORE「机甲军事」主题覆盖 ---------- */
html[data-theme-style='ironcore'] .sf-site {
  --bg: #1a1a1a;
  --surface: #222222;
  --surface-2: #2a2a2a;
  --elevated: #303030;
  --fg: #ded9cd;
  --muted: #a39b8b;
  --muted-2: #7a7264;
  --line: #444040;
  --line-soft: rgba(150, 138, 118, 0.22);
  --cyan: #f0a030;
  --cyan-rgb: 240, 160, 48;
  --cyan-light: #f5be6a;
  --cyan-dark: #c07820;
  --cyan-dark-rgb: 192, 120, 32;
  --cyan-soft: rgba(240, 160, 48, 0.1);
  --accent-ink: #1a1408;
  --accent-ink-rgb: 26, 20, 8;
  --magenta: #4ecdc4;
  --magenta-rgb: 78, 205, 196;
  --magenta-light: #7ee0d9;
  --magenta-soft: rgba(78, 205, 196, 0.1);
  --gold: #e2c078;
  --gold-rgb: 226, 192, 120;
  --green: #7bc47f;
  --green-rgb: 123, 196, 127;
  --bg-rgb: 26, 26, 26;
  --surface-rgb: 34, 34, 34;
  --surface-2-rgb: 42, 42, 42;
  --surface-3-rgb: 30, 30, 30;
  --elevated-rgb: 48, 48, 48;
  --panel-rgb: 40, 40, 40;
  --panel-2-rgb: 36, 36, 36;
  --deep-rgb: 22, 22, 22;
  --deep-2-rgb: 24, 24, 24;
  --ink-rgb: 12, 12, 11;
  --ink-2-rgb: 14, 14, 13;
  --line-rgb: 110, 102, 90;
  --line-2-rgb: 104, 97, 86;
  --line-3-rgb: 120, 112, 98;
  --media-bg: #121212;
  --bg-deep: #0e0e0e;
  --font-display: 'Rajdhani', 'Oswald', 'Impact', sans-serif;
  --font-body: 'HarmonyOS Sans SC', 'Rajdhani', 'Segoe UI', sans-serif;
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;
}

/* 窄屏顶栏高度：必须排在上面的基线之后，同特异性靠后者胜 */
@media (max-width: 720px) {
  .sf-site {
    --header-h: 60px;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--brand-foreground);
  background: var(--brand-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ============ 赛博光标全局样式 ============ */
a, button, .btn-primary, .btn-secondary, [role="button"], 
.clickable, .cursor-pointer, select, input[type="checkbox"] + label,
input[type="radio"] + label, .nav-tab, .pagination-btn {
  /* cursor: url('./assets/cursors/cursor-pointer.svg') 4 4, pointer; */
}

input[type="text"], input[type="search"], input[type="email"],
input[type="password"], input[type="number"], textarea,
[contenteditable="true"], .cursor-text {
  /* cursor: url('./assets/cursors/cursor-text.svg') 16 16, text; */
}

.cursor-crosshair, .three-viewport canvas {
  /* cursor: url('./assets/cursors/cursor-crosshair.svg') 16 16, crosshair; */
}

#app {
  height: 100%;
  width: 100%;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ============ 角部装饰：HUD 边角括号（NEXUS） ============ */
[data-theme-style="nexus"] .hud-corner-tl,
[data-theme-style="nexus"] .hud-corner-tr,
[data-theme-style="nexus"] .hud-corner-bl,
[data-theme-style="nexus"] .hud-corner-br {
  display: block;
}

[data-theme-style="ironcore"] .hud-corner-tl,
[data-theme-style="ironcore"] .hud-corner-tr,
[data-theme-style="ironcore"] .hud-corner-bl,
[data-theme-style="ironcore"] .hud-corner-br {
  display: none;
}

.hud-corner-tl {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 14px;
  height: 14px;
  border-top: 2px solid var(--brand-primary);
  border-left: 2px solid var(--brand-primary);
}

.hud-corner-tr {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 14px;
  height: 14px;
  border-top: 2px solid var(--brand-primary);
  border-right: 2px solid var(--brand-primary);
}

.hud-corner-bl {
  position: absolute;
  bottom: -1px;
  left: -1px;
  width: 14px;
  height: 14px;
  border-bottom: 2px solid var(--brand-primary);
  border-left: 2px solid var(--brand-primary);
}

.hud-corner-br {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 14px;
  height: 14px;
  border-bottom: 2px solid var(--brand-primary);
  border-right: 2px solid var(--brand-primary);
}

/* ============ 背景纹理：扫描线 + 网格（NEXUS） ============ */
[data-theme-style="nexus"] .scanline-overlay {
  opacity: var(--scanline-opacity);
}

[data-theme-style="ironcore"] .scanline-overlay {
  display: none;
}

.scanline-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,240,255,0.015) 2px,
    rgba(0,240,255,0.015) 4px
  );
  transition: opacity 0.3s ease;
}

/* 背景纹理容器 */
.bg-texture-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* NEXUS: 网格背景 */
[data-theme-style="nexus"] .grid-background {
  opacity: var(--grid-opacity);
}

[data-theme-style="ironcore"] .grid-background {
  display: none;
}

.grid-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background-image: 
    linear-gradient(var(--brand-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--brand-border) 1px, transparent 1px);
  background-size: 40px 40px;
  transition: opacity 0.3s ease;
}

/* IRONCORE: 网格 + CONFIDENTIAL水印 */
[data-theme-style="ironcore"] .ironcore-bg {
  display: block;
  opacity: 1;
}

[data-theme-style="nexus"] .ironcore-bg {
  display: none;
}

.ironcore-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.ironcore-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(68,64,64,0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(68,64,64,0.15) 1px, transparent 1px);
  background-size: 40px 40px;
}

.ironcore-bg::after {
  content: 'CONFIDENTIAL';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  font-family: 'Rajdhani', sans-serif;
  font-size: 120px;
  font-weight: 900;
  color: var(--brand-foreground);
  opacity: 0.03;
  letter-spacing: 8px;
  white-space: nowrap;
}

/* ============ IRONCORE: 顶部危险条纹 ============ */
[data-theme-style="nexus"] .hazard-stripe-top {
  display: none;
}

[data-theme-style="ironcore"] .hazard-stripe-top {
  display: block;
}

.hazard-stripe-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 10000;
  background: repeating-linear-gradient(
    -45deg,
    #f39c12,
    #f39c12 4px,
    #1a1a1a 4px,
    #1a1a1a 8px
  );
}

/* ============ XP 进度条 shimmer ============ */
.xp-bar-fill {
  position: relative;
  overflow: hidden;
}

.xp-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: xp-shimmer 2.5s ease-in-out infinite;
}

/* ============ 开关切换样式 ============ */
input[type="checkbox"] + label span {
  transition: left 0.2s;
}

input[type="checkbox"]:not(:checked) + label span {
  left: 2px !important;
  opacity: 0.7;
}

input[type="checkbox"]:checked + label span {
  left: 22px !important;
}

input[type="checkbox"]:not(:checked) + label {
  background: var(--brand-muted) !important;
}

input[type="checkbox"]:checked + label {
  background: var(--brand-primary) !important;
}

/* ============ 导航标签 ============ */
.nav-tab {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: var(--brand-radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--brand-muted-foreground);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

/* NEXUS 激活态：发光边框 */
[data-theme-style="nexus"] .nav-tab.active {
  border-color: var(--brand-primary);
  background: rgba(0,240,255,0.1);
  color: var(--brand-primary);
  box-shadow: 0 0 10px rgba(0,240,255,0.2);
}

/* IRONCORE 激活态：底部主色线 */
[data-theme-style="ironcore"] .nav-tab.active {
  border-bottom: 2px solid var(--brand-primary);
  color: var(--brand-primary);
  background: transparent;
}

.nav-tab:not(.active):hover {
  color: var(--brand-foreground);
}

[data-theme-style="nexus"] .nav-tab:not(.active):hover {
  background: rgba(0,240,255,0.05);
  border-color: rgba(0,240,255,0.3);
}

[data-theme-style="ironcore"] .nav-tab:not(.active):hover {
  background: rgba(240,160,48,0.05);
  color: var(--brand-primary);
}

/* ============ 表格行 hover ============ */
.table-row:hover {
  background: var(--brand-popover);
}

/* ============ KPI/模型卡片 hover ============ */
[data-theme-style="nexus"] .kpi-card:hover,
[data-theme-style="nexus"] .model-card:hover {
  border-color: var(--brand-primary);
  box-shadow: var(--card-hover-shadow);
}

[data-theme-style="ironcore"] .kpi-card:hover,
[data-theme-style="ironcore"] .model-card:hover {
  border-color: var(--brand-primary);
  box-shadow: var(--card-hover-shadow);
}

.kpi-card, .model-card {
  transition: all 0.2s ease;
}

/* ============ 输入框焦点 ============ */
select:focus, input:focus {
  border-color: var(--brand-ring);
  box-shadow: 0 0 0 1px var(--brand-ring);
}

option {
  background: var(--brand-input);
  color: var(--brand-foreground);
}

/* ============ 无动画模式 ============ */
.no-animations *, .no-animations *::before, .no-animations *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

.no-animations .xp-bar-fill::after {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .xp-bar-fill::after {
    animation: none;
  }
}

/* ============ Logo 通用样式 ============ */
.logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--brand-primary);
  letter-spacing: var(--logo-letter-spacing);
  text-shadow: var(--logo-text-shadow);
}

/* ============ 主题卡片通用样式 ============ */
.theme-card {
  background: var(--brand-card);
  border: var(--card-border-width) solid var(--brand-border);
  border-radius: var(--brand-radius-md);
  box-shadow: var(--card-box-shadow);
  transition: all 0.2s ease;
  position: relative;
}

.theme-card:hover {
  box-shadow: var(--card-hover-shadow);
}

/* ============ 按钮通用样式 ============ */
.btn-primary {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
  color: var(--brand-primary-foreground);
  border: none;
  border-radius: var(--brand-radius-md);
  font-family: var(--font-display);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--btn-glow-shadow);
}

.btn-primary:hover {
  box-shadow: var(--btn-hover-glow-shadow);
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  color: var(--brand-primary);
  border: 1px solid var(--brand-primary);
  border-radius: var(--brand-radius-md);
  font-family: var(--font-body);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
}

/* ============ IRONCORE: 铆钉角装饰 ============ */
[data-theme-style="ironcore"] .rivet-tl,
[data-theme-style="ironcore"] .rivet-tr,
[data-theme-style="ironcore"] .rivet-bl,
[data-theme-style="ironcore"] .rivet-br {
  display: block;
}

.rivet-tl, .rivet-tr, .rivet-bl, .rivet-br {
  display: none;
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--brand-muted), var(--brand-border));
  border: 1px solid var(--brand-border);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.1);
}

.rivet-tl { top: 6px; left: 6px; }
.rivet-tr { top: 6px; right: 6px; }
.rivet-bl { bottom: 6px; left: 6px; }
.rivet-br { bottom: 6px; right: 6px; }

/* ============ 进度条发光效果 ============ */
.progress-glow {
  box-shadow: 0 0 8px var(--color-glow-primary);
}

/* ============ 输入框焦点发光 ============ */
.input-glow:focus {
  box-shadow: 0 0 0 2px var(--color-glow-primary);
}

/* ============ 头像光环 ============ */
.avatar-ring {
  box-shadow: 0 0 0 2px var(--brand-background), 0 0 0 3px var(--brand-primary);
}

/* ============ IRONCORE 卡片内阴影 ============ */
[data-theme-style="ironcore"] .kpi-card,
[data-theme-style="ironcore"] .model-card {
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.4);
}

[data-theme-style="ironcore"] .kpi-card:hover,
[data-theme-style="ironcore"] .model-card:hover {
  border-color: var(--brand-primary);
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.4), 0 0 12px var(--color-glow-primary);
}

/* ============ NEXUS HUD角装饰显示控制 ============ */
[data-theme-style="nexus"] .hud-corner-tl,
[data-theme-style="nexus"] .hud-corner-tr,
[data-theme-style="nexus"] .hud-corner-bl,
[data-theme-style="nexus"] .hud-corner-br {
  display: block;
}

.hud-corner-tl, .hud-corner-tr, .hud-corner-bl, .hud-corner-br {
  display: none;
}

/* ============ 表格样式 ============ */
.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th {
  text-align: left;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brand-muted-foreground);
  border-bottom: 1px solid var(--brand-border);
}

.data-table td {
  padding: 12px 20px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--brand-foreground);
  border-bottom: 1px solid var(--brand-border);
}

.data-table tr:hover td {
  background: var(--brand-popover);
}

/* ============ 分页按钮 ============ */
.pagination-btn {
  font-family: var(--font-body);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--brand-radius-sm);
  border: 1px solid var(--brand-border);
  background: transparent;
  color: var(--brand-muted-foreground);
  cursor: pointer;
  transition: all 0.15s;
}

.pagination-btn:hover {
  color: var(--brand-foreground);
  border-color: var(--brand-primary);
}

.pagination-btn.active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-primary-foreground);
  font-weight: 700;
}

/* ============ IRONCORE 工业风按钮 ============ */
[data-theme-style="ironcore"] .btn-primary {
  background: linear-gradient(180deg, var(--brand-primary-light), var(--brand-primary));
  border: 2px solid var(--brand-primary-dark);
  box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
  text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

[data-theme-style="ironcore"] .btn-primary:hover {
  background: linear-gradient(180deg, var(--brand-primary), var(--brand-primary-dark));
  box-shadow: 0 2px 6px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.15), 0 0 16px var(--color-glow-primary);
}

[data-theme-style="ironcore"] .btn-secondary {
  background: linear-gradient(180deg, var(--color-bg-elevated), var(--color-bg-surface));
  border: 2px solid var(--brand-border);
  color: var(--brand-foreground);
}

[data-theme-style="ironcore"] .btn-secondary:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

/* ============ 表单控件统一高度 ============ */
.filter-select,
.filter-input {
  height: 32px;
  line-height: 1;
  box-sizing: border-box;
}

/* ============ Select 下拉框样式 ============ */
select.theme-select {
  font-family: var(--font-body);
  font-size: 12px;
  background-color: var(--brand-input);
  color: var(--brand-foreground);
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-sm);
  padding: 0 10px;
  height: 32px;
  line-height: 1;
  outline: none;
  cursor: pointer;
  transition: all 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238888bb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
  padding-right: 28px;
}

select.theme-select::-ms-expand {
  display: none;
}

select.theme-select:hover {
  border-color: var(--brand-primary);
}

select.theme-select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 2px var(--color-glow-primary);
}

select.theme-select option {
  background: var(--brand-popover);
  color: var(--brand-foreground);
  padding: 8px 12px;
}

select.theme-select option:checked {
  background: var(--brand-primary);
  color: var(--brand-primary-foreground);
}

select.theme-select option:hover,
select.theme-select option:focus,
select.theme-select option:active {
  background: var(--brand-primary);
  color: var(--brand-primary-foreground);
}

/* 搜索框图标容器样式 */
.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input-wrapper .search-icon {
  position: absolute;
  left: 10px;
  width: 14px;
  height: 14px;
  color: var(--brand-muted-foreground);
  pointer-events: none;
  z-index: 1;
}

/* 带图标的搜索框：左侧留出图标空间 */
input.theme-input.has-icon {
  padding-left: 32px;
}

/* IRONCORE 主题 select 样式 */
[data-theme-style="ironcore"] select.theme-select {
  background-color: var(--brand-input);
  background-image: linear-gradient(180deg, var(--brand-input), var(--color-bg-surface)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8478' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center, right 8px center;
  background-size: auto, 12px;
  border: 2px solid var(--brand-border);
  font-weight: 500;
  text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

[data-theme-style="ironcore"] select.theme-select:hover {
  border-color: var(--brand-primary);
  box-shadow: 0 0 8px var(--color-glow-primary);
}

[data-theme-style="ironcore"] select.theme-select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 2px var(--color-glow-primary);
}

/* ============ 搜索框输入框样式 ============ */
input.theme-input {
  font-family: var(--font-body);
  font-size: 12px;
  background: var(--brand-input);
  color: var(--brand-foreground);
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-sm);
  padding: 0 12px;
  height: 32px;
  line-height: 1;
  outline: none;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

input.theme-input::placeholder {
  color: var(--brand-muted-foreground);
}

input.theme-input:hover {
  border-color: var(--brand-primary);
}

input.theme-input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 2px var(--color-glow-primary);
}

/* IRONCORE 主题 input 样式 */
[data-theme-style="ironcore"] input.theme-input {
  background-color: var(--brand-input);
  background-image: linear-gradient(180deg, var(--brand-input), var(--color-bg-surface));
  border: 2px solid var(--brand-border);
  text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

[data-theme-style="ironcore"] input.theme-input:hover {
  border-color: var(--brand-primary);
  box-shadow: 0 0 8px var(--color-glow-primary);
}

[data-theme-style="ironcore"] input.theme-input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 2px var(--color-glow-primary);
}

/* ===== 极窄滚动条 ===== */
/* WebKit (Chrome / Edge / Safari) */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--brand-primary);
  border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--brand-secondary);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--brand-primary) transparent;
}