/* ═══════════════════════════════════════════════════════════════════
   dashboard-v4-liquid.css — LIQUID GLASS
   Living glass over an aurora: deep violet space, frosted panels with
   a wet top highlight, vivid gradient pills (violet→cyan), warm gold
   accents. Round, deep, glowing. Same DOM, zero JS changes.
   Replaces dashboard-v3-deck.css.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --lq-bg-deep:    #0A0818;
  --lq-violet:     #8B5CF6;
  --lq-cyan:       #06B6D4;
  --lq-gold:       #FFD37A;
  --lq-coral:      #FF8A65;
  --lq-text-hi:    #FFFFFF;
  --lq-text-md:    rgba(255, 255, 255, 0.78);
  --lq-text-lo:    rgba(255, 255, 255, 0.55);
  --lq-glass-hi:   rgba(255, 255, 255, 0.14);
  --lq-glass-lo:   rgba(255, 255, 255, 0.04);
  --lq-edge:       rgba(255, 255, 255, 0.22);
  --lq-edge-hot:   rgba(255, 255, 255, 0.45);
  --lq-grad-pill:  linear-gradient(135deg, #8B5CF6, #06B6D4);
  --lq-grad-warm:  linear-gradient(90deg, #FFD37A, #FF8A65);
}

/* ── 1. AURORA SCENE — violet depth behind the panda ───────────────── */
.dash-bg-scene::before {
  background:
    radial-gradient(60% 50% at 72% 14%, rgba(139, 92, 246, 0.28), transparent 70%),
    radial-gradient(50% 45% at 12% 80%, rgba(6, 182, 212, 0.16), transparent 70%),
    radial-gradient(40% 35% at 50% 110%, rgba(255, 138, 101, 0.10), transparent 70%),
    linear-gradient(180deg, rgba(10, 8, 24, 0.30), rgba(10, 8, 24, 0.55) 70%, rgba(10, 8, 24, 0.75));
}

/* ── 2. GLASS PANELS — wet, round, lit from above ──────────────────── */
.dash-hero,
.quest-card,
.dash-skill-tree,
.dash-sidebar .lesson-library {
  border-radius: 28px;
  border: 1px solid var(--lq-edge);
  background: linear-gradient(135deg, var(--lq-glass-hi), var(--lq-glass-lo));
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
/* hover: glass lifts and the edge catches light */
.quest-card:hover {
  transform: translateY(-4px);
  border-color: var(--lq-edge-hot);
  box-shadow:
    0 28px 64px rgba(0, 0, 0, 0.55),
    0 0 40px -12px rgba(139, 92, 246, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.40);
}
.dash-skill-tree:focus-within, .quest-card:focus-within {
  border-color: var(--lq-edge-hot);
}

/* ── 3. Composition ────────────────────────────────────────────────── */
.dash-main > .dash-quest-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--b-space-5, 1.25rem);
  align-items: stretch;
}
@media (max-width: 960px) {
  .dash-main > .dash-quest-row { grid-template-columns: 1fr; }
}
.quest-card {
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column; gap: 0.95rem;
  padding: 1.7rem 1.7rem 1.6rem;
  min-height: 200px;
}
/* soft inner aurora bloom per card — daily warm, weekly cool */
.quest-card::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 85% -10%, rgba(255, 211, 122, 0.14), transparent 70%);
  pointer-events: none;
}
.quest-card.weekly::after {
  background: radial-gradient(80% 60% at 85% -10%, rgba(139, 92, 246, 0.20), transparent 70%);
}

/* ── 4. Eyebrows — gradient ink, floating ✦ ────────────────────────── */
.quest-eyebrow, .skt-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5ch;
  align-self: flex-start;
  font-size: 0.78rem; font-weight: 800;
  background: var(--lq-grad-warm);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  border: none; box-shadow: none; border-radius: 0; padding: 0;
}
.quest-card.weekly .quest-eyebrow {
  background: linear-gradient(90deg, #C4B5FD, #67E8F9);
  -webkit-background-clip: text; background-clip: text;
}
.quest-eyebrow::before, .skt-eyebrow::before { content: "✦ "; }
/* the LED becomes a soft breathing orb */
.quest-eyebrow-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--lq-gold);
  box-shadow: 0 0 10px rgba(255, 211, 122, 0.8);
  animation: lqPulse 2.6s ease-in-out infinite;
}
.quest-card.weekly .quest-eyebrow-dot {
  background: #A78BFA;
  box-shadow: 0 0 10px rgba(167, 139, 250, 0.8);
}
@keyframes lqPulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.55; }
}

