/* Hub V410 — Color Balance + Readability Pass
   Purpose: preserve STLBEAST premium contrast while preventing large areas from feeling too dark.
*/

:root{
  --hub410-page:#f8fbff;
  --hub410-page-2:#eef6ff;
  --hub410-card:#ffffff;
  --hub410-ink:#0f172a;
  --hub410-body:#475569;
  --hub410-muted:#64748b;
  --hub410-blue:#0ea5e9;
  --hub410-blue-2:#2563eb;
  --hub410-cyan:#67e8f9;
  --hub410-line:#bfdbfe;
  --hub410-dark:#07111f;
  --hub410-dark-soft:#0f1c2e;
}

/* Overall page should feel bright/premium, not heavy. */
body{
  background:
    radial-gradient(circle at 14% 0%, rgba(14,165,233,.12), transparent 30%),
    radial-gradient(circle at 86% 6%, rgba(37,99,235,.08), transparent 28%),
    linear-gradient(180deg, var(--hub410-page) 0%, var(--hub410-page-2) 46%, #ffffff 100%) !important;
  color:var(--hub410-ink) !important;
}

/* The shell background should not create giant dark bands around content. */
.shell{
  background:transparent !important;
}
.main,
.legacy-main{
  background:transparent !important;
}

/* Headings and copy on light cards. */
main :where(h1,h2,h3,h4){
  color:var(--hub410-ink);
}
main :where(p,li,span){
  text-shadow:none;
}

/* Lighten section headers that previously sat on dark gradients. */
.hub393-section-head,
.hub406-quality-bar,
.hub382-symptom-nav,
.hub403-router-head,
.hub398-icon-library-head,
.hub406-fix-command-head,
.hub406-guide-command-head{
  background:
    radial-gradient(circle at 90% 8%, rgba(14,165,233,.13), transparent 32%),
    linear-gradient(135deg,#ffffff,#f8fbff 62%,#eef6ff) !important;
  border:1px solid rgba(191,219,254,.90) !important;
  box-shadow:0 18px 46px rgba(15,23,42,.07) !important;
}
.hub393-section-head h2,
.hub406-quality-bar h2,
.hub382-symptom-nav h2,
.hub403-router-head h2,
.hub398-icon-library-head h2,
.hub406-fix-command-head h1,
.hub406-guide-command-head h1{
  color:var(--hub410-ink) !important;
  text-shadow:none !important;
}
.hub393-section-head p,
.hub382-symptom-nav p,
.hub403-router-head p,
.hub398-icon-library-head p,
.hub406-fix-command-head p,
.hub406-guide-command-head p{
  color:var(--hub410-body) !important;
}
.hub393-section-head a{
  color:#0369a1 !important;
}

/* Convert the V406 quality bar from heavy black to a premium bright trust bar. */
.hub406-quality-bar{
  color:var(--hub410-ink) !important;
}
.hub406-quality-bar b{
  color:var(--hub410-ink) !important;
}
.hub406-quality-bar span{
  color:var(--hub410-body) !important;
}
.hub406-quality-bar a{
  color:#0369a1 !important;
}

/* Cards should be clean white/ice rather than gloomy. */
.hub393-card,
.hub393-path,
.hub391-mini-card,
.hub398-icon-grid a,
.hub403-route,
.hub403-steps a,
.hub403-collection-grid a,
.hub406-fix-flow a,
.hub406-guide-routes a,
.hub407-qa-grid a,
.hub407-qa-grid div,
.card,
[class*="card"],
[class*="panel"]{
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%) !important;
  border-color:rgba(191,219,254,.88) !important;
  box-shadow:0 16px 38px rgba(15,23,42,.07) !important;
}
.hub393-card h2,
.hub393-card h3,
.hub393-path h3,
.hub391-mini-card b,
.hub398-icon-grid b,
.hub403-route h3,
.hub403-steps h3,
.hub406-guide-routes b,
.hub406-fix-flow b,
.card h2,
.card h3,
[class*="card"] h2,
[class*="card"] h3,
[class*="panel"] h2,
[class*="panel"] h3{
  color:var(--hub410-ink) !important;
}
.hub393-card p,
.hub393-path p,
.hub391-mini-card span,
.hub398-icon-grid span,
.hub403-route p,
.hub403-steps p,
.hub406-guide-routes span,
.hub406-fix-flow span,
.card p,
[class*="card"] p,
[class*="panel"] p{
  color:var(--hub410-body) !important;
}

/* Keep one dark accent style, but lighten it and prevent unreadable areas. */
.hub404-storefront-grid,
.hub144-member-bridge.dark,
.footer,
section[class*="dark"],
[class*="dark-panel"],
[class*="storefront-bridge"]{
  background:
    radial-gradient(circle at 18% 10%, rgba(14,165,233,.20), transparent 34%),
    radial-gradient(circle at 86% 8%, rgba(37,99,235,.16), transparent 30%),
    linear-gradient(135deg, #0f1c2e 0%, #10233a 58%, #07111f 100%) !important;
  border-color:rgba(125,211,252,.26) !important;
}
.hub404-storefront-grid h2,
.hub144-member-bridge.dark h2,
.footer b,
section[class*="dark"] h2,
[class*="dark-panel"] h2{
  color:#f8fafc !important;
}
.hub404-storefront-grid p,
.hub144-member-bridge.dark p,
.hub144-member-bridge.dark span,
.footer p,
.footer a,
section[class*="dark"] p,
[class*="dark-panel"] p{
  color:#dbeafe !important;
}

/* Storefront bridge cards were too dark; lighten individual surfaces. */
.hub404-storefront-cards a{
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.08)) !important;
  border:1px solid rgba(191,219,254,.24) !important;
}
.hub404-storefront-cards b{
  color:#ffffff !important;
}
.hub404-storefront-cards span{
  color:#dbeafe !important;
}

