/* =========================================================
   DBPHYSICS — LIQUID GLASS · fluid neon backdrop
   Light theme is the default. Dark theme is a toggle (data-theme="dark").
   Link LAST in <head>. Pair with liquid-bg.js.
   ========================================================= */

:root {
  --lg-base: #eef3fc;
  --lg-text: #0f172a;
  --lg-text-2: #475569;
  --lg-text-3: #64748b;
  --lg-accent: #4f46e5;
  --lg-rim: rgba(255, 255, 255, .95);
  --lg-rim-soft: rgba(255, 255, 255, .5);
  --lg-edge: rgba(120, 132, 210, .16);
  --lg-shadow: rgba(63, 72, 160, .28);
  --lg-fill-a: rgba(255, 255, 255, .62);
  --lg-fill-b: rgba(255, 255, 255, .20);
  --lg-fill-c: rgba(255, 255, 255, .38);
  --lg-sheen: rgba(255, 255, 255, .62);
  --lg-pill-a: rgba(255, 255, 255, .78);
  --lg-pill-b: rgba(255, 255, 255, .34);
  --lg-fluid-op: .78;
  --lg-field: rgba(255, 255, 255, .6);
  --lg-field-line: rgba(255, 255, 255, .85);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --lg-base: #07071f;
  --lg-text: #f8fafc;
  --lg-text-2: #cbd5e1;
  --lg-text-3: #94a3b8;
  --lg-accent: #a5b4fc;
  --lg-rim: rgba(255, 255, 255, .5);
  --lg-rim-soft: rgba(255, 255, 255, .20);
  --lg-edge: rgba(255, 255, 255, .07);
  --lg-shadow: rgba(0, 0, 0, .6);
  --lg-fill-a: rgba(255, 255, 255, .15);
  --lg-fill-b: rgba(255, 255, 255, .04);
  --lg-fill-c: rgba(255, 255, 255, .09);
  --lg-sheen: rgba(255, 255, 255, .20);
  --lg-pill-a: rgba(255, 255, 255, .22);
  --lg-pill-b: rgba(255, 255, 255, .07);
  --lg-fluid-op: 1;
  --lg-field: rgba(255, 255, 255, .08);
  --lg-field-line: rgba(255, 255, 255, .22);
}

/* Static fallback so the page is never plain before JS runs */
html {
  background:
    radial-gradient(900px 640px at 8% -6%, rgba(255, 120, 230, .35), transparent 62%),
    radial-gradient(900px 640px at 100% 6%, rgba(90, 200, 255, .38), transparent 62%),
    radial-gradient(1000px 700px at 70% 112%, rgba(150, 110, 255, .32), transparent 62%),
    var(--lg-base);
  background-attachment: fixed;
}
html { background-color: var(--lg-base) !important; }
body { background: transparent !important; }
body .glass-card, body .auth-card { position: relative; }

/* Old orbs / auth backdrop are replaced */
.animate-orb-1, .animate-orb-2, .animate-orb-3, .auth-bg { display: none !important; }

.lg-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; }

/* LIQUID LAYER: droplets drawn by liquid-bg.js, merged by an SVG "gooey" filter.
   Rendered at reduced resolution, then scaled up, so it stays cheap on phones. */
.lg-goo { position: absolute; left: 0; top: 0; transform-origin: 0 0; opacity: var(--lg-fluid-op); filter: none !important; }
.lg-goo.is-lite { filter: none !important; }
.lg-drop {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  will-change: transform;
  contain: strict;
  transition: transform 55ms linear;
  outline: 1px solid rgba(255, 255, 255, .20);
  box-shadow: 0 0 8px rgba(255, 255, 255, .20);
}

/* Small glossy bubbles, like the reference */
.lg-orb {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .95) 0 5%, rgba(255, 255, 255, .35) 14%, transparent 36%),
    radial-gradient(circle at 50% 50%, #6ea8ff, #a46bff 58%, #ff6bd6 100%);
  box-shadow: inset -6px -8px 18px rgba(60, 20, 160, .35), inset 4px 6px 12px rgba(255, 255, 255, .45), 0 18px 30px -10px rgba(90, 70, 220, .5);
}
.lg-orb.o1 { width: 64px; height: 64px; left: 7vw;  top: 18vh; animation: none; }
.lg-orb.o2 { width: 40px; height: 40px; right: 6vw; bottom: 22vh; animation: none; }
.lg-orb.o3 { width: 90px; height: 90px; right: 14vw; top: 34vh; animation: none; }

.lg-grain { display: none !important; }

@keyframes lg-bob-1  { 0%,100% { transform: translate(0,0); } 50% { transform: translate(18px, -26px); } }
@keyframes lg-bob-2  { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-16px, 22px); } }
@keyframes lg-bob-3  { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-24px, -18px); } }

/* ---------- LIQUID GLASS MATERIAL ---------- */