.quest-title {
  position: relative; z-index: 1;
  font-size: 1.3rem; font-weight: 800;
  line-height: 1.35; text-wrap: balance;
  color: var(--lq-text-hi);
}

/* ── 5. Meta — quiet white, glowing reward chip ────────────────────── */
.quest-meta {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.35rem 0;
  font-size: 0.85rem;
  color: var(--lq-text-lo);
}
.quest-meta > span { background: none; border: none; box-shadow: none; padding: 0; white-space: nowrap; }
.quest-meta > span:not(:last-child)::after {
  content: "·";
  margin-inline: 0.6em;
  color: rgba(255, 255, 255, 0.3);
}
.quest-meta > .quest-reward {
  padding: 0.28rem 0.75rem;
  border: 1px solid rgba(255, 211, 122, 0.4);
  border-radius: 99px;
  color: var(--lq-gold);
  font-weight: 800;
  background: rgba(255, 211, 122, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.quest-card.weekly .quest-meta > .quest-reward {
  border-color: rgba(167, 139, 250, 0.45);
  color: #DDD2FF;
  background: rgba(139, 92, 246, 0.14);
}
.quest-meta > .quest-reward::after { content: none !important; }

/* ── 6. Progress — liquid tube with glow head ──────────────────────── */
.quest-progress {
  position: relative; z-index: 1;
  height: 12px; border-radius: 99px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.quest-progress-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--lq-grad-warm);
  box-shadow: 0 0 14px rgba(255, 184, 32, 0.55);
  -webkit-mask: none; mask: none;
  transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
/* moving liquid sheen inside the fill */
.quest-progress-fill::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.45) 50%, transparent 65%);
  animation: lqFlow 2.8s ease-in-out infinite;
}
@keyframes lqFlow {
  from { transform: translateX(120%); }
  to   { transform: translateX(-120%); }
}
.quest-card.weekly .quest-progress-fill {
  background: linear-gradient(90deg, #8B5CF6, #06B6D4);
  box-shadow: 0 0 14px rgba(139, 92, 246, 0.55);
}

/* ── 7. CTAs — vivid gradient pills, both cards ────────────────────── */
.quest-cta,
.quest-card.weekly .quest-cta {
  position: relative; z-index: 1;
  align-self: stretch; width: auto;
  justify-content: center;
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 0.55rem;
  min-height: 52px;
  padding: 0.85rem 1.5rem;
  border-radius: 99px;
  font-weight: 800; font-size: 1rem;
  text-decoration: none; cursor: pointer;
  overflow: hidden;
  border: none;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, filter 0.3s ease;
}
.quest-card.daily .quest-cta {
  color: #1A1206;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.35), transparent 50%),
    linear-gradient(135deg, #FFD37A, #FFB020);
  box-shadow: 0 10px 30px rgba(255, 176, 32, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  clip-path: none;
}
.quest-card.weekly .quest-cta {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.25), transparent 50%),
    var(--lq-grad-pill);
  box-shadow: 0 10px 30px rgba(139, 92, 246, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.quest-cta:hover { transform: translateY(-2px) scale(1.015); filter: brightness(1.08); }
.quest-cta:active { transform: translateY(0) scale(0.99); }
/* light sweep — RTL aware */
.quest-cta::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
html[dir="rtl"] .quest-cta::before { transform: translateX(130%); }
.quest-cta:hover::before { transform: translateX(130%); }
html[dir="rtl"] .quest-cta:hover::before { transform: translateX(-130%); }
.quest-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ── 8. HERO — glowing identity ────────────────────────────────────── */
.dash-hero { overflow: hidden; }
#heroLessonBtn {
  border-radius: 99px !important;
  clip-path: none !important;
  border: none;
  min-height: 52px;
  padding: 0.85rem 1.7rem;
  font-weight: 800;
  color: #1A1206;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.35), transparent 50%),
    linear-gradient(135deg, #FFD37A, #FFB020) !important;
  box-shadow: 0 10px 30px rgba(255, 176, 32, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  animation: none;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}
#heroLessonBtn:hover { transform: translateY(-2px) scale(1.015); filter: brightness(1.08); }
.dash-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(70% 55% at 15% -10%, rgba(139, 92, 246, 0.22), transparent 65%);
  pointer-events: none;
}
.dash-hero-orb { display: revert; }
.dash-hero-time {
  font-size: 0.8rem; font-weight: 700;
  background: var(--lq-grad-warm);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.dash-hero-time::before { content: "✦ "; }
.dash-hero-name {
  background: linear-gradient(120deg, #FFFFFF 30%, #C4B5FD 70%, #67E8F9) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent;
  font-weight: 800;
  position: relative;
}
/* big juicy stats — gradient ink */
.dash-hero-stat-val {
  font-size: clamp(2rem, 3.6vw, 3rem) !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  background: var(--lq-grad-warm) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  line-height: 1.05;
}
.dash-hero-stat-lbl { font-size: 0.74rem; color: var(--lq-text-lo); }
.dash-hero-stat-sep {
  width: 1px; height: 2.4rem;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: none;
}
/* rounded heatmap cells + glassy streak pill */
.heatmap-cell, .heatmap .hm-cell, .heatmap [class*="cell"] { border-radius: 4px !important; }
.streak-fire {
  border-radius: 18px;
  border: 1px solid rgba(255, 211, 122, 0.35);
  background: linear-gradient(135deg, rgba(255, 211, 122, 0.12), rgba(255, 138, 101, 0.06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.streak-fire-num {
  font-variant-numeric: tabular-nums;
  background: var(--lq-grad-warm);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

/* ── 9. SKILL TREE — floating glass garden ─────────────────────────── */
.dash-skill-tree { padding-top: 1.6rem; position: relative; overflow: hidden; }
.dash-skill-tree::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 45% at 90% -5%, rgba(6, 182, 212, 0.14), transparent 65%);
  pointer-events: none;
}
.dash-skill-tree h2, .skt-title {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--lq-text-hi) !important;
}
.skt-summary strong {
  font-variant-numeric: tabular-nums;
  background: var(--lq-grad-warm) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 800;
}
.skt-branch {
  position: relative; z-index: 1;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.skt-branch:hover { border-color: rgba(255, 255, 255, 0.28); transform: translateY(-2px); }
.skt-branch-icon { border-radius: 14px; box-shadow: 0 6px 16px rgba(0,0,0,0.35); }
.skt-branch-count {
  font-variant-numeric: tabular-nums;
  unicode-bidi: plaintext;
  color: var(--lq-gold);
  font-weight: 800;
}
.skt-branch-bar { border-radius: 99px; }
.skt-branch-bar-fill {
  border-radius: 99px;
  -webkit-mask: none; mask: none;
  background: var(--lq-grad-pill);
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
}
/* current lesson: breathing halo ring */
.skt-current .skt-node-face { position: relative; }
.skt-current .skt-node-face::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(139, 92, 246, 0.8);
  box-shadow: 0 0 18px rgba(139, 92, 246, 0.6), inset 0 0 10px rgba(139, 92, 246, 0.3);
  animation: lqHalo 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes lqHalo {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.12); opacity: 0.55; }
}
.skt-node-pulse { display: none; }
.skt-tooltip {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(16, 12, 34, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ── 10. LIBRARY — frosted index ───────────────────────────────────── */
.dash-sidebar .lesson-library { padding-top: 1.4rem; }
.dash-sidebar .lib-header .lib-title { display: none; }
.lib-count, .lib-stats, #libStats { font-variant-numeric: tabular-nums; }
.lib-search, #libSearch {
  border-radius: 99px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  caret-color: var(--lq-gold);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.lib-search:focus, #libSearch:focus {
  border-color: rgba(139, 92, 246, 0.7) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25), inset 0 1px 0 rgba(255,255,255,0.1) !important;
  outline: none;
}
.lib-filter-pill { border-radius: 99px !important; }
.lib-filter-pill.active, .lib-filter-pill[aria-pressed="true"] {
  background: var(--lq-grad-pill) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.45) !important;
}

/* ── 10b. POLISH PASS ──────────────────────────────────────────────── */
/* hero divider: aurora hairline instead of flat line */
.dash-hero-divider {
  height: 1px; border: none;
  background: linear-gradient(90deg, transparent, rgba(139,92,246,0.5), rgba(6,182,212,0.4), transparent);
}
/* hero greeting rhythm */
.dash-hero-time { font-size: 0.85rem; letter-spacing: 0.02em; }
.dash-hero-name { letter-spacing: -0.01em; }

/* library: group headers as soft glass rows */
.lib-group__header, .lib-group summary {
  border-radius: 16px;
  transition: background 0.2s ease;
}
.lib-group__header:hover, .lib-group summary:hover {
  background: rgba(255, 255, 255, 0.06);
}
.lib-count {
  padding: 0.15rem 0.6rem;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.75rem; font-weight: 700;
  color: var(--lq-text-md);
}
/* lesson rows: pill hover with violet edge slide */
.lib-lesson {
  border-radius: 14px;
  border: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.lib-lesson:hover {
  background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(6,182,212,0.06));
  border-color: rgba(139, 92, 246, 0.3);
  transform: translateX(-3px);
}
html[dir="rtl"] .lib-lesson:hover { transform: translateX(3px); }
.lib-lesson__id {
  font-variant-numeric: tabular-nums;
  color: var(--lq-text-lo);
  font-size: 0.72rem;
}
/* completed check: mint glow */
.lib-lesson .lib-done, .lib-lesson [data-done], .lib-lesson__check {
  color: #6EE7B7;
  text-shadow: 0 0 8px rgba(110, 231, 183, 0.6);
}

/* filter pills: glass idle state */
.lib-filter-pill {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: var(--lq-text-md) !important;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.lib-filter-pill:hover { border-color: rgba(255, 255, 255, 0.3) !important; transform: translateY(-1px); }
.lib-filter-pill.active, .lib-filter-pill[aria-pressed="true"] {
  background: var(--lq-grad-pill) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
}

/* streak pill breathes warm */
.streak-fire { animation: lqStreakGlow 4s ease-in-out infinite; }
@keyframes lqStreakGlow {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 0 rgba(255,176,32,0); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 24px -6px rgba(255,176,32,0.5); }
}

/* CTA arrow nudge on hover */
.quest-cta span:last-child, #heroLessonBtn span:last-child { transition: transform 0.25s ease; }
.quest-cta:hover span:last-child, #heroLessonBtn:hover span:last-child { transform: translateX(-4px); }

/* heatmap cells: violet-tinted empty state reads with the aurora */
.heatmap [class*="cell"]:not([style*="232,160,32"]) { border-radius: 4px; }

/* skill-tree node coins: glass ring under every node */
.skt-node-face {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* eyebrow size up a touch — the section voice */
.quest-eyebrow, .skt-eyebrow { font-size: 0.82rem; letter-spacing: 0.01em; }

/* custom scrollbar inside library */
.lib-groups::-webkit-scrollbar { width: 6px; }
.lib-groups::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(139,92,246,0.5), rgba(6,182,212,0.4));
  border-radius: 99px;
}
.lib-groups::-webkit-scrollbar-track { background: transparent; }

/* selection color site-feel */
.dashboard-main ::selection { background: rgba(139, 92, 246, 0.45); color: #fff; }

/* ── 11. Motion guards + mobile ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .quest-eyebrow-dot { animation: none; }
  .skt-current .skt-node-face::after { animation: none; opacity: 0.6; }
  .quest-progress-fill::after { animation: none; }
  .streak-fire { animation: none; }
  .lib-lesson:hover, html[dir="rtl"] .lib-lesson:hover { transform: none; }
  .quest-cta::before { display: none; }
  .quest-card:hover { transform: none; }
}
@media (max-width: 768px) {
  .dash-hero, .quest-card, .dash-skill-tree, .dash-sidebar .lesson-library { border-radius: 22px; }
  .quest-card { min-height: 0; padding: 1.3rem 1.25rem 1.35rem; }
  .quest-title { font-size: 1.12rem; }
  .dash-hero-stat-val { font-size: clamp(1.8rem, 7.5vw, 2.4rem) !important; }
}