:root {
  --bg: #f8fafc;
  --card: #ffffff;
  --text: #111827;
  --text-secondary: #374151;
  --border: #e5e7eb;
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --success: #16a34a;
  --danger: #dc2626;
  --radius: 12px;
  --radius-sm: 8px;
  --padding: 16px;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

html.dark {
  --bg: #0f172a;
  --card: #172033;
  --text: #e5e7eb;
  --text-secondary: #cbd5e1;
  --border: #273244;
  --primary: #60a5fa;
  --primary-hover: #3b82f6;
  --success: #22c55e;
  --danger: #ef4444;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 30px rgba(0, 0, 0, 0.28);
}

html {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --bg: #0f172a;
    --card: #172033;
    --text: #e5e7eb;
    --text-secondary: #cbd5e1;
    --border: #273244;
    --primary: #60a5fa;
    --primary-hover: #3b82f6;
    --success: #22c55e;
    --danger: #ef4444;
    --shadow: 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 30px rgba(0, 0, 0, 0.28);
  }
}

body.bg-ink {
  background: var(--bg) !important;
}

body.text-slate-100 {
  color: var(--text) !important;
}

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

img[src*="/static/branding/logo.png"] {
  transition: filter 0.2s ease;
}

html.dark img[src*="/static/branding/logo.png"] {
  filter: brightness(0) invert(1) saturate(0) brightness(1.75);
}

h1,
h2,
h3,
label,
legend {
  color: var(--text);
}

p,
span,
.micro,
.pricing-note,
.sub,
.workflow-step,
.nav-group-label,
.profile-email,
.profile-small,
.tab-feedback,
.decision-scope,
.risk-strip-body,
.confidence-meter-detail {
  color: var(--text-secondary);
}

.card,
.tool-pane,
.tool-pane-head,
.modal-content,
.modal-card,
.profile-card,
.profile-stat-card,
.rewrite-proof,
.usage-guide,
.status-card,
.paywall-section,
.decision-overlay-card,
.plan-card,
.feature-card,
.trust-block,
.pricing-section,
.pricing-section #home-pricing-cta {
  background: var(--card);
  border-color: var(--border);
  color: var(--text);
  box-shadow: var(--shadow);
}

.btn-primary,
.primary-btn,
.upgrade-cta,
.plan-btn.primary,
.feature-open-btn,
.btn-action-primary {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}

.btn-primary:hover,
.primary-btn:hover,
.upgrade-cta:hover,
.plan-btn.primary:hover,
.feature-open-btn:hover,
.btn-action-primary:hover {
  background: var(--primary-hover);
}

.btn-secondary,
.secondary-btn,
.tool-pane-head-close,
.profile-back,
.profile-logout,
.theme-toggle,
.access-link {
  background: var(--card);
  color: var(--text);
  border-color: var(--border);
}

.input,
input,
textarea,
select {
  background: var(--card);
  color: var(--text);
  border-color: var(--border);
}

.sidebar {
  background: var(--card);
  border-right-color: var(--border);
  color: var(--text);
}

html:not([data-theme="dark"]) body {
  background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
  color: #111827;
}

html:not([data-theme="dark"]) .app-shell {
  background: transparent;
}

html:not([data-theme="dark"]) .sidebar {
  background: rgba(255, 255, 255, 0.92);
  border-right-color: #e5e7eb;
  color: #111827;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.06);
}

html:not([data-theme="dark"]) .main-area {
  color: #111827;
}

html:not([data-theme="dark"]) .topbar,
html:not([data-theme="dark"]) .card,
html:not([data-theme="dark"]) .tool-pane,
html:not([data-theme="dark"]) .tool-pane-head,
html:not([data-theme="dark"]) .modal-content,
html:not([data-theme="dark"]) .modal-card,
html:not([data-theme="dark"]) .profile-card,
html:not([data-theme="dark"]) .profile-stat-card,
html:not([data-theme="dark"]) .rewrite-proof,
html:not([data-theme="dark"]) .usage-guide,
html:not([data-theme="dark"]) .compact-list li,
html:not([data-theme="dark"]) .status-card,
html:not([data-theme="dark"]) .rewrite-box,
html:not([data-theme="dark"]) .secondary-tools-wrap,
html:not([data-theme="dark"]) .sidebar-more,
html:not([data-theme="dark"]) .paywall-section,
html:not([data-theme="dark"]) .decision-overlay-card,
html:not([data-theme="dark"]) .plan-card,
html:not([data-theme="dark"]) .feature-card,
html:not([data-theme="dark"]) .hero-story,
html:not([data-theme="dark"]) .pricing-section,
html:not([data-theme="dark"]) .pricing-section #home-pricing-cta {
  background: #ffffff;
  border-color: #e5e7eb;
  color: #111827;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

