/* =========================================================
   Glass theme — frosted translucent surfaces over a soft colour mesh.
   Opt-in via html.ui-glass (always together with .ui-v2, which supplies the layout).
   Only tokens + translucency live here, so light/dark both work.
   ========================================================= */
:root.ui-glass {
  --bg: #dde5f4;
  --surface: rgba(255, 255, 255, .55);
  --surface-solid: #f5f7fc;
  --surface-2: rgba(255, 255, 255, .42);
  --surface-3: rgba(255, 255, 255, .62);
  --border: rgba(255, 255, 255, .7);
  --border-strong: rgba(15, 27, 45, .14);
  --text: #0c1628;
  --text-2: #3c4a63;
  --text-3: #6b7890;
  --input-bg: rgba(255, 255, 255, .62);
  --head-bg: rgba(255, 255, 255, .38);
  --hover: rgba(255, 255, 255, .5);
  --glass-blur: blur(22px) saturate(170%);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 0 0 1px rgba(255, 255, 255, .18);
  --shadow: 0 1px 2px rgba(20, 35, 70, .05), 0 10px 30px -12px rgba(20, 35, 70, .22);
  --shadow-md: 0 16px 40px -14px rgba(20, 35, 70, .3);
  --shadow-lg: 0 30px 80px -24px rgba(10, 20, 45, .45);
  --mesh-1: #7aa2ff; --mesh-2: #f1c27d; --mesh-3: #8ee0d2; --mesh-4: #c8a6ff;
}
:root.ui-glass[data-theme='dark'] {
  --bg: #060a14;
  --surface: rgba(24, 33, 54, .5);
  --surface-solid: #111a2b;
  --surface-2: rgba(255, 255, 255, .045);
  --surface-3: rgba(255, 255, 255, .09);
  --border: rgba(255, 255, 255, .1);
  --border-strong: rgba(255, 255, 255, .18);
  --text: #eef2f9; --text-2: #b0bbcf; --text-3: #7c89a1;
  --input-bg: rgba(6, 10, 20, .42);
  --head-bg: rgba(255, 255, 255, .035);
  --hover: rgba(255, 255, 255, .06);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 0 0 1px rgba(255, 255, 255, .03);
  --shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
  --shadow-md: 0 18px 44px -14px rgba(0, 0, 0, .7);
  --shadow-lg: 0 34px 90px -24px rgba(0, 0, 0, .85);
  --mesh-1: #2b4fd8; --mesh-2: #a8762c; --mesh-3: #0f8f86; --mesh-4: #6b3fd1;
}

/* ---------- Colour mesh behind everything ---------- */
.ui-glass body {
  background-color: var(--bg);
  background-image:
    radial-gradient(40vw 40vw at 88% 8%, color-mix(in srgb, var(--mesh-1) 55%, transparent), transparent 70%),
    radial-gradient(34vw 34vw at 8% 92%, color-mix(in srgb, var(--mesh-2) 45%, transparent), transparent 70%),
    radial-gradient(30vw 30vw at 45% 55%, color-mix(in srgb, var(--mesh-3) 30%, transparent), transparent 70%),
    radial-gradient(28vw 28vw at 15% 15%, color-mix(in srgb, var(--mesh-4) 35%, transparent), transparent 70%);
  background-attachment: fixed;
}
/* Two slow floating orbs give the glass something to refract */
.ui-glass body::before, .ui-glass body::after {
  content: ''; position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(60px); opacity: .55;
}
.ui-glass body::before { width: 34vw; height: 34vw; top: 18%; right: 22%; background: var(--mesh-1); animation: orbA 26s ease-in-out infinite alternate; }
.ui-glass body::after { width: 28vw; height: 28vw; bottom: 6%; left: 26%; background: var(--mesh-4); animation: orbB 32s ease-in-out infinite alternate; }
.ui-glass[data-theme='dark'] body::before, .ui-glass[data-theme='dark'] body::after { opacity: .35; }
@keyframes orbA { to { transform: translate(-14vw, 10vh) scale(1.15); } }
@keyframes orbB { to { transform: translate(16vw, -12vh) scale(.9); } }
@media (prefers-reduced-motion: reduce) { .ui-glass body::before, .ui-glass body::after { animation: none; } }

/* ---------- Frosted panels ---------- */
.ui-glass .sidebar, .ui-glass .topbar, .ui-glass .card, .ui-glass .drawer, .ui-glass .umenu,
.ui-glass .cs-pop, .ui-glass .pal, .ui-glass .toast, .ui-glass .modal {
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-color: var(--border);
}
.ui-glass .sidebar, .ui-glass .topbar, .ui-glass .card { box-shadow: var(--shadow), var(--glass-edge); }
.ui-glass .sidebar { background: color-mix(in srgb, var(--surface) 92%, transparent); }
.ui-glass .topbar { background: var(--surface); }
.ui-glass .card { background: var(--surface); }
/* Cards nested in cards stay flat so the frost doesn't stack into mud */
.ui-glass .card .card { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface-2); box-shadow: none; }

