/* whenreset.today — 全面大改版视觉与架构系统 (Comprehensive Redesign System)
 *
 * 彻底重塑原有复古卡通风格，提供 4 套从排版、组件、空间到交互完全不同的商业级大改版体系：
 *   1. modern   - Modern Pro SaaS Dashboard (现代专业数据大盘: 现代无衬线、毛玻璃顶栏、脉冲指示、现代卡片)
 *   2. table    - Bloomberg / Terminal Data Table (彭博金融高密工作台: Ticker 行情横条、全功能结构化多列大表)
 *   3. terminal - Cyberpunk Hacker CLI Console (赛博极客终端控制台: 黑客 Matrix、CRT 质感、CLI 系统事件审计流)
 *   4. classic  - Classic Neo-Brutalism (原版经典复刻: 1:1 还原原版卡通黄色倾斜卡片与气泡流)
 */

/* ==========================================================================
   全局变量与基础预设重置
   ========================================================================== */

:root {
  --modern-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --modern-font-mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
}

/* 顶栏 Live 实时监控指示灯 (现代与终端模式激活) */
.live-status-pill {
  display: none;
}

/* ==========================================================================
   全新方案切换器组件 (Design Switcher Popover)
   ========================================================================== */

.design-toggle {
  height: 38px;
  padding: 0 12px;
  color: var(--ink);
  background: var(--card);
  border: var(--border);
  box-shadow: var(--shadow-sm);
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  transition: transform .1s, box-shadow .1s, background-color .15s;
}

.design-toggle:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--shadow-ink);
}

.design-toggle-icon {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 方案弹出菜单 */
.design-menu {
  inset: auto 16px auto auto;
  top: var(--design-menu-top, 74px);
  left: var(--design-menu-left, auto);
  border: var(--border);
  background: var(--card);
  width: 260px;
  max-width: calc(100vw - 32px);
  color: var(--ink);
  box-shadow: var(--shadow);
  border-radius: 14px;
  margin: 0;
  padding: 8px;
  position: fixed;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: min(560px, calc(100vh - 96px));
  overflow-y: auto;
}

.design-menu:not(:popover-open):not(.is-open) {
  display: none;
}

.design-menu-item {
  min-height: 44px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 9px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  cursor: pointer;
  text-align: left;
  transition: background-color .12s, border-color .12s;
}

.design-menu-item:hover,
.design-menu-item:focus-visible {
  background: var(--cg-empty);
  border-color: var(--border);
}

.design-menu-item[aria-current="true"] {
  background: var(--sun);
  color: var(--on-sun);
  border-color: var(--border);
  font-weight: 700;
}

.design-menu-item[aria-current="true"]::after {
  content: "✓";
  margin-left: auto;
  font-weight: 800;
}

.design-icon {
  flex-shrink: 0;
}

.design-menu-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.design-menu-desc {
  font-size: 11px;
  font-weight: 400;
  opacity: .75;
}

/* ==========================================================================
   方案 1：【MODERN PRO SAAS DASHBOARD】现代化专业数据大盘 (全面重塑)
   彻底废弃复古手绘粗框、气泡小尖角与卡通歪扭倾斜，全面引入科技极简质感
   ========================================================================== */

html[data-design="modern"] {
  --paper: #f8fafc;
  --card: #ffffff;
  --ink: #0f172a;
  --ink-2: #475569;
  --ink-3: #94a3b8;
  --border: 1px solid rgba(15, 23, 42, 0.09);
  --shadow: 0 10px 25px -3px rgba(15, 23, 42, 0.06), 0 4px 6px -2px rgba(15, 23, 42, 0.03);
  --shadow-sm: 0 2px 6px 0 rgba(15, 23, 42, 0.04), 0 1px 2px 0 rgba(15, 23, 42, 0.02);
  --radius: 16px;
  --font-display: var(--modern-font-sans);
  --font-body: var(--modern-font-sans);
  --sun: #2563eb;
  --on-sun: #ffffff;
  --accent: #0284c7;
  --on-accent: #ffffff;
  --rose: #f1f5f9;
  --sky: #f1f5f9;
  --cg-fill: #10b981;
  --cg-banked: #0284c7;
  --cg-empty: #e2e8f0;
}

html[data-design="modern"][data-theme="dark"],
html[data-design="modern"] :root[data-theme="dark"] {
  --paper: #0b0f17;
  --card: #131926;
  --ink: #f8fafc;
  --ink-2: #94a3b8;
  --ink-3: #64748b;
  --border: 1px solid rgba(255, 255, 255, 0.08);
  --shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 2px 8px 0 rgba(0, 0, 0, 0.4);
  --rose: #1e293b;
  --sky: #1e293b;
  --cg-fill: #10b981;
  --cg-banked: #38bdf8;
  --cg-empty: #1e293b;
}

/* 顶栏现代化毛玻璃悬浮与实时呼吸灯 */
html[data-design="modern"] .masthead {
  padding: 18px 0;
  border-bottom: var(--border);
  margin-bottom: 24px;
}

html[data-design="modern"] .masthead-avatar {
  border-radius: 12px;
  transform: none !important;
  box-shadow: var(--shadow-sm);
  object-fit: cover;
}

html[data-design="modern"] .masthead-title {
  font-family: var(--modern-font-sans);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: 24px;
}

html[data-design="modern"] .live-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--modern-font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

html[data-design="modern"] .live-dot {
  width: 7px;
  height: 7px;
  background: #10b981;
  border-radius: 50%;
  animation: modern-pulse 2s infinite;
}

@keyframes modern-pulse {
  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); }
}

/* 双列沉浸式仪表盘布局 */
@media (min-width: 981px) {
  html[data-design="modern"] .page {
    max-width: 1300px;
    padding: 0 36px 64px;
  }

  html[data-design="modern"] main {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 36px;
    align-items: start;
  }

  html[data-design="modern"] .main-primary {
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-width: 0;
  }

  html[data-design="modern"] .main-feed {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    min-width: 0;
  }

  html[data-design="modern"] .main-feed .log-section {
    padding: 0;
    display: block;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
    padding-bottom: 24px;
    scrollbar-width: thin;
  }

  html[data-design="modern"] .main-feed .section-head {
    position: sticky;
    top: 0;
    background: var(--paper);
    z-index: 10;
    padding-top: 4px;
    padding-bottom: 12px;
    margin-bottom: 8px;
  }

  html[data-design="modern"] .main-feed .log-list {
    overflow: visible;
    padding: 0;
    gap: 14px;
    flex: none;
  }

  html[data-design="modern"] .main-feed .log-section::-webkit-scrollbar {
    width: 6px;
  }

  html[data-design="modern"] .main-feed .log-section::-webkit-scrollbar-track {
    background: transparent;
  }

  html[data-design="modern"] .main-feed .log-section::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.15);
    border-radius: 999px;
  }

  html[data-design="modern"][data-theme="dark"] .main-feed .log-section::-webkit-scrollbar-thumb,
  html[data-design="modern"] :root[data-theme="dark"] .main-feed .log-section::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
  }
}

/* 彻底重塑 Hero 监控卡：告别歪斜卡通黄块 */
html[data-design="modern"] .hero {
  padding: 0;
}

html[data-design="modern"] .hero-explainer {
  font-size: 14px;
  color: var(--ink-2);
  margin-bottom: 16px;
}

html[data-design="modern"] .hero-card {
  transform: none !important;
  background: var(--card);
  background-image: radial-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px);
  border: var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding: 24px 28px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}

html[data-design="modern"] .hero-main {
  min-width: 0;
}

