/**
 * DMX-Cloud 双主题：经典蓝 (classic) / 品牌紫青 (cq)
 * 规范见 RD/CQ主题.md；由用户 themeId 驱动 document.documentElement[data-theme]
 */

:root,
[data-theme="classic"] {
  --theme-app-bg: #060931;
  --theme-app-text: #f3f4f6;

  --theme-bar-from: #070f3e;
  --theme-bar-to: #062860;
  --theme-bar-border: #34a1e0;
  --theme-bar-shadow: 0 10px 25px rgba(52, 161, 224, 0.2);

  --theme-sidebar-from: #070f3e;
  --theme-sidebar-to: #062860;
  --theme-sidebar-border: #34a1e0;
  --theme-sidebar-shadow: 2px 0 15px rgba(52, 161, 224, 0.2);

  --theme-card-from: #070f3e;
  --theme-card-to: #062860;
  --theme-card-border: #34a1e0;
  --theme-card-shadow: 0 0 25px rgba(52, 161, 224, 0.35), inset 0 0 20px rgba(52, 161, 224, 0.2);
  --theme-card-radius: 16px;

  --theme-panel: #062860;
  --theme-surface: rgba(6, 9, 49, 0.8);
  --theme-surface2: rgba(7, 15, 62, 0.8);
  --theme-border: #34a1e0;
  --theme-border-muted: rgba(52, 161, 224, 0.35);
  --theme-text: #ffffff;
  --theme-muted: #9ca3af;
  --theme-muted-soft: #c8d7ff;

  --theme-accent: #34a1e0;
  --theme-accent-hover: #60a5fa;
  --theme-accent-bright: #3b82f6;
  --theme-accent-soft: rgba(52, 161, 224, 0.2);
  --theme-accent-soft-hover: rgba(52, 161, 224, 0.28);

  --theme-overlay: rgba(0, 0, 0, 0.65);
  --theme-shadow: 0 10px 25px rgba(52, 161, 224, 0.3);

  --theme-btn: #3b82f6;
  --theme-btn-hover: #2563eb;
  --theme-btn-text: #ffffff;

  --theme-danger: #f87171;
  --theme-danger-btn: #8b3a2a;
  --theme-danger-btn-hover: #a04432;
  --theme-success: #4ade80;

  --theme-nav-active-bg: rgba(52, 161, 224, 0.15);
  --theme-nav-active-border: #34a1e0;
  --theme-nav-hover-bg: rgba(52, 161, 224, 0.1);

  --theme-modal-bg: linear-gradient(135deg, #070f3e, #062860);
  --theme-modal-border: 1px solid #34a1e0;
  --theme-modal-shadow: 0 0 35px rgba(52, 161, 224, 0.45), inset 0 0 25px rgba(52, 161, 224, 0.25);
  --theme-modal-radius: 20px;

  --theme-menu-bg: linear-gradient(135deg, #070f3e, #062860);
  --theme-menu-border: 1px solid #34a1e0;
  --theme-menu-shadow: 0 10px 25px rgba(52, 161, 224, 0.3);

  --theme-input-bg: rgba(6, 9, 49, 0.75);
  --theme-inner-surface: rgba(7, 15, 62, 0.5);
  --theme-table-head-bg: rgba(6, 47, 96, 0.9);
  --theme-select-option-bg: #1a3768;
  --theme-select-option-active: #56bff6;
  --theme-stat-value: #34a1e0;
  --theme-toggle-on: #34a1e0;
  --theme-ring-track: rgba(52, 161, 224, 0.2);
  --theme-ring-active: #38bdf8;

  --theme-scene-btn-bg: linear-gradient(145deg, #1a4a8c 0%, #123a72 55%, #0e2f62 100%);
  --theme-scene-btn-hover-bg: linear-gradient(145deg, #2260a8 0%, #184f8c 55%, #143f78 100%);
  --theme-scene-btn-border: rgba(96, 165, 250, 0.75);
  --theme-scene-btn-text: #f0f9ff;
  --theme-scene-btn-shadow: 0 0 10px rgba(52, 161, 224, 0.18), inset 0 1px 0 rgba(147, 197, 253, 0.16);
  --theme-scene-btn-hover-shadow: 0 0 14px rgba(96, 165, 250, 0.28), inset 0 1px 0 rgba(191, 219, 254, 0.2);
  /* 激活：对齐设备在线绿 #10b981，青绿 → 深绿 */
  --theme-scene-btn-active-bg: linear-gradient(145deg, #34d399 0%, #10b981 42%, #059669 100%);
  --theme-scene-btn-active-border: #6ee7b7;
  --theme-scene-btn-active-text: #ffffff;
  --theme-scene-btn-active-shadow:
    0 0 0 1px rgba(110, 231, 183, 0.4),
    0 0 14px rgba(16, 185, 129, 0.38),
    0 0 28px rgba(5, 150, 105, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  /* 全关：红色调 */
  --theme-scene-off-bg: linear-gradient(145deg, #6b1f28 0%, #4e1620 55%, #3a1018 100%);
  --theme-scene-off-border: rgba(248, 113, 113, 0.7);
  --theme-scene-off-shadow: 0 0 10px rgba(239, 68, 68, 0.18), inset 0 1px 0 rgba(252, 165, 165, 0.14);
  --theme-scene-off-hover-bg: linear-gradient(145deg, #822632 0%, #5e1a24 55%, #48141c 100%);
  --theme-scene-off-hover-border: rgba(252, 165, 165, 0.85);
  --theme-scene-off-hover-shadow: 0 0 14px rgba(239, 68, 68, 0.28);
  --theme-scene-off-active-bg: linear-gradient(145deg, #c45a5a 0%, #a33d3d 45%, #7f2d2d 100%);
  --theme-scene-off-active-border: #d08080;
  --theme-scene-off-active-text: #fff5f5;
  --theme-scene-off-active-shadow:
    0 0 0 1px rgba(192, 112, 112, 0.3),
    0 0 12px rgba(163, 61, 61, 0.28),
    0 0 22px rgba(127, 45, 45, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);

  --theme-scrollbar-track: rgba(52, 161, 224, 0.12);
  --theme-scrollbar-thumb: rgba(52, 161, 224, 0.45);
  --theme-scrollbar-thumb-hover: rgba(52, 161, 224, 0.65);
}

[data-theme="cq"] {
  --theme-app-bg: #2d2334;
  --theme-app-text: #ffffff;

  --theme-bar-from: #382d3d;
  --theme-bar-to: #2d2334;
  --theme-bar-border: #746d76;
  --theme-bar-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);

  --theme-sidebar-from: #382d3d;
  --theme-sidebar-to: #2d2334;
  --theme-sidebar-border: #746d76;
  --theme-sidebar-shadow: 2px 0 12px rgba(0, 0, 0, 0.25);

  --theme-card-from: #382d3d;
  --theme-card-to: #3a3040;
  --theme-card-border: #746d76;
  --theme-card-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  --theme-card-radius: 8px;

  --theme-panel: #382d3d;
  --theme-surface: #2d2334;
  --theme-surface2: #3a3040;
  --theme-border: #746d76;
  --theme-border-muted: rgba(116, 109, 118, 0.55);
  --theme-text: #ffffff;
  --theme-muted: #c3c2c4;
  --theme-muted-soft: #c3c2c4;

  --theme-accent: #4bdbc3;
  --theme-accent-hover: #00b0ca;
  --theme-accent-bright: #4bdbc3;
  --theme-accent-soft: rgba(75, 219, 195, 0.14);
  --theme-accent-soft-hover: rgba(75, 219, 195, 0.24);

  --theme-overlay: rgba(45, 35, 52, 0.75);
  --theme-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);

  --theme-btn: #4bdbc3;
  --theme-btn-hover: #00b0ca;
  --theme-btn-text: #382d3d;

  --theme-danger: #ff7017;
  --theme-danger-btn: #8b3a2a;
  --theme-danger-btn-hover: #a04432;
  --theme-success: #4bdbc3;

  --theme-nav-active-bg: rgba(75, 219, 195, 0.18);
  --theme-nav-active-border: #4bdbc3;
  --theme-nav-hover-bg: rgba(75, 219, 195, 0.12);

  --theme-modal-bg: #382d3d;
  --theme-modal-border: 1px solid #746d76;
  --theme-modal-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  --theme-modal-radius: 10px;

  --theme-menu-bg: #382d3d;
  --theme-menu-border: 1px solid #746d76;
  --theme-menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);

  --theme-input-bg: #2d2334;
  --theme-inner-surface: rgba(58, 48, 64, 0.65);
  --theme-table-head-bg: #3a3040;
  --theme-select-option-bg: #382d3d;
  --theme-select-option-active: #4bdbc3;
  --theme-stat-value: #4bdbc3;
  --theme-toggle-on: #4bdbc3;
  --theme-ring-track: rgba(116, 109, 118, 0.45);
  --theme-ring-active: #4bdbc3;

  --theme-scene-btn-bg: linear-gradient(145deg, #4a3f52 0%, #3a3040 55%, #322838 100%);
  --theme-scene-btn-hover-bg: linear-gradient(145deg, rgba(75, 219, 195, 0.28) 0%, #4a3f52 100%);
  --theme-scene-btn-border: rgba(75, 219, 195, 0.55);
  --theme-scene-btn-text: #f0fdfa;
  --theme-scene-btn-shadow: 0 0 10px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(75, 219, 195, 0.12);
  --theme-scene-btn-hover-shadow: 0 0 14px rgba(75, 219, 195, 0.24);
  /* 激活：对齐在线绿系，青绿 → 深绿 */
  --theme-scene-btn-active-bg: linear-gradient(145deg, #5eead4 0%, #34d399 40%, #10b981 100%);
  --theme-scene-btn-active-border: #6ee7b7;
  --theme-scene-btn-active-text: #ffffff;
  --theme-scene-btn-active-shadow:
    0 0 0 1px rgba(110, 231, 183, 0.35),
    0 0 14px rgba(16, 185, 129, 0.35),
    0 0 28px rgba(5, 150, 105, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  /* 全关：红色调 */
  --theme-scene-off-bg: linear-gradient(145deg, #5c2430 0%, #45202a 55%, #361820 100%);
  --theme-scene-off-border: rgba(248, 113, 113, 0.65);
  --theme-scene-off-shadow: 0 0 10px rgba(239, 68, 68, 0.16), inset 0 1px 0 rgba(252, 165, 165, 0.12);
  --theme-scene-off-hover-bg: linear-gradient(145deg, #703040 0%, #552430 100%);
  --theme-scene-off-hover-border: rgba(252, 165, 165, 0.8);
  --theme-scene-off-hover-shadow: 0 0 14px rgba(239, 68, 68, 0.26);
  --theme-scene-off-active-bg: linear-gradient(145deg, #c45a5a 0%, #a33d3d 45%, #7f2d2d 100%);
  --theme-scene-off-active-border: #d08080;
  --theme-scene-off-active-text: #fff5f5;
  --theme-scene-off-active-shadow:
    0 0 0 1px rgba(192, 112, 112, 0.3),
    0 0 12px rgba(163, 61, 61, 0.28),
    0 0 22px rgba(127, 45, 45, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);

  --theme-scrollbar-track: rgba(116, 109, 118, 0.35);
  --theme-scrollbar-thumb: rgba(75, 219, 195, 0.55);
  --theme-scrollbar-thumb-hover: rgba(75, 219, 195, 0.75);
}

/* ---------- 登录页固定经典蓝（不随用户主题变化） ---------- */

#auth-section.auth-wrapper {
  background: #060931 !important;
}

#auth-section .form-card {
  background: linear-gradient(135deg, #070f3e, #062860) !important;
  border: 1px solid #34a1e0 !important;
}

#auth-section .hero-title.platform-title:not(.section-title-tech) {
  color: var(--theme-accent) !important;
  text-shadow: none !important;
}

#auth-section .hero-title.platform-title-auth.section-title-tech {
  color: transparent !important;
  text-shadow: none !important;
}

/* ---------- 应用壳层（主界面 + 浮层共用 token） ---------- */

html {
  background-color: var(--theme-app-bg);
}

body {
  background: var(--theme-app-bg);
  color: var(--theme-app-text);
}

.page-header,
.top-bar {
  background: linear-gradient(135deg, var(--theme-bar-from), var(--theme-bar-to));
  border-bottom: 1px solid var(--theme-bar-border);
  box-shadow: var(--theme-bar-shadow);
}

.platform-title {
  color: var(--theme-accent);
  text-shadow: none;
}

/* 品牌标题：银白金属浮雕，不跟主题青蓝发光 */
.platform-title-header.section-title-tech,
.platform-title-auth.section-title-tech {
  color: transparent !important;
  text-shadow: none !important;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #ffffff 28%,
    #f1f5f9 52%,
    #e2e8f0 78%,
    #cbd5e1 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  filter:
    drop-shadow(0 -0.8px 0 rgba(255, 255, 255, 0.85))
    drop-shadow(-0.6px -0.5px 0 rgba(255, 255, 255, 0.45))
    drop-shadow(0 1px 0 rgba(15, 23, 42, 0.7))
    drop-shadow(0.7px 1.1px 0 rgba(0, 0, 0, 0.45))
    drop-shadow(0 2px 1px rgba(0, 0, 0, 0.4))
    drop-shadow(0 4px 3px rgba(0, 0, 0, 0.38))
    drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55));
}

.platform-version {
  display: none;
}

.platform-icon {
  color: var(--theme-accent);
}

.date-display {
  color: var(--theme-muted-soft);
}

.user-welcome {
  color: var(--theme-muted-soft);
}

.sidebar-nav {
  background: linear-gradient(180deg, var(--theme-sidebar-from), var(--theme-sidebar-to));
  border-right: 1px solid var(--theme-sidebar-border);
  box-shadow: var(--theme-sidebar-shadow);
}

.home-right-rail {
  background: linear-gradient(180deg, var(--theme-sidebar-from), var(--theme-sidebar-to));
  border-left: 1px solid var(--theme-sidebar-border);
  box-shadow: -2px 0 12px rgba(0, 0, 0, 0.15);
}

.card {
  background: linear-gradient(135deg, var(--theme-card-from), var(--theme-card-to));
  border: 1px solid var(--theme-card-border);
  box-shadow: var(--theme-card-shadow);
  border-radius: var(--theme-card-radius);
}

.modal {
  background: var(--theme-overlay);
}

.modal-content {
  background: var(--theme-modal-bg);
  border: var(--theme-modal-border);
  box-shadow: var(--theme-modal-shadow);
  border-radius: var(--theme-modal-radius);
  color: var(--theme-text);
}

.user-dropdown,
.config-menu-dropdown {
  background: var(--theme-menu-bg);
  border: var(--theme-menu-border);
  box-shadow: var(--theme-menu-shadow);
}

.config-menu-backdrop {
  background: var(--theme-overlay);
}

.nav-item:hover,
.nav-item.active {
  background: var(--theme-nav-hover-bg);
  border-left-color: var(--theme-nav-active-border);
  color: var(--theme-accent);
}

.nav-item:hover .nav-icon,
.nav-item.active .nav-icon {
  color: var(--theme-accent);
}

.nav-group-title:hover,
.nav-group-title.active {
  color: var(--theme-accent);
}

.nav-group-title:hover .nav-icon,
.nav-group-title.active .nav-icon {
  color: var(--theme-accent);
}

.sidebar-footer {
  border-top-color: var(--theme-border-muted);
  color: var(--theme-muted);
}

.sidebar-footer-brand {
  color: var(--theme-muted-soft);
}

.sidebar-footer-icp a {
  color: var(--theme-accent);
}

.sidebar-footer-icp a:hover {
  color: var(--theme-accent-hover);
}

.user-btn {
  border-color: var(--theme-accent);
  color: var(--theme-accent);
}

.header-icon-btn {
  border-color: var(--theme-accent);
  color: var(--theme-accent);
  background: transparent;
}

.header-icon-btn:hover {
  background: var(--theme-accent-soft);
  border-color: var(--theme-accent-hover);
  color: var(--theme-accent-hover);
  box-shadow: 0 0 10px var(--theme-accent-soft);
}

.header-icon-btn .icon-star,
.header-icon-btn .icon-fullscreen {
  color: inherit;
}

.btn-primary,
.primary-btn {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--theme-accent-hover) 42%, #0e3d6e) 0%,
    color-mix(in srgb, var(--theme-accent) 55%, #0a2f55) 100%
  );
  border: 1px solid color-mix(in srgb, var(--theme-accent-hover) 70%, transparent);
  color: #f0f9ff;
  box-shadow:
    0 0 12px color-mix(in srgb, var(--theme-accent) 25%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--theme-accent-hover) 22%, transparent);
}

.btn-primary:hover:not(:disabled),
.primary-btn:hover:not(:disabled) {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--theme-accent-hover) 55%, #124a82) 0%,
    color-mix(in srgb, var(--theme-accent) 65%, #0e3d6e) 100%
  );
  border-color: var(--theme-accent-hover);
  color: #ffffff;
  box-shadow:
    0 0 16px color-mix(in srgb, var(--theme-accent-hover) 32%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--theme-accent-hover) 28%, transparent);
}

.btn-secondary {
  background: color-mix(in srgb, var(--theme-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--theme-accent) 65%, transparent);
  color: var(--theme-muted-soft);
  box-shadow: none;
}

.btn-secondary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--theme-accent) 20%, transparent);
  border-color: var(--theme-accent-hover);
  color: var(--theme-text);
  box-shadow: 0 0 12px color-mix(in srgb, var(--theme-accent-hover) 22%, transparent);
}

.config-menu-toggle {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--theme-accent-hover) 42%, #0e3d6e) 0%,
    color-mix(in srgb, var(--theme-accent) 55%, #0a2f55) 100%
  );
  border: 1px solid color-mix(in srgb, var(--theme-accent-hover) 65%, transparent);
  color: #f0f9ff;
  box-shadow:
    0 0 10px color-mix(in srgb, var(--theme-accent) 20%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--theme-accent-hover) 18%, transparent);
}