/* Floating layers need more opacity to stay readable over busy content */
.ui-glass .modal, .ui-glass .drawer, .ui-glass .pal { background: color-mix(in srgb, var(--surface-solid) 74%, transparent); box-shadow: var(--shadow-lg), var(--glass-edge); }
.ui-glass .cs-pop, .ui-glass .umenu, .ui-glass .toast { background: color-mix(in srgb, var(--surface-solid) 82%, transparent); box-shadow: var(--shadow-md), var(--glass-edge); }
.ui-glass .modal-head, .ui-glass .modal-foot {
  background: color-mix(in srgb, var(--surface-solid) 55%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.ui-glass .modal-back, .ui-glass .drawer-back, .ui-glass .pal-back, .ui-glass .cs-back {
  background: color-mix(in srgb, #0a1428 30%, transparent); -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%);
}

/* ---------- Controls ---------- */
.ui-glass .input, .ui-glass .cs-trigger, .ui-glass .search-pill { background: var(--input-bg); border-color: var(--border); }
.ui-glass .input:focus, .ui-glass .cs-trigger:focus-visible { background: color-mix(in srgb, var(--surface-solid) 85%, transparent); }
.ui-glass .rate-pill, .ui-glass .theme-btn { background: var(--surface); border-color: var(--border); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.ui-glass .btn:not(.btn-primary):not(.btn-success):not(.btn-danger) { background: color-mix(in srgb, var(--surface-solid) 45%, transparent); border-color: var(--border); }
.ui-glass .btn-ghost:not(:hover) { background: transparent; border-color: transparent; }
.ui-glass .btn-primary { box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--primary) 85%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25); }
.ui-glass .seg { background: var(--surface-2); border-color: var(--border); }
.ui-glass .seg button.on { background: color-mix(in srgb, var(--surface-solid) 80%, transparent); }

/* ---------- Tables ---------- */
.ui-glass .t thead th { background: var(--head-bg); }
.ui-glass .t tbody tr:hover td { background: var(--hover); }
.ui-glass .t td, .ui-glass .t th { border-color: color-mix(in srgb, var(--border-strong) 60%, transparent); }
.ui-glass .t tfoot td { background: var(--surface-2); }

/* ---------- Navigation ---------- */
.ui-glass .nav a:hover { background: var(--surface-3); }
.ui-glass .nav a.active { box-shadow: 0 10px 24px -10px rgba(16, 40, 74, .75), inset 0 1px 0 rgba(255, 255, 255, .15); }
.ui-glass[data-theme='dark'] .nav a.active { background: linear-gradient(140deg, color-mix(in srgb, var(--primary) 55%, #0b1a33), #142748); }

/* ---------- Mobile: lighter blur for smoother scrolling ---------- */
@media (max-width: 900px) {
  :root.ui-glass { --glass-blur: blur(14px) saturate(160%); }
  .ui-glass body::before, .ui-glass body::after { filter: blur(40px); }
}
/* Browsers without backdrop-filter fall back to near-solid panels */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root.ui-glass { --surface: rgba(255, 255, 255, .92); }
  :root.ui-glass[data-theme='dark'] { --surface: rgba(20, 28, 46, .95); }
}

/* ---------- Theme picker preview + print safety ---------- */
.tc-prev.glass { padding: 8px; gap: 6px; background:
  radial-gradient(60% 80% at 85% 10%, #7aa2ff, transparent 70%), radial-gradient(60% 80% at 10% 95%, #f1c27d, transparent 70%),
  radial-gradient(50% 60% at 50% 50%, #8ee0d2, transparent 70%), #dde5f4; }
.tc-prev.glass i { border-radius: 6px; background: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); }
@media print {
  .ui-glass body { background: #fff !important; }
  .ui-glass body::before, .ui-glass body::after { display: none !important; }
  .ui-glass .card, .ui-glass .sidebar, .ui-glass .topbar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: #fff !important; }
}

.theme-pick .set-sub + .set-sub { margin-top: 18px; }
.theme-pick .set-sub h4 { margin: 0 0 10px; font-size: 13.5px; color: var(--text-2); }
.theme-pick .theme-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.theme-cards { grid-template-columns: repeat(3, minmax(0, 220px)); }
@media (max-width: 640px) { .theme-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { #pick-theme { display: none; } }
.ui-glass .unit-pop { background: color-mix(in srgb, var(--surface-solid) 96%, transparent); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-md), var(--glass-edge); }
.ui-glass .co-card, .ui-glass .u-card { -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--shadow), var(--glass-edge); }