/* SERVER_STAGE_32_GLOBAL_SURFACE_COLOR_SYSTEM_FINAL
   Global theme, surface, contrast and calculator workspace unification.
   Scope: presentation only. No API logic. */
:root{
  color-scheme: light;
  --jg-bg:#f4f7fb;
  --jg-bg-2:#eef3f8;
  --jg-surface:#ffffff;
  --jg-surface-2:#f8fafc;
  --jg-surface-3:#eef4fb;
  --jg-text:#0f172a;
  --jg-text-2:#1f2937;
  --jg-muted:#475569;
  --jg-muted-2:#64748b;
  --jg-line:#cbd5e1;
  --jg-line-soft:#dbe5f0;
  --jg-primary:#2563eb;
  --jg-accent:#10b981;
  --jg-warning:#f59e0b;
  --jg-shadow:0 20px 55px rgba(15,23,42,.10);
  --jg-soft-shadow:0 10px 28px rgba(15,23,42,.07);
  --cf-bg:var(--jg-bg);
  --cf-card:var(--jg-surface);
  --cf-card2:var(--jg-surface-2);
  --cf-text:var(--jg-text);
  --cf-muted:var(--jg-muted);
  --cf-line:var(--jg-line);
  --cf-soft:var(--jg-surface-3);
  --cf-accent:var(--jg-primary);
}
html.dark, html[data-theme="dark"], body.dark, body[data-theme="dark"]{
  color-scheme: dark;
  --bg:#07111d;
  --text:#f3f8ff;
  --muted:#a8bad0;
  --line:rgba(148,163,184,.24);
  --jg-bg:#06111d;
  --jg-bg-2:#091827;
  --jg-surface:#0f1c2c;
  --jg-surface-2:#132237;
  --jg-surface-3:#162941;
  --jg-text:#f4f8ff;
  --jg-text-2:#dcecff;
  --jg-muted:#aabbd0;
  --jg-muted-2:#8ea5bd;
  --jg-line:rgba(148,163,184,.24);
  --jg-line-soft:rgba(148,163,184,.18);
  --jg-primary:#60a5fa;
  --jg-accent:#2dd4bf;
  --jg-warning:#fbbf24;
  --jg-shadow:0 28px 90px rgba(0,0,0,.34);
  --jg-soft-shadow:0 16px 45px rgba(0,0,0,.22);
  --cf-bg:var(--jg-bg);
  --cf-card:var(--jg-surface);
  --cf-card2:var(--jg-surface-2);
  --cf-text:var(--jg-text);
  --cf-muted:var(--jg-muted);
  --cf-line:var(--jg-line);
  --cf-soft:var(--jg-surface-3);
  --cf-accent:#60a5fa;
}
html.light, html[data-theme="light"], body.light, body[data-theme="light"]{color-scheme:light;}
html,body{min-height:100%;}
html.dark body, html[data-theme="dark"] body, body.dark, body[data-theme="dark"]{
  background:
    radial-gradient(circle at 0% 0%, rgba(45,212,191,.16), transparent 30%),
    radial-gradient(circle at 95% 8%, rgba(96,165,250,.14), transparent 36%),
    linear-gradient(180deg,#06111d 0%,#081522 48%,#07111d 100%) !important;
  color:var(--jg-text)!important;
}
html.light body, html[data-theme="light"] body, body.light, body[data-theme="light"]{
  background:
    radial-gradient(circle at 12% 0%, rgba(56,189,248,.13), transparent 34%),
    radial-gradient(circle at 92% 8%, rgba(16,185,129,.10), transparent 28%),
    linear-gradient(180deg,#f8fbff 0%,#eef3f8 62%,#f8fafc 100%) !important;
  color:var(--jg-text)!important;
}
/* Major layout surfaces */
html.dark :is(.page,.premium-home,.cf-page,.cf-shell,.jg-page,.main,.site-main,.content,.main-grid,.section-wrap,.workspace-wrap),
html[data-theme="dark"] :is(.page,.premium-home,.cf-page,.cf-shell,.jg-page,.main,.site-main,.content,.main-grid,.section-wrap,.workspace-wrap){
  background:transparent!important;
  color:var(--jg-text)!important;
}
html.dark :is(.hero,.section,.toolbar,.side,.workspace,#workspace,.work-head,.form,.form-section,.result-panel,.guide-box,.mini-footer,.upload-note,.card,.tool-card,.qt-card,.hero-card,.trust-item,.portal-card,.identity-wide-card,.process-step,.stage23-finance-card,.stage24-company-card,.stage25-quality-card,.company-card,.finance-card,.ratio-card,.guide-card,.calculator-card,.calc-card,.metric,.risk-card,.analysis-item,.check,.scenario,.standard-card,.field,.input-card,.official-card,.official-check,.data-card,.situation-hub,.scenario-section,.input-group,.input-panel,.input-section,.tabs,.tab-panel,.tab-content),
html[data-theme="dark"] :is(.hero,.section,.toolbar,.side,.workspace,#workspace,.work-head,.form,.form-section,.result-panel,.guide-box,.mini-footer,.upload-note,.card,.tool-card,.qt-card,.hero-card,.trust-item,.portal-card,.identity-wide-card,.process-step,.stage23-finance-card,.stage24-company-card,.stage25-quality-card,.company-card,.finance-card,.ratio-card,.guide-card,.calculator-card,.calc-card,.metric,.risk-card,.analysis-item,.check,.scenario,.standard-card,.field,.input-card,.official-card,.official-check,.data-card,.situation-hub,.scenario-section,.input-group,.input-panel,.input-section,.tabs,.tab-panel,.tab-content){
  background:linear-gradient(180deg,rgba(19,34,55,.96),rgba(11,23,38,.96))!important;
  border-color:rgba(148,163,184,.22)!important;
  color:var(--jg-text)!important;
  box-shadow:var(--jg-soft-shadow)!important;
}
html.dark :is(.workspace,#workspace,.side .workspace,.situation-hub,.input-group,.input-section,.form-section),
html[data-theme="dark"] :is(.workspace,#workspace,.side .workspace,.situation-hub,.input-group,.input-section,.form-section){
  background:linear-gradient(180deg,#0f1c2c 0%,#0a1726 100%)!important;
}
html.dark :is(.workspace,#workspace) > :is(div,section,article,form),
html[data-theme="dark"] :is(.workspace,#workspace) > :is(div,section,article,form){
  border-color:rgba(148,163,184,.20)!important;
}
/* Remove accidental white rails around calculator detail panels */
html.dark :is(.side,#workspace,.workspace,.form,.form-section,.result,.guide,.situation-hub,.scenario-section,.input-group,.input-panel,.input-section,.tab-content,.tab-pane)::before,
html.dark :is(.side,#workspace,.workspace,.form,.form-section,.result,.guide,.situation-hub,.scenario-section,.input-group,.input-panel,.input-section,.tab-content,.tab-pane)::after,
html[data-theme="dark"] :is(.side,#workspace,.workspace,.form,.form-section,.result,.guide,.situation-hub,.scenario-section,.input-group,.input-panel,.input-section,.tab-content,.tab-pane)::before,
html[data-theme="dark"] :is(.side,#workspace,.workspace,.form,.form-section,.result,.guide,.situation-hub,.scenario-section,.input-group,.input-panel,.input-section,.tab-content,.tab-pane)::after{border-color:rgba(148,163,184,.18)!important;}
/* Light mode contrast and clean surfaces */
html.light :is(.section,.toolbar,.workspace,#workspace,.form-section,.result-panel,.guide-box,.card,.tool-card,.qt-card,.hero-card,.trust-item,.portal-card,.identity-wide-card,.process-step,.stage23-finance-card,.stage24-company-card,.stage25-quality-card,.company-card,.finance-card,.ratio-card,.guide-card,.calculator-card,.calc-card,.metric,.risk-card,.analysis-item,.check,.scenario,.standard-card,.field,.input-card,.official-card,.official-check,.data-card,.situation-hub,.scenario-section,.input-group,.input-panel,.input-section,.tab-panel,.tab-content),
html[data-theme="light"] :is(.section,.toolbar,.workspace,#workspace,.form-section,.result-panel,.guide-box,.card,.tool-card,.qt-card,.hero-card,.trust-item,.portal-card,.identity-wide-card,.process-step,.stage23-finance-card,.stage24-company-card,.stage25-quality-card,.company-card,.finance-card,.ratio-card,.guide-card,.calculator-card,.calc-card,.metric,.risk-card,.analysis-item,.check,.scenario,.standard-card,.field,.input-card,.official-card,.official-check,.data-card,.situation-hub,.scenario-section,.input-group,.input-panel,.input-section,.tab-panel,.tab-content){
  background:#ffffff!important;
  color:#0f172a!important;
  border-color:#cbd5e1!important;
  box-shadow:0 12px 32px rgba(15,23,42,.06)!important;
}
html.light :is(.field label,.field small,.field .hint,.scenario span,.standard-card span,.tool-card small,.qt-card span,.hero-card span,.section p,.work-head p,.guide-box,.muted,.sub,.analysis-item span,.metric span,.risk-card p,.form-section p,.input-help,.helper,.desc,.description,.kicker),
html[data-theme="light"] :is(.field label,.field small,.field .hint,.scenario span,.standard-card span,.tool-card small,.qt-card span,.hero-card span,.section p,.work-head p,.guide-box,.muted,.sub,.analysis-item span,.metric span,.risk-card p,.form-section p,.input-help,.helper,.desc,.description,.kicker){
  color:#334155!important;
}
html.light :is(.section h1,.section h2,.section h3,.tool-card h3,.tool-card strong,.qt-card strong,.work-head h2,.form-section h3,.scenario strong,.standard-card strong,.metric strong,.field label,.hero h1,.hero p,.identity-wide-card h3,.portal-card h3),
html[data-theme="light"] :is(.section h1,.section h2,.section h3,.tool-card h3,.tool-card strong,.qt-card strong,.work-head h2,.form-section h3,.scenario strong,.standard-card strong,.metric strong,.field label,.hero h1,.hero p,.identity-wide-card h3,.portal-card h3){
  color:#0f172a!important;
}
html.light :is(input,select,textarea,.search,.hub-search),
html[data-theme="light"] :is(input,select,textarea,.search,.hub-search){
  background:#f8fafc!important;
  color:#0f172a!important;
  border-color:#cbd5e1!important;
}
/* Dark text/input readability */
html.dark :is(.section h1,.section h2,.section h3,.tool-card h3,.tool-card strong,.qt-card strong,.work-head h2,.form-section h3,.scenario strong,.standard-card strong,.metric strong,.field label,.hero h1,.identity-wide-card h3,.portal-card h3),
html[data-theme="dark"] :is(.section h1,.section h2,.section h3,.tool-card h3,.tool-card strong,.qt-card strong,.work-head h2,.form-section h3,.scenario strong,.standard-card strong,.metric strong,.field label,.hero h1,.identity-wide-card h3,.portal-card h3){
  color:#f8fbff!important;
}
html.dark :is(p,small,span,.muted,.sub,.desc,.description,.field small,.field .hint,.scenario span,.standard-card span,.tool-card small,.qt-card span,.hero-card span,.section p,.work-head p,.guide-box,.analysis-item span,.metric span,.risk-card p,.form-section p,.input-help,.helper),
html[data-theme="dark"] :is(p,small,span,.muted,.sub,.desc,.description,.field small,.field .hint,.scenario span,.standard-card span,.tool-card small,.qt-card span,.hero-card span,.section p,.work-head p,.guide-box,.analysis-item span,.metric span,.risk-card p,.form-section p,.input-help,.helper){
  color:#aebfd3!important;
}
html.dark :is(input,select,textarea,.search,.hub-search),
html[data-theme="dark"] :is(input,select,textarea,.search,.hub-search){
  background:#0b1726!important;
  color:#f4f8ff!important;
  border-color:rgba(148,163,184,.30)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03)!important;
}
html.dark :is(input,select,textarea,.search,.hub-search)::placeholder,
html[data-theme="dark"] :is(input,select,textarea,.search,.hub-search)::placeholder{color:#8196af!important;}
html.dark :is(input,select,textarea,.search,.hub-search):focus,
html[data-theme="dark"] :is(input,select,textarea,.search,.hub-search):focus{
  border-color:rgba(45,212,191,.68)!important;
  box-shadow:0 0 0 3px rgba(45,212,191,.14)!important;
}
html.light :is(input,select,textarea,.search,.hub-search):focus,
html[data-theme="light"] :is(input,select,textarea,.search,.hub-search):focus{
  border-color:rgba(37,99,235,.65)!important;
  box-shadow:0 0 0 3px rgba(37,99,235,.12)!important;
}
/* Buttons and chips */
html.dark :is(.btn,.filter,.tab,.badge,.chip,.pill,.stage23-cta-pill,.lang-switch button),
html[data-theme="dark"] :is(.btn,.filter,.tab,.badge,.chip,.pill,.stage23-cta-pill,.lang-switch button){
  border-color:rgba(148,163,184,.26)!important;
}
html.dark :is(.btn.secondary,.stage23-cta-pill), html[data-theme="dark"] :is(.btn.secondary,.stage23-cta-pill){
  background:#13243a!important;color:#eaf3ff!important;
}
/* Range controls */
html.dark input[type="range"],html[data-theme="dark"] input[type="range"]{accent-color:#2dd4bf!important;}
html.light input[type="range"],html[data-theme="light"] input[type="range"]{accent-color:#10b981!important;}
/* Main home page consistency */
html.dark .hero, html[data-theme="dark"] .hero{background:transparent!important;}
html.dark .hero h1, html[data-theme="dark"] .hero h1{color:#f8fbff!important;text-shadow:0 18px 55px rgba(0,0,0,.26);}
html.dark .hero h1 span, html[data-theme="dark"] .hero h1 span{
  background:linear-gradient(135deg,#e5f1ff 0%,#77b7ff 50%,#40e2bd 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
}
html.dark .eyebrow, html[data-theme="dark"] .eyebrow,
html.dark .hero-badge, html[data-theme="dark"] .hero-badge{
  background:rgba(37,99,235,.12)!important;border-color:rgba(96,165,250,.25)!important;color:#9cc8ff!important;
}
html.light .eyebrow, html[data-theme="light"] .eyebrow,
html.light .hero-badge, html[data-theme="light"] .hero-badge{
  background:rgba(37,99,235,.08)!important;border-color:rgba(37,99,235,.18)!important;color:#1d4ed8!important;
}
/* Calculator-specific polish */
html.dark .tool-card, html[data-theme="dark"] .tool-card,
html.dark .qt-card, html[data-theme="dark"] .qt-card{
  background:linear-gradient(180deg,#13243a,#0d1a2d)!important;
  border-color:rgba(96,165,250,.20)!important;
}
html.dark .tool-card:hover, html[data-theme="dark"] .tool-card:hover,
html.dark .qt-card:hover, html[data-theme="dark"] .qt-card:hover{
  border-color:rgba(45,212,191,.45)!important;
  box-shadow:0 18px 45px rgba(0,0,0,.28),0 0 0 1px rgba(45,212,191,.12)!important;
}
html.dark .scenario.active, html[data-theme="dark"] .scenario.active,
html.dark .tool-card.active, html[data-theme="dark"] .tool-card.active{
  border-color:rgba(45,212,191,.72)!important;
  box-shadow:0 0 0 1px rgba(45,212,191,.30),0 18px 48px rgba(45,212,191,.10)!important;
}
/* Prevent third-party or legacy inline white panels inside dark calculators */
html.dark .workspace [style*="background: #fff"],
html.dark .workspace [style*="background:#fff"],
html.dark .workspace [style*="background: white"],
html.dark .workspace [style*="background:white"],
html[data-theme="dark"] .workspace [style*="background: #fff"],
html[data-theme="dark"] .workspace [style*="background:#fff"],
html[data-theme="dark"] .workspace [style*="background: white"],
html[data-theme="dark"] .workspace [style*="background:white"]{
  background:#102037!important;color:#f4f8ff!important;border-color:rgba(148,163,184,.24)!important;
}
/* Tables */
html.dark table, html[data-theme="dark"] table{color:#eaf3ff!important;border-color:rgba(148,163,184,.22)!important;}
html.dark th, html[data-theme="dark"] th{background:#14243a!important;color:#f8fbff!important;border-color:rgba(148,163,184,.22)!important;}
html.dark td, html[data-theme="dark"] td{border-color:rgba(148,163,184,.16)!important;}
html.light table, html[data-theme="light"] table{color:#0f172a!important;}
html.light th, html[data-theme="light"] th{background:#eef4fb!important;color:#0f172a!important;}
/* Fallback floating theme toggle */
.jg-theme-float-toggle{
  position:fixed;right:16px;bottom:16px;z-index:2147483000;
  border:1px solid var(--jg-line)!important;border-radius:999px;padding:10px 12px;
  background:var(--jg-surface)!important;color:var(--jg-text)!important;
  box-shadow:0 16px 40px rgba(0,0,0,.18)!important;font-weight:900;cursor:pointer;
}
@media(max-width:720px){.jg-theme-float-toggle{right:12px;bottom:72px;padding:9px 11px;font-size:12px}.main-grid{gap:12px!important}.workspace,#workspace{border-radius:20px!important}.form,.form-section{padding:12px!important}.scenario-grid,.fields,.standard-cards{gap:8px!important}}