html[data-design="modern"] .hero-label {
  font-family: var(--modern-font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}

html[data-design="modern"] .hero-figure {
  transform: none !important;
  animation: none !important;
  font-family: var(--modern-font-sans);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: clamp(34px, 4vw, 50px);
  color: var(--ink);
  background: transparent;
  padding: 0;
  line-height: 1.1;
  display: block;
}

html[data-design="modern"] .hero-footer {
  margin-top: 14px;
  align-items: center;
}

html[data-design="modern"] .hero-sub {
  font-family: var(--modern-font-mono);
  font-size: 12.5px;
  color: var(--ink-2);
}

/* 方案 1 + 2 融合：现代化周期状态与实时遥测监控舱 */
html[data-design="modern"] .hero-telemetry {
  background: rgba(15, 23, 42, 0.025);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

html[data-design="modern"][data-theme="dark"] .hero-telemetry,
html[data-design="modern"] :root[data-theme="dark"] .hero-telemetry {
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-design="modern"] .telemetry-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

html[data-design="modern"] .telemetry-label {
  font-family: var(--modern-font-sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-3);
}

html[data-design="modern"] .telemetry-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--modern-font-sans);
  font-size: 11px;
  font-weight: 600;
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
  padding: 2px 7px;
  border-radius: 999px;
}

html[data-design="modern"] .telemetry-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--modern-font-sans);
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 8px;
  padding: 3px 10px;
  width: fit-content;
}

html[data-design="modern"] .telemetry-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

html[data-design="modern"] .telemetry-badge--warn {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

html[data-design="modern"] .telemetry-badge--normal {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

html[data-design="modern"][data-theme="dark"] .telemetry-badge--warn,
html[data-design="modern"] :root[data-theme="dark"] .telemetry-badge--warn {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.4);
}

html[data-design="modern"][data-theme="dark"] .telemetry-badge--normal,
html[data-design="modern"] :root[data-theme="dark"] .telemetry-badge--normal {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.4);
}

html[data-design="modern"] .telemetry-bar-wrap {
  height: 6px;
  background: rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 1px;
}

html[data-design="modern"][data-theme="dark"] .telemetry-bar-wrap,
html[data-design="modern"] :root[data-theme="dark"] .telemetry-bar-wrap {
  background: rgba(255, 255, 255, 0.1);
}

html[data-design="modern"] .telemetry-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: #2563eb;
  transition: width .4s cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-design="modern"] .telemetry-bar-fill--over {
  background: linear-gradient(90deg, #2563eb, #f59e0b);
}

html[data-design="modern"] .telemetry-numbers {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--modern-font-mono);
  font-size: 11px;
  color: var(--ink-3);
}

html[data-design="modern"] .telemetry-pct {
  font-weight: 700;
  color: var(--ink-2);
}

html[data-design="modern"] .telemetry-pct.is-over {
  color: #d97706;
  font-weight: 800;
}

html[data-design="modern"][data-theme="dark"] .telemetry-pct.is-over,
html[data-design="modern"] :root[data-theme="dark"] .telemetry-pct.is-over {
  color: #fbbf24;
}

html[data-design="modern"] .telemetry-source {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  padding-top: 8px;
  margin-top: 2px;
  font-family: var(--modern-font-sans);
  font-size: 11.5px;
}

html[data-design="modern"][data-theme="dark"] .telemetry-source,
html[data-design="modern"] :root[data-theme="dark"] .telemetry-source {
  border-top-color: rgba(255, 255, 255, 0.06);
}

html[data-design="modern"] .telemetry-source-name {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-2);
  font-weight: 600;
}

html[data-design="modern"] .telemetry-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #2563eb;
  text-decoration: none;
  font-weight: 600;
}

html[data-design="modern"][data-theme="dark"] .telemetry-link,
html[data-design="modern"] :root[data-theme="dark"] .telemetry-link {
  color: #60a5fa;
}

html[data-design="modern"] .telemetry-link:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  html[data-design="modern"] .hero-card {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px 18px;
  }
}

/* 3联核心指标现代化重塑 */
html[data-design="modern"] .stat-row {
  margin-top: 20px;
  gap: 16px;
}

html[data-design="modern"] .stat-tile {
  transform: none !important;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  color: var(--ink) !important;
  padding: 16px 20px;
  transition: transform .15s ease, box-shadow .15s ease;
}

html[data-design="modern"] .stat-tile:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow);
}