.config-menu-toggle:hover {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--theme-accent-hover) 55%, #124a82) 0%,
    color-mix(in srgb, var(--theme-accent) 65%, #0e3d6e) 100%
  );
  border-color: var(--theme-accent-hover);
  color: #ffffff;
  box-shadow: 0 0 14px color-mix(in srgb, var(--theme-accent-hover) 28%, transparent);
}

/* ---------- 首页 ---------- */

.overview-filter-select,
.project-user-filter {
  border: 1px solid var(--theme-border-muted);
  background: var(--theme-input-bg);
  color: var(--theme-text);
}

.overview-filter-select:hover,
.overview-filter-select:focus,
.project-user-filter:focus,
.project-user-filter:hover {
  border-color: var(--theme-accent);
  box-shadow: 0 0 0 2px var(--theme-accent-soft);
  background: var(--theme-input-bg);
}

.overview-filter-select option {
  background: var(--theme-select-option-bg);
  color: var(--theme-text);
}

.overview-filter-select option:checked {
  background: var(--theme-select-option-active);
  color: var(--theme-btn-text);
}

.overview-filter-label,
.overview-ring-label,
.overview-ring-value {
  color: var(--theme-muted-soft);
}

.home-project-card .project-name:not(.project-card-title),
.overview-filter-label {
  color: var(--theme-text);
}

