@charset "UTF-8";
/* ==========================================================================
   Oulu-PIM - 企业级现代设计系统 2.0 (Enterprise Modern Design System)
   ========================================================================== */

:root {
  /* 默认明朗极简浅色主题 (Clean Light Theme) */
  --bg-page: #f8fafc;
  --bg-surface: #ffffff;
  --bg-subtle: #f1f5f9;
  --bg-hover: #f8fafc;
  --bg-input: #ffffff;
  --bg-sidebar: #ffffff;
  
  --border-color: #e2e8f0;
  --border-light: #edf2f7;
  --border-focus: #4f46e5;

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-dim: #94a3b8;

  --primary: #4f46e5;
  --primary-light: #eef2ff;
  --primary-hover: #4338ca;
  --primary-gradient: linear-gradient(135deg, #4f46e5 0%, #6366f1 50%, #818cf8 100%);

  --success: #059669;
  --success-light: #ecfdf5;
  --warning: #d97706;
  --warning-light: #fffbeb;
  --danger: #dc2626;
  --danger-light: #fef2f2;
  --info: #2563eb;
  --info-light: #eff6ff;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* 多层环境光自然阴影系统 (Ambient Layered Shadows) */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.04);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Plus Jakarta Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
  --sidebar-width: 200px;
  --transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 深色模式变量 (Dark Theme) */
body.dark-theme {
  --bg-page: #000000;
  --bg-surface: #111827;
  --bg-subtle: #1f2937;
  --bg-hover: #1e293b;
  --bg-input: #111827;
  --bg-sidebar: #0f172a;

  --border-color: #1f2937;
  --border-light: #162032;
  --border-focus: #6366f1;

  --text-primary: #f9fafb;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-dim: #64748b;

  --primary: #6366f1;
  --primary-light: rgba(99, 102, 241, 0.15);
  --primary-hover: #4f46e5;
  --primary-gradient: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);

  --success: #10b981;
  --success-light: rgba(16, 185, 129, 0.15);
  --warning: #f59e0b;
  --warning-light: rgba(245, 158, 11, 0.15);
  --danger: #f43f5e;
  --danger-light: rgba(244, 63, 94, 0.15);
  --info: #38bdf8;
  --info-light: rgba(56, 189, 248, 0.15);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 30px rgba(0, 0, 0, 0.6);
}

/* Base Resets & Viewport Canvas Background */
:root,
html {
  background-color: #f8fafc; /* 白天时底色 */
  color-scheme: light;
  scroll-behavior: smooth;
  overflow-y: scroll !important;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch; /* 启用 Safari / iOS 原生流畅触控与弹性回弹 */
  transition: background-color 0.25s ease;
}

html.light-theme,
:root.light-theme {
  background-color: #f8fafc !important;
  color-scheme: light;
}

html.dark-theme,
:root.dark-theme {
  background-color: #000000 !important; /* 夜间时匹配黑色 */
  color-scheme: dark;
}

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

body {
  font-family: var(--font-sans);
  background-color: var(--bg-page);
  color: var(--text-primary);
  line-height: 1.5;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.25s ease, color 0.25s ease;
}

body.light-theme {
  background-color: #f8fafc;
}

body.dark-theme {
  background-color: #000000;
}

/* 页面主体布局 */
.app-layout {
  display: flex;
  min-height: 100vh;
}

/* ==========================================================================
   1. 侧边栏 (Sidebar Navigation) - 紧凑利落现代化
   ========================================================================== */
.sidebar {
  width: var(--sidebar-width, 200px);
  background-color: var(--bg-sidebar);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  padding: 1.25rem 0.65rem;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
  transition: var(--transition);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.25rem 0.6rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
}

.brand-icon {
  width: 34px;
  height: 34px;
  background: var(--primary-gradient);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(79, 70, 229, 0.35);
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.brand-text h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  line-height: 1.2;
}

.brand-tagline {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.2px;
}

.version-tag {
  font-size: 0.62rem;
  background: var(--primary-light);
  color: var(--primary);
  border: 1px solid rgba(79, 70, 229, 0.2);
  padding: 1px 6px;
  border-radius: var(--radius-full);
  font-weight: 700;
  margin-left: auto;
  letter-spacing: 0.3px;
}

.nav-menu {
  margin-top: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  overflow-y: auto;
}

.nav-section-title {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-dim);
  font-weight: 700;
  padding: 0.85rem 0.65rem 0.35rem;
  white-space: nowrap;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.48rem 0.55rem;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 0.86rem;
  transition: var(--transition);
  position: relative;
  white-space: nowrap;
}

.nav-item span {
  white-space: nowrap;
}

.nav-item i {
  font-size: 0.95rem;
  width: 18px;
  text-align: center;
  color: var(--text-dim);
  transition: var(--transition);
  flex-shrink: 0;
}

.nav-item:hover {
  background-color: var(--bg-subtle);
  color: var(--text-primary);
}

.nav-item:hover i {
  color: var(--text-primary);
}

.nav-item.active {
  background-color: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
}

.nav-item.active i {
  color: var(--primary);
}

.nav-badge {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  flex-shrink: 0;
  white-space: nowrap;
}

.nav-item.active .nav-badge {
  background: rgba(79, 70, 229, 0.15);
  color: var(--primary);
  border-color: rgba(79, 70, 229, 0.25);
}

.nav-badge-accent {
  background: rgba(16, 185, 129, 0.12);
  color: var(--success);
  border-color: rgba(16, 185, 129, 0.25);
}

.nav-badge-tool {
  background: rgba(168, 85, 247, 0.12);
  color: #7e22ce;
  border-color: rgba(168, 85, 247, 0.25);
}

body.dark-theme .nav-badge-tool {
  color: #c084fc;
}

.sidebar-footer {
  padding-top: 0.75rem;
  padding-bottom: 0.25rem;
  border-top: 1px solid var(--border-color);
  margin-top: auto;
  width: 100%;
  box-sizing: border-box;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.48rem 0.55rem;
  border-radius: var(--radius-lg, 12px);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  user-select: none;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.user-profile:hover {
  background: var(--bg-subtle);
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.08);
  transform: translateY(-1px);
}

body.dark-theme .user-profile {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark-theme .user-profile:hover {
  background: rgba(30, 41, 59, 0.95);
  border-color: var(--primary);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.avatar-wrapper {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.avatar-wrapper .avatar {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
  border: 1.5px solid var(--border-color);
  box-shadow: var(--shadow-xs);
  transition: all 0.2s ease;
}

.avatar-wrapper.admin-avatar .avatar {
  border-color: #f59e0b;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.25);
}

.avatar-wrapper.viewer-avatar .avatar {
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.25);
}

.status-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--bg-surface);
}

.status-dot.online {
  background-color: var(--success);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
}

.user-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}

.user-role-row {
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
}

.user-role-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  line-height: 1.35;
  white-space: nowrap;
  letter-spacing: 0.02em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role-pill.role-admin {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.28);
}

body.dark-theme .user-role-pill.role-admin {
  background: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.35);
}

.user-role-pill.role-viewer {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
  border: 1px solid rgba(59, 130, 246, 0.28);
}

body.dark-theme .user-role-pill.role-viewer {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.35);
}

.user-name-row {
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
}

.user-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
  letter-spacing: 0.15px;
}

body.dark-theme .user-name {
  color: #e2e8f0;
}

.role-switch-badge-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--bg-hover);
  color: var(--text-dim);
  border: 1px solid var(--border-color);
  font-size: 0.68rem;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  margin-left: auto;
}

.user-profile:hover .role-switch-badge-btn {
  background: var(--primary-light);
  color: var(--primary);
  border-color: rgba(79, 70, 229, 0.3);
  transform: rotate(180deg);
}

.role-switch-icon {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-left: auto;
  opacity: 0.75;
}

/* ==========================================================================
   2. 主工作区与顶部栏 (Header & Workspace)
   ========================================================================== */
.main-content {
  margin-left: var(--sidebar-width, 200px);
  width: calc(100% - var(--sidebar-width, 200px));
  box-sizing: border-box;
  flex: 1;
  padding: 1.5rem 2rem;
  max-width: 1560px;
  min-width: 0;
}

.tab-pane {
  min-height: calc(100vh - 120px);
}


.top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  gap: 1.25rem;
  min-height: 48px;
  height: auto;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
}

.header-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  flex: 0 1 auto;
  min-width: 200px;
  max-width: 620px;
  overflow: visible;
}

.header-title-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  white-space: nowrap;
  overflow: visible;
}

.header-left h1 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text-primary);
  line-height: 1.2;
  margin: 0;
  white-space: nowrap;
}

.view-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: var(--radius-full);
  background: var(--primary-light);
  color: var(--primary);
  border: 1px solid rgba(79, 70, 229, 0.18);
  white-space: nowrap;
  letter-spacing: 0.2px;
  overflow: visible;
}

.view-chip i.fa-amazon,
.amz-header-icon {
  font-size: 0.95rem;
  display: inline-block;
  vertical-align: -1px;
  color: #ff9900 !important;
  width: auto;
  height: auto;
  overflow: visible;
}

.subtitle {
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.3;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
  margin-left: auto;
}

/* 实时汇率状态指示胶囊 (Live Rate Indicator Pill) */
.rate-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  padding: 0 0.75rem;
  height: 36px;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  box-shadow: var(--shadow-xs);
  cursor: default;
  transition: var(--transition);
  flex-shrink: 0;
  white-space: nowrap;
}

.rate-live-pill:hover {
  border-color: #cbd5e1;
  box-shadow: var(--shadow-sm);
}

.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--success);
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}

.pulse-dot::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  background-color: var(--success);
  opacity: 0.6;
  animation: pulseBeacon 1.8s infinite ease-out;
}

@keyframes pulseBeacon {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  70% {
    transform: scale(2.2);
    opacity: 0;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

.rate-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.2px;
}

.rate-val {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-primary);
  font-size: 0.82rem;
}

.rate-mode-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.2px;
  margin-left: 2px;
  transition: var(--transition);
}

.rate-mode-badge.live {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.rate-mode-badge.manual {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

/* 全局搜索框 (Spotlight Search) */
.global-search {
  position: relative;
  width: 220px;
  flex-shrink: 0;
}

.global-search input {
  width: 100%;
  height: 36px;
  padding: 0 0.85rem 0 2.2rem;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.82rem;
  outline: none;
  transition: var(--transition);
  box-shadow: var(--shadow-xs);
}

.global-search input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
  font-size: 0.82rem;
}

.shortcut-hint {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  padding: 1px 5px;
  border-radius: var(--radius-xs);
  font-size: 0.68rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* 主题切换按钮 */
.btn-theme-toggle {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow-xs);
}

.btn-theme-toggle:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
  border-color: #cbd5e1;
}

/* 顶部操作按钮固定高度与防挤压 */
#btn-open-export,
#btn-add-product {
  height: 36px;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 0 0.95rem;
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

/* 通用按钮系统 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: var(--transition);
  white-space: nowrap;
}

.btn-primary {
  background-color: var(--primary);
  color: #ffffff;
}

.btn-primary:hover {
  background-color: var(--primary-hover);
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
}

.btn-outline {
  background-color: var(--bg-surface);
  border-color: var(--border-color);
  color: var(--text-secondary);
  box-shadow: var(--shadow-xs);
}

.btn-outline:hover {
  background-color: var(--bg-subtle);
  color: var(--text-primary);
  border-color: var(--border-color);
}

.btn-danger {
  background-color: var(--danger-light);
  color: var(--danger);
  border-color: rgba(220, 38, 38, 0.2);
}

.btn-danger:hover {
  background-color: var(--danger);
  color: #ffffff;
}

.btn-outline-primary {
  background-color: var(--primary-light);
  border: 1px solid var(--primary);
  color: var(--primary);
  font-weight: 500;
}

.btn-outline-primary:hover:not(:disabled) {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
}

.btn-outline-primary:disabled {
  background-color: rgba(79, 70, 229, 0.05);
  border-color: rgba(79, 70, 229, 0.25);
  color: rgba(79, 70, 229, 0.55);
  cursor: not-allowed;
}

.btn-outline-primary:disabled i {
  color: rgba(79, 70, 229, 0.65);
}

.btn-outline-warning {
  background-color: var(--warning-light);
  border: 1px solid var(--warning);
  color: var(--warning);
  font-weight: 500;
}

.btn-outline-warning:hover:not(:disabled) {
  background-color: var(--warning);
  border-color: var(--warning);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.25);
}

.btn-outline-warning:disabled {
  background-color: rgba(217, 119, 6, 0.05);
  border-color: rgba(217, 119, 6, 0.25);
  color: rgba(217, 119, 6, 0.55);
  cursor: not-allowed;
}

.btn-outline-warning:disabled i {
  color: rgba(217, 119, 6, 0.65);
}

.btn-outline-danger {
  background-color: var(--danger-light);
  border: 1px solid var(--danger);
  color: var(--danger);
  font-weight: 500;
}

.btn-outline-danger:hover:not(:disabled) {
  background-color: var(--danger);
  border-color: var(--danger);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
}

.btn-outline-danger:disabled {
  background-color: rgba(220, 38, 38, 0.05);
  border-color: rgba(220, 38, 38, 0.25);
  color: rgba(220, 38, 38, 0.55);
  cursor: not-allowed;
}

.btn-outline-danger:disabled i {
  color: rgba(220, 38, 38, 0.65);
}

.btn-sm {
  padding: 0.35rem 0.7rem;
  font-size: 0.78rem;
  border-radius: var(--radius-sm);
}

.btn-xs {
  padding: 0.15rem 0.5rem;
  font-size: 0.72rem;
  line-height: 1.25;
  border-radius: var(--radius-sm);
  height: 22px;
}

.btn-icon {
  width: 34px;
  height: 34px;
  padding: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  border-radius: var(--radius-md);
}

.btn-icon:hover, .btn-icon.active {
  color: var(--primary);
  border-color: var(--primary);
  background-color: var(--primary-light);
}

/* ==========================================================================
   3. 紧凑精炼指标栏 (Compact Stats Strip) - 清晰无冗余
   ========================================================================== */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}

.kpi-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 0.85rem 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  min-width: 0;
}

.kpi-card:hover {
  border-color: #cbd5e1;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.kpi-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.bg-indigo { background: var(--primary-light); color: var(--primary); }
.bg-emerald { background: var(--success-light); color: var(--success); }
.bg-amber   { background: var(--warning-light); color: var(--warning); }
.bg-purple  { background: #f3e8ff; color: #7e22ce; }
.bg-rose    { background: var(--danger-light); color: var(--danger); }
.bg-blue    { background: var(--info-light); color: var(--info); }
.bg-cyan    { background: #ecfeff; color: #0891b2; }

body.dark-theme .bg-purple { background: rgba(168, 85, 247, 0.15); color: #c084fc; }
body.dark-theme .bg-cyan   { background: rgba(8, 145, 178, 0.15); color: #38bdf8; }

.kpi-data {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.kpi-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 500;
}

.kpi-value-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.kpi-value {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  margin: 1px 0;
  letter-spacing: -0.3px;
  font-variant-numeric: tabular-nums;
}

.text-amber { color: var(--warning) !important; }
.text-rose { color: var(--danger) !important; }

.kpi-trend {
  font-size: 0.68rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  line-height: 1.2;
}

#kpi-total-value-rmb {
  white-space: nowrap;
  font-size: 0.64rem;
  letter-spacing: -0.25px;
}

.kpi-trend.positive { color: var(--success); }
.kpi-trend.negative { color: var(--danger); }
.kpi-trend.neutral  { color: var(--text-dim); }

/* ==========================================================================
   4. 工具与快捷过滤栏 (Toolbar & Quick Status Pills)
   ========================================================================== */
.toolbar-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  margin-bottom: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: var(--shadow-xs);
  overflow: visible;
}

.toolbar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.75rem;
}

.toolbar-primary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.75rem;
  width: 100%;
}

.toolbar-supply-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.75rem;
  width: 100%;
  padding-top: 0.4rem;
  border-top: 1px dashed var(--border-color);
}

.toolbar-right-pill {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
}

.toolbar-right-pill .status-pill {
  height: 31px;
  box-sizing: border-box;
}

.toolbar-secondary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.65rem;
  width: 100%;
  padding-top: 0.45rem;
  border-top: 1px dashed var(--border-color);
  position: relative;
  z-index: 25;
  overflow: visible;
}

/* 状态快捷过滤胶囊 (Quick Status Pills) */
.quick-status-pills {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  overflow-x: auto;
  flex: 1 1 auto;
  min-width: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 0;
}

.quick-status-pills::-webkit-scrollbar {
  display: none;
}

.status-pill {
  border: 1px solid var(--border-color);
  background-color: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.28rem 0.7rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.status-pill:hover {
  background-color: var(--bg-subtle);
  color: var(--text-primary);
  border-color: #cbd5e1;
}

.status-pill.active {
  background-color: var(--text-primary);
  color: var(--bg-surface);
  border-color: var(--text-primary);
  font-weight: 600;
}

body.dark-theme .status-pill.active {
  background-color: #ffffff;
  color: #0b0f19;
  border-color: #ffffff;
}

.filter-pill-divider {
  width: 1px;
  height: 20px;
  background-color: var(--border-color);
  margin: 0 0.35rem;
  flex-shrink: 0;
}

.filter-pill-group-title {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 96px;
  flex-shrink: 0;
  margin-right: 0.25rem;
  white-space: nowrap;
  user-select: none;
}

.pill-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  display: inline-block;
}

.pill-dot.emerald { background-color: var(--success); }
.pill-dot.amber { background-color: var(--warning); }
.pill-dot.rose { background-color: var(--danger); }
.pill-dot.slate { background-color: var(--text-dim); }

/* 细分筛选标签行 (Sub-filter Chips) */
.sub-filter-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.75rem;
  background-color: var(--bg-subtle);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  overflow-x: auto;
  border: 1px solid var(--border-light);
}

.sub-filter-label {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.75rem;
  white-space: nowrap;
}

.sub-filter-chips {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.chip {
  padding: 2px 9px;
  border-radius: var(--radius-full);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.74rem;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.chip:hover {
  color: var(--text-primary);
  border-color: #cbd5e1;
}

.chip.active {
  background-color: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
  font-weight: 600;
}

.chip.chip-danger.active {
  background-color: var(--danger);
  border-color: var(--danger);
  color: #ffffff;
}

.chip.chip-danger:hover {
  border-color: rgba(220, 38, 38, 0.4);
  color: var(--danger);
}

/* 商业属性徽章 */
.attr-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
}

.attr-badge-sale {
  background: var(--info-light);
  color: var(--info);
}

.attr-badge-moq {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

body.dark-theme .attr-badge-moq {
  background: rgba(245, 158, 11, 0.18);
  color: #fcd34d;
  border-color: rgba(253, 230, 138, 0.35);
}

.attr-badge-source {
  background: var(--primary-light);
  color: var(--primary);
}

.attr-badge-positioning {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

.attr-badge-profit {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.attr-badge-market {
  background: #faf5ff;
  color: #7e22ce;
  border: 1px solid #e9d5ff;
}

body.dark-theme .attr-badge-market {
  background: rgba(126, 34, 206, 0.18);
  color: #d8b4fe;
  border-color: rgba(216, 180, 254, 0.35);
}

/* 样品验证与质量评级高亮徽章图标 (Drawer Top Highlight Badges) */
.attr-badge-sample {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 3px 9px;
  border-radius: var(--radius-xs, 4px);
  font-size: 0.76rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.attr-badge-sample.sample-verified {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.attr-badge-sample.sample-unverified {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

body.dark-theme .attr-badge-sample.sample-verified {
  background: rgba(16, 185, 129, 0.22);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.45);
}

body.dark-theme .attr-badge-sample.sample-unverified {
  background: rgba(245, 158, 11, 0.22);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.45);
}

.attr-badge-quality {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 3px 9px;
  border-radius: var(--radius-xs, 4px);
  font-size: 0.76rem;
  font-weight: 700;
  transition: all 0.2s ease;
}

.attr-badge-quality.quality-a {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(234, 88, 12, 0.22));
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.45);
  box-shadow: 0 1px 3px rgba(245, 158, 11, 0.15);
}

.attr-badge-quality.quality-b {
  background: rgba(59, 130, 246, 0.14);
  color: #1d4ed8;
  border: 1px solid rgba(59, 130, 246, 0.38);
}

.attr-badge-quality.quality-c {
  background: rgba(100, 116, 139, 0.14);
  color: #334155;
  border: 1px solid rgba(100, 116, 139, 0.35);
}

body.dark-theme .attr-badge-quality.quality-a {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.28), rgba(234, 88, 12, 0.35));
  color: #fde68a;
  border-color: rgba(253, 230, 138, 0.45);
  box-shadow: 0 1px 4px rgba(245, 158, 11, 0.3);
}

body.dark-theme .attr-badge-quality.quality-b {
  background: rgba(59, 130, 246, 0.24);
  color: #93c5fd;
  border-color: rgba(147, 197, 253, 0.45);
}

body.dark-theme .attr-badge-quality.quality-c {
  background: rgba(148, 163, 184, 0.22);
  color: #cbd5e1;
  border-color: rgba(203, 213, 225, 0.38);
}

.profit-high {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  background-color: var(--success-light);
  color: var(--success);
  font-weight: 600;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  border: 1px solid rgba(5, 150, 105, 0.2);
}

.profit-mid {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  background-color: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  border: 1px solid rgba(79, 70, 229, 0.2);
}

.profit-normal {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  background-color: var(--warning-light);
  color: var(--warning);
  font-weight: 600;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  border: 1px solid rgba(217, 119, 6, 0.2);
}

.profit-low {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  background-color: var(--danger-light);
  color: var(--danger);
  font-weight: 600;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  border: 1px solid rgba(220, 38, 38, 0.2);
}

/* 下拉筛选器 */
.filter-group {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: nowrap;
}

.filter-group-scrollable {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible !important;
  flex-wrap: wrap;
  padding: 2px 0;
}

.filter-group-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.custom-select, .custom-select-sm {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 0.45rem 2rem 0.45rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: 0.82rem;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 0.85rem;
  transition: var(--transition);
}

.custom-select:focus, .custom-select-sm:focus {
  border-color: var(--border-focus);
}

.custom-select-sm {
  padding: 0.25rem 1.6rem 0.25rem 0.5rem;
  font-size: 0.75rem;
}

.custom-select:disabled, .custom-select-sm:disabled {
  background-color: var(--bg-subtle, #f1f5f9);
  border-color: var(--border-color);
  color: var(--text-muted, #94a3b8);
  cursor: not-allowed;
  opacity: 0.72;
}

body.dark-theme .custom-select:disabled, body.dark-theme .custom-select-sm:disabled {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text-dim, #64748b);
}

.filter-select {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 0.32rem 1.65rem 0.32rem 0.65rem;
  border-radius: var(--radius-md);
  font-size: 0.78rem;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.45rem center;
  background-size: 0.75rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  height: 31px;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.filter-select:hover {
  border-color: #cbd5e1;
}

body.dark-theme .filter-select:hover {
  border-color: #475569;
}

.filter-select:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

#filter-category {
  width: 125px;
}

#filter-subcategory {
  width: 130px;
}

#filter-brand {
  width: 120px;
}

#filter-positioning {
  width: 120px;
}

#filter-market {
  width: 120px;
}

/* ==========================================================================
   方案一：全局定制浮动下拉组件系统 (Global Enhanced Floating Custom Select Engine)
   彻底杜绝 macOS / 浏览器原生菜单向上翻转遮挡参数标题的问题
   ========================================================================== */

