/* ═══════════════════════════════════════════════════════════════
   LinguoLeap — Liquid Glass Theme  (production build)
   Loaded after style.css. All original class names preserved.
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;0,9..144,800;1,9..144,400&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600&display=swap');

/* ── Core palette override ────────────────────────────────── */
:root {
  --green:   #38d9f5;   --green-d: #1ab8d4;
  --blue:    #38d9f5;   --purple:  #a78bfa;
  --red:     #fb7185;   --gold:    #fbbf24;   --accent:  #a78bfa;
  --bg:    #030810;
  --bg2:   rgba(4,10,22,0.72);
  --bg3:   rgba(255,255,255,0.05);
  --card:  rgba(255,255,255,0.052);
  --border:  rgba(255,255,255,0.09);
  --border2: rgba(255,255,255,0.15);
  --text:  #e8f0ff;  --text2: rgba(200,215,255,0.62);  --text3: rgba(160,180,240,0.38);
  --radius: 16px;
  --shadow: 0 8px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.05);
  --trans: .2s cubic-bezier(0.25,0.46,0.45,0.94);
  --gblur: blur(40px) saturate(180%);
  --gblur-sm: blur(18px) saturate(150%);
}
html[data-theme="light"] {
  --bg: #eaedff; --bg2: rgba(240,243,255,0.88); --bg3: rgba(0,0,0,0.04);
  --card: rgba(255,255,255,0.70); --border: rgba(0,0,0,0.09); --border2: rgba(0,0,0,0.15);
  --text: #0e1535; --text2: #4a5480; --text3: #8892b8;
}
html[data-theme="aurora"] {
  --bg: #040d1a; --bg2: rgba(5,14,28,0.75); --bg3: rgba(255,255,255,0.04);
  --card: rgba(255,255,255,0.045); --border: rgba(56,197,245,0.12); --border2: rgba(56,197,245,0.22);
  --green: #38d9f5; --green-d: #1ab8d4; --blue: #38d9f5;
}

