/* ═══════════════════════════════════════════════════════
   UI Upgrade Pack — 现代化信息层级与高级展示策略
   目标：统一头部、容器、卡片、表格、标签与重点状态的视觉语言
   ═══════════════════════════════════════════════════════ */

:root,
[data-theme] {
  --page-max-width: 1500px;
  --surface-soft: color-mix(in srgb, var(--bg-surface) 90%, transparent);
  --surface-glass: color-mix(in srgb, var(--bg-elevated) 82%, transparent);
  --surface-glow: color-mix(in srgb, var(--primary) 10%, transparent);
  --line-soft: color-mix(in srgb, var(--border-default) 78%, transparent);
  --line-strong: color-mix(in srgb, var(--border-strong) 92%, transparent);
  --page-hero: radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 14%, transparent), transparent 34%),
               radial-gradient(circle at top left, color-mix(in srgb, var(--accent, #06D6A0) 10%, transparent), transparent 26%),
               linear-gradient(180deg, color-mix(in srgb, var(--bg-base) 92%, #000 8%), var(--bg-base));
}

html { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  background: var(--page-hero);
}

::selection {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--text-primary);
}

.layout-container,
.page-content {
  max-width: var(--page-max-width);
}

/* ── 顶层头部统一成“浮层式仪表板条” ── */
.app-header,
.dash-header,
.page-header,
.page-nav {
  position: relative;
  background: var(--surface-glass);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.app-header,
.dash-header,
.page-header {
  border-radius: 24px;
}

.layout-container > .app-header:first-child {
  margin-top: var(--space-4);
}

body > .dash-header,
body > .page-header {
  margin: 16px 24px 0;
  padding: 18px 24px;
}

.page-nav {
  border-radius: 0 0 24px 24px;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  box-shadow: 0 18px 34px -28px rgba(0,0,0,0.45);
}

.page-nav-inner {
  max-width: var(--page-max-width);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.page-content {
  padding-top: var(--space-6);
}

.app-header,
.dash-header,
.page-header {
  padding: 18px 24px;
  margin-bottom: var(--space-5);
  border-bottom: 0 !important;
}

.app-header::after,
.dash-header::after,
.page-header::after,
.page-nav::after,
.card::after,
.panel::after,
.dash-card::after,
.section::after,
.search-panel::after,
.compare-card::after,
.m-card::after,
.status-mini::after,
.cookie-row::after,
.insight-box::after,
.plat-expand::after,
.narrative-panel::after,
.engine-panel::after,
.entity-panel::after,
.sidebar-card::after,
.summary-panel::after,
.table-section::after,
.table-container::after,
.war-room-status::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), transparent 20%),
    radial-gradient(circle at top right, var(--surface-glow), transparent 36%);
  opacity: .95;
}

.app-header-title,
.page-brand,
#pageTitle.page-brand,
.dash-header h1,
.page-header h1 {
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 800;
  color: var(--text-primary);
}

.back-link,
.page-header a,
.dash-header a {
  font-weight: 600;
}

.sse-indicator {
  padding: 6px 10px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--bg-hover) 80%, transparent);
  border: 1px solid var(--line-soft);
}

.page-nav-left,
.page-nav-right,
.app-header-left,
.app-header-right {
  position: relative;
  z-index: 1;
}

/* ── 主题切换器 / 导航控件 ── */
.theme-switcher {
  gap: 4px;
  padding: 4px;
  background: color-mix(in srgb, var(--bg-hover) 78%, transparent);
  border: 1px solid var(--line-soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.theme-switcher button {
  min-height: 32px;
  padding: 0 14px;
  border-radius: var(--radius-full);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.theme-switcher button.active {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.nav-link,
.app-header-right .btn,
.page-nav-right .btn,
.page-nav-right .nav-link {
  min-height: 36px;
}

/* ── 按钮 / 输入统一 ── */
.btn {
  min-height: 38px;
  border-radius: 12px;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.btn-primary {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--primary) 88%, white 12%),
    var(--primary)
  );
  border-color: color-mix(in srgb, var(--primary) 84%, black 16%);
  box-shadow: var(--shadow-primary);
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--primary) 74%, white 26%),
    color-mix(in srgb, var(--primary) 92%, black 8%)
  );
  box-shadow: var(--shadow-glow);
}