.enhanced-select-wrap {
  position: relative;
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.enhanced-select-wrap.inline-wrap {
  display: inline-block;
  width: auto;
  vertical-align: middle;
  flex-shrink: 0;
}

/* 隐藏底层原生 select，但仍保留其在 DOM 中用于表单数据提交与验证 */
.enhanced-hidden-select {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* 定制选择框触发器：与原生 .custom-select 视觉 100% 像素级一致 */
.enhanced-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: 0.82rem;
  height: 36px;
  box-sizing: border-box;
  outline: none;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.enhanced-select-trigger:hover:not(.is-disabled) {
  border-color: #cbd5e1;
}

body.dark-theme .enhanced-select-trigger:hover:not(.is-disabled) {
  border-color: #475569;
}

.enhanced-select-wrap.is-open {
  z-index: 1051;
}

.enhanced-select-wrap.is-open .enhanced-select-trigger,
.enhanced-select-trigger:focus:not(.is-disabled) {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.enhanced-select-trigger.is-disabled {
  background-color: var(--bg-subtle, #f1f5f9) !important;
  border-color: var(--border-color) !important;
  color: var(--text-muted, #94a3b8) !important;
  cursor: not-allowed !important;
  opacity: 0.72;
}

body.dark-theme .enhanced-select-trigger.is-disabled {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: var(--text-dim, #64748b) !important;
}

.enhanced-select-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  text-align: left;
}

.enhanced-select-arrow {
  color: #64748b;
  font-size: 0.72rem;
  margin-left: 0.5rem;
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.enhanced-select-wrap.is-open .enhanced-select-arrow {
  transform: rotate(180deg);
  color: var(--primary);
}

/* 紧凑型尺寸适配 (filter-select & sm) */
.enhanced-select-wrap.is-filter .enhanced-select-trigger {
  padding: 0.32rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 500;
  height: 31px;
}

.enhanced-select-wrap.is-sm .enhanced-select-trigger {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  height: 28px;
}

/* 核心关键：浮层菜单 100% 严格朝下方弹出展开，彻底杜绝向上覆盖遮挡参数标题 */
.enhanced-select-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: 260px;
  max-height: 240px;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
  z-index: 1065 !important;
  padding: 0.35rem 0;
  display: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  pointer-events: none;
}

body.dark-theme .enhanced-select-menu {
  background-color: var(--bg-surface);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 28px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
}

.enhanced-select-wrap.is-open .enhanced-select-menu {
  display: block;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* 下拉菜单单个选项项 */
.enhanced-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.75rem;
  font-size: 0.8rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
  user-select: none;
  gap: 0.5rem;
}

.enhanced-select-wrap.is-filter .enhanced-select-option,
.enhanced-select-wrap.is-sm .enhanced-select-option {
  padding: 0.32rem 0.65rem;
  font-size: 0.75rem;
}

.enhanced-select-option:hover:not(.is-disabled) {
  background-color: var(--bg-hover);
  color: var(--primary);
}

.enhanced-select-option.is-selected {
  background-color: var(--primary-light, rgba(79, 70, 229, 0.08));
  color: var(--primary);
  font-weight: 600;
}

.enhanced-select-option.is-disabled {
  color: var(--text-dim, #94a3b8);
  cursor: not-allowed;
  opacity: 0.55;
}

.enhanced-select-option .option-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.enhanced-select-option .option-check {
  font-size: 0.72rem;
  color: var(--primary);
  display: none;
  flex-shrink: 0;
}

.enhanced-select-option.is-selected .option-check {
  display: inline-block;
}

.enhanced-select-empty {
  padding: 0.75rem 0.5rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* 筛选栏固定宽度适配 */
.enhanced-select-wrap[data-select-id="filter-category"] { width: 125px; }
.enhanced-select-wrap[data-select-id="filter-subcategory"] { width: 130px; }
.enhanced-select-wrap[data-select-id="filter-brand"] { width: 120px; }
.enhanced-select-wrap[data-select-id="filter-positioning"] { width: 120px; }
.enhanced-select-wrap[data-select-id="filter-market"] { width: 120px; }
.enhanced-select-wrap[data-select-id="page-size"] { width: 95px; }

/* 数据看板多维透视筛选栏固定宽度适配 */
.enhanced-select-wrap[data-select-id="analytics-filter-cat"] { width: 125px; }
.enhanced-select-wrap[data-select-id="analytics-filter-brand"] { width: 115px; }
.enhanced-select-wrap[data-select-id="analytics-filter-pos"] { width: 120px; }
.enhanced-select-wrap[data-select-id="analytics-filter-market"] { width: 115px; }
.enhanced-select-wrap[data-select-id="analytics-filter-sale-type"] { width: 120px; }
.enhanced-select-wrap[data-select-id="analytics-filter-dev-source"] { width: 125px; }
.enhanced-select-wrap[data-select-id="analytics-filter-status"] { width: 105px; }

/* Cascading category & subcategory pair in secondary toolbar */
.cascade-filter-pair {
  display: inline-flex;
  align-items: center;
  position: relative;
  vertical-align: middle;
  flex-shrink: 0;
  overflow: visible !important;
}

.cascade-subcat-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 165px;
  opacity: 1;
  transform: translateX(0);
  margin-left: 0.35rem;
  transition: max-width 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.26s cubic-bezier(0.16, 1, 0.3, 1),
              margin 0.25s ease;
  overflow: visible;
  white-space: nowrap;
  pointer-events: auto;
  vertical-align: middle;
}

.cascade-subcat-wrap:not(.hidden) {
  overflow: visible !important;
}

.cascade-subcat-wrap.hidden {
  display: inline-flex !important;
  max-width: 0 !important;
  opacity: 0 !important;
  transform: translateX(-10px) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.cascade-subcat-wrap.hidden * {
  opacity: 0 !important;
  pointer-events: none !important;
}

.cascade-arrow-icon {
  font-size: 0.68rem;
  color: var(--primary);
  opacity: 0.75;
  flex-shrink: 0;
}

/* Right-aligned Filter Reset Wrap */
.filter-reset-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: 0.5rem;
}

.btn-reset-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.28rem 0.75rem;
  width: auto;
  min-width: 66px;
  height: 31px;
  line-height: 1;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background-color: var(--bg-surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  box-sizing: border-box;
}

.btn-reset-filter:hover {
  color: var(--primary);
  border-color: rgba(99, 102, 241, 0.4);
  background-color: var(--primary-subtle);
}

.btn-reset-filter i {
  font-size: 0.74rem;
  transition: transform 0.35s ease;
  line-height: 1;
}

.btn-reset-filter:hover i {
  transform: rotate(-180deg);
}

.btn-reset-text {
  font-size: 0.78rem;
  line-height: 1;
  font-weight: 500;
}

/* View Switchers & Compact Segmented Toggle */
.view-switchers {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  margin-left: auto;
}

.view-toggle-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background-color: var(--bg-subtle);
  padding: 2px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}

.view-toggle-group .btn-icon {
  width: 28px;
  height: 28px;
  border-radius: calc(var(--radius-md) - 2px);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  cursor: pointer;
  padding: 0;
}

.view-toggle-group .btn-icon:hover {
  color: var(--text-primary);
  background-color: rgba(0, 0, 0, 0.05);
}

body.dark-theme .view-toggle-group .btn-icon:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.view-toggle-group .btn-icon.active {
  background-color: var(--bg-surface);
  color: var(--primary);
  box-shadow: var(--shadow-xs);
  font-weight: 600;
}

body.dark-theme .view-toggle-group .btn-icon.active {
  background-color: var(--bg-card);
  color: #818cf8;
}

.batch-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--primary-light);
  border: 1px solid rgba(79, 70, 229, 0.25);
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-md);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--primary);
}

/* ==========================================================================
   5. 数据表格 (Clean & Crisp Data Table)
   ========================================================================== */
.data-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: var(--transition);
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
  position: relative;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.85rem;
}

.data-table th {
  background-color: var(--bg-subtle);
  color: var(--text-muted);
  font-weight: 600;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.76rem;
  user-select: none;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 10;
}

body.dark-theme .data-table th {
  background-color: #1a2234;
}

.data-table th.sortable {
  cursor: pointer;
  transition: color 0.15s ease;
}

.data-table th.sortable:hover {
  color: var(--text-primary);
}

.data-table th.sortable i {
  font-size: 0.7rem;
  margin-left: 2px;
  color: var(--text-dim);
}

.data-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
  color: var(--text-primary);
  background-color: var(--bg-surface);
  transition: background-color 0.15s ease;
}

.data-table tbody tr:hover td {
  background-color: var(--bg-hover);
}

.product-img-cell {
  position: relative;
  overflow: visible;
}

.product-img-thumb {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-md);
  object-fit: cover;
  border: 1px solid var(--border-color);
  background-color: var(--bg-subtle);
  display: block;
  margin: 0 auto;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.24s ease, border-color 0.24s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  cursor: zoom-in;
  position: relative;
  z-index: 1;
}

.product-img-thumb:hover {
  transform: scale(2); /* 60px * 2 = 120px */
  box-shadow: 0 16px 32px -4px rgba(15, 23, 42, 0.28), 0 6px 12px -2px rgba(15, 23, 42, 0.15);
  border-color: var(--primary);
  z-index: 99;
}

body.dark-theme .product-img-thumb:hover {
  box-shadow: 0 16px 32px -4px rgba(0, 0, 0, 0.65), 0 6px 12px -2px rgba(0, 0, 0, 0.45);
  border-color: var(--primary);
}

.product-sku {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-light);
  border: 1px solid rgba(79, 70, 229, 0.18);
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  display: inline-block;
  letter-spacing: 0.3px;
}

.product-title {
  font-weight: 600;
  color: var(--text-primary);
  display: block;
  font-size: 0.86rem;
  line-height: 1.45;
  word-break: break-word;
}

.product-desc-sm {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* 商品类型单元格 (Category, Brand & Positioning Badges) */
.product-type-cell {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
}

.product-type-main {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.product-category-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}

.product-category-badge i {
  color: var(--primary);
}

.product-brand-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-light);
  border: 1px solid rgba(37, 99, 235, 0.2);
  padding: 0 5px;
  border-radius: var(--radius-xs);
  line-height: 1.5;
  white-space: nowrap;
}

body.dark-theme .product-brand-tag {
  background: rgba(37, 99, 235, 0.22);
  border-color: rgba(96, 165, 250, 0.35);
  color: #93c5fd;
}

.product-subcategory-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.72rem;
  font-weight: 500;
  color: #0f766e;
  background: rgba(20, 184, 166, 0.12);
  border: 1px solid rgba(20, 184, 166, 0.3);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  line-height: 1.4;
  white-space: nowrap;
}

.product-subcategory-badge i {
  font-size: 0.65rem;
  color: #0d9488;
  opacity: 0.9;
}

body.dark-theme .product-subcategory-badge {
  background: rgba(13, 148, 136, 0.2);
  border-color: rgba(45, 212, 191, 0.35);
  color: #5eead4;
}

body.dark-theme .product-subcategory-badge i {
  color: #2dd4bf;
}

.product-type-badges {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

/* 状态徽章 (Status Badges) - 柔和点缀 */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  display: inline-block;
}

.badge-published {
  background-color: var(--success-light);
  color: var(--success);
}
.badge-published::before { background-color: var(--success); }

.badge-draft {
  background-color: var(--bg-subtle);
  color: var(--text-muted);
}
.badge-draft::before { background-color: var(--text-dim); }

.badge-archived {
  background-color: var(--bg-subtle);
  color: var(--text-dim);
}
.badge-archived::before { background-color: var(--text-dim); }

/* 操作按钮 */
.action-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}

.action-btn {
  background: transparent;
  border: 1px solid transparent;
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.8rem;
  transition: var(--transition);
}

.action-btn:hover {
  background-color: var(--bg-subtle);
  color: var(--text-primary);
  border-color: var(--border-color);
}

.action-btn.delete:hover {
  background-color: var(--danger-light);
  color: var(--danger);
  border-color: transparent;
}

/* 分页条 */
.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 1rem;
  background-color: var(--bg-surface);
  border-top: 1px solid var(--border-color);
  font-size: 0.78rem;
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: 0.75rem;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.page-buttons {
  display: flex;
  gap: 3px;
}

.page-btn {
  min-width: 28px;
  height: 28px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.78rem;
  cursor: pointer;
  transition: var(--transition);
}

.page-btn:hover {
  background-color: var(--bg-subtle);
  color: var(--text-primary);
}

.page-btn.active {
  background-color: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
  font-weight: 600;
}

.page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ==========================================================================
   6. 卡片视图 (Cards Grid View)
   ========================================================================== */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  gap: 1.25rem;
}

.product-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  display: flex;
  flex-direction: column;
  position: relative;
}

.product-card:hover {
  border-color: rgba(79, 70, 229, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 10px 25px -4px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
}

.card-img-wrapper {
  height: 165px;
  position: relative;
  overflow: hidden;
  background: var(--bg-subtle);
}

.card-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.product-card:hover .card-img-wrapper img {
  transform: scale(1.05);
}

/* Image floating overlay chips */
.card-img-overlay-top {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  z-index: 2;
}

.card-sku-chip {
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  font-size: 0.68rem;
  font-family: var(--font-mono, monospace);
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 20px;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.card-sku-chip i {
  font-size: 0.65rem;
  opacity: 0.8;
}

.card-status-chip {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.card-status-chip.status-ready {
  background: rgba(16, 185, 129, 0.9);
  color: #fff;
}

.card-status-chip.status-custom {
  background: rgba(245, 158, 11, 0.9);
  color: #fff;
}

.card-brand-chip {
  position: absolute;
  bottom: 8px;
  left: 10px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #1e293b;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  z-index: 2;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.dark-theme .card-brand-chip {
  background: rgba(30, 41, 59, 0.92);
  color: #f1f5f9;
}

.card-body {
  padding: 0.95rem 1rem 0.85rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Category Breadcrumb trail */
.card-category-trail {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-category-trail i {
  font-size: 0.68rem;
  color: var(--primary);
  opacity: 0.8;
}

.card-category-trail .trail-sep {
  opacity: 0.45;
  font-size: 0.65rem;
}

.card-category-trail .trail-sub {
  color: var(--text-secondary);
  font-weight: 500;
}

/* Card Title */
.card-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.45rem;
  line-height: 1.38;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

/* Card Tag Row */
.card-tags-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-bottom: 0.65rem;
}

.card-tag-pill {
  font-size: 0.68rem;
  font-weight: 500;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  line-height: 1.2;
}

.card-tag-positioning {
  background: rgba(79, 70, 229, 0.08);
  color: var(--primary);
  border: 1px solid rgba(79, 70, 229, 0.15);
}

.card-tag-market {
  background: rgba(14, 165, 233, 0.08);
  color: #0284c7;
  border: 1px solid rgba(14, 165, 233, 0.15);
}

body.dark-theme .card-tag-positioning {
  background: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
}

body.dark-theme .card-tag-market {
  background: rgba(14, 165, 233, 0.15);
  color: #7dd3fc;
}

/* 2x2 Structured Specifications Matrix */
.card-specs-matrix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 0.5rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 6px);
  padding: 0.5rem 0.65rem;
  margin-bottom: 0.75rem;
}

.specs-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.specs-item-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  line-height: 1.1;
}

.specs-item-value {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.specs-item-value.accent {
  color: var(--primary);
}

/* Financial & Pricing Banner */
.card-pricing-banner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: auto;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border-color);
}

.card-price-block {
  display: flex;
  flex-direction: column;
}

.card-usd-price {
  font-size: 1.2rem;
  font-weight: 800;
  color: #059669;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

body.dark-theme .card-usd-price {
  color: #10b981;
}

.card-rmb-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.card-margin-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.card-margin-pill {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 12px;
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.card-margin-pill.warning {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
}

.card-margin-pill.danger {
  background: var(--danger-light);
  color: var(--danger);
}

.card-dev-cost {
  font-size: 0.68rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Card Footer Actions */
.card-footer-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.75rem;
}

.card-footer-actions .btn {
  flex: 1;
  font-size: 0.75rem;
  padding: 0.35rem 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.card-footer-actions .btn-card-delete {
  flex: 0 0 auto;
  padding: 0.35rem 0.6rem;
  color: var(--text-muted);
  transition: var(--transition);
}

.card-footer-actions .btn-card-delete:hover {
  color: #ef4444;
  border-color: #ef4444;
  background-color: rgba(239, 68, 68, 0.08);
}

/* ==========================================================================
   7. 统计看板与图表 (Professional BI Analytics Dashboard - Zero Inventory)
   ========================================================================== */

/* Top Control & Filter Toolbar */
.analytics-toolbar-card {
  padding: 0.85rem 1.15rem;
  margin-bottom: 1.15rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.analytics-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.analytics-title-group {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.analytics-icon-badge {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.analytics-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.35;
}

.analytics-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 3px 0 0 0;
  line-height: 1.4;
}

.analytics-header-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.analytics-currency-wrap {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.analytics-control-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.analytics-btn-group {
  display: inline-flex;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  padding: 2px;
  border: 1px solid var(--border-color);
}

.analytics-toggle-btn {
  border: none;
  background: transparent;
  padding: 3px 9px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.analytics-toggle-btn:hover {
  color: var(--text-primary);
}

.analytics-toggle-btn.active {
  background: var(--bg-surface);
  color: var(--primary);
  box-shadow: var(--shadow-xs);
}

.analytics-live-badge {
  font-size: 0.75rem;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--bg-subtle);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
  user-select: none;
}

.live-pulse-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: livePulse 2s infinite;
}

@keyframes livePulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

/* Row 2: Filter row */
.analytics-filter-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border-color);
  width: 100%;
}

#analytics-filter-cat { width: 125px; }
#analytics-filter-brand { width: 115px; }
#analytics-filter-pos { width: 120px; }
#analytics-filter-market { width: 115px; }
#analytics-filter-sale-type { width: 120px; }
#analytics-filter-dev-source { width: 125px; }
#analytics-filter-status { width: 105px; }

/* 4 Executive PIM Commercial KPI Cards Grid */
.analytics-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
}

@media (max-width: 1024px) {
  .analytics-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .analytics-kpi-grid {
    grid-template-columns: 1fr;
  }
}

.analytics-kpi-card {
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: var(--transition);
}

.analytics-kpi-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: #cbd5e1;
}

body.dark-theme .analytics-kpi-card:hover {
  border-color: #374151;
}

.kpi-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.kpi-title,
.kpi-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.1px;
}

.kpi-icon-bubble,
.kpi-icon-pill {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
  box-shadow: var(--shadow-xs);
}

.kpi-icon-bubble.bg-indigo, .kpi-icon-pill.bg-indigo { background: rgba(99, 102, 241, 0.12); color: #6366f1; }
.kpi-icon-bubble.bg-emerald, .kpi-icon-pill.bg-emerald { background: rgba(16, 185, 129, 0.12); color: #10b981; }
.kpi-icon-bubble.bg-amber, .kpi-icon-pill.bg-amber { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }
.kpi-icon-bubble.bg-purple, .kpi-icon-pill.bg-purple { background: rgba(168, 85, 247, 0.12); color: #a855f7; }
.kpi-icon-bubble.bg-cyan, .kpi-icon-pill.bg-sky, .kpi-icon-bubble.bg-sky { background: rgba(14, 165, 233, 0.12); color: #0ea5e9; }

.kpi-body,
.kpi-value-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 0.35rem 0 0.65rem;
}

.kpi-curr {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.kpi-num {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  font-family: var(--font-mono);
}

.kpi-unit {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 2px;
}

.kpi-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--border-color);
  font-size: 0.72rem;
  white-space: nowrap;
}

.kpi-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 600;
  border-radius: var(--radius-xs);
  padding: 1px 5px;
}

.kpi-pill-published {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}

.kpi-pill-draft {
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-muted);
}

.kpi-sub-text {
  color: var(--text-muted);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kpi-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 600;
  flex-shrink: 0;
  white-space: nowrap;
}

.kpi-badge-info {
  background: var(--info-light);
  color: var(--info);
  border: 1px solid rgba(37, 99, 235, 0.18);
}

.kpi-badge-success {
  background: var(--success-light);
  color: var(--success);
  border: 1px solid rgba(5, 150, 105, 0.18);
}

.kpi-badge-warning {
  background: var(--warning-light);
  color: var(--warning);
  border: 1px solid rgba(217, 119, 6, 0.18);
}

.kpi-badge-danger {
  background: var(--danger-light);
  color: var(--danger);
  border: 1px solid rgba(220, 38, 38, 0.18);
}

.kpi-badge-neutral {
  background: var(--bg-subtle);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
}

.kpi-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.72rem;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: var(--transition);
}

.kpi-link:hover {
  text-decoration: underline;
  color: var(--primary-hover);
}

/* Multi-dimensional Charts Matrix */
.analytics-charts-matrix {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

@media (max-width: 992px) {
  .analytics-charts-matrix {
    grid-template-columns: 1fr;
  }
  .analytics-charts-matrix .chart-card.full-width {
    grid-column: span 1;
  }
}

.analytics-charts-matrix .chart-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}

.analytics-charts-matrix .chart-card:hover {
  box-shadow: var(--shadow-md);
  border-color: #cbd5e1;
}

body.dark-theme .analytics-charts-matrix .chart-card:hover {
  border-color: #374151;
}

.analytics-charts-matrix .chart-card.full-width {
  grid-column: span 2;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.95rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-surface);
}

.chart-card .card-header {
  min-height: 64px;
  gap: 0.85rem;
}

.chart-card .card-header > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
}

.card-header h3 {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-subtitle {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 3px;
  display: block;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chart-wrapper {
  position: relative;
  height: 320px;
  width: 100%;
  padding: 1rem 1.25rem 1.25rem;
}

.chart-header-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.25;
}

.chart-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.chart-curr-tag {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-light);
  padding: 2px 8px;
  border-radius: var(--radius-xs);
}

/* Actionable Insights Table */
.analytics-insights-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  padding: 1.1rem 1.25rem;
}

.analytics-insights-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.insights-summary-pill {
  font-size: 0.74rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.insights-summary-pill.pill-warning {
  background: var(--warning-light);
  color: var(--warning);
}

.insights-summary-pill.pill-success {
  background: var(--success-light);
  color: var(--success);
}

.insights-summary-pill.pill-neutral {
  background: var(--bg-subtle);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
}

.analytics-insights-table {
  width: 100%;
  border-collapse: collapse;
}

.analytics-insights-table th {
  background: var(--bg-subtle);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

.analytics-insights-table td {
  padding: 0.75rem 0.9rem;
  font-size: 0.8rem;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}

.analytics-insights-table tr:hover {
  background: var(--bg-hover);
}

.sku-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-light);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  white-space: nowrap;
}

.insight-prod-cell {
  max-width: 220px;
}

.prod-name-title {
  font-weight: 600;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.category-brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cat-text {
  font-weight: 500;
  color: var(--text-primary);
  font-size: 0.78rem;
}

.brand-text {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.analytics-action-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 320px;
}

.analytics-action-cell .badge::before {
  display: none !important;
}

.analytics-action-text {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.35;
}

.color-success { color: var(--success) !important; }
.color-warning { color: var(--warning) !important; }
.color-danger { color: var(--danger) !important; }

/* Custom Badge Flavors */
.badge-subtle {
  background: var(--bg-subtle);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}
.badge-subtle::before { display: none !important; }

.badge-outline {
  background: transparent;
  color: var(--text-muted);
  border: 1px dashed var(--border-color);
}
.badge-outline::before { display: none !important; }

.badge-neutral {
  background: var(--bg-subtle);
  color: var(--text-muted);
}
.badge-neutral::before { display: none !important; }

.badge-success {
  background: var(--success-light);
  color: var(--success);
}
.badge-success::before { display: none !important; }

.badge-warning {
  background: var(--warning-light);
  color: var(--warning);
}
.badge-warning::before { display: none !important; }

.badge-danger {
  background: var(--danger-light);
  color: var(--danger);
}
.badge-danger::before { display: none !important; }

.badge-info {
  background: var(--info-light);
  color: var(--info);
}
.badge-info::before { display: none !important; }

/* ==========================================================================
   8. 分类与品牌管理 (Categories & Brands)
   ========================================================================== */
.two-column-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

/* ==========================================================================
   8. 自定义属性与品类品牌矩阵管理 (Custom Attributes & Matrices)
   ========================================================================== */
.custom-attr-header {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 0.95rem 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.custom-attr-header-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.custom-attr-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.custom-attr-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-light);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(79, 70, 229, 0.18);
  margin-left: 0.35rem;
  vertical-align: middle;
}

.custom-attr-title-wrap h2 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.35;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.custom-attr-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  max-width: 780px;
  line-height: 1.4;
  margin: 0;
}

.custom-attr-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}

/* 统计横条 */
.attr-stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-color);
}

.attr-stat-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-md);
  transition: var(--transition);
}

.attr-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--border-focus);
}

.attr-stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.bg-indigo-soft { background: #eef2ff; color: #4f46e5; }
.bg-teal-soft { background: #f0fdfa; color: #0d9488; }
.bg-amber-soft { background: #fffbeb; color: #d97706; }
.bg-purple-soft { background: #faf5ff; color: #9333ea; }

body.dark-theme .bg-indigo-soft { background: rgba(79, 70, 229, 0.2); color: #818cf8; }
body.dark-theme .bg-teal-soft { background: rgba(13, 148, 136, 0.2); color: #2dd4bf; }
body.dark-theme .bg-amber-soft { background: rgba(217, 119, 6, 0.2); color: #fbbf24; }
body.dark-theme .bg-purple-soft { background: rgba(147, 51, 234, 0.2); color: #c084fc; }

.text-teal { color: #0d9488 !important; }
.text-amber { color: #d97706 !important; }
.text-purple { color: #9333ea !important; }

body.dark-theme .text-teal { color: #2dd4bf !important; }
body.dark-theme .text-amber { color: #fbbf24 !important; }
body.dark-theme .text-purple { color: #c084fc !important; }

.attr-stat-content {
  display: flex;
  flex-direction: column;
}

.attr-stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
}

.attr-stat-val {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
}

.attr-stat-subtext {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.15rem;
  line-height: 1.25;
}

/* SKU 编码中心顶部 4 大实时模块对齐规范:
   前 3 行（指标名称、大字数值、说明小字首行）跨 4 个卡片像素级严格水平对齐；
   第 4 个卡片（当前自增流水号）当数据文本过长时，支持自动折行并扩展为第 4 行，前 3 行依旧严格同其它模块对齐 */
#tab-sku-rules .attr-stat-card {
  align-items: flex-start;
}

#tab-sku-rules .attr-stat-icon {
  margin-top: 2px;
  flex-shrink: 0;
}

#tab-sku-rules .attr-stat-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

#tab-sku-rules .attr-stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.25;
  height: 1.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

#tab-sku-rules .attr-stat-val {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  height: 1.7rem;
  display: flex;
  align-items: baseline;
  margin: 0.15rem 0;
}

#tab-sku-rules .attr-stat-subtext {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.35;
  margin-top: 0.15rem;
  min-height: 1.1rem;
}

#tab-sku-rules #kpi-sku-current-seq-sub,
#tab-sku-rules .attr-stat-subtext-wrap {
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 主双栏网格 */
.custom-attr-grid {
  display: grid;
  grid-template-columns: 1.18fr 1fr;
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 1400px) {
  .custom-attr-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) {
  .custom-attr-grid {
    grid-template-columns: 1fr;
  }
}

.custom-attr-card {
  padding: 0;
  overflow: hidden;
}

.custom-attr-card .card-header {
  padding: 0.85rem 1.15rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: nowrap;
}

.custom-attr-card .card-header-title-group {
  flex-shrink: 0;
  min-width: 0;
}

.custom-attr-card .card-header-title-group h3 {
  font-size: 0.96rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}

.custom-attr-card .card-header-hint {
  font-size: 0.73rem;
  color: var(--text-muted);
  margin-top: 2px;
  display: block;
  white-space: nowrap;
}

.custom-attr-card .card-header-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}

.custom-attr-card .card-header-tools .dict-search-wrap {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
  width: 220px;
  margin: 0;
}

.custom-attr-card .card-header-tools .dict-search-input {
  width: 100%;
  box-sizing: border-box;
}

/* 一体化筛选与搜索 Combobox (可输入亦可下拉选择) */
.attr-combo-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 140px;
  max-width: 210px;
  width: auto;
  flex-shrink: 1;
}

.attr-combo-wrap .combo-leading-icon {
  position: absolute;
  left: 9px;
  color: var(--primary);
  font-size: 0.8rem;
  pointer-events: none;
  z-index: 2;
  opacity: 0.85;
}

.attr-combo-wrap .combo-input {
  width: 100%;
  padding: 0.4rem 2.7rem 0.4rem 2rem;
  font-size: 0.8rem;
  font-weight: 500;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  outline: none;
  transition: var(--transition);
  box-shadow: var(--shadow-xs);
  text-overflow: ellipsis;
}

.attr-combo-wrap .combo-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}

.attr-combo-wrap .combo-clear-btn {
  position: absolute;
  right: 23px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  z-index: 2;
  border-radius: 50%;
  transition: var(--transition);
}

.attr-combo-wrap .combo-clear-btn:hover {
  color: var(--danger);
  background-color: rgba(239, 68, 68, 0.1);
}

.attr-combo-wrap .combo-arrow-btn {
  position: absolute;
  right: 6px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  z-index: 2;
  transition: transform 0.2s ease, color 0.2s ease;
}

.attr-combo-wrap .combo-arrow-btn:hover {
  color: var(--primary);
}

.attr-combo-wrap.is-open .combo-arrow-btn i {
  transform: rotate(180deg);
}

/* Combobox 下拉浮层 */
.combo-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  max-height: 260px;
  overflow-y: auto;
  z-index: 1050;
  padding: 0.35rem 0;
  display: flex;
  flex-direction: column;
}

.combo-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.75rem;
  font-size: 0.78rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  user-select: none;
}

.combo-dropdown-item:hover,
.combo-dropdown-item.is-selected {
  background-color: var(--bg-hover);
  color: var(--primary);
}

.combo-dropdown-item.is-selected {
  font-weight: 600;
}

.combo-item-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combo-item-label i {
  font-size: 0.75rem;
  opacity: 0.8;
  width: 14px;
  text-align: center;
}

.combo-item-badge {
  font-size: 0.68rem;
  padding: 0.1rem 0.45rem;
  border-radius: 10px;
  background: var(--bg-subtle);
  color: var(--text-muted);
  white-space: nowrap;
  margin-left: 0.5rem;
}

.combo-dropdown-empty {
  padding: 0.75rem 0.5rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.attr-filter-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.attr-filter-select-wrap i {
  position: absolute;
  left: 9px;
  color: var(--primary);
  font-size: 0.78rem;
  pointer-events: none;
  z-index: 1;
  opacity: 0.85;
}

.attr-dropdown-select {
  appearance: none;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 0.38rem 1.85rem 0.38rem 1.95rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  transition: var(--transition);
  max-width: 175px;
  min-width: 130px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  background-size: 0.8rem;
  box-shadow: var(--shadow-xs);
}

.attr-dropdown-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}

body.dark-theme .attr-dropdown-select {
  background-color: var(--bg-surface);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
}

.attr-search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.attr-search-box i {
  position: absolute;
  left: 10px;
  color: var(--text-muted);
  font-size: 0.8rem;
  pointer-events: none;
}

.attr-search-box input {
  padding: 0.38rem 0.75rem 0.38rem 1.85rem;
  font-size: 0.8rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-primary);
  width: 130px;
  transition: var(--transition);
}

.attr-search-box input:focus {
  outline: none;
  border-color: var(--primary);
  width: 165px;
}

/* 分类卡片容器 */
.category-cards-container {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.category-manage-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: var(--transition);
  overflow: hidden;
}

.category-manage-card:hover {
  border-color: #cbd5e1;
  box-shadow: var(--shadow-sm);
}

body.dark-theme .category-manage-card:hover {
  border-color: #374151;
}

.cat-manage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-color);
}

.cat-manage-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.cat-avatar-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

body.dark-theme .cat-avatar-icon {
  background: rgba(79, 70, 229, 0.25);
  color: #a5b4fc;
}

.cat-manage-name {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text-primary);
}