/* ── Fonts ────────────────────────────────────────────────── */
body { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Noto Color Emoji", sans-serif !important; }

/* ── Ambient background orbs ──────────────────────────────── */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 50% at 12% 12%,  rgba(99,102,241,0.28) 0%, transparent 68%),
    radial-gradient(ellipse 48% 44% at 88% 62%,  rgba(56,217,245,0.20) 0%, transparent 68%),
    radial-gradient(ellipse 65% 58% at 50% 102%, rgba(167,139,250,0.16) 0%, transparent 68%),
    radial-gradient(ellipse 38% 33% at 78% 12%,  rgba(52,211,153,0.13) 0%, transparent 68%),
    radial-gradient(ellipse 32% 28% at 18% 82%,  rgba(251,113,133,0.10) 0%, transparent 68%);
  animation: glOrb 22s ease-in-out infinite alternate;
}
@keyframes glOrb {
  0%   { transform: scale(1) translate(0,0); }
  50%  { transform: scale(1.04) translate(20px,-14px); }
  100% { transform: scale(0.97) translate(-10px,20px); }
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#app { z-index: 1 !important; }
#bg-stars { opacity: 0.28; z-index: 0; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

/* ═══════════════════════════════════════════════════════════
   1. INSTALL GATE
═══════════════════════════════════════════════════════════ */
#install-gate-overlay {
  background:
    radial-gradient(ellipse 60% 50% at 15% 15%, rgba(99,102,241,0.35), transparent 60%),
    radial-gradient(ellipse 50% 45% at 85% 70%, rgba(56,217,245,0.25), transparent 60%),
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(167,139,250,0.20), transparent 65%),
    #030810 !important;
}
.ig-icon {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(56,217,245,0.3) !important;
  box-shadow: 0 0 28px rgba(56,217,245,0.22), 0 0 56px rgba(99,102,241,0.14) !important;
  backdrop-filter: blur(20px) !important; border-radius: 22px !important;
}
.ig-name {
  font-family: 'Fraunces', serif !important;
  font-size: 30px !important; font-weight: 800 !important; letter-spacing: -0.5px !important;
  text-transform: none !important;
  background: linear-gradient(135deg, #38d9f5, #a78bfa) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.ig-tagline { font-family: 'DM Sans', sans-serif !important; color: rgba(200,215,255,0.35) !important; letter-spacing: 0.2em !important; }
.ig-btn {
  background: linear-gradient(135deg, #38d9f5, #a78bfa) !important; color: #030810 !important;
  font-family: 'DM Sans', sans-serif !important; font-weight: 700 !important;
  border-radius: 16px !important; border: none !important;
  box-shadow: 0 4px 20px rgba(56,217,245,0.28), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}
.ig-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 30px rgba(56,217,245,0.4) !important; }
.ig-ghost {
  font-family: 'DM Sans', sans-serif !important; color: rgba(200,215,255,0.35) !important;
  border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 12px !important;
  padding: 8px 20px !important;
}
.ig-ghost:hover { color: rgba(200,215,255,0.65) !important; border-color: rgba(255,255,255,0.14) !important; }
#ig-sub { font-family: 'DM Sans', sans-serif !important; color: rgba(200,215,255,0.4) !important; }

/* ═══════════════════════════════════════════════════════════
   2. WELCOME SCREEN — full-screen globe
═══════════════════════════════════════════════════════════ */
#screen-welcome { background: transparent !important; cursor: grab; }
#screen-welcome:active { cursor: grabbing; }
#screen-welcome button, #screen-welcome .leg-dot, #screen-welcome .gv-icon-anim { cursor: pointer; }

/* Header with icon slides */
.gv-head { position: relative; z-index: 2; }
.gv-icon-anim {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(56,217,245,0.2) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 0 24px rgba(56,217,245,0.14), 0 0 48px rgba(99,102,241,0.09) !important;
}
.gv-title {
  font-family: 'Fraunces', serif !important;
  font-size: 22px !important; font-weight: 700 !important; letter-spacing: -0.5px !important;
  background: linear-gradient(135deg, #fff 0%, rgba(200,220,255,0.8) 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.gv-hint { color: var(--text3) !important; }

/* Globe canvas area */
#globe-wrap {
  position: relative; z-index: 1;
}
.g-aura {
  position: fixed !important;
  inset: 0 !important;
  border-radius: 0 !important;
  background: radial-gradient(ellipse 80% 70% at 50% 52%,
    rgba(56,217,245,0.18) 0%,
    rgba(56,217,245,0.10) 22%,
    rgba(99,102,241,0.08) 42%,
    rgba(56,217,245,0.03) 62%,
    transparent 75%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
#globe-canvas {
  filter: drop-shadow(0 0 40px rgba(56,217,245,0.12)) drop-shadow(0 0 80px rgba(99,102,241,0.08));
}
#globe-canvas.planet-glow {
  filter: drop-shadow(0 0 24px rgba(251,191,36,0.4)) drop-shadow(0 0 48px rgba(251,191,36,0.2)) !important;
}

/* Region pill */
#region-pill {
  background: rgba(56,217,245,0.1) !important;
  border: 1px solid rgba(56,217,245,0.25) !important;
  color: #38d9f5 !important;
  backdrop-filter: blur(20px) !important;
  font-family: 'DM Sans', sans-serif !important; font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(56,217,245,0.15) !important;
}

/* Legend dots */
#legend { position: relative; z-index: 2; }

/* Globe loading */
#globe-loading {
  background: rgba(3,8,16,0.88) !important;
  backdrop-filter: var(--gblur) !important;
}

/* ═══════════════════════════════════════════════════════════
   3. GLOBE CARDS SCREEN
═══════════════════════════════════════════════════════════ */
#screen-globe-cards { background: transparent !important; }

.cv-header {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: var(--gblur-sm) !important;
  border-radius: 20px !important;
}
.cv-region-name { font-family: 'Fraunces', serif !important; font-weight: 700 !important; }

.globe-mini-btn {
  background: linear-gradient(135deg, rgba(56,217,245,0.12), rgba(167,139,250,0.1)) !important;
  border: 1px solid rgba(56,217,245,0.3) !important;
  box-shadow: 0 0 20px rgba(56,217,245,0.15) !important;
}
.globe-mini-btn:hover {
  transform: scale(1.1) rotate(-10deg) !important;
  box-shadow: 0 0 28px rgba(56,217,245,0.3) !important;
}

.globe-lang-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  backdrop-filter: var(--gblur) !important;
  -webkit-backdrop-filter: var(--gblur) !important;
  border-radius: 20px !important;
  transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1) !important;
  position: relative; overflow: hidden;
}
.globe-lang-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(160deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.04) 38%, transparent 62%);
  pointer-events: none; z-index: 1;
}
.globe-lang-card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%;
  border-radius: 20px 20px 60% 60% / 20px 20px 40% 40%;
  background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, transparent 100%);
  pointer-events: none; z-index: 1;
}
.globe-lang-card:hover {
  transform: translateY(-5px) scale(1.02) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.45), 0 0 30px rgba(56,217,245,0.08) !important;
  border-color: rgba(56,217,245,0.25) !important;
}
.globe-lang-card:hover::after {
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 100%);
}
.globe-lang-card .card-xp {
  background: rgba(251,191,36,0.12) !important;
  border-color: rgba(251,191,36,0.28) !important;
  color: #fbbf24 !important;
}
.globe-lang-card .globe-fav-btn.on { color: #fbbf24 !important; }

/* ═══════════════════════════════════════════════════════════
   4. HEADERS / TOOLBARS
═══════════════════════════════════════════════════════════ */
.app-header, .screen-header, .lesson-topbar,
.vocab-toolbar, .sett-tabs, .vocab-tabs,
.chat-input-row {
  background: rgba(6,10,24,0.52) !important;
  backdrop-filter: blur(60px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(60px) saturate(200%) !important;
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 2px 12px rgba(0,0,0,0.25) !important;
}
/* pill shape for app-header and screen-header */
.app-header {
  margin: 8px 12px 0 !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  top: 8px !important;
}
.screen-header {
  margin: 8px 12px 0 !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  top: 8px !important;
}
.lesson-topbar {
  margin: 8px 12px 0 !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  top: 8px !important;
}
.sett-sidenav {
  background: rgba(6,10,24,0.52) !important;
  backdrop-filter: blur(60px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(60px) saturate(200%) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

/* Home avatar button — mobile only (desktop has sb-user in sidebar) */
@media (max-width: 679px) {
  .home-avatar-wrap { display: inline-flex !important; }
}
.home-avatar-btn.home-avatar-btn {
  background: linear-gradient(135deg, #38d9f5, #a78bfa) !important;
  border: 1.5px solid rgba(255,255,255,0.2) !important;
  box-shadow: 0 2px 14px rgba(56,217,245,0.28) !important;
  color: #030810 !important;
  font-weight: 700 !important;
}
.home-sync-badge.synced {
  background: #34d399 !important;
  border: 2px solid #030810 !important;
  box-shadow: 0 0 8px rgba(52,211,153,0.5) !important;
}

/* ═══════════════════════════════════════════════════════════
   5. PRACTICE PANEL (hp-toggle)
═══════════════════════════════════════════════════════════ */
.home-practice {
  background: rgba(3,8,16,0.65) !important;
  backdrop-filter: var(--gblur) !important;
  -webkit-backdrop-filter: var(--gblur) !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  border-left: 1px solid rgba(255,255,255,0.04) !important;
}
.home-practice.collapsed {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: none !important;
  border-left: none !important;
}
.hp-toggle-btn {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  font-family: 'DM Sans', sans-serif !important;
  color: var(--text2) !important;
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: 0.08em !important; text-transform: uppercase !important;
}
.home-practice.collapsed .hp-toggle-btn {
  margin: 8px 12px 20px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 100px !important;
  background: rgba(255,255,255,0.05) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  padding: 8px 16px !important;
}
.hp-toggle-btn:hover { color: #38d9f5 !important; background: rgba(56,217,245,0.06) !important; }
.home-practice:not(.collapsed) .hp-toggle-btn { color: #38d9f5 !important; }

/* ═══════════════════════════════════════════════════════════
   6. LESSON FOOTER (fixed, outside screens)
═══════════════════════════════════════════════════════════ */
.lesson-footer {
  background: rgba(3,8,16,0.72) !important;
  backdrop-filter: var(--gblur) !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  z-index: 80 !important;
}

/* ═══════════════════════════════════════════════════════════
   7. FEEDBACK HINT TOAST (slides from top)
═══════════════════════════════════════════════════════════ */
.fb-hint-toast {
  border-radius: 0 0 18px 18px !important;
}
.fb-hint-toast.correct,
.fb-hint-toast.wrong,
.fb-hint-toast.typo {
  backdrop-filter: var(--gblur) !important;
  -webkit-backdrop-filter: var(--gblur) !important;
}
.fb-hint-toast.correct {
  background: rgba(4,22,14,0.88) !important;
  border: 1px solid rgba(56,217,245,0.35) !important;
  border-top: none !important;
}
.fb-hint-toast.wrong {
  background: rgba(22,4,4,0.88) !important;
  border: 1px solid rgba(251,113,133,0.35) !important;
  border-top: none !important;
}
.fb-hint-toast.typo {
  background: rgba(22,14,4,0.88) !important;
  border: 1px solid rgba(167,139,250,0.35) !important;
  border-top: none !important;
}

/* ═══════════════════════════════════════════════════════════
   8. BOTTOM NAV — floating glass pill
═══════════════════════════════════════════════════════════ */
.bottom-nav {
  left: 16px !important; right: 16px !important;
  width: auto !important;
  transform: none !important;
  bottom: calc(var(--nav-float-gap, 12px) + env(safe-area-inset-bottom, 0px)) !important;
  border-radius: 100px !important;
  background: rgba(6,10,24,0.38) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.35),
    0 2px 8px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

/* iOS installed PWA — fixed compact pill, no stretch, no overlap with practice panel */
html.standalone.ios {
  --nav-offset: 6px;
  --nav-pill-h: 48px;
  --nav-h: calc(var(--nav-pill-h) + var(--nav-offset) + 12px);
}
html.standalone.ios .bottom-nav {
  bottom: var(--nav-offset) !important;
  height: var(--nav-pill-h) !important;
  min-height: var(--nav-pill-h) !important;
  max-height: var(--nav-pill-h) !important;
  padding: 0 12px !important;
  overflow: hidden !important;
  align-items: center !important;
  box-sizing: border-box !important;
}
html.standalone.ios .bn-item {
  height: 40px !important;
  min-height: 0 !important;
  padding: 0 !important;
}
html.standalone.ios .home-practice {
  bottom: var(--nav-h) !important;
}

.bn-item {
  border-radius: 100px !important;
  transition: color var(--trans), background var(--trans), box-shadow var(--trans) !important;
}
.bn-item:hover {
  background: rgba(255,255,255,0.07) !important;
  color: var(--text) !important;
}
.bn-item.active {
  color: #38d9f5 !important;
  background: linear-gradient(150deg, rgba(56,217,245,0.16), rgba(167,139,250,0.09)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 20px rgba(56,217,245,0.12) !important;
}
.bn-item.active::after {
  display: none !important;
}
.bn-item.active .bn-icon {
  filter: drop-shadow(0 0 5px rgba(56,217,245,0.55)) !important;
}

@media (max-width: 679px) {
  .bottom-nav:not([style*="display: none"]):not([style*="display:none"]) { display: flex !important; }
}

/* ═══════════════════════════════════════════════════════════
   9. SIDEBAR
═══════════════════════════════════════════════════════════ */
#sidebar {
  background: rgba(3,8,16,0.68) !important;
  backdrop-filter: blur(60px) saturate(180%) !important;
  border-right-color: rgba(255,255,255,0.06) !important;
}
.sb-item:hover { background: rgba(255,255,255,0.055) !important; border-color: rgba(255,255,255,0.08) !important; }
.sb-item.active {
  background: linear-gradient(135deg, rgba(56,217,245,0.1), rgba(167,139,250,0.08)) !important;
  border-color: rgba(56,217,245,0.22) !important; color: #38d9f5 !important;
}
.sb-logo-text {
  font-family: 'Fraunces', serif !important;
  background: linear-gradient(120deg, #38d9f5, #a78bfa) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.sb-user:hover { background: rgba(255,255,255,0.04) !important; }
.sb-avatar { background: linear-gradient(135deg, #38d9f5, #a78bfa) !important; }
.sb-level-badge { background: rgba(56,217,245,0.1) !important; color: #38d9f5 !important; border-color: rgba(56,217,245,0.2) !important; }

/* ═══════════════════════════════════════════════════════════
   10. BUTTONS
═══════════════════════════════════════════════════════════ */
.btn-primary {
  background: linear-gradient(135deg, #38d9f5, #a78bfa) !important;
  color: #030810 !important; font-family: 'DM Sans', sans-serif; font-weight: 700 !important;
  box-shadow: 0 4px 20px rgba(56,217,245,0.3), inset 0 1px 0 rgba(255,255,255,0.22) !important;
  border: none !important;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #4ae5ff, #b89dfc) !important;
  box-shadow: 0 8px 28px rgba(56,217,245,0.42) !important;
  transform: translateY(-2px) !important;
}
.btn-primary:active { transform: translateY(0) !important; }
.btn-primary:disabled {
  background: rgba(255,255,255,0.07) !important; box-shadow: none !important; color: var(--text3) !important;
}
.btn-secondary {
  background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.1) !important;
  backdrop-filter: var(--gblur-sm); color: var(--text2) !important;
}
.btn-secondary:hover { background: rgba(255,255,255,0.1) !important; color: var(--text) !important; }
.btn-danger {
  background: linear-gradient(135deg, #fb7185, #e11d48) !important;
  box-shadow: 0 4px 16px rgba(251,113,133,0.3) !important; color: #fff !important;
}
.btn-icon {
  background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.08) !important;
}
.btn-icon:hover { background: rgba(255,255,255,0.1) !important; }
.btn-audio {
  background: linear-gradient(135deg, rgba(56,217,245,0.15), rgba(167,139,250,0.1)) !important;
  border: 1px solid rgba(56,217,245,0.25) !important;
  box-shadow: 0 4px 16px rgba(56,217,245,0.15) !important;
  color: #38d9f5 !important; border-radius: 50% !important;
}
.btn-audio:hover { background: rgba(56,217,245,0.25) !important; transform: scale(1.08) !important; }

/* ═══════════════════════════════════════════════════════════
   11. PROGRESS / BADGES
═══════════════════════════════════════════════════════════ */
.lesson-progress-bar { background: rgba(255,255,255,0.07) !important; }
.lesson-progress-fill {
  background: linear-gradient(90deg, #38d9f5, #a78bfa) !important;
  box-shadow: 0 0 12px rgba(56,217,245,0.4) !important;
}
.ring-bg   { stroke: rgba(255,255,255,0.07) !important; }
.ring-fill { stroke: #38d9f5 !important; }
.level-badge { background: linear-gradient(135deg, #38d9f5, #1ab8d4) !important; color: #030810 !important; }
.level-badge.locked { background: rgba(255,255,255,0.05) !important; color: var(--text3) !important; }
.stat-badge.xp     { background: rgba(251,191,36,0.12) !important; border-color: rgba(251,191,36,0.25) !important; color: #fbbf24 !important; }
.stat-badge.streak { background: rgba(251,113,133,0.12) !important; border-color: rgba(251,113,133,0.25) !important; color: #fb7185 !important; }
.stat-badge.level-badge-hdr { background: rgba(56,217,245,0.1) !important; color: #38d9f5 !important; border-color: rgba(56,217,245,0.25) !important; }
.hdr-xp-pill { background: rgba(251,191,36,0.1) !important; border-color: rgba(251,191,36,0.25) !important; color: #fbbf24 !important; }

/* ═══════════════════════════════════════════════════════════
   12. COURSE MAP
═══════════════════════════════════════════════════════════ */
.level-header {
  background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.07) !important;
  backdrop-filter: var(--gblur-sm);
}
.level-header:hover { background: rgba(255,255,255,0.07) !important; }
.topics-list { background: rgba(255,255,255,0.025) !important; border-color: rgba(255,255,255,0.06) !important; }
.topics-list.path-zigzag,
.topics-list.path-tree { background: transparent !important; border: none !important; }
.path-s-mascot { z-index: 6 !important; }
.path-mascot-cele .complete-cele-float { animation: celeBob 2.5s ease-in-out infinite !important; }
.path-mascot--count .complete-cele-float { animation: pathCountBob 2s ease-in-out infinite !important; }
.path-mascot-cele .complete-cele-shadow { animation: celeShadow 2.5s ease-in-out infinite !important; }
.path-mascot-cele .complete-cele-arm.arm-l { animation: celeArmL 2.5s ease-in-out infinite !important; }
.path-mascot-cele .complete-cele-arm.arm-r { animation: celeArmR 2.5s ease-in-out infinite !important; }
.path-mascot--count .complete-cele-arm.arm-l { animation: celeArmL 1.6s ease-in-out infinite !important; }
.path-mascot--count .complete-cele-arm.arm-r { animation: celeArmR 1.6s ease-in-out infinite !important; }
.path-mascot-cele .complete-cele-sparkle { animation: celeSparkle 2.2s ease-in-out infinite !important; }
.path-mascot-orbit { animation: pathOrbitSpin 8s linear infinite !important; }
.path-mascot--greet .path-mascot-orbit { animation: none !important; }
.path-mascot--count .path-mascot-orbit { animation: none !important; }
.path-mascot--greet .path-mascot-orbit-icon.orbit-a {
  transform-origin: 72% 85% !important;
  animation: pathWaveHand 3s ease-in-out infinite !important;
}
.path-mascot--count .path-mascot-orbit-icon.orbit-a {
  animation: pathMorphA 4s ease-in-out infinite !important;
}
.path-mascot--count .path-mascot-orbit-icon.orbit-b {
  top: 2px !important; right: 2px !important; bottom: auto !important; left: auto !important;
  animation: pathMorphB 4s ease-in-out infinite !important;
}
.path-node {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
  backdrop-filter: var(--gblur) !important;
}
.path-node.done,
.path-node.current {
  background: linear-gradient(180deg, rgba(94,200,250,.95), rgba(28,176,246,.92)) !important;
  border-color: rgba(255,255,255,.28) !important;
}
.path-star.lit { color: var(--gold) !important; }
.path-node.locked { opacity: 0.35 !important; }
.path-connector-line.done { stroke: #38bdf8 !important; opacity: .6 !important; }
.complete-cele-platform {
  background: rgba(56,217,245,.12) !important;
  box-shadow: 0 0 16px rgba(56,217,245,.2) !important;
}
.complete-cele-logo { filter: drop-shadow(0 8px 22px rgba(56,217,245,.4)) !important; }
.topic-card {
  background: var(--card) !important; border-color: var(--border) !important;
  backdrop-filter: var(--gblur) !important;
}
.topic-card.done { border-color: rgba(56,217,245,0.28) !important; background: rgba(56,217,245,0.06) !important; }
.topic-card.locked { opacity: 0.35 !important; }
.card-pop:hover:not(.locked):not(:disabled) {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 44px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.07) !important;
}

/* ═══════════════════════════════════════════════════════════
   13. HOME TILES
═══════════════════════════════════════════════════════════ */
.home-tile {
  background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.08) !important;
  backdrop-filter: var(--gblur-sm);
}
.home-tile:hover { border-color: rgba(56,217,245,0.28) !important; background: rgba(56,217,245,0.07) !important; }
.hp-stat-card { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.07) !important; }

/* ═══════════════════════════════════════════════════════════
   14. FLASHCARD — liquid glass 3D
═══════════════════════════════════════════════════════════ */
.fc-front, .fc-back {
  background: rgba(255,255,255,0.055) !important;
  backdrop-filter: blur(60px) saturate(200%) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
.fc-front::before, .fc-back::before {
  content: '' !important; position: absolute !important; top: 0; left: 0; right: 0; height: 50% !important;
  background: linear-gradient(160deg, rgba(255,255,255,0.12) 0%, rgba(56,217,245,0.04) 30%, transparent 60%) !important;
  border-radius: inherit !important; pointer-events: none !important; z-index: 0 !important;
}
.fc-word { font-family: 'Fraunces', serif !important; font-size: 2.8rem !important; font-weight: 800 !important; letter-spacing: -1px !important; }
.fc-translation {
  font-family: 'Fraunces', serif !important; font-size: 1.8rem !important; font-weight: 600 !important;
  background: linear-gradient(135deg, #38d9f5, #a78bfa) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.fc-hint { color: rgba(56,217,245,0.75) !important; font-style: italic !important; }

/* ═══════════════════════════════════════════════════════════
   15. EXERCISES
═══════════════════════════════════════════════════════════ */
.option-btn, .match-btn {
  background: var(--card) !important; border-color: var(--border) !important;
  backdrop-filter: var(--gblur) !important;
}
.option-btn:hover:not(:disabled) {
  background: rgba(56,217,245,0.08) !important; border-color: rgba(56,217,245,0.3) !important; transform: translateY(-2px) !important;
}
.option-btn.correct { background: rgba(56,217,245,0.12) !important; border-color: rgba(56,217,245,0.4) !important; color: #38d9f5 !important; }
.option-btn.wrong   { background: rgba(251,113,133,0.12) !important; border-color: rgba(251,113,133,0.4) !important; color: #fb7185 !important; }
.match-btn.selected { border-color: rgba(56,217,245,0.4) !important; background: rgba(56,217,245,0.1) !important; }
.match-btn.matched  { border-color: rgba(56,217,245,0.35) !important; background: rgba(56,217,245,0.08) !important; color: #38d9f5 !important; }
.fill-chip { background: var(--card) !important; border-color: var(--border) !important; }
.fill-chip:hover:not(:disabled) { border-color: rgba(56,217,245,0.3) !important; background: rgba(56,217,245,0.08) !important; }
.fill-chip.fp-chip-ok  { border-color: rgba(56,217,245,0.35) !important; background: rgba(56,217,245,0.1) !important; color: #38d9f5 !important; }
.fill-chip.fp-chip-bad { border-color: rgba(251,113,133,0.35) !important; background: rgba(251,113,133,0.1) !important; color: #fb7185 !important; }
.sentbuild-display { background: rgba(255,255,255,0.03) !important; border: 2px dashed rgba(255,255,255,0.1) !important; }
.sentbuild-display:not(:empty) { border-color: rgba(56,217,245,0.3) !important; border-style: solid !important; }
.sentbuild-part { background: linear-gradient(135deg, rgba(56,217,245,0.18), rgba(99,102,241,0.12)) !important; color: #38d9f5 !important; }
.type-input { background: rgba(255,255,255,0.04) !important; border: 1.5px solid rgba(255,255,255,0.1) !important; }
.type-input:focus { border-color: rgba(56,217,245,0.4) !important; }
.type-input.correct { border-color: rgba(56,217,245,0.4) !important; background: rgba(56,217,245,0.06) !important; }
.type-input.wrong   { border-color: rgba(251,113,133,0.4) !important; background: rgba(251,113,133,0.06) !important; }
.fill-sentence { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; }
.fill-blank-slot { border-bottom-color: #38d9f5 !important; color: #38d9f5 !important; }
.fill-blank-slot.fp-correct { border-bottom-color: #38d9f5 !important; color: #38d9f5 !important; }
.fill-blank-slot.fp-wrong   { border-bottom-color: #fb7185 !important; color: #fb7185 !important; }

/* ═══════════════════════════════════════════════════════════
   16. VOCAB / ADD WORD
═══════════════════════════════════════════════════════════ */
.vocab-table-header { background: rgba(3,8,16,0.5) !important; border-bottom-color: rgba(255,255,255,0.07) !important; }
.vocab-item:hover { background: rgba(255,255,255,0.035) !important; }
.vocab-item { border-bottom-color: rgba(255,255,255,0.05) !important; }
.vocab-search { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.09) !important; }
.vocab-search:focus { border-color: rgba(56,217,245,0.4) !important; }
.vocab-add-btn { background: linear-gradient(135deg, #38d9f5, #a78bfa) !important; color: #030810 !important; box-shadow: 0 4px 16px rgba(56,217,245,0.25) !important; }
.filter-btn { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.09) !important; }
.filter-btn.active { background: rgba(56,217,245,0.12) !important; border-color: rgba(56,217,245,0.3) !important; color: #38d9f5 !important; }
.vtab.active { color: #38d9f5 !important; border-bottom-color: #38d9f5 !important; }
.vi-level-badge { background: rgba(56,217,245,0.1) !important; color: #38d9f5 !important; border-color: rgba(56,217,245,0.25) !important; }
.vi-level-badge.lvl-b { background: rgba(167,139,250,0.1) !important; color: #a78bfa !important; }
.vi-level-badge.lvl-c { background: rgba(251,191,36,0.1) !important; color: #fbbf24 !important; }
.aw-overlay { background: rgba(0,0,0,0.72) !important; backdrop-filter: blur(8px) !important; }
.aw-sheet { background: rgba(4,10,22,0.88) !important; backdrop-filter: var(--gblur) !important; border-top: 1px solid rgba(255,255,255,0.08) !important; }
.aw-hdr { border-bottom-color: rgba(255,255,255,0.07) !important; }
.aw-close { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.09) !important; }
.aw-inp { background: rgba(255,255,255,0.04) !important; border: 1.5px solid rgba(255,255,255,0.1) !important; }
.aw-pos-btn { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.09) !important; }
.aw-pos-btn.active { background: rgba(251,191,36,0.1) !important; border-color: rgba(251,191,36,0.3) !important; color: #fbbf24 !important; }
.aw-level-btn { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.09) !important; }
.aw-level-btn.active { background: rgba(56,217,245,0.1) !important; border-color: rgba(56,217,245,0.3) !important; color: #38d9f5 !important; }
.topic-dd-menu { background: rgba(6,12,22,0.92) !important; backdrop-filter: var(--gblur); border-color: rgba(255,255,255,0.1) !important; }

/* ═══════════════════════════════════════════════════════════
   17. SETTINGS
═══════════════════════════════════════════════════════════ */
.sett-nav-item:hover { background: rgba(255,255,255,0.055) !important; }
.sett-nav-item.active { background: rgba(56,217,245,0.09) !important; border-color: rgba(56,217,245,0.22) !important; color: #38d9f5 !important; }
.sett-tab.active { background: rgba(56,217,245,0.1) !important; border-color: rgba(56,217,245,0.25) !important; color: #38d9f5 !important; }
.theme-preset-btn { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.1) !important; }
.theme-preset-btn.active { border-color: rgba(56,217,245,0.4) !important; color: #38d9f5 !important; background: rgba(56,217,245,0.07) !important; }
.settings-input { background: rgba(255,255,255,0.04) !important; border: 1.5px solid rgba(255,255,255,0.1) !important; }
.settings-input:focus { border-color: rgba(56,217,245,0.4) !important; }
.sett-action-btn { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.09) !important; }
.sett-action-danger { background: rgba(251,113,133,0.07) !important; border-color: rgba(251,113,133,0.25) !important; color: #fb7185 !important; }
.profile-card, .account-lang-card { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.08) !important; }
.profile-avatar { background: linear-gradient(135deg, #38d9f5, #a78bfa) !important; }
.uilang-option { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.09) !important; }
.uilang-option:has(input:checked) { border-color: rgba(56,217,245,0.4) !important; background: rgba(56,217,245,0.07) !important; color: #38d9f5 !important; }
/* Ollama unified colors */
#ollama-not-running-block { background: rgba(56,217,245,0.06) !important; border: 1px solid rgba(56,217,245,0.2) !important; }
#ollama-not-running-msg, #ollama-not-installed-msg { color: #38d9f5 !important; }
.ollama-tip-icon { background: rgba(167,139,250,0.7) !important; }
.model-pick-badge { background: rgba(56,217,245,0.15) !important; color: #38d9f5 !important; border: 1px solid rgba(56,217,245,0.3) !important; }
.model-pick-badge.badge-warn { background: rgba(167,139,250,0.15) !important; color: #a78bfa !important; border-color: rgba(167,139,250,0.3) !important; }

/* ═══════════════════════════════════════════════════════════
   18. CHAT
═══════════════════════════════════════════════════════════ */
.chat-mode-card { border-color: rgba(255,255,255,0.09) !important; background: var(--card) !important; backdrop-filter: var(--gblur) !important; }
.chat-mode-card.selected { border-color: rgba(167,139,250,0.4) !important; background: rgba(167,139,250,0.09) !important; }
.chat-msg-user { background: linear-gradient(135deg, rgba(56,217,245,0.18), rgba(99,102,241,0.12)) !important; border: 1px solid rgba(56,217,245,0.18) !important; }
.chat-msg-assistant { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.09) !important; }

/* ═══════════════════════════════════════════════════════════
   19. COMPLETE SCREEN
═══════════════════════════════════════════════════════════ */
#screen-complete { background: transparent !important; }
.complete-trophy { filter: drop-shadow(0 0 32px rgba(251,191,36,0.5)); }
.complete-title { font-family: 'Fraunces', serif !important; }
.complete-stat { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.08) !important; backdrop-filter: var(--gblur-sm); }

/* ═══════════════════════════════════════════════════════════
   20. HEADINGS & MISC
═══════════════════════════════════════════════════════════ */
.screen-header h2, .sett-section-hdr h2, .complete-title, .aw-title {
  font-family: 'Fraunces', serif !important;
}
.update-banner { background: rgba(56,217,245,0.07) !important; border-color: rgba(56,217,245,0.2) !important; }
#modal-confirm > div, #modal-uninstall > div {
  background: rgba(4,10,22,0.92) !important; backdrop-filter: var(--gblur) !important;
  border-color: rgba(255,255,255,0.1) !important;
}
#update-overlay { background: rgba(3,8,16,0.88) !important; }
.upd-card { background: rgba(6,12,24,0.92) !important; border-color: rgba(255,255,255,0.1) !important; backdrop-filter: var(--gblur); }
.vkbd-panel { background: rgba(3,8,16,0.72) !important; backdrop-filter: var(--gblur-sm); border-color: rgba(255,255,255,0.08) !important; }
.vkbd-key { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.1) !important; }
.vkbd-key:hover { background: rgba(255,255,255,0.1) !important; }
.vp-sub-a { color: #38d9f5 !important; }
.vp-sub-b { color: #fbbf24 !important; }
.tr-row.active { background: rgba(56,217,245,0.1) !important; border-left-color: #38d9f5 !important; }
.gram-example { border-left-color: #38d9f5 !important; }
.gram-tip     { border-left-color: #fbbf24 !important; }
.gram-rule-title { border-bottom-color: #38d9f5 !important; }
.sp-logo { background: rgba(3,8,16,0.8) !important; border-color: rgba(56,217,245,0.22) !important; }
.sp-fill { background: linear-gradient(90deg, #38d9f5, #a78bfa) !important; }
.sp-title {
  font-family: 'Fraunces', serif !important;
  background: linear-gradient(130deg, #38d9f5 0%, #34d399 55%, #a78bfa 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.speed-timer.urgent { border-color: rgba(251,113,133,0.5) !important; color: #fb7185 !important; }
.sr-new-best { background: linear-gradient(135deg, #fbbf24, #f97316) !important; color: #030810 !important; }
.memory-card.matched .memory-back { border-color: rgba(56,217,245,0.35) !important; background: rgba(56,217,245,0.08) !important; color: #38d9f5 !important; }

/* Light theme */
html[data-theme="light"] .globe-lang-card,
html[data-theme="light"] .topic-card,
html[data-theme="light"] .fc-front,
html[data-theme="light"] .fc-back,
html[data-theme="light"] .complete-stat {
  background: rgba(255,255,255,0.75) !important; backdrop-filter: var(--gblur) !important;
  border-color: rgba(0,0,0,0.08) !important;
}
html[data-theme="light"] .level-header {
  background: rgba(255,255,255,0.72) !important;
  border-color: rgba(0,0,0,0.13) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,0.9) !important;
  backdrop-filter: blur(20px) !important;
}
html[data-theme="light"] .level-header:hover {
  background: rgba(255,255,255,0.92) !important;
  border-color: rgba(0,0,0,0.18) !important;
}
html[data-theme="light"] .topics-list {
  background: rgba(255,255,255,0.45) !important;
  border-color: rgba(0,0,0,0.11) !important;
}
html[data-theme="light"] .level-block.open .level-header {
  border-bottom-color: rgba(0,0,0,0.06) !important;
}
html[data-theme="light"] #sidebar,
html[data-theme="light"] .app-header,
html[data-theme="light"] .screen-header,
html[data-theme="light"] .home-practice {
  background: rgba(230,235,255,0.75) !important;
  border-color: rgba(0,0,0,0.10) !important;
}
html[data-theme="light"] .bottom-nav {
  background: rgba(245,247,255,0.52) !important;
  border-color: rgba(0,0,0,0.08) !important;
  box-shadow:
    0 8px 28px rgba(80,90,180,0.14),
    0 2px 8px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.65) !important;
}
/* ── Light theme: practice tiles & stats ── */
html[data-theme="light"] .home-tile {
  background: rgba(255,255,255,0.72) !important;
  border-color: rgba(0,0,0,0.12) !important;
  color: #2a3060 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important;
}
html[data-theme="light"] .home-tile:hover {
  background: rgba(255,255,255,0.95) !important;
  border-color: rgba(56,217,245,0.45) !important;
}
html[data-theme="light"] .hp-stat-card {
  background: rgba(255,255,255,0.65) !important;
  border-color: rgba(0,0,0,0.10) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

/* ── Light theme: settings sections & controls ── */
html[data-theme="light"] .sett-section,
html[data-theme="light"] .sett-content {
  background: transparent !important;
}
html[data-theme="light"] .sett-grp {
  background: rgba(255,255,255,0.55) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
}
html[data-theme="light"] .theme-preset-btn {
  background: rgba(255,255,255,0.72) !important;
  border-color: rgba(0,0,0,0.12) !important;
  color: #1e2350 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07) !important;
}
html[data-theme="light"] .theme-preset-btn.active {
  background: rgba(56,217,245,0.12) !important;
  border-color: rgba(56,217,245,0.45) !important;
  color: #0891b2 !important;
}
html[data-theme="light"] .uilang-option {
  background: rgba(255,255,255,0.72) !important;
  border-color: rgba(0,0,0,0.12) !important;
  color: #1e2350 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
html[data-theme="light"] .uilang-option:has(input:checked) {
  background: rgba(56,217,245,0.10) !important;
  border-color: rgba(56,217,245,0.40) !important;
  color: #0891b2 !important;
}
html[data-theme="light"] .palette-btn {
  border-color: rgba(0,0,0,0.10) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}
html[data-theme="light"] .palette-btn:hover {
  border-color: rgba(0,0,0,0.22) !important;
}
html[data-theme="light"] .color-pick-item {
  background: rgba(255,255,255,0.72) !important;
  border-color: rgba(0,0,0,0.10) !important;
}
html[data-theme="light"] .sett-sidenav {
  background: rgba(230,235,255,0.72) !important;
  border-color: rgba(0,0,0,0.08) !important;
}
html[data-theme="light"] .sett-nav-item {
  color: #3a4070 !important;
}
html[data-theme="light"] .sett-nav-item:hover {
  background: rgba(255,255,255,0.65) !important;
}
html[data-theme="light"] .sett-nav-item.active {
  background: rgba(56,217,245,0.10) !important;
  border-color: rgba(56,217,245,0.35) !important;
  color: #0891b2 !important;
}
html[data-theme="light"] .sett-tab {
  color: #3a4070 !important;
  background: rgba(255,255,255,0.55) !important;
  border-color: rgba(0,0,0,0.10) !important;
}
html[data-theme="light"] .sett-tab.active {
  background: rgba(56,217,245,0.10) !important;
  border-color: rgba(56,217,245,0.35) !important;
  color: #0891b2 !important;
}
html[data-theme="light"] .sett-grp-lbl {
  color: #6070a0 !important;
}
html[data-theme="light"] .sett-section-hdr h2 {
  color: #1a2050 !important;
}

/* ── Light theme: achievements ── */
html[data-theme="light"] .ach-card.locked {
  background: rgba(255,255,255,0.65) !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  opacity: 0.7 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important;
}
html[data-theme="light"] .ach-card.done {
  background: linear-gradient(145deg, rgba(16,185,129,.12), rgba(56,217,245,.08)) !important;
  border-color: rgba(16,185,129,.35) !important;
}
html[data-theme="light"] .ach-label {
  color: rgba(30,40,90,.65) !important;
}
html[data-theme="light"] .ach-desc {
  color: rgba(30,40,90,.45) !important;
}
html[data-theme="light"] .ach-card.done .ach-label { color: rgba(5,120,80,.9) !important; }
html[data-theme="light"] .ach-card.done .ach-desc  { color: rgba(5,120,80,.6) !important; }
html[data-theme="light"] .ach-section-hdr {
  color: rgba(30,40,90,.55) !important;
}
html[data-theme="light"] .ach-count {
  color: rgba(30,40,90,.4) !important;
}


html[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse 55% 50% at 12% 12%, rgba(99,102,241,0.12) 0%, transparent 68%),
    radial-gradient(ellipse 48% 44% at 88% 62%, rgba(56,217,245,0.08) 0%, transparent 68%),
    radial-gradient(ellipse 65% 58% at 50% 102%, rgba(167,139,250,0.08) 0%, transparent 68%);
}

/* ═══════════════════════════════════════════════════════════
   DAILY CHALLENGE CARD
═══════════════════════════════════════════════════════════ */
.dc-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px; padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
}
.dc-card.dc-done {
  background: rgba(56,217,245,0.08);
  border-color: rgba(56,217,245,0.35);
}
.dc-icon { font-size: 22px; flex-shrink: 0; line-height: 1; }
.dc-body { flex: 1; min-width: 0; }
.dc-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.dc-label {
  font-size: 10px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--text3);
}
.dc-card.dc-done .dc-label { color: rgba(56,217,245,.9); }
.dc-xp {
  font-size: 11px; font-weight: 700; color: var(--text2);
}
.dc-card.dc-done .dc-xp { color: rgba(56,217,245,.9); }
.dc-title {
  font-size: 14px; font-weight: 700; color: var(--text); margin: 0;
}
.dc-card.dc-done .dc-title { color: #38d9f5; }
.dc-desc {
  font-size: 12px; color: var(--text2); margin: 0;
}

/* ── Light theme: daily card ── */
html[data-theme="light"] .dc-card {
  background: rgba(255,255,255,0.72) !important;
  border-color: rgba(0,0,0,0.12) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important;
}
html[data-theme="light"] .dc-card.dc-done {
  background: rgba(56,217,245,0.10) !important;
  border-color: rgba(56,217,245,0.40) !important;
}

/* ═══════════════════════════════════════════════════════════
   DAILY CHALLENGE PILL
═══════════════════════════════════════════════════════════ */
.ll-daily-pill {
  display: flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: 100px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(20px); cursor: pointer; transition: all 0.2s;
  flex-shrink: 0; min-width: 58px; justify-content: center;
}
.ll-daily-pill:hover { background: rgba(56,217,245,0.1); border-color: rgba(56,217,245,0.3); }
.ll-daily-pill.ll-daily-done {
  background: rgba(56,217,245,0.12) !important; border-color: rgba(56,217,245,0.4) !important;
  animation: dcGlow 2s ease-in-out infinite;
}
@keyframes dcGlow {
  0%,100% { box-shadow: 0 0 16px rgba(56,217,245,0.2), 0 0 32px rgba(56,217,245,0.08); }
  50%     { box-shadow: 0 0 24px rgba(56,217,245,0.35), 0 0 48px rgba(56,217,245,0.14); }
}
.ll-dp-icon { font-size: 14px; line-height: 1; }
.ll-dp-xp { font-size: 10px; font-weight: 700; color: #fbbf24; letter-spacing: 0.03em; }
/* Mobile: show pill in header, hide full card */
#ll-daily-challenge { display: none !important; }
@media (min-width: 680px) {
  #ll-daily-challenge { display: block !important; }
  .ll-daily-pill { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   ACHIEVEMENTS GRID
═══════════════════════════════════════════════════════════ */
.ach-section-hdr {
  display: flex; align-items: baseline; gap: 8px;
  padding: 0 2px 10px;
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text3);
}
.ach-count { font-size: .68rem; font-weight: 600; color: var(--text3); opacity: .6; }
.ach-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
#sett-achievements-list .ach-grid {
  grid-template-columns: repeat(5, 1fr);
}
.ach-card {
  position: relative; overflow: hidden;
  border-radius: 14px; padding: 10px 6px 8px;
  text-align: center;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  transition: transform .18s, box-shadow .18s;
  cursor: default;
}
.ach-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%;
  border-radius: 14px 14px 50% 50% / 14px 14px 24px 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, transparent 100%);
  pointer-events: none;
}
.ach-card.locked {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  opacity: .45;
}
.ach-card.done {
  background: linear-gradient(145deg, rgba(52,211,153,.12), rgba(56,217,245,.07));
  border: 1px solid rgba(52,211,153,.30);
  box-shadow: 0 0 18px rgba(52,211,153,.10);
  opacity: 1;
}
.ach-card.done::before {
  background: linear-gradient(180deg, rgba(52,211,153,.14) 0%, transparent 100%);
}
.ach-card:hover { transform: translateY(-2px); }
.ach-card.done:hover { box-shadow: 0 6px 24px rgba(52,211,153,.22); }
.ach-icon {
  font-size: 20px; line-height: 1; margin-bottom: 5px;
  display: block;
}
.ach-card.locked .ach-icon { filter: grayscale(1) opacity(.4); }
.ach-label {
  font-size: 8.5px; font-weight: 700; line-height: 1.25;
  color: rgba(200,215,255,.55); display: block; margin-bottom: 2px;
}
.ach-card.done .ach-label { color: rgba(52,211,153,.9); }
.ach-desc {
  font-size: 7.5px; color: rgba(255,255,255,.22); line-height: 1.3; display: block;
}
.ach-card.done .ach-desc { color: rgba(255,255,255,.35); }