.btn-secondary,
.btn-ghost {
  border-color: var(--line-soft);
}

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

.btn-secondary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--bg-active) 92%, transparent);
  border-color: var(--line-strong);
}

.btn-ghost:hover:not(:disabled) {
  background: color-mix(in srgb, var(--bg-hover) 64%, transparent);
}

.input,
.search-input,
.filter-select,
.controls select,
.controls input,
.channel-timeout {
  min-height: 40px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-input) 86%, var(--bg-surface) 14%);
  border-color: var(--line-soft);
}

.input:focus,
.search-input:focus,
.filter-select:focus,
.controls select:focus,
.controls input:focus,
.channel-timeout:focus {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent);
}

/* ── 卡片体系：由“扁平块”提升为“信息面板” ── */
.card,
.panel,
.dash-card,
.section,
.search-panel,
.compare-card,
.m-card,
.status-mini,
.cookie-row,
.insight-box,
.plat-expand,
.narrative-panel,
.engine-panel,
.entity-panel,
.sidebar-card,
.summary-panel,
.table-section,
.table-container,
.war-room-status {
  position: relative;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg-surface) 92%, white 8%),
    var(--bg-surface)
  );
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-md);
}

.card:hover,
.panel:hover,
.dash-card:hover,
.section:hover,
.search-panel:hover,
.compare-card:hover,
.status-mini:hover,
.cookie-row:hover,
.plat-expand:hover,
.narrative-panel:hover,
.engine-panel:hover,
.entity-panel:hover,
.sidebar-card:hover,
.summary-panel:hover,
.table-section:hover,
.table-container:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-lg);
}

.card,
.panel,
.dash-card,
.section,
.search-panel,
.compare-card,
.status-mini,
.insight-box,
.plat-expand,
.narrative-panel,
.engine-panel,
.entity-panel,
.sidebar-card,
.summary-panel,
.table-section,
.table-container {
  border-radius: 22px;
}

.card-title,
.chart-title,
.section h3,
.panel-section-title,
.dash-card h3 {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
}

.panel-header,
.engine-header,
.entity-header,
.sidebar-card-header,
.section-header {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg-elevated) 92%, white 8%),
    var(--bg-elevated)
  );
  border-bottom: 1px solid transparent;
}

.panel.open .panel-header,
.engine-panel.open .engine-header,
.entity-panel.open .entity-header,
.sidebar-card.open .sidebar-card-header,
.table-section.open .section-header {
  border-bottom-color: var(--line-soft);
}

.panel-content,
.sidebar-card-body,
.engine-body,
.entity-body {
  position: relative;
  z-index: 1;
}

.sys-row {
  gap: 10px;
  line-height: 1.6;
}

/* ── 首页关键词卡片升级 ── */
.kw-card {
  padding: 22px !important;
  min-height: 214px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.kw-card::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 0;
  height: 4px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg,
    var(--primary),
    color-mix(in srgb, var(--accent, #06D6A0) 72%, white 28%),
    color-mix(in srgb, var(--primary) 64%, white 36%)
  );
  opacity: .95;
}

.kw-card-name {
  max-width: calc(100% - 96px);
  font-size: clamp(18px, 1.4vw, 22px);
  letter-spacing: -0.03em;
  margin-bottom: 6px;
}

.kw-card-total {
  font-size: clamp(34px, 3vw, 42px) !important;
  letter-spacing: -0.04em;
}

.kw-card-total-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.kw-card-priority-nums {
  gap: 12px;
}

.kw-card-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

.kw-card-time,
.engine-status {
  padding: 6px 10px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--bg-hover) 78%, transparent);
  border: 1px solid var(--line-soft);
}

.engine-status {
  font-weight: 700;
}

.fab {
  width: 58px !important;
  height: 58px !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-glow) !important;
}

/* ── Cookie / 系统面板 ── */
.cookie-row,
.workflow-card,
#auditLog > div,
#userAdminList > div {
  border-radius: 18px !important;
}

