/* Glass themes (Dark glass / Light glass), layered on the dark base or on
 * light-theme.css. html[data-glass] is set by the inline <head> script and
 * public/theme.js. Frosted, see-through cards over a fixed teal and blue
 * color wash; text and borders keep AA contrast. Where backdrop-filter is not
 * supported the cards fall back to near-opaque surfaces.
 */
html[data-glass] body {
  background-attachment: fixed !important;
}
html[data-theme="dark"][data-glass] body {
  background:
    radial-gradient(60rem 40rem at 10% -10%, rgba(20,184,166,.28), transparent 60%),
    radial-gradient(50rem 36rem at 95% 10%, rgba(56,189,248,.22), transparent 60%),
    radial-gradient(56rem 40rem at 50% 110%, rgba(99,102,241,.20), transparent 60%),
    #0b1220 !important;
  background-attachment: fixed !important;
}
html[data-theme="light"][data-glass] body {
  background:
    radial-gradient(60rem 40rem at 10% -10%, rgba(45,212,191,.30), transparent 60%),
    radial-gradient(50rem 36rem at 95% 10%, rgba(125,211,252,.30), transparent 60%),
    radial-gradient(56rem 40rem at 50% 110%, rgba(196,181,253,.28), transparent 60%),
    #eef2f6 !important;
  background-attachment: fixed !important;
}

/* Page bands become transparent so the wash shows through. */
html[data-glass] .bg-slate-950,
html[data-glass] .bg-slate-900\/40,
html[data-glass] .bg-slate-950\/50,
html[data-glass] section.bg-slate-950 { background-color: transparent !important; }
html[data-glass] .from-teal-950\/40, html[data-glass] .from-teal-950\/30 { --tw-gradient-from: transparent !important; }
html[data-glass] .to-slate-950, html[data-glass] .to-slate-900 { --tw-gradient-to: transparent !important; }
html[data-glass] .dot-pattern { background-image: none !important; }

/* Frosted cards. */
html[data-theme="dark"][data-glass] .bg-slate-900,
html[data-theme="dark"][data-glass] .bg-slate-900\/60 {
  background-color: rgba(15,23,42,.55) !important;
  border-color: rgba(255,255,255,.12) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 16px 40px -20px rgba(0,0,0,.6) !important;
}
html[data-theme="light"][data-glass] .bg-slate-900,
html[data-theme="light"][data-glass] .bg-slate-900\/60 {
  background-color: rgba(255,255,255,.62) !important;
  border-color: rgba(255,255,255,.75) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 16px 40px -22px rgba(15,23,42,.25) !important;
}
/* Insets inside a glass card stay readable. */
html[data-theme="dark"][data-glass] .bg-slate-900 .bg-slate-950 { background-color: rgba(2,6,23,.45) !important; }
html[data-theme="light"][data-glass] .bg-slate-900 .bg-slate-950 { background-color: rgba(255,255,255,.55) !important; }

/* Nav: frosted bar. */
html[data-theme="dark"][data-glass] nav.fixed { background-color: rgba(11,18,32,.55) !important; border-color: rgba(255,255,255,.08) !important; }
html[data-theme="light"][data-glass] nav.fixed { background-color: rgba(255,255,255,.55) !important; border-color: rgba(255,255,255,.7) !important; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme="dark"][data-glass] .bg-slate-900 { background-color: rgba(15,23,42,.92) !important; }
  html[data-theme="light"][data-glass] .bg-slate-900 { background-color: rgba(255,255,255,.94) !important; }
}

/* ---- Theme menu (public/theme.js), styled for every theme ---- */
.trx-theme-menu { position: fixed; z-index: 120; min-width: 11rem; padding: .375rem; border-radius: .75rem;
  background: #0f172a; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 16px 40px -12px rgba(0,0,0,.55);
  animation: trx-menu-in .14s cubic-bezier(.16,1,.3,1) both; }
html[data-theme="light"] .trx-theme-menu { background: #ffffff; border-color: #e3ddd2; box-shadow: 0 16px 40px -14px rgba(41,37,36,.25); }
.trx-theme-menu button { display: flex; width: 100%; align-items: center; gap: .625rem; padding: .5rem .625rem; border-radius: .5rem;
  font: 500 .875rem/1.25rem Inter, system-ui, sans-serif; color: #e2e8f0; text-align: left; cursor: pointer; background: transparent; border: 0; }
html[data-theme="light"] .trx-theme-menu button { color: #1e293b; }
.trx-theme-menu button:hover, .trx-theme-menu button:focus-visible { background: rgba(20,184,166,.14); outline: none; }
.trx-theme-menu button[aria-checked="true"] { color: #2dd4bf; font-weight: 700; }
html[data-theme="light"] .trx-theme-menu button[aria-checked="true"] { color: #0f766e; }
.trx-theme-swatch { width: 1.125rem; height: 1.125rem; border-radius: .375rem; flex: none; border: 1px solid rgba(148,163,184,.5); }
.trx-theme-swatch--dark { background: #0f172a; }
.trx-theme-swatch--light { background: #f5f2ec; }
.trx-theme-swatch--dark-glass { background: linear-gradient(135deg, #0f766e, #1e3a8a); }
.trx-theme-swatch--light-glass { background: linear-gradient(135deg, #99f6e4, #bae6fd, #ddd6fe); }
@keyframes trx-menu-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .trx-theme-menu { animation: none; } }

/* Floating layers stay solid in both glass modes: nav dropdown panels, the
 * mobile menu, modals and anything inside an absolute/fixed layer. A
 * see-through menu over page content is unreadable. */
html[data-theme="dark"][data-glass] .absolute .bg-slate-900,
html[data-theme="dark"][data-glass] .absolute.bg-slate-900,
html[data-theme="dark"][data-glass] .fixed .bg-slate-900,
html[data-theme="dark"][data-glass] .fixed.bg-slate-900,
html[data-theme="dark"][data-glass] #mobile-nav {
  background-color: #0f172a !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: 0 20px 48px -16px rgba(0,0,0,.65) !important;
}
html[data-theme="light"][data-glass] .absolute .bg-slate-900,
html[data-theme="light"][data-glass] .absolute.bg-slate-900,
html[data-theme="light"][data-glass] .fixed .bg-slate-900,
html[data-theme="light"][data-glass] .fixed.bg-slate-900,
html[data-theme="light"][data-glass] #mobile-nav {
  background-color: #ffffff !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border-color: #e3ddd2 !important;
  box-shadow: 0 20px 48px -18px rgba(41,37,36,.28) !important;
}
/* Insets inside those solid layers keep the normal (non-glass) tone. */
html[data-theme="dark"][data-glass] .absolute .bg-slate-900 .bg-slate-950,
html[data-theme="dark"][data-glass] .fixed .bg-slate-900 .bg-slate-950 { background-color: #020617 !important; }
html[data-theme="light"][data-glass] .absolute .bg-slate-900 .bg-slate-950,
html[data-theme="light"][data-glass] .fixed .bg-slate-900 .bg-slate-950 { background-color: #f3efe8 !important; }