/* Site style presets. Kept separate from ops_theme so visual style and light/dark stay independent. */
html[data-ops-style="classic"] {
  --ops-page: #f1f5f9;
  --ops-surface: rgba(255, 255, 255, 0.82);
  --ops-surface-muted: #e8edf4;
  --ops-text: #1e293b;
  --ops-muted: #64748b;
  --ops-border: rgba(15, 23, 42, 0.12);
  --ops-accent: #4f46e5;
  --ops-accent-contrast: #ffffff;
  --ops-radius: 1rem;
  --ops-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
  --ops-font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ops-font-heading: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ops-blur: 12px;
}

html.dark[data-ops-style="classic"] {
  --ops-page: #090a0f;
  --ops-surface: rgba(18, 20, 29, 0.85);
  --ops-surface-muted: #181a23;
  --ops-text: #e2e8f0;
  --ops-muted: #a1a1aa;
  --ops-border: rgba(255, 255, 255, 0.08);
  --ops-accent: #818cf8;
  --ops-accent-contrast: #10111a;
  --ops-radius: 1rem;
  --ops-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

html[data-ops-style="paper"] {
  --ops-page: #f1ede4;
  --ops-surface: #faf8f2;
  --ops-surface-muted: #e7e0d4;
  --ops-text: #332f28;
  --ops-muted: #766f63;
  --ops-border: #d5ccbd;
  --ops-accent: #49657f;
  --ops-accent-contrast: #ffffff;
  --ops-radius: 0.45rem;
  --ops-shadow: 0 7px 20px rgba(64, 53, 37, 0.08);
  --ops-font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ops-font-heading: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --ops-blur: 0px;
}

html.dark[data-ops-style="paper"] {
  --ops-page: #272725;
  --ops-surface: #31312e;
  --ops-surface-muted: #3a3935;
  --ops-text: #e7e1d5;
  --ops-muted: #b1aa9c;
  --ops-border: #4b4943;
  --ops-accent: #8ca5bb;
  --ops-accent-contrast: #1e272f;
  --ops-shadow: 0 7px 20px rgba(0, 0, 0, 0.2);
}

html[data-ops-style="forest"] {
  --ops-page: #e6eee7;
  --ops-surface: #f4f8f4;
  --ops-surface-muted: #eaf1eb;
  --ops-text: #24372a;
  --ops-muted: #657869;
  --ops-border: #c9d7ca;
  --ops-accent: #4d795c;
  --ops-accent-contrast: #ffffff;
  --ops-radius: 1.2rem;
  --ops-shadow: 0 14px 34px rgba(31, 68, 43, 0.12);
  --ops-font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ops-font-heading: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ops-blur: 5px;
}

html.dark[data-ops-style="forest"] {
  --ops-page: #142219;
  --ops-surface: #1d2d22;
  --ops-surface-muted: #24372a;
  --ops-text: #e4eee5;
  --ops-muted: #a4b9a8;
  --ops-border: #3b5140;
  --ops-accent: #9aca9f;
  --ops-accent-contrast: #18301f;
  --ops-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
}

html[data-ops-style="ocean"] {
  --ops-page: #eaf4f8;
  --ops-surface: rgba(249, 253, 255, 0.88);
  --ops-surface-muted: #e0eff5;
  --ops-text: #16384b;
  --ops-muted: #526f7d;
  --ops-border: rgba(35, 108, 139, 0.19);
  --ops-accent: #12688e;
  --ops-accent-contrast: #ffffff;
  --ops-radius: 1.1rem;
  --ops-shadow: 0 12px 34px rgba(26, 94, 124, 0.10);
  --ops-font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ops-font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --ops-blur: 14px;
}

html.dark[data-ops-style="ocean"] {
  --ops-page: #081c29;
  --ops-surface: rgba(17, 47, 64, 0.90);
  --ops-surface-muted: #173c50;
  --ops-text: #e5f4f9;
  --ops-muted: #a8c3ce;
  --ops-border: rgba(144, 203, 223, 0.18);
  --ops-accent: #80cce7;
  --ops-accent-contrast: #092b3a;
  --ops-shadow: 0 14px 36px rgba(0, 11, 21, 0.25);
}

html[data-ops-style] body {
  background-color: var(--ops-page);
  color: var(--ops-text);
  font-family: var(--ops-font-body);
}

html[data-ops-style] :is(h1, h2, h3, h4, .today-intro h2, .panel-title) {
  font-family: var(--ops-font-heading);
}

html[data-ops-style] :is(.glass-panel, .today-card, .today-links button, .today-list li, header.sticky) {
  background-color: var(--ops-surface);
  border-color: var(--ops-border);
  border-radius: var(--ops-radius);
  box-shadow: var(--ops-shadow);
  backdrop-filter: blur(var(--ops-blur));
  -webkit-backdrop-filter: blur(var(--ops-blur));
}

html[data-ops-style] .glass-panel:hover,
html[data-ops-style] .today-links button:hover {
  border-color: var(--ops-accent);
}

html[data-ops-style] .tab-btn.active {
  background-color: var(--ops-accent);
  border-color: var(--ops-accent);
  color: var(--ops-accent-contrast);
}

html[data-ops-style] :is(.today-intro h2, .today-card h3, .today-links strong) {
  color: var(--ops-text);
}

html[data-ops-style] :is(.today-muted, .today-footnote, .today-empty, .today-intro p:not(.today-kicker)) {
  color: var(--ops-muted);
}

html[data-ops-style] :is(.today-form input, .today-links button) {
  background-color: var(--ops-surface-muted);
  border-color: var(--ops-border);
  border-radius: var(--ops-radius);
  color: var(--ops-text);
}

html[data-ops-style] :is(.today-form button, .focus-carry) {
  background-color: var(--ops-accent);
  border-color: var(--ops-accent);
  border-radius: var(--ops-radius);
  color: var(--ops-accent-contrast);
}

html[data-ops-style] :is(button, input, select, textarea):focus-visible {
  outline: 2px solid var(--ops-accent);
  outline-offset: 3px;
}

html[data-ops-style] #site-style-status {
  color: var(--ops-muted);
}