.cookie-row-actions,
.plat-expand-actions {
  gap: 8px;
}

.panel-section {
  border-bottom-color: var(--line-soft);
}

/* ── Dashboard 与 History 页面 ── */
.dash-grid {
  gap: 20px;
  padding: 20px 24px 30px;
}

.status-grid {
  gap: 12px;
}

.status-mini {
  padding: 16px 14px;
  text-align: left;
  transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out);
}

.status-mini .name {
  font-weight: 700;
  font-size: 14px;
}

.status-mini .num {
  font-size: 28px;
  line-height: 1;
  margin: 6px 0 4px;
}

.status-mini.alert {
  box-shadow: 0 18px 44px -28px rgba(239,68,68,0.65);
}

.status-mini.warning {
  box-shadow: 0 18px 44px -28px rgba(245,158,11,0.55);
}

.heatmap-cell,
.heatmap-table td {
  border: 1px solid color-mix(in srgb, var(--border-default) 60%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.heatmap-cell:hover,
.heatmap-table td:hover {
  transform: translateY(-1px) scale(1.06);
}

.timeline-event,
.milestone {
  border-left-color: color-mix(in srgb, var(--primary) 30%, var(--border-default));
}

.timeline-title,
.milestone .ms-title {
  font-weight: 700;
  color: var(--text-primary);
}

.timeline-chain .chip {
  border-radius: var(--radius-full);
  padding: 4px 10px;
  background: color-mix(in srgb, var(--bg-hover) 82%, transparent);
  border-color: var(--line-soft);
}

.controls {
  margin: 0 24px 16px;
  padding: 16px 18px;
  border-radius: 20px;
  background: var(--surface-glass);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-md);
}

.content {
  padding: 0 24px 30px;
}

.day-row {
  gap: 12px;
  padding: 12px 0;
}

.day-bar,
.sentiment-bar-wrap,
.plat-bar,
.plat-bar-seg,
.hour-chart,
.priority-bar {
  border-radius: var(--radius-full);
}

.day-bar {
  background: color-mix(in srgb, var(--bg-hover) 90%, transparent);
  overflow: hidden;
}

.pattern-cell {
  background: color-mix(in srgb, var(--bg-hover) 90%, transparent);
  border: 1px solid var(--line-soft);
}

.pattern-cell .val {
  font-size: 18px;
  letter-spacing: -0.03em;
}

.insight-box {
  font-size: 14px;
  line-height: 1.7;
}

/* ── 自定义搜索 / 对比页 ── */
.field {
  gap: 10px;
}

.field-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.search-panel .action-bar {
  padding-top: 10px;
  border-top: 1px dashed var(--line-soft);
}

.channel-check,
.duration-field,
.selector-item {
  background: color-mix(in srgb, var(--bg-hover) 86%, transparent);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 10px 12px;
  transition: transform var(--duration-fast), border-color var(--duration-fast), background var(--duration-fast);
}

.channel-check:hover,
.duration-field:hover,
.selector-item:hover {
  transform: translateY(-1px);
  border-color: var(--primary-border);
}

.selector-panel,
.duration-inline,
.table-container {
  box-shadow: var(--shadow-lg);
}

.range-btns {
  padding: 4px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-hover) 82%, transparent);
  border: 1px solid var(--line-soft);
}

.range-btn {
  min-height: 34px;
  border-radius: 10px;
  font-weight: 700;
}

.range-btn.active {
  box-shadow: var(--shadow-sm);
}

.compare-card {
  min-width: 0;
  overflow: hidden;
}

.compare-card .card-ci {
  letter-spacing: -0.04em;
}

.topic-tag,
.focus-tag,
.priority-tag,
.msg-type,
.badge,
.status-badge,
.plat-chip,
.tag {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

/* ── 表格与移动卡片 ── */
.table-container {
  overflow: hidden;
}

.data-table thead th {
  background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.data-table tbody tr:hover {
  background: color-mix(in srgb, var(--primary-bg) 38%, var(--bg-hover));
}

.data-table td.title-cell {
  line-height: 1.5;
}

.mobile-cards .m-card,
.m-card {
  box-shadow: var(--shadow-md);
}

/* ── star.html：作战室与情报面板升级 ── */
.focus-search {
  padding: 4px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-hover) 84%, transparent);
  border: 1px solid var(--line-soft);
}

