/* ============================================================================
   AMAADOR WORKSHOP — site override (amaador-hse.com)  ·  Design 3.0
   Loads AFTER amaador-design-system.css AND main.css.
   1) Sets the site accent.  2) Remaps main.css's legacy token vocabulary
   (--bg/--acc/--cta/...) onto the monochrome Design 3.0 palette so every
   token-driven rule + inline style re-skins at once. No hex left driving color.
   ============================================================================ */
:root { --accent: #C8CAD8; } /* was #1A6B4A emerald — neutralized to chrome (nav-active underline, focus) */

:root{
  /* DESIGN 4.0 (2026-07-10, ground-up redesign) — backgrounds → true black */
  --bg:#000000; --bg2:#000000; --panel:#121214; --panel2:#1C1C1F; --panel3:#232326;
  --glass:rgba(255,255,255,.05);
  /* borders */
  --line:rgba(245,245,247,.12); --line2:rgba(245,245,247,.20); --line3:rgba(245,245,247,.28);
  /* ink */
  --txt:#B8BAD0; --mut:#9496AA; --dim:#3A3C52; --c2:#F5F5F7; --c3:#9496AA;
  /* accents → full white/black invert, no chrome-gray, no hue */
  --gold:#F5F5F7; --gold2:#FFFFFF; --gold-dim:rgba(255,255,255,.08);
  --acc:#F5F5F7; --acc2:#9496AA; --acc2-light:#F5F5F7; --acc2-dim:rgba(255,255,255,.08);
  --cta:#F5F5F7; --c1:#F5F5F7; --c4:#FFFFFF;
  --blue:#9496AA; --violet:#9496AA; --teal:#9496AA; --info:#9496AA;
  /* status stays semantic but desaturated toward neutral */
  --ok:#9db4a6; --warn:#c9c3a8; --bad:#c9a8a8;
  /* gradients → white-to-chrome, no color */
  --grad:linear-gradient(100deg,#FFFFFF,#F5F5F7 55%,#9496AA);
  --grad3:linear-gradient(110deg,#FFFFFF,#F5F5F7 50%,#6E7090);
  --brand-metal:linear-gradient(180deg,#ffffff,#F5F5F7 55%,#C8CAD8);
  --brand-accent-metal:linear-gradient(180deg,#FFFFFF,#F5F5F7 58%,#9496AA);
  /* fonts → Design 4.0: one typeface at every weight (SF Pro, native on Apple
     devices via -apple-system; Tajawal kept in the fallback chain so Arabic
     text still gets a curated face on non-Apple systems, not a generic one) */
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Segoe UI Variable','Segoe UI','Tajawal',Roboto,Arial,sans-serif;
  --font-display:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI Variable','Segoe UI','Tajawal',Roboto,Arial,sans-serif;
  --font-brand:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI Variable','Segoe UI','Tajawal',Roboto,Arial,sans-serif;
  --font-elegant:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI Variable','Segoe UI','Tajawal',Roboto,Arial,sans-serif;
  --font-serif:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI Variable','Segoe UI','Tajawal',Roboto,Arial,sans-serif;
  /* shape → Design 4.0 radius scale */
  --radius-pill:999px; --radius-card:20px; --radius-chip:10px; --radius-input:12px;
  /* cluster accent colors — the only place hue lives; everything else stays black/white */
  --c-safety:#FF453A; --c-health:#FF375F; --c-envenergy:#30D158; --c-quality:#0A84FF;
  --c-cyber:#BF5AF2; --c-gov:#5E5CE6; --c-systems:#FF9F0A;
}

/* ---------------------------------------------------------------------------
   LIGHT COUNTERPART FOR THE LEGACY TOKEN REMAP (2026-07-10, rebuilt).
   main.css consumes this site's OWN legacy vocabulary (--bg/--txt/--dim/--c2/
   --panel/...), not the design-system's --bg-base/--text-primary directly —
   e.g. `body{background:var(--bg);color:var(--txt)}`. The :root block above
   pins that legacy vocabulary to dark values unconditionally, so this real
   light counterpart is required or the toggle looks like a no-op. Warm-white
   surfaces, dark ink — sourced from the design-system's own light tokens. */
html[data-theme="light"]{
  /* DESIGN 4.0 — warm greige/white ground (per the user's own reference
     swatch), used as BOTH --bg and --panel since every card in this system
     reads from --panel; --panel2/--panel3 are the only tiers that step away
     from it, for genuinely-raised elements (windows/dropdowns) and small
     accent chips respectively. */
  --bg:#E3E0D3; --bg2:#E3E0D3; --panel:#E3E0D3; --panel2:#EFECDF; --panel3:#D2CCB2;
  --glass:rgba(38,35,25,.04);
  --line:rgba(38,35,25,.14); --line2:rgba(38,35,25,.22); --line3:rgba(38,35,25,.30);
  --txt:#5C5947; --mut:#5C5F75; --dim:#B4B6C4; --c2:#26241C; --c3:#6B6E85;
  --gold:#26241C; --gold2:#26241C; --gold-dim:rgba(38,35,25,.06);
  --acc:#26241C; --acc2:#6B6E85; --acc2-light:#26241C; --acc2-dim:rgba(38,35,25,.06);
  --cta:#26241C; --c1:#26241C; --c4:#26241C;
  --blue:#6B6E85; --violet:#6B6E85; --teal:#6B6E85; --info:#6B6E85;
  /* --ink / --muted (full-word names, distinct from --c2/--mut above): the 19
     "Systems Creation" tool pages (ISO/IATF/RBA/CSR/wellbeing generators) were
     all cloned from one template whose inline <style> block reads
     var(--ink,#e8eef5) / var(--muted,#9fb0c3) for note boxes, form inputs,
     unselected hazard chips and secondary text. Neither name is set anywhere
     for light theme (only --ink is pinned near-white at :root for dark),
     so every one of those elements rendered near-invisible text in light mode. */
  --ink:#26241C; --muted:#5C5F75;
  /* the following properties are ALSO set unconditionally on :root by TASK 2
     below (--bg3/--window/--surface/--surface2/--ink2/--faint/--hair/--on-navy/
     --accent/--acc-rgb/--good/--bad/color-scheme) with no light override
     anywhere — closing that gap here so light mode doesn't inherit dark
     values for them. */
  --bg3:#EFECDF; --window:rgba(38,35,25,.035); --surface:rgba(38,35,25,.035); --surface2:rgba(38,35,25,.05);
  --glass-strong:rgba(38,35,25,.08);
  --ink2:#26241C; --faint:#5C5F75; --hair:rgba(38,35,25,.10);
  --on-navy:#04050A; color-scheme:light;
  --accent:#26241C; --acc-rgb:38,36,28;
  --good:#5a8a6e; --bad:#a85a5a;
}

/* ChemicalPro nav pill — force Design 3.0 monochrome (no colored glow).
   main.css ~149-154 hardcodes cyan/indigo hex+rgba directly on .nav-chempro
   instead of consuming design tokens, so the token remap above has nothing to
   attach to: border rgba(34,211,236,.5), text #a7f3ee, background
   linear-gradient(135deg,rgba(34,211,236,.16),rgba(99,102,241,.16)), hover text
   #06262b, hover background linear-gradient(135deg,#67e8f9,#22d3ee), hover
   box-shadow rgba(34,211,236,.4). This file loads last, so a direct
   selector-level override here wins on source order — reinforced with
   !important so it also wins regardless of load order or specificity drift.
   Scoped ONLY to the shared nav badge — does not touch chempro.css or any
   body.chempro-scoped tool-page styling. */
.nav-links a.top.nav-chempro{
  border:1px solid var(--line3)!important;
  color:var(--c2)!important;
  background:var(--glass)!important;
}
.nav-links a.top.nav-chempro:hover,
.nav-links a.top.nav-chempro.on{
  color:#06262b!important;
  border-color:transparent!important;
  background:var(--brand-metal)!important;
  box-shadow:none!important;
}
.nav-chempro-ic{
  filter:none!important;
}

/* ===== 2026-07-04 glossy-monochrome polish ===== */

/* ---------------------------------------------------------------------------
   TASK 2 · DARK THEME TOKEN REMAP (2026-07-04 fix: UN-FORCED from light).
   design2.css declares html[data-theme="light"]{ --bg:#f5f4f0; --ink:#121214; … }
   (a LIGHT bg + DARK ink). This block used to also re-pin html[data-theme="light"]
   to these SAME dark values, which broke the toggle: clicking to light changed
   localStorage but the visible palette never changed. The shared core
   (amaador-design-system.css) now ships a complete, correct light-theme token
   block under html[data-theme="light"] (warm-white surfaces, dark ink, dark CTA —
   still monochrome). So this remap now ONLY re-asserts the dark bundle on :root
   and the explicit dark attribute — light is left alone to inherit the core's
   real light tokens. Dark-white ink on dark, never forced onto light.
   --------------------------------------------------------------------------- */
:root,
html[data-theme="dark"]{
  /* structural bg → true black (Design 4.0) */
  --bg:#000000; --bg2:#000000; --bg3:#121214;
  --window:rgba(255,255,255,.045); --surface:rgba(255,255,255,.045); --surface2:rgba(255,255,255,.065);
  --glass:rgba(20,20,24,.55); --glass-strong:rgba(24,24,29,.72);
  /* dark-white ink ladder */
  --ink:#F5F5F7; --ink2:#C8CAD8; --txt:#B8BAD0; --muted:#9496AA; --mut:#9496AA; --faint:#6E7090;
  --line:rgba(245,245,247,.12); --line2:rgba(245,245,247,.20); --line3:rgba(245,245,247,.28); --hair:rgba(245,245,247,.07);
  --on-navy:#04050A; color-scheme:dark;
  /* accent → white invert, no colour */
  --acc:#F5F5F7; --acc2:#9496AA; --acc-rgb:245,245,247;
  --accent:#F5F5F7;
  --good:#9db4a6; --bad:#c9a8a8;
}
/* html[data-theme="light"] body dark-background force REMOVED (2026-07-04 fix) —
   it was overriding the core's light --bg-base with the dark one via !important,
   which is what made the toggle look like a no-op. body already reads
   background:var(--bg-base) / color:var(--text-secondary) from main.css and now
   picks up the core's real light tokens (#E3E0D3 bg, dark ink) automatically. */

/* ---------------------------------------------------------------------------
   TASK 2b · PITCH (OLED true-black) TOKEN REMAP (2026-07-04 fix).
   Same rationale as the dark remap above: main.css consumes THIS SITE'S OWN
   legacy vocabulary (--bg/--bg2/--bg3/--window/--surface/...), not the core's
   --bg-base/--bg-void directly. The shared core now defines a third tier,
   html[data-theme="pitch"], but this site's own --bg/--bg2/--bg3 names have no
   pitch counterpart, so flipping to pitch would be invisible here exactly like
   the light-toggle bug above. Push ONLY the background-tier hex tokens to
   near-true-black (mirrors the core's pitch values); copy every other token
   (ink/line/accent/status/color-scheme) VERBATIM from the dark block — pitch is
   a background-only refinement, not a new palette. */
html[data-theme="pitch"]{
  /* structural bg → OLED true black (mirrors core's --bg-void/base/raised ladder) */
  --bg:#000000; --bg2:#000000; --bg3:#050505;
  --window:rgba(255,255,255,.032); --surface:rgba(255,255,255,.045); --surface2:rgba(255,255,255,.065);
  --glass:rgba(10,10,10,.55); --glass-strong:rgba(12,12,12,.72);
  /* dark-white ink ladder — copied verbatim from the dark block */
  --ink:#F2F3FA; --ink2:#C8CAD8; --txt:#B8BAD0; --muted:#9496AA; --mut:#9496AA; --faint:#6E7090;
  --line:rgba(245,244,240,.07); --line2:rgba(245,244,240,.11); --line3:rgba(245,244,240,.18); --hair:rgba(245,244,240,.07);
  --on-navy:#04050A; color-scheme:dark;
  /* platinum/chrome accent (no colour) — copied verbatim from the dark block */
  --acc:#C8CAD8; --acc2:#9496AA; --acc-rgb:200,202,216;
  --accent:#C8CAD8;
  --good:#9db4a6; --bad:#c9a8a8;
}

/* ---------------------------------------------------------------------------
   TASK 1 · MONOCHROME ENFORCEMENT — neutralise every saturated hue leak.
   Ladder: white-alpha rgba(255,255,255,.04–.16) · chrome #C8CAD8/#9496AA/#6E7090
   · chrome sheen gradient for text. All !important + specific selectors.
   --------------------------------------------------------------------------- */

/* LEAK 1 — nav "active" underline emerald (#1A6B4A from design-system) → chrome */
nav a.active,nav a.on{border-bottom-color:#C8CAD8!important;}

/* LEAK 2 — inline `--acc:#67e8f9 / #22d3ee / #f97316` on .card.glow tiles drives a
   cyan/orange border+glow+icon-tile via main.css. Re-pin --acc to chrome on every
   card, so the glow/border/tile all re-skin monochrome regardless of inline value. */
.card,.card.glow,[class*="card"],a.card,.dom-card{--acc:#C8CAD8!important;--tr-acc:#C8CAD8!important;}

/* follow-up (2026-07-11): both LEAK 1 and LEAK 2 set their chrome color directly
   on the element (nav a.active's own border-bottom-color; .card's own --acc/
   --tr-acc custom properties) with !important. TASK 8 further down re-declares
   --accent/--tr-acc under html[data-theme="light"], but that's only INHERITED by
   descendants — an element's own directly-matching declaration (LEAK 1/2 above)
   always wins over an inherited value, regardless of the ancestor rule's
   specificity. Confirmed via computed style: .card's --acc/--tr-acc stayed
   #C8CAD8 under data-theme="light", driving a pale border/glow/icon-tile
   (main.css:1679-1689) that reads as a grey haze on the light canvas — likely
   the actual cause behind the reported "washed out" look, not just the cursor.
   Fix: re-declare directly on the same elements under html[data-theme="light"],
   which now legitimately outranks LEAK 1/2 by selector specificity. */
html[data-theme="light"] nav a.active,html[data-theme="light"] nav a.on{border-bottom-color:#26241C!important;}
html[data-theme="light"] .card,html[data-theme="light"] .card.glow,html[data-theme="light"] [class*="card"],
html[data-theme="light"] a.card,html[data-theme="light"] .dom-card{--acc:#26241C!important;--tr-acc:#26241C!important;}

/* LEAK 3 — inline amber alert card rgba(251,191,36,…) (costs-claims-compensation etc.) */
.card[style*="251,191,36"],.card[style*="rgba(251"]{
  border-color:rgba(255,255,255,.16)!important;
  background:rgba(255,255,255,.045)!important;
}

/* LEAK 4+5+7 — gradient-TEXT (.gx headline sheen, hero .gx, .card.stat .n counter)
   were cyan+gold / violet+orange. → chrome sheen. */
.gx,
body:not([data-domain]) .hero h1 .gx,
.card.stat .n{
  background:none!important;
  -webkit-background-clip:border-box!important;background-clip:border-box!important;
  -webkit-text-fill-color:currentColor!important;color:#dfe6f2!important;
}
/* LIGHT COUNTERPART (2026-07-10 fix) — the chrome sheen above is near-white,
   which renders near-invisible on the light theme's white canvas. This was
   very likely the biggest reason "light mode looked broken": headline text
   using .gx would appear blank. Flip to a dark-chrome sheen under light. */
html[data-theme="light"] .gx,
html[data-theme="light"] body:not([data-domain]) .hero h1 .gx,
html[data-theme="light"] .card.stat .n{
  background:none!important;
  -webkit-background-clip:border-box!important;background-clip:border-box!important;
  -webkit-text-fill-color:currentColor!important;color:#162033!important;
}

/* LEAK 6 — primary buttons + donate button cyan gradient → white CTA (chrome on near-black) */
.btn:not(.ghost):not(.danger),
.btn.donate,
.donate-float{
  background:#FFFFFF!important;
  background-image:linear-gradient(180deg,#FFFFFF,#E8EAF0 60%,#C8CAD8)!important;
  color:#04050A!important;
  border-color:transparent!important;
  box-shadow:0 8px 24px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.6)!important;
}
.btn:not(.ghost):not(.danger):hover,.btn.donate:hover,.donate-float:hover{
  color:#04050A!important;background-image:linear-gradient(180deg,#FFFFFF,#F2F3FA 60%,#E8EAF0)!important;
  border-color:transparent!important;
}
.btn.ghost{border-color:var(--line3)!important;color:var(--c2)!important;background:var(--glass)!important;}
.btn.ghost:hover{border-color:var(--line3)!important;color:#F2F3FA!important;background:rgba(255,255,255,.09)!important;}

/* LEAK 6 / TASK 2 LIGHT COUNTERPART (2026-07-10, restored) — a white CTA is
   invisible on the light theme's real white canvas. Flip the primary/donate
   CTA to a dark ink fill under html[data-theme="light"]. Still pure
   monochrome (dark chrome ink), no colour introduced. */
html[data-theme="light"] .btn:not(.ghost):not(.danger):not(.violet),
html[data-theme="light"] .btn.donate,
html[data-theme="light"] .donate-float{
  background:#26241C!important;
  background-image:linear-gradient(180deg,#2A2C3D,#26241C 70%)!important;
  color:#FFFFFF!important;
  border-color:transparent!important;
  box-shadow:0 8px 24px rgba(20,21,28,.25),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
html[data-theme="light"] .btn:not(.ghost):not(.danger):not(.violet):hover,
html[data-theme="light"] .btn.donate:hover,
html[data-theme="light"] .donate-float:hover{
  color:#FFFFFF!important;background-image:linear-gradient(180deg,#3A3C52,#14151C 70%)!important;
  border-color:transparent!important;
}
html[data-theme="light"] .btn.ghost{border-color:var(--line3)!important;color:var(--c2)!important;background:var(--glass)!important;}
html[data-theme="light"] .btn.ghost:hover{border-color:var(--line3)!important;color:#26241C!important;background:rgba(10,10,15,.07)!important;}

/* LEAK 8 — donate-float / nav-dot / mini rail glows (#22d3ee) → chrome */
.donate-float{border-color:rgba(255,255,255,.4)!important;}
.nav-dot,.panel-dot,.kicker .dot{background:#9496AA!important;box-shadow:0 0 8px rgba(255,255,255,.25)!important;}

/* LEAK 9 — component accent DEFAULTS that fall back to #22d3ee when no inline value
   is set (training-rail, student-jump, domain-card, tab-progress, panels). Pin the
   fallback vars to chrome at :root so every `var(--x,#22d3ee)` reads chrome. */
:root,html[data-theme="dark"],html[data-theme="light"]{
  --tr-acc:#C8CAD8; --stu-acc:#C8CAD8; --dom-acc:#C8CAD8; --dot:#9496AA; --p:#9496AA;
}
.tr-stage{--tr-acc:#C8CAD8!important;}
/* training-rail chips/pics/dots/donuts that hardcode the cyan literal */
.tr-progress-bar,.tr-bar .fill{background:linear-gradient(90deg,#C8CAD8,#9496AA)!important;}
.tr-pic,.tr-domic,.stu-dic,.disc-square .ds-ic{
  background:rgba(255,255,255,.06)!important;border-color:var(--line3)!important;box-shadow:none!important;}
.tr-qn,.tr-flow-step:before,.tr-dot.on{background:#9496AA!important;color:#04050A!important;}

/* LEAK 10 — nav "contact" indigo pill (#6366f1/#818cf8) → chrome, matching chempro pill */
.nav-links a.top.nav-contact{
  border:1px solid var(--line3)!important;color:var(--c2)!important;background:var(--glass)!important;}
.nav-links a.top.nav-contact:hover,.nav-links a.top.nav-contact.on{
  color:#04050A!important;border-color:transparent!important;
  background:var(--brand-metal)!important;box-shadow:none!important;}

/* LEAK 11 — risk severity swatches (amber/orange/red/green) → desaturated neutral ladder.
   Keep a legible tonal STEP (light→dark chrome) so severity is still readable, no hue. */
.r-low{background:#C8CAD8!important;color:#04050A!important;}
.r-med{background:#9496AA!important;color:#04050A!important;}
.r-high{background:#6E7090!important;color:#F2F3FA!important;}
.r-ext{background:#3A3C52!important;color:#F2F3FA!important;}
.tr-tri .shape{background:linear-gradient(160deg,#9496AA,#3A3C52)!important;}

/* LEAK 12 — body.chempro tool skin (chempro.css) is a full CYAN theme.
   Re-map its private vars to chrome so tabs, cards, buttons, inputs, tables,
   callouts, links all re-skin monochrome. Loaded last → wins. */
body.chempro{
  --cp:#C8CAD8!important; --cp2:#E8EAF0!important; --cp-deep:#9496AA!important; --cp-ink:#04050A!important;
  --gold:#C8CAD8!important; --gold2:#E8EAF0!important; --acc:#C8CAD8!important; --acc2:#9496AA!important;
}
body.chempro .tabs button.on,
body.chempro .btn:not(.ghost):not(.danger):not(.violet){
  background:linear-gradient(135deg,#E8EAF0,#C8CAD8)!important;color:#04050A!important;box-shadow:none!important;}
body.chempro .card:hover{border-color:var(--line3)!important;box-shadow:0 22px 60px -14px rgba(0,0,0,.5)!important;}
body.chempro .f:focus,body.chempro input.f:focus,body.chempro select.f:focus,
body.chempro textarea.f:focus,body.chempro .searchbar:focus-within{
  border-color:#C8CAD8!important;box-shadow:0 0 0 3px rgba(255,255,255,.14)!important;}
body.chempro a:hover{color:#F2F3FA!important;}
body.chempro .tool-head h1,body.chempro .card.stat .n{text-shadow:none!important;}

/* LEAK 13 — body.aw-premium tool skin (tool-premium.css) hardcodes --ta:#22d3ee and
   pages set it inline `style="--ta:#hex"`. !important custom-prop beats inline (no
   !important there) → force the accent pair to chrome for every aw-premium tool. */
body.aw-premium{
  --ta:#C8CAD8!important; --ta2:#E8EAF0!important;
  --gold:#C8CAD8!important; --gold2:#E8EAF0!important; --acc:#C8CAD8!important;
}
body.aw-premium .tabs button.on,
body.aw-premium .btn:not(.ghost):not(.danger):not(.violet){
  background:linear-gradient(135deg,#E8EAF0,#C8CAD8)!important;color:#04050A!important;box-shadow:none!important;}
body.aw-premium a:hover{color:#F2F3FA!important;}
/* LIGHT counterparts (2026-07-12) for the two skin-kill blocks above: their body-level !important token
   pins beat the html-level light re-pins AND the skins' own light blocks, leaving pale-chrome accents and a
   near-WHITE link hover on the light canvas. Same force, dark-ink values. */
html[data-theme="light"] body.chempro,html[data-theme="light"] body.aw-premium{
  --cp:#26241C!important; --cp2:#26241C!important; --cp-deep:#14151C!important; --cp-ink:#F5F4F0!important;
  --ta:#26241C!important; --ta2:#26241C!important;
  --gold:#26241C!important; --gold2:#26241C!important; --acc:#26241C!important; --acc2:#6B6E85!important;
}
html[data-theme="light"] body.chempro a:hover,html[data-theme="light"] body.aw-premium a:hover{color:#14151C!important;}
html[data-theme="light"] body.chempro .f:focus,html[data-theme="light"] body.chempro input.f:focus,
html[data-theme="light"] body.chempro select.f:focus,html[data-theme="light"] body.chempro textarea.f:focus,
html[data-theme="light"] body.chempro .searchbar:focus-within{
  border-color:#26241C!important;box-shadow:0 0 0 3px rgba(10,10,15,.10)!important;}

/* ::selection — kill any coloured highlight → chrome */
::selection{background:rgba(200,202,216,.28);color:#F2F3FA;}

/* ---------------------------------------------------------------------------
   TASK 4 · SELECTOR OVER-MATCH FIX.
   .stat-grid (tools/security-incident.html) is a display:grid WRAPPER, but the
   core's [class*="stat-"] rule blows it to 42px bold. Reset the wrapper's own
   type so its child stat cards size themselves (their .n stays 42px on purpose). */
.stat-grid{font-size:var(--text-base,15px)!important;font-weight:400!important;letter-spacing:normal!important;}

/* ---------------------------------------------------------------------------
   TASK 3 · GLOSS REINFORCEMENT.
   User wants GLOSSY, not flat. Layer a subtle top-lit sheen + inset highlight
   over the real surface classes so they read as glass, WITHOUT wiping any
   legitimate background-image (backdrops on chempro/aw-premium ::before are
   separate pseudo-elements, untouched). Applied via background-image so a solid
   background: colour under it is preserved. .card.glow keeps its own hover glow. */
.card,[class*="card"],[class*="panel"]:not(nav):not(header),[class*="widget"],
.tool-guide,.tr-sq,.tr-coursecard,.dom-card,.stu-tool{
  background-image:
    linear-gradient(158deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.015) 55%,transparent 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 8px 32px rgba(0,0,0,.5)!important;
}
/* keep the interactive glow-card hover lift feeling glossy (chrome, not cyan) */
.card.glow:hover,.dom-card.card.glow:hover{
  border-color:var(--line3)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 16px 48px rgba(0,0,0,.55)!important;
}
/* 2026-07-10: "clair"/light-position theme is now a SIMPLE dark-white look —
   no gloss. Placed after TASK 3 above so it wins this specific fight (same
   file, later rule) regardless of any cross-file specificity ordering. */
html[data-theme="light"] .card,html[data-theme="light"] [class*="card"],
html[data-theme="light"] [class*="panel"]:not(nav):not(header),html[data-theme="light"] [class*="widget"],
html[data-theme="light"] .tool-guide,html[data-theme="light"] .tr-sq,html[data-theme="light"] .tr-coursecard,
html[data-theme="light"] .dom-card,html[data-theme="light"] .stu-tool{
  background-image:none!important;
  box-shadow:none!important;
}
html[data-theme="light"] .card.glow:hover,html[data-theme="light"] .dom-card.card.glow:hover{
  box-shadow:none!important;
}

/* ---------------------------------------------------------------------------
   TASK 5 · CONTRAST / READABILITY.
   Map form fields + muted text onto the dark-white ladder. Inputs get
   --bg-raised (#0C0D18) + #F2F3FA text; placeholders stay legible (>4.5:1). */
input,select,textarea,.f,.searchbar{
  background:#0C0D18!important;color:#F2F3FA!important;border-color:var(--line2)!important;}
input::placeholder,textarea::placeholder,.f::placeholder{color:#9496AA!important;opacity:1!important;}
input:focus,select:focus,textarea:focus,.f:focus,.searchbar:focus-within{
  border-color:#C8CAD8!important;box-shadow:0 0 0 3px rgba(255,255,255,.12)!important;outline:none!important;}
/* muted paragraph / footer text: floor at --text-tertiary contrast, no washed blue-grey */
/* .tiny (main.css) uses --dim directly instead of --mut, and isn't caught by the [class*="muted"] net below
   since "tiny" doesn't contain "muted" — it renders at ~1.5–2:1 contrast in both themes (--dim is a genuinely
   low-contrast decorative token, not meant for real content). .tiny is used sitewide for real safety content
   here (OCR verdicts, PPE guidance, transport classification), so give it the same already-verified-AA color
   as the rest of the muted-text family instead of leaving it on the low-contrast token. */
.muted,[class*="muted"],.sub,.dim,.tiny,footer,footer a{color:#9496AA!important;}
footer a:hover{color:#F2F3FA!important;}

/* ---------------------------------------------------------------------------
   TASK 6 · RTL GUARD.
   design2.css already binds html[lang="ar"],[dir="rtl"] → Tajawal. Re-assert
   here so our forced-dark block above can't strand Arabic on the wrong font,
   keep comfortable line-height + dark-white legibility. Layout/direction intact. */
html[lang="ar"],[dir="rtl"],.arabic{
  --font:'Tajawal','Inter',system-ui,sans-serif;
  --font-display:'Tajawal','Georgia',serif;
  --font-title:'Tajawal','Georgia',serif;
  direction:rtl;line-height:1.9;color:var(--text-secondary,#B8BAD0);
}
html[lang="ar"] body,[dir="rtl"] body{background:var(--bg-base,#07080F);}
/* Keep numeric fields LTR even inside an RTL page — digits/units must not mirror */
html[lang="ar"] input[type="number"],[dir="rtl"] input[type="number"],
html[lang="ar"] input[type="tel"],[dir="rtl"] input[type="tel"],
html[lang="ar"] input[type="datetime-local"],[dir="rtl"] input[type="datetime-local"],
html[lang="ar"] input[type="date"],[dir="rtl"] input[type="date"],
html[lang="ar"] input[type="time"],[dir="rtl"] input[type="time"]{direction:ltr;text-align:right;}

/* ===== 2026-07-04b round-2 polish ===== */
/* Every rule below is a SPECIFIC selector + !important so it beats the
   per-page inline <style> blocks (which have no !important) and main.css.
   Chrome ladder only: #E8EAF0 shine · #C8CAD8 bright · #9496AA mid ·
   #6E7090 tertiary · #3A3C52 dim · white-alpha rgba(255,255,255,.04–.24).
   The ONE meaning-bearing exception kept in colour is the live/online status
   dot (.gd-live .dot) — explicitly allowed by the mandate. */

/* ---------------------------------------------------------------------------
   TASK 1 · RESIDUAL COLOR-LEAK KILL (inline <style> blocks the round-1 pass
   couldn't reach: per-page decorative classes hardcode saturated hues instead
   of flowing through the --acc/--gold token remap). Each distinct leak → chrome.
   --------------------------------------------------------------------------- */

/* R1 — regional "confidence" badges (green .conf-high / amber .conf-med) on
   france/gulf/international/morocco → neutral tonal step, no green/amber hue */
.conf-high{border-color:rgba(245,244,240,.28)!important;color:#E8EAF0!important;background:rgba(255,255,255,.07)!important;}
.conf-med{border-color:rgba(245,244,240,.20)!important;color:#C8CAD8!important;background:rgba(255,255,255,.05)!important;}
.conf-low{border-color:rgba(245,244,240,.14)!important;color:#9496AA!important;background:rgba(255,255,255,.035)!important;}

/* R2 — region source/domain labels + hover (cyan #7dd3fc / violet #a78bfa /
   green #34d399 depending on page) → chrome */
.reg-dom,.reg-src{color:#C8CAD8!important;border-color:var(--line3)!important;}
.reg-src:hover,.auth-list a:hover{color:#F2F3FA!important;border-color:var(--line3)!important;}

/* R3 — per-page ACTIVE hub tabs (france/gulf/morocco/international/tools) that
   hardcode a hued underline+fill+inset-ring. Neutralise to a chrome pill. */
.gulf-tab.on,.ma-tab.on,.intl-tab.on,.fr-tab.on,
.cp-tab.on,.cs-tab.on,.pt-tab.on,.ps-tab.on,.hop-tab.on,.heat-tab.on,.nl-tab.on{
  border-color:var(--line3)!important;color:#F2F3FA!important;
  background:rgba(255,255,255,.07)!important;box-shadow:inset 0 0 0 1px var(--line2)!important;}

/* R4 — "best working window" heat panel (amber/orange gradient + amber .win /
   .meta b) — decorative climate banner, NOT a safety heat-scale → chrome */
.heat-cell{border-color:var(--line2)!important;
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015))!important;}
.heat-banner{border-color:var(--line3)!important;
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02))!important;}
.heat-cell .win,.heat-banner .meta b{color:#E8EAF0!important;}

/* R5 — active carousel / filter chips whose "on" state is a cyan gradient
   (future-needs .fut-chip/.an-chip, guardians .gd-chip). White selected pill. */
.fut-chip.on,.an-chip.on,.gd-chip.on{
  color:#04050A!important;border-color:transparent!important;
  background:linear-gradient(180deg,#FFFFFF,#E8EAF0 60%,#C8CAD8)!important;font-weight:700!important;}
.fut-chip .dot,.gd-chip .d{background:#9496AA!important;box-shadow:none!important;}

/* R6 — future-needs numbered step badges + monogram (cyan gradient text/fills) */
.md-n,.about-mono{
  color:#04050A!important;
  background:linear-gradient(135deg,#E8EAF0,#C8CAD8)!important;
  -webkit-text-fill-color:initial!important;}
.about-mono{color:#04050A!important;}
.md-detail{--acc:#C8CAD8!important;}

/* R7 — gold rating stars (.fm-star.on) → chrome shine, kill amber glow */
.fm-star.on,.fm-star:hover{color:#E8EAF0!important;text-shadow:none!important;}

/* R8 — "LIVE" label text → chrome. The pulsing STATUS DOT stays green
   (.gd-live .dot) as the single allowed meaning-bearing colour. */
.gd-live{color:#9496AA!important;}

/* R9 — HOP-assessment tool (violet #a78bfa/#c4b5fd principle badges, radios) */
.hop-princ-n{background:#9496AA!important;color:#04050A!important;}
.hop-princ-t{color:#E8EAF0!important;}
.hop-scale label:hover{border-color:var(--line3)!important;color:#F2F3FA!important;}
.hop-scale input{accent-color:#C8CAD8!important;}

/* R10 — cyan section labels / stat values / preview headings across the
   tool pages (.sectlabel, .cp-sval, .pt-stat .v, .cp-prev/.pt-prev/.ps-card/
   .wv-prev h2, .wv-add / .wv-typebadge, .cp-tab/.cs-tab/.pt-tab/.ps-tab text). */
.sectlabel,.cp-sval,.pt-stat .v,.cp-prev h2,.pt-prev h2,.ps-card h2,.wv-prev h2,
.cp-tab.on,.cs-tab.on,.pt-tab.on,.ps-tab.on,.gd-card .tool,.faq-item summary::after,
.wv-add{color:#C8CAD8!important;}
.wv-typebadge{background:rgba(255,255,255,.08)!important;color:#C8CAD8!important;}
/* light-theme counterpart (2026-07-12): the pale chrome above is tuned for the dark canvas and rendered
   near-invisible (~1.6:1) on the light warm-white tool pages — same theme-blind !important pattern fixed
   elsewhere; flip the whole family to the dark-ink accent used by every other light-theme chrome accent */
html[data-theme="light"] .sectlabel,html[data-theme="light"] .cp-sval,html[data-theme="light"] .pt-stat .v,
html[data-theme="light"] .cp-prev h2,html[data-theme="light"] .pt-prev h2,html[data-theme="light"] .ps-card h2,
html[data-theme="light"] .wv-prev h2,html[data-theme="light"] .cp-tab.on,html[data-theme="light"] .cs-tab.on,
html[data-theme="light"] .pt-tab.on,html[data-theme="light"] .ps-tab.on,html[data-theme="light"] .gd-card .tool,
html[data-theme="light"] .faq-item summary::after,html[data-theme="light"] .wv-add{color:#26241C!important;}
html[data-theme="light"] .wv-typebadge{background:rgba(10,10,15,.07)!important;color:#26241C!important;}
/* the "companion guide" callout on the money-cluster calculators (#artLink on trir/injury-cost/
   injury-settlement/workers-comp) is styled per-page with a pale sky-blue tuned for dark — unreadable
   (~1.3:1) on the light canvas */
html[data-theme="light"] #artLink{color:#26241C!important;border-color:rgba(10,10,15,.22)!important;background:rgba(10,10,15,.05)!important;}
html[data-theme="light"] #artLink:hover{background:rgba(10,10,15,.09)!important;}
.ps-radio.sel{border-color:var(--line3)!important;background:rgba(255,255,255,.07)!important;color:#F2F3FA!important;}
/* delete/danger tool buttons keep a desaturated warm-neutral, no pure red */
.wv-del{background:rgba(201,168,168,.10)!important;color:#c9a8a8!important;border-color:rgba(201,168,168,.35)!important;}

/* R11 — CSRD / PSIF severity + RAG swatches. These read as a risk/severity
   scale, so keep a legible tonal STEP (light→dark chrome) — no hue. */
.cs-E,.cs-S,.cs-G{background:rgba(255,255,255,.07)!important;color:#E8EAF0!important;}
.rag-lo,.b-grn{background:#C8CAD8!important;color:#04050A!important;}
.rag-md,.b-yel{background:#9496AA!important;color:#04050A!important;}
.rag-hi,.b-org{background:#6E7090!important;color:#F2F3FA!important;}
.rag-cr,.b-red{background:#3A3C52!important;color:#F2F3FA!important;}

/* R12 — contact-page category list accent (.ct-list panel --p:#818cf8) and
   any panel that sets an inline hued --p / --c var. --acc/--p already remap
   via LEAK 9; re-pin --c (guardians dots) + --p (panels) to chrome as well. */
.panel[style*="--p:"],.ct-list{--p:#9496AA!important;}
[style*="--c:#"]{--c:#9496AA!important;}

/* ---------------------------------------------------------------------------
   TASK 2 · PRIMARY / HERO CTA → GLOSSY WHITE.
   This site's hero CTA class is main.css `.btn` (background:var(--gold);
   color:#141414). Round-1 LEAK 6 already forces the fill white, but its :hover
   left a cyan glow (main.css .btn:hover box-shadow rgba(34,211,238,.28)) and
   the cyan border. Finish the job: glossy-white + chrome shadow on hover, and
   also cover the core's BEM solid-CTA selectors for any page that uses them. */
.btn:not(.ghost):not(.danger):not(.violet),
.btn--solid,[class*="btn--solid"],[class*="btn-solid"],[class*="cta-btn"],[class*="btn-cta"]{
  background:#FFFFFF!important;
  background-image:linear-gradient(180deg,#FFFFFF,#EDEFF5)!important;
  color:#04050A!important;border-color:#FFFFFF!important;}
.btn:not(.ghost):not(.danger):not(.violet):hover,
.btn--solid:hover,[class*="cta-btn"]:hover,[class*="btn-cta"]:hover{
  background-image:linear-gradient(180deg,#FFFFFF,#F2F3FA 60%,#E8EAF0)!important;
  color:#04050A!important;border-color:#FFFFFF!important;
  box-shadow:0 8px 24px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.6)!important;}
/* .btn.violet is an outline "ghost-violet" variant → chrome outline, not white */
.btn.violet{background:transparent!important;color:var(--c2)!important;border-color:var(--line3)!important;}
.btn.violet:hover{background:rgba(255,255,255,.08)!important;color:#F2F3FA!important;border-color:var(--line3)!important;}

/* light counterpart for the BEM solid-CTA selectors above (2026-07-10, restored) —
   same reasoning as the LEAK 6 light counterpart: a white fill is invisible on
   the light theme's real white canvas, so flip to dark ink under light. */
html[data-theme="light"] .btn--solid,html[data-theme="light"] [class*="btn--solid"],
html[data-theme="light"] [class*="btn-solid"],html[data-theme="light"] [class*="cta-btn"],
html[data-theme="light"] [class*="btn-cta"]{
  background:#26241C!important;background-image:linear-gradient(180deg,#2A2C3D,#26241C 70%)!important;
  color:#FFFFFF!important;border-color:#26241C!important;}
html[data-theme="light"] .btn--solid:hover,html[data-theme="light"] [class*="cta-btn"]:hover,
html[data-theme="light"] [class*="btn-cta"]:hover{
  background-image:linear-gradient(180deg,#3A3C52,#14151C 70%)!important;
  color:#FFFFFF!important;border-color:#26241C!important;
  box-shadow:0 8px 24px rgba(20,21,28,.25),inset 0 1px 0 rgba(255,255,255,.08)!important;}

/* ---------------------------------------------------------------------------
   TASK 3 · HEADER + NAV BUTTON REFINEMENT.
   The core turns every `nav a` into a padded pill. On this site the logo is
   `header.site-head > a.brand` (OUTSIDE <nav>), so it escapes the pill rule —
   but re-assert a hard reset in case markup shifts, and reset the brand lockup.
   Also tighten the nav pill padding a touch so the multi-item nav doesn't crowd,
   and keep the active item a clean chrome pill (no jewel underline). */
.site-head a.brand,.brand,[class*="brand"]{
  padding:0!important;background:none!important;background-image:none!important;
  box-shadow:none!important;border:0!important;border-radius:0!important;}
.brand:hover,.site-head a.brand:hover{background:none!important;box-shadow:none!important;}
.brand .logo{filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))!important;}
.brand-accent,.brand-lockup-nav .brand-accent{color:#C8CAD8!important;}
/* tighten nav pill spacing for this site's wider top-nav */
.nav-links a.top{padding:7px 11px!important;}
.nav-links{gap:2px!important;}
/* active top-nav item = clean chrome pill, never a hued underline */
.nav-links a.top.on,.nav-links a.top.active,nav a.active,nav a.on{
  color:#F2F3FA!important;border-bottom:none!important;
  background:rgba(255,255,255,.07)!important;
  box-shadow:inset 0 0 0 1px var(--line2)!important;}
/* header keeps the glossy dark chrome surface + machined sheen */
.site-head{
  background:rgba(4,5,8,.82)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(0,0,0,.5),0 12px 40px rgba(0,0,0,.32)!important;
  border-bottom:1px solid var(--line)!important;}
.site-head.scrolled{background:rgba(4,5,8,.92)!important;}

/* ---------------------------------------------------------------------------
   TASK 4 · CHOICE CHIPS / FILTER BUTTONS.
   The core polishes generic .chip/.tag/.pill. This site's unique chip classes
   (.fut-chip .an-chip .gd-chip .bt-chip .bi-chip .chip.dom-chip .lang-btn)
   need the same glossy-dark pill idle + hover; selected states handled in R5.
   NOTE: [class*="tab"] wrappers (…-tabwrap/…-tablewrap) are TABLE wrappers, not
   chips — the core chip rule doesn't match them, and we don't touch them here. */
.fut-chip,.an-chip,.gd-chip,.bt-chip,.bi-chip,.chip.dom-chip,.lang-btn{
  border:1px solid var(--line2)!important;border-radius:999px!important;
  background-image:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0))!important;
  color:var(--c2)!important;
  transition:color .18s,border-color .18s,background .18s,box-shadow .18s!important;}
.fut-chip:hover,.an-chip:hover,.gd-chip:hover,.bt-chip:hover,.bi-chip:hover,
.chip.dom-chip:hover,.lang-btn:hover{
  border-color:var(--line3)!important;color:#F2F3FA!important;
  background:rgba(255,255,255,.08)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;}
/* language switcher active = white pill (chrome ink) */
.lang-btn.on{
  color:#04050A!important;border-color:transparent!important;
  background:linear-gradient(180deg,#FFFFFF,#E8EAF0 60%,#C8CAD8)!important;box-shadow:none!important;}

/* ---------------------------------------------------------------------------
   TASK 5 · RTL GUARD (round-2).
   Nav pills / chips use logical padding via the shorthand, so they mirror
   correctly. Re-assert symmetric padding + no clipping for Arabic, and keep
   the chrome dark-white legible. Direction/layout untouched. */
[dir="rtl"] .nav-links a.top,[dir="rtl"] .nav-links span.top{padding-inline:10px!important;}
[dir="rtl"] .fut-chip,[dir="rtl"] .an-chip,[dir="rtl"] .gd-chip,
[dir="rtl"] .conf-high,[dir="rtl"] .conf-med,[dir="rtl"] .reg-dom{
  padding-inline:10px!important;text-align:start;}
[dir="rtl"] .btn:not(.ghost):not(.danger){letter-spacing:normal!important;}
html[lang="ar"] .brand-accent,[dir="rtl"] .brand-accent{color:#C8CAD8!important;}

/* ---------------------------------------------------------------------------
   TASK 7 · THEME TOGGLE BUTTON (2026-07-04 fix).
   This site had no visible way to switch theme — data-theme could only be set
   by hand-editing localStorage. Adds a round icon button next to the language
   switch, matching the existing .lang-switch/.burger pill treatment. Wired in
   app.js (#themeToggle) to flip html[data-theme] and persist to the same
   "d2-theme" localStorage key the inline anti-FOUC bootstrap script reads. */
/* language switch + theme toggle live in one .nav-controls group (app.js) so they read as a single
   coherent control cluster instead of two floating pills */
.nav-controls{display:flex;align-items:center;gap:8px;}
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;margin-left:0;padding:0;
  border:1px solid var(--line2);border-radius:999px;
  background:rgba(15,15,18,.65);color:var(--txt);cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:color .25s,background .25s,border-color .25s;
}
[dir="rtl"] .theme-toggle{margin-left:0;margin-right:0;}
.theme-toggle:hover{color:#F2F3FA;border-color:var(--line3);}
.theme-toggle:focus-visible{outline:2px solid var(--line3);outline-offset:2px;}
.theme-toggle-ic{display:none;}
/* dark theme (default): show sun (click to go light) */
html[data-theme="dark"] .theme-toggle-sun,:root:not([data-theme]) .theme-toggle-sun{display:block;}
/* light theme: show moon (click to go dark) */
html[data-theme="light"] .theme-toggle-moon{display:block;}

/* ---------------------------------------------------------------------------
   TASK 8 · LIGHT-MODE TOKEN COMPLETION (2026-07-10, restored).
   Static diff found these tokens declared ONLY under :root/html[data-theme="dark"]
   in this file, with no html[data-theme="light"] counterpart — so components that
   read them directly (cards, buttons, nav, per-tool accent chips, status badges)
   stayed dark-colored even after the html[data-theme] attribute flipped to light.
   Values mirror the same monochrome-chrome logic already used above: chrome
   accents get DARKENED (mid/dark chrome family) so they stay legible on the
   light warm-white canvas instead of the near-white chrome tuned for a dark
   canvas, which would nearly vanish. Status tones stay restrained/desaturated,
   just shifted slightly darker for contrast on light. Gradients keep their
   existing light→dark STRUCTURE, re-tuned to the dark-chrome family.
   --------------------------------------------------------------------------- */
html[data-theme="light"]{
  /* generic accent (nav-active underline, focus ring) — darken chrome for light bg */
  --accent:#26241C !important;
  /* status tones — same desaturated family, nudged for contrast on light */
  --ok:#4d7a63 !important; --warn:#8a7f4d !important; --bad:#a24d4d !important;
  /* decorative chrome gradients/metals — flip to mid/dark chrome family */
  --grad:linear-gradient(100deg,#26241C,#6B6E85 55%,#9496AA) !important;
  --grad3:linear-gradient(110deg,#14151C,#26241C 50%,#6B6E85) !important;
  --brand-metal:linear-gradient(180deg,#26241C,#26241C 55%,#6B6E85) !important;
  --brand-accent-metal:linear-gradient(180deg,#14151C,#26241C 58%,#6B6E85) !important;
  /* per-panel inline accent vars (--c / --p consumed by .panel[style*="--p:"], [style*="--c:#"]) */
  --c:#6B6E85 !important; --p:#6B6E85 !important;
  /* per-tool accent-pair vars (chempro --cp*, aw-premium --ta*) — dark chrome on light fill,
     with --cp-ink flipped to a LIGHT ink since the fill itself is now dark chrome.
     !important: an earlier unconditional component rule (.card,[class*="card"]{--acc/--tr-acc:...!important})
     also sets some of these tokens directly on cards with !important and no theme
     guard — without matching !important here, that rule would keep winning under
     light mode (non-!important loses to !important regardless of source order). */
  --cp:#26241C !important; --cp2:#6B6E85 !important; --cp-deep:#14151C !important; --cp-ink:#FFFFFF !important;
  --ta:#26241C !important; --ta2:#6B6E85 !important;
  /* training-rail / domain-card accent fallback consumed as --tr-acc */
  --tr-acc:#26241C !important;
}

/* ============================================================================
   TASK 9 · LIGHT-MODE HARDCODED-COLOR FIX (2026-07-10).
   main.css hardcodes color:#fff on several headings (never used a CSS
   variable), so they stayed invisible white-on-white once the light theme
   got a real white background. Same issue for the homepage "stage" cinematic
   banner (.aw-bg): its radial-gradient background is hardcoded to near-black
   #0a0a14, completely unconditional — that is the dark carousel that
   wouldn't "melt into" light mode. And .site-head.scrolled's background is
   hardcoded dark too, which is why the header stayed black once scrolled.
   ============================================================================ */
html[data-theme="light"] .hero h1,
html[data-theme="light"] .sec-t,
html[data-theme="light"] .stat .n,
html[data-theme="light"] .tool-head h1,
html[data-theme="light"] .ring .v,
html[data-theme="light"] .aw-scene-title{
  color:#26241C!important;
}
/* follow-up (2026-07-10): the fix above only recolored .aw-bg's two-stop
   radial-gradient (tint -> #E3E0D3 at a fixed 1200x820px/70% stop); it never
   changed the gradient's *geometry*, so a soft-edged oval where the tint
   finishes fading was still visible floating in the middle of the hero
   against the bright page background. Go flat instead — matches the
   already-flat .aw-aurora treatment below and removes any bounded edge. */
html[data-theme="light"] .aw-bg{
  background:var(--bg)!important;
}
html[data-theme="light"] .site-head,
html[data-theme="light"] .site-head.scrolled{
  background:rgba(242,241,236,.92)!important;
  box-shadow:0 1px 0 rgba(10,10,15,.06),0 14px 40px rgba(20,21,28,.10)!important;
}
html[data-theme="light"] .site-head{border-bottom-color:rgba(10,10,15,.09)!important;}

/* ============================================================================
   TASK 10 · CURSOR, DROPDOWN, STAGE-AURORA, DISCIPLINE-RAIL FIXES (2026-07-10).
   ============================================================================ */
/* "change cursor to light only" — the custom cursor dot/glow/ring uses --gold,
   which flips to dark chrome under the light theme (correct for buttons, wrong
   here — a dark, low-contrast cursor reads as broken). Pin it to the light
   chrome tone always, regardless of theme. */
.cursor-dot{background:#C8CAD8!important;}
.cursor-glow{background:radial-gradient(circle,rgba(200,202,216,.10) 0%,rgba(200,202,216,.03) 38%,transparent 68%)!important;}
.cursor-ring{border-color:rgba(200,202,216,.5)!important;}
.cursor-on-btn .cursor-ring{border-color:#C8CAD8!important;box-shadow:0 0 14px -2px #C8CAD8!important;}
.cursor-on-btn .cursor-glow{background:radial-gradient(circle,rgba(200,202,216,.17) 0%,rgba(200,202,216,.05) 42%,transparent 70%)!important;}

/* follow-up (2026-07-11): pinning the cursor to the light chrome tone
   "regardless of theme" fixed dark-theme legibility but made light-theme
   pages (e.g. the tool pages' warm-white/cream canvas) read as a grey wash
   under the glow — pale-on-light is still a visible haze, just not the
   dark-low-contrast problem the pin was meant to solve. Make it adapt to
   theme instead of ignoring it: keep the light chrome tone as the dark-theme
   default above, and give light theme its own dark-ink variant at matching
   opacity, consistent with how every other chrome accent in this file flips
   dark-on-light (--accent:#26241C, see TASK 8 above). */
html[data-theme="light"] .cursor-dot{background:#26241C!important;}
html[data-theme="light"] .cursor-glow{background:radial-gradient(circle,rgba(38,36,28,.09) 0%,rgba(38,36,28,.03) 38%,transparent 68%)!important;}
html[data-theme="light"] .cursor-ring{border-color:rgba(38,36,28,.45)!important;}
html[data-theme="light"] .cursor-on-btn .cursor-ring{border-color:#26241C!important;box-shadow:0 0 14px -2px rgba(38,36,28,.5)!important;}
html[data-theme="light"] .cursor-on-btn .cursor-glow{background:radial-gradient(circle,rgba(38,36,28,.15) 0%,rgba(38,36,28,.05) 42%,transparent 70%)!important;}

/* "fix the transparency of menus... make them smaller and bending to design" —
   .dropdown reused the --glass token, but this file's own --glass (a subtle
   icon-accent tint, ~5% opacity) collided with main.css's unrelated "glass
   panel" concept, leaving the whole dropdown menu nearly see-through with
   page content bleeding through. Give it its own solid, theme-correct
   background instead, and tighten the padding/sizing. */
.dropdown{background:var(--bg-elevated,#111220)!important;min-width:520px!important;padding:10px!important;border-radius:14px!important;}
html[data-theme="light"] .dropdown{background:#EFECDF!important;box-shadow:0 20px 48px rgba(20,21,28,.14)!important;}
/* one type scale for EVERY top-level nav item — previously only a.top got the .86rem bump, so the
   three dropdown TRIGGERS (span.top: Disciplines / Systems Creation / Explore) rendered at the base
   .7rem while link items rendered .86rem: two different sizes side-by-side in one nav bar. */
.nav-links a.top,.nav-links span.top{padding:6px 10px!important;font-size:.8rem!important;letter-spacing:.08em!important;}
.disc-acc-tools a{padding:6px 10px!important;font-size:.84rem!important;}

/* "take off the round edge in cinematic disciplines and put them all screen" —
   the homepage stage's rotating conic-gradient "aurora" (heavily blurred, so
   it reads as a big soft circle/blob) was tuned for the glossy dark theme.
   The light theme is deliberately flat/simple (see the dark-white section
   above), so the aurora blob looks like an unintended round card edge there.
   Suppress it under light; dark keeps the full glossy effect untouched. */
html[data-theme="light"] .aw-aurora{opacity:0!important;}

/* "fix the list of disciplines in the right to bend to design" — .aw-rail
   floats bare text with no container, so it has no contrast surface and can
   run past the viewport edge. Give it a real panel: solid background, radius,
   padding, contained width, matching the site's card language. */
.aw-rail{
  background:var(--bg-elevated,#111220)!important;
  border:1px solid var(--line2,rgba(255,255,255,.16))!important;
  border-radius:14px!important;
  padding:14px 16px!important;
  inset-inline-end:24px!important;
  max-width:200px!important;
  box-shadow:0 16px 40px rgba(0,0,0,.35)!important;
}
html[data-theme="light"] .aw-rail{
  background:#EFECDF!important;
  border-color:rgba(10,10,15,.12)!important;
  box-shadow:0 16px 40px rgba(20,21,28,.10)!important;
}
.aw-rail button{justify-content:flex-start!important;}
@media(max-width:1180px){.aw-rail{display:none!important;}}

/* ============================================================================
   TASK 11 · SYSTEMS-CREATION TOOL PAGES — LIGHT-MODE HARDCODED TEXT COLOR
   (2026-07-10). "languages are not working in hero" screenshot turned out to
   be a table on a "Systems Creation" generator tool (RBA Labor & Ethics'
   Regulatory & Compliance Obligations Register) with white-on-near-white
   headers. Root cause: the 19 ISO/IATF/RBA/CSR/wellbeing generator tools
   (tools/iso*.html, iatf16949-system.html, rba-*.html, csr-management-
   system.html, wellbeing-mental-health-framework.html) were all cloned from
   one master template with an inline <style> block written for the dark
   theme only — every heading/label/table-header color is a hardcoded
   near-white or pale accent-tinted hex (varies per file: #ede9fe/#bfe6fb/
   #cfeafd/#c7f5e2/#99f6e4/#fde68a/#fde7b0/#fcd34d/#bdeed7), never scoped to
   [data-theme]. Two clone lineages exist with renamed-but-equivalent
   selectors (iso14001/iso50001 use .docbtn/.tbl-mini/.asp-tbl/.ctaband/
   .callout/.chkgrid instead of .doc-card/.chk-tbl/.cta-card), plus 5 later
   tools that added their own one-off register/matrix tables reusing the same
   pale-header pattern (.bia-tbl, .brr-tbl, .mvr-tbl, .reg-tbl ×2). Since the
   exact hex differs per file but the SELECTOR names repeat, one value
   (dark ink) covers every variant regardless of its original accent tint.
   ============================================================================ */
html[data-theme="light"] .iso-prev h1,
html[data-theme="light"] .iso-prev h2,
html[data-theme="light"] .iso-prev h3,
html[data-theme="light"] .iso-prev th,
html[data-theme="light"] .iso-sec>summary .nm,
html[data-theme="light"] .doc-card .dc-h,
html[data-theme="light"] .doc-card .dc-t,
html[data-theme="light"] .docbtn .dt,
html[data-theme="light"] .chk-tbl th,
html[data-theme="light"] .tbl-mini th,
html[data-theme="light"] .asp-tbl th,
html[data-theme="light"] .mtx-tbl th,
html[data-theme="light"] .mtx-tbl td.tp,
html[data-theme="light"] .cta-card .cc-h,
html[data-theme="light"] .callout h3,
html[data-theme="light"] .ctaband .t b,
html[data-theme="light"] .bia-tbl th,
html[data-theme="light"] .brr-tbl th,
html[data-theme="light"] .mvr-tbl th,
html[data-theme="light"] .reg-tbl th,
html[data-theme="light"] .haz-chip.on{
  color:#26241C!important;
}
/* table-header tint backgrounds were set at ~10% alpha of the same
   accent hue as the (now-overridden) text, so they stay legible as a subtle
   wash under either theme — left untouched deliberately. */

/* ============================================================================
   TASK 12 · GLOBAL FORM FIELDS — LIGHT-MODE COUNTERPART (2026-07-10).
   TASK 5 above ("CONTRAST / READABILITY") forces every input/select/textarea
   site-wide to a hardcoded dark box (#0C0D18 bg, #F2F3FA text) with
   !important and NO [data-theme] scope — so in light mode every form field
   on every page (search bars, the tool intake forms, newsletter boxes) sits
   as a dark island on the pale page background. Not text-on-text invisible
   like TASK 11, but a real "it stays dark" symptom for exactly the elements
   users interact with most. Give light mode its own !important counterpart
   (same specificity family, so it must also be !important to win) — light
   panel bg, dark ink, muted-gray placeholder, dark-chrome focus ring instead
   of the white glow. */
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .f,
html[data-theme="light"] .searchbar{
  background:#EFECDF!important;color:#26241C!important;border-color:rgba(10,10,15,.16)!important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder,
html[data-theme="light"] .f::placeholder{
  color:#75778C!important;opacity:1!important;
}
html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] .f:focus,
html[data-theme="light"] .searchbar:focus-within{
  border-color:#26241C!important;box-shadow:0 0 0 3px rgba(10,10,15,.10)!important;outline:none!important;
}
html[data-theme="light"] .muted,
html[data-theme="light"] [class*="muted"],
html[data-theme="light"] .sub,
html[data-theme="light"] .dim,
html[data-theme="light"] .tiny,
html[data-theme="light"] footer,
html[data-theme="light"] footer a{
  color:#5C5F75!important;
}
html[data-theme="light"] footer a:hover{color:#26241C!important;}

/* ============================================================================
   TASK 13 · CLUSTER ICON BADGES (Design 4.0, 2026-07-10).
   7-cluster nav dropdown group headers get a colored icon badge — same
   grammar as iOS Settings' colored category icons: a rounded-square badge in
   the cluster's own hue, white glyph inside. This is the ONLY place color is
   allowed to live in this design; everything else stays monochrome.
   .disc-group-h had NO prior CSS at all (was unstyled plain text). ============================================================================ */
.disc-group-h{
  display:flex; align-items:center; gap:9px;
  font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mut);
  font-weight:700; padding:10px 12px 6px; margin-top:4px;
}
.disc-group-h:first-child{margin-top:0}
/* per-discipline rows now use the hand-drawn cluster SVG set (emoji retired from menu chrome) —
   the 34px .area-ic tile tints the stroke with the discipline's own accent via --acc */
.disc-acc-head .area-ic svg,.disc-acc-cat .area-ic svg{width:18px;height:18px;stroke:var(--acc,currentColor);display:block}
/* mobile nav panel hardcoded #0e0e10 in main.css with no light counterpart — dark panel on light theme */
@media (max-width:960px){
  html[data-theme="light"] .nav-links{background:#F2F1EC!important;border-bottom-color:rgba(10,10,15,.09)!important;}
}
/* ChemicalPro SDS analyzer columns — was a hardcoded inline grid-template that could never collapse,
   squeezing the paste-textarea and results panel side-by-side at ~170px each on phones */
.sds-cols{grid-template-columns:1fr 1fr;gap:18px;align-items:start;}
@media (max-width:760px){.sds-cols{grid-template-columns:1fr;}}
/* ChemicalPro command center — six job-named "shadow button" doors + register status strip + reference
   rail (approved redesign). The doors drive the now-hidden .tabs buttons; dual shadow = crisp contact +
   long ambient, press physically compresses. */
body.chempro .tabs{display:none!important;}
.cp-status{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-bottom:14px;
  padding:12px 17px;border-radius:16px;border:1px solid var(--line2);background:rgba(255,255,255,.04);
  box-shadow:0 12px 26px -14px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);}
.cp-status .hi{font-weight:700;font-size:.92rem;color:var(--c2,#F5F5F7);}
.cp-status .chip{display:inline-flex;align-items:center;font-size:.74rem;font-weight:600;
  padding:3px 10px;border-radius:999px;border:1px solid var(--line2);background:rgba(255,255,255,.05);color:var(--mut);}
.cp-status .chip.bad{color:var(--bad);}.cp-status .chip.warn{color:var(--warn);}.cp-status .chip.ok{color:var(--ok);}
.cp-launch{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-bottom:12px;}
@media (max-width:820px){.cp-launch{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.cp-launch{grid-template-columns:1fr;}}
.cp-task{position:relative;display:flex;flex-direction:column;gap:5px;text-align:start;cursor:pointer;
  padding:16px 18px;border-radius:18px;
  border:1px solid var(--line2);background:rgba(255,255,255,.045);color:var(--txt);font-family:inherit;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.07);
  transition:border-color .2s,background .2s,transform .18s,box-shadow .18s;}
.cp-task b{font-size:.98rem;font-weight:700;color:var(--c2,#F5F5F7);}
.cp-task small{font-size:.76rem;color:var(--mut);line-height:1.45;}
.cp-task:hover,.cp-task:focus-visible{border-color:var(--line3);background:rgba(255,255,255,.07);
  transform:translateY(-2px);box-shadow:0 20px 42px -14px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.1);}
.cp-task:active{transform:translateY(1px);box-shadow:0 4px 10px -6px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05);}
.cp-task.on{border-color:var(--c2,#F5F5F7);box-shadow:0 4px 12px -6px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);}
.cp-task.cp-emg b{color:var(--bad);}
.cp-badge{position:absolute;top:11px;inset-inline-end:13px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  display:grid;place-items:center;font-size:.66rem;font-weight:800;color:#fff;background:var(--bad);}
.cp-rail{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;}
.refchip{font-family:inherit;font-size:.76rem;font-weight:600;color:var(--txt);cursor:pointer;text-decoration:none;
  border:1px solid var(--line2);border-radius:999px;padding:7px 14px;background:rgba(255,255,255,.04);
  box-shadow:0 10px 22px -12px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .15s,box-shadow .15s,border-color .2s;}
.refchip:hover{transform:translateY(-1px);border-color:var(--line3);}
.refchip:active{transform:translateY(1px);box-shadow:0 3px 8px -5px rgba(0,0,0,.5);}
/* light theme — warm surfaces, contact+ambient shadows in warm ink */
html[data-theme="light"] .cp-status,html[data-theme="light"] .cp-task,html[data-theme="light"] .refchip{
  background:rgba(255,255,255,.6);border-color:rgba(26,25,20,.14);
  box-shadow:0 1px 2px rgba(26,25,20,.07),0 14px 30px -14px rgba(26,25,20,.3),inset 0 1px 0 rgba(255,255,255,.65);}
html[data-theme="light"] .cp-status .hi,html[data-theme="light"] .cp-task b,html[data-theme="light"] .refchip{color:#26241C;}
html[data-theme="light"] .cp-status .chip{background:rgba(26,25,20,.05);border-color:rgba(26,25,20,.13);color:#5C5F75;}
html[data-theme="light"] .cp-task:hover,html[data-theme="light"] .cp-task:focus-visible{
  box-shadow:0 2px 4px rgba(26,25,20,.08),0 20px 40px -14px rgba(26,25,20,.38),inset 0 1px 0 rgba(255,255,255,.75);}
html[data-theme="light"] .cp-task:active,html[data-theme="light"] .refchip:active{
  box-shadow:0 1px 2px rgba(26,25,20,.1),0 4px 10px -6px rgba(26,25,20,.25),inset 0 1px 0 rgba(255,255,255,.4);}
html[data-theme="light"] .cp-task.on{border-color:#26241C;}
@media (prefers-reduced-motion:reduce){.cp-task,.refchip{transition:none;}}
/* SDS-result action bar — hand-grouped (opted out of enhanceToolbars): auto-fill grid keeps every
   row perfectly aligned at any width; group labels use the site's quiet micro-label scale. */
.sds-actions{display:flex;flex-direction:column;gap:14px;}
.sa-h{display:block;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);font-weight:700;margin-bottom:7px;}
.sa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:8px;}
.sa-grid .btn{width:100%;justify-content:center;margin:0;white-space:nowrap;}
.sa-next{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));max-width:440px;}
@media (max-width:520px){.sa-grid,.sa-next{grid-template-columns:1fr 1fr;max-width:none;}}
/* FAB dock pinned dark regardless of theme (rgba(14,14,24,.66)!important in main.css) — light variant */
html[data-theme="light"] .fab-mini,html[data-theme="light"] .donate-float{
  background:rgba(242,241,236,.88)!important;border-color:rgba(10,10,15,.16)!important;
  box-shadow:0 10px 30px rgba(20,21,28,.18)!important;
}
html[data-theme="light"] .fab-mini .fab-mini-label,html[data-theme="light"] .donate-float .donate-float-label{color:#26241C!important;}

/* 2026-07-12 professional navigation rebuild.
   Desktop keeps the established information architecture. Mobile becomes a
   proper off-canvas accordion instead of rendering every dropdown at once. */
.mobile-menu-head,.nav-scrim,.menu-trigger-icon,.menu-trigger-chevron,.nav-feature-arrow{display:none;}
.nav-chempro-copy{display:flex;align-items:center;min-width:0;}
.nav-chempro-copy strong{font:inherit;letter-spacing:inherit;text-transform:inherit;}
.nav-chempro-copy small{display:none;}
.nav-links a.top.nav-chempro{
  min-height:38px;
  padding:5px 11px 5px 6px!important;
  gap:8px!important;
  border-radius:10px!important;
  border-color:var(--line3)!important;
  background:color-mix(in srgb,var(--glass) 88%,var(--c2) 3%)!important;
  color:var(--c2)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
}
.nav-links a.top.nav-chempro:hover,.nav-links a.top.nav-chempro.on{
  color:var(--c2)!important;
  border-color:color-mix(in srgb,var(--c2) 45%,var(--line3))!important;
  background:color-mix(in srgb,var(--glass) 76%,var(--c2) 8%)!important;
  transform:translateY(-1px);
}
.nav-chempro-mark{
  width:27px;height:27px;display:grid;place-items:center;flex:none;
  border-radius:7px;border:1px solid color-mix(in srgb,var(--c2) 20%,var(--line3));
  background:color-mix(in srgb,var(--c2) 7%,transparent);
}
.nav-chempro-ic{width:21px!important;height:21px!important;filter:grayscale(1) saturate(0) contrast(1.15) brightness(1.28)!important;}
html[data-theme="light"] .nav-chempro-ic{filter:grayscale(1) saturate(0) contrast(1.3) brightness(.58)!important;}
.burger-lines{display:grid;width:17px;gap:4px;}
.burger-lines span{display:block;width:100%;height:1.5px;border-radius:2px;background:currentColor;transition:transform .2s,opacity .2s;}
.burger[aria-expanded="true"] .burger-lines span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.burger[aria-expanded="true"] .burger-lines span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] .burger-lines span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}

@media (max-width:960px){
  html,body{overflow-x:clip;}
  body.nav-open{overflow:hidden!important;}
  .site-head{z-index:1000;}
  .nav-scrim{
    display:block;position:fixed;inset:64px 0 0;z-index:940;padding:0;border:0;
    background:rgba(4,5,8,.68);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .22s ease,visibility .22s ease;
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  }
  body.nav-open .nav-scrim{opacity:1;visibility:visible;pointer-events:auto;}
  .nav-links{
    display:flex!important;position:fixed!important;z-index:950;top:64px!important;
    inset-inline-end:0!important;inset-inline-start:auto!important;right:auto;left:auto;
    width:min(420px,100vw);height:calc(100dvh - 64px);max-height:none!important;
    margin:0!important;padding:0 16px 24px!important;gap:0!important;overflow-y:auto!important;
    flex-direction:column;background:#0b0c0f!important;
    border:0!important;border-inline-start:1px solid var(--line2)!important;
    box-shadow:-24px 0 70px rgba(0,0,0,.32);
    transform:translateX(102%);opacity:0;visibility:hidden;pointer-events:none;
    transition:transform .28s cubic-bezier(.16,1,.3,1),opacity .2s ease,visibility .28s;
    overscroll-behavior:contain;
  }
  html[data-theme="light"] .nav-links{background:#F2F1EC!important;}
  [dir="rtl"] .nav-links{transform:translateX(-102%);box-shadow:24px 0 70px rgba(0,0,0,.32);}
  .nav-links.open,[dir="rtl"] .nav-links.open{transform:translateX(0);opacity:1;visibility:visible;pointer-events:auto;}
  .mobile-menu-head{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    min-height:76px;padding:14px 2px 13px;border-bottom:1px solid var(--line2);
  }
  .mobile-menu-head>div{display:grid;gap:3px;}
  .mobile-menu-kicker{font-size:.58rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted,var(--mut));}
  .mobile-menu-title{font-size:1.08rem;font-weight:720;letter-spacing:-.02em;color:var(--c2);}
  .mobile-menu-title{font-size:0;}
  .mobile-menu-title::after{content:"Menu";font-size:1.08rem;}
  html[lang="ar"] .mobile-menu-title::after{content:"القائمة";}
  .mobile-menu-close{
    width:38px;height:38px;display:grid;place-items:center;flex:none;padding:0;
    border:1px solid var(--line2);border-radius:10px;background:transparent;color:var(--c2);
    font:400 1.45rem/1 var(--font);cursor:pointer;
  }
  .mobile-menu-close:hover,.mobile-menu-close:focus-visible{background:var(--glass);border-color:var(--line3);}
  .nav-links>div{position:relative;width:100%;}
  .nav-links .nav-feature{padding:14px 0 12px;border-bottom:1px solid var(--line2);}
  .nav-links a.top.nav-chempro{
    width:100%;min-height:64px;margin:0!important;padding:9px 11px!important;gap:11px!important;
    border-radius:12px!important;background:color-mix(in srgb,var(--glass) 88%,var(--c2) 4%)!important;
  }
  .nav-chempro-mark{width:42px;height:42px;border-radius:10px;}
  .nav-chempro-ic{width:31px!important;height:31px!important;}
  .nav-chempro-copy{display:grid;gap:3px;flex:1;text-align:start;}
  .nav-chempro-copy strong{font-size:.92rem;font-weight:760;letter-spacing:.01em;text-transform:none;}
  .nav-chempro-copy small{display:block;font-size:.67rem;font-weight:520;line-height:1.25;letter-spacing:0;text-transform:none;color:var(--muted,var(--mut));}
  .nav-chempro-copy small{font-size:0;}
  .nav-chempro-copy small::after{content:"AI chemical risk and SDS";font-size:.67rem;}
  html[lang="fr"] .nav-chempro-copy small::after{content:"Risque chimique et FDS par IA";}
  html[lang="ar"] .nav-chempro-copy small::after{content:"مخاطر المواد الكيميائية وSDS بالذكاء الاصطناعي";}
  .nav-feature-arrow{display:block;flex:none;font-size:.95rem;color:var(--mut);}
  .menu-section{border-bottom:1px solid var(--line2);}
  .nav-links .menu-section>.top{
    min-height:58px;width:100%;display:flex!important;align-items:center;gap:11px;
    padding:10px 2px!important;color:var(--c2)!important;font-size:.78rem!important;
    font-weight:690!important;letter-spacing:.065em!important;text-transform:uppercase;
  }
  .menu-trigger-icon{width:31px;height:31px;display:grid;place-items:center;flex:none;border:1px solid var(--line2);border-radius:9px;color:var(--mut);background:var(--glass);}
  .menu-trigger-icon svg{width:16px;height:16px;stroke:currentColor;}
  .menu-trigger-label{flex:1;min-width:0;text-align:start;}
  .menu-trigger-chevron{display:block;flex:none;color:var(--mut);font-size:1rem;transition:transform .2s;}
  .menu-section.mobile-open>.top{color:var(--c2)!important;}
  .menu-section.mobile-open>.top .menu-trigger-icon{color:var(--c2);border-color:var(--line3);}
  .menu-section.mobile-open>.top .menu-trigger-chevron{transform:rotate(180deg);}
  #navLinks .menu-section>.dropdown{display:none!important;}
  #navLinks .menu-section.mobile-open>.dropdown{
    display:grid!important;position:static!important;width:100%!important;min-width:0!important;max-width:none!important;
    max-height:none!important;overflow:visible!important;margin:0 0 12px!important;padding:8px!important;gap:3px!important;
    grid-template-columns:1fr!important;border:1px solid var(--line2)!important;border-radius:12px!important;
    background:color-mix(in srgb,var(--glass) 72%,var(--bg) 28%)!important;box-shadow:none!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  }
  #navLinks .dropdown-explore .exp-col{display:contents!important;min-width:0!important;}
  #navLinks .menu-section.mobile-open>#systemsDropdown{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;}
  #systemsDropdown a{align-items:flex-start;min-height:64px;background:color-mix(in srgb,var(--c2) 3%,transparent);border-color:transparent!important;}
  #navLinks .dropdown a{min-width:0;padding:10px!important;border-radius:8px!important;white-space:normal!important;transform:none!important;animation:none!important;}
  #navLinks .dropdown a b{font-size:.79rem;line-height:1.3;white-space:normal!important;}
  #navLinks .dropdown a small{display:block!important;margin-top:3px;font-size:.67rem;line-height:1.35;color:var(--muted,var(--mut))!important;}
  #navLinks .dropdown a:hover,#navLinks .dropdown a:focus-visible{background:color-mix(in srgb,var(--c2) 6%,transparent);border-color:var(--line2);}
  #navLinks .dropdown::before,.nav-links>div:has(.dropdown)::after{display:none!important;}
  #navAccountItem{padding:12px 0;border-bottom:1px solid var(--line2);}
  #navAccountItem>.top{min-height:48px;display:flex!important;align-items:center;padding:9px 2px!important;}
  .burger{
    width:36px;height:36px;display:grid!important;place-items:center;margin:0!important;padding:0!important;
    border-radius:10px!important;border-color:var(--line2)!important;background:var(--glass)!important;
  }
  .burger:hover,.burger:focus-visible,.burger[aria-expanded="true"]{border-color:var(--line3)!important;background:color-mix(in srgb,var(--glass) 80%,var(--c2) 6%)!important;}
}

@media (max-width:560px){
  .nav-links{width:100%;}
}

@media (max-width:380px){
  .wrap.nav{padding-inline:10px!important;}
  .brand{gap:5px!important;}
  .brand .logo{width:26px!important;height:26px!important;}
  .brand-lockup-nav{font-size:.75rem!important;letter-spacing:.16em!important;}
  .nav{gap:5px!important;}
}

@media (max-width:310px){
  #navLinks .menu-section.mobile-open>#systemsDropdown{grid-template-columns:1fr!important;}
}

@media (prefers-reduced-motion:reduce){
  .nav-links,.nav-scrim,.burger-lines span,.menu-trigger-chevron{transition:none!important;}
}
.ic-badge-sm{
  width:22px; height:22px; border-radius:7px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.ic-badge-sm svg{width:13px; height:13px; stroke:#fff}
.disc-group-ic{flex-shrink:0}
.ic-safety{background:var(--c-safety)}
.ic-health{background:var(--c-health)}
.ic-envenergy{background:var(--c-envenergy)}
.ic-quality{background:var(--c-quality)}
.ic-cyber{background:var(--c-cyber)}
.ic-gov{background:var(--c-gov)}
.ic-systems{background:var(--c-systems)}

/* Homepage hero scene icon (.aw-scene-ic) previously assumed emoji content
   (font-size only, per main.css). It now renders a cluster SVG mark instead —
   give the svg real dimensions and a scene-tinted stroke; the drop-shadow glow
   main.css already applies still works since it targets the parent element. */
.aw-scene-ic svg{width:64px;height:64px;stroke:var(--scene);stroke-width:1.4}
@media(max-width:640px){.aw-scene-ic svg{width:48px;height:48px}}

/* ============================================================================
   TASK 14 · HOMEPAGE BENTO GRID (Design 4.0, 2026-07-10).
   Static, scannable grid below the hero-transition — the hero handles
   orientation/delight (auto-cycling through clusters), the grid handles fast
   "get me to what I need" scanning, which the old 15-scene carousel never
   did well since everything but the active scene was hidden.
   ============================================================================ */
.aw-bento-sec{padding:8px 0 clamp(48px,8vw,88px)}
.aw-bento{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:130px; gap:12px;
  max-width:1040px; margin:0 auto; padding:0 24px;
}
@media(max-width:900px){.aw-bento{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.aw-bento{grid-template-columns:repeat(2,1fr); grid-auto-rows:112px; padding:0 16px}}
.aw-bento-card{
  background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:16px;
  display:flex; flex-direction:column; justify-content:space-between; text-decoration:none;
  transition:border-color .2s ease, transform .2s ease;
  overflow:hidden; height:100%;
}
.aw-bento-card:hover{border-color:var(--line2); transform:translateY(-2px)}
.aw-bento-ic{width:auto; display:inline-flex}
.aw-bento-ic svg{width:22px; height:22px; stroke:var(--scene)}
.aw-bento-t{font-size:.92rem; font-weight:600; color:var(--c2)}
.aw-bento-n{font-size:.7rem; color:var(--mut)}
.aw-bento-1{grid-column:span 2; grid-row:span 2}
.aw-bento-1 .aw-bento-ic svg{width:30px; height:30px}
.aw-bento-1 .aw-bento-t{font-size:1.2rem}
@media(max-width:640px){.aw-bento-1{grid-column:span 2; grid-row:span 1}}

/* ============================================================================
   TASK 15 · MOBILE PERFORMANCE + WEBVIEW-ROBUSTNESS: DISABLE backdrop-filter
   (2026-07-10, user-reported broken/oversized cards + slowness on mobile,
   screenshots via in-app browser — status bar showed WhatsApp/Facebook icons,
   which matches this exact site's EARLIER-diagnosed in-app-WebView quirk this
   same session, design3-monochrome memory). `backdrop-filter:blur()` is used
   ~29 times across main.css/amaador-design-system.css (site-head, dropdowns,
   .card/[class*=card] core rule, .aw-bento-card, pills, hero controls, etc.)
   — it is the single most GPU-expensive property on the page, and older /
   in-app-WebView Chromium builds have known bugs combining backdrop-filter
   with CSS Grid/Flexbox intrinsic sizing (exactly the failure mode reported:
   grid cards rendering at ~10x their correct height). Disabling it on mobile
   is a pure decorative downgrade (every backdrop-filter use here already has
   a solid/translucent background color set alongside it as the base layer —
   verified before writing this rule, nothing depends on blur for visibility)
   and a well-established progressive-enhancement pattern: keep the glass
   effect on desktop where GPUs can afford it, drop it on mobile/low-power
   devices where it can't. Uses `!important` + universal selector to guarantee
   coverage regardless of which of the 3 loaded stylesheets set it. */
@media(max-width:820px){
  *{backdrop-filter:none!important; -webkit-backdrop-filter:none!important}
}

/* KNOWLEDGE FIELD — site-wide language, matched to the 3D homepage. */
:root{--field-bg:#03050b;--field-surface:#090d18;--field-surface-2:#0e1422;--field-ink:#f7f9fe;--field-muted:#a8b1c5;--field-dim:#737f98;--field-line:rgba(203,215,242,.13);--field-line-strong:rgba(224,232,250,.24);--field-focus:#75f3c8;--field-radius:14px}
html[data-theme="dark"],html[data-theme="pitch"]{--bg:var(--field-bg);--bg2:#050812;--panel:var(--field-surface);--panel2:var(--field-surface-2);--panel3:#141b2b;--txt:var(--field-ink);--mut:var(--field-muted);--dim:var(--field-dim);--line:var(--field-line);--line2:var(--field-line-strong);--line3:rgba(224,232,250,.34);--gold:var(--field-focus);--gold2:#a4ffe3;--gold-dim:rgba(117,243,200,.11);--accent:var(--field-focus);--acc:var(--field-focus)}
html{background:var(--bg);scroll-padding-top:84px}body{min-width:320px;background-color:var(--bg);background-image:radial-gradient(ellipse at 12% 0,rgba(62,102,224,.085),transparent 34%),radial-gradient(ellipse at 92% 42%,rgba(18,199,158,.055),transparent 30%);background-attachment:fixed;color:var(--mut);text-rendering:optimizeLegibility}body:not(:has(.kg-hero))::before{opacity:.035!important}.wrap{width:100%;max-width:1240px;padding-inline:clamp(18px,4vw,48px)}
.site-head{background:rgba(3,5,11,.9)!important;border-bottom:1px solid var(--field-line)!important;box-shadow:none!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.site-head.scrolled{background:rgba(3,5,11,.96)!important;box-shadow:0 12px 34px rgba(0,0,0,.22)!important}.brand .logo{filter:drop-shadow(0 0 12px rgba(117,243,200,.18))}.nav-links>.menu-section>.top,.theme-toggle,.burger,.lang-switch{border-color:var(--field-line)!important;background:rgba(255,255,255,.025)!important}.nav-links>.menu-section>.top:hover,.theme-toggle:hover,.burger:hover{border-color:var(--field-line-strong)!important;background:rgba(255,255,255,.055)!important}.dropdown{background:#070b14!important;border-color:var(--field-line-strong)!important;box-shadow:0 24px 60px rgba(0,0,0,.46)!important}
.hero,.tool-head{background-color:#040711!important;background-image:radial-gradient(circle at 72% 35%,rgba(117,243,200,.075),transparent 25%),radial-gradient(circle at 18% 20%,rgba(92,126,232,.1),transparent 32%)!important;border-bottom:1px solid var(--field-line)!important}.hero::before,.tool-head::before{opacity:.3!important;background-image:linear-gradient(rgba(180,197,229,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(180,197,229,.05) 1px,transparent 1px)!important;background-size:64px 64px!important;-webkit-mask-image:linear-gradient(to bottom,#000,transparent 88%);mask-image:linear-gradient(to bottom,#000,transparent 88%)}.hero h1,.tool-head h1,.sec-t{color:var(--field-ink)!important;text-wrap:balance}.hero .sub,.tool-head .sub,.sec-sub{color:var(--field-muted)!important;text-wrap:pretty}.tool-head{padding-block:clamp(52px,7vw,82px) clamp(34px,5vw,52px)}.hero{padding-block:clamp(70px,9vw,112px) clamp(58px,8vw,92px)}
.card,.tool-sec,.tool-guide,.tool-bar,.hub-toolbar,.dom-feature,[class~="panel"]{background:rgba(9,13,24,.9)!important;border:1px solid var(--field-line)!important;border-radius:var(--field-radius)!important;box-shadow:0 14px 38px rgba(0,0,0,.18)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}.card::before{background:linear-gradient(90deg,transparent,rgba(117,243,200,.18),transparent)!important}.card:hover,.dom-feature:hover{border-color:var(--field-line-strong)!important;box-shadow:0 20px 44px rgba(0,0,0,.25)!important;transform:translateY(-2px)!important}.tool-sec[open]{border-color:rgba(117,243,200,.3)!important}.tool-sec>summary:hover{background:rgba(117,243,200,.045)!important}.tool-guide::before{width:1px!important;background:var(--field-focus)!important}
.btn,.tool-guide-toggle,.hub-pill{min-height:44px;border-radius:11px!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important;box-shadow:none!important}.btn:not(.ghost):not(.soft):not(.danger),.btn.primary{background:var(--field-focus)!important;border-color:var(--field-focus)!important;color:#04110e!important}.btn:not(.ghost):not(.soft):not(.danger):hover,.btn.primary:hover{background:#9cf8da!important;border-color:#9cf8da!important;box-shadow:0 8px 24px rgba(117,243,200,.16)!important}.btn.ghost,.btn.soft,.tool-guide-toggle{background:#0b101c!important;border:1px solid var(--field-line-strong)!important;color:var(--field-muted)!important}.btn.ghost:hover,.btn.soft:hover,.tool-guide-toggle:hover{background:#111827!important;color:var(--field-ink)!important;border-color:rgba(117,243,200,.34)!important}.btn::after{display:none!important}input,textarea,select{min-height:44px;border-radius:10px!important;border-color:var(--field-line)!important;background:#070b14!important;color:var(--field-ink)!important;box-shadow:none!important}input::placeholder,textarea::placeholder{color:#8490a8!important;opacity:1}input:focus,textarea:focus,select:focus{border-color:rgba(117,243,200,.64)!important;box-shadow:0 0 0 3px rgba(117,243,200,.09)!important}:focus-visible{outline:2px solid var(--field-focus)!important;outline-offset:3px!important}
.sec{padding-block:clamp(64px,8vw,96px)}.sec+.sec{border-color:var(--field-line)!important}.site-foot{margin-top:clamp(70px,9vw,108px);padding-block:60px 34px;background:#03050b!important;border-top-color:var(--field-line)!important}.site-foot::before{background:linear-gradient(90deg,var(--field-focus),transparent)!important}.site-foot a:hover{color:var(--field-focus)!important}
@supports(content-visibility:auto){main>.sec,.site-foot{content-visibility:auto;contain-intrinsic-size:1px 720px}}.hero-copy>.kicker,.hero-copy>h1,.hero-copy>.sub,.hero-copy>.hero-cta{animation-duration:.48s!important;animation-delay:0s!important}.hero-leak::before,.aw-aurora{animation:none!important}
@media(max-width:820px){html{scroll-padding-top:68px}body{background-attachment:scroll;background-image:radial-gradient(circle at 80% 6%,rgba(117,243,200,.055),transparent 28%)}.wrap{padding-inline:18px}.site-head{background:#03050b!important}.hero,.tool-head{padding-block:48px 34px!important}.hero::before,.tool-head::before{background-size:48px 48px!important;opacity:.2!important}.hero-grid{display:block!important}.hero-index{display:none!important}.hero h1{font-size:clamp(2rem,10vw,3.15rem)!important;line-height:1.05!important}.tool-head h1{font-size:clamp(1.75rem,8vw,2.45rem)!important;overflow-wrap:anywhere}.hero .sub,.tool-head .sub{font-size:.92rem!important;line-height:1.7!important}.sec{padding-block:56px}.grid{grid-template-columns:1fr!important}.card{padding:20px!important}.tool-bar{gap:14px!important;padding:15px!important;align-items:stretch!important}.tool-bar-group,.tool-bar-actions{width:100%}.tool-bar-actions{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}.tool-bar .btn{width:100%;padding-inline:14px!important}.hub-toolbar{top:auto!important;padding:10px!important}.hub-pills{overflow-x:auto;flex-wrap:nowrap!important;padding-bottom:3px;scrollbar-width:none}.hub-pills::-webkit-scrollbar{display:none}.hub-pill{flex:none}table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.site-foot{padding-block:48px 28px}}
@media(max-width:480px){.wrap{padding-inline:15px}.hero,.tool-head{padding-block:40px 30px!important}.btn{width:100%;justify-content:center}.hero-cta-primary,.hero-cta-secondary{display:grid!important;grid-template-columns:1fr;width:100%}.card{padding:18px!important;border-radius:12px!important}.tool-sec>summary{padding:14px!important}.tool-sec>.grid{padding:2px 14px 16px!important}input,textarea,select{font-size:16px!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* LIGHT FIELD — bright counterpart to the dark knowledge graph language. */
html[data-theme="light"]{
  --bg:#f6f8fb;--bg2:#eef2f7;--panel:#ffffff;--panel2:#f4f7fa;--panel3:#e9eef4;
  --txt:#111827;--mut:#4b5870;--dim:#69758b;--c2:#111827;--c3:#59657a;
  --line:rgba(26,39,61,.11);--line2:rgba(26,39,61,.18);--line3:rgba(26,39,61,.28);
  --gold:#087f68;--gold2:#066552;--gold-dim:rgba(8,127,104,.09);--accent:#087f68;
  --field-bg:#f6f8fb;--field-surface:#ffffff;--field-surface-2:#f4f7fa;--field-ink:#111827;
  --field-muted:#4b5870;--field-dim:#69758b;--field-line:rgba(26,39,61,.11);--field-line-strong:rgba(26,39,61,.2);--field-focus:#087f68;
  color-scheme:light;
}
html[data-theme="light"] body{background-color:#f6f8fb!important;background-image:radial-gradient(ellipse at 10% 0,rgba(72,113,194,.08),transparent 35%),radial-gradient(ellipse at 92% 38%,rgba(8,127,104,.055),transparent 30%)!important;color:var(--mut)!important}
html[data-theme="light"] .site-head{background:rgba(249,250,252,.94)!important;border-color:rgba(26,39,61,.12)!important;box-shadow:0 1px 0 rgba(255,255,255,.9)!important}
html[data-theme="light"] .site-head.scrolled{background:rgba(249,250,252,.98)!important;box-shadow:0 10px 30px rgba(30,45,70,.08)!important}
html[data-theme="light"] .brand,html[data-theme="light"] .brand *{color:#172033!important}
html[data-theme="light"] .brand .logo{filter:invert(1) contrast(1.15)!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;opacity:.9}
html[data-theme="light"] .nav-links>.menu-section>.top,html[data-theme="light"] .theme-toggle,html[data-theme="light"] .burger,html[data-theme="light"] .lang-switch{color:#536078!important;border-color:rgba(26,39,61,.13)!important;background:#fff!important;box-shadow:0 1px 2px rgba(25,37,58,.04)!important}
html[data-theme="light"] .nav-links>.menu-section>.top:hover,html[data-theme="light"] .theme-toggle:hover,html[data-theme="light"] .burger:hover{color:#172033!important;border-color:rgba(8,127,104,.32)!important;background:#f3faf7!important}
html[data-theme="light"] .nav-links>.menu-section>.top.on,html[data-theme="light"] .nav-links>.menu-section>.top[aria-expanded="true"]{color:#075f4f!important;border-color:rgba(8,127,104,.3)!important;background:#edf8f4!important}
html[data-theme="light"] .dropdown{background:#fff!important;border-color:rgba(26,39,61,.14)!important;box-shadow:0 24px 60px rgba(30,45,70,.16)!important}
html[data-theme="light"] .dropdown a,html[data-theme="light"] .dropdown button{color:#526078!important}
html[data-theme="light"] .dropdown a:hover,html[data-theme="light"] .dropdown button:hover{color:#142033!important;background:#f3f7fa!important}

html[data-theme="light"] .hero,html[data-theme="light"] .tool-head{background-color:#eef3f8!important;background-image:radial-gradient(circle at 72% 30%,rgba(8,127,104,.09),transparent 27%),radial-gradient(circle at 14% 10%,rgba(72,113,194,.1),transparent 34%)!important;border-color:rgba(26,39,61,.12)!important}
html[data-theme="light"] .hero::before,html[data-theme="light"] .tool-head::before{background-image:linear-gradient(rgba(43,62,91,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(43,62,91,.055) 1px,transparent 1px)!important;opacity:.55!important}
html[data-theme="light"] .hero h1,html[data-theme="light"] .tool-head h1,html[data-theme="light"] .sec-t{color:#111827!important;text-shadow:none!important}
html[data-theme="light"] .hero .sub,html[data-theme="light"] .tool-head .sub,html[data-theme="light"] .sec-sub{color:#4b5870!important}
html[data-theme="light"] .hero .sub b,html[data-theme="light"] .tool-head .sub b{color:#075f4f!important}

html[data-theme="light"] .card,html[data-theme="light"] .tool-sec,html[data-theme="light"] .tool-guide,html[data-theme="light"] .tool-bar,html[data-theme="light"] .hub-toolbar,html[data-theme="light"] .dom-feature,html[data-theme="light"] [class~="panel"]{background:#fff!important;background-image:none!important;border-color:rgba(26,39,61,.12)!important;box-shadow:0 8px 24px rgba(30,45,70,.07)!important;color:#172033!important}
html[data-theme="light"] .card::before{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--acc,#087f68) 38%,transparent),transparent)!important;opacity:.7}
html[data-theme="light"] .card:hover,html[data-theme="light"] .dom-feature:hover{border-color:color-mix(in srgb,var(--acc,#087f68) 42%,rgba(26,39,61,.14))!important;box-shadow:0 16px 36px rgba(30,45,70,.11)!important}
html[data-theme="light"] .card b,html[data-theme="light"] .card h3,html[data-theme="light"] .card h4,html[data-theme="light"] .dom-card b{color:#182235!important}
html[data-theme="light"] .card p,html[data-theme="light"] .card .small,html[data-theme="light"] .dom-card .small{color:#5a667b!important}
html[data-theme="light"] .card .ico,html[data-theme="light"] .dom-card .ico{background:color-mix(in srgb,var(--acc,#087f68) 10%,#f5f8fb)!important;border:1px solid color-mix(in srgb,var(--acc,#087f68) 24%,rgba(26,39,61,.1))!important;box-shadow:none!important;filter:none!important;color:#172033!important}
html[data-theme="light"] .tool-sec>summary:hover{background:#f4f8fa!important}
html[data-theme="light"] .tool-guide::before{background:#087f68!important}

html[data-theme="light"] .btn:not(.ghost):not(.soft):not(.danger),html[data-theme="light"] .btn.primary{background:#087f68!important;border-color:#087f68!important;color:#fff!important}
html[data-theme="light"] .btn:not(.ghost):not(.soft):not(.danger):hover,html[data-theme="light"] .btn.primary:hover{background:#066552!important;border-color:#066552!important;box-shadow:0 8px 22px rgba(8,127,104,.18)!important}
html[data-theme="light"] .btn.ghost,html[data-theme="light"] .btn.soft,html[data-theme="light"] .tool-guide-toggle{background:#fff!important;border-color:rgba(26,39,61,.18)!important;color:#344158!important}
html[data-theme="light"] .btn.ghost:hover,html[data-theme="light"] .btn.soft:hover,html[data-theme="light"] .tool-guide-toggle:hover{background:#f1f7f5!important;border-color:rgba(8,127,104,.38)!important;color:#075f4f!important}
html[data-theme="light"] input,html[data-theme="light"] textarea,html[data-theme="light"] select{background:#fff!important;border-color:rgba(26,39,61,.16)!important;color:#172033!important}
html[data-theme="light"] input::placeholder,html[data-theme="light"] textarea::placeholder{color:#68758b!important}
html[data-theme="light"] input:focus,html[data-theme="light"] textarea:focus,html[data-theme="light"] select:focus{border-color:#087f68!important;box-shadow:0 0 0 3px rgba(8,127,104,.1)!important}
html[data-theme="light"] .sec+.sec{border-color:rgba(26,39,61,.1)!important}
html[data-theme="light"] .site-foot{background:#eef2f6!important;border-color:rgba(26,39,61,.12)!important;color:#566279!important}
html[data-theme="light"] .site-foot h4{color:#263349!important}html[data-theme="light"] .site-foot a{color:#566279!important}html[data-theme="light"] .site-foot a:hover{color:#087f68!important}

/* The live counter is supporting information, not a floating content window. */
html[data-theme="light"] .suite-counter-card{background:#fff!important;border-color:rgba(26,39,61,.14)!important;box-shadow:0 10px 28px rgba(30,45,70,.12)!important;border-radius:12px!important}
html[data-theme="light"] .suite-counter-number{color:#172033!important}html[data-theme="light"] .suite-counter-label{color:#5b667a!important}
@media(max-width:700px){.suite-counter-dock{display:none!important}}
/* Professional bundles — compact, cross-functional systems architecture */
.pp-page{--pp-line:rgba(148,163,184,.18);--pp-panel:rgba(14,20,31,.78);--pp-soft:rgba(255,255,255,.035)}
.pp-hero{min-height:56vh;display:grid;align-items:center;padding:clamp(96px,12vw,150px) 0 64px}
.pp-hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:clamp(32px,6vw,80px);align-items:end}
.pp-hero .hero-copy{max-width:820px}.pp-hero h1{font-size:clamp(2.5rem,5vw,5.4rem);line-height:.98;letter-spacing:-.055em;margin:.4em 0 .32em}.pp-hero .sub{max-width:760px}
.pp-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}.pp-integrity{padding:24px;border:1px solid var(--pp-line);border-radius:22px;background:var(--pp-panel);backdrop-filter:blur(18px);box-shadow:0 24px 70px rgba(0,0,0,.18)}
.pp-integrity strong{display:block;font-size:clamp(1.5rem,2.5vw,2.3rem);margin:6px 0}.pp-integrity p{color:var(--mut);font-size:.9rem;line-height:1.7}.pp-integrity-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:18px}.pp-integrity-row span,.pp-count{font-size:.68rem;letter-spacing:.04em;border:1px solid var(--pp-line);border-radius:999px;padding:7px 9px;color:var(--mut)}
.pp-main{padding-bottom:96px}.pp-section{padding-top:clamp(56px,8vw,96px);scroll-margin-top:100px}.pp-section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,520px);gap:30px;align-items:end;margin-bottom:26px}.pp-section-head h2,.pp-note h2{font-size:clamp(2rem,4vw,3.6rem);line-height:1.02;letter-spacing:-.045em;margin:6px 0 0}.pp-section-head>p{color:var(--mut);line-height:1.75;margin:0}.pp-eyebrow,.pp-code{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal,#5eead4)}
.pp-bundle-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.pp-bundle{min-height:248px;padding:22px;border:1px solid var(--pp-line);border-radius:20px;background:linear-gradient(145deg,var(--pp-panel),var(--pp-soft));display:flex;flex-direction:column;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}.pp-bundle:hover{transform:translateY(-3px);border-color:rgba(94,234,212,.4);box-shadow:0 20px 55px rgba(0,0,0,.16)}.pp-featured{background:linear-gradient(145deg,rgba(16,185,129,.13),var(--pp-panel));border-color:rgba(94,234,212,.3)}.pp-bundle-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.pp-bundle h3,.pp-pack h3{font-size:1.16rem;line-height:1.25;margin:24px 0 8px;letter-spacing:-.02em}.pp-bundle>p,.pp-pack>p{color:var(--mut);font-size:.86rem;line-height:1.65;margin:0 0 18px}.pp-links{display:flex;gap:7px;flex-wrap:wrap;margin-top:auto}.pp-links a{min-height:32px;display:inline-flex;align-items:center;padding:5px 9px;border:1px solid var(--pp-line);border-radius:8px;background:rgba(255,255,255,.035);color:var(--text);font-size:.7rem;font-weight:600;text-decoration:none}.pp-links a:hover{color:var(--teal,#5eead4);border-color:currentColor;background:rgba(94,234,212,.07)}
.pp-system-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.pp-system-grid>a{min-height:86px;padding:16px;border:1px solid var(--pp-line);border-radius:14px;background:var(--pp-panel);display:flex;flex-direction:column;justify-content:center;text-decoration:none;transition:border-color .18s ease,background .18s ease}.pp-system-grid>a:hover{border-color:rgba(94,234,212,.45);background:rgba(94,234,212,.07)}.pp-system-grid b{color:var(--text);font-size:.88rem}.pp-system-grid span{color:var(--mut);font-size:.72rem;margin-top:3px}
.pp-pack-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.pp-pack{min-height:230px;padding:24px;border:1px solid var(--pp-line);border-radius:20px;background:var(--pp-panel);display:flex;flex-direction:column;text-decoration:none;transition:transform .2s ease,border-color .2s ease}.pp-pack:hover{transform:translateY(-3px);border-color:rgba(94,234,212,.45)}.pp-open{margin-top:auto;color:var(--teal,#5eead4);font-size:.78rem;font-weight:700}.pp-note{margin-top:clamp(56px,8vw,96px);padding:clamp(24px,4vw,48px);display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr);gap:40px;align-items:center;border:1px solid rgba(94,234,212,.28);border-radius:24px;background:linear-gradient(120deg,rgba(16,185,129,.11),var(--pp-panel))}.pp-note p{color:var(--mut);line-height:1.8;margin:0}
html[data-theme="light"] .pp-page{--pp-line:rgba(30,41,59,.14);--pp-panel:rgba(255,255,255,.86);--pp-soft:rgba(15,23,42,.025)}
html[data-theme="light"] .pp-integrity,html[data-theme="light"] .pp-bundle,html[data-theme="light"] .pp-system-grid>a,html[data-theme="light"] .pp-pack{box-shadow:0 12px 35px rgba(15,23,42,.06)}
html[data-theme="light"] .pp-featured{background:linear-gradient(145deg,rgba(16,185,129,.1),rgba(255,255,255,.94))}
html[data-theme="light"] .pp-links a{background:rgba(15,23,42,.03)}
@media(max-width:1050px){.pp-bundle-grid,.pp-pack-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pp-system-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.pp-hero{min-height:auto;padding:104px 0 48px}.pp-hero-grid,.pp-section-head,.pp-note{grid-template-columns:1fr}.pp-hero h1{font-size:clamp(2.45rem,12vw,4rem)}.pp-integrity{padding:20px}.pp-section-head{gap:12px}.pp-bundle-grid,.pp-pack-grid{grid-template-columns:1fr}.pp-bundle,.pp-pack{min-height:0}.pp-system-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pp-system-grid>a{min-height:78px;padding:13px}.pp-links a{min-height:38px}.pp-note{gap:18px}}
@media(max-width:390px){.pp-system-grid{grid-template-columns:1fr}.pp-hero-actions .btn{width:100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){.pp-bundle,.pp-pack,.pp-system-grid>a{transition:none}.pp-bundle:hover,.pp-pack:hover{transform:none}}

/* FIELD UI 2.0 — the Pro Packs finish, extended to hubs, exploration and working tools. */
:root{--field-radius-sm:12px;--field-radius:18px;--field-radius-lg:24px;--field-control:44px;--field-ease:cubic-bezier(.16,1,.3,1)}
body:not(.pp-page):not(.kg-home) :where(h1,h2,h3){text-wrap:balance;letter-spacing:-.025em}
body:not(.pp-page):not(.kg-home) :where(p,.small,.muted){text-wrap:pretty}
body:not(.pp-page):not(.kg-home) .hero{min-height:min(52vh,520px);border-bottom:1px solid var(--field-line);background:radial-gradient(circle at 72% 12%,rgba(125,211,252,.07),transparent 34%),radial-gradient(circle at 18% 84%,rgba(117,243,200,.06),transparent 32%),#050811!important}
body:not(.pp-page):not(.kg-home) .hero .wrap{padding-top:clamp(84px,10vw,132px);padding-bottom:clamp(44px,7vw,80px)}
body:not(.pp-page):not(.kg-home) .hero-copy{max-width:880px!important}
body:not(.pp-page):not(.kg-home) .hero h1{max-width:18ch;font-size:clamp(2.3rem,5vw,4.8rem);line-height:1.02;letter-spacing:-.04em;margin:.35em 0 .28em}
body:not(.pp-page):not(.kg-home) .hero .sub{max-width:72ch;font-size:clamp(.98rem,1.4vw,1.14rem);line-height:1.8;color:#aab4c8}
body:not(.pp-page):not(.kg-home) .sec-t{font-size:clamp(1.75rem,3.3vw,3.1rem);line-height:1.08;letter-spacing:-.04em;border-bottom:0!important;padding-bottom:0!important}
body:not(.pp-page):not(.kg-home) .sec-t::before{opacity:.45}
body:not(.pp-page):not(.kg-home) :where(.card,.panel,.tool-panel,.result,.quiz-card,.dash-card,.feature-card,.resource-card){border:1px solid var(--field-line)!important;border-radius:var(--field-radius)!important;background:linear-gradient(145deg,rgba(14,20,31,.82),rgba(255,255,255,.022))!important;box-shadow:none!important}
body:not(.pp-page):not(.kg-home) :where(.card,.feature-card,.resource-card){transition:transform .2s var(--field-ease),border-color .2s ease,background .2s ease!important}
body:not(.pp-page):not(.kg-home) :where(a.card,a.feature-card,a.resource-card):hover{transform:translateY(-3px)!important;border-color:var(--field-line-strong)!important;background:rgba(117,243,200,.045)!important}
body:not(.pp-page):not(.kg-home) :where(.card,.panel,.tool-panel){padding:clamp(18px,2.2vw,28px)}
body:not(.pp-page):not(.kg-home) :where(.grid.g2,.grid.g3,.grid.g4){gap:14px}
body:not(.pp-page):not(.kg-home) :where(input:not([type=checkbox]):not([type=radio]),select,textarea){min-height:var(--field-control);border:1px solid var(--field-line-strong)!important;border-radius:var(--field-radius-sm)!important;background:rgba(2,6,13,.62)!important;color:var(--text)!important;box-shadow:none!important;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease!important}
body:not(.pp-page):not(.kg-home) :where(input,select,textarea):focus{border-color:rgba(117,243,200,.66)!important;box-shadow:0 0 0 3px rgba(117,243,200,.1)!important;outline:0!important}
body:not(.pp-page):not(.kg-home) :where(.btn,button.btn){min-height:42px;border-radius:11px!important;font-weight:650;box-shadow:none!important;transition:transform .18s var(--field-ease),border-color .18s ease,background .18s ease!important}
body:not(.pp-page):not(.kg-home) :where(.btn,button.btn):hover{transform:translateY(-1px)}
body:not(.pp-page):not(.kg-home) :where(.ico,.tool-icon,.feature-icon){border:1px solid var(--field-line)!important;border-radius:12px!important;background:rgba(255,255,255,.035)!important;box-shadow:none!important}
body:not(.pp-page):not(.kg-home) :where(.tabs,.tab-bar,.filters){padding:5px;border:1px solid var(--field-line);border-radius:14px;background:rgba(255,255,255,.025)}
body:not(.pp-page):not(.kg-home) :where(table){border-collapse:separate;border-spacing:0;border:1px solid var(--field-line);border-radius:14px;overflow:hidden}
body:not(.pp-page):not(.kg-home) :where(th){background:rgba(255,255,255,.045);color:var(--text);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase}
body:not(.pp-page):not(.kg-home) :where(td,th){border-color:var(--field-line)!important}
body.chempro:not(.kg-home) .tool-head{border:1px solid var(--field-line)!important;border-radius:var(--field-radius-lg)!important;background:linear-gradient(145deg,rgba(11,22,30,.94),rgba(7,11,19,.96))!important;box-shadow:none!important}
body.chempro:not(.kg-home) :where(.cp-card,.chem-card,.sds-card){border-radius:var(--field-radius)!important;border-color:var(--field-line)!important;box-shadow:none!important}
html[data-theme="light"] body:not(.pp-page):not(.kg-home) .hero{background:radial-gradient(circle at 72% 12%,rgba(61,100,160,.08),transparent 34%),radial-gradient(circle at 18% 84%,rgba(15,143,116,.07),transparent 32%),#f2f5fa!important;border-bottom-color:rgba(26,39,61,.13)}
html[data-theme="light"] body:not(.pp-page):not(.kg-home) .hero .sub{color:#53627a}
html[data-theme="light"] body:not(.pp-page):not(.kg-home) :where(.card,.panel,.tool-panel,.result,.quiz-card,.dash-card,.feature-card,.resource-card){background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(244,247,251,.92))!important;border-color:rgba(26,39,61,.14)!important;box-shadow:0 12px 32px rgba(30,45,70,.055)!important}
html[data-theme="light"] body:not(.pp-page):not(.kg-home) :where(a.card,a.feature-card,a.resource-card):hover{border-color:rgba(15,143,116,.34)!important;background:#fff!important;box-shadow:0 18px 40px rgba(30,45,70,.09)!important}
html[data-theme="light"] body:not(.pp-page):not(.kg-home) :where(input:not([type=checkbox]):not([type=radio]),select,textarea){background:#fff!important;border-color:rgba(26,39,61,.18)!important;color:#172033!important}
html[data-theme="light"] body.chempro:not(.kg-home) .tool-head{background:linear-gradient(145deg,#fff,#f2f6fa)!important;border-color:rgba(26,39,61,.14)!important}
@media(max-width:760px){body:not(.pp-page):not(.kg-home) .hero{min-height:auto}body:not(.pp-page):not(.kg-home) .hero .wrap{padding-top:92px;padding-bottom:46px}body:not(.pp-page):not(.kg-home) .hero h1{font-size:clamp(2.15rem,11vw,3.5rem);overflow-wrap:anywhere}body:not(.pp-page):not(.kg-home) :where(.card,.panel,.tool-panel){padding:18px}body:not(.pp-page):not(.kg-home) :where(.grid.g2,.grid.g3,.grid.g4){grid-template-columns:1fr!important}}
@media(prefers-reduced-motion:reduce){body:not(.pp-page):not(.kg-home) :where(.card,.feature-card,.resource-card,.btn,button.btn){transition:none!important}}

/* FIELD UI 2.1 — interior layout rhythm + one non-overlapping floating system. */
body:not(.kg-home){padding-bottom:84px}
.fab-stack,.fab-dock,.floating-dock,.amfab-stack,.acad-fab,.float-donate,.donate-fab,#donate-fab,#acadDonateFab,.suite-premium-detached-rail{display:none!important}
body:not(.kg-home) .sec{padding-block:clamp(46px,6vw,76px)}
body:not(.kg-home) .sec+.sec{padding-top:clamp(22px,3vw,40px)}
body:not(.kg-home) .sec>.wrap{max-width:1280px}
body:not(.kg-home) .sec-t{margin-bottom:clamp(22px,3vw,34px)}
body:not(.kg-home) .grid.cat-grouped{margin-top:22px!important}
body:not(.kg-home) .hub-toolbar{position:sticky;top:72px;display:grid;grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr);gap:10px;align-items:center;margin:0 0 34px;padding:10px;border:1px solid var(--field-line)!important;border-radius:16px!important;background:#080d16!important;box-shadow:0 12px 32px rgba(0,0,0,.18)!important}
body:not(.kg-home) .hub-search{min-width:0;min-height:46px;padding:0 14px;border:1px solid var(--field-line-strong)!important;border-radius:11px;background:rgba(255,255,255,.035)!important;box-shadow:none!important}
body:not(.kg-home) .hub-search:focus-within{border-color:rgba(117,243,200,.62)!important;box-shadow:0 0 0 3px rgba(117,243,200,.09)!important}
body:not(.kg-home) .hub-search input{min-height:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
body:not(.kg-home) .hub-pills{justify-content:flex-end;gap:6px}
body:not(.kg-home) .hub-pill{min-height:38px;padding:8px 11px;border-radius:10px;color:var(--field-muted);background:transparent;border-color:var(--field-line)!important;box-shadow:none!important}
body:not(.kg-home) .hub-pill:hover{transform:none;color:var(--field-ink);background:rgba(255,255,255,.05)}
body:not(.kg-home) .hub-pill.on{color:#06120f;background:#8ff0cd!important;border-color:#8ff0cd!important;box-shadow:none!important}
body:not(.kg-home) .hub-pill.on i{color:#06120f;background:rgba(6,18,15,.12)}
body:not(.kg-home) .tool-group{margin-bottom:42px;animation:none}
body:not(.kg-home) .tool-group-h{gap:11px;margin-bottom:14px;padding:0 0 12px;border-color:var(--field-line)!important}
body:not(.kg-home) .tool-group-ic{width:36px;height:36px;border-radius:10px;background:rgba(117,243,200,.07)!important;border-color:rgba(117,243,200,.2)!important;box-shadow:none!important;font-size:1rem}
body:not(.kg-home) .tool-group-h h3{font-family:Poppins,system-ui,sans-serif;font-size:1rem;letter-spacing:-.015em}
body:not(.kg-home) .tool-group-n{color:var(--field-focus);background:rgba(117,243,200,.07);border:1px solid rgba(117,243,200,.14)}
body:not(.kg-home) .tool-group-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))!important;gap:12px!important}
body:not(.kg-home) .tool-group-grid .card{min-height:168px;padding:20px!important}
body:not(.kg-home) .tool-group-grid .card .ico{width:46px!important;height:46px!important;margin-bottom:18px!important;font-size:1.25rem!important}
body:not(.kg-home) .tool-group-grid .card b{font-size:.94rem;line-height:1.35}
body:not(.kg-home) .tool-group-grid .card .small{font-size:.82rem;line-height:1.62;margin-top:8px}
html[data-theme="light"] body:not(.kg-home) .hub-toolbar{background:rgba(255,255,255,.96)!important;border-color:rgba(26,39,61,.13)!important;box-shadow:0 12px 30px rgba(30,45,70,.07)!important}
html[data-theme="light"] body:not(.kg-home) .hub-search{background:#f5f7fa!important;border-color:rgba(26,39,61,.15)!important}
html[data-theme="light"] body:not(.kg-home) .hub-pill{color:#536078;background:#fff;border-color:rgba(26,39,61,.13)!important}
html[data-theme="light"] body:not(.kg-home) .hub-pill:hover{color:#172033;background:#f2f6f8}
html[data-theme="light"] body:not(.kg-home) .hub-pill.on{color:#063d33;background:#c9f5e5!important;border-color:#83dabc!important}
html[data-theme="light"] body:not(.kg-home) .tool-group-ic{color:#075f4f!important;background:#edf8f4!important;border-color:rgba(8,127,104,.2)!important}
html[data-theme="light"] body:not(.kg-home) .tool-group-n{color:#075f4f;background:#edf8f4;border-color:rgba(8,127,104,.16)}
@media(max-width:900px){body:not(.kg-home) .hub-toolbar{position:static;grid-template-columns:1fr}.hub-pills{justify-content:flex-start!important;flex-wrap:nowrap!important;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}.hub-pills::-webkit-scrollbar{display:none}.hub-pill{flex:none}}
@media(max-width:700px){body:not(.kg-home){padding-bottom:76px}body:not(.kg-home) .sec{padding-block:38px}body:not(.kg-home) .hub-toolbar{margin-bottom:26px;padding:8px}body:not(.kg-home) .tool-group{margin-bottom:32px}body:not(.kg-home) .tool-group-grid .card{min-height:0}.site-head{min-height:64px}}

/* MODAL SYSTEM 3.0 — theme-safe, viewport-safe dialogs across every Workshop tool. */
.modal-bg{align-items:center!important;padding:clamp(12px,3vw,32px)!important;background:rgba(1,4,10,.78)!important;-webkit-backdrop-filter:blur(12px) saturate(110%);backdrop-filter:blur(12px) saturate(110%);animation:aw-modal-fade .18s ease!important}
.modal{--modal-bg:#080d16;--modal-raised:#0d1420;--modal-ink:#f3f7fc;--modal-muted:#9da9bd;--modal-line:rgba(190,205,230,.15);width:min(100%,820px)!important;max-height:calc(100dvh - clamp(24px,6vw,64px));display:flex;flex-direction:column;padding:0!important;overflow:hidden;border:1px solid var(--modal-line)!important;border-radius:22px!important;background:var(--modal-bg)!important;background-image:radial-gradient(circle at 8% 0,rgba(117,243,200,.055),transparent 24%)!important;color:var(--modal-ink)!important;box-shadow:0 30px 100px rgba(0,0,0,.52),0 1px 0 rgba(255,255,255,.05) inset!important;animation:aw-modal-in .24s cubic-bezier(.16,1,.3,1)!important}
.modal-premium::before,.modal-premium::after{display:none!important}
.modal .m-body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:clamp(24px,4vw,38px)!important;scrollbar-width:thin;scrollbar-color:rgba(157,169,189,.38) transparent}
.modal .m-body::-webkit-scrollbar{width:8px}.modal .m-body::-webkit-scrollbar-track{background:transparent}.modal .m-body::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:999px;background:rgba(157,169,189,.38);background-clip:padding-box}
.modal .x{z-index:3;top:16px!important;right:16px!important;width:40px;height:40px;display:grid;place-items:center;padding:0!important;border:1px solid var(--modal-line)!important;border-radius:12px!important;background:var(--modal-raised)!important;color:var(--modal-muted)!important;font:500 1rem/1 system-ui!important;transition:color .16s ease,background .16s ease,border-color .16s ease,transform .16s cubic-bezier(.16,1,.3,1)!important}
[dir=rtl] .modal .x{right:auto!important;left:16px!important}.modal .x:hover{color:var(--modal-ink)!important;background:rgba(255,255,255,.08)!important;border-color:rgba(190,205,230,.28)!important;transform:translateY(-1px)}.modal .x:focus-visible{outline:2px solid #75f3c8;outline-offset:2px}
.modal h3{max-width:calc(100% - 54px);margin:0 0 8px!important;color:var(--modal-ink)!important;font:650 1.35rem/1.25 Poppins,system-ui,sans-serif!important;letter-spacing:-.025em!important}.modal h3+.small{max-width:72ch;margin:0 0 26px!important;color:var(--modal-muted)!important;line-height:1.65!important}
.modal label.f{display:block!important;min-height:auto!important;margin:0 0 7px!important;padding:0!important;border:0!important;background:transparent!important;color:var(--modal-muted)!important;font:650 .67rem/1.35 Poppins,system-ui,sans-serif!important;letter-spacing:.045em!important;text-transform:none!important}
.modal :where(input.f,select.f,textarea.f,input:not([type=checkbox]):not([type=radio])){width:100%;min-height:46px!important;padding:11px 13px!important;border:1px solid var(--modal-line)!important;border-radius:11px!important;background:rgba(2,6,13,.68)!important;color:var(--modal-ink)!important;font:500 .85rem/1.35 Poppins,system-ui,sans-serif!important;box-shadow:0 1px 0 rgba(255,255,255,.025) inset!important}
.modal textarea.f{min-height:100px!important;resize:vertical}.modal :where(input,textarea)::placeholder{color:#717f96!important;opacity:1}.modal select.f option{background:#0b111c!important;color:#f3f7fc!important}
.modal :where(input.f,select.f,textarea.f):hover{border-color:rgba(190,205,230,.26)!important}.modal :where(input.f,select.f,textarea.f):focus{border-color:#75f3c8!important;outline:0!important;box-shadow:0 0 0 3px rgba(117,243,200,.11)!important}
.modal .field-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px 20px!important;margin:24px 0!important}.modal .field-row>div{min-width:0}.modal .field-row+label.f{margin-top:22px!important}.modal .field-row~label.f{margin-top:18px!important}
.modal .flex{gap:12px!important;align-items:center!important}.modal .hr{margin:26px 0!important;border-color:var(--modal-line)!important}.modal .tiny,.modal .small,.modal .muted{color:var(--modal-muted)!important}.modal .btn{min-height:44px!important;padding:0 17px!important;border-radius:11px!important}
.modal:has(#cp_name){width:min(100%,1080px)!important}.modal:has(#cp_name) .field-row{grid-template-columns:repeat(3,minmax(0,1fr))!important}.modal:has(#cp_name) .m-body{padding-top:34px!important}.modal:has(#cp_name) #cp_save{min-width:170px;background:#75f3c8!important;border-color:#75f3c8!important;color:#06110e!important}.modal:has(#cp_name) input[type=file]{padding:8px!important}
html[data-theme="light"] .modal-bg{background:rgba(18,29,46,.52)!important}
html[data-theme="light"] .modal{--modal-bg:#f8fafc;--modal-raised:#fff;--modal-ink:#172033;--modal-muted:#58667d;--modal-line:rgba(30,48,73,.16);background-image:radial-gradient(circle at 8% 0,rgba(8,127,104,.06),transparent 25%)!important;box-shadow:0 30px 90px rgba(27,43,65,.28),0 1px 0 #fff inset!important}
html[data-theme="light"] .modal :where(input.f,select.f,textarea.f,input:not([type=checkbox]):not([type=radio])){background:#fff!important;color:#172033!important;box-shadow:0 1px 2px rgba(25,40,62,.04)!important}html[data-theme="light"] .modal select.f option{background:#fff!important;color:#172033!important}html[data-theme="light"] .modal :where(input,textarea)::placeholder{color:#6a768a!important}
@keyframes aw-modal-fade{from{opacity:0}}@keyframes aw-modal-in{from{opacity:0;transform:translateY(14px) scale(.985)}}
@media(max-width:820px){.modal:has(#cp_name) .field-row,.modal .field-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}.modal .m-body{padding:26px 22px!important}}
@media(max-width:560px){.modal-bg{align-items:flex-end!important;padding:8px!important}.modal{max-height:calc(100dvh - 8px);border-radius:20px 20px 12px 12px!important}.modal:has(#cp_name) .field-row,.modal .field-row{grid-template-columns:1fr!important;gap:15px!important}.modal .m-body{padding:24px 18px!important}.modal .x{top:12px!important;right:12px!important}.modal h3{font-size:1.16rem!important}.modal .flex{align-items:stretch!important;flex-direction:column}.modal .flex .btn{width:100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){.modal-bg,.modal{animation:none!important}.modal .x{transition:none!important}}

/* Full-system export — a single premium action beside each existing manual export. */
.full-system-download{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;border-color:rgba(117,243,200,.34)!important;background:rgba(117,243,200,.09)!important;color:#c9fbea!important}.full-system-download:hover{border-color:#75f3c8!important;background:rgba(117,243,200,.16)!important;color:#fff!important}.full-system-download>span:first-child{width:22px;height:22px;display:grid;place-items:center;border-radius:7px;background:rgba(117,243,200,.13);font-size:.9rem}
html[data-theme="light"] .full-system-download{border-color:rgba(8,127,104,.28)!important;background:#edf8f4!important;color:#075f4f!important}html[data-theme="light"] .full-system-download:hover{border-color:#087f68!important;background:#dff3eb!important;color:#063d33!important}

/* Phone performance and responsive hardening — shared by all Workshop surfaces. */
@media(max-width:760px){
  html{scroll-padding-top:72px}
  body{overflow-x:hidden;touch-action:manipulation}
  .cursor-dot,.cursor-ring,.cursor-glow{display:none!important}
  .site-head,.modal-bg,.modal,.hub-toolbar,.tool-guide,.card{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  body:not(.kg-home) .sec{content-visibility:auto;contain-intrinsic-size:auto 560px}
  body:not(.kg-home) :where(.card,.tool-sec,.tool-panel,.result){max-width:100%;overflow-wrap:anywhere}
  body:not(.kg-home) :where(.flex,.actions,.btn-row,.no-print){max-width:100%}
  body:not(.kg-home) :where(.flex,.actions,.btn-row,.no-print)>.btn{min-width:0;max-width:100%}
  .full-system-download{width:100%!important;min-height:48px!important;padding-inline:14px!important;white-space:normal!important;text-align:center}
  .pp-hero-actions{display:grid!important;grid-template-columns:1fr!important}.pp-hero-actions .btn{width:100%;justify-content:center}
  img{max-width:100%;height:auto}
}
@media(max-width:430px){body:not(.kg-home) :where(.btn,button.btn){width:100%;justify-content:center}.modal .btn{width:100%!important}.tool-bar,.cp-actions,.doc-actions{display:grid!important;grid-template-columns:1fr!important}}