html[data-design="modern"] .stat-tile dt {
  font-family: var(--modern-font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}

html[data-design="modern"] .stat-tile dd {
  font-family: var(--modern-font-sans);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* 热力图看板现代卡片化 */
html[data-design="modern"] .graph-section {
  padding: 0;
}

html[data-design="modern"] .graph-card {
  border: var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  padding: 22px 24px 18px;
}

html[data-design="modern"] .section-head h2 {
  font-family: var(--modern-font-sans);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 18px;
}

html[data-design="modern"] .cg-cell {
  border-radius: 4px;
}

html[data-design="modern"] .cg-cell[data-level="1"] {
  border: none;
  box-shadow: none;
}

/* 彻底重构公告项：坚决废除小三角与粗黑框，引入现代化 Activity Feed */
html[data-design="modern"] .log-section {
  padding: 0;
}

html[data-design="modern"] .log-bubble:before {
  display: none !important; /* 彻底移除对话气泡尖角！ */
}

html[data-design="modern"] .log-item {
  gap: 12px;
}

html[data-design="modern"] .log-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: var(--border);
  box-shadow: var(--shadow-sm);
  margin-top: 2px;
  object-fit: cover;
}

html[data-design="modern"] .log-bubble {
  border: var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  padding: 16px 20px;
  transition: box-shadow .15s ease, border-color .15s ease;
}

html[data-design="modern"] .log-bubble:hover {
  box-shadow: var(--shadow);
  border-color: rgba(37, 99, 235, 0.3);
}

html[data-design="modern"] .log-item-time {
  font-family: var(--modern-font-sans);
  font-size: 12px;
  font-weight: 700;
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 6px;
  padding: 2px 8px;
}

html[data-design="modern"] .log-item-abs {
  font-family: var(--modern-font-mono);
  font-size: 11px;
  color: var(--ink-3);
}

html[data-design="modern"] .log-item-text {
  font-family: var(--modern-font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  margin-top: 8px;
}

html[data-design="modern"] .log-item-link {
  font-family: var(--modern-font-sans);
  font-size: 12px;
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

html[data-design="modern"] .log-item-link:hover {
  text-decoration: underline;
}

/* 现代化折叠展开器：彻底告别手绘风与中间突兀断层，水平完美居中对齐 */
html[data-design="modern"] .log-more {
  margin-top: 18px;
  margin-bottom: 24px;
  text-align: center;
  width: 100%;
}

html[data-design="modern"] .log-more-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--card);
  color: #2563eb;
  border: 1px solid rgba(37, 99, 235, 0.25);
  border-radius: 999px;
  font-family: var(--modern-font-sans);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 24px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
  margin: 0 auto;
  cursor: pointer;
  user-select: none;
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
  list-style: none;
}

html[data-design="modern"] .log-more-toggle::-webkit-details-marker,
html[data-design="modern"] .log-more-toggle::marker {
  display: none;
}

html[data-design="modern"][data-theme="dark"] .log-more-toggle,
html[data-design="modern"] :root[data-theme="dark"] .log-more-toggle {
  background: #131926;
  color: #60a5fa;
  border-color: rgba(96, 165, 250, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

html[data-design="modern"] .log-more-toggle:hover {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
  transform: translateY(-1px);
}

html[data-design="modern"] .log-more-toggle:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.2);
}

html[data-design="modern"] .log-more[open] .log-more-toggle {
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
  border-color: rgba(37, 99, 235, 0.25);
  margin: 12px auto 18px;
  box-shadow: none;
}

html[data-design="modern"][data-theme="dark"] .log-more[open] .log-more-toggle,
html[data-design="modern"] :root[data-theme="dark"] .log-more[open] .log-more-toggle {
  background: rgba(37, 99, 235, 0.2);
  color: #93c5fd;
  border-color: rgba(96, 165, 250, 0.35);
}

html[data-design="modern"] .log-more[open] .log-more-toggle:hover {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}

html[data-design="modern"] .log-more-arrow {
  font-family: var(--modern-font-sans);
  font-size: 13px;
  line-height: 1;
  display: inline-block;
  transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-design="modern"] .log-more[open] .log-more-arrow {
  transform: rotate(180deg);
}

html[data-design="modern"] .log-list--more {
  margin-top: 0;
  gap: 14px;
  text-align: left;
  width: 100%;
}

html[data-design="modern"] .log-more-footer {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 8px;
}

html[data-design="modern"] .log-more-bottom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--card);
  color: #2563eb;
  border: 1px solid rgba(37, 99, 235, 0.25);
  border-radius: 999px;
  font-family: var(--modern-font-sans);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 24px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
  cursor: pointer;
  user-select: none;
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-design="modern"][data-theme="dark"] .log-more-bottom-btn,
html[data-design="modern"] :root[data-theme="dark"] .log-more-bottom-btn {
  background: #131926;
  color: #60a5fa;
  border-color: rgba(96, 165, 250, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

html[data-design="modern"] .log-more-bottom-btn:hover {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
  transform: translateY(-1px);
}

/* ==========================================================================
   方案 2：【BLOOMBERG DATA TABLE】彭博金融高密专业工作台
   极致信息密度、横向紧凑 Ticker 行情带、无缝网格、4列结构化明细大表
   ========================================================================== */

html[data-design="table"] {
  --paper: #0f141c;
  --card: #141b26;
  --ink: #e2e8f0;
  --ink-2: #94a3b8;
  --ink-3: #64748b;
  --border: 1px solid #2d3748;
  --shadow: none;
  --shadow-sm: none;
  --radius: 4px;
  --font-display: var(--modern-font-mono);
  --font-body: var(--modern-font-mono);
  --sun: #f59e0b;
  --on-sun: #000000;
  --accent: #3b82f6;
  --on-accent: #ffffff;
  --cg-fill: #10b981;
  --cg-banked: #f59e0b;
  --cg-empty: #1e293b;
}

html[data-design="table"] .page {
  max-width: 1360px;
  padding: 0 24px 64px;
}

/* 顶部紧凑行情状态带 */
html[data-design="table"] .masthead {
  padding: 14px 0;
  border-bottom: 2px solid #3b82f6;
}

html[data-design="table"] .masthead-title {
  font-family: var(--modern-font-mono);
  font-size: 20px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

html[data-design="table"] .masthead-avatar {
  border-radius: 4px;
  transform: none !important;
}

html[data-design="table"] .hero-explainer,
html[data-design="table"] .subscription-actions {
  margin-bottom: 12px;
}

/* 顶部收拢为紧凑横向控制条 */
html[data-design="table"] .hero-card {
  transform: none !important;
  border-radius: 4px;
  border: var(--border);
  background: var(--card);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

html[data-design="table"] .hero-label {
  margin: 0;
  font-size: 11px;
  letter-spacing: .1em;
}

html[data-design="table"] .hero-figure {
  transform: none !important;
  animation: none !important;
  font-size: 22px;
  padding: 4px 10px;
  border-radius: 4px;
  line-height: 1;
}

html[data-design="table"] .hero-main {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

html[data-design="table"] .hero-telemetry {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 4px;
  padding: 6px 12px;
  font-family: var(--modern-font-mono);
  font-size: 11px;
}

html[data-design="table"] .hero-telemetry .telemetry-top {
  display: none;
}

html[data-design="table"] .hero-telemetry .telemetry-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

html[data-design="table"] .hero-telemetry .telemetry-badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

html[data-design="table"] .hero-telemetry .telemetry-badge--warn {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}

html[data-design="table"] .hero-telemetry .telemetry-badge--normal {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}

html[data-design="table"] .hero-telemetry .telemetry-bar-wrap {
  width: 70px;
  height: 4px;
  background: #334155;
  border-radius: 2px;
  overflow: hidden;
}

html[data-design="table"] .hero-telemetry .telemetry-bar-fill {
  height: 100%;
  background: #38bdf8;
}

html[data-design="table"] .hero-telemetry .telemetry-bar-fill--over {
  background: #f59e0b;
}

html[data-design="table"] .hero-telemetry .telemetry-numbers {
  display: flex;
  gap: 6px;
  color: #94a3b8;
}

html[data-design="table"] .hero-telemetry .telemetry-source {
  display: flex;
  align-items: center;
  gap: 8px;
  border-left: 1px solid #334155;
  padding-left: 10px;
}

html[data-design="table"] .hero-telemetry .telemetry-source-name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #94a3b8;
}

html[data-design="table"] .hero-telemetry .telemetry-link {
  color: #38bdf8;
  text-decoration: none;
}

/* 指标行为统一横向数据栏 */
html[data-design="table"] .stat-row {
  margin: 12px 0 0;
  gap: 0;
  border: var(--border);
  border-radius: 4px;
  background: var(--card);
}

html[data-design="table"] .stat-tile {
  transform: none !important;
  border: none;
  border-radius: 0;
  border-right: var(--border);
  padding: 8px 16px;
  background: transparent !important;
  color: var(--ink) !important;
}

html[data-design="table"] .stat-tile:last-child {
  border-right: none;
}

html[data-design="table"] .stat-tile dt {
  font-size: 10px;
  letter-spacing: .08em;
  margin-bottom: 2px;
}

html[data-design="table"] .stat-tile dd {
  font-size: 20px;
  font-weight: 800;
}

/* 全功能结构化多列数据表格 */
html[data-design="table"] .log-table-head {
  display: grid;
  grid-template-columns: 56px 170px 1fr 100px;
  gap: 14px;
  align-items: center;
  padding: 9px 16px;
  background: #1e293b;
  color: #94a3b8;
  border: var(--border);
  border-bottom: 2px solid #3b82f6;
  border-radius: 4px 4px 0 0;
  font-family: var(--modern-font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 24px;
}

html[data-design="table"] .log-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: var(--border);
  border-top: none;
  border-radius: 0 0 4px 4px;
  background: var(--card);
}

html[data-design="table"] .log-item {
  display: grid;
  grid-template-columns: 56px 170px 1fr 100px;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  margin: 0;
  transition: background-color .1s;
}

html[data-design="table"] .log-item:hover {
  background: rgba(59, 130, 246, 0.08);
}

html[data-design="table"] .log-item:last-child {
  border-bottom: none;
}

html[data-design="table"] .log-avatar {
  width: 28px;
  height: 28px;
  margin: 0 auto;
  border-radius: 4px;
  box-shadow: none;
  border: 1px solid var(--border);
}

html[data-design="table"] .log-bubble {
  display: contents; /* 神奇拆解：子项直接进入 grid 列 */
}

html[data-design="table"] .log-bubble:before {
  display: none !important;
}

html[data-design="table"] .log-item-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: 0;
}

html[data-design="table"] .log-item-time {
  font-size: 11.5px;
  padding: 1px 6px;
  border-radius: 3px;
  border: none;
  background: #f59e0b;
  color: #000;
}

html[data-design="table"] .log-item-abs {
  font-size: 10px;
  color: var(--ink-3);
}

html[data-design="table"] .log-item-text {
  font-size: 13px;
  line-height: 1.45;
  -webkit-line-clamp: 2;
  margin: 0;
}

html[data-design="table"] .log-item-link {
  margin: 0;
  font-size: 11px;
  justify-self: end;
  padding: 4px 10px;
  border: 1px solid #3b82f6;
  border-radius: 3px;
  color: #3b82f6;
  text-decoration: none;
  white-space: nowrap;
}

html[data-design="table"] .log-item-link:hover {
  background: #3b82f6;
  color: #fff;
}

/* 表格模式折叠器与底部收起栏 */
html[data-design="table"] .log-more {
  margin-top: 0;
}

html[data-design="table"] .log-more-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border-radius: 0 0 4px 4px;
  border: var(--border);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #1e293b;
  color: #38bdf8;
  font-family: var(--modern-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 10px 16px;
  box-shadow: none;
  cursor: pointer;
  margin: 0;
  list-style: none;
  transition: background-color .15s, color .15s;
}

html[data-design="table"] .log-more-toggle::-webkit-details-marker,
html[data-design="table"] .log-more-toggle::marker {
  display: none;
}

html[data-design="table"] .log-more-toggle:hover {
  background: #283548;
  color: #ffffff;
}

html[data-design="table"] .log-more[open] .log-more-toggle {
  border-radius: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #141d2b;
  color: #94a3b8;
}

html[data-design="table"] .log-more[open] .log-more-toggle:hover {
  background: #1e293b;
  color: #38bdf8;
}

html[data-design="table"] .log-list--more {
  margin-top: 0;
  border-top: none;
  border-radius: 0;
}

html[data-design="table"] .log-more-footer {
  margin: 0;
}

html[data-design="table"] .log-more-bottom-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border-radius: 0 0 4px 4px;
  border: var(--border);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #141d2b;
  color: #94a3b8;
  font-family: var(--modern-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 10px 16px;
  box-shadow: none;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}

html[data-design="table"] .log-more-bottom-btn:hover {
  background: #1e293b;
  color: #38bdf8;
}

/* ==========================================================================
   方案 3：【CYBERPUNK HACKER TERMINAL】赛博极客终端控制台
   黑客 Matrix、荧光绿扫描线质感、CLI 终端窗体、系统审计事件流
   ========================================================================== */

html[data-design="terminal"] {
  --paper: #080c10;
  --card: #0d121a;
  --ink: #00ff66;
  --ink-2: #00dd55;
  --ink-3: #00aa44;
  --border: 1px solid rgba(0, 255, 102, 0.4);
  --shadow: 0 0 20px rgba(0, 255, 102, 0.15);
  --shadow-sm: 0 0 10px rgba(0, 255, 102, 0.1);
  --radius: 6px;
  --font-display: "Cascadia Code", "SF Mono", "Fira Code", monospace;
  --font-body: "Cascadia Code", "SF Mono", "Fira Code", monospace;
  --font-mono: "Cascadia Code", "SF Mono", "Fira Code", monospace;
  --sun: #00ff66;
  --on-sun: #080c10;
  --accent: #00ffcc;
  --on-accent: #080c10;
  --cg-fill: #00ff66;
  --cg-banked: #00ffcc;
  --cg-empty: #141f28;
}

html[data-design="terminal"] body {
  background-image: linear-gradient(rgba(0, 255, 102, 0.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0, 255, 102, 0.03) 1px, transparent 1px);
  background-size: 24px 24px;
}

html[data-design="terminal"] .masthead {
  border-bottom: 1px dashed var(--ink);
  padding: 16px 0;
}

html[data-design="terminal"] .masthead-avatar {
  border-radius: 4px;
  filter: drop-shadow(0 0 8px #00ff66);
  transform: none !important;
}

html[data-design="terminal"] .live-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 255, 102, 0.1);
  color: #00ff66;
  border: 1px solid #00ff66;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
}

html[data-design="terminal"] .hero-card {
  transform: none !important;
  border: 1px solid #00ff66;
  box-shadow: 0 0 18px rgba(0, 255, 102, 0.2);
  border-radius: 6px;
  background: #0d121a;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 20px;
  padding: 24px 22px;
  align-items: center;
}

html[data-design="terminal"] .hero-card::before {
  content: "SYS_TELEMETRY // LIVE_MONITOR";
  position: absolute;
  top: -10px;
  left: 14px;
  background: #080c10;
  padding: 0 8px;
  font-size: 10px;
  color: #00ff66;
  letter-spacing: .15em;
  font-weight: 700;
}

html[data-design="terminal"] .hero-main {
  min-width: 0;
}

html[data-design="terminal"] .hero-telemetry {
  background: #080c10;
  border: 1px dashed rgba(0, 255, 102, 0.4);
  border-radius: 4px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-mono);
  min-width: 0;
}

html[data-design="terminal"] .telemetry-top {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #00dd55;
  letter-spacing: .08em;
}

html[data-design="terminal"] .telemetry-live-pill {
  color: #00ff66;
  text-shadow: 0 0 6px #00ff66;
}

html[data-design="terminal"] .telemetry-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 2px;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

html[data-design="terminal"] .telemetry-badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

html[data-design="terminal"] .telemetry-badge--warn {
  background: rgba(255, 170, 0, 0.15);
  color: #ffaa00;
  border: 1px solid #ffaa00;
}

html[data-design="terminal"] .telemetry-badge--normal {
  background: rgba(0, 255, 102, 0.15);
  color: #00ff66;
  border: 1px solid #00ff66;
}

html[data-design="terminal"] .telemetry-bar-wrap {
  height: 6px;
  background: #141f28;
  border: 1px solid rgba(0, 255, 102, 0.3);
  border-radius: 2px;
  overflow: hidden;
}

html[data-design="terminal"] .telemetry-bar-fill {
  height: 100%;
  background: #00ff66;
  box-shadow: 0 0 8px #00ff66;
}

html[data-design="terminal"] .telemetry-bar-fill--over {
  background: #ffaa00;
  box-shadow: 0 0 8px #ffaa00;
}

html[data-design="terminal"] .telemetry-numbers {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #00aa44;
}

html[data-design="terminal"] .telemetry-pct {
  font-weight: 700;
  color: #00ff66;
}

html[data-design="terminal"] .telemetry-pct.is-over {
  color: #ffaa00;
}

html[data-design="terminal"] .telemetry-source {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  border-top: 1px dashed rgba(0, 255, 102, 0.25);
  padding-top: 6px;
  color: #00dd55;
}

html[data-design="terminal"] .telemetry-source-name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

html[data-design="terminal"] .telemetry-link {
  color: #00ff66;
  text-decoration: underline;
}

@media (max-width: 640px) {
  html[data-design="terminal"] .hero-card {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

html[data-design="terminal"] .hero-figure {
  transform: none !important;
  animation: none !important;
  background: transparent;
  color: #00ff66;
  text-shadow: 0 0 12px rgba(0, 255, 102, 0.6);
  font-size: clamp(34px, 5vw, 54px);
  padding: 0;
}

html[data-design="terminal"] .stat-tile {
  transform: none !important;
  border: 1px solid rgba(0, 255, 102, 0.4);
  background: #0d121a !important;
  color: #00ff66 !important;
  border-radius: 4px;
  box-shadow: 0 0 12px rgba(0, 255, 102, 0.08);
}

html[data-design="terminal"] .log-bubble {
  border: 1px solid rgba(0, 255, 102, 0.3);
  box-shadow: 0 0 10px rgba(0, 255, 102, 0.06);
  border-radius: 4px;
}

html[data-design="terminal"] .log-bubble:before {
  display: none !important;
}

html[data-design="terminal"] .log-item-time {
  background: #00ff66;
  color: #080c10;
  border-radius: 2px;
}

/* 终端极客风折叠器与底部收起栏 */
html[data-design="terminal"] .log-more {
  margin-top: 16px;
  margin-bottom: 24px;
  text-align: center;
  width: 100%;
}

html[data-design="terminal"] .log-more-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #0d121a;
  color: #00ff66;
  border: 1px solid #00ff66;
  border-radius: 4px;
  font-family: var(--modern-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 8px 20px;
  box-shadow: 0 0 10px rgba(0, 255, 102, 0.15);
  margin: 0 auto;
  cursor: pointer;
  list-style: none;
  transition: all .15s ease;
}

html[data-design="terminal"] .log-more-toggle::-webkit-details-marker,
html[data-design="terminal"] .log-more-toggle::marker {
  display: none;
}

html[data-design="terminal"] .log-more-toggle:hover {
  background: rgba(0, 255, 102, 0.15);
  box-shadow: 0 0 18px rgba(0, 255, 102, 0.35);
  text-shadow: 0 0 8px #00ff66;
}

html[data-design="terminal"] .log-more[open] .log-more-toggle {
  background: rgba(0, 255, 102, 0.08);
  border-color: rgba(0, 255, 102, 0.6);
  margin: 12px auto 18px;
}

html[data-design="terminal"] .log-list--more {
  margin-top: 0;
  text-align: left;
  width: 100%;
}

html[data-design="terminal"] .log-more-footer {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

html[data-design="terminal"] .log-more-bottom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #0d121a;
  color: #00ff66;
  border: 1px solid #00ff66;
  border-radius: 4px;
  font-family: var(--modern-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 8px 20px;
  box-shadow: 0 0 10px rgba(0, 255, 102, 0.15);
  cursor: pointer;
  transition: all .15s ease;
}

html[data-design="terminal"] .log-more-bottom-btn:hover {
  background: rgba(0, 255, 102, 0.15);
  box-shadow: 0 0 18px rgba(0, 255, 102, 0.35);
  text-shadow: 0 0 8px #00ff66;
}

/* 原版与通用底部折叠按钮兜底 */
.masthead-avatar,
.log-avatar {
  object-fit: cover;
}

.log-more {
  text-align: center;
  width: 100%;
}

.log-list--more {
  text-align: left;
  width: 100%;
}

.log-more-footer {
  text-align: center;
  margin-top: 20px;
}

.log-more-bottom-btn {
  background: var(--paper);
  border: var(--border);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-display);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  transition: transform .1s, box-shadow .1s, background-color .1s;
}

.log-more-bottom-btn:hover {
  background: var(--sun);
  color: var(--on-sun);
}

.log-more-bottom-btn:active {
  box-shadow: 0 0 0 var(--shadow-ink);
  transform: translate(2px, 2px);
}

/* 通用与经典模式 Hero 遥测监控舱 */
.hero-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.hero-main {
  flex: 1;
  min-width: 240px;
}

.hero-telemetry {
  border: var(--border);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 3px 3px 0 var(--shadow-ink);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 260px;
}

.telemetry-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-2);
}

.telemetry-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--cg-fill);
}

