/* ============================================================
   RBL Demo 演示双主题（浅色 / 深色）· 跟随网站整体深浅色
   ---------------------------------------------------------------
   加载位置：每个独立 demo 的 <head> 末尾（在 demo 自带 <style> 之后），
   通过 :root[data-theme='light'] 的高优先级覆盖 demo 自带 :root 的暗色变量。
   主题来源：由 demo 内的桥接脚本读取父窗口（官网）的 data-theme 并镜像到自身；
   父窗口切浅/深，demo 自动同步，无需逐个 demo 改逻辑。
   与 rbl-2.0/src/styles/tokens.css 浅色令牌保持一致（日式禅意）。
   深色态沿用 demo 自带 :root（原生暗色），本文件只定义浅色覆盖。
   例外：文件末尾「14. 统一环绕版式」与主题无关，借助本文件在 <head>
   末尾加载的顺序优势，统一各 demo 右侧环绕区的版式结构。
   ============================================================ */

/* ============================================================
   1. 浅色令牌（覆盖 demo 与 skin 中使用的常见变量名）
   ============================================================ */
:root[data-theme='light'] {
  /* —— 表面 —— */
  --bg: #f6f3ec;
  --bg-surface: #fbf9f3;
  --bg-card: rgba(30, 27, 21, 0.05);
  --bg-card-hover: rgba(30, 27, 21, 0.09);
  --glass: rgba(30, 27, 21, 0.03);
  --glass-strong: rgba(30, 27, 21, 0.06);
  --glass-border: rgba(30, 27, 21, 0.10);
  --border: #d9d3c5;
  --border-hover: #b7ad98;

  /* —— 文字 —— */
  --text: #1f1c17;
  --text-muted: #6e6659;
  --text-bright: #15130f;
  --text2: #6e6659;
  --text3: #9b9284;

  /* —— 品牌（与官网 tokens.css 浅色一致） —— */
  --paper: #f6f3ec;
  --paper-raised: #fdfcf8;
  --paper-sunken: #ece6da;
  --ink: #1f1c17;
  --indigo: #4a6178;
  --moss: #6e7e58;
  --moss-deep: #566545;
  --moss-ink: #46562f;
  --moss-soft: rgba(110, 126, 88, 0.14);
  --line: #d9d3c5;
  --muted: #6e6659;

  /* —— 主色 / 强调（浅底上保持可读，克制双色，与官网一致） —— */
  --primary: #5f7a46;
  --primary-dim: rgba(95, 122, 70, 0.14);
  --primary-soft: rgba(95, 122, 70, 0.10);
  --accent: #3f5a73;
  --accent-dim: rgba(63, 90, 115, 0.12);
  --accent-soft: rgba(63, 90, 115, 0.08);
  --accent-color: #3f5a73;

  /* —— esss 等私有表面变量：翻浅（品牌色 --mint/--violet 保留各 demo 原值） —— */
  --bg2: #f5f2eb;
  --bg3: #ece6da;

  /* —— 语义状态色：保留色相、加深到浅底可读（避免统一抹平失去各 demo 特色） —— */
  --red: #c0392b;
  --orange: #c47f1e;
  --blue: #2f6db0;
  --green: #2f8f5f;
  --yellow: #b8860b;
  --cyan: #1f8a9c;
  --pink: #c2456f;

  /* —— 光晕 / 阴影（浅色下更收敛、偏暖） —— */
  --glow-primary: 0 0 16px rgba(110, 126, 88, 0.14);
  --glow-accent: 0 0 16px rgba(74, 97, 120, 0.12);
  --shadow-sm: 0 2px 12px rgba(40, 33, 22, 0.08);
  --shadow-card: 0 8px 30px rgba(40, 33, 22, 0.10);
  --shadow-hover: 0 20px 56px rgba(40, 33, 22, 0.12);
}

/* ============================================================
   2. 全局重置与细节（让硬编码暗色装饰在浅色下不突兀）
   ============================================================ */
