/* ============================================================================
   Online Free Tools — Glassmorphism ("Real Object") theme
   ----------------------------------------------------------------------------
   A third theme alongside light/dark: translucent, frosted panels that float
   over a soft colorful backdrop, with the layered highlight/shadow treatment
   that makes glass read as a physical, tactile object rather than a flat
   color swatch. Activated via <html data-theme="glass">, same mechanism the
   existing light/dark toggle already uses (assets/js/app.js).

   Every component below reuses the SAME CSS custom properties app.css already
   drives every surface with (--bg, --surface, --surface2, --text, --muted,
   --border …), so simply overriding those to translucent rgba() values makes
   every existing card/input/dropdown glassy for free. backdrop-filter (blur)
   is added explicitly per-component since that property isn't var-driven.

   Accessibility: panel opacity was chosen (and contrast-checked against the
   brightest pastel blobs in the backdrop below) to keep --text at >12:1 and
   --muted at >5.3:1 against every panel — both comfortably pass WCAG AA.
   ========================================================================== */
html[data-theme="glass"] {
  --bg: transparent;
  --surface: rgba(255,255,255,.62);
  --surface2: rgba(255,255,255,.42);
  --text: #0f172a;
  --muted: #475569;
  --border: rgba(255,255,255,.55);
  --primary: #6d5bf6;
  --primary-600: #5b48e8;
  --primary-50: rgba(109,91,246,.12);
  --accent: #06b6d4;
  --radius: 18px;
  --shadow: 0 8px 32px rgba(31,38,135,.14), inset 0 1px 0 rgba(255,255,255,.5);
  --shadow-lg: 0 20px 60px rgba(31,38,135,.22), inset 0 1px 0 rgba(255,255,255,.5);
}

/* ---------- the colorful backdrop every glass panel blurs against ---------- */
html[data-theme="glass"] body {
  background:
    radial-gradient(38% 32% at 8% 8%, rgba(224,180,255,.55), transparent 60%),
    radial-gradient(32% 30% at 95% 12%, rgba(255,200,220,.5), transparent 60%),
    radial-gradient(40% 36% at 85% 90%, rgba(180,220,255,.55), transparent 60%),
    radial-gradient(34% 30% at 10% 92%, rgba(200,255,230,.5), transparent 60%),
    linear-gradient(135deg,#eef1ff 0%,#f7f0ff 45%,#eafaff 100%);
  background-attachment: fixed;
  min-height: 100vh;
}
html[data-theme="glass"][dir] body { background-attachment: fixed; }

/* ---------- glass utility: blur + saturate behind any surface ---------- */
html[data-theme="glass"] .site-header,
html[data-theme="glass"] .card,
html[data-theme="glass"] .oft-toolbox,
html[data-theme="glass"] .auth-card,
html[data-theme="glass"] .sidebar-box,
html[data-theme="glass"] .tool-hero,
html[data-theme="glass"] .site-footer,
html[data-theme="glass"] .ac-list,
html[data-theme="glass"] .ps-card,
html[data-theme="glass"] .edu-block,
html[data-theme="glass"] .invite-banner,
html[data-theme="glass"] .toast-wrap > *,
html[data-theme="glass"] .result-box {
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid var(--border);
}

html[data-theme="glass"] .site-header {
  background: rgba(255,255,255,.55);
  border-bottom: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 4px 24px rgba(31,38,135,.08);
}
html[data-theme="glass"] .site-footer { background: rgba(255,255,255,.4); border-top: 1px solid rgba(255,255,255,.55); }

html[data-theme="glass"] .card,
html[data-theme="glass"] .oft-toolbox,
html[data-theme="glass"] .auth-card,
html[data-theme="glass"] .ps-card { box-shadow: var(--shadow); }
html[data-theme="glass"] .card:hover,
html[data-theme="glass"] .oft-toolbox:hover { box-shadow: var(--shadow-lg); }

html[data-theme="glass"] .edu-block { background: rgba(255,255,255,.3); border-style: solid; }

/* ---------- glassy pill buttons: translucent fill + inner highlight (the
   "real object" edge-lit look) instead of a flat solid color ---------- */
html[data-theme="glass"] .btn {
  background: linear-gradient(135deg, rgba(109,91,246,.92), rgba(6,182,212,.88));
  box-shadow: 0 6px 18px rgba(109,91,246,.35), inset 0 1px 0 rgba(255,255,255,.4);
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(6px);
}
html[data-theme="glass"] .btn:hover { box-shadow: 0 8px 24px rgba(109,91,246,.45), inset 0 1px 0 rgba(255,255,255,.5); }
html[data-theme="glass"] .btn-light {
  background: rgba(255,255,255,.55);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
html[data-theme="glass"] .btn-outline { background: rgba(255,255,255,.25); border-color: var(--primary); }

/* ---------- inputs: frosted fields that still read clearly ---------- */
html[data-theme="glass"] input:not([type=checkbox]):not([type=radio]):not([type=color]),
html[data-theme="glass"] select,
html[data-theme="glass"] textarea {
  background: rgba(255,255,255,.5);
  border: 1px solid rgba(255,255,255,.65);
  backdrop-filter: blur(8px);
}
html[data-theme="glass"] input:focus, html[data-theme="glass"] select:focus, html[data-theme="glass"] textarea:focus {
  background: rgba(255,255,255,.72);
  box-shadow: 0 0 0 3px rgba(109,91,246,.25);
}

/* ---------- small accent pieces ---------- */
html[data-theme="glass"] .badge { background: rgba(255,255,255,.55); backdrop-filter: blur(6px); }
html[data-theme="glass"] .icon-btn { background: rgba(255,255,255,.4); border: 1px solid rgba(255,255,255,.55); backdrop-filter: blur(6px); }
html[data-theme="glass"] .nav-links a:hover, html[data-theme="glass"] .nav-links a.on { background: rgba(255,255,255,.5); }
html[data-theme="glass"] .subj-chip, html[data-theme="glass"] .lvl-check label, html[data-theme="glass"] .doc-list li {
  background: rgba(255,255,255,.4); border: 1px solid rgba(255,255,255,.55); backdrop-filter: blur(6px);
}

/* Respect reduced-motion / reduced-transparency user preferences: fall back
   to solid (still light, still on-brand) panels with no blur cost. */
@media (prefers-reduced-transparency: reduce) {
  html[data-theme="glass"] {
    --surface: #ffffff;
    --surface2: #f1f5f9;
    --border: #e2e8f0;
  }
  html[data-theme="glass"] .site-header,
  html[data-theme="glass"] .card,
  html[data-theme="glass"] .oft-toolbox,
  html[data-theme="glass"] .auth-card,
  html[data-theme="glass"] .sidebar-box,
  html[data-theme="glass"] .tool-hero,
  html[data-theme="glass"] .site-footer,
  html[data-theme="glass"] .ps-card,
  html[data-theme="glass"] .edu-block {
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  html[data-theme="glass"] body { background: var(--bg, #f6f7fb); }
}