/* Grade Helper v7.0.2 — Visual Comfort Baseline
   Purpose: reduce glare, saturation, continuous motion, and visual fatigue
   while preserving the premium Grade Helper identity. */

:root{
  --ec-bg:#F4F2ED;
  --ec-bg-alt:#EEECE6;
  --ec-surface:#FAF8F4;
  --ec-surface-2:#FCFBF8;
  --ec-ink:#23282D;
  --ec-ink-soft:#3F474E;
  --ec-muted:#667078;
  --ec-line:#DEDAD1;
  --ec-line-strong:#CBC6BC;
  --ec-blue:#567591;
  --ec-teal:#668889;
  --ec-gold:#927D59;
  --ec-shadow-xs:0 2px 8px rgba(35,40,45,.035);
  --ec-shadow-sm:0 7px 22px rgba(35,40,45,.055);
  --ec-shadow-md:0 14px 38px rgba(35,40,45,.07);
  --ec-shadow-lg:0 22px 56px rgba(35,40,45,.085);
}

/* Softer default light theme: no pure-white page canvas, reduced chroma and glare. */
html:not([data-theme="dark"]){
  --vx-bg:var(--ec-bg);--vx-bg-alt:var(--ec-bg-alt);--vx-surface:var(--ec-surface);--vx-surface-2:var(--ec-surface-2);
  --vx-ink:var(--ec-ink);--vx-ink-soft:var(--ec-ink-soft);--vx-muted:var(--ec-muted);--vx-line:var(--ec-line);--vx-line-strong:var(--ec-line-strong);
  --vx-blue:var(--ec-blue);--vx-teal:var(--ec-teal);--vx-gold:var(--ec-gold);
  --vx-shadow-xs:var(--ec-shadow-xs);--vx-shadow-sm:var(--ec-shadow-sm);--vx-shadow-md:var(--ec-shadow-md);--vx-shadow-lg:var(--ec-shadow-lg);
  --vx-glass:rgba(250,248,244,.88);--vx-ring:rgba(86,117,145,.22);
}

/* Dark mode is charcoal rather than near-black to reduce pupil/contrast strain. */
html[data-theme="dark"]{
  --vx-bg:#171B1F;--vx-bg-alt:#1C2125;--vx-surface:#22272C;--vx-surface-2:#272D32;--vx-surface-muted:#20262A;
  --vx-ink:#E5E3DC;--vx-ink-soft:#C8C8C3;--vx-muted:#A6AAA8;--vx-line:#343B40;--vx-line-strong:#454E54;
  --vx-blue:#88A0B7;--vx-blue-soft:#2B3945;--vx-teal:#86A2A1;--vx-teal-soft:#293837;--vx-gold:#B7A17C;--vx-gold-soft:#3C3428;
  --vx-shadow-xs:0 2px 8px rgba(0,0,0,.10);--vx-shadow-sm:0 7px 22px rgba(0,0,0,.15);--vx-shadow-md:0 14px 38px rgba(0,0,0,.19);--vx-shadow-lg:0 22px 56px rgba(0,0,0,.23);
  --vx-glass:rgba(34,39,44,.90);--vx-ring:rgba(136,160,183,.25);
}