.cat-prod-badge {
  font-size: 0.72rem;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
}

.cat-manage-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-icon-soft {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  font-size: 0.8rem;
}

.btn-icon-soft:hover {
  background: var(--bg-surface);
  color: var(--primary);
}

.btn-icon-soft.text-danger:hover {
  background: var(--danger-light);
  color: var(--danger);
}

.cat-manage-body {
  padding: 0.9rem 1rem;
}

.subcat-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.65rem;
}

.subcat-label-text {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.subcat-count-pill {
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--bg-subtle);
  color: var(--text-muted);
}

.subcategories-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
}

.subcat-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: #f0fdfa;
  border: 1px solid #ccfbf1;
  color: #0f766e;
  font-size: 0.78rem;
  transition: var(--transition);
}

body.dark-theme .subcat-chip {
  background: rgba(13, 148, 136, 0.15);
  border-color: rgba(45, 212, 191, 0.25);
  color: #2dd4bf;
}

.subcat-chip:hover {
  border-color: #0d9488;
  background: #e6fffa;
}

body.dark-theme .subcat-chip:hover {
  background: rgba(13, 148, 136, 0.25);
}

.subcat-chip-text {
  font-weight: 500;
}

.subcat-chip-count {
  font-size: 0.7rem;
  background: rgba(13, 148, 136, 0.12);
  padding: 1px 5px;
  border-radius: 8px;
  color: #0f766e;
  font-weight: 600;
}

body.dark-theme .subcat-chip-count {
  background: rgba(45, 212, 191, 0.2);
  color: #2dd4bf;
}

.subcat-chip-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 2px;
}

.btn-chip-action {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: inherit;
  opacity: 0.7;
  font-size: 0.7rem;
  transition: var(--transition);
}

.btn-chip-action:hover {
  opacity: 1;
  background: rgba(0,0,0,0.06);
}

.btn-chip-action.delete:hover {
  color: var(--danger);
  background: var(--danger-light);
}

.subcat-quick-add-row {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border-color);
}

.subcat-quick-add-input {
  flex: 1;
  padding: 0.38rem 0.65rem;
  font-size: 0.78rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-primary);
  transition: var(--transition);
}

.subcat-quick-add-input:focus {
  outline: none;
  border-color: var(--primary);
}

.btn-quick-subcat-add {
  padding: 0.38rem 0.75rem;
  font-size: 0.78rem;
  white-space: nowrap;
}

/* 品牌矩阵 */
.brand-quick-add-bar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.75rem 1.25rem;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-color);
}

.brand-quick-input-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}

.brand-quick-input-wrap i {
  position: absolute;
  left: 10px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.brand-quick-input-wrap input {
  width: 100%;
  padding: 0.42rem 0.75rem 0.42rem 2.1rem;
  font-size: 0.82rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-primary);
  transition: var(--transition);
}

.brand-quick-input-wrap input:focus {
  outline: none;
  border-color: var(--primary);
}

.brand-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.75rem;
  padding: 1.25rem;
}

.brand-manage-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.85rem;
  box-shadow: var(--shadow-xs);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.brand-manage-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.brand-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6rem;
}

.brand-monogram {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #fdf4ff;
  color: #a855f7;
  border: 1px solid #f0abfc;
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

body.dark-theme .brand-monogram {
  background: rgba(168, 85, 247, 0.2);
  border-color: rgba(240, 171, 252, 0.3);
  color: #d8b4fe;
}

.brand-card-actions {
  display: flex;
  gap: 2px;
}

.brand-header-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.2rem;
}

.brand-header-line h4,
.brand-card-info h4 {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.brand-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.12rem 0.45rem;
  border-radius: 9999px;
  line-height: 1.25;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.01em;
}

/* Tier badge color variations */
.brand-tier-badge.tier-core {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}
.brand-tier-badge.tier-partner {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}
.brand-tier-badge.tier-oem {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #e5e7eb;
}
.brand-tier-badge.tier-dist {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}
.brand-tier-badge.tier-import {
  background: #faf5ff;
  color: #7e22ce;
  border: 1px solid #e9d5ff;
}

/* Dark theme overrides for tier badges */
body.dark-theme .brand-tier-badge.tier-core {
  background: rgba(245, 158, 11, 0.18);
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.35);
}
body.dark-theme .brand-tier-badge.tier-partner {
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.35);
}
body.dark-theme .brand-tier-badge.tier-oem {
  background: rgba(156, 163, 175, 0.18);
  color: #e5e7eb;
  border-color: rgba(156, 163, 175, 0.35);
}
body.dark-theme .brand-tier-badge.tier-dist {
  background: rgba(16, 185, 129, 0.18);
  color: #6ee7b7;
  border-color: rgba(16, 185, 129, 0.35);
}
body.dark-theme .brand-tier-badge.tier-import {
  background: rgba(168, 85, 247, 0.18);
  color: #d8b4fe;
  border-color: rgba(168, 85, 247, 0.35);
}

.brand-prod-count {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* 图标选择器 */
.icon-picker-preview-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.icon-preview-label {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.icon-preview-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 3px 10px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
}

body.dark-theme .icon-preview-chip {
  background: rgba(79, 70, 229, 0.2);
  color: #a5b4fc;
}

/* ==========================================================================
   Icon Picker Component & 3C Consumer Electronics Visual Selector
   ========================================================================== */
.icon-picker-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.icon-filter-tabs {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.icon-filter-tab {
  padding: 4px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 0.76rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: var(--transition);
  white-space: nowrap;
}

.icon-filter-tab:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}

.icon-filter-tab.active {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.icon-filter-tab.active i {
  color: #ffffff !important;
}

.icon-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.icon-search-icon {
  position: absolute;
  left: 10px;
  color: var(--text-muted);
  font-size: 0.8rem;
  pointer-events: none;
}

.icon-search-input {
  width: 100%;
  padding: 6px 28px 6px 28px;
  font-size: 0.8rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-main);
  transition: var(--transition);
}

.icon-search-input:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}

.icon-search-clear {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 4px;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-search-clear:hover {
  color: var(--text-main);
}

.icon-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  gap: 0.45rem;
  max-height: 200px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}

.icon-picker-btn {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  font-size: 1.05rem;
}

.icon-picker-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.icon-picker-btn.active {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3);
}

.icon-picker-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 1.5rem 1rem;
  color: var(--text-muted);
  font-size: 0.8rem;
}

body.dark-theme .icon-filter-tab:not(.active) {
  background: var(--bg-surface);
  border-color: var(--border-color);
  color: var(--text-secondary);
}

body.dark-theme .icon-search-input {
  background: var(--bg-surface);
  color: var(--text-main);
  border-color: var(--border-color);
}


/* ==========================================================================
   8.5 统一自定义属性管理模态框 (Unified Attribute Modals - Category & Brand)
   ========================================================================== */
.attr-unified-modal-card {
  position: relative;
  max-width: 640px;
  width: 95%;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.22), 0 0 0 1px var(--border-color);
  background: var(--bg-surface);
  overflow: hidden;
}

.attr-unified-modal-card .modal-header {
  position: relative;
  padding: 1.2rem 1.5rem;
  padding-right: 3.8rem;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.attr-unified-modal-card .btn-close {
  position: absolute;
  top: 1.15rem;
  right: 1.25rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-xs);
  z-index: 10;
}

.attr-unified-modal-card .btn-close:hover {
  background: var(--bg-subtle);
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.35);
  transform: rotate(90deg);
}

body.dark-theme .attr-unified-modal-card .btn-close {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text-secondary);
}

body.dark-theme .attr-unified-modal-card .btn-close:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.4);
}

.attr-unified-modal-card .modal-body {
  padding: 1.35rem 1.5rem;
  max-height: 76vh;
  overflow-y: auto;
}

.attr-unified-modal-card .modal-footer {
  padding: 1rem 1.5rem;
  background: var(--bg-subtle);
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

.modal-title-icon-badge {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.15);
}

body.dark-theme .modal-title-icon-badge {
  background: rgba(79, 70, 229, 0.25);
  color: #a5b4fc;
}

.modal-title-description {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 2px;
  font-weight: 400;
}

/* 核心身份区块 (Hero Identity Block) */
.attr-modal-hero {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.1rem 1.25rem;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.04) 0%, var(--bg-subtle) 100%);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  margin-bottom: 1.15rem;
}

body.dark-theme .attr-modal-hero {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.12) 0%, rgba(30, 41, 59, 0.65) 100%);
  border-color: rgba(255, 255, 255, 0.08);
}

.attr-hero-avatar {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  user-select: none;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.attr-hero-avatar:hover {
  transform: scale(1.06);
}

.cat-avatar-preview {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  color: #ffffff;
  font-size: 1.45rem;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
}

.brand-avatar-preview {
  background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: 800;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35);
  text-transform: uppercase;
}

.attr-hero-input-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.attr-hero-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.attr-hero-label {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin: 0;
  letter-spacing: 0.2px;
}

.attr-hero-counter {
  font-size: 0.73rem;
  color: var(--text-muted);
  font-weight: 500;
}

.attr-hero-input {
  height: 42px;
  font-size: 1.02rem !important;
  font-weight: 600 !important;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-primary);
  padding: 0 0.85rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  background-image: none !important;
}

/* 彻底屏蔽品类名称输入框及所有模态框英雄输入框右侧的浏览器/WebKit联系人人形图标与凭据自动填充按钮 */
#form-name::-webkit-contacts-auto-fill-button,
#form-name::-webkit-credentials-auto-fill-button,
#form-name::-webkit-caps-lock-indicator,
#form-cat-name::-webkit-contacts-auto-fill-button,
#form-cat-name::-webkit-credentials-auto-fill-button,
#form-cat-name::-webkit-caps-lock-indicator,
.attr-hero-input::-webkit-contacts-auto-fill-button,
.attr-hero-input::-webkit-credentials-auto-fill-button,
.attr-hero-input::-webkit-caps-lock-indicator,
.product-edit-drawer input::-webkit-contacts-auto-fill-button,
.product-edit-drawer input::-webkit-credentials-auto-fill-button,
.product-edit-drawer input::-webkit-caps-lock-indicator {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  right: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
}

.attr-hero-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.16);
}

/* 统一表单模块与分隔 (Unified Form Sections) */
.attr-form-section {
  margin-top: 1.15rem;
  padding-top: 1.15rem;
  border-top: 1px dashed var(--border-color);
}

.attr-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.35rem;
}

.attr-section-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.attr-section-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  line-height: 1.45;
}

/* 次级分类与即时标签预览 (Subcategories & Live Chips) */
.cat-subs-textarea {
  font-size: 0.86rem !important;
  line-height: 1.55 !important;
  padding: 0.65rem 0.85rem !important;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-primary);
  resize: vertical;
}

.cat-subs-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

.subcat-quick-samples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  padding: 0.45rem 0.7rem;
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border-color);
}

.samples-title {
  font-size: 0.73rem;
  color: var(--text-muted);
  font-weight: 600;
}

.subcat-sample-pill {
  font-size: 0.73rem;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
}

.subcat-sample-pill:hover {
  background: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary);
  transform: translateY(-1px);
}

.subcat-live-chips-row {
  margin-top: 0.75rem;
  padding: 0.65rem 0.85rem;
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
}

.subcat-chips-label {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.45rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.chips-empty-hint {
  font-size: 0.73rem;
  color: var(--text-muted);
  font-style: italic;
}

.subcategories-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-height: 28px;
  align-items: center;
}

/* 品牌矩阵快捷定位标签 (Brand Positioning Chips) */
.brand-type-quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 0.5rem;
}

.brand-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.48rem 0.95rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-color);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.brand-type-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--bg-surface);
  transform: translateY(-1px);
  box-shadow: var(--shadow-xs);
}

.brand-type-chip.active {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 700;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.18);
}

body.dark-theme .brand-type-chip.active {
  background: rgba(79, 70, 229, 0.25);
  color: #c7d2fe;
}

/* 全局级联生效提示 (System Cascade Alert) */
.attr-cascade-alert {
  margin-top: 1.15rem;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  background: rgba(14, 165, 233, 0.08);
  border: 1px solid rgba(14, 165, 233, 0.25);
}

.attr-cascade-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(14, 165, 233, 0.15);
  color: #0284c7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.attr-cascade-content {
  flex: 1;
}

.attr-cascade-content strong {
  font-size: 0.84rem;
  color: var(--text-primary);
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 700;
}

.attr-cascade-content p {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

body.dark-theme .attr-cascade-alert {
  background: rgba(14, 165, 233, 0.12);
  border-color: rgba(56, 189, 248, 0.25);
}

body.dark-theme .attr-cascade-icon {
  background: rgba(14, 165, 233, 0.22);
  color: #38bdf8;
}

/* ==========================================================================
   9. 导出中心 (Export Options)
   ========================================================================== */
.export-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  padding: 1.25rem;
}

.export-option-item {
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  display: flex;
  gap: 1rem;
  transition: var(--transition);
}

.export-option-item:hover {
  border-color: #cbd5e1;
  background-color: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

.option-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.option-details {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}

.option-details h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.option-details p {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

/* Standalone Full-Row Export Card (PDF 汇总报告独立一行) */
.export-option-full-row {
  grid-column: 1 / -1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.05) 0%, var(--bg-surface) 100%);
  border: 1.5px solid rgba(244, 63, 94, 0.28);
  border-radius: var(--radius-md);
  padding: 1.35rem 1.75rem;
  box-shadow: 0 2px 8px rgba(244, 63, 94, 0.06);
}

.export-option-full-row:hover {
  border-color: rgba(244, 63, 94, 0.5);
  box-shadow: 0 4px 16px rgba(244, 63, 94, 0.12);
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.08) 0%, var(--bg-surface) 100%);
}

.export-option-full-row .option-icon {
  width: 52px;
  height: 52px;
  font-size: 1.6rem;
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
  color: #ffffff;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(244, 63, 94, 0.28);
  flex-shrink: 0;
}

.export-option-full-row .option-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.export-option-full-row .option-details-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.export-option-full-row .option-details h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.export-option-full-row .option-details p {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.export-option-full-row .option-action {
  flex-shrink: 0;
}

.export-option-full-row .option-action .btn {
  padding: 0.65rem 1.35rem;
  font-size: 0.88rem;
  font-weight: 600;
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
  border: none;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(244, 63, 94, 0.3);
  transition: var(--transition);
}

.export-option-full-row .option-action .btn:hover {
  background: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
  box-shadow: 0 4px 14px rgba(244, 63, 94, 0.45);
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .export-option-full-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .export-option-full-row .option-action {
    width: 100%;
  }
  .export-option-full-row .option-action .btn {
    width: 100%;
  }
}

/* ==========================================================================
   10. 编辑/新增抽屉 (Drawer Modal)
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
  animation: fadeIn 0.18s ease;
}

.drawer-modal {
  width: 520px;
  max-width: 100%;
  height: 100%;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: slideInRight 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 宽屏编辑产品档案与商业属性专属抽屉 (宽幅展示，杜绝左右横向拖拽) */
.drawer-modal.product-edit-drawer,
#product-modal .drawer-modal {
  width: 900px;
  max-width: 94vw;
  overflow-x: hidden;
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.drawer-header {
  padding: 1.15rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.drawer-header h2 {
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-primary);
}

.btn-close {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.3rem;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.btn-close:hover {
  color: var(--text-primary);
  background: var(--bg-subtle);
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-section {
  display: flex;
  flex-direction: column;
  padding-bottom: 0.35rem;
}

.form-section:first-child .form-section-title,
.form-section:first-of-type .form-section-title {
  margin-top: 0;
}

.form-section-title {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0.25rem;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.95rem;
}

.form-group label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.35;
  display: block;
}

.required {
  color: var(--danger);
}

.form-group input, .form-group textarea {
  background-color: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.75rem;
  color: var(--text-primary);
  font-size: 0.82rem;
  font-family: inherit;
  outline: none;
  transition: var(--transition);
}

.form-group input:focus, .form-group textarea:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.form-group input.is-invalid {
  border-color: #ef4444 !important;
  background-color: rgba(239, 68, 68, 0.05) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

.form-group input.is-valid {
  border-color: #10b981 !important;
  background-color: rgba(16, 185, 129, 0.05) !important;
}

.form-feedback {
  font-size: 0.72rem;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 500;
  line-height: 1.3;
}

.form-feedback.error {
  color: #ef4444;
}

.form-feedback.success {
  color: #10b981;
}

.form-feedback.hidden {
  display: none !important;
}

.form-row {
  display: flex;
  gap: 0.75rem;
}

.col-4 { flex: 1; }
.col-6 { flex: 1; }
.col-12 { flex: 1; width: 100%; }

.specs-builder {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.spec-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.spec-row input {
  flex: 1;
}

.drawer-footer {
  padding: 0.85rem 1.5rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
  background: var(--bg-surface);
}

/* ==========================================================================
   11. 状态指示与通知 (Toasts & Empty State)
   ========================================================================== */
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-md);
  padding: 0.65rem 1rem;
  color: var(--text-primary);
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  box-shadow: var(--shadow-md);
  animation: slideInUp 0.25s ease;
  min-width: 220px;
}

.toast.toast-success { border-left-color: var(--success); }
.toast.toast-error   { border-left-color: var(--danger); }

@keyframes slideInUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.empty-state {
  padding: 3.5rem 2rem;
  text-align: center;
}

.empty-icon {
  font-size: 2.5rem;
  color: var(--text-dim);
  margin-bottom: 0.75rem;
}

.empty-state h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.empty-state p {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-bottom: 1rem;
}

.hidden { display: none !important; }
.mt-2 { margin-top: 0.5rem; }
.text-right { text-align: right; }

/* ==========================================================================
   12. 货币主次与细节修饰 (Currency Display & Detail Helpers)
   ========================================================================== */
.price-usd-primary {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 0.94rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.price-rmb-sub {
  font-size: 0.74rem;
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, monospace;
}

.table-row-clickable {
  cursor: pointer;
  transition: var(--transition);
}

.table-row-clickable:hover td {
  background-color: var(--bg-hover) !important;
}

.btn-view-detail {
  color: var(--primary);
  background: var(--primary-light);
  border: 1px solid transparent;
}

.btn-view-detail:hover {
  background: var(--primary);
  color: #ffffff;
}

.text-emerald { color: var(--success); }
.text-amber { color: var(--warning); }
.text-primary { color: var(--primary); }

/* ==========================================================================
   13. 产品全信息详情抽屉 (Product Detail Full-View Drawer)
   ========================================================================== */
.product-detail-drawer {
  width: 920px;
  max-width: 95vw;
  overflow-x: hidden;
}

.product-detail-drawer .drawer-header {
  padding: 1.25rem 1.75rem;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
}

.detail-header-info {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
  flex: 1;
}

.detail-header-badges {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.detail-product-title {
  font-size: 1.28rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.4;
  margin: 0;
  word-break: break-word;
}

.detail-meta-line {
  font-size: 0.82rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.detail-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.detail-meta-sep {
  color: var(--text-muted);
  opacity: 0.6;
}

.detail-header-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

.detail-drawer-body {
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Metric Strip (5 Top Metric Cards + 1 Dedicated Row for 采购价格说明) */
.detail-metric-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1rem;
}

.detail-metric-box {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.detail-metric-box.primary-metric {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.65rem;
  box-shadow: var(--shadow-xs);
}

.detail-metric-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail-metric-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.detail-metric-sub {
  font-size: 0.72rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Standalone Full-Width Highlight Row: 采购价格说明 */
.detail-metric-row-full {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.85rem;
  margin-top: 0.15rem;
  box-shadow: var(--shadow-xs);
}

.detail-remark-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-light);
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-xs);
  white-space: nowrap;
}

.detail-remark-content {
  flex: 1;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  word-break: break-word;
}

.detail-remark-hint {
  font-size: 0.72rem;
  color: var(--text-dim);
  white-space: nowrap;
}

/* Main Grid: Left vs Right */
.detail-main-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 1.25rem;
}

.detail-col-left, .detail-col-right {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* 3-Image Showcase Gallery (1 Main + 2 Sub = 3 Images Total) */
.detail-gallery-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.detail-main-img-box {
  position: relative;
  width: 100%;
  height: 220px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail-main-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease, opacity 0.2s ease;
}

.detail-main-img-box img:hover {
  transform: scale(1.03);
}

.detail-img-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(4px);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 2;
}

.detail-thumbs-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.detail-thumb-item {
  position: relative;
  height: 68px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border-color);
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-subtle);
  transition: var(--transition);
}

.detail-thumb-item:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}

.detail-thumb-item.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-light);
}

.detail-thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-thumb-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(15, 23, 42, 0.75);
  color: #ffffff;
  font-size: 0.65rem;
  text-align: center;
  padding: 1px 0;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.detail-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1rem 1.15rem;
}

.detail-section-heading {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--border-color);
}

.detail-description-text {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.6;
  white-space: pre-line;
}

.detail-props-table {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.prop-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--border-light);
}

.prop-row:last-child {
  border-bottom: none;
}

.prop-key {
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.prop-key i {
  font-size: 0.75rem;
  width: 14px;
}

.prop-val {
  color: var(--text-primary);
  font-weight: 600;
}

.detail-specs-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.spec-badge-item {
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.spec-badge-k {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.spec-badge-v {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  word-break: break-all;
}

/* Standalone Recent Change Audit Section in Product Drawer */
.detail-audit-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
}

.detail-section-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--border-color);
}

.detail-recent-changes-body {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.detail-recent-changes-body .audit-diff-row {
  margin-top: 0.4rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}

/* ==========================================================================
   14. 系统后台设置 (Backend Settings Tab)
   ========================================================================== */
.settings-page-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.settings-card {
  padding: 1.5rem;
}

.settings-card .card-header,
.settings-page-header {
  padding: 0 !important;
  border-bottom: none !important;
  background: transparent !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  width: 100% !important;
}

.settings-header-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.settings-header-title-wrap h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.settings-card-body {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* 14-0. 前台汇率计算策略选择器 (Rate Strategy Selector) */
.exchange-strategy-container {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.strategy-section-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.strategy-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
}

@media (max-width: 800px) {
  .strategy-card-grid {
    grid-template-columns: 1fr;
  }
}

.strategy-card {
  display: flex;
  gap: 0.85rem;
  padding: 0.95rem 1.15rem;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition);
  user-select: none;
}

.strategy-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.strategy-card.active {
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.04);
  box-shadow: 0 0 0 1px var(--primary);
}

.strategy-card-radio {
  display: flex;
  align-items: flex-start;
  padding-top: 3px;
  flex-shrink: 0;
}

.strategy-card-radio label {
  display: none;
}

.strategy-card-radio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-color);
  border-radius: 50%;
  background-color: #ffffff;
  outline: none;
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.strategy-card-radio input[type="radio"]::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--primary);
  transform: scale(0);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.strategy-card-radio input[type="radio"]:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.strategy-card-radio input[type="radio"]:checked {
  border-color: var(--primary);
  background-color: #ffffff;
}

.strategy-card-radio input[type="radio"]:checked::before {
  transform: scale(1);
}

.strategy-card-radio input[type="radio"]:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}

.strategy-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.strategy-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.strategy-card-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.strategy-card-desc {
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin: 0;
}

/* 14a. 汇率网站自动抓取与调度面板 (Exchange Auto-Sync & Schedule Panel) */
.exchange-sync-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.35rem 1.5rem;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  transition: var(--transition);
}

.exchange-sync-panel:hover,
.exchange-manual-panel:hover {
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: var(--shadow-sm);
}

.sync-panel-header,
.manual-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.sync-header-left,
.manual-header-left {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  flex: 1;
  min-width: 280px;
}

.panel-icon-box {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
  transition: var(--transition);
}

.panel-icon-box.sync-icon {
  background: rgba(99, 102, 241, 0.12);
  color: var(--primary, #4f46e5);
  border: 1px solid rgba(99, 102, 241, 0.22);
}

.panel-icon-box.manual-icon {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

body.dark-theme .panel-icon-box.sync-icon {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
  border-color: rgba(99, 102, 241, 0.35);
}

body.dark-theme .panel-icon-box.manual-icon {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.35);
}

.sync-header-titles,
.manual-header-titles {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sync-title-row,
.manual-title-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.sync-panel-main-title,
.manual-panel-main-title {
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin: 0;
}

.sync-panel-subtitle,
.manual-panel-subtitle {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.45;
}

.sync-header-right,
.manual-header-right {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.switch-control-wrap {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--bg-subtle);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
}

.switch-control-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  user-select: none;
}

/* 现代化 iOS 风格 Switch 开关 */
.switch-toggle {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 22px;
  flex-shrink: 0;
  cursor: pointer;
}

.switch-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.switch-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border-color);
  transition: all 0.25s ease;
  border-radius: var(--radius-full);
}