.card-title-tech:not(.card-title-tech--hud) {
  text-shadow:
    0 0 14px color-mix(in srgb, var(--theme-accent-hover) 28%, transparent),
    0 1px 2px rgba(0, 0, 0, 0.35);
}

.detail-project-name:not(.project-card-title) {
  color: var(--theme-text);
}

.platform-title-tech {
  /* 旧青蓝品牌滤镜已停用；头栏/登录用 .section-title-tech 金属字效 */
  filter: none;
}

.overview-ring-track {
  stroke: var(--theme-ring-track);
}

.overview-ring-active {
  stroke: var(--theme-ring-active);
  filter: drop-shadow(0 0 6px var(--theme-accent-soft));
}

.overview-ring-offline {
  stroke: var(--status-offline-color, #f59e0b);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--status-offline-color, #f59e0b) 50%, transparent));
}

.overview-filter-row {
  border-top-color: var(--theme-border-muted);
}

.project-log-table-wrap {
  border-color: var(--theme-border-muted);
}

.project-log-table th {
  background: var(--theme-table-head-bg);
  color: var(--theme-muted);
}

.project-log-table th,
.project-log-table td {
  border-bottom-color: var(--theme-border-muted);
}

.project-log-table-body,
.detail-trigger-log-table-body,
.detail-trigger-log-table-wrap {
  scrollbar-width: thin;
  scrollbar-color: var(--theme-scrollbar-thumb) var(--theme-scrollbar-track);
}

.project-log-table-body::-webkit-scrollbar,
.detail-trigger-log-table-body::-webkit-scrollbar,
.detail-trigger-log-table-wrap::-webkit-scrollbar {
  width: 6px;
}

.project-log-table-body::-webkit-scrollbar-track,
.detail-trigger-log-table-body::-webkit-scrollbar-track,
.detail-trigger-log-table-wrap::-webkit-scrollbar-track {
  background: var(--theme-scrollbar-track);
  border-radius: 3px;
}

.project-log-table-body::-webkit-scrollbar-thumb,
.detail-trigger-log-table-body::-webkit-scrollbar-thumb,
.detail-trigger-log-table-wrap::-webkit-scrollbar-thumb {
  background: var(--theme-scrollbar-thumb);
  border-radius: 3px;
}

.project-log-table-body::-webkit-scrollbar-thumb:hover,
.detail-trigger-log-table-body::-webkit-scrollbar-thumb:hover,
.detail-trigger-log-table-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--theme-scrollbar-thumb-hover);
}