/* Extra-gentle Comfort mode. */
html[data-comfort="true"]{
  --vx-bg:#EFEDE7;--vx-bg-alt:#E9E6DF;--vx-surface:#F6F4EE;--vx-surface-2:#F8F6F1;--vx-surface-muted:#ECE9E2;
  --vx-ink:#30353A;--vx-ink-soft:#4D5358;--vx-muted:#64696B;--vx-line:#D8D3CA;--vx-line-strong:#C9C3B8;
  --vx-blue:#687F93;--vx-blue-soft:#E1E6E8;--vx-teal:#748D8C;--vx-teal-soft:#E0E7E4;--vx-gold:#8D7D60;--vx-gold-soft:#ECE6DA;
  --vx-shadow-xs:0 1px 5px rgba(42,46,49,.025);--vx-shadow-sm:0 5px 16px rgba(42,46,49,.035);--vx-shadow-md:0 10px 28px rgba(42,46,49,.045);--vx-shadow-lg:0 16px 38px rgba(42,46,49,.055);
  --vx-glass:rgba(246,244,238,.94);--vx-ring:rgba(104,127,147,.18);
}
html[data-theme="dark"][data-comfort="true"]{
  --vx-bg:#1C2023;--vx-bg-alt:#202529;--vx-surface:#262B2F;--vx-surface-2:#2B3034;--vx-surface-muted:#24292D;
  --vx-ink:#DDDCD6;--vx-ink-soft:#C4C3BD;--vx-muted:#A8AAA6;--vx-line:#383F43;--vx-line-strong:#474F53;
  --vx-blue:#8B9EAF;--vx-blue-soft:#303A42;--vx-teal:#8A9E9D;--vx-teal-soft:#303B3A;--vx-gold:#B1A080;--vx-gold-soft:#3C372F;
  --vx-shadow-xs:0 1px 5px rgba(0,0,0,.07);--vx-shadow-sm:0 5px 16px rgba(0,0,0,.10);--vx-shadow-md:0 10px 28px rgba(0,0,0,.13);--vx-shadow-lg:0 16px 38px rgba(0,0,0,.16);
  --vx-glass:rgba(38,43,47,.95);--vx-ring:rgba(139,158,175,.19);
}

