/* E-Codex Play: brand colors blended softly into the white page background (all pages).
   Loaded after style.css. Safe to remove: delete the <link> lines or run utils/install-site-blend.js --undo */
html { background: var(--page, #F6F9FC); }
body { background: transparent !important; position: relative; }
body::before {
  content: ""; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 42% at 8% 0%,   rgba(47,184,166,.24), rgba(47,184,166,0) 72%),
    radial-gradient(52% 38% at 100% 14%, rgba(20,128,138,.16), rgba(20,128,138,0) 72%),
    radial-gradient(56% 40% at 0% 62%,   rgba(232,115,74,.10), rgba(232,115,74,0) 72%),
    radial-gradient(62% 44% at 100% 100%, rgba(47,184,166,.20), rgba(47,184,166,0) 72%),
    radial-gradient(48% 34% at 40% 100%, rgba(20,128,138,.10), rgba(20,128,138,0) 72%),
    linear-gradient(180deg, #F7FBFB 0%, #F2F8F9 100%);
}
.app-shell, .main-area, .content-area, .form-panel, .layout { background: transparent; }

/* white surfaces become soft tinted glass so the colors flow through them */
.card, .modal-box {
  background: linear-gradient(160deg, rgba(47,184,166,.10) 0%, rgba(255,255,255,.88) 38%, rgba(255,255,255,.92) 100%), rgba(255,255,255,.80);
  border-color: rgba(20,128,138,.16);
  box-shadow: 0 14px 34px rgba(14,79,82,.10), 0 1px 0 rgba(255,255,255,.8) inset;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.top-bar {
  background: linear-gradient(90deg, rgba(255,255,255,.86), rgba(235,250,247,.82)) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(20,128,138,.14) !important;
}