.project-log-table-body .project-log-table tbody tr,
.detail-trigger-log-table-body .detail-trigger-log-table tbody tr {
  transition: background 0.15s ease;
}

.project-log-table-body .project-log-table tbody tr:hover,
.detail-trigger-log-table-body .detail-trigger-log-table tbody tr:hover {
  background: var(--theme-accent-soft-hover);
}

.home-project-log-card:hover,
.home-project-card:hover,
.home-map-card:hover,
.home-overview-card:hover {
  box-shadow: var(--theme-card-shadow);
}

.home-network-test-btn,
.home-card-network-test-btn {
  background: var(--theme-btn);
  color: var(--theme-btn-text);
  box-shadow: var(--theme-shadow);
}

.home-network-test-btn:hover:not(:disabled),
.home-card-network-test-btn:hover {
  background: var(--theme-btn-hover);
  color: var(--theme-btn-text);
}

.detail-tool-btn,
.detail-network-test-btn {
  background: color-mix(in srgb, var(--theme-accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--theme-accent) 65%, transparent);
  color: var(--theme-muted-soft);
  box-shadow: none;
}

.detail-tool-btn:hover,
.detail-network-test-btn:hover {
  background: color-mix(in srgb, var(--theme-accent) 20%, transparent);
  border-color: var(--theme-accent-hover);
  color: var(--theme-text);
  box-shadow: 0 0 12px color-mix(in srgb, var(--theme-accent-hover) 22%, transparent);
}