.switch-slider::before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: #ffffff;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.switch-toggle input:checked + .switch-slider {
  background-color: var(--primary);
}

.switch-toggle input:focus + .switch-slider {
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}

.switch-toggle input:checked + .switch-slider::before {
  transform: translateX(20px);
}

.btn-fetch-now {
  font-weight: 600;
  border-radius: var(--radius-md);
  padding: 0.45rem 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  transition: var(--transition);
}

.btn-fetch-now:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-xs);
}

.sync-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.6fr;
  gap: 0.85rem;
  padding: 0.95rem 1.25rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

@media (max-width: 1024px) {
  .sync-meta-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .sync-meta-grid {
    grid-template-columns: 1fr;
  }
}

.sync-meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.sync-meta-header {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.sync-meta-header i {
  font-size: 0.75rem;
  color: var(--text-secondary);
  opacity: 0.85;
}

.sync-meta-val {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.sync-countdown-text {
  color: var(--primary);
  font-weight: 700;
}

.sync-source-link {
  color: var(--primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: var(--transition);
  font-weight: 600;
  font-size: 0.8rem;
}

.sync-source-link:hover {
  text-decoration: underline;
  color: var(--primary-hover);
}

.sync-source-link i {
  font-size: 0.72rem;
  opacity: 0.85;
}

.xpath-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary, #4f46e5);
  padding: 1px 6px;
  border-radius: var(--radius-sm, 4px);
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  font-weight: 600;
  border: 1px solid rgba(99, 102, 241, 0.25);
  white-space: nowrap;
}

/* 14b. 手动调整与基准预设面板 (Manual Override Panel) */
.exchange-manual-panel {
  padding: 1.35rem 1.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  transition: var(--transition);
}

.config-panel-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.config-panel-badge.manual-badge {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

body.dark-theme .config-panel-badge.manual-badge {
  background: rgba(245, 158, 11, 0.2);
  color: #fde68a;
  border-color: rgba(245, 158, 11, 0.35);
}

.manual-panel-body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.manual-control-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.95rem 1.25rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}

@media (max-width: 850px) {
  .manual-control-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

.manual-rate-input-section {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.manual-rate-section-label {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.manual-rate-preset-section {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.rate-input-group {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.rate-prefix, .rate-suffix {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.rate-input {
  width: 120px;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 0.45rem 0.65rem;
  text-align: center;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-focus);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, monospace;
  box-shadow: var(--shadow-xs);
  transition: var(--transition);
}

.rate-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

.preset-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.preset-pill-btn {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-color);
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  padding: 0.38rem 0.95rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: var(--shadow-xs);
}

.preset-pill-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
}

.preset-pill-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.3);
}

.settings-help-callout {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.55;
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.75rem 1rem;
  background: rgba(99, 102, 241, 0.04);
  border: 1px solid rgba(99, 102, 241, 0.14);
  border-radius: var(--radius-md);
}

.settings-help-callout .callout-icon {
  color: var(--primary, #4f46e5);
  font-size: 0.95rem;
  margin-top: 2px;
  flex-shrink: 0;
}

.settings-help-callout .callout-text {
  flex: 1;
}

body.dark-theme .settings-help-callout {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.22);
  color: #cbd5e1;
}

body.dark-theme .settings-help-callout .callout-icon {
  color: #a5b4fc;
}

/* Formula Selection Cards */
.formula-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.formula-card {
  position: relative;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.formula-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.formula-card.active {
  border-color: var(--primary);
  background: var(--primary-light);
  box-shadow: var(--shadow-sm);
}

.formula-radio {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-color);
  border-radius: 50%;
  background-color: #ffffff;
  outline: none;
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.formula-radio::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--primary);
  transform: scale(0);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.formula-radio:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.formula-radio:checked {
  border-color: var(--primary);
  background-color: #ffffff;
}

.formula-radio:checked::before {
  transform: scale(1);
}

.formula-radio:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}

body.dark-theme .strategy-card-radio input[type="radio"],
body.dark-theme .formula-radio,
body.dark-theme .strategy-option-item input[type="radio"] {
  background-color: var(--bg-card);
  border-color: var(--border-color);
}

body.dark-theme .strategy-card-radio input[type="radio"]:checked,
body.dark-theme .formula-radio:checked,
body.dark-theme .strategy-option-item input[type="radio"]:checked {
  border-color: var(--primary);
  background-color: var(--bg-card);
}

.formula-card-content {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding-right: 1.5rem;
}

.formula-card-header {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.formula-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 0.15rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: var(--radius-xs);
  background: var(--primary);
  color: #ffffff;
}

.formula-badge-alt {
  background: var(--bg-subtle);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.formula-card-header h4 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
}

.formula-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.formula-code {
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.65rem;
  font-size: 0.72rem;
  color: var(--text-secondary);
  font-family: ui-monospace, SFMono-Regular, monospace;
  line-height: 1.4;
  word-break: break-all;
}

/* Settings Parameters Row */
.settings-param-row {
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-top: 0.5rem;
}

.custom-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 0.88rem;
}

.custom-input:focus {
  outline: none;
  border-color: var(--border-focus);
}

.input-tip {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-top: 0.3rem;
  display: block;
}

/* Settings Card Footer */
.settings-card-footer {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.settings-footer-buttons {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* 响应式调整 */
@media (max-width: 1024px) {
  .sidebar { width: 68px; padding: 1rem 0.35rem; }
  .brand-text, .nav-item span, .nav-section-title, .user-info { display: none; }
  .main-content { margin-left: 68px; padding: 1.25rem; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .charts-grid { grid-template-columns: 1fr; }
  .chart-card.full-width { grid-column: span 1; }
  .two-column-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .global-search { width: 100%; }
  .top-header { flex-direction: column; align-items: flex-start; }
  .header-right { width: 100%; justify-content: space-between; }
  .audit-stats-grid { grid-template-columns: 1fr; }
  .audit-search-wrapper, .audit-search-box { width: 100%; flex: 1 1 100%; }
}

/* ==========================================================================
   15. 变更审计日志增强样式 (Audit Log Enhanced Styles)
   ========================================================================== */
.audit-page-card {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.audit-page-card .card-header {
  padding: 0;
  border-bottom: none;
  margin-bottom: 0;
}

.audit-header-title h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.audit-actions-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.audit-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.audit-stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: var(--shadow-xs);
  transition: var(--transition);
}

.audit-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: #cbd5e1;
}

.audit-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.audit-stat-icon.primary {
  background: rgba(99, 102, 241, 0.12);
  color: var(--primary);
}

.audit-stat-icon.indigo {
  background: rgba(79, 70, 229, 0.12);
  color: #4f46e5;
}

.audit-stat-icon.emerald {
  background: rgba(16, 185, 129, 0.12);
  color: var(--success);
}

.audit-stat-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.audit-stat-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.audit-stat-val {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Audit Toolbar: Spacious layout matching recycle bin and custom attributes tabs */
.audit-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  background: var(--bg-subtle);
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}

.audit-search-box {
  position: relative;
  width: 460px;
  max-width: 100%;
  display: flex;
  align-items: center;
}

.audit-search-box .audit-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.88rem;
  pointer-events: none;
  z-index: 2;
}

.audit-search-box input#audit-filter-keyword {
  width: 100%;
  height: 40px;
  padding: 0 2.2rem 0 2.65rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
  background-color: var(--bg-surface);
  color: var(--text-primary);
  font-size: 0.84rem;
  outline: none;
  transition: var(--transition);
  box-shadow: var(--shadow-xs);
}

.audit-search-box input#audit-filter-keyword:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.audit-search-box input#audit-filter-keyword::placeholder {
  color: var(--text-muted);
  font-size: 0.84rem;
}

.audit-search-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  font-size: 0.85rem;
  line-height: 1;
}

.audit-search-clear:hover {
  color: var(--text-primary);
}

.audit-security-pill {
  font-size: 0.78rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface);
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
}

.audit-result-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding-left: 8px;
  border-left: 1px solid var(--border-color);
}

.audit-result-hint strong {
  color: var(--primary);
  font-weight: 600;
}

/* Diff Display Rows in Table */
.audit-diff-container {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.audit-diff-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
}

.audit-change-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 9999px;
  background: #eef2ff;
  color: #4338ca;
  border: 1px solid #c7d2fe;
}

body.dark-theme .audit-change-badge {
  background: rgba(67, 56, 202, 0.25);
  color: #a5b4fc;
  border-color: rgba(99, 102, 241, 0.4);
}

/* Diff Stack inside Cell */
.audit-diff-stack {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.audit-diff-row {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0.6rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  width: fit-content;
  max-width: 100%;
  transition: all 0.15s ease;
}

.audit-diff-row:hover {
  background: var(--bg-subtle);
  border-color: var(--primary-light, #c7d2fe);
}

.audit-field-badge {
  font-size: 0.72rem;
  font-weight: 600;
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 0.12rem 0.48rem;
  border-radius: 4px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

body.dark-theme .audit-field-badge {
  background: rgba(29, 78, 216, 0.25);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.4);
}

.audit-val-old {
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fee2e2;
  text-decoration: line-through;
  padding: 0.1rem 0.48rem;
  border-radius: 4px;
  font-size: 0.76rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

body.dark-theme .audit-val-old {
  color: #fca5a5;
  background: rgba(185, 28, 28, 0.22);
  border-color: rgba(239, 68, 68, 0.35);
}

.audit-diff-arrow {
  font-size: 0.72rem;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  padding: 0 1px;
}

.audit-val-new {
  color: #15803d;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  font-weight: 600;
  padding: 0.1rem 0.48rem;
  border-radius: 4px;
  font-size: 0.76rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

body.dark-theme .audit-val-new {
  color: #86efac;
  background: rgba(21, 128, 61, 0.22);
  border-color: rgba(34, 197, 94, 0.35);
}

.audit-entry-box {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
}

.audit-entry-box.create {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: var(--success);
}

.audit-entry-box.delete {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: var(--danger);
}

.audit-diff-meta-box {
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.audit-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
}

.audit-meta-label {
  color: var(--text-muted);
}

.audit-meta-val {
  font-weight: 600;
  color: var(--text-primary);
}

/* Action Type Badges */
.badge-action-update {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #ffedd5;
}

body.dark-theme .badge-action-update {
  background: rgba(194, 65, 12, 0.2);
  color: #fdba74;
  border-color: rgba(249, 115, 22, 0.4);
}

.badge-action-create {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

body.dark-theme .badge-action-create {
  background: rgba(4, 120, 87, 0.2);
  color: #6ee7b7;
  border-color: rgba(16, 185, 129, 0.4);
}

.badge-action-delete {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

body.dark-theme .badge-action-delete {
  background: rgba(185, 28, 28, 0.2);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.4);
}

/* ==========================================================================
   16. 审计比对明细模态框优化 (Audit Diff Inspector Modal Enhanced)
   ========================================================================== */
.modal-center-backdrop {
  justify-content: center !important;
  align-items: center !important;
  padding: 1.5rem !important;
}

.audit-modal-card {
  max-width: 860px;
  width: 100%;
  max-height: 90vh;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35);
  display: flex;
  flex-direction: column;
  animation: modalPopIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

@keyframes modalPopIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.audit-modal-header {
  padding: 1.15rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-surface);
}

.modal-title-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.modal-title-group h3 {
  font-size: 1.08rem;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.modal-subtitle-badge {
  font-size: 0.72rem;
  font-weight: 500;
  background: var(--bg-subtle);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  padding: 0.15rem 0.55rem;
  border-radius: 9999px;
}

.audit-modal-body {
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Hero Meta Banner */
.audit-hero-banner {
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.audit-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.audit-hero-target {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.audit-hero-meta-right {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.audit-hero-meta-right strong {
  color: var(--text-primary);
}

.audit-hero-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px dashed var(--border-color);
  padding-top: 0.65rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Diff Control Bar */
.audit-diff-control-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-bottom: 0.25rem;
}

.diff-count-indicator {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.diff-count-badge {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
  font-size: 0.74rem;
  padding: 0.12rem 0.5rem;
  border-radius: 9999px;
  font-weight: 700;
}

body.dark-theme .diff-count-badge {
  background: rgba(37, 99, 235, 0.2);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.35);
}

.diff-view-switcher {
  display: inline-flex;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 3px;
}

.diff-view-btn {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.76rem;
  font-weight: 500;
  padding: 0.3rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.diff-view-btn:hover {
  color: var(--text-primary);
}

.diff-view-btn.active {
  background: var(--bg-surface);
  color: var(--primary);
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}

/* Diff View Panes */
.audit-diff-view-pane {
  display: none;
}

.audit-diff-view-pane.active {
  display: block;
}

/* Card View: Split Comparison Cards */
#audit-diff-card-view {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.diff-inspector-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.diff-inspector-card:hover {
  border-color: var(--primary-light, #cbd5e1);
  box-shadow: var(--shadow-sm);
}

.diff-card-header {
  padding: 0.65rem 1rem;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.diff-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.diff-field-icon {
  color: var(--primary);
  font-size: 0.85rem;
}

.diff-field-name {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-primary);
}

.diff-field-key {
  font-size: 0.72rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: var(--text-muted);
  background: var(--bg-surface);
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  border: 1px solid var(--border-color);
}

.diff-type-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.diff-type-badge.modified {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.diff-type-badge.added {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.diff-type-badge.cleared {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

body.dark-theme .diff-type-badge.modified {
  background: rgba(29, 78, 216, 0.22);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.35);
}

body.dark-theme .diff-type-badge.added {
  background: rgba(21, 128, 61, 0.22);
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.35);
}

body.dark-theme .diff-type-badge.cleared {
  background: rgba(185, 28, 28, 0.22);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.35);
}

.diff-card-body {
  display: flex;
  align-items: stretch;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  background: var(--bg-surface);
}

.diff-box {
  flex: 1;
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}

.diff-box-before {
  background: #fef2f2;
  border: 1px solid #fee2e2;
  border-left: 3.5px solid #ef4444;
}

body.dark-theme .diff-box-before {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.25);
  border-left-color: #ef4444;
}

.diff-box-after {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-left: 3.5px solid #22c55e;
}

body.dark-theme .diff-box-after {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.25);
  border-left-color: #22c55e;
}

.diff-box-label {
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.diff-box-before .diff-box-label {
  color: #b91c1c;
}

body.dark-theme .diff-box-before .diff-box-label {
  color: #fca5a5;
}

.diff-box-after .diff-box-label {
  color: #15803d;
}

body.dark-theme .diff-box-after .diff-box-label {
  color: #86efac;
}

.diff-box-val {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.86rem;
  word-break: break-word;
  line-height: 1.45;
}

.diff-box-before .diff-box-val {
  color: #991b1b;
  text-decoration: line-through;
  opacity: 0.9;
}

body.dark-theme .diff-box-before .diff-box-val {
  color: #fca5a5;
}

.diff-box-after .diff-box-val {
  color: #166534;
  font-weight: 700;
}

body.dark-theme .diff-box-after .diff-box-val {
  color: #4ade80;
}

.diff-arrow-col {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 1.15rem;
  padding: 0 0.15rem;
  flex-shrink: 0;
}

.diff-delta-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  padding: 0.1rem 0.45rem;
  border-radius: 9999px;
  font-weight: 600;
}

.diff-delta-tag.up {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.diff-delta-tag.down {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

body.dark-theme .diff-delta-tag.up {
  background: rgba(5, 150, 105, 0.2);
  color: #6ee7b7;
  border-color: rgba(16, 185, 129, 0.35);
}

body.dark-theme .diff-delta-tag.down {
  background: rgba(37, 99, 235, 0.2);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.35);
}

/* Enhanced Table View */
.diff-table-wrapper {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-surface);
}

.diff-table-enhanced {
  width: 100%;
  border-collapse: collapse;
}

.diff-table-enhanced th {
  padding: 0.75rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 600;
}

.diff-table-enhanced th.th-diff-before {
  background: rgba(239, 68, 68, 0.08);
  color: #b91c1c;
}

body.dark-theme .diff-table-enhanced th.th-diff-before {
  background: rgba(239, 68, 68, 0.16);
  color: #fca5a5;
}

.diff-table-enhanced th.th-diff-after {
  background: rgba(34, 197, 94, 0.08);
  color: #15803d;
}

body.dark-theme .diff-table-enhanced th.th-diff-after {
  background: rgba(34, 197, 94, 0.16);
  color: #86efac;
}

.diff-table-enhanced td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}

.diff-td-before {
  background: rgba(239, 68, 68, 0.03);
  color: #991b1b;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.82rem;
  text-decoration: line-through;
}

.diff-td-after {
  background: rgba(34, 197, 94, 0.03);
  color: #166534;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 700;
  font-size: 0.82rem;
}

body.dark-theme .diff-td-before {
  background: rgba(239, 68, 68, 0.08);
  color: #fca5a5;
}

body.dark-theme .diff-td-after {
  background: rgba(34, 197, 94, 0.08);
  color: #4ade80;
}

.diff-td-arrow {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Snapshots for Create & Delete */
.diff-snapshot-banner {
  border-radius: var(--radius-md);
  padding: 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.diff-snapshot-banner.create {
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.28);
}

.diff-snapshot-banner.delete {
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.28);
}

.diff-snapshot-title {
  font-size: 0.96rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.diff-snapshot-banner.create .diff-snapshot-title {
  color: #047857;
}

body.dark-theme .diff-snapshot-banner.create .diff-snapshot-title {
  color: #6ee7b7;
}

.diff-snapshot-banner.delete .diff-snapshot-title {
  color: #b91c1c;
}

body.dark-theme .diff-snapshot-banner.delete .diff-snapshot-title {
  color: #fca5a5;
}

.diff-snapshot-note {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.diff-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
}

.diff-snapshot-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.diff-snapshot-item-label {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.diff-snapshot-item-val {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* Modal Footer */
.audit-modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-subtle);
  gap: 1rem;
}

@media (max-width: 640px) {
  .diff-card-body {
    flex-direction: column;
  }
  .diff-arrow-col {
    transform: rotate(90deg);
    padding: 0.2rem 0;
  }
}

/* Model Switcher Card */
.calc-model-switcher-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 0.5rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.calc-model-toggle-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

@media (max-width: 768px) {
  .calc-model-toggle-group {
    grid-template-columns: 1fr;
  }
}

.calc-model-tab-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  border: 2px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  font-family: inherit;
}

.calc-model-tab-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.calc-model-tab-btn.active {
  background: var(--bg-surface);
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.calc-model-tab-btn .model-tab-icon i {
  font-size: 1.25rem;
  color: var(--text-muted);
  transition: color 0.2s;
  flex-shrink: 0;
}

.calc-model-tab-btn.active .model-tab-icon i {
  color: var(--primary);
}

.calc-model-tab-btn .model-tab-title,
.calc-model-tab-btn .model-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.calc-model-tab-btn.active .model-tab-title,
.calc-model-tab-btn.active .model-name {
  color: var(--primary);
}

.calc-model-tab-btn .model-tab-desc,
.calc-model-tab-btn .model-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.35;
}

/* Model Badges and Tags (主体模型 vs 备用模型) */
.model-tab-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  line-height: 1;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  font-weight: 600;
  margin-left: 0.55rem;
  vertical-align: middle;
  transition: var(--transition);
}

.model-tab-badge i {
  font-size: 0.72rem !important;
  line-height: 1;
  display: inline-block;
  flex-shrink: 0;
  transition: color 0.2s;
}

.model-tab-badge.main-badge {
  background: rgba(37, 99, 235, 0.1);
  color: var(--primary);
  border: 1px solid rgba(37, 99, 235, 0.28);
}

.model-tab-badge.main-badge i {
  color: #f59e0b !important;
}

.model-tab-badge.backup-badge {
  background: rgba(100, 116, 139, 0.1);
  color: #64748b;
  border: 1px solid rgba(100, 116, 139, 0.22);
}

.model-tab-badge.backup-badge i {
  color: #64748b !important;
}

.calc-model-tab-btn.active .model-tab-badge.main-badge {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
}

.calc-model-tab-btn.active .model-tab-badge.main-badge i {
  color: #fde047 !important; /* 明亮璀璨金黄色五角星，高亮背景下高对比超清晰可见！ */
}

.calc-model-tab-btn.active .model-tab-badge.backup-badge {
  background: #475569;
  color: #ffffff;
  border-color: #475569;
}

.calc-model-tab-btn.active .model-tab-badge.backup-badge i {
  color: #e2e8f0 !important;
}

body.dark-theme .model-tab-badge.main-badge {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.4);
}

body.dark-theme .model-tab-badge.main-badge i {
  color: #fbbf24 !important;
}

body.dark-theme .calc-model-tab-btn.active .model-tab-badge.main-badge {
  background: #3b82f6;
  color: #ffffff;
}

body.dark-theme .calc-model-tab-btn.active .model-tab-badge.main-badge i {
  color: #fef08a !important;
}

body.dark-theme .model-tab-badge.backup-badge {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
  border-color: rgba(148, 163, 184, 0.3);
}

body.dark-theme .model-tab-badge.backup-badge i {
  color: #94a3b8 !important;
}

body.dark-theme .calc-model-tab-btn.active .model-tab-badge.backup-badge {
  background: #475569;
  color: #ffffff;
}

body.dark-theme .calc-model-tab-btn.active .model-tab-badge.backup-badge i {
  color: #f1f5f9 !important;
}

.calc-tag-main {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  background: rgba(37, 99, 235, 0.12);
  color: var(--primary);
  border: 1px solid rgba(37, 99, 235, 0.3);
  margin-left: 0.45rem;
  font-weight: 600;
  vertical-align: middle;
}

.calc-tag-main i {
  color: #f59e0b;
  font-size: 0.72rem;
}

.calc-tag-backup {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  background: rgba(100, 116, 139, 0.12);
  color: #64748b;
  border: 1px solid rgba(100, 116, 139, 0.25);
  margin-left: 0.45rem;
  font-weight: 500;
  vertical-align: middle;
}

.calc-tag-backup i {
  color: #64748b;
  font-size: 0.72rem;
}

body.dark-theme .calc-tag-main {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.4);
}

body.dark-theme .calc-tag-main i {
  color: #fbbf24;
}

body.dark-theme .calc-tag-backup {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
  border-color: rgba(148, 163, 184, 0.3);
}

body.dark-theme .calc-tag-backup i {
  color: #94a3b8;
}

/* Trade Preset Buttons */
.calc-preset-trade-btn {
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.calc-preset-trade-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.calc-preset-trade-btn.active {
  background: #fef3c7;
  color: #b45309;
  border-color: #fde68a;
  font-weight: 600;
}

body.dark-theme .calc-preset-trade-btn.active {
  background: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.3);
}

.calc-top-card {
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}

.calc-top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: nowrap;
}

.calc-top-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
  flex: 1 1 auto;
  min-width: 0;
}

.calc-top-title > div {
  text-align: left;
  min-width: 0;
}

.calc-top-title h3 {
  text-align: left;
}

.calc-top-title p {
  text-align: left;
}

.calc-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}

.calc-scenario-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  white-space: nowrap;
}

.calc-scenario-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.calc-preset-btn {
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.calc-preset-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.calc-preset-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

.calc-main-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 1200px) {
  .calc-main-layout {
    grid-template-columns: 1fr;
  }
}

.calc-inputs-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.calc-summary-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: sticky;
  top: 1rem;
}

.calc-section-card {
  padding: 1.25rem 1.5rem;
}

.calc-section-card .card-header,
.calc-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 1rem 0 !important;
  background: transparent !important;
  border-bottom: 1px solid var(--border-color);
  gap: 0.75rem;
  text-align: left;
  width: 100%;
}

.calc-header-title {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-align: left;
}

.calc-header-title > div {
  text-align: left;
}

.calc-section-header h4 {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: left;
}

.calc-section-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: left;
  display: block;
}

.calc-section-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.calc-section-icon.time-icon {
  background: #eff6ff;
  color: #2563eb;
}

.calc-section-icon.sample-icon {
  background: #ecfdf5;
  color: #059669;
}

.calc-section-icon.mold-icon {
  background: #faf5ff;
  color: #7e22ce;
}

.calc-section-icon.comm-icon {
  background: #eff6ff;
  color: #2563eb;
}

.calc-section-icon.procure-icon {
  background: #ecfdf5;
  color: #059669;
}

.calc-section-icon.listing-icon {
  background: #fffbeb;
  color: #d97706;
}

.calc-section-icon.cert-trade-icon {
  background: #f3e8ff;
  color: #7c3aed;
}

body.dark-theme .calc-section-icon.time-icon {
  background: rgba(37, 99, 235, 0.2);
  color: #93c5fd;
}

body.dark-theme .calc-section-icon.sample-icon {
  background: rgba(5, 150, 105, 0.2);
  color: #6ee7b7;
}

body.dark-theme .calc-section-icon.mold-icon {
  background: rgba(126, 34, 206, 0.2);
  color: #d8b4fe;
}

body.dark-theme .calc-section-icon.comm-icon {
  background: rgba(37, 99, 235, 0.2);
  color: #93c5fd;
}

body.dark-theme .calc-section-icon.procure-icon {
  background: rgba(5, 150, 105, 0.2);
  color: #6ee7b7;
}

body.dark-theme .calc-section-icon.listing-icon {
  background: rgba(217, 119, 6, 0.2);
  color: #fcd34d;
}

body.dark-theme .calc-section-icon.cert-trade-icon {
  background: rgba(124, 58, 237, 0.2);
  color: #c4b5fd;
}

.calc-section-header h4 {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--text-primary);
}

.calc-section-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.calc-subtotal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 500;
}