/* Header control strip should be readable but not visually heavy. */
.hub405-nav,
.hub405-search,
.hub405-mobile-nav a{
  background:rgba(255,255,255,.96) !important;
  border-color:rgba(191,219,254,.90) !important;
  box-shadow:0 12px 28px rgba(15,23,42,.08) !important;
}
.hub405-nav a{
  color:#0f172a !important;
}
.hub405-nav .hub405-nav-cta,
.hub405-mobile-nav a:first-child,
.hub405-search button{
  background:linear-gradient(135deg,#0ea5e9,#2563eb) !important;
  color:#ffffff !important;
}

/* Forms and tool controls. */
input,
select,
textarea{
  color:#0f172a !important;
  background:#ffffff !important;
  border-color:#bfdbfe !important;
}
input::placeholder,
textarea::placeholder{
  color:#64748b !important;
}

/* Visual images should not sit on pure black blocks unless intentionally dark. */
.hub393-card img,
.hub398-icon-grid img,
.hub403-route img,
.hub396-visual-card img{
  background:
    radial-gradient(circle at 50% 12%,rgba(14,165,233,.12),transparent 38%),
    linear-gradient(180deg,#f8fbff,#eef6ff) !important;
}

/* Links and CTAs. */
main a:not(.hub393-btn):not(.hub395-btn):not(.hub144-btn):not(.hub405-nav a):not(.hub405-mobile-nav a){
  color:#0369a1;
}
main a:hover{
  color:#0ea5e9;
}

/* Mobile: reduce dark stacked impression. */
@media(max-width:760px){
  body{
    background:linear-gradient(180deg,#f8fbff,#eef6ff 48%,#ffffff) !important;
  }
  .hub393-section-head,
  .hub406-fix-command-head,
  .hub406-guide-command-head,
  .hub382-symptom-nav{
    border-radius:22px !important;
  }
  .hub404-storefront-grid,
  .hub144-member-bridge.dark,
  .footer{
    background:linear-gradient(135deg,#10233a,#07111f) !important;
  }
}