/* ---------- 项目详情 / 场景按钮 ---------- */

.project-detail-card,
.config-project-card,
.backup-card,
.log-card,
.platform-settings-card {
  border-color: var(--theme-card-border);
  box-shadow: var(--theme-card-shadow);
}

.detail-header-info,
.config-card-header {
  background: var(--theme-inner-surface);
  border-bottom-color: var(--theme-border-muted);
}

.detail-device-ip,
.detail-device-serial,
.detail-actual-serial,
.detail-ping-delay {
  color: var(--theme-muted-soft);
}

.detail-trigger-log-table-wrap {
  border-color: var(--theme-border-muted);
  background: var(--theme-surface);
}

.detail-trigger-log-table-header {
  background: var(--theme-table-head-bg);
  border-bottom-color: var(--theme-border-muted);
}

.detail-trigger-log-table th {
  color: var(--theme-muted);
}

.detail-trigger-log-table td {
  color: var(--theme-text);
}

.detail-trigger-log-table th,
.detail-trigger-log-table td {
  border-bottom-color: var(--theme-border-muted);
}

.detail-trigger-log-source-cloud {
  color: var(--theme-accent-hover);
}

.scene-control-btn {
  background: var(--theme-scene-btn-bg);
  border-color: var(--theme-scene-btn-border);
  color: var(--theme-scene-btn-text);
  box-shadow: var(--theme-scene-btn-shadow);
}