html:not([data-theme="dark"]) .hero-story {
  background: radial-gradient(circle at top, rgba(37, 99, 235, 0.08), transparent 72%), linear-gradient(180deg, #ffffff, #f8fafc);
}

html:not([data-theme="dark"]) .hero-story h1,
html:not([data-theme="dark"]) .hero-story h2,
html:not([data-theme="dark"]) .section-title,
html:not([data-theme="dark"]) .feature-title,
html:not([data-theme="dark"]) .tool-pane-title,
html:not([data-theme="dark"]) .profile-card h1,
html:not([data-theme="dark"]) .modal-content h2,
html:not([data-theme="dark"]) .modal-card h3 {
  color: #111827;
}

html:not([data-theme="dark"]) .hero-story p,
html:not([data-theme="dark"]) .feature-description,
html:not([data-theme="dark"]) .pricing-note,
html:not([data-theme="dark"]) .micro,
html:not([data-theme="dark"]) .profile-email,
html:not([data-theme="dark"]) .profile-small,
html:not([data-theme="dark"]) .section p,
html:not([data-theme="dark"]) .section li,
html:not([data-theme="dark"]) .trust-block p,
html:not([data-theme="dark"]) .compact-list li,
html:not([data-theme="dark"]) .paywall-section p,
html:not([data-theme="dark"]) .sub,
html:not([data-theme="dark"]) .nav-group-label,
html:not([data-theme="dark"]) .tab-feedback,
html:not([data-theme="dark"]) .decision-scope,
html:not([data-theme="dark"]) .risk-strip-body,
html:not([data-theme="dark"]) .confidence-meter-detail,
html:not([data-theme="dark"]) .workflow-step {
  color: #374151;
}

html:not([data-theme="dark"]) .nav-item,
html:not([data-theme="dark"]) .btn-secondary,
html:not([data-theme="dark"]) .tool-pane-head-close,
html:not([data-theme="dark"]) .profile-back,
html:not([data-theme="dark"]) .profile-logout,
html:not([data-theme="dark"]) .theme-toggle {
  background: #ffffff;
  color: #111827;
  border-color: #d1d5db;
}

html:not([data-theme="dark"]) .nav-item.active,
html:not([data-theme="dark"]) .tool-nav-btn.active {
  background: #dbeafe;
  color: #111827;
  border-color: #93c5fd;
}

html:not([data-theme="dark"]) .tool-nav-btn,
html:not([data-theme="dark"]) .hero-actions .secondary-btn,
html:not([data-theme="dark"]) .secondary-tools-wrap,
html:not([data-theme="dark"]) .sidebar-more,
html:not([data-theme="dark"]) .token-empty-state,
html:not([data-theme="dark"]) .topbar,
html:not([data-theme="dark"]) .hero-story,
html:not([data-theme="dark"]) .pricing-grid .plan-card,
html:not([data-theme="dark"]) .scan-box,
html:not([data-theme="dark"]) .section,
html:not([data-theme="dark"]) .card {
  color: #111827;
}

html:not([data-theme="dark"]) .tool-nav-btn,
html:not([data-theme="dark"]) .sidebar-more,
html:not([data-theme="dark"]) .token-empty-state,
html:not([data-theme="dark"]) .hero-actions .secondary-btn,
html:not([data-theme="dark"]) .pricing-note,
html:not([data-theme="dark"]) .pricing-features li,
html:not([data-theme="dark"]) .compact-list li,
html:not([data-theme="dark"]) .status-card,
html:not([data-theme="dark"]) .rewrite-proof,
html:not([data-theme="dark"]) .usage-guide,
html:not([data-theme="dark"]) .profile-stat-card,
html:not([data-theme="dark"]) .modal-card,
html:not([data-theme="dark"]) .tool-pane,
html:not([data-theme="dark"]) .tool-pane-head,
html:not([data-theme="dark"]) .paywall-section,
html:not([data-theme="dark"]) .decision-overlay-card,
html:not([data-theme="dark"]) .plan-card,
html:not([data-theme="dark"]) .feature-card {
  border-color: #e5e7eb;
}

html[data-theme="light"] .brand,
html[data-theme="light"] .logo-text,
html[data-theme="light"] .topbar-brand,
html[data-theme="light"] .topbar-brand .logo-text,
html[data-theme="light"] .sidebar .logo-text,
html:not([data-theme="dark"]) .brand,
html:not([data-theme="dark"]) .logo-text,
html:not([data-theme="dark"]) .topbar-brand,
html:not([data-theme="dark"]) .topbar-brand .logo-text,
html:not([data-theme="dark"]) .sidebar .logo-text {
  color: #111827 !important;
}

html:not([data-theme="dark"]) .tool-pane {
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

html:not([data-theme="dark"]) .tool-pane-head {
  background: #ffffff;
}

html:not([data-theme="dark"]) textarea,
html:not([data-theme="dark"]) input,
html:not([data-theme="dark"]) select {
  background: #ffffff;
  color: #111827;
  border-color: #d1d5db;
}

html:not([data-theme="dark"]) .primary-btn,
html:not([data-theme="dark"]) .btn-primary,
html:not([data-theme="dark"]) .feature-open-btn,
html:not([data-theme="dark"]) .plan-btn.primary,
html:not([data-theme="dark"]) .upgrade-cta {
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.24);
}

html:not([data-theme="dark"]) .access-link {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  color: #ffffff;
}

html:not([data-theme="dark"]) .token-badge,
html:not([data-theme="dark"]) .plan-label {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}

html:not([data-theme="dark"]) .theme-toggle {
  min-width: 96px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

html:not([data-theme="dark"]) .risk-strip-neutral,
html:not([data-theme="dark"]) .decision-overlay {
  background: rgba(15, 23, 42, 0.05);
}

html:not([data-theme="dark"]) .modal {
  background: rgba(15, 23, 42, 0.2);
}

html:not([data-theme="dark"]) .paywall-section {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(34, 197, 94, 0.08));
  color: #111827;
}

html:not([data-theme="dark"]) .section {
  background: #f8fafc;
  padding: 60px 0;
}

html:not([data-theme="dark"]) .card,
html:not([data-theme="dark"]) .modal-content,
html:not([data-theme="dark"]) .modal-card,
html:not([data-theme="dark"]) .plan-card,
html:not([data-theme="dark"]) .feature-card,
html:not([data-theme="dark"]) .tool-pane,
html:not([data-theme="dark"]) .tool-pane-head,
html:not([data-theme="dark"]) .profile-card,
html:not([data-theme="dark"]) .profile-stat-card,
html:not([data-theme="dark"]) .rewrite-proof,
html:not([data-theme="dark"]) .usage-guide,
html:not([data-theme="dark"]) .status-card,
html:not([data-theme="dark"]) .paywall-section,
html:not([data-theme="dark"]) .decision-overlay-card,
html:not([data-theme="dark"]) .trust-block,
html:not([data-theme="dark"]) .pricing-section,
html:not([data-theme="dark"]) .pricing-section #home-pricing-cta {
  background: #ffffff;
  border-color: #e5e7eb;
  color: #111827;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

html:not([data-theme="dark"]) .section h1,
html:not([data-theme="dark"]) .section h2,
html:not([data-theme="dark"]) .section h3,
html:not([data-theme="dark"]) h1,
html:not([data-theme="dark"]) h2,
html:not([data-theme="dark"]) h3 {
  color: #111827;
}

html:not([data-theme="dark"]) h1 { font-size: 32px; font-weight: 700; }
html:not([data-theme="dark"]) h2 { font-size: 24px; font-weight: 600; }
html:not([data-theme="dark"]) h3 { font-size: 18px; font-weight: 600; }

html:not([data-theme="dark"]) p,
html:not([data-theme="dark"]) .micro,
html:not([data-theme="dark"]) .muted,
html:not([data-theme="dark"]) .pricing-note,
html:not([data-theme="dark"]) .sub,
html:not([data-theme="dark"]) .workflow-step,
html:not([data-theme="dark"]) .nav-group-label,
html:not([data-theme="dark"]) .profile-email,
html:not([data-theme="dark"]) .profile-small {
  color: #374151;
}

html:not([data-theme="dark"]) .btn-primary,
html:not([data-theme="dark"]) .primary-btn,
html:not([data-theme="dark"]) .plan-btn.primary,
html:not([data-theme="dark"]) .upgrade-cta,
html:not([data-theme="dark"]) .feature-open-btn,
html:not([data-theme="dark"]) .btn-action-primary {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.24);
}