html[data-ops-style] #vitaflow-native {
  background-color: var(--ops-page);
  color: var(--ops-text);
  font-family: var(--ops-font-body);
}

html[data-ops-style] #vitaflow-native :is(h1, h2, h3, h4, .vf-title, .detail-title) {
  color: var(--ops-text);
  font-family: var(--ops-font-heading);
}

html[data-ops-style] #vitaflow-native :is(.vf-panel, .panel, .card, .glass-panel, .record-form, .guide-card, .account-card, .calendar-panel, .chart-container, .detail-header) {
  background-color: var(--ops-surface);
  border-color: var(--ops-border);
  border-radius: var(--ops-radius);
  box-shadow: var(--ops-shadow);
}

html[data-ops-style] #vitaflow-native :is(.todo-panel, .stat-card, .theory-card, .user-profile) {
  background-color: var(--ops-surface);
  border-color: var(--ops-border);
  border-radius: var(--ops-radius);
  box-shadow: var(--ops-shadow);
}

html[data-ops-style] #vitaflow-native :is(.tab-btn.active, .cal-day.selected, .account-add-btn.active) {
  background: var(--ops-accent);
  border-color: var(--ops-accent);
  color: var(--ops-accent-contrast);
}

html[data-ops-style] #vitaflow-native .add-btn:not([id^="stop"]):not(.danger):not([onclick*="delete" i]) {
  background: var(--ops-accent) !important;
  border-radius: var(--ops-radius);
  color: var(--ops-accent-contrast) !important;
}

html[data-ops-style] #vitaflow-native :is(.theory-text, .form-label, .user-intro, .guide-list) {
  color: var(--ops-muted);
}

html[data-ops-style] #vitaflow-native .diary-account-reference:not([hidden]) {
  display: block;
  margin-top: 0.65rem;
  color: var(--ops-muted);
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* VitaFlow keeps its standalone palette; the embedded workspace follows the host.
   Only known decorative legacy colors are overridden below. Success, warning,
   danger and user-selected mood colors retain their meaning. */
html[data-ops-style] #vitaflow-native {
  --page-bg: var(--ops-page);
  --surface: var(--ops-surface);
  --surface-muted: var(--ops-surface-muted);
  --text: var(--ops-text);
  --muted: var(--ops-muted);
  --accent: var(--ops-accent);
  --border: var(--ops-border);
  --card-shadow: var(--ops-shadow);
  --vf-danger: #b4233f;
  --vf-danger-contrast: #ffffff;
  color-scheme: light;
}

html.dark[data-ops-style] #vitaflow-native {
  --vf-danger: #fda4af;
  --vf-danger-contrast: #4c0519;
  color-scheme: dark;
}