.scene-control-btn .scene-control-btn-label {
  color: inherit;
}

.scene-control-btn .scene-control-btn-icon {
  /* 图标跟文字同色：默认提亮为近白 */
  filter: brightness(0) invert(1) opacity(0.95);
}

.scene-control-btn::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--theme-scene-btn-active-border) 92%, transparent) 50%,
    transparent 100%
  );
  box-shadow: none;
  pointer-events: none;
}

.scene-control-btn:hover:not(.active) {
  background: var(--theme-scene-btn-hover-bg);
  border-color: var(--theme-accent);
  box-shadow: var(--theme-scene-btn-hover-shadow);
}

.scene-control-btn.active,
.scene-control-btn.active:hover {
  background: var(--theme-scene-btn-active-bg);
  border-color: var(--theme-scene-btn-active-border);
  border-width: 2px;
  color: var(--theme-scene-btn-active-text, #ffffff);
  text-shadow: 0 1px 1px rgba(0, 60, 40, 0.25);
  box-shadow: var(--theme-scene-btn-active-shadow);
  filter: none;
}

.scene-control-btn.active .scene-control-btn-label,
.scene-control-btn.active:hover .scene-control-btn-label {
  color: var(--theme-scene-btn-active-text, #ffffff);
}

.scene-control-btn.active .scene-control-btn-icon,
.scene-control-btn.active:hover .scene-control-btn-icon {
  filter: brightness(0) invert(1) opacity(1);
}

.scene-control-btn.active::after,
.scene-control-btn.active:hover::after {
  width: 80%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.75) 50%,
    transparent 100%
  );
  box-shadow: 0 0 8px rgba(110, 231, 183, 0.5);
}

.scene-control-btn.scene-role-off.active,
.scene-control-btn.scene-role-off.active:hover {
  background: var(--theme-scene-off-active-bg);
  border-color: var(--theme-scene-off-active-border);
  border-width: 2px;
  color: var(--theme-scene-off-active-text, #fff5f5);
  text-shadow: 0 1px 1px rgba(80, 0, 0, 0.25);
  box-shadow: var(--theme-scene-off-active-shadow);
  filter: none;
}

.scene-control-btn.scene-role-off.active .scene-control-btn-label,
.scene-control-btn.scene-role-off.active:hover .scene-control-btn-label {
  color: var(--theme-scene-off-active-text, #fff5f5);
}

.scene-control-btn.scene-role-off.active .scene-control-btn-icon,
.scene-control-btn.scene-role-off.active:hover .scene-control-btn-icon {
  filter: brightness(0) invert(1) opacity(1);
}

.scene-control-btn.scene-role-off.active::after,
.scene-control-btn.scene-role-off.active:hover::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.75) 50%,
    transparent 100%
  );
  height: 2px;
  box-shadow: 0 0 8px rgba(163, 61, 61, 0.35);
}