html:not([data-theme="dark"]) .btn-secondary,
html:not([data-theme="dark"]) .secondary-btn,
html:not([data-theme="dark"]) .tool-pane-head-close,
html:not([data-theme="dark"]) .profile-back,
html:not([data-theme="dark"]) .profile-logout,
html:not([data-theme="dark"]) .theme-toggle {
  background: #f3f4f6;
  color: #111827;
  border-color: #d1d5db;
}

html:not([data-theme="dark"]) .btn-secondary:hover,
html:not([data-theme="dark"]) .secondary-btn:hover,
html:not([data-theme="dark"]) .tool-pane-head-close:hover,
html:not([data-theme="dark"]) .profile-back:hover,
html:not([data-theme="dark"]) .profile-logout:hover,
html:not([data-theme="dark"]) .theme-toggle:hover {
  background: #e5e7eb;
  color: #111827;
}

html:not([data-theme="dark"]) .plan-card {
  padding: 24px;
  border-radius: 16px;
}

html:not([data-theme="dark"]) .plan-card.highlight {
  border: 2px solid #2563eb;
  box-shadow: 0 14px 32px rgba(37, 99, 235, 0.12);
  transform: none;
}

html:not([data-theme="dark"]) .plan-card .tag {
  color: #2563eb;
}