.calc-subtotal-badge.time-badge {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.calc-subtotal-badge.sample-badge {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.calc-subtotal-badge.mold-badge {
  background: #faf5ff;
  color: #6b21a8;
  border: 1px solid #e9d5ff;
}

.calc-subtotal-badge.comm-badge {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.calc-subtotal-badge.procure-badge {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.calc-subtotal-badge.listing-badge {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

.calc-subtotal-badge.cert-trade-badge {
  background: #f3e8ff;
  color: #6d28d9;
  border: 1px solid #ddd6fe;
}

body.dark-theme .calc-subtotal-badge.time-badge {
  background: rgba(37, 99, 235, 0.18);
  color: #93c5fd;
  border-color: rgba(96, 165, 250, 0.3);
}

body.dark-theme .calc-subtotal-badge.sample-badge {
  background: rgba(5, 150, 105, 0.18);
  color: #6ee7b7;
  border-color: rgba(52, 211, 153, 0.3);
}

body.dark-theme .calc-subtotal-badge.mold-badge {
  background: rgba(126, 34, 206, 0.18);
  color: #d8b4fe;
  border-color: rgba(192, 132, 252, 0.3);
}

body.dark-theme .calc-subtotal-badge.comm-badge {
  background: rgba(37, 99, 235, 0.18);
  color: #93c5fd;
  border-color: rgba(96, 165, 250, 0.3);
}

body.dark-theme .calc-subtotal-badge.procure-badge {
  background: rgba(5, 150, 105, 0.18);
  color: #6ee7b7;
  border-color: rgba(52, 211, 153, 0.3);
}

body.dark-theme .calc-subtotal-badge.listing-badge {
  background: rgba(217, 119, 6, 0.18);
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.3);
}

body.dark-theme .calc-subtotal-badge.cert-trade-badge {
  background: rgba(124, 58, 237, 0.18);
  color: #c4b5fd;
  border-color: rgba(167, 139, 250, 0.3);
}

.calc-card-body {
  padding-top: 1.25rem;
}

/* Roles Grid */
.calc-roles-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.calc-role-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  gap: 1rem;
  flex-wrap: wrap;
}

.calc-role-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 220px;
}

.calc-role-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.calc-role-name i {
  color: var(--primary);
  margin-right: 4px;
}

.calc-role-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.calc-role-inputs {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.calc-input-compact {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.calc-input-compact label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.calc-input-compact span {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.calc-num-input {
  width: 76px;
  padding: 0.35rem 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: right;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
}

.calc-time-summary-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border-color);
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.calc-time-summary-row strong {
  color: var(--primary);
}

/* Sample Grid */
.calc-sample-inputs-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.calc-sample-row.highlight-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 1rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

@media (max-width: 768px) {
  .calc-sample-row.highlight-box {
    grid-template-columns: 1fr;
  }
}

.calc-sample-fields-3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 768px) {
  .calc-sample-fields-3col {
    grid-template-columns: 1fr;
  }
}

.calc-sample-fields-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 768px) {
  .calc-sample-fields-2col {
    grid-template-columns: 1fr;
  }
}

.calc-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.calc-field-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.calc-tooltip {
  color: var(--text-dim);
  cursor: help;
  font-size: 0.75rem;
}

.calc-input-with-unit {
  position: relative;
  display: flex;
  align-items: center;
}

.calc-prefix {
  position: absolute;
  left: 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

.calc-input-with-unit .calc-prefix + .calc-input {
  padding-left: 1.75rem;
}

.calc-unit {
  position: absolute;
  right: 0.75rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  pointer-events: none;
}

.calc-input-with-unit .calc-input {
  width: 100%;
  padding-right: 2.5rem;
}

/* Outside Unit Group for Sampling and Calculator Inputs */
.calc-input-unit-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.calc-input-unit-group .calc-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding-right: 0.75rem;
}

.calc-prefix-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.calc-prefix-wrap .calc-prefix {
  position: absolute;
  left: 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  pointer-events: none;
}

.calc-prefix-wrap .calc-input.has-prefix {
  padding-left: 1.75rem;
  padding-right: 0.75rem;
}

.calc-unit-outside {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  user-select: none;
}

body.dark-theme .calc-unit-outside {
  color: #94a3b8;
}

.calc-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease;
}

.calc-input:focus {
  border-color: var(--primary);
  outline: none;
}

.calc-hint {
  font-size: 0.7rem;
  color: var(--text-dim);
}

/* Result Card */
.calc-result-card {
  padding: 1.5rem;
  background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-subtle) 100%);
  border: 1px solid var(--border-color);
}

.calc-result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.calc-result-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--success-light);
  color: var(--success);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.calc-total-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border-color);
  text-align: center;
}

.calc-total-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.calc-total-amount {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 0.25rem 0;
  color: var(--primary);
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1.1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.calc-total-amount .calc-curr {
  font-size: 1.4rem;
  font-weight: 700;
}

.calc-total-subtext {
  font-size: 0.72rem;
  color: var(--text-dim);
}

/* Breakdown Progress Bar */
.calc-breakdown-wrapper {
  padding-top: 1rem;
}

.calc-breakdown-bar {
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  overflow: hidden;
  display: flex;
  margin-bottom: 0.85rem;
}

.calc-bar-segment {
  height: 100%;
  transition: width 0.3s ease;
}

.calc-bar-segment.segment-time,
.calc-bar-segment.segment-comm {
  background: #2563eb;
}

.calc-bar-segment.segment-sample,
.calc-bar-segment.segment-procure {
  background: #059669;
}

.calc-bar-segment.segment-mold {
  background: #9333ea;
}

.calc-bar-segment.segment-listing {
  background: #d97706;
}

.calc-bar-segment.segment-cert {
  background: #7c3aed;
}

.calc-breakdown-legend {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.legend-item {
  display: flex;
  align-items: center;
  font-size: 0.76rem;
  gap: 6px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legend-dot.dot-time,
.legend-dot.dot-comm { background: #2563eb; }
.legend-dot.dot-sample,
.legend-dot.dot-procure { background: #059669; }
.legend-dot.dot-mold { background: #9333ea; }
.legend-dot.dot-listing { background: #d97706; }
.legend-dot.dot-cert { background: #7c3aed; }

.legend-label {
  color: var(--text-secondary);
}

.legend-item strong {
  color: var(--text-primary);
}

.legend-amt {
  color: var(--text-muted);
  margin-left: auto;
  font-family: monospace;
}

/* Amortization Card */
.calc-amort-card {
  padding: 1.25rem 1.5rem;
}

.calc-amort-card .card-header,
.calc-sync-card .card-header {
  padding: 0 0 0.75rem 0 !important;
  background: transparent !important;
  border-bottom: 1px solid var(--border-color);
  text-align: left;
}

.calc-amort-card .card-header h4,
.calc-sync-card .card-header h4 {
  margin: 0;
  text-align: left;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.calc-amort-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.calc-amort-qty-row {
  position: relative;
  display: flex;
  align-items: center;
}

.calc-qty-pills {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.calc-qty-pill {
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: all 0.15s ease;
}

.calc-qty-pill:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
}

.calc-qty-pill.active {
  background: var(--primary-light);
  color: var(--primary);
  border-color: rgba(37, 99, 235, 0.3);
  font-weight: 600;
}

.calc-unit-cost-box {
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  margin-top: 0.25rem;
}

.calc-unit-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.calc-unit-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 0.25rem 0;
}

.calc-unit-value strong {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--success);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.calc-unit-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.calc-unit-tip {
  margin: 0;
  font-size: 0.7rem;
  color: var(--text-dim);
  line-height: 1.35;
}

/* Sync to Catalog Card */
.calc-sync-card {
  padding: 1.25rem 1.5rem;
}

.calc-sync-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.calc-select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}

.calc-sync-preview {
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.85rem;
  font-size: 0.75rem;
}

.calc-sync-p-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.calc-sync-sku {
  font-weight: 600;
  color: var(--primary);
}

.calc-sync-old {
  color: var(--text-muted);
}

/* Searchable SKU Input & Dropdown */
.calc-sku-search-container {
  position: relative;
  width: 100%;
}

.calc-sku-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.calc-sku-input-icon {
  position: absolute;
  left: 10px;
  color: var(--text-muted);
  font-size: 0.88rem;
  pointer-events: none;
}

.calc-sku-search-input {
  width: 100%;
  padding-left: 32px !important;
  padding-right: 54px !important;
  font-size: 0.82rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.calc-sku-clear-btn {
  position: absolute;
  right: 28px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  border-radius: var(--radius-xs);
  transition: color 0.15s;
}

.calc-sku-clear-btn:hover {
  color: var(--text-primary);
}

.calc-sku-dropdown-toggle {
  position: absolute;
  right: 6px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 5px;
  font-size: 0.72rem;
  border-radius: var(--radius-xs);
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calc-sku-dropdown-toggle:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.calc-sku-dropdown-toggle.open {
  transform: rotate(180deg);
}

.calc-sku-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  padding: 4px;
}

.calc-sku-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease;
  border-bottom: 1px solid var(--border-light);
}

.calc-sku-dropdown-item:last-child {
  border-bottom: none;
}

.calc-sku-dropdown-item:hover,
.calc-sku-dropdown-item.selected {
  background: var(--bg-hover);
}

.calc-sku-item-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.calc-sku-pill {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-light);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  display: inline-block;
  align-self: flex-start;
}

.calc-sku-item-name {
  font-size: 0.78rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.calc-sku-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.calc-sku-item-cost {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.calc-sku-empty {
  padding: 1rem 0.75rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.76rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* ==========================================================================
   商品回收站 (Recycle Bin Drawer & Table Styles)
   ========================================================================== */
.badge-recycle-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  background-color: var(--danger);
  color: #ffffff;
  margin-left: 6px;
  line-height: 1;
  transition: all 0.2s ease;
}

.badge-recycle-count.zero {
  background-color: var(--bg-subtle);
  color: var(--text-dim);
  border: 1px solid var(--border-color);
  font-weight: 500;
}

.drawer-modal.recycle-bin-drawer {
  width: 1040px;
  max-width: 96vw;
  overflow-x: hidden;
}

.recycle-header-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.recycle-header-badge {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--bg-subtle);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
}

.recycle-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  background-color: var(--bg-subtle);
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap;
}

.recycle-search-box {
  position: relative;
  flex: 1;
  min-width: 240px;
  max-width: 380px;
}

.recycle-search-box i {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
  font-size: 0.82rem;
  pointer-events: none;
}

.recycle-search-box input {
  width: 100%;
  padding: 0.42rem 0.75rem 0.42rem 2.1rem;
  font-size: 0.82rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-primary);
  outline: none;
  transition: var(--transition);
}

.recycle-search-box input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-light);
}

.recycle-actions-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.recycle-actions-divider {
  width: 1px;
  height: 20px;
  background-color: var(--border-color);
  margin: 0 3px;
}

/* 批量恢复按钮 (Batch Restore) - 安全/建构类主要操作 */
#btn-recycle-batch-restore {
  position: relative;
  font-weight: 600;
  transition: var(--transition);
}

#btn-recycle-batch-restore:disabled {
  background-color: rgba(79, 70, 229, 0.05);
  border: 1px solid rgba(79, 70, 229, 0.28);
  color: rgba(79, 70, 229, 0.7);
  cursor: not-allowed;
  opacity: 0.85;
}

#btn-recycle-batch-restore:disabled i {
  color: var(--primary);
  opacity: 0.85;
}

#btn-recycle-batch-restore:disabled .recycle-count-pill {
  background-color: rgba(79, 70, 229, 0.12);
  color: var(--primary);
}

#btn-recycle-batch-restore:not(:disabled) {
  background-color: var(--primary);
  border: 1px solid var(--primary);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.35);
  cursor: pointer;
}

#btn-recycle-batch-restore:not(:disabled) i {
  color: #ffffff;
}

#btn-recycle-batch-restore:not(:disabled) .recycle-count-pill {
  background-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}

#btn-recycle-batch-restore:not(:disabled):hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.45);
  transform: translateY(-1px);
}

/* 批量彻底删除按钮 (Batch Purge) - 警示暖橙/琥珀金 (针对勾选条目，中度危险警示) */
#btn-recycle-batch-purge {
  position: relative;
  font-weight: 600;
  transition: var(--transition);
}

#btn-recycle-batch-purge:disabled {
  background-color: rgba(217, 119, 6, 0.06);
  border: 1.5px solid rgba(217, 119, 6, 0.3);
  color: rgba(180, 83, 9, 0.72);
  cursor: not-allowed;
  opacity: 0.85;
}

#btn-recycle-batch-purge:disabled i {
  color: #d97706;
  opacity: 0.85;
}

#btn-recycle-batch-purge:not(:disabled) {
  background-color: #fffbeb;
  border: 1.5px solid #d97706;
  color: #b45309;
  box-shadow: 0 1px 4px rgba(217, 119, 6, 0.18);
  cursor: pointer;
}

#btn-recycle-batch-purge:not(:disabled) i {
  color: #d97706;
}

#btn-recycle-batch-purge:not(:disabled):hover {
  background-color: #d97706;
  border-color: #d97706;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.38);
  transform: translateY(-1px);
}

#btn-recycle-batch-purge:not(:disabled):hover i {
  color: #ffffff;
}

/* 清空回收站按钮 (Clear All) - 高危极度警戒正红 (全盘彻底销毁，最高危险警示) */
#btn-recycle-clear-all {
  position: relative;
  font-weight: 600;
  background-color: var(--danger-light);
  border: 1.5px solid var(--danger);
  color: var(--danger);
  box-shadow: 0 1px 3px rgba(220, 38, 38, 0.12);
  transition: var(--transition);
}

#btn-recycle-clear-all i {
  color: var(--danger);
}

#btn-recycle-clear-all:hover {
  background-color: var(--danger);
  border-color: var(--danger);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.4);
  transform: translateY(-1px);
}

#btn-recycle-clear-all:hover i {
  color: #ffffff;
}

/* 选中项计数徽章 Pill */
.recycle-count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  border-radius: var(--radius-full);
  margin-left: 4px;
  transition: var(--transition);
}

/* 深色模式精细适配 */
body.dark-theme #btn-recycle-batch-restore:disabled {
  background-color: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.35);
  color: rgba(165, 180, 252, 0.75);
}

body.dark-theme #btn-recycle-batch-restore:disabled i {
  color: #818cf8;
}

body.dark-theme #btn-recycle-batch-restore:disabled .recycle-count-pill {
  background-color: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}

body.dark-theme #btn-recycle-batch-purge:disabled {
  background-color: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.35);
  color: rgba(251, 191, 36, 0.75);
}

body.dark-theme #btn-recycle-batch-purge:disabled i {
  color: #f59e0b;
}

body.dark-theme #btn-recycle-batch-purge:not(:disabled) {
  background-color: rgba(245, 158, 11, 0.15);
  border-color: #f59e0b;
  color: #fbbf24;
}

body.dark-theme #btn-recycle-batch-purge:not(:disabled) i {
  color: #fbbf24;
}

body.dark-theme #btn-recycle-batch-purge:not(:disabled):hover {
  background-color: #d97706;
  border-color: #d97706;
  color: #ffffff;
}

body.dark-theme #btn-recycle-batch-purge:not(:disabled):hover i {
  color: #ffffff;
}

body.dark-theme #btn-recycle-clear-all {
  background-color: rgba(244, 63, 94, 0.12);
  border-color: rgba(244, 63, 94, 0.5);
  color: #fda4af;
}

body.dark-theme #btn-recycle-clear-all i {
  color: #fda4af;
}

body.dark-theme #btn-recycle-clear-all:hover {
  background-color: #f43f5e;
  border-color: #f43f5e;
  color: #ffffff;
}

body.dark-theme #btn-recycle-clear-all:hover i {
  color: #ffffff;
}

.recycle-drawer-body {
  padding: 0;
  overflow-y: auto;
  flex: 1;
  min-height: 360px;
  background-color: var(--bg-surface);
}

.recycle-table {
  width: 100%;
  border-collapse: collapse;
}

.recycle-table th {
  position: sticky;
  top: 0;
  background: var(--bg-subtle);
  z-index: 5;
  border-bottom: 1px solid var(--border-color);
  padding: 0.65rem 0.85rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-muted);
}

.recycle-table td {
  padding: 0.65rem 0.85rem;
  font-size: 0.82rem;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}

.recycle-table tbody tr:hover {
  background-color: var(--bg-subtle);
}

.recycle-thumb {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 1px solid var(--border-color);
  background-color: var(--bg-subtle);
}

.recycle-sku {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 700;
  color: var(--primary);
  font-size: 0.8rem;
  background: var(--primary-light);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  display: inline-block;
}

.recycle-prod-title {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.84rem;
  line-height: 1.35;
  margin-bottom: 2px;
}

.recycle-cat-brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.76rem;
}

.recycle-cat-pill {
  color: var(--text-secondary);
  font-weight: 500;
}

.recycle-brand-pill {
  color: var(--text-dim);
  font-size: 0.72rem;
}

.recycle-price-box {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.recycle-price-usd {
  font-weight: 700;
  color: var(--primary);
  font-size: 0.84rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.recycle-cost-rmb {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.recycle-time-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.74rem;
  color: var(--text-muted);
}

.recycle-time-user {
  font-size: 0.7rem;
  color: var(--text-dim);
}

.recycle-action-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.recycle-action-btns .btn {
  padding: 0.28rem 0.6rem;
  font-size: 0.74rem;
}

.recycle-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.5rem;
  text-align: center;
}

.recycle-empty-icon {
  width: 68px;
  height: 68px;
  border-radius: var(--radius-full);
  background-color: var(--bg-subtle);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--border-color);
}

.recycle-empty-state h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
}

.recycle-empty-state p {
  font-size: 0.82rem;
  color: var(--text-muted);
  max-width: 420px;
  margin: 0;
  line-height: 1.5;
}

.recycle-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.5rem;
  border-top: 1px solid var(--border-color);
  background-color: var(--bg-surface);
}

.recycle-footer-tip {
  font-size: 0.74rem;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ==========================================================================
   Recycle Bin Enhanced Styles
   ========================================================================== */
.recycle-page-card {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.recycle-page-card .card-header,
.recycle-page-header {
  padding: 0 !important;
  border-bottom: none !important;
  background: transparent !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  width: 100% !important;
}

.recycle-header-title {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.recycle-header-title h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.recycle-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.recycle-stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: var(--shadow-xs);
  transition: var(--transition);
}

.recycle-stat-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: #cbd5e1;
}

.recycle-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.recycle-stat-icon.danger {
  background: rgba(239, 68, 68, 0.12);
  color: var(--danger);
}

.recycle-stat-icon.amber {
  background: rgba(245, 158, 11, 0.12);
  color: var(--warning);
}

.recycle-stat-icon.primary {
  background: rgba(99, 102, 241, 0.12);
  color: var(--primary);
}

.recycle-stat-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.recycle-stat-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.recycle-stat-val {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.recycle-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  background: var(--bg-subtle);
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}

.recycle-search-box {
  position: relative;
  width: 460px;
  max-width: 100%;
  display: flex;
  align-items: center;
}

.recycle-search-box .recycle-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.88rem;
  pointer-events: none;
  z-index: 2;
}

.recycle-search-box input#recycle-search-input {
  width: 100%;
  height: 40px;
  padding: 0 2.2rem 0 2.65rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
  background-color: var(--bg-surface);
  color: var(--text-primary);
  font-size: 0.84rem;
  outline: none;
  transition: var(--transition);
  box-shadow: var(--shadow-xs);
}

.recycle-search-box input#recycle-search-input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.recycle-search-box input#recycle-search-input::placeholder {
  color: var(--text-muted);
  font-size: 0.84rem;
}

.recycle-search-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  font-size: 0.85rem;
  line-height: 1;
}

.recycle-search-clear:hover {
  color: var(--text-primary);
}

.recycle-security-pill {
  font-size: 0.78rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-surface);
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
}

.recycle-actions-group {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

/* ==========================================================================
   Export & Import Center Enhanced Styles
   ========================================================================== */
.export-import-card {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.export-import-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
}

.export-import-title-wrap h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.export-import-title-wrap .card-subtitle {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 3px;
  display: block;
}

.export-import-toggle-group {
  display: inline-flex;
  background: var(--bg-subtle);
  padding: 4px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
  gap: 4px;
}

.export-import-tab-btn {
  border: none;
  background: transparent;
  padding: 0.45rem 1.2rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: var(--transition);
}

.export-import-tab-btn:hover {
  color: var(--text-primary);
}

.export-import-tab-btn.active {
  background: var(--bg-surface);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}

/* Import Workflow Styles */
.import-quick-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  background: var(--bg-subtle);
  padding: 0.75rem 1.15rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}

.import-steps-hint {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.import-steps-hint .step-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 500;
}

.import-steps-hint .step-num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.import-steps-hint .step-arrow {
  color: var(--text-dim);
  font-size: 0.7rem;
}

.import-tools-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.import-dropzone {
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-lg);
  padding: 3rem 1.5rem;
  text-align: center;
  background: var(--bg-surface);
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.import-dropzone:hover,
.import-dropzone.dragover {
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.04);
}

.dropzone-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
}

.dropzone-text h4 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.dropzone-text p {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0;
}

.dropzone-badges {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
  flex-wrap: wrap;
}

.file-badge {
  font-size: 0.75rem;
  padding: 2px 8px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xs);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.import-file-info {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.file-info-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.file-info-left i {
  font-size: 1.5rem;
}

.file-info-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.file-info-meta {
  font-size: 0.76rem;
  color: var(--text-muted);
}

/* Strategy Panel */
.import-strategy-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.strategy-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.strategy-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.strategy-tip {
  font-size: 0.76rem;
  color: var(--text-muted);
}

.strategy-options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
}

.strategy-option-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.85rem;
  cursor: pointer;
  transition: var(--transition);
}

.strategy-option-item:hover {
  border-color: var(--primary);
}

.strategy-option-item.active,
.strategy-option-item:has(input:checked) {
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.05);
}

.strategy-option-item input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-color);
  border-radius: 50%;
  background-color: #ffffff;
  outline: none;
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  margin: 0;
  margin-top: 2px;
  padding: 0;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.strategy-option-item input[type="radio"]::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--primary);
  transform: scale(0);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.strategy-option-item input[type="radio"]:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.strategy-option-item input[type="radio"]:checked {
  border-color: var(--primary);
  background-color: #ffffff;
}

.strategy-option-item input[type="radio"]:checked::before {
  transform: scale(1);
}

.strategy-option-item input[type="radio"]:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}

.strategy-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.strategy-name {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-primary);
}

.strategy-desc {
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.35;
}

/* Preview Table */
.import-preview-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-top: 1px solid var(--border-color);
  padding-top: 1.15rem;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.preview-title-group h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.preview-summary {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.preview-action-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.preview-table-wrapper {
  max-height: 380px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.preview-table {
  width: 100%;
  border-collapse: collapse;
}

.preview-table th {
  position: sticky;
  top: 0;
  background: var(--bg-subtle);
  z-index: 2;
  font-size: 0.76rem;
  color: var(--text-muted);
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--border-color);
  text-align: left;
}

.preview-table td {
  font-size: 0.8rem;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}

.badge-import-new {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
}

.badge-import-update {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.25);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
}

.badge-import-warn {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.25);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
}

/* Export Tab Enhancements */
.export-stats-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.export-stat-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-shadow: var(--shadow-xs);
}

.export-stat-label {
  font-size: 0.76rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.export-stat-val {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* ==========================================================================
   自定义通用确认弹窗 (Custom Confirmation Dialog) - 替代系统默认 alert/confirm
   ========================================================================== */
.confirm-modal-card {
  max-width: 460px;
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.4);
  display: flex;
  flex-direction: column;
  animation: modalPopIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.confirm-modal-header {
  padding: 1.25rem 1.35rem 0.85rem;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  position: relative;
  background: var(--bg-surface);
}

.confirm-modal-icon-badge {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.confirm-modal-icon-badge.danger {
  background: var(--danger-light);
  color: var(--danger);
  border: 1px solid rgba(220, 38, 38, 0.25);
}

.confirm-modal-icon-badge.warning {
  background: var(--warning-light);
  color: var(--warning);
  border: 1px solid rgba(217, 119, 6, 0.25);
}

.confirm-modal-icon-badge.primary {
  background: var(--primary-light);
  color: var(--primary);
  border: 1px solid rgba(37, 99, 235, 0.25);
}

.confirm-modal-title-group {
  flex: 1;
  padding-right: 1.5rem;
}

.confirm-modal-title-group h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.confirm-modal-subtitle {
  font-size: 0.76rem;
  color: var(--text-muted);
}

.confirm-modal-header .btn-close {
  position: absolute;
  top: 1rem;
  right: 1.1rem;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  transition: var(--transition);
}

.confirm-modal-header .btn-close:hover {
  color: var(--text-primary);
  background: var(--bg-subtle);
}

.confirm-modal-body {
  padding: 0.4rem 1.35rem 1.25rem;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.confirm-modal-message {
  margin-bottom: 0.75rem;
  color: var(--text-primary);
  font-weight: 500;
}

.confirm-modal-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  line-height: 1.45;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #b45309;
}

body.dark-theme .confirm-modal-alert {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

.confirm-modal-alert i {
  margin-top: 2px;
  font-size: 0.85rem;
  flex-shrink: 0;
  color: #d97706;
}

.confirm-modal-footer {
  padding: 0.85rem 1.35rem 1.15rem;
  border-top: 1px solid var(--border-color);
  background: var(--bg-subtle);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
}

/* 取消与确定按钮样式区分 */
#btn-confirm-cancel {
  min-width: 82px;
  font-weight: 500;
}

.btn-danger-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 86px;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--danger);
  background-color: var(--danger);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.32);
  transition: var(--transition);
}

.btn-danger-solid:hover {
  background-color: #b91c1c;
  border-color: #b91c1c;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.45);
  transform: translateY(-1px);
}

/* ==========================================================================
   Dual-Mode Image Uploader & Lightbox Viewer Styles
   ========================================================================== */
.image-uploader-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  margin-bottom: 0.75rem;
}

@media (max-width: 992px) {
  .image-uploader-grid {
    grid-template-columns: 1fr;
  }
}

.image-uploader-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  transition: var(--transition);
  box-shadow: var(--shadow-xs);
}

.image-uploader-card:hover {
  border-color: var(--primary-light);
  box-shadow: var(--shadow-sm);
}

.card-uploader-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.card-slot-title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.image-source-badge {
  font-size: 0.68rem;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  font-weight: 600;
  letter-spacing: 0.2px;
}

.image-source-badge.badge-local {
  background: rgba(79, 70, 229, 0.12);
  color: #6366f1;
  border: 1px solid rgba(79, 70, 229, 0.25);
}

.image-source-badge.badge-remote {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.image-source-badge.badge-empty {
  background: var(--bg-input);
  color: var(--text-dim);
  border: 1px solid var(--border-color);
}

.image-preview-stage {
  position: relative;
  width: 100%;
  height: 135px;
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  border: 1px dashed var(--border-color);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.stage-img {
  width: 100%;
  height: 135px;
  object-fit: contain;
  transition: transform 0.2s ease;
  background: rgba(0, 0, 0, 0.03);
}

.stage-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  color: var(--text-dim);
  font-size: 0.72rem;
  text-align: center;
  padding: 0.5rem;
}

.stage-placeholder i.stage-icon {
  font-size: 1.7rem;
  color: var(--text-dim);
  opacity: 0.6;
}

.stage-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  backdrop-filter: blur(2px);
}

.image-preview-stage:hover .stage-overlay {
  opacity: 1;
}