html[data-ops-style] #vitaflow-native :is(.theory-card, .guide-card, .goal-suggestions, .review-card, .doc-card, .idea-vault-panel, .history-item, .pomodoro-item, .media-card) {
  background: var(--ops-surface);
  border-color: var(--ops-border);
  border-radius: var(--ops-radius);
}

html[data-ops-style] #vitaflow-native :is(.month-btn, .back-btn, .tab-btn, .account-add-btn, .idea-vault-small-btn:not(.danger)) {
  background: var(--ops-surface-muted);
  border-color: var(--ops-border);
  color: var(--ops-text);
}

html[data-ops-style] #vitaflow-native :is(.tag, .trend-badge, .todo-account, .idea-vault-chip, .section-nav a:hover) {
  background: var(--ops-surface-muted);
  border-color: var(--ops-border);
  color: var(--ops-accent);
}

html[data-ops-style] #vitaflow-native :is(.account-title, .panel-title, .current-month, .todo-text, .suggestion-title, .theory-title, .history-date, .media-title, .doc-title, .review-title, .review-section-title, .idea-vault-panel-title, .idea-vault-item-title, .idea-vault-line strong) {
  color: var(--ops-text);
}

html[data-ops-style] #vitaflow-native :is(.weekdays, .stat-label, .suggestion-text, .progress-ring .label, .doc-preview, .doc-meta, .idea-vault-empty, .idea-vault-meta, .idea-vault-line, .pomodoro-day, .pomodoro-time, .todo-text.completed) {
  color: var(--ops-muted);
}

html[data-ops-style] #vitaflow-native :is(.user-name, .detail-title, .progress-ring .number, .account-score, .stat-value) {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--ops-accent);
}

html[data-ops-style] #vitaflow-native :is(.review-dates, .pomodoro-count, .media-count, .idea-vault-kicker, .guide-list li i) {
  color: var(--ops-accent);
}

html[data-ops-style] #vitaflow-native :is(.delete-btn, .idea-vault-small-btn.danger) {
  color: var(--vf-danger);
}

html[data-ops-style] #vitaflow-native :is(input:not([type="range"]):not([type="checkbox"]), select, textarea) {
  background: var(--ops-surface-muted) !important;
  border-color: var(--ops-border) !important;
  color: var(--ops-text) !important;
}

html[data-ops-style] #vitaflow-native :is(input, textarea)::placeholder { color: var(--ops-muted); }
html[data-ops-style] #vitaflow-native :is(input[type="range"], input[type="checkbox"]) { accent-color: var(--ops-accent); }
html[data-ops-style] #vitaflow-native :is(.suggestion-item, .idea-vault-item) { border-color: var(--ops-border); }
html[data-ops-style] #vitaflow-native :is(.todo-list, .history-list, .idea-vault-list) { scrollbar-color: var(--ops-border) transparent; }
html[data-ops-style] #vitaflow-native .progress-ring .bg { stroke: var(--ops-border); }
html[data-ops-style] #vitaflow-native .progress-ring .fg { stroke: var(--ops-accent); }

/* These declarations beat inline styles emitted by the legacy templates. They
   target their old palette, rather than recoloring every descendant. */
html[data-ops-style] #vitaflow-native :is([style*="color: #6a4a"], [style*="color:#6a4a"], [style*="color: #4a3a"], [style*="color:#4a3a"], [style*="color: #3a2a47"], [style*="color:#3a2a47"]) {
  color: var(--ops-text) !important;
}

html[data-ops-style] #vitaflow-native :is([style*="color: #8b7a7a"], [style*="color:#8b7a7a"], [style*="color: #aa9a9a"], [style*="color:#aa9a9a"], [style*="color: #999"], [style*="color:#999"]) {
  color: var(--ops-muted) !important;
}

html[data-ops-style] #vitaflow-native :is([style*="color: #8b5e9e"], [style*="color: #c4679c"], [style*="color: #a78bfa"], [style*="color: #8b5cf6"], [style*="color: #ec4899"], [style*="color: #667eea"]) {
  color: var(--ops-accent) !important;
}

html[data-ops-style] #vitaflow-native [style*="background-clip: text"][style*="color: transparent"] {
  background: none !important;
  color: var(--ops-accent) !important;
  -webkit-text-fill-color: currentColor;
}