.telemetry-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 12px;
  width: fit-content;
  border: 1.5px solid var(--ink);
}

.telemetry-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.telemetry-badge--warn {
  background: var(--sun);
  color: var(--on-sun);
}

.telemetry-badge--normal {
  background: var(--mint, #b9e6a6);
  color: var(--ink);
}

.telemetry-bar-wrap {
  height: 8px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--cg-empty);
  overflow: hidden;
}

.telemetry-bar-fill {
  height: 100%;
  background: var(--accent);
}

.telemetry-bar-fill--over {
  background: var(--sun);
}

.telemetry-numbers {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
}

.telemetry-source {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  border-top: 1.5px dashed var(--border);
  padding-top: 6px;
}

.telemetry-link {
  color: var(--accent);
  font-weight: 700;
}

/* ==========================================================================
   方案 4：【CLASSIC NEO-BRUTALISM】原版复古玩趣 (保持 1:1 对标)
   ========================================================================== */

html[data-design="classic"] .main-primary,
html[data-design="classic"] .main-feed {
  display: contents;
}

/* 页脚多语言导航条间距优化 */
.site-footer {
  margin-top: 48px;
  padding-top: 18px;
}

.site-footer-langs {
  margin-bottom: 0;
}

/* ==========================================================================
   方案 4：【AURORA GLASS】沉浸式极光玻璃
   ========================================================================== */