/* ---------- 项目配置表单 ---------- */

.config-header-project-name,
.config-field input[type="text"],
.config-field select,
.spinner-control-horizontal input,
.config-scene-name-input {
  border: 1px solid var(--theme-border);
  background: var(--theme-input-bg);
  color: var(--theme-text);
}

.config-header-project-name:focus,
.config-field input[type="text"]:focus,
.config-field select:focus,
.config-scene-name-input:focus,
.spinner-control-horizontal input:focus {
  border-color: var(--theme-accent);
  box-shadow: 0 0 8px var(--theme-accent-soft);
}

.config-field label,
.scene-input-number {
  color: var(--theme-muted-soft);
}

.config-project-users,
.detail-project-name:not(.project-card-title) {
  color: var(--theme-text);
}

.spinner-btn-horizontal {
  background: var(--theme-btn);
  color: var(--theme-btn-text);
}

.spinner-btn-horizontal:hover {
  background: var(--theme-btn-hover);
}

.config-project-screen-users option:checked {
  background: var(--theme-accent);
  color: var(--theme-btn-text);
}

/* ---------- 平台设置 / 系统备份 ---------- */

.platform-setting-item,
.backup-stat-item {
  background: var(--theme-inner-surface);
  border-color: var(--theme-border-muted);
}

.platform-setting-label {
  color: var(--theme-text);
}

.platform-setting-hint,
.platform-settings-intro {
  color: var(--theme-muted);
}

.platform-setting-toggle input:checked + .platform-setting-toggle-slider {
  background: var(--theme-toggle-on);
}

.backup-stat-label {
  color: var(--theme-muted-soft);
}

.backup-stat-value {
  color: var(--theme-stat-value);
  text-shadow: none;
}

/* ---------- 日志页 ---------- */

.log-display {
  background: var(--theme-surface);
  border-color: var(--theme-border-muted);
  color: var(--theme-muted-soft);
}

/* ---------- 内容区、配置页 ---------- */

.content-area {
  background: var(--theme-app-bg);
}

.config-action-btn,
.config-action-btn.add-btn,
.config-action-btn.read-btn {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--theme-accent-hover) 42%, #0e3d6e) 0%,
    color-mix(in srgb, var(--theme-accent) 55%, #0a2f55) 100%
  );
  border: 1px solid color-mix(in srgb, var(--theme-accent-hover) 70%, transparent);
  color: #f0f9ff;
  box-shadow:
    0 0 12px color-mix(in srgb, var(--theme-accent) 25%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--theme-accent-hover) 22%, transparent);
}

.config-action-btn:hover,
.config-action-btn.add-btn:hover,
.config-action-btn.read-btn:hover {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--theme-accent-hover) 55%, #124a82) 0%,
    color-mix(in srgb, var(--theme-accent) 65%, #0e3d6e) 100%
  );
  border-color: var(--theme-accent-hover);
  color: #ffffff;
  box-shadow:
    0 0 16px color-mix(in srgb, var(--theme-accent-hover) 32%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--theme-accent-hover) 28%, transparent);
}

