/* Liquid Glass visual system — layered over existing functionality */
:root {
  --lg-radius: 26px;
  --lg-stroke: rgba(255,255,255,.28);
  --lg-glow: rgba(255,255,255,.11);
  --lg-surface: linear-gradient(137deg,rgba(255,255,255,.19),rgba(210,164,255,.095) 44%,rgba(255,255,255,.045) 75%,rgba(242,156,230,.13));
  --lg-shadow: 0 22px 65px rgba(10,5,32,.30), inset 0 1.5px 0 rgba(255,255,255,.34), inset 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(255,255,255,.065);
}
html,body {min-height:100%; }
body { background: #0e0a22 !important; }
.ambient {
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 53% 52% at 7% 15%,rgba(131,75,237,.63),transparent 76%),
    radial-gradient(ellipse 44% 48% at 95% 20%,rgba(243,77,167,.43),transparent 79%),
    radial-gradient(ellipse 54% 54% at 53% 86%,rgba(48,120,214,.40),transparent 75%),
    radial-gradient(ellipse 45% 50% at 70% 53%,rgba(155,81,207,.20),transparent 75%),
    linear-gradient(142deg,#100a2b 0%,#1c103b 49%,#0b1839 100%) !important;
}
.card,.modal,.gate,.duel-card,
[class*="glass"],[class*="panel"],
.sidebar {
  background: var(--lg-surface) !important;
  border: 1px solid var(--lg-stroke) !important;
  box-shadow: var(--lg-shadow) !important;
  -webkit-backdrop-filter: blur(32px) saturate(170%) !important;
  backdrop-filter: blur(32px) saturate(170%) !important;
  border-radius:var(--lg-radius);
}
.card,.modal,.gate,.duel-card {position:relative;}
.card::before,.duel-card::before {
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(153deg,rgba(255,255,255,.15),transparent 31%,transparent 73%,rgba(255,255,255,.055));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.sidebar {
  border-radius:0 28px 28px 0 !important;
  background:linear-gradient(155deg,rgba(46,30,87,.58),rgba(29,23,67,.40)) !important;
}
.btn,.pill,.theme-toggle,nav button.active {
  -webkit-backdrop-filter:blur(19px) saturate(150%);
  backdrop-filter:blur(19px) saturate(150%);
  box-shadow:inset 0 1px rgba(255,255,255,.24),0 5px 22px rgba(16,8,43,.14);
}
.btn {border-color:rgba(255,255,255,.28);background:linear-gradient(145deg,rgba(255,255,255,.21),rgba(255,255,255,.06));border-radius:15px;transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover {transform:translateY(-2px);box-shadow:inset 0 1px rgba(255,255,255,.32),0 12px 28px rgba(11,6,34,.28)}
input,select,textarea {
  background:rgba(19,12,48,.43) !important;
  border:1px solid rgba(255,255,255,.21) !important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.task-item,.chapter-item,.log-item,.cheer-item {
  background:rgba(255,255,255,.075) !important;
  border:1px solid rgba(255,255,255,.15) !important;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
html[data-theme=light] {
  --lg-stroke:rgba(255,255,255,.78);
  --lg-surface:linear-gradient(135deg,rgba(255,255,255,.61),rgba(255,255,255,.29) 48%,rgba(246,220,255,.36));
  --lg-shadow:0 22px 55px rgba(109,66,163,.15),inset 0 1.5px rgba(255,255,255,.92),inset 1px 0 rgba(255,255,255,.50),inset 0 -1px rgba(255,255,255,.3);
}
html[data-theme=light] body {background:#e9ddfb !important;color:#312147 !important}
html[data-theme=light] .ambient {
  background:
    radial-gradient(ellipse 48% 52% at 10% 13%,rgba(157,124,255,.48),transparent 78%),
    radial-gradient(ellipse 48% 53% at 96% 24%,rgba(255,142,202,.47),transparent 77%),
    radial-gradient(ellipse 50% 53% at 54% 86%,rgba(106,183,255,.38),transparent 76%),
    linear-gradient(140deg,#f7efff 0%,#e8dcff 50%,#e7f3ff 100%) !important;
}
html[data-theme=light] .card,
html[data-theme=light] .modal,
html[data-theme=light] .gate,
html[data-theme=light] .duel-card,
html[data-theme=light] [class*="panel"],
html[data-theme=light] [class*="glass"],
html[data-theme=light] .sidebar {
  background:var(--lg-surface) !important;
  border:1px solid var(--lg-stroke) !important;
  box-shadow:var(--lg-shadow) !important;
  color:#34254a !important;
  -webkit-backdrop-filter:blur(32px) saturate(170%) !important;
  backdrop-filter:blur(32px) saturate(170%) !important;
}
html[data-theme=light] .sidebar {
  background:linear-gradient(145deg,rgba(255,255,255,.64),rgba(244,226,255,.38)) !important;
}
html[data-theme=light] input,
html[data-theme=light] select,
html[data-theme=light] textarea {
  background:rgba(255,255,255,.43) !important;
  border:1px solid rgba(255,255,255,.8) !important;
  color:#34254a !important;
}
html[data-theme=light] .task-item,
html[data-theme=light] .chapter-item,
html[data-theme=light] .log-item,
html[data-theme=light] .cheer-item {
  background:rgba(255,255,255,.30) !important;
  border-color:rgba(255,255,255,.6) !important;
}
html[data-theme=light] .btn:not(.primary) {
  background:linear-gradient(145deg,rgba(255,255,255,.65),rgba(247,228,255,.29)) !important;
  color:#533776 !important;border-color:rgba(255,255,255,.8) !important;
}
@media(max-width:800px) {
  .sidebar {border-radius:0 0 25px 25px !important}
  .card,.modal,.gate,.duel-card {border-radius:22px}
}
@media(prefers-reduced-motion:reduce){.btn{transition:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .card,.modal,.gate,.duel-card {background:#35224d !important}
  html[data-theme=light] .card,html[data-theme=light] .modal {background:#f5eaff !important}
}