html[data-design="aurora"] {
  --paper: #07101f;
  --card: rgba(13, 27, 49, .72);
  --ink: #eef6ff;
  --ink-2: #b0c2d9;
  --ink-3: #6f88a5;
  --accent: #73e6ff;
  --sun: #8b7cff;
  --on-sun: #fff;
  --rose: rgba(255, 126, 193, .12);
  --sky: rgba(115, 230, 255, .12);
  --watch-paper: rgba(255, 190, 92, .12);
  --watch-copy: #ffd68c;
  --cg-empty: rgba(137, 164, 198, .13);
  --cg-fill: #50e3c2;
  --cg-banked: #ffb45f;
  --border: 1px solid rgba(184, 220, 255, .16);
  --shadow: 0 24px 70px rgba(0, 0, 0, .28), inset 0 1px rgba(255,255,255,.05);
  --shadow-sm: 0 10px 30px rgba(0,0,0,.2);
  --radius: 22px;
  --font-display: var(--modern-font-sans);
  --font-body: var(--modern-font-sans);
  color-scheme: dark;
}

html[data-design="aurora"]:not([data-theme="dark"]) body {
  background:
    radial-gradient(circle at 12% 8%, rgba(75, 126, 255, .27), transparent 34rem),
    radial-gradient(circle at 88% 18%, rgba(191, 73, 255, .2), transparent 30rem),
    radial-gradient(circle at 55% 88%, rgba(25, 211, 174, .12), transparent 34rem), #07101f;
  background-attachment: fixed;
}

html[data-design="aurora"] .masthead {
  margin-top: 18px;
  padding: 13px 17px;
  border: 1px solid rgba(190,220,255,.14);
  border-radius: 20px;
  background: rgba(10, 22, 41, .64);
  backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 18px 55px rgba(0,0,0,.24);
}

html[data-design="aurora"] .masthead-avatar,
html[data-design="aurora"] .hero-card,
html[data-design="aurora"] .stat-tile,
html[data-design="aurora"] .graph-card,
html[data-design="aurora"] .log-bubble,
html[data-design="aurora"] .watch-card {
  border: 1px solid rgba(190, 220, 255, .16);
  box-shadow: var(--shadow);
}

html[data-design="aurora"] .hero-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(26,48,82,.78), rgba(18,26,50,.64));
}

html[data-design="aurora"] .hero-card::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -110px;
  top: -140px;
  border-radius: 50%;
  background: #7d6bff;
  filter: blur(60px);
  opacity: .25;
  pointer-events: none;
}

html[data-design="aurora"] .hero-figure {
  color: #fff;
  text-shadow: 0 0 30px rgba(115,230,255,.24);
}

html[data-design="aurora"] .stat-tile {
  transform: none;
  background: rgba(15, 31, 55, .68);
  backdrop-filter: blur(18px);
}

html[data-design="aurora"] .stat-tile:hover { transform: translateY(-4px); }
html[data-design="aurora"] .log-bubble { background: rgba(13,27,49,.7); }
html[data-design="aurora"] .log-bubble::before { display: none; }
html[data-design="aurora"] .cg-cell[data-level="1"] { border: 0; box-shadow: 0 0 12px rgba(80,227,194,.4); }
html[data-design="aurora"] .subscription-action,
html[data-design="aurora"] .design-toggle { border-color: rgba(190,220,255,.18); background: rgba(15,31,55,.75); box-shadow: none; }

/* ==========================================================================
   方案 5：【SWISS EDITORIAL】瑞士编辑网格
   ========================================================================== */

html[data-design="editorial"] {
  --paper: #f2f0e9;
  --card: #f8f7f2;
  --ink: #151515;
  --ink-2: #484848;
  --ink-3: #77746d;
  --accent: #e33b2e;
  --sun: #e33b2e;
  --on-sun: #fff;
  --rose: #dad7cf;
  --sky: #dad7cf;
  --watch-paper: #f1d857;
  --watch-copy: #151515;
  --cg-empty: #d8d5cd;
  --cg-fill: #151515;
  --cg-banked: #e33b2e;
  --border: 1px solid #151515;
  --shadow: none;
  --shadow-sm: none;
  --radius: 0;
  --font-display: Arial, Helvetica, sans-serif;
  --font-body: Arial, Helvetica, sans-serif;
}