/* Main cards */
body :is(.glass-card, .glass, .admin-card, .auth-card) {
  background:
    radial-gradient(420px circle at var(--mx, 12%) var(--my, 0%), var(--lg-sheen), transparent 58%),
    linear-gradient(135deg, var(--lg-fill-a) 0%, var(--lg-fill-b) 42%, var(--lg-fill-c) 100%) !important;
  -webkit-backdrop-filter: blur(2px) saturate(115%);
          backdrop-filter: blur(2px) saturate(115%);
  border: 1px solid var(--lg-rim-soft) !important;
  box-shadow:
    inset 0 1.5px 0 var(--lg-rim),
    inset 1.5px 0 0 rgba(255, 255, 255, .55),
    inset 0 -1.5px 0 var(--lg-edge),
    inset 0 0 26px 2px color-mix(in srgb, var(--lg-rim) 28%, transparent),
    0 22px 56px -20px var(--lg-shadow),
    0 2px 8px rgba(63, 72, 160, .06) !important;
  transition: box-shadow .35s ease, transform .3s ease, border-color .3s ease, background-color .3s ease;
}
body :is(.glass-card, .glass, .admin-card, .auth-card):hover {
  box-shadow:
    inset 0 1.5px 0 #fff,
    inset 1.5px 0 0 rgba(255, 255, 255, .7),
    inset 0 -1.5px 0 var(--lg-edge),
    inset 0 0 30px 3px rgba(255, 255, 255, .42),
    0 28px 64px -20px rgba(63, 72, 160, .36),
    0 2px 8px rgba(63, 72, 160, .08) !important;
}

/* Secondary light panels used on dashboard, recordings, profile, admin, plan, ranking */
body [class*="bg-white/"][class*="rounded-"]:not([class*="bg-white/1"]):not([class*="bg-white/2"]):not([class*="bg-white/3"]):not(.glass-card),
body [class~="bg-white"][class*="rounded-"][class*="border-slate"] {
  background: linear-gradient(135deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .24) 55%, rgba(255, 255, 255, .40)) !important;
  -webkit-backdrop-filter: blur(1px) saturate(110%);
          backdrop-filter: blur(1px) saturate(110%);
  border-color: rgba(255, 255, 255, .55) !important;
  box-shadow:
    inset 0 1.2px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(120, 132, 210, .12),
    inset 0 0 18px rgba(255, 255, 255, .28),
    0 12px 32px -16px rgba(63, 72, 160, .26);
}
/* Glass inside glass: skip the second blur, keep the highlights */
body :is(.glass-card, .glass, .admin-card, .auth-card) [class*="bg-white/"][class*="rounded-"] {
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .22)) !important;
}

/* Pill buttons (About, Contact, Practical, Quiz, back links, quiz options) */
body a[class*="bg-white/"][class*="rounded-full"],
body button[class*="bg-white/"][class*="rounded-full"],
body a[class~="bg-white"][class*="rounded-full"],
body button[class~="bg-white"][class*="rounded-full"],
body .option-btn {
  background: linear-gradient(180deg, var(--lg-pill-a), var(--lg-pill-b)) !important;
  -webkit-backdrop-filter: blur(1px) saturate(110%);
          backdrop-filter: blur(1px) saturate(110%);
  border-color: var(--lg-rim-soft) !important;
  box-shadow:
    inset 0 1.5px 0 #fff,
    inset 0 -1.5px 0 rgba(120, 132, 210, .14),
    inset 0 0 12px rgba(255, 255, 255, .5),
    0 8px 20px -8px rgba(63, 72, 160, .30) !important;
}
body a[class*="bg-white/"][class*="rounded-full"]:hover,
body button[class*="bg-white/"][class*="rounded-full"]:hover,
body .option-btn:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .55)) !important;
  box-shadow:
    inset 0 1.5px 0 #fff,
    inset 0 -1.5px 0 rgba(120, 132, 210, .16),
    inset 0 0 16px rgba(255, 255, 255, .7),
    0 14px 26px -10px rgba(63, 72, 160, .40) !important;
}

/* Primary indigo buttons: tinted glass with a bright top edge */
body a[class*="bg-indigo-600"],
body button[class*="bg-indigo-600"],
body .btn-primary {
  background: linear-gradient(180deg, rgba(129, 120, 255, .96), rgba(79, 70, 229, .92)) !important;
  border: 1px solid rgba(255, 255, 255, .45);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .75),
    inset 0 -2px 6px rgba(40, 30, 160, .35),
    inset 0 0 14px rgba(255, 255, 255, .18),
    0 14px 28px -8px rgba(79, 70, 229, .55) !important;
}
body a[class*="bg-indigo-600"]:hover,
body button[class*="bg-indigo-600"]:hover,
body .btn-primary:hover {
  background: linear-gradient(180deg, rgba(150, 142, 255, 1), rgba(92, 82, 240, .96)) !important;
}

/* PHYSIX CORE AI button keeps its gradient; add the glass rim */
body .glow-x-theme {
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .8),
    inset 0 -2px 6px rgba(40, 30, 160, .28),
    inset 0 0 14px rgba(255, 255, 255, .22),
    0 14px 32px -6px rgba(79, 70, 229, .5) !important;
}