html:not([data-theme="dark"]) .plan-card .price,
html:not([data-theme="dark"]) .modal-content .price {
  color: #2563eb;
}

html:not([data-theme="dark"]) .pricing-section {
  background: #f8fafc;
  padding: 60px 0;
  box-shadow: none;
}

html:not([data-theme="dark"]) .pricing-grid {
  gap: 18px;
}

html:not([data-theme="dark"]) .pricing-features li,
html:not([data-theme="dark"]) .plan-card li {
  border-bottom-color: #e5e7eb;
  color: #374151;
}

html:not([data-theme="dark"]) .modal {
  background: rgba(15, 23, 42, 0.14);
}

html:not([data-theme="dark"]) .modal-content,
html:not([data-theme="dark"]) .modal-card {
  border-radius: 16px;
  max-width: 460px;
  padding: 24px;
  text-align: left;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
}

html:not([data-theme="dark"]) .modal-content h2,
html:not([data-theme="dark"]) .modal-card h3 {
  font-size: 22px;
  font-weight: 600;
  color: #111827;
}

html:not([data-theme="dark"]) .modal-content .pricing-note,
html:not([data-theme="dark"]) .modal-card .pricing-note,
html:not([data-theme="dark"]) .modal-content .micro {
  color: #6b7280;
}

html:not([data-theme="dark"]) .modal-content .pricing-features {
  margin: 12px 0 16px;
}

html:not([data-theme="dark"]) .modal-content .btn-primary,
html:not([data-theme="dark"]) .modal-content .primary-btn {
  width: 100%;
  margin-top: 8px;
}

html:not([data-theme="dark"]) .modal-content input,
html:not([data-theme="dark"]) .modal-content select,
html:not([data-theme="dark"]) .modal-content textarea {
  background: #ffffff;
  color: #111827;
  border-color: #d1d5db;
}

html:not([data-theme="dark"]) .paywall-section {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.07), rgba(37, 99, 235, 0.03));
  border: 1px solid #dbeafe;
}

html:not([data-theme="dark"]) label,
html:not([data-theme="dark"]) legend,
html:not([data-theme="dark"]) .status-label,
html:not([data-theme="dark"]) .rewrite-proof-title {
  color: #111827;
}

html:not([data-theme="dark"]) .text-slate-100,
html:not([data-theme="dark"]) .text-slate-200,
html:not([data-theme="dark"]) .text-slate-300,
html:not([data-theme="dark"]) .text-slate-400,
html:not([data-theme="dark"]) .text-slate-500 {
  color: #374151 !important;
}

html:not([data-theme="dark"]) .text-slate-900,
html:not([data-theme="dark"]) .text-slate-950 {
  color: #111827 !important;
}

html:not([data-theme="dark"]) .bg-slate-900,
html:not([data-theme="dark"]) .bg-slate-950,
html:not([data-theme="dark"]) .bg-slate-900\/70,
html:not([data-theme="dark"]) .bg-slate-900\/80,
html:not([data-theme="dark"]) .bg-slate-900\/85,
html:not([data-theme="dark"]) .bg-slate-900\/40,
html:not([data-theme="dark"]) .bg-slate-950\/50,
html:not([data-theme="dark"]) .bg-slate-950\/70 {
  background: #ffffff !important;
}

html:not([data-theme="dark"]) .border-slate-600,
html:not([data-theme="dark"]) .border-slate-700,
html:not([data-theme="dark"]) .border-slate-800,
html:not([data-theme="dark"]) .border-slate-800\/70,
html:not([data-theme="dark"]) .border-slate-800\/80,
html:not([data-theme="dark"]) .border-slate-700\/70,
html:not([data-theme="dark"]) .border-slate-700\/80 {
  border-color: #e5e7eb !important;
}