:root[data-theme='light'] body::before,
:root[data-theme='light'] body::after,
:root[data-theme='light'] .bg-dots,
:root[data-theme='light'] .bg-noise {
  opacity: 0.25 !important;
}

:root[data-theme='light'] ::-webkit-scrollbar-thumb {
  background: var(--line);
}

:root[data-theme='light'] ::selection {
  background: var(--moss);
  color: #fdfcf8;
}

/* ============================================================
   3. 导航栏（修复硬编码 rgba(10,13,18,...) 深色玻璃）
   ============================================================ */
:root[data-theme='light'] nav,
:root[data-theme='light'] .nav {
  background: rgba(253, 252, 250, 0.88) !important;
  border-bottom-color: var(--border) !important;
  box-shadow: none !important;
}

:root[data-theme='light'] nav.scrolled,
:root[data-theme='light'] .nav.scrolled {
  background: rgba(253, 252, 250, 0.96) !important;
  box-shadow: var(--shadow-sm) !important;
}

:root[data-theme='light'] .nav-brand {
  background: linear-gradient(135deg, var(--text-bright) 30%, var(--moss)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

:root[data-theme='light'] .nav-links a {
  color: var(--text-muted) !important;
}
:root[data-theme='light'] .nav-links a:hover {
  color: var(--text) !important;
}

:root[data-theme='light'] .nav-cta {
  background: var(--moss-soft) !important;
  color: var(--moss-ink) !important;
  border-color: var(--line) !important;
}
:root[data-theme='light'] .nav-cta:hover {
  background: rgba(110, 126, 88, 0.20) !important;
}

/* 取消 skin 给 .nav 加的 64px 下移，保持 demo 自有 nav 贴顶 */
:root[data-theme='light'] .demo-esss-ai-platform .nav,
:root[data-theme='light'] .demo-esss-ai-platform .nav {
  top: 0 !important;
}

/* ============================================================
   4. 通用内容元素（标题、段落、标签、徽章）
   ============================================================ */
:root[data-theme='light'] h1,
:root[data-theme='light'] h2,
:root[data-theme='light'] h3,
:root[data-theme='light'] h4,
:root[data-theme='light'] h5,
:root[data-theme='light'] h6,
:root[data-theme='light'] .section-title,
:root[data-theme='light'] .sec-head h2 {
  color: var(--text-bright) !important;
}

:root[data-theme='light'] p,
:root[data-theme='light'] .section-desc,
:root[data-theme='light'] .hero-desc,
:root[data-theme='light'] .sec-head p,
:root[data-theme='light'] .card p,
:root[data-theme='light'] .feat-card p,
:root[data-theme='light'] .tech-item p,
:root[data-theme='light'] .tech-card p,
:root[data-theme='light'] .footer-brand p,
:root[data-theme='light'] .footer-contact a,
:root[data-theme='light'] footer {
  color: var(--text-muted) !important;
}

:root[data-theme='light'] .hero-badge,
:root[data-theme='light'] .hero-tag,
:root[data-theme='light'] .badge {
  background: var(--primary-soft) !important;
  border-color: var(--primary-dim) !important;
  color: var(--moss-ink) !important;
}

:root[data-theme='light'] .gradient-text,
:root[data-theme='light'] .grad,
:root[data-theme='light'] .stat-cell .num,
:root[data-theme='light'] .score-num {
  background: linear-gradient(135deg, var(--moss), var(--indigo)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ============================================================
   5. 卡片、模块、统计栏、架构图（浅色表面 + 明显边框）
   ============================================================ */
:root[data-theme='light'] .card,
:root[data-theme='light'] .stat-card,
:root[data-theme='light'] .feat-card,
:root[data-theme='light'] .mod-card,
:root[data-theme='light'] .tech-card,
:root[data-theme='light'] .tech-item,
:root[data-theme='light'] .metric-card,
:root[data-theme='light'] .dim-row,
:root[data-theme='light'] .q-option,
:root[data-theme='light'] .demo-screen-btn,
:root[data-theme='light'] .demo-section,
:root[data-theme='light'] .arch-diagram,
:root[data-theme='light'] .demo-table-wrap,
:root[data-theme='light'] .gauge-wrap,
:root[data-theme='light'] .alarm-panel,
:root[data-theme='light'] .cta-box {
  background: var(--paper-raised) !important;
  border-color: var(--border) !important;
}

:root[data-theme='light'] .card:hover,
:root[data-theme='light'] .feat-card:hover,
:root[data-theme='light'] .mod-card:hover,
:root[data-theme='light'] .tech-card:hover,
:root[data-theme='light'] .tech-item:hover,
:root[data-theme='light'] .metric-card:hover,
:root[data-theme='light'] .demo-screen-btn:hover,
:root[data-theme='light'] .q-option:hover {
  border-color: var(--border-hover) !important;
  box-shadow: var(--shadow-card) !important;
}

:root[data-theme='light'] .card h3,
:root[data-theme='light'] .feat-card h3,
:root[data-theme='light'] .mod-card h3,
:root[data-theme='light'] .tech-card h4,
:root[data-theme='light'] .tech-item h4,
:root[data-theme='light'] .demo-header h3,
:root[data-theme='light'] .cta-box h2,
:root[data-theme='light'] .demo-controls h3,
:root[data-theme='light'] .result-header h3,
:root[data-theme='light'] .questionnaire-header h3 {
  color: var(--text-bright) !important;
}

:root[data-theme='light'] .card-icon,
:root[data-theme='light'] .feat-icon,
:root[data-theme='light'] .mod-icon {
  background: linear-gradient(135deg, rgba(110,126,88,0.10), rgba(74,97,120,0.08)) !important;
  border-color: rgba(110,126,88,0.12) !important;
}

:root[data-theme='light'] .card-tag,
:root[data-theme='light'] .mod-tag {
  background: rgba(110,126,88,0.06) !important;
  color: var(--moss-ink) !important;
  border-color: rgba(110,126,88,0.12) !important;
}

:root[data-theme='light'] .stats-bar {
  background: var(--border) !important;
  border-color: var(--border) !important;
}

:root[data-theme='light'] .stat-card .val,
:root[data-theme='light'] .stat-cell .num,
:root[data-theme='light'] .hero-stat .num {
  color: var(--text-bright) !important;
}

/* ============================================================
   6. 表格、表单、输入框
   ============================================================ */
:root[data-theme='light'] .demo-table th {
  background: var(--paper-sunken) !important;
  color: var(--text-muted) !important;
  border-bottom-color: var(--border) !important;
}

:root[data-theme='light'] .demo-table td {
  border-bottom-color: var(--border) !important;
  color: var(--text) !important;
}

:root[data-theme='light'] .demo-table tr:hover td {
  background: rgba(110,126,88,0.04) !important;
}

:root[data-theme='light'] .qa-input,
:root[data-theme='light'] .q-option,
:root[data-theme='light'] .q-btn {
  background: var(--paper-raised) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

:root[data-theme='light'] .qa-input::placeholder {
  color: var(--text3) !important;
}

/* ============================================================
   7. 按钮（保证深浅底都有可读性）
   ============================================================ */
:root[data-theme='light'] .btn,
:root[data-theme='light'] .btn-primary,
:root[data-theme='light'] .btn-cancel,
:root[data-theme='light'] .demo-auto-btn,
:root[data-theme='light'] .q-btn.primary {
  color: #15231a !important;
}

:root[data-theme='light'] .btn-primary,
:root[data-theme='light'] .demo-auto-btn,
:root[data-theme='light'] .q-btn.primary {
  /* 不覆盖背景（保留各 demo 品牌渐变），仅加细描边让亮按钮在浅底有清晰边界 */
  border: 1px solid rgba(31, 28, 23, 0.12) !important;
}

:root[data-theme='light'] .btn-ghost,
:root[data-theme='light'] .btn-outline,
:root[data-theme='light'] .q-btn:not(.primary) {
  background: transparent !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

:root[data-theme='light'] .btn-ghost:hover,
:root[data-theme='light'] .btn-outline:hover,
:root[data-theme='light'] .q-btn:not(.primary):hover {
  border-color: var(--moss) !important;
  color: var(--moss-ink) !important;
}

/* ============================================================
   8. 架构图与流程块
   ============================================================ */
:root[data-theme='light'] .arch-block {
  background: var(--paper-raised) !important;
}

:root[data-theme='light'] .arch-fe {
  color: var(--indigo) !important;
  border-color: rgba(74,97,120,0.25) !important;
  background: rgba(74,97,120,0.06) !important;
}

:root[data-theme='light'] .arch-be,
:root[data-theme='light'] .arch-svc {
  color: var(--moss-ink) !important;
  border-color: rgba(110,126,88,0.25) !important;
  background: rgba(110,126,88,0.06) !important;
}

:root[data-theme='light'] .arch-db,
:root[data-theme='light'] .arch-ocr {
  color: var(--indigo) !important;
  border-color: rgba(74,97,120,0.25) !important;
  background: rgba(74,97,120,0.06) !important;
}

:root[data-theme='light'] .arch-infra {
  color: var(--orange) !important;
  border-color: rgba(176,120,47,0.25) !important;
  background: rgba(176,120,47,0.06) !important;
}

:root[data-theme='light'] .arch-out {
  color: var(--pink) !important;
  border-color: rgba(168,95,120,0.25) !important;
  background: rgba(168,95,120,0.06) !important;
}

:root[data-theme='light'] .arch-arrow,
:root[data-theme='light'] .arch-connector {
  color: var(--text3) !important;
}

:root[data-theme='light'] .arch-layer-label {
  color: var(--text-muted) !important;
}

/* ============================================================
   9. Alarm / 状态点 / Gauge
   ============================================================ */
:root[data-theme='light'] .alarm-critical {
  background: rgba(185,78,78,0.06) !important;
  border-color: rgba(185,78,78,0.18) !important;
}

:root[data-theme='light'] .alarm-warning {
  background: rgba(176,143,42,0.06) !important;
  border-color: rgba(176,143,42,0.18) !important;
}

:root[data-theme='light'] .alarm-info {
  background: rgba(74,97,120,0.06) !important;
  border-color: rgba(74,97,120,0.18) !important;
}

:root[data-theme='light'] .alarm-time {
  color: var(--text3) !important;
}

:root[data-theme='light'] .status-online {
  background: var(--green) !important;
  box-shadow: 0 0 6px rgba(74,143,106,0.5) !important;
}

:root[data-theme='light'] .status-warning {
  background: var(--yellow) !important;
  box-shadow: 0 0 6px rgba(176,143,42,0.5) !important;
}

:root[data-theme='light'] .status-offline {
  background: var(--red) !important;
  box-shadow: 0 0 6px rgba(185,78,78,0.5) !important;
}

:root[data-theme='light'] .gauge-bg {
  stroke: var(--paper-sunken) !important;
}

:root[data-theme='light'] .gauge-text,
:root[data-theme='light'] .gauge-value {
  fill: var(--text-bright) !important;
  color: var(--text-bright) !important;
}

:root[data-theme='light'] .gauge-unit {
  fill: var(--text-muted) !important;
}

/* ============================================================
   10. 瑞乐伴 / 瑞美 / 暖阳专有：手机模型
   ---------------------------------------------------------------
   注：原本此处还有 .orbit-icon:nth-child(n) 彩色描边与 .center-logo
   绿色渐变方块两组浅色覆盖，那是旧「方角缩写标识」版式的产物。
   环绕区已统一为「8 个环形标签 + 圆心中文名」（见文件末尾第 14 节），
   故这两组规则已删除，避免与新版式冲突。
   ============================================================ */

/* 手机外框改浅，但内部 UI 仍保持暗色对比？
   这里整体翻浅，让 mockup 与浅色页面更协调 */
:root[data-theme='light'] .demo-leban .phone-frame,
:root[data-theme='light'] .demo-medbeauty-crm .phone-frame,
:root[data-theme='light'] .demo-sunnycare .phone-mockup {
  background: #e8e4db !important;
  border-color: #d0c9ba !important;
  box-shadow: 0 20px 60px rgba(40,33,22,0.12) !important;
}

:root[data-theme='light'] .demo-leban .phone-notch,
:root[data-theme='light'] .demo-medbeauty-crm .phone-notch,
:root[data-theme='light'] .demo-sunnycare .phone-notch,
:root[data-theme='light'] .demo-leban .phone-notch::after,
:root[data-theme='light'] .demo-medbeauty-crm .phone-notch::after,
:root[data-theme='light'] .demo-sunnycare .phone-notch::after {
  background: #e8e4db !important;
  border-bottom-color: #d0c9ba !important;
}

:root[data-theme='light'] .demo-leban .phone-screen,
:root[data-theme='light'] .demo-medbeauty-crm .phone-screen,
:root[data-theme='light'] .demo-sunnycare .phone-screen {
  background: linear-gradient(180deg, #f5f2eb 0%, #ece6da 100%) !important;
}

/* sunnycare 交互工具栏 / 标签页 暗底翻浅 */
:root[data-theme='light'] .demo-sunnycare .demo-toolbar,
:root[data-theme='light'] .demo-sunnycare .demo-tabs {
  background: var(--paper-sunken) !important;
}

/* medbeauty 统计格硬编码暗底翻浅 */
:root[data-theme='light'] .demo-medbeauty-crm .stat-cell {
  background: var(--paper-raised) !important;
  border: 1px solid var(--border) !important;
}

/* leban 手机状态栏 / 轨道底等暗底兜底翻浅（防遗漏硬编码） */
:root[data-theme='light'] .demo-leban .phone-status-bar,
:root[data-theme='light'] .demo-leban .orbit-bg,
:root[data-theme='light'] .demo-medbeauty-crm .phone-status-bar {
  background: var(--paper-sunken) !important;
}

:root[data-theme='light'] .demo-leban .health-status-text,
:root[data-theme='light'] .demo-medbeauty-crm .health-status-text {
  color: var(--moss-ink) !important;
}

:root[data-theme='light'] .demo-leban .radar-grid,
:root[data-theme='light'] .demo-medbeauty-crm .radar-grid,
:root[data-theme='light'] .demo-leban .radar-axis,
:root[data-theme='light'] .demo-medbeauty-crm .radar-axis {
  stroke: var(--border) !important;
}

:root[data-theme='light'] .demo-leban .radar-label,
:root[data-theme='light'] .demo-medbeauty-crm .radar-label {
  fill: var(--text-muted) !important;
}

/* ============================================================
   11. 智能环控 / esss-ai-platform 专有
   ============================================================ */
:root[data-theme='light'] .demo-esss-ai-platform .stat-card:hover {
  background: var(--paper-sunken) !important;
}

:root[data-theme='light'] .demo-esss-ai-platform .card:hover::before,
:root[data-theme='light'] .demo-esss-ai-platform .card::before {
  background: linear-gradient(90deg, var(--moss), var(--indigo)) !important;
}

:root[data-theme='light'] .demo-esss-ai-platform .demo-status,
:root[data-theme='light'] .demo-esss-ai-platform .section-label,
:root[data-theme='light'] .demo-esss-ai-platform .section-label::before,
:root[data-theme='light'] .demo-esss-ai-platform .alarm-icon {
  color: var(--moss-ink) !important;
}

:root[data-theme='light'] .demo-esss-ai-platform .section-label,
:root[data-theme='light'] .demo-esss-ai-platform .hero-badge,
:root[data-theme='light'] .demo-esss-ai-platform .hero-badge .pulse,
:root[data-theme='light'] .demo-esss-ai-platform .demo-status .live-dot {
  background: var(--moss) !important;
}

:root[data-theme='light'] .demo-esss-ai-platform .alarm-item {
  color: var(--text) !important;
}

:root[data-theme='light'] .demo-esss-ai-platform .arch-block:hover {
  box-shadow: var(--shadow-sm) !important;
}

:root[data-theme='light'] .demo-esss-ai-platform .cta-box {
  background: linear-gradient(135deg, rgba(110,126,88,0.06), rgba(74,97,120,0.05)) !important;
}

:root[data-theme='light'] .demo-esss-ai-platform .btn-outline {
  color: var(--text) !important;
}

:root[data-theme='light'] .demo-esss-ai-platform .btn-outline:hover {
  color: var(--indigo) !important;
}

/* ============================================================
   12. 暖阳照护 / SunnyCare 与同类模板（卡片/后台示意图）
   ============================================================ */
:root[data-theme='light'] .demo-sunnycare .admin-panel,
:root[data-theme='light'] .demo-sunnycare .mini-panel,
:root[data-theme='light'] .demo-sunnycare .dashboard-card,
:root[data-theme='light'] .demo-sunnycare .module-card,
:root[data-theme='light'] .demo-sunnycare .feature-card {
  background: var(--paper-raised) !important;
  border-color: var(--border) !important;
}

:root[data-theme='light'] .demo-sunnycare .admin-header,
:root[data-theme='light'] .demo-sunnycare .panel-header {
  background: var(--paper-sunken) !important;
  border-bottom-color: var(--border) !important;
}

/* ============================================================
   13. Footer / 联系条
   ============================================================ */
:root[data-theme='light'] .footer,
:root[data-theme='light'] footer {
  border-top-color: var(--border) !important;
  color: var(--text-muted) !important;
}

:root[data-theme='light'] .footer-contact a:hover,
:root[data-theme='light'] footer a:hover {
  color: var(--moss-ink) !important;
}

:root[data-theme='light'] .footer-bottom {
  border-top-color: var(--border) !important;
  color: var(--text3) !important;
}

/* ============================================================
   14. 统一环绕版式（与主题无关 · 参照瑞域 / 暖阳照护）
   ---------------------------------------------------------------
   为什么放在本文件：本文件在每个 demo 的 <head> 末尾加载，天然晚于
   demo 自带 <style>，可在同优先级下稳定覆盖各 demo 的旧
   hero-visual / orbit / center-logo 规则，无需逐个改 CSS。
   统一目标：右侧环绕区 = 8 个环形标签（92px 圆）+ 圆心醒目标识
            （本站中文名 + 英文名）。
   标记要求：<div class="hero-visual"><div class="orbit-ring">
             <div class="orbit-icon" style="--i:0">…</div> ×8 </div>
             <div class="center-logo"><b>中文名</b><small>EN</small></div></div>
   ============================================================ */
.hero-visual {
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  height: 420px;
}
.hero-visual .orbit-ring {
  position: relative !important;
  width: 340px !important;
  height: 340px !important;
  border: 1px solid var(--line, var(--border)) !important;
  border-radius: 50% !important;
  animation: spin 40s linear infinite !important;
}
.hero-visual .orbit-ring-inner { display: none !important; }
/* 个别 demo（如智能环控平台 / 瑞助手）原本没有 spin 关键帧，这里补齐保证环绕旋转一致 */
@keyframes spin { to { transform: rotate(360deg); } }
.hero-visual .orbit-icon,
.hero-visual .orbit-icon-inner {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: 92px !important;
  height: 92px !important;
  margin: -46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
  line-height: 1.2;
  font-size: .74rem !important;
  font-weight: 400 !important;
  color: var(--ink, var(--text)) !important;
  background: var(--glass-strong, rgba(255, 255, 255, 0.06)) !important;
  border: 1px solid var(--line, var(--border)) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  animation: none !important;
  transform: rotate(calc(var(--i) * 45deg)) translate(150px) rotate(calc(var(--i) * -45deg)) !important;
}
.hero-visual .orbit-icon small,
.hero-visual .orbit-icon span,
.hero-visual .orbit-icon br { display: none !important; }

.hero-visual .center-logo {
  display: block !important;   /* 覆盖旧版式的 flex，保证中文名与英文上下堆叠 */
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--moss-ink, var(--primary)) !important;
  text-align: center;
  z-index: 3;
}
.hero-visual .center-logo b {
  display: block;
  font-family: 'Noto Serif SC', 'Shippori Mincho', serif !important;
  font-size: 1.7rem !important;
  font-weight: 700 !important;
  line-height: 1.25;
  color: var(--moss-ink, var(--primary)) !important;
}
.hero-visual .center-logo small {
  display: block;
  margin-top: 4px;
  font-size: .62rem !important;
  letter-spacing: .22em !important;
  color: var(--muted, var(--text-muted)) !important;
}
@media (max-width: 900px) {
  .hero-visual { height: 340px; }
  .hero-visual .orbit-ring { width: 280px !important; height: 280px !important; }
  .hero-visual .orbit-icon,
  .hero-visual .orbit-icon-inner {
    width: 76px !important;
    height: 76px !important;
    margin: -38px !important;
    font-size: .68rem !important;
    transform: rotate(calc(var(--i) * 45deg)) translate(124px) rotate(calc(var(--i) * -45deg)) !important;
  }
  .hero-visual .center-logo b { font-size: 1.4rem !important; }
}

/* ============================================================
   15. 瑞助手 / ngs-sop 专有（该页大量硬编码鼠尾草绿，浅色下隐形）
   原则：手机演示屏（.phone-frame 内部）是设备模型，保留深色不加覆盖。
   ============================================================ */

/* —— 标题：浅鼠尾草渐变字在米色底上几乎隐形 → 深苔绿渐变 —— */
:root[data-theme='light'] .demo-ngs-sop .hero h1,
:root[data-theme='light'] .demo-ngs-sop section h2 {
  background: linear-gradient(135deg, var(--moss-deep), var(--indigo)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* —— 正文 / 说明文字 —— */
:root[data-theme='light'] .demo-ngs-sop .hero p,
:root[data-theme='light'] .demo-ngs-sop .section-desc,
:root[data-theme='light'] .demo-ngs-sop .module-card p,
:root[data-theme='light'] .demo-ngs-sop .arch-node p,
:root[data-theme='light'] .demo-ngs-sop .tech-item p {
  color: var(--text-muted) !important;
}

/* —— Hero 统计卡 —— */
:root[data-theme='light'] .demo-ngs-sop .stat-card {
  background: var(--paper-raised) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}
:root[data-theme='light'] .demo-ngs-sop .stat-card:hover {
  background: #fff !important;
  border-color: var(--moss) !important;
  box-shadow: var(--shadow-card) !important;
}
:root[data-theme='light'] .demo-ngs-sop .stat-number {
  color: var(--moss-ink) !important;
}
:root[data-theme='light'] .demo-ngs-sop .stat-label {
  color: var(--text-muted) !important;
}

/* —— 统计横带（老板截图点名区） —— */
:root[data-theme='light'] .demo-ngs-sop .stats-bar {
  background: var(--paper-sunken) !important;
  border-color: var(--border) !important;
}
:root[data-theme='light'] .demo-ngs-sop .stats-bar-item .number {
  color: var(--moss-ink) !important;
}
:root[data-theme='light'] .demo-ngs-sop .stats-bar-item .label {
  color: var(--text-muted) !important;
}

/* —— 模块卡片 —— */
:root[data-theme='light'] .demo-ngs-sop .module-card {
  background: var(--paper-raised) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}
:root[data-theme='light'] .demo-ngs-sop .module-card:hover {
  background: #fff !important;
  border-color: var(--moss) !important;
  box-shadow: var(--shadow-card) !important;
}
:root[data-theme='light'] .demo-ngs-sop .module-card::before {
  background: linear-gradient(90deg, var(--moss), var(--indigo)) !important;
}
:root[data-theme='light'] .demo-ngs-sop .module-card h3 {
  color: var(--moss-ink) !important;
}
:root[data-theme='light'] .demo-ngs-sop .module-feature {
  color: var(--ink) !important;
}
:root[data-theme='light'] .demo-ngs-sop .module-feature::before {
  color: var(--moss-ink) !important;
}

/* —— 架构流程 —— */
:root[data-theme='light'] .demo-ngs-sop .arch-node {
  background: var(--paper-raised) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}
:root[data-theme='light'] .demo-ngs-sop .arch-node:hover {
  background: #fff !important;
  border-color: var(--moss) !important;
}
:root[data-theme='light'] .demo-ngs-sop .arch-node h4 {
  color: var(--moss-ink) !important;
}
:root[data-theme='light'] .demo-ngs-sop .arch-arrow {
  color: var(--indigo) !important;
}

/* —— 技术亮点 —— */
:root[data-theme='light'] .demo-ngs-sop .tech-item {
  background: var(--paper-raised) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}
:root[data-theme='light'] .demo-ngs-sop .tech-item:hover {
  background: #fff !important;
  border-color: var(--indigo) !important;
}
:root[data-theme='light'] .demo-ngs-sop .tech-item h4 {
  color: var(--indigo) !important;
}

/* —— CTA 区与按钮 —— */
:root[data-theme='light'] .demo-ngs-sop .cta-section {
  background: var(--moss-soft) !important;
}
:root[data-theme='light'] .demo-ngs-sop .cta-btn {
  background: linear-gradient(135deg, var(--moss), var(--moss-deep)) !important;
  color: #fdfcf8 !important;
  box-shadow: var(--shadow-card) !important;
}

/* —— 页脚：原为深色底，浅色下翻纸色（否则第 13 节的深字会写进深底） —— */
:root[data-theme='light'] .demo-ngs-sop footer {
  background: var(--paper-raised) !important;
  border-top-color: var(--border) !important;
}
:root[data-theme='light'] .demo-ngs-sop .contact-item,
:root[data-theme='light'] .demo-ngs-sop .footer-text {
  color: var(--text-muted) !important;
}
:root[data-theme='light'] .demo-ngs-sop .contact-item strong {
  color: var(--moss-ink) !important;
}

/* —— 工作条（static 后仍残留的深色玻璃底） —— */
:root[data-theme='light'] .demo-ngs-sop nav:not(.rbl-demo-nav) {
  background: var(--paper-raised) !important;
  border-bottom-color: var(--border) !important;
}
:root[data-theme='light'] .demo-ngs-sop nav:not(.rbl-demo-nav) a {
  color: var(--ink) !important;
}
:root[data-theme='light'] .demo-ngs-sop .logo {
  background: none !important;
  -webkit-text-fill-color: var(--moss-ink) !important;
  color: var(--moss-ink) !important;
}

/* —— 深色玻璃统计格（瑞大师 / 瑞佰仑首页四格带，浅色下会成黑洞） —— */
:root[data-theme='light'] .demo-esss-ai-labmon .stat-cell,
:root[data-theme='light'] .demo-ruibailun .stat-cell {
  background: var(--paper-raised) !important;
  backdrop-filter: none !important;
  border: 1px solid var(--border);
}
:root[data-theme='light'] .demo-esss-ai-labmon .stat-cell .num,
:root[data-theme='light'] .demo-ruibailun .stat-cell .num {
  background: linear-gradient(135deg, var(--moss-deep), var(--indigo)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
:root[data-theme='light'] .demo-esss-ai-labmon .stat-cell .label,
:root[data-theme='light'] .demo-ruibailun .stat-cell .label {
  color: var(--text-muted) !important;
}