.btn-stage-action {
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: none;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.btn-stage-action:hover {
  transform: translateY(-1px);
}

.btn-stage-view {
  background: #4f46e5;
  color: #ffffff;
}
.btn-stage-view:hover {
  background: #4338ca;
}

.btn-stage-clear {
  background: #ef4444;
  color: #ffffff;
}
.btn-stage-clear:hover {
  background: #dc2626;
}

.image-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.image-input-group input[type="text"] {
  font-size: 0.74rem;
  padding: 0.38rem 0.6rem;
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-family: monospace;
}

.image-btn-row {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

.btn-subtle {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 0.28rem 0.55rem;
  font-size: 0.72rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: var(--transition);
}

.btn-subtle:hover {
  background: var(--bg-surface);
  border-color: var(--primary);
  color: var(--primary);
}

.image-helper-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.65rem 0.95rem;
  background: rgba(79, 70, 229, 0.05);
  border: 1px solid rgba(79, 70, 229, 0.16);
  border-radius: var(--radius-md);
  font-size: 0.74rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: 0.65rem;
  margin-bottom: 1.25rem;
}

.image-helper-banner code {
  background: rgba(79, 70, 229, 0.1);
  color: var(--primary);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 0.7rem;
}

/* Lightbox Fullscreen 100% Raw Viewer */
.image-lightbox-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 29, 0.95);
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(12px);
  animation: fadeIn 0.2s ease-out;
}

.lightbox-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.lightbox-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 1.35rem;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  z-index: 20;
  gap: 1rem;
}

.lightbox-title-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  flex: 1;
}

.lightbox-tag {
  background: rgba(99, 102, 241, 0.22);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, 0.45);
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.lightbox-sku-tag {
  font-family: monospace;
  font-size: 0.75rem;
  font-weight: 600;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.32);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
}

.lightbox-title-text {
  font-size: 0.84rem;
  font-weight: 500;
  color: #f8fafc;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lightbox-type-pill {
  font-size: 0.72rem;
  font-weight: 500;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  flex-shrink: 0;
}

.lightbox-source-path {
  font-family: monospace;
  font-size: 0.82rem;
  color: #e2e8f0;
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lightbox-center-group {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lightbox-counter-badge {
  font-family: monospace;
  font-size: 0.82rem;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.14);
  border: 1px solid rgba(56, 189, 248, 0.35);
  padding: 3px 14px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.lightbox-dim-badge {
  font-size: 0.72rem;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-family: monospace;
  white-space: nowrap;
}

.lightbox-controls {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
  justify-content: flex-end;
}

.lightbox-zoom-group {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-sm);
  padding: 1px 3px;
  gap: 2px;
}

.lightbox-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #f8fafc;
  padding: 0.32rem 0.65rem;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: background-color 0.15s, border-color 0.15s;
}

.lightbox-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.35);
}

.lightbox-zoom-text {
  font-size: 0.82rem;
  font-family: monospace;
  min-width: 48px;
  text-align: center;
  color: #38bdf8;
  font-weight: 700;
}

.lightbox-close-btn {
  background: rgba(239, 68, 68, 0.25);
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: #fca5a5;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 0.5rem;
  transition: background-color 0.15s, transform 0.15s;
}

.lightbox-close-btn:hover {
  background: rgba(239, 68, 68, 0.5);
  color: #ffffff;
  transform: scale(1.06);
}

.lightbox-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  cursor: grab;
}

.lightbox-viewport.is-dragging {
  cursor: grabbing;
}

.lightbox-canvas-container {
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  transition: transform 0.05s ease-out;
}

.lightbox-full-img {
  max-width: 90vw;
  max-height: 82vh;
  object-fit: contain;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Unified Lightbox Bottom Dock Bar */
.lightbox-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1.5rem;
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  min-height: 60px;
  z-index: 20;
  gap: 1rem;
}

.lightbox-bottom-left,
.lightbox-bottom-right {
  flex: 1;
  display: flex;
  align-items: center;
}

.lightbox-bottom-right {
  justify-content: flex-end;
}

.lightbox-bottom-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lightbox-bottom-hint {
  font-size: 0.74rem;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.lightbox-bottom-hint kbd {
  font-family: inherit;
  font-size: 0.7rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 1px 6px;
  border-radius: 4px;
  color: #e2e8f0;
}

/* Interactive preview cursors on thumbnails */
.product-img-thumb,
.detail-main-img-box img,
.detail-thumb-item img {
  cursor: zoom-in;
  transition: transform 0.18s ease;
}

.product-img-thumb:hover {
  transform: scale(1.08);
}

/* Floating Prev/Next Action Buttons (Sole Navigation Points on Canvas) */
.lightbox-float-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #f8fafc;
  font-size: 1.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 35;
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.7);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.lightbox-float-nav:hover {
  background: rgba(79, 70, 229, 0.95);
  border-color: rgba(165, 180, 252, 0.7);
  color: #ffffff;
  transform: translateY(-50%) scale(1.12);
  box-shadow: 0 12px 30px rgba(79, 70, 229, 0.6);
}

.lightbox-float-nav:active {
  transform: translateY(-50%) scale(0.95);
}

.lightbox-float-nav.disabled,
.lightbox-float-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-float-prev {
  left: 1.5rem;
}

.btn-float-next {
  right: 1.5rem;
}

/* Bottom Gallery Thumbnail Dock Strip */
.lightbox-thumbs-dock {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 2px 6px;
}

.lightbox-thumb-item {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.55;
  border: 2px solid transparent;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  background: #1e293b;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.lightbox-thumb-item:hover {
  opacity: 0.95;
  transform: translateY(-2px) scale(1.08);
  border-color: rgba(255, 255, 255, 0.4);
}

.lightbox-thumb-item.active {
  opacity: 1;
  border-color: #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.7);
  transform: translateY(-2px) scale(1.12);
}

@media (max-width: 768px) {
  .lightbox-bottom-left,
  .lightbox-bottom-right {
    display: none;
  }
  .lightbox-bottom-bar {
    justify-content: center;
    padding: 0.35rem 0.75rem;
    min-height: 52px;
  }
  .lightbox-title-text {
    max-width: 140px;
  }
  .btn-float-prev {
    left: 0.5rem;
  }
  .btn-float-next {
    right: 0.5rem;
  }
}

/* ==========================================================================
   Amazon Profit Lifecycle Calculator (亚马逊全链路利润测算模型)
   ========================================================================== */

/* 1. Top Scenario & Preset Bar */
.amz-top-card {
  margin-bottom: 1rem;
  border-left: 4px solid #ff9900;
  padding: 0.85rem 1.25rem;
}

.amz-top-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.amz-top-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex: 1 1 500px;
}

.amz-logo-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ff9900 0%, #e68a00 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 4px 12px rgba(255, 153, 0, 0.35);
  flex-shrink: 0;
}

.amz-header-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.amz-tag-fba {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: rgba(255, 153, 0, 0.15);
  color: #d97706;
  border: 1px solid rgba(255, 153, 0, 0.3);
}

.amz-header-desc {
  margin: 4px 0 0 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.amz-top-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  flex-shrink: 0;
  padding-top: 0;
  border-top: none;
}

.amz-scenario-group,
.amz-sync-group,
.amz-rate-group {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.amz-control-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.amz-preset-btn {
  padding: 4px 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-main);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.amz-preset-btn:hover {
  border-color: #ff9900;
  color: #ff9900;
  background: rgba(255, 153, 0, 0.08);
}

.amz-preset-btn.active {
  background: #ff9900;
  color: #ffffff;
  border-color: #ff9900;
  box-shadow: 0 2px 6px rgba(255, 153, 0, 0.35);
}

.amz-pim-select-wrap {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.amz-select-sm {
  padding: 4px 10px;
  font-size: 0.8rem;
  max-width: 220px;
  height: 32px;
}

.amz-rate-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 2px 8px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-main);
}

.amz-rate-input {
  width: 68px;
  padding: 2px 4px;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-surface);
  color: var(--primary);
}

.amz-rate-input:focus {
  outline: none;
  border-color: var(--primary);
}

/* 2. Main 2-Column Grid Layout (50% / 50% 对等分栏，杜绝页面横向滚动) */
#tab-amazon-calc {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

.amz-panel-view {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.amz-main-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Reverse Target Costing Layout: 40% Calculation Inputs, 60% Decision & Tables */
#amz-panel-reverse .amz-main-layout {
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
}

@media (max-width: 1100px) {
  .amz-main-layout,
  #amz-panel-reverse .amz-main-layout {
    grid-template-columns: 1fr;
  }
}

.amz-inputs-col,
.amz-analytics-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* 3. Section Cards & Headers */
.amz-section-card {
  margin-bottom: 0;
  border: 1px solid var(--border-color);
  transition: var(--transition);
}

.amz-section-card:hover {
  border-color: rgba(255, 153, 0, 0.4);
}

.amz-section-header {
  display: flex;
  flex-direction: column;
  padding: 0.85rem 1.15rem;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-color);
  gap: 0.35rem;
}

.amz-header-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.75rem;
}

.amz-section-title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  flex: 1 1 auto;
}

.amz-step-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ff9900;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 3-Row Module Titles Layout */
.amz-section-titles-wrap {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.amz-section-h4,
.amz-section-title h4 {
  margin: 0;
  font-size: 0.91rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.3;
}

.amz-section-en {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.25;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.1px;
}

.amz-section-desc,
.amz-section-subtitle {
  font-size: 0.74rem;
  color: var(--text-secondary, #64748b);
  line-height: 1.35;
  padding-left: calc(24px + 0.65rem);
  width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.dark-theme .amz-section-desc,
.dark-theme .amz-section-subtitle {
  color: #94a3b8;
}

/* 2-Row Subtotal Highlight Badges - Left Aligned */
.amz-subtotal-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start !important;
  text-align: left !important;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  line-height: 1.35;
  white-space: nowrap;
  flex-shrink: 0;
}

.amz-subtotal-badge .badge-subtotal-title {
  font-size: 0.71rem;
  color: var(--text-muted) !important;
  font-weight: 500;
  display: block;
  text-align: left !important;
}

.amz-subtotal-badge .badge-subtotal-value {
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--primary);
  display: block;
  font-variant-numeric: tabular-nums;
  text-align: left !important;
}

/* Single Parameter per Row */
.form-row-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Form highlight & calc pill */
.form-control-highlight {
  border-color: #ff9900 !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: #d97706 !important;
  background: rgba(255, 153, 0, 0.04) !important;
}

.amz-calc-pill {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.amz-info-metrics-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.65rem 0.85rem;
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border-color);
}

@media (max-width: 600px) {
  .amz-info-metrics-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.amz-mini-metric {
  display: flex;
  flex-direction: column;
}

.amz-mini-metric .metric-label {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.amz-mini-metric .metric-val {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-main);
  margin-top: 2px;
}

/* 4. KPI Summary Cards Grid */
.amz-kpi-card {
  border-top: 4px solid #10b981;
}

.amz-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
}

@media (max-width: 600px) {
  .amz-kpi-grid {
    grid-template-columns: 1fr;
  }
}

.amz-kpi-box {
  padding: 0.9rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-subtle);
  display: flex;
  flex-direction: column;
}

.amz-kpi-box .kpi-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.amz-kpi-box .kpi-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.amz-kpi-box .kpi-main-val {
  font-size: 1.45rem;
  font-weight: 800;
  margin: 0.35rem 0 0.2rem 0;
  color: var(--text-main);
  letter-spacing: -0.5px;
}

.amz-kpi-box .kpi-sub-val {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.amz-kpi-highlight {
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.06);
}

.kpi-sub-tag {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: rgba(16, 185, 129, 0.18);
  color: #059669;
}

/* 5. Cost Breakdown Stack Bar */
.amz-card-header-sm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color);
}

.amz-card-header-sm h5 {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.amz-cost-progress-bar {
  display: flex;
  height: 18px;
  border-radius: 9px;
  overflow: hidden;
  margin-bottom: 1rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
}

.stack-seg {
  height: 100%;
  transition: width 0.3s ease;
}

.seg-cogs { background: #6366f1; }       /* 采购研发 - Indigo */
.seg-freight { background: #06b6d4; }    /* 头程物流 - Cyan */
.seg-fba { background: #f59e0b; }        /* FBA仓配 - Amber */
.seg-referral { background: #ec4899; }   /* 佣金促销 - Pink */
.seg-ad { background: #8b5cf6; }         /* 广告ACOS - Purple */
.seg-profit { background: #10b981; }     /* 净利润 - Emerald */

.amz-breakdown-table-wrap {
  overflow-x: auto;
}

.amz-table-sm {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.amz-table-sm th {
  padding: 6px 8px;
  text-align: right;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
  font-weight: 600;
}

.amz-table-sm th:first-child {
  text-align: left;
}

.amz-table-sm td {
  padding: 6px 8px;
  text-align: right;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-main);
}

.amz-table-sm td:first-child {
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.amz-table-sm tr.total-row td {
  font-weight: 700;
  border-top: 2px solid var(--border-color);
  border-bottom: none;
  font-size: 0.82rem;
}

.color-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* 6. Batch Capital Projection */
.amz-batch-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.amz-input-inline {
  width: 80px;
  height: 28px;
  padding: 2px 6px;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
}

.amz-batch-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

@media (max-width: 600px) {
  .amz-batch-grid {
    grid-template-columns: 1fr;
  }
}

.batch-stat-box {
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
}

.batch-label {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.batch-val {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 3px 0 2px 0;
  color: var(--text-main);
}

.batch-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.highlight-batch {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.35);
}

/* 7. Sensitivity Heatmap Matrix */
.amz-matrix-tip {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin: 0 0 0.85rem 0;
  line-height: 1.45;
}

.amz-matrix-table-wrap {
  overflow-x: auto;
}

.amz-heatmap-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px;
  font-size: 0.75rem;
  text-align: center;
}

.amz-heatmap-table th {
  padding: 6px 4px;
  font-weight: 600;
  background: var(--bg-subtle);
  border-radius: 4px;
  color: var(--text-secondary);
}

.amz-heatmap-table td {
  padding: 6px 4px;
  border-radius: 4px;
  font-family: inherit;
  transition: transform 0.15s ease;
}

.amz-heatmap-table td:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-sm);
  z-index: 2;
}

.heat-base-col {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.heat-profit-high {
  background: rgba(16, 185, 129, 0.22);
  color: #047857;
  font-weight: 700;
}

.heat-profit-med {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  font-weight: 600;
}

.heat-profit-low {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
  font-weight: 600;
}

.heat-loss {
  background: rgba(239, 68, 68, 0.18);
  color: #dc2626;
  font-weight: 700;
}

/* 8. Actions Row & Decision Export Cards */
.amz-decision-export-card {
  border-left: 4px solid #ef4444 !important;
  margin-top: 1rem;
}

.amz-export-product-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.amz-export-label {
  width: 140px;
  min-width: 140px;
  max-width: 140px;
  flex: 0 0 140px;
  box-sizing: border-box;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-color, #1e293b);
  white-space: nowrap;
  margin-top: 0.45rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.amz-export-label i {
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.amz-export-label-text {
  display: inline-block;
  width: 6em;
  text-align: justify;
  text-align-last: justify;
}

.amz-export-input-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.amz-export-input-wrap input {
  width: 100%;
  box-sizing: border-box;
  font-weight: 500;
  font-size: 0.9rem;
  background-image: none !important;
}

/* Suppress browser autofill icons, contact icons, credential popups, and picker arrows */
#form-name::-webkit-credentials-auto-fill-button,
#form-name::-webkit-contacts-auto-fill-button,
#form-name::-webkit-caps-lock-indicator,
#form-cat-name::-webkit-credentials-auto-fill-button,
#form-cat-name::-webkit-contacts-auto-fill-button,
#form-cat-name::-webkit-caps-lock-indicator,
.attr-hero-input::-webkit-credentials-auto-fill-button,
.attr-hero-input::-webkit-contacts-auto-fill-button,
.attr-hero-input::-webkit-caps-lock-indicator,
.amz-export-input-wrap input::-webkit-credentials-auto-fill-button,
.amz-export-input-wrap input::-webkit-contacts-auto-fill-button,
.amz-export-input-wrap input::-webkit-caps-lock-indicator,
.amz-export-input-wrap input::-webkit-calendar-picker-indicator,
#amz-fwd-product-name::-webkit-credentials-auto-fill-button,
#amz-fwd-product-name::-webkit-contacts-auto-fill-button,
#amz-fwd-product-name::-webkit-caps-lock-indicator,
#amz-fwd-product-name::-webkit-calendar-picker-indicator,
#amz-rev-product-name::-webkit-credentials-auto-fill-button,
#amz-rev-product-name::-webkit-contacts-auto-fill-button,
#amz-rev-product-name::-webkit-caps-lock-indicator,
#amz-rev-product-name::-webkit-calendar-picker-indicator,
#amz-fwd-operator::-webkit-credentials-auto-fill-button,
#amz-fwd-operator::-webkit-contacts-auto-fill-button,
#amz-fwd-operator::-webkit-caps-lock-indicator,
#amz-fwd-operator::-webkit-calendar-picker-indicator,
#amz-rev-operator::-webkit-credentials-auto-fill-button,
#amz-rev-operator::-webkit-contacts-auto-fill-button,
#amz-rev-operator::-webkit-caps-lock-indicator,
#amz-rev-operator::-webkit-calendar-picker-indicator {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  right: 0 !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
}

.amz-export-input-wrap small {
  font-size: 0.72rem;
  color: var(--text-muted, #64748b);
}

.amz-actions-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 0.25rem;
  flex-wrap: wrap;
}

body.dark-theme .amz-decision-export-card {
  border-left-color: #f87171 !important;
}

/* Dark Theme Adjustments */
body.dark-theme .amz-top-card {
  border-left-color: #ff9900;
}

body.dark-theme .heat-profit-high {
  background: rgba(16, 185, 129, 0.28);
  color: #6ee7b7;
}

body.dark-theme .heat-profit-med {
  background: rgba(16, 185, 129, 0.16);
  color: #34d399;
}

body.dark-theme .heat-profit-low {
  background: rgba(245, 158, 11, 0.22);
  color: #fbbf24;
}

body.dark-theme .heat-loss {
  background: rgba(239, 68, 68, 0.25);
  color: #f87171;
}

body.dark-theme .form-control-highlight {
  color: #fbbf24 !important;
  background: rgba(255, 153, 0, 0.1) !important;
}

/* ==========================================================================
   Mode Switcher Bar (高对比度双核模式切换栏: 正向精算 vs. 竞品倒推)
   ========================================================================== */
.amz-mode-bar-container {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.15rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.amz-mode-bar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.amz-mode-bar-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.amz-mode-bar-hint {
  font-size: 0.78rem;
  color: var(--text-secondary);
  background: rgba(79, 70, 229, 0.06);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid rgba(79, 70, 229, 0.12);
}

.amz-mode-segmented-control {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  background: rgba(0, 0, 0, 0.03);
  padding: 4px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
}

.amz-mode-toggle-btn {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.amz-mode-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(0, 0, 0, 0.08);
}

.amz-mode-toggle-btn .toggle-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--bg-hover);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.amz-mode-toggle-btn .toggle-text {
  flex: 1;
}

.amz-mode-toggle-btn .toggle-title {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.25;
}

.amz-mode-toggle-btn .toggle-sub {
  display: block;
  font-size: 0.73rem;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.2;
}

.amz-mode-toggle-btn .toggle-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: var(--bg-hover);
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Active State: Forward Mode (Vibrant Blue & Dark Navy) */
.amz-mode-toggle-btn.active[data-mode="forward"],
.amz-mode-toggle-btn.active.mode-forward {
  background: var(--bg-surface);
  border-color: #2563eb;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.18);
}

.amz-mode-toggle-btn.active[data-mode="forward"] .toggle-icon,
.amz-mode-toggle-btn.active.mode-forward .toggle-icon {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
}

.amz-mode-toggle-btn.active[data-mode="forward"] .toggle-title,
.amz-mode-toggle-btn.active.mode-forward .toggle-title {
  color: #1d4ed8;
}

.amz-mode-toggle-btn.active[data-mode="forward"] .toggle-sub,
.amz-mode-toggle-btn.active.mode-forward .toggle-sub {
  color: #4b5563;
}

.amz-mode-toggle-btn.active[data-mode="forward"] .toggle-badge,
.amz-mode-toggle-btn.active.mode-forward .toggle-badge {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid rgba(37, 99, 235, 0.25);
}

/* Active State: Reverse Mode (Emerald Green & Gold) */
.amz-mode-toggle-btn.active[data-mode="reverse"],
.amz-mode-toggle-btn.active.mode-reverse {
  background: var(--bg-surface);
  border-color: #059669;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.18);
}

.amz-mode-toggle-btn.active[data-mode="reverse"] .toggle-icon,
.amz-mode-toggle-btn.active.mode-reverse .toggle-icon {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
}

.amz-mode-toggle-btn.active[data-mode="reverse"] .toggle-title,
.amz-mode-toggle-btn.active.mode-reverse .toggle-title {
  color: #047857;
}

.amz-mode-toggle-btn.active[data-mode="reverse"] .toggle-sub,
.amz-mode-toggle-btn.active.mode-reverse .toggle-sub {
  color: #4b5563;
}

.amz-mode-toggle-btn.active[data-mode="reverse"] .toggle-badge,
.amz-mode-toggle-btn.active.mode-reverse .toggle-badge {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

/* Dark Theme Adjustments for Mode Bar */
body.dark-theme .amz-mode-bar-container {
  background: var(--bg-card);
  border-color: var(--border-color);
}

body.dark-theme .amz-mode-segmented-control {
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.1);
}

body.dark-theme .amz-mode-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.05);
}

body.dark-theme .amz-mode-toggle-btn.active[data-mode="forward"] {
  background: #1e293b;
  border-color: #3b82f6;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

body.dark-theme .amz-mode-toggle-btn.active[data-mode="forward"] .toggle-title {
  color: #93c5fd;
}

body.dark-theme .amz-mode-toggle-btn.active[data-mode="forward"] .toggle-sub {
  color: #94a3b8;
}

body.dark-theme .amz-mode-toggle-btn.active[data-mode="reverse"] {
  background: #1e293b;
  border-color: #10b981;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

body.dark-theme .amz-mode-toggle-btn.active[data-mode="reverse"] .toggle-title {
  color: #6ee7b7;
}

body.dark-theme .amz-mode-toggle-btn.active[data-mode="reverse"] .toggle-sub {
  color: #94a3b8;
}

/* ==========================================================================
   Formula Callouts & KPI Formula Tags (计算公式明确标注体系)
   ========================================================================== */
.amz-formula-callout {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.85rem;
  background: rgba(79, 70, 229, 0.04);
  border: 1px dashed rgba(79, 70, 229, 0.28);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.amz-formula-callout i {
  color: var(--primary);
  font-size: 0.85rem;
  margin-top: 2px;
  flex-shrink: 0;
}

.amz-formula-callout .formula-title {
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
}

.amz-formula-callout .formula-code {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  background: rgba(0, 0, 0, 0.04);
  padding: 2px 6px;
  border-radius: 4px;
  color: #4338ca;
  word-break: break-word;
}

.kpi-formula-tag {
  display: block;
  font-size: 0.68rem;
  color: var(--text-muted);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  margin-top: 0.35rem;
  padding-top: 0.3rem;
  border-top: 1px dashed var(--border-color);
  line-height: 1.35;
}

/* ==========================================================================
   Amazon Calculator Lifecycle Explanation Banners
   ========================================================================== */
.amz-forward-banner {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(99, 102, 241, 0.06) 100%);
  border: 1px solid rgba(37, 99, 235, 0.25);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.amz-fwd-banner-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
  flex-shrink: 0;
}

.amz-fwd-banner-content {
  flex: 1;
}

.amz-fwd-banner-content h4 {
  margin: 0 0 4px 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-main);
}

.amz-fwd-banner-content p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.amz-fwd-banner-action {
  flex-shrink: 0;
}

.amz-fwd-banner-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #2563eb;
  background: rgba(37, 99, 235, 0.1);
  border: 1px solid rgba(37, 99, 235, 0.25);
  border-radius: 20px;
}

.amz-reverse-banner {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(59, 130, 246, 0.06) 100%);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.amz-rev-banner-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.35);
  flex-shrink: 0;
}

.amz-rev-banner-content {
  flex: 1;
}

.amz-rev-banner-content h4 {
  margin: 0 0 4px 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-main);
}

.amz-rev-banner-content p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.amz-rev-banner-action {
  flex-shrink: 0;
}

.amz-step-rev {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}

.amz-subtotal-rev {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #059669 !important;
  border-color: rgba(16, 185, 129, 0.25) !important;
}

/* Sourcing Feasibility Diagnosis Card */
.amz-diagnosis-card {
  padding: 1rem 1.15rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.25rem;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.3);
  transition: all 0.2s ease;
}

.amz-diagnosis-card.diag-warn {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.3);
}

.amz-diagnosis-card.diag-danger {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.3);
}

.diagnosis-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  gap: 0.75rem;
}

.diagnosis-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
}

.diagnosis-text {
  margin: 0;
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Sourcing Ladder Table */
.amz-ladder-table tbody tr.row-active-tier {
  background: rgba(79, 70, 229, 0.06);
  font-weight: 600;
}

.amz-ladder-table th,
.amz-ladder-table td {
  padding: 0.45rem 0.55rem;
  vertical-align: middle;
}

.amz-ladder-table td:not(:last-child),
.amz-ladder-table th:not(:last-child) {
  white-space: nowrap !important;
  word-break: keep-all !important;
}

.amz-ladder-table td:last-child {
  white-space: normal !important;
  font-size: 0.74rem;
  line-height: 1.35;
  min-width: 110px;
}

/* ==========================================================================
   Reverse Target Costing: Sub-modules & Formula Milestone Pills
   ========================================================================== */
.amz-sub-module {
  background: var(--bg-hover, rgba(0, 0, 0, 0.02));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 8px);
  padding: 0.85rem 1rem;
  margin-bottom: 0.85rem;
  transition: all 0.2s ease;
}

.amz-sub-module:last-child {
  margin-bottom: 0;
}

.amz-sub-module-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px dashed var(--border-color);
}

.amz-sub-module-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-main);
}

.amz-sub-module-title i {
  font-size: 0.88rem;
}

.amz-sub-module-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full, 9999px);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Sub-module intermediate metric summary strip (Legacy Support) */
.amz-submodule-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 6px);
  padding: 0.45rem 0.75rem;
  margin-top: 0.65rem;
  font-size: 0.78rem;
}

.amz-submodule-summary .sub-label {
  color: var(--text-secondary);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.amz-submodule-summary .sub-val {
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
}

/* Module Milestone Pill: Highlights formula output (Legacy Support) */
.amz-module-milestone-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(37, 99, 235, 0.06);
  border: 1px solid rgba(37, 99, 235, 0.25);
  border-radius: var(--radius-sm, 6px);
  padding: 0.55rem 0.85rem;
  margin-top: 0.75rem;
  font-size: 0.8rem;
}