.focus-search .input {
  min-height: 34px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.focus-search .input:focus {
  box-shadow: none;
}

.focus-search .btn {
  min-width: 82px;
}

.focus-tags {
  gap: 10px;
  margin-bottom: 14px;
}

.focus-tag {
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--color-focus, #7C3AED) 26%, transparent);
  background: color-mix(in srgb, var(--primary) 9%, transparent);
}

.war-room-status {
  gap: 12px;
  padding: 14px 18px !important;
  margin-bottom: 16px;
}

.status-stat {
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--bg-hover) 82%, transparent);
  border: 1px solid var(--line-soft);
}

.status-badge {
  border: 1px solid transparent;
  font-weight: 800;
}

.narrative-panel,
.summary-panel {
  padding: 18px 20px !important;
}

.narrative-header {
  gap: 10px;
  font-weight: 700;
}

.engine-panel,
.entity-panel,
.sidebar-card,
.table-section {
  overflow: hidden;
}

.engine-header,
.entity-header,
.sidebar-card-header,
.section-header {
  padding: 16px 18px !important;
  font-weight: 700;
}

.engine-body,
.entity-body,
.sidebar-card-body {
  padding: 0 18px 18px !important;
}

.engine-status-row,
.entity-control-row {
  gap: 10px;
}

.engine-chart-card {
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-hover) 88%, transparent);
  border: 1px solid var(--line-soft);
}

.engine-log,
.platform-health,
.term-pool,
.entity-section,
.table-summary {
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-hover) 88%, transparent);
  border: 1px solid var(--line-soft);
}

.table-summary {
  padding: 14px 16px;
}

.pagination button {
  min-width: 36px;
  min-height: 36px;
  border-radius: 12px;
}

.unread-badge {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 12%, transparent);
}

/* ── 平台状态展示更精细 ── */
.plat-bar {
  margin-bottom: 18px !important;
}

.plat-chip {
  padding: 8px 14px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
}

.plat-chip:hover {
  transform: translateY(-1px);
}

.plat-expand {
  padding: 18px 18px 16px;
  border-radius: 20px;
}

.plat-expand-grid {
  gap: 12px;
}

.plat-expand-metric {
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-hover) 90%, transparent);
  border: 1px solid var(--line-soft);
}

/* ── 小屏优化 ── */
@media (max-width: 960px) {
  body > .dash-header,
  body > .page-header {
    margin: 12px 12px 0;
    padding: 16px 18px;
  }

  .dash-grid,
  .content {
    padding-left: 12px;
    padding-right: 12px;
  }

  .controls {
    margin: 0 12px 12px;
  }

  .app-header,
  .dash-header,
  .page-header {
    border-radius: 20px;
  }

  .kw-card {
    min-height: auto;
  }
}

@media (max-width: 640px) {
  .app-header,
  .dash-header,
  .page-header {
    padding: 14px 16px;
    margin-bottom: var(--space-4);
  }

  .page-nav-inner {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }

  .page-content {
    padding-top: var(--space-4);
  }

  .theme-switcher {
    width: 100%;
    justify-content: space-between;
  }

  .theme-switcher button {
    flex: 1 1 0;
    justify-content: center;
  }

  .controls {
    padding: 14px;
    border-radius: 18px;
  }

  .status-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }

  .status-mini .num {
    font-size: 24px;
  }

  .dash-grid {
    gap: 14px;
  }

  .kw-card {
    padding: 18px !important;
  }

  .kw-card-name {
    max-width: 100%;
  }

  .focus-search {
    width: 100%;
    max-width: none;
  }

  .engine-header,
  .entity-header,
  .sidebar-card-header,
  .section-header {
    padding: 14px 16px !important;
  }

  .engine-body,
  .entity-body,
  .sidebar-card-body {
    padding: 0 16px 16px !important;
  }
}