html{scroll-behavior:smooth;background:var(--vx-bg)!important}
body{
  color:var(--vx-ink)!important;
  background:radial-gradient(760px 440px at 92% -10%,rgba(146,125,89,.035),transparent 70%),radial-gradient(680px 420px at -10% 18%,rgba(86,117,145,.032),transparent 72%),var(--vx-bg)!important;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
html[data-theme="dark"] body{background:radial-gradient(760px 440px at 92% -10%,rgba(183,161,124,.026),transparent 70%),radial-gradient(680px 420px at -10% 18%,rgba(136,160,183,.025),transparent 72%),var(--vx-bg)!important}
body::before{opacity:.16!important}
html[data-comfort="true"] body::before{opacity:.06!important}

/* Calm typography: slightly more breathing room, especially for reading-heavy areas. */
p,.hero-copy,.prose,.policy-copy,.faq-answer,.workspace-section p,.panel-v5 p,.document-premium-card p{line-height:1.68}
.hero-copy,.section-subtitle,.muted,.helper,.form-help{color:var(--vx-muted)!important}
input,select,textarea{line-height:1.45}

/* Reduce glass glare and strong blur. */
.nav{background:color-mix(in srgb,var(--vx-surface) 92%,transparent)!important;backdrop-filter:blur(9px) saturate(104%)!important;-webkit-backdrop-filter:blur(9px) saturate(104%)!important;box-shadow:0 4px 16px rgba(30,35,39,.035)!important}
.theme-toggle,.comfort-toggle{backdrop-filter:blur(6px)!important;-webkit-backdrop-filter:blur(6px)!important}
.gh-hero-signature{backdrop-filter:blur(6px)!important;-webkit-backdrop-filter:blur(6px)!important;background:color-mix(in srgb,var(--vx-surface) 90%,transparent)!important}

/* Softer hero treatment and less luminous gradient text. */
.hero{background:radial-gradient(620px 390px at 82% 15%,rgba(146,125,89,.060),transparent 70%),radial-gradient(580px 390px at 8% 20%,rgba(86,117,145,.055),transparent 72%),linear-gradient(180deg,#F7F5F0,#F0EEE8)!important}
html[data-theme="dark"] .hero{background:radial-gradient(620px 390px at 82% 15%,rgba(183,161,124,.042),transparent 70%),radial-gradient(580px 390px at 8% 20%,rgba(136,160,183,.040),transparent 72%),linear-gradient(180deg,#181C1F,#1C2023)!important}
.gradient-text{background:linear-gradient(96deg,#526E88,#627E96 52%,#668889 100%)!important;-webkit-background-clip:text!important;background-clip:text!important}
html[data-theme="dark"] .gradient-text{background:linear-gradient(96deg,#A9B8C5,#9CAEBB 52%,#9AB1AF 100%)!important;-webkit-background-clip:text!important;background-clip:text!important}
html[data-comfort="true"] .gradient-text{background:none!important;color:var(--vx-ink)!important;-webkit-text-fill-color:currentColor!important}
.hero::before,.hero::after{opacity:.62!important}
html[data-comfort="true"] .hero::before,html[data-comfort="true"] .hero::after{opacity:.28!important}

/* Cards: retain depth but avoid high-contrast floating-white rectangles. */
.card,.bento-card,.country-card,.step,.saas-feature,.form-card,.faq-item,.workspace-section,.kpi-v5,.panel-v5,.analytics-card,.settings-section-v5,.portal-card,.portal-box,.pay-panel,.document-premium-card,.version-card,.vi-panel,.vi-icon-tile{
  box-shadow:var(--vx-shadow-sm)!important;
}
.glow-card{box-shadow:var(--vx-shadow-md)!important;transform:perspective(1400px) rotateY(-1.15deg) rotateX(.55deg)!important}
.float-card{box-shadow:var(--vx-shadow-sm)!important}
.btn-primary{background:linear-gradient(135deg,#456582,#567591 58%,#5D7585)!important;box-shadow:0 7px 18px rgba(69,101,130,.14)!important}
.btn-primary:hover{box-shadow:0 9px 22px rgba(69,101,130,.17)!important}
html[data-comfort="true"] .btn:hover,html[data-comfort="true"] .card:hover,html[data-comfort="true"] .bento-card:hover,html[data-comfort="true"] .country-card:hover,html[data-comfort="true"] .step:hover,html[data-comfort="true"] .saas-feature:hover{transform:none!important}

/* Tone down luminous verification/seal effects. */
.trust-seal,.verify-seal,.sp3d-verification-seal,.sp3d-document-seal-mini,.sp3d-verify-seal{box-shadow:0 0 0 1px rgba(255,255,255,.025),0 10px 28px rgba(17,20,24,.10)!important}
.sp3d-verification-seal::after,.sp3d-document-seal-mini::after,.trust-seal-card .trust-seal::after,.sp3d-verify-seal::after{opacity:.42!important;animation-duration:20s!important}

/* Continuous decorative motion is gentler even outside Comfort mode. */
.sp3d-monogram-orb{animation-duration:14s!important}.sp3d-doc-stack{animation-duration:16s!important}.sp3d-payment-glass{animation-duration:18s!important}.sp3d-shield{animation-duration:20s!important}.sp3d-verify-seal{animation-duration:22s!important}.float-card{animation-duration:15s!important}.orbit-ring.r2{animation-duration:42s!important}.marquee-track{animation-duration:42s!important}
.vi-panel::after{opacity:.32!important;animation-duration:24s!important}

/* Comfort mode removes decorative movement and glossy/blurred surfaces entirely. */
html[data-comfort="true"] .sp3d-monogram-orb,
html[data-comfort="true"] .sp3d-doc-stack,
html[data-comfort="true"] .sp3d-payment-glass,
html[data-comfort="true"] .sp3d-shield,
html[data-comfort="true"] .sp3d-verify-seal,
html[data-comfort="true"] .float-card,
html[data-comfort="true"] .orbit-ring,
html[data-comfort="true"] .marquee-track,
html[data-comfort="true"] .vi-panel::after{animation:none!important;transform:none!important}
html[data-comfort="true"] .nav,
html[data-comfort="true"] .theme-toggle,
html[data-comfort="true"] .comfort-toggle,
html[data-comfort="true"] .gh-hero-signature,
html[data-comfort="true"] .sp3d-payment-glass,
html[data-comfort="true"] .vi-note{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html[data-comfort="true"] .sp3d-webgl{display:none!important}
html[data-comfort="true"] .hero-panel,html[data-comfort="true"] .bento-card.primary,html[data-comfort="true"] .premium-band{filter:saturate(.72)!important}

/* Mobile: prioritize visual calm and smooth scrolling. */
@media(max-width:760px){
  html{scroll-behavior:auto}
  body::before{display:none!important}
  .hero{background:linear-gradient(180deg,#F6F4EF,#F0EEE8)!important}
  html[data-theme="dark"] .hero{background:linear-gradient(180deg,#191D20,#1D2124)!important}
  .hero::before,.hero::after{opacity:.24!important}
  .sp3d-webgl{display:none!important}
  .sp3d-monogram-orb,.sp3d-doc-stack,.sp3d-payment-glass,.sp3d-shield,.sp3d-verify-seal,.float-card,.orbit-ring,.marquee-track{animation:none!important}
  .sp3d-verification-seal::after,.sp3d-document-seal-mini::after,.trust-seal-card .trust-seal::after,.sp3d-verify-seal::after,.vi-panel::after{animation:none!important;opacity:.22!important}
  .nav,.workspace-mobile-nav,.gh-hero-signature,.sp3d-payment-glass,.vi-note{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .glow-card{transform:none!important;box-shadow:var(--vx-shadow-sm)!important}
  .card:hover,.bento-card:hover,.country-card:hover,.step:hover,.saas-feature:hover,.btn:hover{transform:none!important}
  .section,.vi-section{scroll-margin-top:72px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .sp3d-webgl{display:none!important}
}

/* Strong, calm keyboard focus without neon glow. */
:focus-visible{outline:3px solid color-mix(in srgb,var(--vx-blue) 62%,white)!important;outline-offset:3px!important;box-shadow:none!important}
html[data-theme="dark"] :focus-visible{outline-color:color-mix(in srgb,var(--vx-blue) 72%,#E5E3DC)!important}

/* Large full-width areas use softer luminance steps so moving between sections is less jarring. */
.page-hero{background:linear-gradient(180deg,#F5F3EE,#F0EEE8)!important}
html[data-theme="dark"] .page-hero{background:linear-gradient(180deg,#1B2024,#202529)!important}
.prose p,.prose li{color:var(--vx-ink-soft)!important}
.notice{background:color-mix(in srgb,var(--vx-blue-soft) 42%,var(--vx-surface))!important;color:var(--vx-ink-soft)!important;border-left-color:var(--vx-blue)!important}
.cta-band{background:linear-gradient(135deg,#334D64,#405D73 62%,#496B6C)!important;box-shadow:var(--vx-shadow-md)!important}
.cta-band p{color:#E3E7E7!important}
.footer{background:#171D22!important;color:#CDD1D0!important}
.footer h4{color:#E8E6E0!important}.footer p,.footer a{color:#ADB5B7!important}.footer a:hover{color:#E8E6E0!important}.footer-bottom{color:#969FA2!important}
html[data-theme="dark"] .footer{background:#14181B!important}
.float-main{background:linear-gradient(145deg,#58738A,#667F92)!important;box-shadow:0 9px 22px rgba(50,75,96,.18)!important}
html[data-comfort="true"] .float-main{background:#687C8A!important;box-shadow:0 5px 14px rgba(50,60,68,.10)!important}

/* Sidebar darks stay premium without using near-black / saturated navy. */
.workspace-sidebar,.premium-admin-side{background:linear-gradient(180deg,#1A2025 0%,#20272C 58%,#252D32 100%)!important}
.workspace-nav button,.admin-nav-v5 button,.admin-nav-v5 a{color:#C1C8C9!important}
.workspace-nav button:hover,.workspace-nav button.active,.admin-nav-v5 button.active,.admin-nav-v5 button:hover,.admin-nav-v5 a:hover{background:rgba(255,255,255,.075)!important;color:#ECEBE6!important}
@media(max-width:760px){
  .workspace-mobile-nav{background:rgba(29,36,41,.97)!important;box-shadow:0 8px 24px rgba(0,0,0,.18)!important}
  .float-main{width:54px;height:54px}
}

html[data-theme="dark"] .nav-links a{color:#9EA6AA!important}
html[data-theme="dark"] .nav-links a:hover{color:#D8D9D4!important}