.amz-module-milestone-pill .milestone-label {
  color: var(--text-main);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.amz-module-milestone-pill .milestone-val {
  font-size: 0.95rem;
  font-weight: 700;
  color: #2563eb;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
  margin-left: 0.5rem;
}

.amz-module-milestone-pill .milestone-val.text-success {
  color: #059669;
}

.amz-module-milestone-pill.highlight-gold {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.3);
}

.amz-module-milestone-pill.highlight-gold .milestone-val {
  color: #d97706;
}

/* ==========================================================================
   Unified Sub-module 2-Row Result Bar across Forward & Reverse Models
   (各个模块子模块辅助文本两行显示：第一行展示标题标签，第二行展示对应数据)
   ========================================================================== */
.amz-submodule-result-bar {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  gap: 0.35rem !important;
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-sm, 6px);
  padding: 0.55rem 0.85rem !important;
  margin-top: 0.65rem;
  font-size: 0.78rem;
  overflow: visible !important;
  box-sizing: border-box;
  min-height: 52px;
  width: 100%;
}

.amz-submodule-result-bar .sub-label {
  color: var(--text-secondary, #64748b);
  font-size: 0.76rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  white-space: nowrap !important;
  line-height: 1.25;
}

.amz-submodule-result-bar .sub-val-group,
.amz-submodule-result-bar > .sub-val {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  flex-shrink: 0;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.35;
}

@media (max-width: 600px) {
  .amz-submodule-result-bar {
    white-space: normal !important;
  }
  .amz-submodule-result-bar .sub-val-group,
  .amz-submodule-result-bar > .sub-val {
    flex-wrap: wrap !important;
    white-space: normal !important;
  }
}

.amz-submodule-result-bar .sub-val {
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
  white-space: nowrap !important;
}

.amz-submodule-result-bar .sub-sep {
  color: var(--text-muted, #94a3b8);
  font-weight: bold;
}

.amz-submodule-result-bar .sub-extra {
  font-size: 0.74rem;
  color: var(--text-secondary, #64748b);
  white-space: nowrap !important;
}

.amz-submodule-result-bar small {
  font-size: 0.74rem;
  color: var(--text-muted, #94a3b8);
  white-space: nowrap !important;
}

/* Milestone Variant (Blue highlight) */
.amz-submodule-result-bar.result-milestone {
  background: rgba(37, 99, 235, 0.05) !important;
  border: 1px solid rgba(37, 99, 235, 0.3) !important;
}

.amz-submodule-result-bar.result-milestone .sub-label {
  color: var(--text-main, #1e293b);
  font-weight: 700;
}

.amz-submodule-result-bar.result-milestone .milestone-val,
.amz-submodule-result-bar.result-milestone .sub-val {
  color: #2563eb;
}

/* Milestone Gold Variant (Procurement / COGS Golden Highlight) */
.amz-submodule-result-bar.result-milestone-gold {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.09) 0%, rgba(245, 158, 11, 0.03) 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.38) !important;
}

.amz-submodule-result-bar.result-milestone-gold .sub-label {
  color: #b45309;
  font-weight: 700;
}

.amz-submodule-result-bar.result-milestone-gold .milestone-val,
.amz-submodule-result-bar.result-milestone-gold .sub-val {
  color: #059669;
}

/* ==========================================================================
   Zero-Slide Decision Analysis Window (零滑动决策视窗与多视角切换)
   ========================================================================== */
.amz-decision-window {
  margin-bottom: 1rem;
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.amz-analytics-tabs-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem !important;
  background: var(--bg-hover, rgba(0, 0, 0, 0.02));
  border-bottom: 1px solid var(--border-color);
  flex-wrap: nowrap;
}

.amz-decision-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.amz-decision-title-wrap h5 {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
}

.amz-tab-toggle-group {
  display: inline-flex;
  align-items: center;
  background: var(--bg-surface);
  padding: 2px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  flex-shrink: 0;
}

.btn-analytics-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-analytics-tab:hover {
  color: var(--primary);
  background: var(--bg-hover);
}

.btn-analytics-tab.active {
  color: #ffffff !important;
  background: var(--primary, #2563eb) !important;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25);
}

.amz-zero-scroll-pane {
  padding: 0.5rem 0.65rem !important;
  overflow: hidden !important;
}

.amz-zero-scroll-pane .amz-breakdown-table-wrap {
  overflow-x: hidden !important;
  width: 100% !important;
}

.amz-view-pane {
  display: none;
  width: 100%;
}

.amz-view-pane.active {
  display: block;
}

/* Split view (双视角平铺) */
.amz-zero-scroll-pane.split-view-active {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.amz-zero-scroll-pane.split-view-active .amz-view-pane {
  display: block !important;
}

/* Ensure zero sliding, complete display, and left-aligned table layout */
.amz-waterfall-table,
.amz-ladder-table {
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse;
}

.amz-waterfall-table th,
.amz-waterfall-table td,
.amz-ladder-table th,
.amz-ladder-table td {
  text-align: left !important;
  padding: 5px 6px !important;
  vertical-align: middle;
  font-size: 0.75rem;
  overflow: visible !important;
}

.amz-waterfall-table th,
.amz-ladder-table th {
  background: var(--bg-hover, rgba(0, 0, 0, 0.02));
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border-color);
  font-size: 0.74rem;
  white-space: nowrap !important;
  text-align: left !important;
}

.amz-waterfall-table td.wf-cell-name {
  text-align: left !important;
  display: table-cell !important;
  font-weight: 500;
  color: var(--text-main);
  white-space: nowrap !important;
}

.amz-waterfall-table td.wf-cell-num {
  text-align: left !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
  font-weight: 600;
}

.amz-waterfall-table td.wf-cell-badge {
  text-align: left !important;
  white-space: nowrap !important;
}

.amz-waterfall-table tr.wf-row-subtotal {
  font-weight: 700;
  background: rgba(37, 99, 235, 0.06) !important;
}

.amz-waterfall-table tr.wf-row-subtotal td {
  border-top: 1.5px solid rgba(37, 99, 235, 0.25);
  border-bottom: 1.5px solid rgba(37, 99, 235, 0.25);
}

.amz-waterfall-table tr.wf-row-subtotal td.wf-cell-name {
  color: #1d4ed8;
  font-weight: 700;
}

.amz-ladder-table th,
.amz-ladder-table td {
  text-align: left !important;
  padding: 6px 8px !important;
  font-size: 0.75rem;
}

.amz-ladder-table td:last-child {
  white-space: normal !important;
  font-size: 0.72rem;
  line-height: 1.35;
  text-align: left !important;
}

/* Dark Theme Adjustments for Reverse & Formulas */
body.dark-theme .amz-mode-bar {
  background: var(--bg-card);
  border-color: var(--border-color);
}

body.dark-theme .amz-mode-badge-highlight {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

body.dark-theme .amz-formula-callout {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.35);
}

body.dark-theme .amz-formula-callout .formula-code {
  background: rgba(255, 255, 255, 0.08);
  color: #a5b4fc;
}

body.dark-theme .amz-forward-banner {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12) 0%, rgba(99, 102, 241, 0.1) 100%);
  border-color: rgba(37, 99, 235, 0.3);
}

body.dark-theme .amz-fwd-banner-tag {
  color: #93c5fd;
  background: rgba(37, 99, 235, 0.2);
  border-color: rgba(37, 99, 235, 0.4);
}

body.dark-theme .amz-reverse-banner {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(59, 130, 246, 0.1) 100%);
  border-color: rgba(16, 185, 129, 0.3);
}

body.dark-theme .amz-subtotal-rev {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #6ee7b7 !important;
}

body.dark-theme .amz-diagnosis-card {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
}

body.dark-theme .amz-diagnosis-card.diag-warn {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
}

body.dark-theme .amz-diagnosis-card.diag-danger {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
}

/* Real-time Parameter Calculation Badges in Form Groups */
.form-group-label-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 0.35rem !important;
  gap: 0.5rem !important;
  width: 100% !important;
  flex-wrap: wrap !important;
}

.form-group-label-row .form-label {
  margin-bottom: 0 !important;
  flex: 1 1 auto !important;
}