html[data-design="editorial"] body {
  background-image: linear-gradient(to right, rgba(0,0,0,.035) 1px, transparent 1px);
  background-size: calc((min(100vw, 880px) - 48px) / 6) 100%;
}

html[data-design="editorial"] .masthead { border-bottom: 3px solid var(--ink); padding-bottom: 20px; }
html[data-design="editorial"] .masthead-title { text-transform: uppercase; letter-spacing: -.055em; font-size: clamp(30px,5vw,48px); }
html[data-design="editorial"] .masthead-avatar { border-radius: 0; box-shadow: none; transform: none; }
html[data-design="editorial"] .hero-explainer { max-width: 42ch; font-size: 19px; }
html[data-design="editorial"] .hero-card {
  grid-template-columns: 1.25fr .75fr;
  border-width: 3px 0 0;
  padding: 28px 0;
  background: transparent;
  box-shadow: none;
}
html[data-design="editorial"] .hero-label { letter-spacing: .15em; text-transform: uppercase; }
html[data-design="editorial"] .hero-figure { font-size: clamp(58px,10vw,104px); letter-spacing: -.075em; line-height: .88; }
html[data-design="editorial"] .hero-telemetry { border-left: 1px solid var(--ink); border-radius: 0; background: transparent; }
html[data-design="editorial"] .scheduled-card { border-width: 1px 1px 5px; }
html[data-design="editorial"] .stat-row { gap: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
html[data-design="editorial"] .stat-tile { border: 0; border-right: 1px solid var(--ink); background: transparent; box-shadow: none; transform: none; }
html[data-design="editorial"] .stat-tile:last-child { border-right: 0; }
html[data-design="editorial"] .stat-tile dd { font-size: 42px; letter-spacing: -.05em; }
html[data-design="editorial"] .section-head { border-bottom: 3px solid var(--ink); padding-bottom: 10px; }
html[data-design="editorial"] .section-head h2 { text-transform: uppercase; letter-spacing: -.035em; }
html[data-design="editorial"] .graph-card { border: 0; padding-left: 0; padding-right: 0; background: transparent; }
html[data-design="editorial"] .cg-cell { border-radius: 0; }
html[data-design="editorial"] .cg-cell[data-level="1"] { border: 0; box-shadow: none; }
html[data-design="editorial"] .log-avatar { display: none; }
html[data-design="editorial"] .log-item { gap: 0; }
html[data-design="editorial"] .log-bubble { border-width: 0 0 1px; padding: 18px 0; background: transparent; box-shadow: none; border-radius: 0; }
html[data-design="editorial"] .log-bubble::before { display: none; }
html[data-design="editorial"] .log-item-time { border: 0; border-radius: 0; padding: 2px 7px; }
html[data-design="editorial"] .subscription-action,
html[data-design="editorial"] .design-toggle { border-radius: 0; box-shadow: none; text-transform: uppercase; }

/* ==========================================================================
   方案 6：【CALM MINIMAL】静谧极简阅读
   ========================================================================== */

html[data-design="calm"] {
  --paper: #f5f5f1;
  --card: #ffffff;
  --ink: #262925;
  --ink-2: #60665f;
  --ink-3: #979d96;
  --accent: #536b5a;
  --sun: #e9efe9;
  --on-sun: #314438;
  --rose: #f3f1ed;
  --sky: #f3f1ed;
  --watch-paper: #f4efe1;
  --watch-copy: #6e6041;
  --cg-empty: #e8ebe6;
  --cg-fill: #668070;
  --cg-banked: #c39b63;
  --border: 1px solid #e4e7e1;
  --shadow: 0 3px 16px rgba(38, 51, 42, .035);
  --shadow-sm: 0 1px 7px rgba(38, 51, 42, .03);
  --radius: 12px;
  --font-display: Georgia, "Times New Roman", serif;
  --font-body: var(--modern-font-sans);
}

html[data-design="calm"] .page { max-width: 820px; }
html[data-design="calm"] .masthead { padding-top: 42px; }
html[data-design="calm"] .masthead-title { font-weight: 600; letter-spacing: -.025em; }
html[data-design="calm"] .masthead-avatar { border: 0; box-shadow: none; filter: saturate(.75); }
html[data-design="calm"] .hero { padding-top: 46px; }
html[data-design="calm"] .hero-explainer { color: var(--ink-2); font-size: 17px; line-height: 1.8; }
html[data-design="calm"] .hero-card { padding: 30px; border-color: #e1e5df; box-shadow: var(--shadow); }
html[data-design="calm"] .hero-figure { font-weight: 500; letter-spacing: -.045em; }
html[data-design="calm"] .hero-telemetry { background: #f7f8f5; border: 0; }
html[data-design="calm"] .scheduled-card { padding: 19px 22px; box-shadow: none; }
html[data-design="calm"] .stat-row { gap: 12px; }
html[data-design="calm"] .stat-tile { background: #fff; box-shadow: none; transform: none; text-align: left; }
html[data-design="calm"] .stat-tile dd { font-family: Georgia,serif; font-weight: 500; }
html[data-design="calm"] .section-head { margin-top: 14px; }
html[data-design="calm"] .section-head h2 { font-weight: 600; }
html[data-design="calm"] .graph-card { box-shadow: none; }
html[data-design="calm"] .cg-cell { border-radius: 50%; }
html[data-design="calm"] .cg-cell[data-level="1"] { border: 0; box-shadow: none; }
html[data-design="calm"] .log-list { gap: 12px; }
html[data-design="calm"] .log-avatar { border: 0; box-shadow: none; filter: saturate(.7); }
html[data-design="calm"] .log-bubble { border-color: #e6e8e3; box-shadow: none; }
html[data-design="calm"] .log-bubble::before { border-color: #e6e8e3; }
html[data-design="calm"] .log-item-time { border: 0; background: #edf1ec; color: #405448; }
html[data-design="calm"] .subscription-action,
html[data-design="calm"] .design-toggle { box-shadow: none; }

@media (width <= 640px) {
  html[data-design="editorial"] .hero-card { display: block; }
  html[data-design="editorial"] .hero-telemetry { border-left: 0; border-top: 1px solid var(--ink); margin-top: 22px; padding-top: 18px; }
  html[data-design="editorial"] .hero-figure { font-size: 58px; }
  html[data-design="aurora"] .masthead { margin-top: 10px; padding: 11px 12px; }
}

/* iOS Liquid Glass refinement：以系统材质、边缘高光和层级阴影取代霓虹感。 */
html[data-design="aurora"] {
  --paper: #edf1f7;
  --card: rgba(255, 255, 255, .34);
  --ink: #1c1c1e;
  --ink-2: #5d5d64;
  --ink-3: #8e8e93;
  --accent: #007aff;
  --sun: #007aff;
  --on-sun: #fff;
  --rose: rgba(255, 255, 255, .28);
  --sky: rgba(255, 255, 255, .28);
  --watch-paper: rgba(255, 247, 224, .4);
  --watch-copy: #815400;
  --cg-empty: rgba(118, 118, 128, .13);
  --cg-fill: #34c759;
  --cg-banked: #ff9f0a;
  --border: 1px solid rgba(255, 255, 255, .72);
  --shadow: 0 24px 60px rgba(44, 62, 90, .12), 0 2px 8px rgba(44, 62, 90, .06), inset 0 1px 0 rgba(255,255,255,.82);
  --shadow-sm: 0 8px 24px rgba(44,62,90,.09), inset 0 1px rgba(255,255,255,.7);
  --radius: 26px;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

html[data-design="aurora"][data-theme="dark"] {
  --paper: #08090c;
  --card: rgba(34, 34, 38, .4);
  --ink: #f5f5f7;
  --ink-2: #c1c1c7;
  --ink-3: #8e8e93;
  --rose: rgba(48,48,52,.34);
  --sky: rgba(48,48,52,.34);
  --watch-paper: rgba(84, 63, 25, .34);
  --watch-copy: #ffd17a;
  --cg-empty: rgba(118,118,128,.24);
  --border: 1px solid rgba(255,255,255,.13);
  --shadow: 0 28px 70px rgba(0,0,0,.34), 0 2px 8px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.1);
  --shadow-sm: 0 10px 30px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.08);
  color-scheme: dark;
}

html[data-design="aurora"] body {
  background:
    radial-gradient(circle at 16% 5%, rgba(119, 168, 255, .5), transparent 35rem),
    radial-gradient(circle at 92% 22%, rgba(214, 180, 255, .46), transparent 31rem),
    radial-gradient(circle at 46% 96%, rgba(153, 229, 214, .36), transparent 34rem),
    linear-gradient(145deg, #f4f7fb, #e9eef6 52%, #f6f3fa);
  background-attachment: fixed;
}

html[data-design="aurora"][data-theme="dark"] body {
  background:
    radial-gradient(circle at 12% 4%, rgba(30, 87, 170, .38), transparent 34rem),
    radial-gradient(circle at 90% 18%, rgba(102, 45, 148, .3), transparent 31rem),
    radial-gradient(circle at 50% 100%, rgba(24, 108, 88, .2), transparent 36rem), #08090c;
}

html[data-design="aurora"] .masthead,
html[data-design="aurora"] .hero-card,
html[data-design="aurora"] .stat-tile,
html[data-design="aurora"] .graph-card,
html[data-design="aurora"] .log-bubble,
html[data-design="aurora"] .watch-card,
html[data-design="aurora"] .design-menu,
html[data-design="aurora"] .language-menu {
  background: var(--card);
  border: var(--border);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
}

html[data-design="aurora"] .masthead {
  border-radius: 24px;
  padding: 12px 16px;
}

html[data-design="aurora"] .masthead-avatar {
  border: 2px solid rgba(255,255,255,.72);
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(30,40,60,.14);
  transform: none;
}

html[data-design="aurora"] .masthead-title { font-weight: 720; letter-spacing: -.035em; }
html[data-design="aurora"] .live-status-pill { border-radius: 999px; background: rgba(52,199,89,.12); color: #258d42; }

html[data-design="aurora"] .language-toggle::before,
html[data-design="aurora"] .x-link::before,
html[data-design="aurora"] .theme-toggle::before {
  border: 1px solid rgba(255,255,255,.58);
  background: rgba(255,255,255,.34);
  box-shadow: inset 0 1px rgba(255,255,255,.78), 0 4px 14px rgba(31,45,70,.08);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

html[data-design="aurora"][data-theme="dark"] .language-toggle::before,
html[data-design="aurora"][data-theme="dark"] .x-link::before,
html[data-design="aurora"][data-theme="dark"] .theme-toggle::before {
  border-color: rgba(255,255,255,.12);
  background: rgba(56,56,60,.52);
  box-shadow: inset 0 1px rgba(255,255,255,.1), 0 5px 16px rgba(0,0,0,.22);
}

html[data-design="aurora"] .design-toggle,
html[data-design="aurora"] .subscription-action {
  border: 1px solid rgba(255,255,255,.64);
  border-radius: 999px;
  background: rgba(255,255,255,.42);
  box-shadow: inset 0 1px rgba(255,255,255,.78), 0 5px 18px rgba(35,53,82,.08);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
}

html[data-design="aurora"][data-theme="dark"] .design-toggle,
html[data-design="aurora"][data-theme="dark"] .subscription-action { background: rgba(54,54,58,.52); border-color: rgba(255,255,255,.13); }
html[data-design="aurora"] .push-toggle { background: #007aff; color: #fff; border-color: rgba(255,255,255,.45); }

html[data-design="aurora"] .hero-card {
  background: rgba(255,255,255,.3);
  border-radius: 30px;
  overflow: hidden;
}
html[data-design="aurora"][data-theme="dark"] .hero-card { background: rgba(34,34,38,.36); }
html[data-design="aurora"] .hero-card::after { opacity: 0; }
html[data-design="aurora"] .hero-figure { color: var(--ink); font-weight: 720; text-shadow: none; letter-spacing: -.055em; }
html[data-design="aurora"] .hero-telemetry { border: 1px solid rgba(255,255,255,.5); border-radius: 20px; background: rgba(255,255,255,.18); }
html[data-design="aurora"][data-theme="dark"] .hero-telemetry { border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.045); }

html[data-design="aurora"] .watch-card { border-radius: 22px; background: rgba(255,246,218,.36); }
html[data-design="aurora"][data-theme="dark"] .watch-card { background: rgba(91,67,25,.3); }
html[data-design="aurora"] .stat-tile { border-radius: 22px; transform: none; background: rgba(255,255,255,.27); }
html[data-design="aurora"][data-theme="dark"] .stat-tile { background: rgba(42,42,46,.34); }
html[data-design="aurora"] .stat-tile:hover { transform: translateY(-2px); }
html[data-design="aurora"] .stat-tile,
html[data-design="aurora"] .stat-tile--sun,
html[data-design="aurora"] .stat-tile--rose,
html[data-design="aurora"] .stat-tile--sky { color: var(--ink); }
html[data-design="aurora"] .stat-tile dt { color: var(--ink-2); opacity: 1; }
html[data-design="aurora"] .stat-tile dd { color: var(--ink); font-weight: 650; letter-spacing: -.035em; }
html[data-design="aurora"] .graph-card { border-radius: 24px; }
html[data-design="aurora"] .cg-cell { border-radius: 5px; }
html[data-design="aurora"] .cg-cell[data-level="1"] { border: 0; box-shadow: inset 0 1px rgba(255,255,255,.35); }
html[data-design="aurora"] .log-bubble { border-radius: 22px; background: rgba(255,255,255,.28); }
html[data-design="aurora"][data-theme="dark"] .log-bubble { background: rgba(38,38,42,.36); }
html[data-design="aurora"] .log-bubble::before { display: none; }
html[data-design="aurora"] .log-avatar { border: 2px solid rgba(255,255,255,.68); box-shadow: 0 5px 16px rgba(30,40,60,.12); }
html[data-design="aurora"] .log-item-time { border: 0; background: rgba(0,122,255,.12); color: #0067d8; box-shadow: none; }
html[data-design="aurora"][data-theme="dark"] .log-item-time { color: #70b7ff; }

/* Cleaner light palette: neutral canvas, solid surfaces and restrained blue accents. */
html[data-design="aurora"] {
  --paper: #f4f6f9;
  --card: rgba(255,255,255,.82);
  --ink: #172033;
  --ink-2: #596579;
  --ink-3: #8993a3;
  --accent: #3478c9;
  --sun: #3478c9;
  --watch-paper: #fffaf0;
  --watch-copy: #74551c;
  --cg-empty: #e5eaf0;
  --cg-fill: #36ad71;
  --cg-banked: #e8a33b;
  --border: 1px solid rgba(119,133,155,.2);
  --shadow: 0 18px 48px rgba(31,48,73,.09), 0 2px 8px rgba(31,48,73,.04);
  --shadow-sm: 0 8px 24px rgba(31,48,73,.07);
}
html[data-design="aurora"]:not([data-theme="dark"]) body {
  background:
    radial-gradient(circle at 9% 2%, rgba(113,164,222,.13), transparent 32rem),
    radial-gradient(circle at 92% 12%, rgba(159,174,210,.1), transparent 28rem),
    linear-gradient(180deg, #f7f9fc 0%, #f2f5f8 54%, #f7f8fa 100%);
}
html[data-design="aurora"]:not([data-theme="dark"]) .masthead,
html[data-design="aurora"]:not([data-theme="dark"]) .hero-card,
html[data-design="aurora"]:not([data-theme="dark"]) .stat-tile,
html[data-design="aurora"]:not([data-theme="dark"]) .graph-card,
html[data-design="aurora"]:not([data-theme="dark"]) .log-bubble,
html[data-design="aurora"]:not([data-theme="dark"]) .watch-card {
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
html[data-design="aurora"]:not([data-theme="dark"]) .masthead { background: rgba(255,255,255,.78); }
html[data-design="aurora"]:not([data-theme="dark"]) .watch-card { background: rgba(255,250,240,.88); }
html[data-design="aurora"]:not([data-theme="dark"]) .hero-card { background: rgba(255,255,255,.76); }
html[data-design="aurora"]:not([data-theme="dark"]) .stat-tile,
html[data-design="aurora"]:not([data-theme="dark"]) .graph-card,
html[data-design="aurora"]:not([data-theme="dark"]) .log-bubble { background: rgba(255,255,255,.72); }
html[data-design="aurora"]:not([data-theme="dark"]) .hero-figure {
  display: inline-block;
  padding: 5px 15px 8px;
  border: 1px solid #d6e3f2;
  border-radius: 14px;
  background: #eaf2fb;
  color: #224f7e;
  font-size: clamp(46px, 5.4vw, 70px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.055em;
  box-shadow: inset 0 1px rgba(255,255,255,.9);
}
html[data-design="aurora"]:not([data-theme="dark"]) .hero-telemetry {
  border-color: #dce4ed;
  background: #f8fafc;
  box-shadow: 0 8px 24px rgba(31,48,73,.06);
}
/* Multi-platform hub — mirrors the mini program's persistent platform context. */
[hidden]{display:none!important}
html[data-design="aurora"] .page{max-width:1180px}
.masthead-platform-mark{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;border-radius:50%;background:var(--mark-soft);color:var(--mark-color);font:900 1.15rem/1 var(--font-display);box-shadow:0 5px 14px color-mix(in srgb,var(--mark-color) 20%,transparent);border:2px solid color-mix(in srgb,var(--mark-color) 28%,white)}
.masthead-platform-mark[hidden]{display:none!important}
.header-platform-switch{position:relative;display:flex;align-items:center;gap:5px;height:40px;padding:0 11px 0 7px;border:1px solid rgba(255,255,255,.8);border-radius:999px;background:rgba(255,255,255,.62);color:var(--ink);font-size:.75rem;font-weight:800;box-shadow:inset 0 1px rgba(255,255,255,.8);cursor:pointer}.header-platform-switch-mark{display:grid;place-items:center;width:26px;height:26px;border-radius:9px;background:var(--item-soft,#e8f2ff);color:var(--item-color,#087cff);font-weight:900}.header-platform-switch svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.header-platform-switch select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.content-view-tabs{display:flex;align-items:center;gap:26px;width:max-content;margin:1px 0 24px;padding:0 2px;border-bottom:1px solid rgba(72,82,103,.14)}.content-view-tabs button{position:relative;border:0;background:transparent;color:var(--muted,#687081);font:inherit;font-size:.78rem;font-weight:750;letter-spacing:.01em;padding:10px 0 11px;cursor:pointer;transition:color .18s ease}.content-view-tabs button:hover{color:var(--ink)}.content-view-tabs button::after{content:"";position:absolute;right:0;bottom:-1px;left:0;height:2px;border-radius:999px;background:var(--platform-accent,#087cff);opacity:0;transform:scaleX(.35);transition:opacity .18s ease,transform .18s ease}.content-view-tabs button[aria-pressed="true"]{color:var(--ink)}.content-view-tabs button[aria-pressed="true"]::after{opacity:1;transform:scaleX(1)}
.platform-hub{display:block;margin:0 0 28px;border:1px solid var(--line,#e4e7ec);border-radius:22px;background:color-mix(in srgb,var(--platform-accent,#087cff) 4%,var(--paper,#fff));box-shadow:0 12px 32px rgba(20,30,55,.05);overflow:hidden}.platform-current{display:flex;align-items:center;gap:14px;padding:18px 20px}.platform-current-mark{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:13px;background:var(--item-soft,#e8f2ff);color:var(--item-color,#087cff);font-weight:900;font-size:1.05rem}.platform-hub-copy{min-width:0;flex:1}
.platform-hub-copy{display:grid;gap:2px}.platform-hub-copy strong{font-size:1.25rem}.platform-hub-copy>span:last-child{color:var(--muted,#687081);font-size:.78rem;line-height:1.35}.platform-hub-eyebrow{color:var(--platform-accent,#087cff);font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.platform-change{position:relative;display:flex;align-items:center;gap:6px;min-height:38px;padding:0 15px;border:1px solid color-mix(in srgb,var(--platform-accent,#087cff) 18%,transparent);border-radius:999px;background:color-mix(in srgb,var(--platform-accent,#087cff) 10%,white);color:var(--platform-accent,#087cff);font-size:.78rem;font-weight:800;cursor:pointer}.platform-change select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.platform-hub-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 20px;border-top:1px solid rgba(118,118,128,.11);color:var(--muted,#687081);font-size:.76rem}.platform-hub-meta>span{display:flex;align-items:center;gap:7px}.platform-hub-meta i{width:7px;height:7px;border-radius:50%;background:#21bd70;box-shadow:0 0 0 3px rgba(33,189,112,.12)}
.platform-views{display:flex;padding:3px;border-radius:12px;background:rgba(120,130,150,.1)}.platform-views button{border:0;border-radius:9px;background:transparent;color:var(--muted,#687081);font:inherit;font-size:.75rem;font-weight:800;padding:8px 10px;cursor:pointer}.platform-views button[aria-pressed="true"]{background:var(--paper,#fff);color:var(--platform-accent,#087cff);box-shadow:0 2px 8px rgba(20,30,55,.1)}
.platform-activity-feed{grid-column:1/-1}.activity-list{display:grid;gap:12px}.activity-card,.activity-empty{padding:18px;border:1px solid var(--line,#e4e7ec);border-radius:16px;background:var(--paper,#fff)}.activity-card>div{display:flex;gap:9px;align-items:center}.activity-card p{margin:12px 0 7px;line-height:1.6}.activity-card small{display:block;color:var(--muted,#687081);margin-bottom:11px}.activity-card a{color:var(--platform-accent,#087cff);font-weight:800;text-decoration:none}.signal-status{border-radius:999px;background:color-mix(in srgb,var(--platform-accent,#087cff) 12%,transparent);color:var(--platform-accent,#087cff);padding:3px 8px;font-size:.7rem;font-weight:800}
.log-signal-status{border-radius:999px;padding:2px 8px;font:800 .68rem/1.5 var(--font-body);background:color-mix(in srgb,var(--platform-accent,#087cff) 12%,transparent);color:var(--platform-accent,#087cff)}.log-signal-status--possible{background:#fff3d6;color:#996100}.log-signal-status--active{background:#e5f7ee;color:#08794e}
@media(max-width:720px){.platform-current{padding:15px 14px;gap:10px}.platform-current-mark{width:38px;height:38px;flex-basis:38px}.platform-change{padding:0 11px}.platform-change [data-role="platform-change-label"]{display:none}.platform-hub-meta{padding:10px 14px;align-items:flex-start;flex-direction:column}.platform-hub-meta>span{max-width:100%}.platform-views{width:max-content}}
@media(max-width:560px){.header-platform-switch{width:38px;padding:0;justify-content:center}.header-platform-switch>[data-role="platform-change-label"],.header-platform-switch>svg{display:none}.content-view-tabs{margin-top:10px}}