html[data-ops-style] #vitaflow-native :is([style*="background: rgba(255, 250, 252"], [style*="background: rgba(255,255,255"], [style*="background: rgba(255, 255, 255"], [style*="background: white"], [style*="background: #fff"]) {
  background: var(--ops-surface) !important;
  border-color: var(--ops-border) !important;
}

html[data-ops-style] #vitaflow-native :is([style*="background: rgba(196,103,156"], [style*="background: rgba(196, 103, 156"], [style*="background: rgba(200,160,200"], [style*="background: rgba(200, 160, 200"], [style*="background: rgba(244, 114, 182"], [style*="background: rgba(139,92,246"], [style*="background: rgba(139, 92, 246"], [style*="background: rgba(167,139,250"], [style*="background: rgba(167, 139, 250"], [style*="background: rgba(236,72,153"], [style*="background: rgba(236, 72, 153"], [style*="background: linear-gradient"][style*="rgba(139, 94, 158"], [style*="background: linear-gradient"][style*="rgba(196, 103, 156"], [style*="background: linear-gradient"][style*="rgba(167, 139, 250"]) {
  background: var(--ops-surface-muted) !important;
  border-color: var(--ops-border) !important;
}

html[data-ops-style] #vitaflow-native :is(button[style*="background: linear-gradient"]:not(.danger):not([id^="stop"]):not([onclick*="delete" i]), .backup-actions #saveJsonBtn, .tab-btn.active, .cal-day.selected, .account-add-btn.active) {
  background: var(--ops-accent) !important;
  border-color: var(--ops-accent) !important;
  color: var(--ops-accent-contrast) !important;
  box-shadow: none;
}

html[data-ops-style] #vitaflow-native :is(button.add-btn[onclick*="delete" i], button.add-btn[id^="stop"], button.add-btn.danger) {
  background: var(--vf-danger) !important;
  border-color: var(--vf-danger) !important;
  color: var(--vf-danger-contrast) !important;
}

html[data-ops-style] #weight-native .button-primary {
  background: var(--ops-accent);
  border-color: var(--ops-accent);
  color: var(--ops-accent-contrast);
}

html[data-ops-style="ocean"] :is(.today-kicker, .today-links span, .focus-toggle) {
  color: var(--ops-accent);
}

html[data-ops-style]:not([data-ops-style="classic"]) .today-card {
  background-image: none;
}

@media (prefers-reduced-motion: reduce) {
  html[data-ops-style] *,
  html[data-ops-style] *::before,
  html[data-ops-style] *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- 体重工作区的深色主题适配（宿主层）----
   体重工作区按独立浅色站设计（color-scheme: light + 硬编码 #fff），
   嵌入总台后在默认深色主题下会变成白底，这里覆盖为与总台一致的暗色。
   浅色主题（html 无 .dark）不受影响，保持原样。
   这段必须留在宿主样式源码里：写进 weight-tracker/native-workspace.css 会被
   build-native.mjs 重建时抹掉，`--check` 也会直接失败。 */
html.dark #weight-native {
  color-scheme: dark;
  --page: transparent;
  --paper: #18181b;
  --ink: #e4e4e7;
  --muted: #a1a1aa;
  --line: #3f3f46;
  --green: #818cf8;
  --green-dark: #6366f1;
  --green-soft: rgba(99, 102, 241, .16);
  --lime: #312e81;
  background: transparent;
  color: var(--ink);
}

/* .stat-card-current 保持原有的强调底色（--ops-accent + 对比文字），不要被压平 */
html.dark #weight-native :is(.stat-card, .panel, .profile-dialog):not(.stat-card-current) {
  background: #18181b;
  border-color: #3f3f46;
}

html.dark #weight-native .button-secondary {
  background: #27272a;
  border-color: #3f3f46;
  color: #c7d2fe;
}

html.dark #weight-native :is(input, select, textarea) {
  background: #18181b;
  border-color: #3f3f46;
  color: #e4e4e7;
}

html.dark #weight-native .notice.error,
html.dark #weight-native .notice[data-type="error"] {
  background: rgba(248, 113, 113, .12);
  border-color: #7f1d1d;
  color: #fca5a5;
}

html.dark #weight-native .noscript-note {
  background: rgba(251, 191, 36, .12);
  border-color: #78350f;
  color: #fcd34d;
}

html.dark #weight-native .panel-tag {
  background: #27272a;
  color: #a1a1aa;
}

html.dark #weight-native :is(.record-item, .group-item, .list-empty, .chart-empty) {
  border-color: #3f3f46;
}