.param-calc-badge {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: var(--primary-color, #2563eb) !important;
  background: rgba(37, 99, 235, 0.08) !important;
  padding: 0.12rem 0.45rem !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
  border: 1px solid rgba(37, 99, 235, 0.2) !important;
  display: inline-block !important;
}

.param-calc-badge.badge-deduct {
  color: #dc2626 !important;
  background: rgba(220, 38, 38, 0.08) !important;
  border-color: rgba(220, 38, 38, 0.2) !important;
}

.param-calc-badge.badge-profit {
  color: #16a34a !important;
  background: rgba(22, 163, 74, 0.08) !important;
  border-color: rgba(22, 163, 74, 0.2) !important;
}

.param-calc-badge.badge-cost {
  color: #d97706 !important;
  background: rgba(217, 119, 6, 0.08) !important;
  border-color: rgba(217, 119, 6, 0.2) !important;
}

body.dark-theme .param-calc-badge {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #93c5fd !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}
body.dark-theme .param-calc-badge.badge-deduct {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #fca5a5 !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}
body.dark-theme .param-calc-badge.badge-profit {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #6ee7b7 !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}
body.dark-theme .param-calc-badge.badge-cost {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #fcd34d !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}

/* ==========================================================================
   SKU Rules & Code Generation Studio (SKU 编码中心)
   ========================================================================== */

#tab-sku-rules {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

.sku-subtab-pane {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.sku-studio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
}

.sku-card {
  padding: 1.25rem 1.4rem;
  border-radius: var(--radius-lg, 12px);
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.card-header-clean {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-light, #f1f5f9);
  flex-wrap: wrap;
  gap: 0.5rem;
}

.card-title-clean {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  margin: 0 0 0.25rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.card-subtitle-clean {
  font-size: 0.8rem;
  color: var(--text-muted, #64748b);
  margin: 0;
}

.card-actions-clean {
  display: flex;
  gap: 0.5rem;
}

/* Rule formula preview */
.sku-rule-preview-strip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--bg-secondary, #f8fafc);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md, 8px);
  border: 1px dashed var(--border-color, #cbd5e1);
  width: 100%;
  box-sizing: border-box;
  flex-wrap: wrap;
}

.preview-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary, #475569);
  white-space: nowrap;
}

.sku-formula-chip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.85rem;
  font-weight: 600;
}

.sku-seg-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.6rem;
  background: rgba(99, 102, 241, 0.1);
  color: #4f46e5;
  border-radius: 6px;
  border: 1px solid rgba(99, 102, 241, 0.25);
  font-size: 0.78rem;
}

.sku-sep-badge {
  color: var(--text-muted, #94a3b8);
  font-weight: bold;
}

/* Segments list checkboxes */
.sku-segments-config {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-light, #f1f5f9);
}

.section-sublabel {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary, #334155);
  margin-bottom: 0.75rem;
}

.sku-segments-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.6rem;
  width: 100%;
  box-sizing: border-box;
}

.sku-seg-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-secondary, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-primary, #1e293b);
  transition: all 0.15s ease;
  user-select: none;
}

.sku-seg-item:hover {
  background: rgba(99, 102, 241, 0.05);
  border-color: rgba(99, 102, 241, 0.3);
}

.sku-seg-item input:checked + span {
  font-weight: 600;
  color: var(--primary, #4f46e5);
}

/* Dictionary Segment Navigation Tabs */
.sku-dict-nav-tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  flex-wrap: wrap;
}

.sku-dict-nav-btn {
  background: var(--bg-secondary, #f8fafc);
  border: 1px solid var(--border-color, #cbd5e1);
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.sku-dict-nav-btn:hover {
  color: var(--primary, #4f46e5);
  border-color: var(--primary, #4f46e5);
  background: rgba(99, 102, 241, 0.05);
}

.sku-dict-nav-btn.active {
  color: #ffffff;
  background: var(--primary, #4f46e5);
  border-color: var(--primary, #4f46e5);
}

/* Dictionary Toolbar */
.dict-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
}

.dict-search-wrap {
  position: relative;
  flex: 1;
  min-width: 220px;
}

.dict-search-wrap i {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted, #94a3b8);
  font-size: 0.85rem;
}

.dict-search-input {
  width: 100%;
  padding: 0.45rem 0.75rem 0.45rem 2.1rem;
  font-size: 0.82rem;
  border: 1px solid var(--border-color, #cbd5e1);
  border-radius: 6px;
  background: var(--bg-card, #ffffff);
  color: var(--text-primary, #0f172a);
  box-sizing: border-box;
}

.dict-add-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.dict-input-sm {
  padding: 0.42rem 0.65rem;
  font-size: 0.82rem;
  border: 1px solid var(--border-color, #cbd5e1);
  border-radius: 6px;
  background: var(--bg-card, #ffffff);
  color: var(--text-primary, #0f172a);
  box-sizing: border-box;
}

/* Visual Brand Cards Grid */
.brand-visual-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.25rem;
  width: 100%;
  box-sizing: border-box;
}

.brand-visual-card {
  background: var(--bg-secondary, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: all 0.15s ease;
}

.brand-visual-card:hover {
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.brand-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand-card-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary, #0f172a);
}

.brand-card-code-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Category Tree Hierarchy Cards */
.cat-tree-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
  width: 100%;
  box-sizing: border-box;
}

.cat-tree-card {
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 10px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.cat-tree-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border-light, #f1f5f9);
}

.subcat-pill-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.subcat-visual-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.55rem;
  background: var(--bg-secondary, #f8fafc);
  border: 1px solid var(--border-light, #e2e8f0);
  border-radius: 6px;
  font-size: 0.78rem;
  color: var(--text-secondary, #334155);
}

/* Spec Visual Chips */
.spec-visual-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  width: 100%;
  box-sizing: border-box;
}

.spec-visual-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.65rem;
  background: var(--bg-secondary, #f8fafc);
  border: 1px solid var(--border-color, #cbd5e1);
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-primary, #0f172a);
}

/* Dictionary Tables */
.dict-table-container {
  max-height: 380px;
  overflow-y: auto;
  overflow-x: auto;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
}

.dict-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  min-width: 500px;
}

.dict-table th {
  background: var(--bg-secondary, #f8fafc);
  padding: 0.65rem 0.85rem;
  font-weight: 600;
  color: var(--text-secondary, #475569);
  text-align: left;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  position: sticky;
  top: 0;
  z-index: 1;
}

.dict-table td {
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--border-light, #f1f5f9);
  color: var(--text-primary, #1e293b);
  vertical-align: middle;
}

.dict-table tr:hover td {
  background: rgba(99, 102, 241, 0.02);
}

.dict-code-badge {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  background: rgba(14, 165, 233, 0.1);
  color: #0284c7;
  border-radius: 4px;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

/* Spec dimension filter pills */
.spec-dimension-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  width: 100%;
  box-sizing: border-box;
}

.spec-dim-pill {
  padding: 0.35rem 0.85rem;
  border-radius: 20px;
  border: 1px solid var(--border-color, #cbd5e1);
  background: var(--bg-card, #ffffff);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary, #475569);
  cursor: pointer;
  transition: all 0.15s ease;
}

.spec-dim-pill:hover {
  border-color: var(--primary, #4f46e5);
  color: var(--primary, #4f46e5);
}

.spec-dim-pill.active {
  background: var(--primary, #4f46e5);
  color: #ffffff;
  border-color: var(--primary, #4f46e5);
}

/* Interactive Single SKU Generator inputs */
.sku-gen-inputs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .sku-gen-inputs-grid {
    grid-template-columns: 1fr;
  }
}

/* Result Hero Box */
.sku-result-hero-box {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(14, 165, 233, 0.06) 100%);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  width: 100%;
  box-sizing: border-box;
}

.sku-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sku-hero-tag {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary, #4f46e5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.sku-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
}

.sku-status-badge.badge-valid {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.sku-status-badge.badge-duplicate {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.sku-code-display-wrap {
  text-align: center;
  padding: 1rem 0.75rem;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, #cbd5e1);
  border-radius: 8px;
  margin-bottom: 1rem;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
  width: 100%;
  box-sizing: border-box;
}

.sku-code-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--primary, #4f46e5);
  word-break: break-all;
}

.sku-segments-breakdown {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.15rem;
}

.breakdown-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 0.25rem 0.6rem;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-light, #e2e8f0);
  border-radius: 6px;
  font-size: 0.75rem;
}

.breakdown-label {
  color: var(--text-muted, #94a3b8);
  font-size: 0.68rem;
}

.breakdown-val {
  font-family: ui-monospace, monospace;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
}

.sku-hero-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Barcode Render Card */
.sku-barcode-box {
  background: var(--bg-secondary, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 10px;
  padding: 1rem;
  width: 100%;
  box-sizing: border-box;
}

.barcode-box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.barcode-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary, #475569);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.barcode-render-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.85rem;
  background: #ffffff;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  width: 100%;
  box-sizing: border-box;
}

#barcode-canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

.barcode-sub-caption {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 0.82rem;
  color: #334155;
  letter-spacing: 0.15em;
  margin-top: 0.45rem;
}

/* Variant Matrix Styles */
.matrix-inputs-form {
  background: var(--bg-secondary, #f8fafc);
  padding: 1rem 1.2rem;
  border-radius: 8px;
  border: 1px solid var(--border-light, #e2e8f0);
  width: 100%;
  box-sizing: border-box;
}

.matrix-results-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.matrix-stats-pill {
  font-size: 0.8rem;
  font-weight: 600;
  color: #0369a1;
  background: #e0f2fe;
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid #bae6fd;
}

.matrix-actions {
  display: flex;
  gap: 0.5rem;
}

/* Dark Theme Overrides for SKU Module */
body.dark-theme .sku-card {
  background: #1e293b;
  border-color: #334155;
}

body.dark-theme .card-header-clean {
  border-bottom-color: #334155;
}

body.dark-theme .card-title-clean {
  color: #f1f5f9;
}

body.dark-theme .sku-rule-preview-strip {
  background: #0f172a;
  border-color: #334155;
}

body.dark-theme .sku-seg-item {
  background: #0f172a;
  border-color: #334155;
  color: #cbd5e1;
}

body.dark-theme .brand-visual-card {
  background: #0f172a;
  border-color: #334155;
}

body.dark-theme .cat-tree-card {
  background: #1e293b;
  border-color: #334155;
}

body.dark-theme .cat-tree-header {
  border-bottom-color: #334155;
}

body.dark-theme .subcat-visual-pill {
  background: #0f172a;
  border-color: #334155;
  color: #cbd5e1;
}

body.dark-theme .spec-visual-chip {
  background: #0f172a;
  border-color: #334155;
  color: #cbd5e1;
}

body.dark-theme .dict-table th {
  background: #0f172a;
  border-bottom-color: #334155;
  color: #94a3b8;
}

body.dark-theme .dict-table td {
  border-bottom-color: #334155;
  color: #e2e8f0;
}

body.dark-theme .dict-table-container {
  border-color: #334155;
}

body.dark-theme .sku-result-hero-box {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(14, 165, 233, 0.15) 100%);
  border-color: rgba(99, 102, 241, 0.4);
}

body.dark-theme .sku-code-display-wrap {
  background: #0f172a;
  border-color: #334155;
}

body.dark-theme .sku-code-text {
  color: #818cf8;
}

body.dark-theme .breakdown-chip {
  background: #0f172a;
  border-color: #334155;
}

body.dark-theme .breakdown-val {
  color: #f1f5f9;
}

body.dark-theme .sku-barcode-box {
  background: #0f172a;
  border-color: #334155;
}

body.dark-theme .matrix-inputs-form {
  background: #0f172a;
  border-color: #334155;
}

body.dark-theme .spec-dim-pill {
  background: #1e293b;
  border-color: #334155;
  color: #cbd5e1;
}

body.dark-theme .dict-search-input,
body.dark-theme .dict-input-sm {
  background: #0f172a;
  border-color: #334155;
  color: #f1f5f9;
}

/* ==========================================================================
   16. Cloud Sync Status Pill & Indicator Styles
   ========================================================================== */
.cloud-sync-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.cloud-sync-pill:hover {
  border-color: var(--primary);
  background: var(--bg-hover);
  transform: translateY(-1px);
}

.cloud-sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #94a3b8;
  display: inline-block;
  transition: background-color 0.3s ease;
}

.cloud-sync-pill.status-connected .cloud-sync-dot {
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
  animation: pulseGreen 2.5s infinite;
}

.cloud-sync-pill.status-syncing .cloud-sync-dot {
  background: #3b82f6;
  animation: pulseBlue 1s infinite;
}

.cloud-sync-pill.status-syncing i {
  animation: spinIcon 1s linear infinite;
}

.cloud-sync-pill.status-offline .cloud-sync-dot {
  background: #f59e0b;
}

.cloud-sync-pill.status-error .cloud-sync-dot {
  background: #ef4444;
}

@keyframes spinIcon {
  100% { transform: rotate(360deg); }
}

@keyframes pulseGreen {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

@keyframes pulseBlue {
  0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
  70% { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0); }
  100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

/* ==========================================================================
   17. Role Switcher Modal & RBAC Styles (Executive Redesign - Zero Clutter)
   ========================================================================== */
.role-switch-card {
  width: 580px;
  max-width: 95vw;
  background: var(--bg-surface);
  border-radius: var(--radius-xl, 16px);
  border: 1px solid var(--border-color);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--border-color);
  overflow: hidden;
  animation: scaleUp 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

/* Top Accent Stripe */
.role-modal-top-accent {
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #4f46e5 0%, #6366f1 50%, #8b5cf6 100%);
}

/* Modal Header: Clean, Uncluttered, Perfectly Left-Aligned */
.role-modal-header {
  position: relative;
  padding: 1.25rem 1.5rem 1.1rem 1.5rem;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
}

.role-modal-header-main {
  display: flex;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
  text-align: left;
}

.role-modal-header .modal-title-group,
.role-modal-title-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.role-modal-title-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.65rem;
  flex-wrap: wrap;
  text-align: left;
  width: 100%;
}

.role-modal-icon-badge {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.15) 0%, rgba(99, 102, 241, 0.22) 100%);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  border: 1px solid rgba(79, 70, 229, 0.25);
  box-shadow: 0 2px 4px rgba(79, 70, 229, 0.1);
  flex-shrink: 0;
}

.role-modal-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.2px;
  text-align: left;
}

.role-modal-badge {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 9999px;
  background: rgba(79, 70, 229, 0.1);
  color: var(--primary);
  border: 1px solid rgba(79, 70, 229, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.role-modal-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Close Button in Role Modal */
.role-modal-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-dim);
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  padding: 0;
}

.role-modal-close-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.35);
  transform: rotate(90deg);
}

body.dark-theme .role-modal-close-btn {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
}

body.dark-theme .role-modal-close-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.4);
}

/* Modal Body */
.role-modal-body {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 78vh;
  overflow-y: auto;
}

/* Current Identity Status Strip (精简展示当前生效账号身份) */
.current-identity-strip {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0.65rem 1rem;
  border-radius: 8px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  gap: 0.75rem;
}

body.dark-theme .current-identity-strip {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(255, 255, 255, 0.08);
}

.identity-strip-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.identity-subtitle {
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.identity-name-badge {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1d4ed8;
  background: rgba(59, 130, 246, 0.12);
  padding: 2px 10px;
  border-radius: var(--radius-full, 9999px);
  border: 1px solid rgba(59, 130, 246, 0.28);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.identity-name-badge.admin {
  color: #b45309;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.28);
}

body.dark-theme .identity-name-badge {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.35);
}

body.dark-theme .identity-name-badge.admin {
  background: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.35);
}

.identity-state-pill.viewer {
  background: rgba(59, 130, 246, 0.12);
  color: #2563eb;
  border: 1px solid rgba(59, 130, 246, 0.28);
}

body.dark-theme .identity-state-pill.viewer {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.35);
}

.role-section-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  margin-top: 0.25rem;
}

/* Role Options Grid */
.role-options-grid {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.role-card-opt {
  padding: 1.1rem 1.25rem;
  border-radius: 12px;
  border: 2px solid var(--border-color);
  background: var(--bg-surface);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.role-card-opt:hover {
  border-color: var(--primary-light, #818cf8);
  background: var(--bg-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.role-card-opt.active {
  border-color: var(--primary);
  background: rgba(79, 70, 229, 0.04);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

body.dark-theme .role-card-opt.active {
  background: rgba(99, 102, 241, 0.08);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.role-opt-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.role-opt-left-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.role-opt-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.role-opt-icon.admin-icon {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.25) 100%);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.role-opt-icon.viewer-icon {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.25) 100%);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.role-opt-title-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.role-opt-title {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--text-primary);
  line-height: 1.25;
}

.role-opt-subtag {
  font-size: 0.72rem;
  font-weight: 500;
}

.role-opt-subtag.admin-subtag {
  color: #d97706;
}

body.dark-theme .role-opt-subtag.admin-subtag {
  color: #fbbf24;
}

.role-opt-subtag.viewer-subtag {
  color: #2563eb;
}

body.dark-theme .role-opt-subtag.viewer-subtag {
  color: #60a5fa;
}

.role-active-tag {
  font-size: 0.74rem;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.25);
  flex-shrink: 0;
}

/* Structured Capability Bullets */
.role-opt-capabilities {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-left: 2.9rem;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

body.dark-theme .role-opt-capabilities {
  border-top-color: rgba(255, 255, 255, 0.05);
}

.role-cap-item {
  font-size: 0.79rem;
  color: var(--text-secondary);
  line-height: 1.45;
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}

.role-cap-item i {
  font-size: 0.72rem;
  margin-top: 3px;
  flex-shrink: 0;
}

.role-cap-item.allowed i {
  color: #059669;
}

.role-cap-item.confidential i {
  color: #dc2626;
}

.role-cap-item.restricted i {
  color: #d97706;
}

/* Admin Passcode Panel */
.admin-passcode-panel {
  padding: 1.1rem 1.25rem;
  border-radius: 12px;
  background: var(--bg-subtle);
  border: 1.5px solid rgba(79, 70, 229, 0.3);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.08);
  animation: fadeIn 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

body.dark-theme .admin-passcode-panel {
  background: rgba(30, 41, 59, 0.7);
  border-color: rgba(99, 102, 241, 0.4);
}

.passcode-panel-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.passcode-icon-circle {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(79, 70, 229, 0.15);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.passcode-panel-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.passcode-panel-title {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-primary);
}

.passcode-panel-desc {
  font-size: 0.75rem;
  color: var(--text-dim);
}

.passcode-input-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.passcode-input-wrapper {
  position: relative;
  flex: 1;
}

.passcode-lock-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
  font-size: 0.8rem;
}

.role-passcode-input {
  width: 100%;
  padding: 0.55rem 2.2rem 0.55rem 2.2rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 0.88rem;
  outline: none;
  transition: var(--transition);
  box-sizing: border-box;
}

.role-passcode-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

.btn-toggle-passcode {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
}

.btn-toggle-passcode:hover {
  color: var(--text-primary);
}

.btn-confirm-passcode {
  white-space: nowrap;
  padding: 0.55rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.passcode-err-msg {
  font-size: 0.78rem;
  color: #ef4444;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Modal Footer */
.role-modal-footer {
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-subtle);
  border-top: 1px solid var(--border-color);
}

.role-footer-tip {
  font-size: 0.75rem;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ==========================================================================
   18. Read-only Mode Indicator Banner in Product Drawer
   ========================================================================== */
.product-readonly-banner {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 1.25rem;
  background: rgba(245, 158, 11, 0.1);
  border-bottom: 1px solid rgba(245, 158, 11, 0.25);
  color: #b45309;
  font-size: 0.82rem;
  line-height: 1.4;
}

body.dark-theme .product-readonly-banner {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

.product-readonly-banner i {
  font-size: 1.05rem;
  color: #f59e0b;
}

/* Locked read-only state for forms */
.form-readonly-locked input:not([type="button"]):not([type="submit"]):not([type="reset"]),
.form-readonly-locked select,
.form-readonly-locked textarea {
  background-color: var(--bg-hover) !important;
  color: var(--text-muted) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  opacity: 0.85;
}

.form-readonly-locked .btn-upload-trigger,
.form-readonly-locked #btn-modal-auto-sku,
.form-readonly-locked #btn-add-spec-row,
.form-readonly-locked .btn-stage-action,
.form-readonly-locked .btn-remove-spec {
  display: none !important;
}

/* ==========================================================================
   19. Mobile Screen Enhancements (100vw Fullscreen Drawer & Safe Area)
   ========================================================================== */
@media (max-width: 768px) {
  .drawer-modal,
  .drawer-modal.product-edit-drawer,
  #product-modal .drawer-modal,
  .product-detail-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
    border-left: none !important;
    border-radius: 0 !important;
  }

  .drawer-footer {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 16px));
  }

  .top-header {
    padding: 0.75rem 1rem;
    gap: 0.6rem;
  }

  .cloud-sync-pill {
    padding: 0.25rem 0.55rem;
    font-size: 0.75rem;
  }

  .rate-live-pill {
    padding: 0.25rem 0.55rem;
    font-size: 0.75rem;
  }

  .product-card-actions {
    opacity: 1 !important; /* Always visible on mobile touch */
  }
}

/* ==========================================================================
   20. Confidential Base Price & Sensitive Field Masking
   ========================================================================== */
.confidential-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.5rem;
  background: rgba(239, 68, 68, 0.08);
  color: #dc2626;
  border: 1px dashed rgba(239, 68, 68, 0.35);
  border-radius: var(--radius-sm, 6px);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  user-select: none;
}

body.dark-theme .confidential-badge {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.45);
}

.confidential-badge i {
  font-size: 0.72rem;
}

.confidential-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--text-muted, #94a3b8);
  font-size: 0.75rem;
  font-weight: 500;
  font-style: italic;
}

.confidential-text {
  filter: blur(4px);
  user-select: none;
  pointer-events: none;
}

/* ==========================================================================
   21. 业务运营 (Viewer) 权限隔离与抽屉交互优化
   ========================================================================== */

/* 1. 商品抽屉防穿透与滚动隔离 (Overscroll Containment) */
body.drawer-open {
  overflow: hidden !important;
}

.modal-backdrop,
.drawer-modal,
.drawer-body,
.detail-drawer-body,
.product-detail-drawer,
.product-edit-drawer {
  overscroll-behavior: contain !important;
  overscroll-behavior-y: contain !important;
}

/* 2. 业务运营身份下隐藏商品抽屉右上角「查阅档案」和「关闭」按钮 */
body.role-viewer #product-detail-modal .detail-header-actions,
body.role-viewer #product-detail-modal #btn-detail-edit,
body.role-viewer #product-detail-modal #btn-close-detail {
  display: none !important;
}

/* 3. 左侧栏业务运营受限模块变灰与禁止点击 */
.nav-item.nav-item-disabled,
body.role-viewer .nav-item.nav-item-disabled {
  opacity: 0.35 !important;
  filter: grayscale(1) !important;
  cursor: not-allowed !important;
  color: var(--text-muted) !important;
  pointer-events: auto !important;
  user-select: none !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.nav-item.nav-item-disabled:hover,
body.role-viewer .nav-item.nav-item-disabled:hover {
  background: transparent !important;
  color: var(--text-muted) !important;
  cursor: not-allowed !important;
  transform: none !important;
}

.nav-item.nav-item-disabled i {
  color: var(--text-muted) !important;
  opacity: 0.6 !important;
}

.nav-item.nav-item-disabled .nav-badge {
  opacity: 0.4 !important;
  background: var(--bg-subtle) !important;
  color: var(--text-muted) !important;
  border-color: var(--border-color) !important;
}

/* 4. 开发成本计算器：业务运营模式下一键同步至商品档案模块整体变灰、不可使用 */
.calc-sync-card.calc-sync-disabled,
body.role-viewer .calc-sync-card {
  opacity: 0.42 !important;
  filter: grayscale(1) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  user-select: none !important;
  background: var(--bg-subtle) !important;
  border-style: dashed !important;
}

.calc-sync-card.calc-sync-disabled *,
body.role-viewer .calc-sync-card * {
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* 5. 产品经理 (Admin) 身份下确保全部导航菜单、操作卡片与按钮完全恢复高亮可用与自由交互 */
body.role-admin .nav-item {
  opacity: 1 !important;
  filter: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

body.role-admin .nav-item.nav-item-disabled {
  opacity: 1 !important;
  filter: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

body.role-admin .nav-item i {
  opacity: 1 !important;
}

body.role-admin .calc-sync-card,
body.role-admin .calc-sync-card.calc-sync-disabled {
  opacity: 1 !important;
  filter: none !important;
  cursor: auto !important;
  pointer-events: auto !important;
  border-style: solid !important;
}

body.role-admin .calc-sync-card *,
body.role-admin .calc-sync-card.calc-sync-disabled * {
  pointer-events: auto !important;
  cursor: auto !important;
}

/* 6. 业务运营 (Viewer) 身份下禁止批量移入回收站操作，按钮置灰且禁用 */
body.role-viewer #btn-batch-delete,
body.role-viewer .batch-actions .btn-danger {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  filter: grayscale(1) !important;
  background-color: var(--border-color) !important;
  border-color: var(--border-color) !important;
  color: var(--text-muted) !important;
  box-shadow: none !important;
  pointer-events: none !important;
  user-select: none !important;
}

body.role-admin #btn-batch-delete,
body.role-admin .batch-actions .btn-danger {
  opacity: 1 !important;
  cursor: pointer !important;
  filter: none !important;
  pointer-events: auto !important;
}

/* ==========================================================================
   商品目录：视口底部悬浮吸底批量操作胶囊栏 (Floating Action Dock)
   ========================================================================== */
.catalog-sticky-dock {
  position: fixed;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 9999px;
  padding: 0.55rem 0.85rem 0.55rem 1.15rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  box-shadow: 0 12px 32px -4px rgba(15, 23, 42, 0.16), 0 4px 12px -2px rgba(15, 23, 42, 0.08);
  z-index: 1000;
  transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1), transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
}

.catalog-sticky-dock.hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(20px);
  pointer-events: none;
}

body.dark-theme .catalog-sticky-dock {
  background: rgba(24, 24, 27, 0.92);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.65), 0 4px 12px -2px rgba(0, 0, 0, 0.4);
}

.sticky-dock-info {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  white-space: nowrap;
}

.sticky-dock-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary-light, rgba(79, 70, 229, 0.1));
  color: var(--primary, #4f46e5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
}

body.dark-theme .sticky-dock-icon {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}

.sticky-dock-text {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-main);
}

.sticky-dock-text strong {
  font-weight: 700;
  color: var(--primary, #4f46e5);
  margin: 0 2px;
}

body.dark-theme .sticky-dock-text strong {
  color: #818cf8;
}

.btn-dock-clear {
  background: none;
  border: none;
  padding: 0.2rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: all 0.15s ease;
}

.btn-dock-clear:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-main);
}

body.dark-theme .btn-dock-clear:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.sticky-dock-divider {
  width: 1px;
  height: 22px;
  background-color: var(--border-color);
  flex-shrink: 0;
}

.sticky-dock-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-dock-delete {
  border-radius: 9999px !important;
  padding: 0.45rem 1.05rem !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25) !important;
  transition: all 0.18s ease !important;
}

.btn-dock-delete:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35) !important;
}

/* 业务运营身份禁用规则扩充 */
body.role-viewer #btn-sticky-batch-delete,
body.role-viewer .btn-dock-delete {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  filter: grayscale(1) !important;
  background-color: var(--border-color) !important;
  border-color: var(--border-color) !important;
  color: var(--text-muted) !important;
  box-shadow: none !important;
  pointer-events: none !important;
  user-select: none !important;
}

body.role-admin #btn-sticky-batch-delete,
body.role-admin .btn-dock-delete {
  opacity: 1 !important;
  cursor: pointer !important;
  filter: none !important;
  pointer-events: auto !important;
}

/* 回收站批量操作胶囊栏专用微调 */
.sticky-dock-icon.recycle {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger, #ef4444);
}

body.dark-theme .sticky-dock-icon.recycle {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.btn-dock-restore {
  border-radius: 9999px !important;
  padding: 0.45rem 1.05rem !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.15) !important;
  transition: all 0.18s ease !important;
}

.btn-dock-restore:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25) !important;
}

.btn-dock-purge {
  border-radius: 9999px !important;
  padding: 0.45rem 1.05rem !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.15) !important;
  transition: all 0.18s ease !important;
}

.btn-dock-purge:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.25) !important;
}

/* ==========================================================================
   Enterprise Gate & Workstation Lock Screen (Zero Trust + Native Auth)
   ========================================================================== */

/* 侧边栏底部便捷操作区 (锁屏 & 退出) */
.sidebar-user-quick-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--border-color, #e2e8f0);
}

body.dark-theme .sidebar-user-quick-actions {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.btn-sidebar-quick-action {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.36rem 0.5rem;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--text-secondary, #64748b);
  background: var(--bg-surface-secondary, rgba(241, 245, 249, 0.65));
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-sidebar-quick-action:hover {
  color: var(--primary, #4f46e5);
  background: var(--bg-surface, #ffffff);
  border-color: var(--primary, #4f46e5);
  box-shadow: 0 1px 4px rgba(79, 70, 229, 0.12);
  transform: translateY(-1px);
}

body.dark-theme .btn-sidebar-quick-action {
  color: #94a3b8;
  background: rgba(30, 41, 59, 0.7);
  border-color: rgba(255, 255, 255, 0.1);
}

body.dark-theme .btn-sidebar-quick-action:hover {
  color: #a5b4fc;
  background: rgba(49, 46, 129, 0.35);
  border-color: #6366f1;
}

/* 全屏登录/锁屏门禁浮层 */
.app-login-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  animation: appGateFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.app-login-overlay.hidden {
  display: none !important;
}

@keyframes appGateFadeIn {
  from { opacity: 0; transform: scale(0.99); }
  to { opacity: 1; transform: scale(1); }
}

.login-gate-backdrop-blur {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(99, 102, 241, 0.18), transparent 70%),
              radial-gradient(circle at 10% 80%, rgba(14, 165, 233, 0.12), transparent 60%),
              rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

body.dark-theme .login-gate-backdrop-blur {
  background: radial-gradient(circle at 50% 30%, rgba(99, 102, 241, 0.25), transparent 70%),
              radial-gradient(circle at 10% 80%, rgba(14, 165, 233, 0.15), transparent 60%),
              rgba(3, 7, 18, 0.88);
}

.login-gate-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 480px;
  background: var(--bg-surface, #ffffff);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 18px;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.4);
  padding: 2rem 2.25rem;
  box-sizing: border-box;
  animation: appGateSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

body.dark-theme .login-gate-card {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

@keyframes appGateSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.login-gate-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  gap: 1rem;
}

.login-gate-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.login-gate-logo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
  background: transparent;
}

.login-gate-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.login-gate-titles {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-gate-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  margin: 0;
  line-height: 1.25;
}

body.dark-theme .login-gate-title {
  color: #f8fafc;
}

.login-gate-subtitle {
  font-size: 0.78rem;
  color: var(--text-secondary, #64748b);
  margin-top: 2px;
  line-height: 1.25;
}

body.dark-theme .login-gate-subtitle {
  color: #94a3b8;
}

.login-gate-badge {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.35rem;
  padding: 0.32rem 0.75rem;
  font-size: 0.74rem;
  font-weight: 600;
  border-radius: 9999px;
  background: rgba(79, 70, 229, 0.1);
  color: #4f46e5;
  white-space: nowrap;
  flex-shrink: 0;
}

body.dark-theme .login-gate-badge {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}

/* Cloudflare Zero Trust SSO 探测横幅 */
.login-cf-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.95rem;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.12), rgba(234, 88, 12, 0.06));
  border: 1px solid rgba(249, 115, 22, 0.3);
  border-radius: 10px;
  margin-bottom: 1.25rem;
  animation: appGateSlideUp 0.25s ease;
}

.login-cf-banner.hidden {
  display: none !important;
}

.login-cf-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.74rem;
  font-weight: 700;
  color: #ea580c;
  flex-shrink: 0;
}

.login-cf-info {
  flex: 1;
  min-width: 0;
}

.login-cf-text {
  font-size: 0.78rem;
  color: var(--text-primary, #334155);
  font-weight: 500;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.dark-theme .login-cf-text {
  color: #fed7aa;
}

/* 角色信道切换标签 (Admin vs Viewer - 单行对齐精致排版) */
.login-role-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1.35rem;
}

.login-role-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.7rem 0.85rem;
  min-height: 44px;
  border-radius: 10px;
  border: 1.5px solid var(--border-color, #e2e8f0);
  background: var(--bg-surface-secondary, #f8fafc);
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

body.dark-theme .login-role-tab {
  background: #0f172a;
  border-color: rgba(255, 255, 255, 0.1);
}

.login-role-tab i {
  font-size: 0.95rem;
  color: var(--text-muted, #94a3b8);
  transition: color 0.2s;
  flex-shrink: 0;
}

.role-tab-title {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
  line-height: 1;
  white-space: nowrap;
  transition: color 0.2s;
}

body.dark-theme .role-tab-title {
  color: #f1f5f9;
}

.login-role-tab:hover {
  border-color: rgba(99, 102, 241, 0.5);
  background: rgba(99, 102, 241, 0.04);
}

body.dark-theme .login-role-tab:hover {
  background: rgba(99, 102, 241, 0.1);
}

.login-role-tab.is-active {
  border-color: #4f46e5;
  background: rgba(79, 70, 229, 0.08);
  box-shadow: 0 0 0 1px #4f46e5, 0 2px 6px rgba(79, 70, 229, 0.12);
}

.login-role-tab.is-active i {
  color: #4f46e5;
}

.login-role-tab.is-active .role-tab-title {
  color: #4f46e5;
  font-weight: 700;
}

body.dark-theme .login-role-tab.is-active {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.2);
  box-shadow: 0 0 0 1px #6366f1, 0 2px 8px rgba(99, 102, 241, 0.25);
}

body.dark-theme .login-role-tab.is-active i {
  color: #a5b4fc;
}

body.dark-theme .login-role-tab.is-active .role-tab-title {
  color: #a5b4fc;
}

/* 登录表单元素 */
.login-form-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.login-field-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.login-field-group label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary, #475569);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

body.dark-theme .login-field-group label {
  color: #cbd5e1;
}

.login-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.login-input {
  width: 100%;
  padding: 0.68rem 0.95rem;
  font-size: 0.9rem;
  border-radius: 9px;
  border: 1px solid var(--border-color, #cbd5e1);
  background: var(--bg-surface, #ffffff);
  color: var(--text-primary, #0f172a);
  transition: all 0.2s ease;
  box-sizing: border-box;
}

body.dark-theme .login-input {
  background: #0f172a;
  border-color: rgba(255, 255, 255, 0.15);
  color: #f8fafc;
}

.login-input:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}

body.dark-theme .login-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}

.btn-login-eye {
  position: absolute;
  right: 0.5rem;
  padding: 0.45rem;
  background: none;
  border: none;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
}

.btn-login-eye:hover {
  color: var(--primary, #4f46e5);
}

.login-options-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: -0.25rem;
}

.login-remember-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: var(--text-secondary, #64748b);
  cursor: pointer;
  user-select: none;
}

body.dark-theme .login-remember-wrap {
  color: #94a3b8;
}

.login-offline-badge {
  font-size: 0.72rem;
  color: var(--success, #10b981);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.login-error-alert {
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
  font-size: 0.8rem;
  line-height: 1.4;
  animation: shakeAlert 0.35s ease;
}

@keyframes shakeAlert {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.btn-login-submit {
  width: 100%;
  padding: 0.75rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(135deg, #4f46e5, #4338ca);
  border: none;
  border-radius: 9px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: 0.4rem;
}

.btn-login-submit:hover {
  background: linear-gradient(135deg, #4338ca, #3730a3);
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.45);
  transform: translateY(-1px);
}

.btn-login-submit:active {
  transform: translateY(0);
}

/* 锁屏界面样式 */
.lock-mode-section {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.lock-user-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1rem;
  background: var(--bg-surface-secondary, #f8fafc);
  border-radius: 12px;
  border: 1px solid var(--border-color, #e2e8f0);
}

body.dark-theme .lock-user-header {
  background: #0f172a;
  border-color: rgba(255, 255, 255, 0.08);
}

.lock-avatar-wrapper {
  position: relative;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}

.lock-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #4f46e5;
}

.lock-avatar-icon {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ef4444;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  border: 2px solid var(--bg-surface, #ffffff);
}

.lock-user-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.lock-user-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  margin: 0;
}

body.dark-theme .lock-user-name {
  color: #f8fafc;
}

.lock-user-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #4f46e5;
}

body.dark-theme .lock-user-role-badge {
  color: #a5b4fc;
}

.lock-status-hint {
  font-size: 0.74rem;
  color: var(--text-secondary, #64748b);
  margin: 0;
}

body.dark-theme .lock-status-hint {
  color: #94a3b8;
}

.lock-form-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.lock-switch-row {
  display: flex;
  justify-content: center;
  margin-top: 0.25rem;
}

.btn-lock-switch-account {
  background: none;
  border: none;
  font-size: 0.78rem;
  color: var(--primary, #4f46e5);
  cursor: pointer;
  padding: 0.3rem 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: opacity 0.15s;
}

.btn-lock-switch-account:hover {
  text-decoration: underline;
  opacity: 0.85;
}

/* 门禁卡底部说明 */
.login-gate-footer {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color, #e2e8f0);
}

body.dark-theme .login-gate-footer {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.login-gate-footer-hint {
  font-size: 0.72rem;
  color: var(--text-muted, #94a3b8);
  line-height: 1.45;
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
}

body.dark-theme .login-gate-footer-hint {
  color: #64748b;
}

/* ==========================================================================
   Multi-Account Governance & Anti-Brute-Force Lockout System Styles
   ========================================================================== */
.login-error-alert.login-warning-alert {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.45);
  color: #d97706;
}
body.dark-theme .login-error-alert.login-warning-alert {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.5);
  color: #fbbf24;
}

.login-error-alert.login-lockout-alert {
  background: rgba(239, 68, 68, 0.14);
  border: 1.5px solid rgba(239, 68, 68, 0.5);
  color: #dc2626;
  padding: 0.85rem 1rem;
  border-radius: 10px;
}
body.dark-theme .login-error-alert.login-lockout-alert {
  background: rgba(239, 68, 68, 0.22);
  border-color: rgba(239, 68, 68, 0.6);
  color: #f87171;
}

.login-lockout-title {
  font-weight: 700;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
}

.login-lockout-timer {
  font-family: var(--font-mono, 'SF Mono', Consolas, monospace);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.08);
  border-radius: 6px;
  padding: 0.35rem 0.6rem;
  margin: 0.4rem 0;
  display: inline-block;
  border: 1px dashed rgba(239, 68, 68, 0.3);
}
body.dark-theme .login-lockout-timer {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.2);
}

.login-lockout-desc {
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--text-secondary, #64748b);
  margin-top: 0.25rem;
}
body.dark-theme .login-lockout-desc {
  color: #94a3b8;
}

/* 禁用状态表单输入框与按钮 */
.login-input:disabled {
  background-color: var(--bg-hover, #f1f5f9) !important;
  color: var(--text-muted, #94a3b8) !important;
  cursor: not-allowed !important;
  opacity: 0.75;
  border-color: var(--border-color, #e2e8f0) !important;
}
body.dark-theme .login-input:disabled {
  background-color: rgba(255, 255, 255, 0.04) !important;
  color: #64748b !important;
}

.btn-login-submit:disabled {
  background: #94a3b8 !important;
  border-color: #94a3b8 !important;
  cursor: not-allowed !important;
  opacity: 0.65;
  box-shadow: none !important;
  transform: none !important;
}

/* 团队成员管理面板表格与卡片 */
.user-mgmt-table-container {
  margin-top: 0.75rem;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  overflow: hidden;
}

.settings-user-mgmt-tip {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: var(--bg-hover, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-secondary, #64748b);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
body.dark-theme .settings-user-mgmt-tip {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}

/* 用户状态徽章 */
.user-badge-role {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}
.user-badge-role.role-super {
  background: rgba(147, 51, 234, 0.12);
  color: #9333ea;
  border: 1px solid rgba(147, 51, 234, 0.25);
}
.user-badge-role.role-admin {
  background: rgba(79, 70, 229, 0.12);
  color: #4f46e5;
  border: 1px solid rgba(79, 70, 229, 0.25);
}
.user-badge-role.role-viewer {
  background: rgba(14, 165, 233, 0.12);
  color: #0284c7;
  border: 1px solid rgba(14, 165, 233, 0.25);
}

.user-badge-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 600;
}
.user-badge-status.status-active {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}
.user-badge-status.status-locked {
  background: rgba(239, 68, 68, 0.14);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.3);
  animation: pulseLock 2s infinite ease-in-out;
}
@keyframes pulseLock {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}
.user-badge-status.status-disabled {
  background: rgba(148, 163, 184, 0.15);
  color: #64748b;
}

.user-action-btns {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.user-mgmt-modal-card {
  max-width: 580px;
  width: 95%;
}

.user-avatar-preview {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: #ffffff;
  font-size: 1.45rem;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
  font-weight: 700;
  text-transform: uppercase;
}

.user-avatar-preview.role-viewer {
  background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35);
}

.user-avatar-preview.role-admin {
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
}

.user-avatar-preview.role-danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
}

.attr-cascade-alert.alert-danger {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.25);
}

.attr-cascade-alert.alert-danger .attr-cascade-icon {
  background: rgba(239, 68, 68, 0.16);
  color: #dc2626;
}

.attr-cascade-alert.alert-danger .attr-cascade-content strong {
  color: #dc2626;
}

body.dark-theme .attr-cascade-alert.alert-danger {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(248, 113, 113, 0.28);
}

body.dark-theme .attr-cascade-alert.alert-danger .attr-cascade-icon {
  background: rgba(239, 68, 68, 0.22);
  color: #f87171;
}

body.dark-theme .attr-cascade-alert.alert-danger .attr-cascade-content strong {
  color: #f87171;
}

/* 角色选择卡片组 (Role Selection Cards) */
.user-role-select-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 0.35rem;
}

@media (max-width: 540px) {
  .user-role-select-cards {
    grid-template-columns: 1fr;
  }
}

.user-role-card-opt {
  position: relative;
  display: block;
  cursor: pointer;
  margin: 0;
  user-select: none;
}

.user-role-card-opt .role-radio-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.role-card-inner {
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.85rem 0.95rem;
  background: var(--bg-surface);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.user-role-card-opt:hover .role-card-inner {
  border-color: var(--primary);
  background: var(--bg-subtle);
  transform: translateY(-1px);
}

.user-role-card-opt .role-radio-input:checked + .role-card-inner {
  border-color: var(--primary);
  background: rgba(79, 70, 229, 0.06);
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.22);
}

body.dark-theme .user-role-card-opt .role-radio-input:checked + .role-card-inner {
  background: rgba(79, 70, 229, 0.2);
  border-color: #818cf8;
}

.role-card-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.45rem;
}

.role-card-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.role-card-icon.viewer-icon {
  background: rgba(14, 165, 233, 0.15);
  color: #0284c7;
}

.role-card-icon.admin-icon {
  background: rgba(147, 51, 234, 0.15);
  color: #9333ea;
}

.role-card-title-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.role-card-name {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
}

.role-card-badge {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-weight: 500;
}

.role-card-desc {
  font-size: 0.73rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
  margin-top: auto;
  min-height: 2.15rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.user-pwd-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.user-pwd-input-wrap .custom-input {
  padding-right: 2.5rem;
}

.btn-toggle-user-pwd {
  position: absolute;
  right: 0.5rem;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  border-radius: 4px;
  transition: color 0.15s;
}

.btn-toggle-user-pwd:hover {
  color: var(--text-main);
}

/* 超级管理员沙箱模拟预览顶栏 (SuperAdmin Sandbox Impersonate Banner) */
.superadmin-preview-banner {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: linear-gradient(90deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  padding: 0.6rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.28);
  font-size: 0.85rem;
  transition: all 0.25s ease;
}

.superadmin-preview-banner.hidden {
  display: none !important;
}

.preview-banner-text {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 500;
}

.preview-banner-badge {
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 0.15rem 0.55rem;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.btn-exit-preview {
  background: #ffffff;
  color: #0284c7;
  border: none;
  border-radius: var(--radius-sm, 6px);
  padding: 0.35rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.btn-exit-preview:hover {
  background: #f0f9ff;
  color: #0369a1;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

/* 团队成员账号卡片面板 (Member Profile Panel in Role Modal) */
.member-profile-panel {
  padding: 1.15rem;
  background: var(--bg-subtle, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-md, 8px);
  margin-top: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

body.dark-theme .member-profile-panel {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

.member-profile-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.member-profile-info-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.member-profile-info-item .info-label {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.member-profile-info-item .info-val {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
}

.member-profile-notice {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.5;
  background: rgba(14, 165, 233, 0.06);
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: var(--radius-sm, 6px);
  padding: 0.65rem 0.85rem;
}

body.dark-theme .member-profile-notice {
  background: rgba(14, 165, 233, 0.1);
  border-color: rgba(14, 165, 233, 0.25);
  color: #94a3b8;
}