/* 写入用户信息：保持绿色主操作语义 */
.config-action-btn.update-btn {
  background: linear-gradient(145deg, #34d399 0%, #10b981 45%, #059669 100%);
  border-color: color-mix(in srgb, #6ee7b7 70%, transparent);
  color: #ecfdf5;
  box-shadow:
    0 0 12px rgba(16, 185, 129, 0.25),
    inset 0 1px 0 rgba(167, 243, 208, 0.2);
}

.config-action-btn.update-btn:hover {
  background: linear-gradient(145deg, #5eead4 0%, #34d399 45%, #10b981 100%);
  border-color: #6ee7b7;
  color: #ffffff;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.35);
}

/* 项目管理 / 计划任务 / 公司管理「保存」与「写入用户信息」同色 */
#project-manage-save,
#schedule-save-all,
#company-manage-save,
#release-note-edit-save,
#preferences-save {
  background: linear-gradient(145deg, #34d399 0%, #10b981 45%, #059669 100%);
  border: 1px solid color-mix(in srgb, #6ee7b7 70%, transparent);
  color: #ecfdf5;
  box-shadow:
    0 0 12px rgba(16, 185, 129, 0.25),
    inset 0 1px 0 rgba(167, 243, 208, 0.2);
}

#project-manage-save:hover:not(:disabled),
#schedule-save-all:hover:not(:disabled),
#company-manage-save:hover:not(:disabled),
#release-note-edit-save:hover:not(:disabled),
#preferences-save:hover:not(:disabled) {
  background: linear-gradient(145deg, #5eead4 0%, #34d399 45%, #10b981 100%);
  border-color: #6ee7b7;
  color: #ffffff;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.35);
}

.config-menu-item.write-config-btn {
  color: #34d399;
}

.config-menu-item.write-config-btn:hover:not(:disabled) {
  background: rgba(16, 185, 129, 0.14);
  color: #6ee7b7;
}

.project-manage-table input[type="checkbox"] {
  accent-color: var(--theme-accent);
}

.project-user-filter {
  border: 1px solid var(--theme-border);
  background: var(--theme-surface);
  color: var(--theme-app-text);
}

.project-user-filter:focus,
.project-user-filter:hover {
  border-color: var(--theme-accent);
  box-shadow: 0 0 8px var(--theme-accent-soft);
  background: var(--theme-surface);
}

/* ---------- 用户管理表格 ---------- */

.user-management-card {
  border-color: var(--theme-card-border);
  box-shadow: var(--theme-card-shadow);
}

.user-management-table thead {
  background: var(--theme-surface2);
  border-bottom-color: var(--theme-border);
}

.user-management-table th {
  color: var(--theme-muted-soft);
  border-right-color: var(--theme-border-muted);
}

.user-management-table tbody tr {
  border-bottom-color: var(--theme-border-muted);
}

.user-management-table tbody tr:hover {
  background: var(--theme-accent-soft);
}

.user-management-table td {
  color: var(--theme-text);
  border-right-color: var(--theme-border-muted);
}

.user-management-table input[type="text"],
.user-management-table select {
  border: 1px solid var(--theme-border);
  background-color: var(--theme-surface);
  color: var(--theme-text);
}

.user-management-table .user-company-input-wrap::after,
.user-management-table .user-mgmt-select-wrap::after {
  background-color: var(--theme-muted-soft);
}

.user-management-table input[type="text"]:focus,
.user-management-table select:focus {
  border-color: var(--theme-accent);
  box-shadow: 0 0 8px var(--theme-accent-soft);
}

.user-edit-btn {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--theme-accent-hover) 42%, #0e3d6e) 0%,
    color-mix(in srgb, var(--theme-accent) 55%, #0a2f55) 100%
  );
  border: 1px solid color-mix(in srgb, var(--theme-accent-hover) 65%, transparent);
  color: #f0f9ff;
  box-shadow:
    0 0 10px color-mix(in srgb, var(--theme-accent) 20%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--theme-accent-hover) 16%, transparent);
}

.user-edit-btn:hover {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--theme-accent-hover) 55%, #124a82) 0%,
    color-mix(in srgb, var(--theme-accent) 65%, #0e3d6e) 100%
  );
  border-color: var(--theme-accent-hover);
  box-shadow: 0 0 14px color-mix(in srgb, var(--theme-accent-hover) 28%, transparent);
}

/* ---------- 移动端导航弹出菜单 ---------- */

@media screen and (max-width: 768px) {
  .sidebar-nav {
    background: linear-gradient(180deg, var(--theme-sidebar-from), var(--theme-sidebar-to));
    border-bottom-color: var(--theme-sidebar-border);
  }

  .nav-group-wrapper .nav-submenu {
    background: var(--theme-menu-bg);
    border: var(--theme-menu-border);
    box-shadow: var(--theme-menu-shadow);
  }

  .nav-item:hover,
  .nav-item.active {
    border-bottom-color: var(--theme-nav-active-border);
  }

  .nav-group-title:hover,
  .nav-group-title.active {
    border-bottom-color: var(--theme-nav-active-border);
  }
}

/* ---------- 用户管理表格横向滚动条 ---------- */

.user-management-card {
  scrollbar-width: thin;
  scrollbar-color: var(--theme-scrollbar-thumb) var(--theme-scrollbar-track);
}

.user-management-card::-webkit-scrollbar {
  height: 6px;
}

.user-management-card::-webkit-scrollbar-track {
  background: var(--theme-scrollbar-track);
  border-radius: 3px;
}

.user-management-card::-webkit-scrollbar-thumb {
  background: var(--theme-scrollbar-thumb);
  border-radius: 3px;
}

.user-management-card::-webkit-scrollbar-thumb:hover {
  background: var(--theme-scrollbar-thumb-hover);
}