/* Forms */
body .field,
body input[type="text"].field,
body .otp-input {
  background: var(--lg-field) !important;
  color: var(--lg-text);
  border: 1px solid var(--lg-field-line) !important;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  box-shadow: inset 0 2px 6px rgba(63, 72, 160, .10), inset 0 -1px 0 rgba(255, 255, 255, .9);
}
body .field:focus,
body .otp-input:focus {
  background: rgba(255, 255, 255, .88) !important;
  border-color: #818cf8 !important;
  box-shadow: inset 0 2px 6px rgba(63, 72, 160, .06), 0 0 0 4px rgba(99, 102, 241, .16);
}
body .auth-tabs {
  background: rgba(255, 255, 255, .34);
  box-shadow: inset 0 1.5px 4px rgba(63, 72, 160, .12), 0 1px 0 rgba(255, 255, 255, .8);
}
body .auth-tab.active {
  background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .7));
  box-shadow: inset 0 1.5px 0 #fff, 0 6px 16px rgba(63, 72, 160, .16);
}
body .btn-soft { background: rgba(255, 255, 255, .55); box-shadow: inset 0 1.5px 0 #fff; }
body .auth-footer { border-top-color: rgba(120, 132, 210, .18); }

/* Footer text sits straight on the backdrop, so keep it readable */
body footer { color: #64748b !important; }

/* ---------- ACCESSIBILITY + FALLBACKS ---------- */

@media (max-width: 640px) {
  .lg-orb.o3 { display: none; }
  .lg-orb.o1 { width: 130px; height: 130px; top: 70vh; }
  body :is(.glass-card, .glass, .admin-card, .auth-card) {
    -webkit-backdrop-filter: blur(1px) saturate(110%);
            backdrop-filter: blur(1px) saturate(110%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lg-orb, .lg-badge { animation: none !important; }
}

@media (prefers-reduced-transparency: reduce) {
  body :is(.glass-card, .glass, .admin-card, .auth-card) { background: rgba(255, 255, 255, .92) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body :is(.glass-card, .glass, .admin-card, .auth-card) { background: rgba(255, 255, 255, .86) !important; }
}

/* ---------- NEW UI COMPONENTS ---------- */

.lg-title  { color: var(--lg-text);   font-weight: 900; letter-spacing: -.02em; }
.lg-sub    { color: var(--lg-text-2); }
.lg-muted  { color: var(--lg-text-3); }
.lg-accent { color: var(--lg-accent); }
.lg-rule   { display: block; width: 120px; height: 3px; border-radius: 3px; background: var(--lg-text); opacity: .85; }

/* Floating nav dock */
.lg-dock {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px;
  padding: 7px; border-radius: 999px;
}
.lg-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; color: var(--lg-text-2); text-decoration: none;
  transition: background .25s, color .25s, box-shadow .25s, transform .2s;
}
.lg-link:hover { color: var(--lg-text); background: color-mix(in srgb, var(--lg-rim) 26%, transparent); box-shadow: inset 0 1px 0 var(--lg-rim); transform: translateY(-1px); }
.lg-link.is-primary { color: #fff; background: linear-gradient(180deg, rgba(129,120,255,.96), rgba(79,70,229,.92)); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.7), inset 0 -2px 6px rgba(40,30,160,.35), 0 10px 22px -8px rgba(79,70,229,.6); }
.lg-link.is-ai { color: #fff; background: linear-gradient(120deg, #ff3df0, #7b4dff 50%, #21d4fd); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.7), 0 10px 24px -8px rgba(123,77,255,.6); }

/* Call-to-action pills */
.lg-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 26px; border-radius: 999px; font-weight: 800; font-size: 13.5px; text-decoration: none; color: var(--lg-text);
  background: linear-gradient(180deg, var(--lg-pill-a), var(--lg-pill-b));
  border: 1px solid var(--lg-rim-soft);
  box-shadow: inset 0 1.5px 0 var(--lg-rim), 0 12px 26px -10px var(--lg-shadow);
  transition: transform .2s, box-shadow .25s;
}
.lg-cta:hover { transform: translateY(-2px) scale(1.02); }
.lg-cta:active { transform: scale(.97); }
.lg-cta.is-solid { color: #fff; border-color: rgba(255,255,255,.4); background: linear-gradient(120deg, #7b4dff, #4f46e5 55%, #21a8fd); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.7), inset 0 -2px 6px rgba(40,30,160,.3), 0 14px 30px -8px rgba(79,70,229,.6); }
.lg-cta.is-ai { color: #fff; border-color: rgba(255,255,255,.4); background: linear-gradient(120deg, #ff3df0, #7b4dff 50%, #21d4fd); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.7), 0 14px 30px -8px rgba(123,77,255,.65); }

/* Small label tag (like the reference's "EPS format" chip) */
.lg-tag {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--lg-text);
  background: linear-gradient(180deg, var(--lg-pill-a), var(--lg-pill-b)); border: 1px solid var(--lg-rim-soft); box-shadow: inset 0 1px 0 var(--lg-rim);
}

/* Glossy sphere badge that overlaps a card corner */
.lg-badge {
  position: absolute; z-index: 3; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-size: 23px; pointer-events: none;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.9) 0 6%, rgba(255,255,255,.28) 16%, transparent 38%),
    radial-gradient(circle at 50% 50%, #4aa3ff, #7b4dff 58%, #d94bff 100%);
  border: 2px solid rgba(255, 255, 255, .75);
  box-shadow: inset -5px -7px 14px rgba(40, 20, 150, .4), inset 3px 4px 8px rgba(255, 255, 255, .45), 0 16px 30px -8px rgba(90, 70, 230, .6);
  animation: lg-bob-2 9s ease-in-out infinite;
}
.lg-badge i { filter: drop-shadow(0 2px 3px rgba(30, 10, 120, .5)); }
.lg-badge.tr { top: -24px; right: -14px; }
.lg-badge.br { bottom: -22px; right: -12px; width: 56px; height: 56px; font-size: 20px; animation-delay: -3s; }
.lg-badge.tl { top: -22px; left: -12px; width: 52px; height: 52px; font-size: 18px; animation-delay: -5s; }

.lg-dots { display: inline-flex; gap: 6px; }
.lg-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--lg-text); opacity: .3; }
.lg-dots i:first-child { opacity: .9; }

.lg-logo-tile { width: 150px; height: 150px; border-radius: 38%; display: grid; place-items: center; background: rgba(255,255,255,.92); box-shadow: inset 0 2px 0 #fff, 0 22px 40px -14px var(--lg-shadow); }

/* Theme toggle sphere */
.lg-toggle {
  position: fixed; left: calc(16px + env(safe-area-inset-left, 0px)); top: calc(16px + env(safe-area-inset-top, 0px)); right: auto; bottom: auto; z-index: 10050; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: var(--lg-text); border: 1px solid var(--lg-rim-soft);
  background: linear-gradient(180deg, var(--lg-pill-a), var(--lg-pill-b));
  -webkit-backdrop-filter: blur(1px) saturate(110%); backdrop-filter: blur(1px) saturate(110%);
  box-shadow: inset 0 1.5px 0 var(--lg-rim), 0 12px 26px -8px var(--lg-shadow);
  transition: transform .25s;
}
.lg-toggle:hover { transform: scale(1.08) rotate(12deg); }
.lg-toggle:focus-visible, .lg-link:focus-visible, .lg-cta:focus-visible { outline: 2px solid #818cf8; outline-offset: 3px; }
.lg-toggle .i-sun { display: none; }
html[data-theme="dark"] .lg-toggle .i-sun { display: block; }
html[data-theme="dark"] .lg-toggle .i-moon { display: none; }

/* ---------- DARK THEME: map the site's existing text utilities ---------- */
html[data-theme="dark"] body .text-slate-900,
html[data-theme="dark"] body .text-slate-800,
html[data-theme="dark"] body .text-slate-700 { color: #f1f5f9 !important; }
html[data-theme="dark"] body .text-slate-600,
html[data-theme="dark"] body .text-slate-500 { color: #cbd5e1 !important; }
html[data-theme="dark"] body .text-slate-400 { color: #94a3b8 !important; }
html[data-theme="dark"] body .text-indigo-600,
html[data-theme="dark"] body .text-indigo-700 { color: #a5b4fc !important; }
html[data-theme="dark"] body .text-purple-600 { color: #d8b4fe !important; }
html[data-theme="dark"] body footer { color: #94a3b8 !important; }
html[data-theme="dark"] body [class*="bg-white/"][class*="rounded-"]:not([class*="bg-white/1"]):not([class*="bg-white/2"]):not([class*="bg-white/3"]):not(.glass-card) {
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04)) !important;
  border-color: rgba(255,255,255,.2) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 12px 32px -16px rgba(0,0,0,.6);
}
html[data-theme="dark"] .logo-multiply { mix-blend-mode: multiply; }

/* ---------- SAME DESIGN ON EVERY PAGE ---------- */

/* Inputs on the study planner and the 2027 plan match the .field style */
body .search, body .planner-input, body select, body textarea.field {
  background: var(--lg-field) !important;
  color: var(--lg-text);
  border: 1px solid var(--lg-field-line) !important;
  box-shadow: inset 0 2px 6px rgba(63, 72, 160, .10), inset 0 -1px 0 rgba(255, 255, 255, .6);
}
body .search:focus, body .planner-input:focus {
  background: rgba(255, 255, 255, .88) !important; border-color: #818cf8 !important;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, .16);
}
html[data-theme="dark"] body .search:focus, html[data-theme="dark"] body .planner-input:focus { background: rgba(255,255,255,.14) !important; }

/* Secondary buttons on the planner and plan pages */
body .btn-secondary, body .pill[class*="bg-white"] {
  background: linear-gradient(180deg, var(--lg-pill-a), var(--lg-pill-b)) !important;
  border: 1px solid var(--lg-rim-soft) !important;
  box-shadow: inset 0 1.5px 0 var(--lg-rim), 0 8px 20px -8px var(--lg-shadow);
}
body .btn-main, body .planner-btn.btn-primary, body .step-dot.active {
  background: linear-gradient(180deg, rgba(129, 120, 255, .96), rgba(79, 70, 229, .92)) !important;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .75), inset 0 -2px 6px rgba(40, 30, 160, .35), 0 14px 28px -8px rgba(79, 70, 229, .55) !important;
}

/* Full-width top bars (simulators) */
body .glass-nav {
  background: linear-gradient(180deg, var(--lg-fill-a), var(--lg-fill-b)) !important;
  -webkit-backdrop-filter: blur(3px) saturate(125%); backdrop-filter: blur(3px) saturate(125%);
  border-bottom: 1px solid var(--lg-rim-soft) !important;
  box-shadow: inset 0 1px 0 var(--lg-rim), 0 10px 30px -12px var(--lg-shadow);
}

/* Tables (admin, ranking): readable on glass, never wider than the screen */
body .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
body tbody tr:hover { background: color-mix(in srgb, var(--lg-rim) 30%, transparent) !important; }
html[data-theme="dark"] body td { color: #e2e8f0; }
html[data-theme="dark"] body th { color: #94a3b8; border-bottom-color: rgba(255,255,255,.12); }
html[data-theme="dark"] body td { border-bottom-color: rgba(255,255,255,.08); }

/* ---------- PHONE + DESKTOP ---------- */
html { -webkit-text-size-adjust: 100%; }
img, video, canvas, svg { max-width: 100%; }
.lg-toggle { right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }

@media (max-width: 700px) {
  /* The nav dock becomes a swipeable single row instead of wrapping into 3 lines */
  .lg-dock { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; width: 100% !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .lg-dock::-webkit-scrollbar { display: none; }
  .lg-link { flex: 0 0 auto; white-space: nowrap; padding: 9px 14px; }
  .lg-cta { padding: 12px 20px; font-size: 13px; }
  .lg-badge { width: 52px; height: 52px; font-size: 19px; }
  .lg-badge.tr { top: -20px; right: -6px; }
  .lg-badge.br, .lg-badge.tl { width: 44px; height: 44px; font-size: 16px; }
  .lg-badge.tl { left: -6px; }
  .lg-logo-tile { width: 128px; height: 128px; }
}

/* Printing (QR sheets, reports): no backdrop, no glass */
@media print {
  .lg-bg, .lg-toggle { display: none !important; }
  html { background: #fff !important; }
  body :is(.glass-card, .glass, .admin-card, .auth-card) { background: #fff !important; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none !important; }
}


/* Cross-page theme persistence helpers and responsive toggle */
html[data-theme="dark"] body { color: var(--lg-text); }
html[data-theme="dark"] body .core-header,
html[data-theme="dark"] body .ai-msg,
html[data-theme="dark"] body .core-pack,
html[data-theme="dark"] body .msg.ai-msg,
html[data-theme="dark"] body #chat-input-wrap,
html[data-theme="dark"] body .chat-input-wrap {
  background: rgba(19, 22, 54, .62) !important;
  color: #f1f5f9 !important;
  border-color: rgba(165, 180, 252, .24) !important;
  box-shadow: 0 16px 36px rgba(0,0,0,.16) !important;
}
html[data-theme="dark"] body .core-title,
html[data-theme="dark"] body .ai-msg,
html[data-theme="dark"] body .core-subtitle,
html[data-theme="dark"] body .core-disclaimer,
html[data-theme="dark"] body .citation-box,
html[data-theme="dark"] body .citation-box strong { color: #e2e8f0 !important; }
html[data-theme="dark"] body .msg.ai-msg { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.lg-toggle { left: calc(16px + env(safe-area-inset-left, 0px)) !important; top: calc(16px + env(safe-area-inset-top, 0px)) !important; right: auto !important; bottom: auto !important; }
@media (max-width: 600px) { .lg-toggle { width: 44px; height: 44px; } }


/* Performance pass: preserve colourful moving liquid gradients without SVG goo filters. */
.lg-goo { filter: none !important; }
.lg-goo .lg-drop {
  filter:
    drop-shadow(0 0 3px rgba(255,255,255,.95))
    drop-shadow(0 0 8px rgba(255,255,255,.85))
    drop-shadow(0 0 16px rgba(160,205,255,.65)) !important;
}
body :is(.glass-card, .glass, .admin-card, .auth-card) [class*="bg-white/"][class*="rounded-"] { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
@media (hover: none), (pointer: coarse) {
  body :is(.glass-card, .glass, .admin-card, .auth-card):hover { transform: none !important; }
  body :is(.glass-card, .glass, .admin-card, .auth-card) { -webkit-backdrop-filter: blur(2px) !important; backdrop-filter: blur(2px) !important; }
}

/* Automatic device theme: remove any legacy manual theme controls. */
.lg-toggle, [data-theme-toggle], #themeToggle, #theme-toggle { display: none !important; }

/* ==========================================================
   DB PHYSICS — READABILITY & GLASS CONSISTENCY PATCH
   Added 2026-10-26. Keep page layouts and application logic.
   ========================================================== */

/* Keep text readable over bright liquid colours in both themes. */
body {
  color: #172033;
}

body :is(
  p, label, small, li, dt, dd,
  .text-slate-900, .text-slate-800, .text-slate-700,
  .text-slate-600, .text-slate-500,
  .core-subtitle, .core-disclaimer
) {
  color: #334155;
}

/* Headings should remain dark and readable on light surfaces. */
body :is(h1, h2, h3, h4, .core-title) {
  color: #111827;
}

/* Glass surfaces: translucent, but not so transparent that text disappears. */
body :is(.glass-card, .glass, .admin-card, .auth-card) {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, .88),
    rgba(245, 247, 255, .76)
  ) !important;
  border: 1px solid rgba(255, 255, 255, .82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 16px 40px rgba(25, 30, 80, .16);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

/* Notification/dialog surfaces must not have pale text on white. */
body :is(
  [role="dialog"], .modal, .modal-content,
  .notification-modal, .notification-card
) {
  color: #1e293b;
}

body :is(
  [role="dialog"], .modal, .modal-content,
  .notification-modal, .notification-card
) :is(h1, h2, h3, h4, p, span, small, label) {
  color: #334155;
}

/* Fields retain legible text and placeholders. */
body :is(input, select, textarea) {
  color: #172033;
}

body :is(input, select, textarea)::placeholder {
  color: #64748b;
  opacity: 1;
}

/* Dark theme overrides. */
html[data-theme="dark"] body {
  color: #e2e8f0;
}

html[data-theme="dark"] body :is(
  p, label, small, li, dt, dd,
  h1, h2, h3, h4,
  .text-slate-900, .text-slate-800, .text-slate-700,
  .text-slate-600, .text-slate-500,
  .core-title, .core-subtitle, .core-disclaimer
) {
  color: #e2e8f0;
}

html[data-theme="dark"] body :is(
  .glass-card, .glass, .admin-card, .auth-card,
  [role="dialog"], .modal, .modal-content,
  .notification-modal, .notification-card
) {
  background: linear-gradient(
    135deg,
    rgba(22, 27, 58, .90),
    rgba(35, 41, 79, .78)
  ) !important;
  border-color: rgba(199, 210, 254, .24) !important;
  color: #f1f5f9 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 18px 44px rgba(0, 0, 0, .22);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

html[data-theme="dark"] body :is(
  [role="dialog"], .modal, .modal-content,
  .notification-modal, .notification-card
) :is(h1, h2, h3, h4, p, span, small, label) {
  color: #e2e8f0;
}

html[data-theme="dark"] body :is(input, select, textarea) {
  color: #f1f5f9;
  background-color: rgba(15, 23, 42, .72);
}

html[data-theme="dark"] body :is(input, select, textarea)::placeholder {
  color: #cbd5e1;
}

/* Preserve the shared glass appearance on smaller screens too. */
@media (max-width: 700px) {
  body :is(.glass-card, .glass, .admin-card, .auth-card) {
    background: rgba(255, 255, 255, .84) !important;
    -webkit-backdrop-filter: blur(14px) saturate(135%);
    backdrop-filter: blur(14px) saturate(135%);
    box-shadow: 0 12px 30px rgba(25, 30, 80, .14);
  }

  html[data-theme="dark"] body :is(
    .glass-card, .glass, .admin-card, .auth-card
  ) {
    background: rgba(22, 27, 58, .88) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
  }
}


/* DB Physics readability + notification glass fix */
.auth-card,
.auth-tabs,
.auth-tab,
.otp-sent,
.otp-icon,
.otp-stage,
.auth-footer,
.back-link {
  color: var(--dbp-text, #172033);
}

.auth-card .field,
.auth-card input.field,
.auth-card .otp-input,
.auth-card input:not([type="checkbox"]):not([type="radio"]) {
  color: #172033 !important;
  -webkit-text-fill-color: #172033;
  caret-color: #4f46e5;
  background: rgba(255,255,255,.88) !important;
  border-color: rgba(100,116,139,.48) !important;
}

.auth-card input::placeholder,
.auth-card .field::placeholder,
.auth-card .otp-input::placeholder {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b;
  opacity: 1 !important;
}

.auth-card .label,
.auth-card .auth-hero p,
.auth-card .hint,
.auth-card .auth-footer,
.auth-card .otp-actions {
  color: #475569 !important;
}

.auth-card .otp-sent {
  color: #14532d !important;
  background: rgba(240,253,244,.94) !important;
}

html[data-theme="dark"] .auth-card {
  color: #f1f5f9 !important;
}

html[data-theme="dark"] .auth-card .field,
html[data-theme="dark"] .auth-card input.field,
html[data-theme="dark"] .auth-card .otp-input,
html[data-theme="dark"] .auth-card input:not([type="checkbox"]):not([type="radio"]) {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc;
  caret-color: #c4b5fd;
  background: rgba(15,23,42,.82) !important;
  border-color: rgba(203,213,225,.48) !important;
}

html[data-theme="dark"] .auth-card input::placeholder,
html[data-theme="dark"] .auth-card .field::placeholder,
html[data-theme="dark"] .auth-card .otp-input::placeholder {
  color: #cbd5e1 !important;
  -webkit-text-fill-color: #cbd5e1;
}

html[data-theme="dark"] .auth-card .label,
html[data-theme="dark"] .auth-card .auth-hero p,
html[data-theme="dark"] .auth-card .hint,
html[data-theme="dark"] .auth-card .auth-footer,
html[data-theme="dark"] .auth-card .otp-actions,
html[data-theme="dark"] .auth-card .back-link {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .auth-card .auth-hero h1,
html[data-theme="dark"] .auth-card .otp-stage h2 {
  color: #f8fafc !important;
}

html[data-theme="dark"] .auth-card .auth-footer {
  border-color: rgba(203,213,225,.18) !important;
}

/* Notifications are dynamically created by auth-ui.js */
.dbp-notif-panel {
  color: #172033 !important;
  background: rgba(248,250,255,.86) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  backdrop-filter: blur(28px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(155%) !important;
  box-shadow: 0 24px 70px rgba(15,23,42,.25) !important;
}

.dbp-notif-panel h3,
.dbp-notif-item b,
.dbp-notif-popup-box h2,
.dbp-notif-popup-box b {
  color: #172033 !important;
}

.dbp-notif-item,
.dbp-notif-popup-box > div > div.rounded-2xl {
  color: #334155 !important;
  background: rgba(255,255,255,.64) !important;
  border-color: rgba(148,163,184,.32) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

.dbp-notif-item p,
.dbp-notif-popup-box p {
  color: #475569 !important;
}

.dbp-notif-item [class*="text-slate-400"],
.dbp-notif-item [class*="text-slate-500"] {
  color: #64748b !important;
}

.dbp-notif-panel .dbp-soft {
  background: rgba(99,102,241,.12) !important;
  color: #3730a3 !important;
}

.dbp-notif-popup {
  background: rgba(2,6,23,.48) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.dbp-notif-popup-box {
  color: #172033 !important;
  background: rgba(248,250,255,.90) !important;
  border: 1px solid rgba(255,255,255,.75) !important;
  backdrop-filter: blur(30px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(155%) !important;
}

html[data-theme="dark"] .dbp-notif-panel,
html[data-theme="dark"] .dbp-notif-popup-box {
  color: #f1f5f9 !important;
  background: rgba(15,23,42,.84) !important;
  border-color: rgba(203,213,225,.20) !important;
}

html[data-theme="dark"] .dbp-notif-panel h3,
html[data-theme="dark"] .dbp-notif-item b,
html[data-theme="dark"] .dbp-notif-popup-box h2,
html[data-theme="dark"] .dbp-notif-popup-box b {
  color: #f8fafc !important;
}

html[data-theme="dark"] .dbp-notif-item,
html[data-theme="dark"] .dbp-notif-popup-box > div > div.rounded-2xl {
  color: #e2e8f0 !important;
  background: rgba(30,41,59,.72) !important;
  border-color: rgba(203,213,225,.18) !important;
}

html[data-theme="dark"] .dbp-notif-item p,
html[data-theme="dark"] .dbp-notif-popup-box p,
html[data-theme="dark"] .dbp-notif-item [class*="text-slate-400"],
html[data-theme="dark"] .dbp-notif-item [class*="text-slate-500"] {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .dbp-notif-panel .dbp-soft {
  background: rgba(129,140,248,.18) !important;
  color: #c7d2fe !important;
}

/* Payment verification: retain scanner layout, unify card surfaces */
.payment-glass-card,
html[data-theme="dark"] body .card {
  border: 1px solid rgba(255,255,255,.34);
  backdrop-filter: blur(26px) saturate(145%);
  -webkit-backdrop-filter: blur(26px) saturate(145%);
}

html[data-theme="dark"] body.bg-slate-50 {
  background: transparent !important;
  color: #e2e8f0 !important;
}

html[data-theme="dark"] body .card {
  background: rgba(19,22,54,.72) !important;
  border-color: rgba(165,180,252,.22) !important;
  color: #f1f5f9 !important;
}

html[data-theme="dark"] body .card h2,
html[data-theme="dark"] body .card p,
html[data-theme="dark"] body .card label {
  color: #e2e8f0 !important;
}

html[data-theme="dark"] body .card .text-slate-500,
html[data-theme="dark"] body .card .text-slate-400 {
  color: #cbd5e1 !important;
}


/* ==========================================================
   DBP FINAL SHARED CARD CONSISTENCY — ORIGINAL GLASS RIM RESTORED
   ========================================================== */

body :is(.glass-card, .glass, .admin-card, .auth-card) {
  border-radius: 24px !important;
  border: 1px solid var(--lg-rim-soft) !important;
  box-shadow:
    inset 0 1.5px 0 var(--lg-rim),
    inset 1.5px 0 0 rgba(255, 255, 255, .55),
    inset 0 -1.5px 0 var(--lg-edge),
    inset 0 0 26px 2px color-mix(in srgb, var(--lg-rim) 28%, transparent),
    0 22px 56px -20px var(--lg-shadow),
    0 2px 8px rgba(63, 72, 160, .06) !important;
  transition: box-shadow .35s ease, transform .3s ease,
              border-color .3s ease, background-color .3s ease;
}

body :is(.glass-card, .glass, .admin-card, .auth-card):hover {
  border-color: var(--lg-rim) !important;
  box-shadow:
    inset 0 1.5px 0 #fff,
    inset 1.5px 0 0 rgba(255, 255, 255, .7),
    inset 0 -1.5px 0 var(--lg-edge),
    inset 0 0 30px 2px color-mix(in srgb, var(--lg-rim) 32%, transparent),
    0 26px 60px -18px var(--lg-shadow),
    0 0 0 1px rgba(255, 255, 255, .16) !important;
}

html[data-theme="dark"] body :is(
  .glass-card, .glass, .admin-card, .auth-card
) {
  border-color: rgba(255, 255, 255, .28) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .55),
    inset 1.5px 0 0 rgba(255, 255, 255, .22),
    inset 0 -1.5px 0 rgba(165, 180, 252, .15),
    inset 0 0 26px 2px rgba(255, 255, 255, .06),
    0 22px 56px -20px rgba(0, 0, 0, .60),
    0 2px 8px rgba(0, 0, 0, .18) !important;
}

@media (max-width: 700px) {
  body :is(.glass-card, .glass, .admin-card, .auth-card) {
    -webkit-backdrop-filter: blur(14px) saturate(135%);
    backdrop-filter: blur(14px) saturate(135%);
  }
}

@media (prefers-reduced-transparency: reduce) {
  body :is(.glass-card, .glass, .admin-card, .auth-card) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}


/* DBP CURSOR SHEEN RESTORE
   Restore pointer-positioned white sheen without replacing card fills. */

body :is(.glass-card, .glass, .admin-card, .auth-card) {
  background:
    radial-gradient(
      420px circle at var(--mx, 12%) var(--my, 0%),
      var(--lg-sheen),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      var(--lg-fill-a) 0%,
      var(--lg-fill-b) 42%,
      var(--lg-fill-c) 100%
    ) !important;
}

/* Navbar: keep its existing material and add a cursor-positioned sheen. */
body .glass-nav {
  position: relative;
  background:
    radial-gradient(
      320px circle at var(--mx, 12%) var(--my, 50%),
      var(--lg-sheen),
      transparent 62%
    ),
    linear-gradient(180deg, var(--lg-fill-a), var(--lg-fill-b)) !important;
}

/* Floating account bar */
.dbp-auth-pill {
  position: fixed;
  overflow: hidden;
  isolation: isolate;
}

.dbp-auth-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    150px circle at var(--mx, 50%) var(--my, 50%),
    var(--lg-sheen),
    transparent 72%
  );
  opacity: .85;
}


/* DBP EXTRA BRIGHT CINEMATIC CARD OUTLINE */
@property --dbp-outline-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes dbp-outline-travel {
  to { --dbp-outline-angle: 360deg; }
}

body :is(.glass-card, .glass, .admin-card, .auth-card, .card) {
  position: relative;
  isolation: isolate;
}

/* Bright travelling white highlight */
body :is(.glass-card, .glass, .admin-card, .auth-card, .card)::after {
  content: "";
  position: absolute;
  inset: -2px;
  padding: 2px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 5;

  background: conic-gradient(
    from var(--dbp-outline-angle),
    transparent 0deg,
    transparent 205deg,
    rgba(255,255,255,.12) 240deg,
    rgba(255,255,255,.75) 270deg,
    #ffffff 292deg,
    #ffffff 310deg,
    rgba(255,255,255,.8) 328deg,
    rgba(255,255,255,.12) 350deg,
    transparent 360deg
  );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;

  filter:
    drop-shadow(0 0 3px rgba(255,255,255,.95))
    drop-shadow(0 0 8px rgba(255,255,255,.85))
    drop-shadow(0 0 16px rgba(160,205,255,.65));

  animation: dbp-outline-travel 3s linear infinite;
}

/* Soft continuous halo around the whole card */
body :is(.glass-card, .glass, .admin-card, .auth-card, .card) {
  box-shadow:
    0 0 8px rgba(255,255,255,.24),
    0 0 20px rgba(255,255,255,.15),
    0 0 36px rgba(120,170,255,.16);
}

html[data-theme="dark"] body :is(.glass-card, .glass, .admin-card, .auth-card, .card) {
  box-shadow:
    0 0 9px rgba(255,255,255,.30),
    0 0 24px rgba(255,255,255,.20),
    0 0 42px rgba(120,170,255,.22);
}

@media (prefers-reduced-motion: reduce) {
  body :is(.glass-card, .glass, .admin-card, .auth-card, .card)::after {
    animation: none;
  }
}


/* DBP ALL RECORDING PAGE CARD GLOW */
@property --dbp-record-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes dbp-record-outline {
  to { --dbp-record-angle: 360deg; }
}

body :is(.record-card, .lesson, .live-class, .hero) {
  position: relative;
  isolation: isolate;
}

body :is(.record-card, .lesson, .live-class, .hero)::after {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 2px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 5;

  background: conic-gradient(
    from var(--dbp-record-angle),
    transparent 0deg,
    transparent 205deg,
    rgba(255,255,255,.18) 240deg,
    rgba(255,255,255,.8) 270deg,
    #fff 295deg,
    #fff 312deg,
    rgba(255,255,255,.8) 330deg,
    transparent 360deg
  );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;

  filter:
    drop-shadow(0 0 4px rgba(255,255,255,.95))
    drop-shadow(0 0 10px rgba(255,255,255,.65));

  animation: dbp-record-outline 3s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  body :is(.record-card, .lesson, .live-class, .hero)::after {
    animation: none;
  }
}


/* DBP ANDROID PERFORMANCE MODE */
@media (max-width: 768px) {
  /* Keep the outline visible, but stop expensive continuous repaints. */
  body :is(
    .glass-card, .glass, .admin-card, .auth-card, .card,
    .record-card, .lesson, .live-class, .hero
  )::after {
    animation: dbp-outline-travel 3s linear infinite !important;
    filter:
      drop-shadow(0 0 3px rgba(255,255,255,.95))
      drop-shadow(0 0 8px rgba(255,255,255,.85))
      drop-shadow(0 0 16px rgba(160,205,255,.65)) !important;
    opacity: 1;
  }

  /* Reduce expensive blur layers on mobile. */
  body :is(
    .glass-card, .glass, .admin-card, .auth-card, .card,
    .record-card, .lesson, .live-class, .hero, .glass-nav
  ) {
    backdrop-filter: blur(8px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(115%) !important;
  }

  /* Avoid large layered glow shadows on mobile cards. */
  body :is(
    .glass-card, .glass, .admin-card, .auth-card, .card,
    .record-card, .lesson, .live-class
  ) {
    box-shadow: 0 4px 14px rgba(25, 30, 80, .14) !important;
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* DBP MOBILE ORB EDGE SMOOTHING */
@media (max-width: 768px) {
  /* Avoid jagged edges when the liquid layer is scaled up. */
  .lg-bg,
  .lg-goo {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* Smooth the circular edges without blurring the whole background. */
  .lg-drop,
  .lg-orb {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }

  .lg-orb {
    outline: 1px solid rgba(255, 255, 255, .45);
    outline-offset: 0;
    background-clip: padding-box;
    box-shadow:
      0 0 5px rgba(255, 255, 255, .85),
      0 0 12px rgba(255, 255, 255, .55),
      0 0 24px rgba(255, 255, 255, .28),
      inset -6px -8px 18px rgba(60, 20, 160, .35),
      inset 4px 6px 12px rgba(255, 255, 255, .45),
      0 18px 30px -10px rgba(90, 70, 220, .5);
  }
}