/* [style] */
/* ════════════════════════════
   ROOT VARIABLES — 10+ THEMES
════════════════════════════ */
:root{
  /* Theme: Dark Gold (Default) */
  --g:#E8C547;--gl:#FFF0A0;--gd:#C9A227;--gdim:#7a5e10;
  --bg:#0D0F14;--bg2:#141720;--bg3:#1C2030;--bg4:#242840;
  --fg:rgba(232,197,71,0.95);--fgd:rgba(232,197,71,0.6);
  --fg-dim:rgba(232,197,71,0.25);
  --card:rgba(255,255,255,0.04);
  --bdr:rgba(232,197,71,0.18);
  --txt:#EEE8D5;--txtd:rgba(238,232,213,0.65);
  --red:#ff5f5f;--green:#5DD876;
  --shadow:rgba(232,197,71,0.22);
  --radius:16px;
  --glow:rgba(232,197,71,0.12);
}

/* ── LIGHT GOLD ── */
body.theme-light{
  --bg:#FFFFFF;--bg2:#FAFAFA;--bg3:#F5F0E8;--bg4:#EDE3CC;
  --fg:#B8860B;--fgd:rgba(184,134,11,0.7);
  --fg-dim:rgba(184,134,11,0.2);
  --card:rgba(184,134,11,0.05);
  --bdr:rgba(184,134,11,0.2);
  --txt:#1C1200;--txtd:rgba(28,18,0,0.58);
  --shadow:rgba(184,134,11,0.22);
  --g:#B8860B;--gl:#DAA520;--gd:#8B6914;--gdim:#5a4208;
  --glow:rgba(184,134,11,0.1);
  --red:#D32F2F;--green:#388E3C;
}
/* Backward compat */
body.light{
  --bg:#FFFFFF;--bg2:#FAFAFA;--bg3:#F5F0E8;--bg4:#EDE3CC;
  --fg:#B8860B;--fgd:rgba(184,134,11,0.7);
  --fg-dim:rgba(184,134,11,0.2);
  --card:rgba(184,134,11,0.05);
  --bdr:rgba(184,134,11,0.2);
  --txt:#1C1200;--txtd:rgba(28,18,0,0.58);
  --shadow:rgba(184,134,11,0.22);
  --g:#B8860B;--gl:#DAA520;--gd:#8B6914;--gdim:#5a4208;
  --glow:rgba(184,134,11,0.1);
  --red:#D32F2F;--green:#388E3C;
}

/* ── MIDNIGHT BLUE ── */
body.theme-midnight{
  --g:#60A5FA;--gl:#BAE6FD;--gd:#3B82F6;--gdim:#1d4ed8;
  --bg:#05070F;--bg2:#0A0E1A;--bg3:#101627;--bg4:#181E34;
  --fg:rgba(96,165,250,0.95);--fgd:rgba(96,165,250,0.6);
  --fg-dim:rgba(96,165,250,0.22);
  --card:rgba(96,165,250,0.05);
  --bdr:rgba(96,165,250,0.18);
  --txt:#D4E8FF;--txtd:rgba(212,232,255,0.6);
  --red:#f87171;--green:#4ade80;
  --shadow:rgba(96,165,250,0.25);
  --glow:rgba(96,165,250,0.12);
}

/* ── EMERALD FOREST ── */
body.theme-emerald{
  --g:#34D399;--gl:#A7F3D0;--gd:#10B981;--gdim:#065f46;
  --bg:#050E0A;--bg2:#081510;--bg3:#0D1F18;--bg4:#142B22;
  --fg:rgba(52,211,153,0.95);--fgd:rgba(52,211,153,0.6);
  --fg-dim:rgba(52,211,153,0.22);
  --card:rgba(52,211,153,0.05);
  --bdr:rgba(52,211,153,0.18);
  --txt:#D1FAE5;--txtd:rgba(209,250,229,0.6);
  --red:#f87171;--green:#6ee7b7;
  --shadow:rgba(52,211,153,0.22);
  --glow:rgba(52,211,153,0.1);
}

/* ── ROYAL PURPLE ── */
body.theme-purple{
  --g:#C084FC;--gl:#F0ABFC;--gd:#A855F7;--gdim:#7e22ce;
  --bg:#08050F;--bg2:#0E0A18;--bg3:#150F24;--bg4:#1E1530;
  --fg:rgba(192,132,252,0.95);--fgd:rgba(192,132,252,0.6);
  --fg-dim:rgba(192,132,252,0.22);
  --card:rgba(192,132,252,0.05);
  --bdr:rgba(192,132,252,0.18);
  --txt:#F3E8FF;--txtd:rgba(243,232,255,0.6);
  --red:#f87171;--green:#86efac;
  --shadow:rgba(192,132,252,0.25);
  --glow:rgba(192,132,252,0.1);
}

/* ── ROSE PETAL ── */
body.theme-rose{
  --g:#FB7185;--gl:#FECDD3;--gd:#F43F5E;--gdim:#9f1239;
  --bg:#0F050A;--bg2:#180A0F;--bg3:#230F17;--bg4:#2E1520;
  --fg:rgba(251,113,133,0.95);--fgd:rgba(251,113,133,0.6);
  --fg-dim:rgba(251,113,133,0.22);
  --card:rgba(251,113,133,0.05);
  --bdr:rgba(251,113,133,0.18);
  --txt:#FFE4E6;--txtd:rgba(255,228,230,0.6);
  --red:#fca5a5;--green:#86efac;
  --shadow:rgba(251,113,133,0.25);
  --glow:rgba(251,113,133,0.1);
}

/* ── SUNSET ORANGE ── */
body.theme-sunset{
  --g:#FB923C;--gl:#FED7AA;--gd:#EA580C;--gdim:#9a3412;
  --bg:#0F0805;--bg2:#1A0F08;--bg3:#25160D;--bg4:#301E12;
  --fg:rgba(251,146,60,0.95);--fgd:rgba(251,146,60,0.6);
  --fg-dim:rgba(251,146,60,0.22);
  --card:rgba(251,146,60,0.05);
  --bdr:rgba(251,146,60,0.18);
  --txt:#FFF7ED;--txtd:rgba(255,247,237,0.6);
  --red:#fca5a5;--green:#86efac;
  --shadow:rgba(251,146,60,0.25);
  --glow:rgba(251,146,60,0.1);
}

/* ── ARCTIC WHITE ── */
body.theme-arctic{
  --g:#0EA5E9;--gl:#BAE6FD;--gd:#0284C7;--gdim:#075985;
  --bg:#F0F9FF;--bg2:#E0F2FE;--bg3:#BAE6FD;--bg4:#7DD3FC;
  --fg:#0284C7;--fgd:rgba(2,132,199,0.7);
  --fg-dim:rgba(2,132,199,0.2);
  --card:rgba(2,132,199,0.06);
  --bdr:rgba(2,132,199,0.2);
  --txt:#0C4A6E;--txtd:rgba(12,74,110,0.6);
  --red:#dc2626;--green:#16a34a;
  --shadow:rgba(2,132,199,0.2);
  --glow:rgba(2,132,199,0.08);
}

/* ── SAFFRON INDIA ── */
body.theme-saffron{
  --g:#F97316;--gl:#FED7AA;--gd:#C2410C;--gdim:#7c2d12;
  --bg:#0F0A05;--bg2:#1A1208;--bg3:#271A0C;--bg4:#332210;
  --fg:rgba(249,115,22,0.95);--fgd:rgba(249,115,22,0.6);
  --fg-dim:rgba(249,115,22,0.22);
  --card:rgba(249,115,22,0.05);
  --bdr:rgba(249,115,22,0.18);
  --txt:#FFF7ED;--txtd:rgba(255,247,237,0.6);
  --red:#ef4444;--green:#22c55e;
  --shadow:rgba(249,115,22,0.25);
  --glow:rgba(249,115,22,0.1);
}

/* ── DEEP OCEAN ── */
body.theme-ocean{
  --g:#06B6D4;--gl:#A5F3FC;--gd:#0891B2;--gdim:#164e63;
  --bg:#020B12;--bg2:#041420;--bg3:#071E30;--bg4:#0C2840;
  --fg:rgba(6,182,212,0.95);--fgd:rgba(6,182,212,0.6);
  --fg-dim:rgba(6,182,212,0.22);
  --card:rgba(6,182,212,0.05);
  --bdr:rgba(6,182,212,0.18);
  --txt:#CFFAFE;--txtd:rgba(207,250,254,0.6);
  --red:#f87171;--green:#4ade80;
  --shadow:rgba(6,182,212,0.25);
  --glow:rgba(6,182,212,0.1);
}

/* ── CHERRY BLOSSOM ── */
body.theme-sakura{
  --g:#F9A8D4;--gl:#FBCFE8;--gd:#EC4899;--gdim:#be185d;
  --bg:#FFF1F2;--bg2:#FFE4E6;--bg3:#FECDD3;--bg4:#FDA4AF;
  --fg:#BE185D;--fgd:rgba(190,24,93,0.7);
  --fg-dim:rgba(190,24,93,0.2);
  --card:rgba(236,72,153,0.06);
  --bdr:rgba(236,72,153,0.2);
  --txt:#4a0020;--txtd:rgba(74,0,32,0.6);
  --red:#dc2626;--green:#16a34a;
  --shadow:rgba(236,72,153,0.2);
  --glow:rgba(236,72,153,0.08);
}

/* ── AMOLED BLACK ── */
body.theme-amoled{
  --g:#FFFFFF;--gl:#E5E7EB;--gd:#D1D5DB;--gdim:#6B7280;
  --bg:#000000;--bg2:#0A0A0A;--bg3:#111111;--bg4:#1A1A1A;
  --fg:rgba(255,255,255,0.92);--fgd:rgba(255,255,255,0.5);
  --fg-dim:rgba(255,255,255,0.18);
  --card:rgba(255,255,255,0.04);
  --bdr:rgba(255,255,255,0.12);
  --txt:#F9FAFB;--txtd:rgba(249,250,251,0.55);
  --red:#f87171;--green:#4ade80;
  --shadow:rgba(255,255,255,0.15);
  --glow:rgba(255,255,255,0.06);
}

/* ── ANCIENT PARCHMENT ── */
body.theme-parchment{
  --g:#8B5CF6;--gl:#C4B5FD;--gd:#7C3AED;--gdim:#4c1d95;
  --bg:#FDF6E3;--bg2:#F5ECD6;--bg3:#EDE0C4;--bg4:#E0D0A8;
  --fg:#6D28D9;--fgd:rgba(109,40,217,0.7);
  --fg-dim:rgba(109,40,217,0.2);
  --card:rgba(109,40,217,0.06);
  --bdr:rgba(109,40,217,0.2);
  --txt:#1A0A2E;--txtd:rgba(26,10,46,0.6);
  --red:#b91c1c;--green:#15803d;
  --shadow:rgba(109,40,217,0.18);
  --glow:rgba(109,40,217,0.07);
}

/* ════════════════════════════
   BASE
════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:'Noto Sans Devanagari',sans-serif;min-height:100vh;overflow-x:hidden;transition:background .4s,color .4s}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--gd);border-radius:2px}
@keyframes noticePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.4)}}

/* ════ PAGE TRANSITIONS ════ */
.sub-page{transition:.38s cubic-bezier(.4,0,.2,1)!important}
@keyframes mxPageIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes mxFadeIn{from{opacity:0}to{opacity:1}}
@keyframes mxSlideInRight{from{opacity:0;transform:translateX(32px)}to{opacity:1;transform:translateX(0)}}
@keyframes mxSlideInUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes mxPop{0%{transform:scale(.92);opacity:0}60%{transform:scale(1.03)}100%{transform:scale(1);opacity:1}}
@keyframes mxShimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes mxBounceIn{0%{transform:scale(0.6);opacity:0}60%{transform:scale(1.08)}80%{transform:scale(0.97)}100%{transform:scale(1);opacity:1}}
@keyframes mxPulseGold{0%,100%{box-shadow:0 0 0 0 rgba(232,197,71,.4)}70%{box-shadow:0 0 0 10px rgba(232,197,71,0)}}
@keyframes mxSpinIn{from{opacity:0;transform:rotate(-8deg) scale(.9)}to{opacity:1;transform:rotate(0) scale(1)}}

/* Cards hover effect */
.prem-card,.about-card,.coin-card{transition:transform .18s ease,box-shadow .18s ease}
.prem-card:active,.about-card:active{transform:scale(.98)}

/* Button press feedback */
button:active:not([disabled]){transform:scale(.96)!important;transition:transform .1s ease!important}
.nbtn:active{transform:scale(.92)!important}

/* Smooth nav tab switch */
.nbtn{transition:color .2s ease,transform .15s ease}
.nbtn.active .nbtn-icon-wrap{animation:mxBounceIn .35s ease}

/* Toast animation */
@keyframes mxToastIn{from{opacity:0;transform:translateY(20px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes mxToastOut{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-10px) scale(.94)}}

/* Skeleton shimmer for loading */
.mx-skeleton{background:linear-gradient(90deg,var(--bg3) 25%,rgba(232,197,71,.06) 50%,var(--bg3) 75%);background-size:200% 100%;animation:mxShimmer 1.4s infinite}

/* ════ NOTIFICATION PERMISSION MODAL ════ */
#mxNotifPrompt{position:fixed;inset:0;z-index:10000;display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s ease}
#mxNotifPrompt.show{opacity:1;pointer-events:all}
#mxNotifPrompt .mx-np-card{background:var(--bg2);border:1.5px solid rgba(232,197,71,.25);border-radius:24px 24px 0 0;padding:0 0 env(safe-area-inset-bottom,16px);width:100%;max-width:480px;transform:translateY(100%);transition:transform .4s cubic-bezier(.34,1.2,.64,1)}
#mxNotifPrompt.show .mx-np-card{transform:translateY(0)}
.mx-np-pill{width:36px;height:4px;background:var(--bdr);border-radius:2px;margin:12px auto 0}
.mx-np-body{padding:20px 22px 24px}
.mx-np-icon{width:62px;height:62px;border-radius:20px;background:linear-gradient(135deg,rgba(232,197,71,.2),rgba(232,197,71,.06));border:1.5px solid rgba(232,197,71,.3);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;animation:mxPulseGold 2s infinite}
.mx-np-allow{width:100%;background:linear-gradient(135deg,var(--g),var(--gd));border:none;color:#000;border-radius:14px;padding:14px;font-family:'Cinzel Decorative',serif;font-size:11px;font-weight:700;cursor:pointer;letter-spacing:.5px;margin-bottom:10px;transition:transform .15s,box-shadow .15s}
.mx-np-allow:active{transform:scale(.97)}
.mx-np-skip{width:100%;background:none;border:none;color:var(--fgd);font-family:'Cormorant Garamond',serif;font-size:13px;cursor:pointer;padding:8px}

/* ════ SCROLL REVEAL ════ */
.mx-reveal{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease}
.mx-reveal.visible{opacity:1;transform:translateY(0)}


/* noise overlay */
body::after{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%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)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none;z-index:9998;opacity:.22}
.bglow{position:fixed;inset:0;z-index:0;background:radial-gradient(ellipse 80% 45% at 50% -5%,rgba(232,197,71,.1) 0%,transparent 60%),radial-gradient(ellipse 50% 60% at 90% 95%,rgba(100,80,200,.06) 0%,transparent 55%),radial-gradient(ellipse 40% 40% at 5% 80%,rgba(232,197,71,.05) 0%,transparent 55%);pointer-events:none;transition:background .4s}
.pts{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.pt{position:absolute;width:2px;height:2px;background:var(--g);border-radius:50%;opacity:0;animation:fup linear infinite}
@keyframes slideUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fup{0%{transform:translateY(100vh);opacity:0}10%{opacity:.4}90%{opacity:.15}100%{transform:translateY(-10vh);opacity:0}}

/* ════════════════════════════
   SPLASH SCREEN
════════════════════════════ */
#splash{position:fixed;inset:0;z-index:9999;background:#050505;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .8s,transform .8s}
#splash.hide{opacity:0;pointer-events:none;transform:scale(1.04)}
.splash-inner{text-align:center;animation:splashIn 1s ease both}
@keyframes splashIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.splash-logo{width:90px;height:90px;display:flex;align-items:center;justify-content:center;margin:0 auto 22px;animation:sLogoPulse 2s ease-in-out infinite}
@keyframes sLogoPulse{0%,100%{box-shadow:0 0 40px rgba(212,175,55,.2),0 0 80px rgba(212,175,55,.08)}50%{box-shadow:0 0 60px rgba(212,175,55,.4),0 0 120px rgba(212,175,55,.15)}}
.splash-logo-text{font-family:'Cinzel Decorative',serif;font-size:28px;font-weight:900;background:linear-gradient(135deg,var(--gd),var(--g),var(--gl));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.splash-title{font-family:'Cinzel Decorative',serif;font-size:clamp(24px,7vw,34px);font-weight:900;background:linear-gradient(135deg,var(--gdim) 0%,var(--g) 40%,var(--gl) 60%,var(--g) 80%,var(--gdim) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:4px;margin-bottom:8px}
.splash-sub{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:16px;color:var(--gd);letter-spacing:2px;margin-bottom:28px}
.splash-bar-wrap{width:200px;height:2px;background:rgba(212,175,55,.1);border-radius:2px;overflow:hidden;margin:0 auto 20px}
.splash-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--gdim),var(--g),var(--gl));border-radius:2px;animation:sbarFill 2.4s ease forwards}
@keyframes sbarFill{to{width:100%}}
.splash-credit{font-family:'Cormorant Garamond',serif;font-size:11px;color:rgba(212,175,55,.35);letter-spacing:2px}
.splash-quote{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:13px;color:rgba(212,175,55,.55);line-height:1.7;max-width:280px;margin:18px auto 0;padding:14px 16px;border-top:1px solid rgba(212,175,55,.1);text-align:center;animation:splashQuoteFade 1.2s ease .8s both}
.splash-quote-author{display:block;font-style:normal;font-size:10px;color:rgba(212,175,55,.3);letter-spacing:1.5px;margin-top:7px}
@keyframes splashQuoteFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.splash-rings{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center}
.splash-ring{position:absolute;border-radius:50%;border:1px solid rgba(212,175,55,.06);animation:ringExpand 3s ease-out infinite}
.splash-ring:nth-child(1){width:300px;height:300px;animation-delay:0s}
.splash-ring:nth-child(2){width:450px;height:450px;animation-delay:.6s}
.splash-ring:nth-child(3){width:600px;height:600px;animation-delay:1.2s}
@keyframes ringExpand{0%{opacity:.6;transform:scale(.6)}100%{opacity:0;transform:scale(1)}}

/* ════════════════════════════
   LAYOUT WRAPPER
════════════════════════════ */
#app{display:block;position:relative;z-index:1}
#app.show{display:block}

/* ════════════════════════════
   HOME SCREEN
════════════════════════════ */
#homeScreen{max-width:480px;margin:0 auto;padding:0 0 90px;min-height:100vh}

/* Header */
.home-hdr{padding:28px 20px 12px;text-align:center;position:relative}
.home-hdr-row{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:6px}
.hdr-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center}
.hdr-icon svg{width:22px;height:22px;fill:var(--gd)}
.home-bname{font-family:'Cinzel Decorative',serif;font-size:clamp(20px,6vw,26px);font-weight:900;letter-spacing:3px;background:linear-gradient(135deg,var(--gdim) 0%,var(--g) 40%,var(--gl) 60%,var(--g) 80%,var(--gdim) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.home-bsub{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:13px;color:var(--gd);letter-spacing:2px;margin-bottom:8px}
.home-greeting{font-size:clamp(11px,3vw,13px);color:var(--txtd);line-height:1.6}
.home-greeting b{color:var(--fg)}

/* Top bar buttons */
.top-btns{position:absolute;top:28px;right:20px;display:flex;gap:8px}
.top-btn{width:38px;height:38px;border-radius:50%;background:var(--card);border:1px solid var(--bdr);color:var(--fg);font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s}
.top-btn:hover{background:rgba(212,175,55,.1);border-color:rgba(212,175,55,.35)}
.top-btn:active{transform:scale(.93)}
.settings-btn{position:absolute;top:28px;left:20px}

/* Divider */
.div{display:flex;align-items:center;gap:10px;padding:0 24px;margin:12px 0}
.div::before,.div::after{content:'';flex:1;height:1px;background:linear-gradient(to right,transparent,var(--gdim))}
.div::after{background:linear-gradient(to left,transparent,var(--gdim))}

/* Progress Ring Section */
.rsec{text-align:center;padding:4px 20px 20px}
.rw{display:inline-flex;align-items:center;justify-content:center;position:relative;margin-bottom:16px}
.ro{width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,var(--bg3) 60%,var(--bg) 100%);border:1px solid var(--bdr);display:flex;align-items:center;justify-content:center;position:relative;animation:rpulse 3s ease-in-out infinite;box-shadow:0 0 30px var(--shadow),inset 0 0 30px rgba(0,0,0,.5)}
@keyframes rpulse{0%,100%{box-shadow:0 0 30px var(--shadow),inset 0 0 30px rgba(0,0,0,.5)}50%{box-shadow:0 0 55px rgba(212,175,55,.22),inset 0 0 30px rgba(0,0,0,.5)}}
.svgr{position:absolute;top:0;left:0;width:200px;height:200px;transform:rotate(-90deg)}
.rtrack{fill:none;stroke:var(--fg-dim);stroke-width:5}
.rprog{fill:none;stroke:url(#gg);stroke-width:5;stroke-linecap:round;stroke-dasharray:565;stroke-dashoffset:565;transition:stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1);filter:drop-shadow(0 0 5px rgba(212,175,55,.7))}
.odot{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--g);box-shadow:0 0 12px var(--g);top:5px;left:50%;transform:translateX(-50%);transform-origin:0 95px;animation:orbit 4s linear infinite}
@keyframes orbit{to{transform:translateX(-50%) rotate(360deg)}}
.ri{position:relative;z-index:2;text-align:center}
.rnum{font-family:'Cinzel Decorative',serif;font-size:42px;font-weight:900;background:linear-gradient(180deg,var(--gl) 0%,var(--g) 50%,var(--gd) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1;display:block}
.rlbl{font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gd);margin-top:4px;display:block;font-family:'Cormorant Garamond',serif}
.rtot{font-size:9px;color:var(--fgd);display:block;font-family:'Cormorant Garamond',serif;font-style:italic}
.rstats{display:flex;gap:20px;justify-content:center;margin-top:6px}
.rstat-item{text-align:center}
.rsv{font-family:'Cinzel Decorative',serif;font-size:18px;color:var(--fg);display:block}
.rsl{font-size:9px;letter-spacing:2px;color:var(--gd);text-transform:uppercase;font-family:'Cormorant Garamond',serif}
.sbadge{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--bdr);border-radius:40px;padding:7px 18px;margin-top:12px;font-size:12px;color:var(--fgd)}
.sfire{font-size:17px;animation:flk 1.5s ease-in-out infinite}
@keyframes flk{0%,100%{transform:scale(1) rotate(-2deg)}50%{transform:scale(1.15) rotate(2deg)}}

/* LEARN BUTTON — Main CTA */
.learn-cta-wrap{padding:0 20px 8px;text-align:center}
.learn-cta{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;background:linear-gradient(135deg,var(--gdim),var(--g),var(--gl),var(--g),var(--gdim));background-size:300% 100%;color:#000;border:none;border-radius:18px;padding:18px 24px;font-family:'Cinzel Decorative',serif;font-size:13px;font-weight:700;letter-spacing:3px;cursor:pointer;transition:all .4s;position:relative;overflow:hidden;box-shadow:0 8px 32px var(--shadow)}
.learn-cta:hover{background-position:100% 0;box-shadow:0 12px 45px rgba(212,175,55,.4);transform:translateY(-2px)}
.learn-cta:active{transform:scale(.97)}
.learn-cta-shim{position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shim 2.5s infinite}
@keyframes shim{to{left:150%}}
.learn-cta-icon{font-size:20px}

/* Quick Stats Row */
.quick-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 18px;margin-top:4px}
.qs-card{background:var(--card);border:1px solid var(--bdr);border-radius:12px;padding:14px 10px;text-align:center;cursor:pointer;transition:all .3s}
.qs-card:hover{border-color:rgba(212,175,55,.35);background:rgba(212,175,55,.05);transform:translateY(-2px)}
.qs-card:active{transform:scale(.96)}
.qs-val{font-family:'Cinzel Decorative',serif;font-size:18px;color:var(--fg);display:block;margin-bottom:3px}
.qs-lbl{font-size:9px;color:var(--fgd);letter-spacing:1.5px;text-transform:uppercase;font-family:'Cormorant Garamond',serif}

/* Section Title */
.sec-title{font-family:'Cormorant Garamond',serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gd);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.sec-title::after{content:'';flex:1;height:1px;background:linear-gradient(to right,var(--gd),transparent)}
.sec-collapse{margin-left:auto;font-size:16px;color:var(--gd);font-family:sans-serif;line-height:1;flex-shrink:0}
.sec-title:has(.sec-collapse)::after{display:none}

/* Today card */
.tsec{padding:0 18px 4px}
.today-card{background:linear-gradient(135deg,var(--bg3) 0%,var(--bg2) 100%);border:1px solid var(--bdr);border-radius:var(--radius);padding:20px;position:relative;overflow:hidden;cursor:pointer;transition:all .3s}
.today-card:hover{transform:translateY(-2px);box-shadow:0 12px 40px var(--shadow);border-color:rgba(212,175,55,.32)}
.today-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--g),transparent);opacity:.5}
.tc-badge{display:inline-block;background:linear-gradient(135deg,var(--gd),var(--gdim));color:#000;font-family:'Cinzel Decorative',serif;font-size:7px;letter-spacing:2px;padding:3px 10px;border-radius:20px;margin-bottom:8px;font-weight:700}
.tc-emoji{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;background:var(--card);border:1px solid var(--bdr);display:flex;align-items:center;justify-content:center;font-size:17px}
.tc-title{font-family:'Cinzel Decorative',serif;font-size:clamp(12px,4vw,14px);color:var(--fg);margin-bottom:6px;line-height:1.4;padding-right:44px}
.tc-desc{font-size:12px;color:var(--txtd);line-height:1.7;margin-bottom:8px;padding-right:44px}
.tc-dur{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--gd);margin-bottom:14px}
.tc-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:linear-gradient(135deg,var(--gdim),var(--g),var(--gdim));background-size:200% 100%;color:#000;border:none;border-radius:10px;padding:12px;font-family:'Cinzel Decorative',serif;font-size:9px;font-weight:700;letter-spacing:2px;cursor:pointer;transition:all .4s;position:relative;overflow:hidden}
.tc-btn:hover{background-position:100% 0;box-shadow:0 6px 22px var(--shadow)}

/* Day grid - used in Stats page */
.dgrid{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin-top:8px}
.ddot{aspect-ratio:1;border-radius:5px;border:1px solid var(--fg-dim);background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:6px;color:var(--gdim);font-family:'Cinzel Decorative',serif;transition:all .3s}
.ddot.done{background:linear-gradient(135deg,rgba(212,175,55,.2),rgba(212,175,55,.06));border-color:rgba(212,175,55,.4);color:var(--g);box-shadow:0 0 5px rgba(212,175,55,.15)}
.ddot.cur{background:linear-gradient(135deg,rgba(212,175,55,.28),rgba(212,175,55,.1));border-color:var(--g);color:var(--g);animation:dpulse 2s ease-in-out infinite}
@keyframes dpulse{0%,100%{box-shadow:0 0 5px rgba(212,175,55,.25)}50%{box-shadow:0 0 12px rgba(212,175,55,.55)}}
/* Journey - used in Stats page */
.jlist{list-style:none;position:relative;padding-left:20px}
.jlist::before{content:'';position:absolute;left:5px;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,var(--gd),transparent)}
.jitem{position:relative;margin-bottom:12px;animation:fil .5s ease both}
@keyframes fil{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
.jdot{position:absolute;left:-16px;top:5px;width:8px;height:8px;border-radius:50%;background:var(--g);box-shadow:0 0 6px rgba(212,175,55,.5);border:2px solid var(--bg)}
.jcard{background:var(--bg3);border:1px solid var(--bdr);border-radius:10px;padding:10px 12px}
.jtop{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2px}
.jday{font-family:'Cinzel Decorative',serif;font-size:9px;color:var(--fg);letter-spacing:1px}
.jtime{font-size:8px;color:var(--gd);font-family:'Cormorant Garamond',serif;font-style:italic}
.jtxt{font-size:11px;color:var(--txtd);line-height:1.5}

/* Credit footer */
.credit-footer{text-align:center;padding:10px 20px 6px;font-size:10px;color:var(--fg-dim);letter-spacing:1px;font-family:'Cormorant Garamond',serif}
.credit-footer a{color:var(--gd);text-decoration:none}

/* ════════════════════════════
   LEVELS SCREEN — Journey Path (Force Dark)
════════════════════════════ */
/* ════════════════════════════════════════
   LEVELS SCREEN — VIBRANT REDESIGN
════════════════════════════════════════ */
#levelsScreen{
  display:none;position:fixed;inset:0;z-index:400;
  background:linear-gradient(180deg,#0a0c12 0%,#0e1018 40%,#0a0c12 100%);
  overflow-y:auto;scroll-behavior:smooth;
}
#levelsScreen.open{display:block}
.levels-inner{max-width:480px;margin:0 auto;padding:0 0 120px}

/* ── Header ── */
.levels-hdr{
  padding:18px 18px 16px;
  position:sticky;top:0;z-index:10;
  background:rgba(8,9,14,.97);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid rgba(232,197,71,.15);
}
.levels-hdr-top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.levels-title-wrap{flex:1}
.levels-title{
  font-family:'Cinzel Decorative',serif;font-size:18px;letter-spacing:1.5px;
  background:linear-gradient(120deg,#ffffff 0%,#FFE98A 45%,#E8C547 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.levels-subtitle{
  font-size:11.5px;color:#d4a83a;
  font-family:'Noto Sans Devanagari',sans-serif;
  margin-top:4px;opacity:.85;letter-spacing:.5px;
}
#levelsScreen .back-btn{
  background:rgba(232,197,71,.1);border-color:rgba(232,197,71,.3);color:#E8C547;
  font-size:18px;
}

/* Progress bar area */
.levels-prog-row{display:flex;align-items:center;gap:12px}
.levels-prog-bar{
  flex:1;height:8px;background:rgba(255,255,255,.06);
  border-radius:20px;overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.4);
}
.levels-prog-fill{
  height:100%;
  background:linear-gradient(90deg,#7a5e10,#E8C547 60%,#FFF0A0);
  border-radius:20px;
  transition:width .9s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 0 10px rgba(232,197,71,.5),0 0 20px rgba(232,197,71,.2);
}
.levels-prog-pct{
  font-family:'Cinzel Decorative',serif;font-size:11px;
  color:#E8C547;min-width:36px;text-align:right;
  text-shadow:0 0 10px rgba(232,197,71,.4);
}

/* Stats strip below progress */
.levels-stats-strip{
  display:flex;gap:0;margin-top:14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;overflow:hidden;
}
.levels-stat{
  flex:1;padding:8px 6px;text-align:center;
  border-right:1px solid rgba(255,255,255,.06);
}
.levels-stat:last-child{border-right:none}
.levels-stat-val{
  font-family:'Cinzel Decorative',serif;font-size:15px;
  color:#E8C547;line-height:1;
  text-shadow:0 0 12px rgba(232,197,71,.4);
}
.levels-stat-lbl{
  font-size:9px;color:rgba(255,255,255,.35);
  font-family:'Noto Sans Devanagari',sans-serif;
  margin-top:3px;letter-spacing:.3px;
}

/* ── Journey Path container ── */
.levels-grid{
  padding:24px 14px 16px;
  display:flex;flex-direction:column;align-items:center;
  position:relative;gap:0;
}

/* Vertical glowing road */
.levels-grid::before{
  content:'';position:absolute;top:0;bottom:0;left:50%;
  width:3px;transform:translateX(-50%);
  background:linear-gradient(
    to bottom,
    transparent 0%,
    rgba(232,197,71,.06) 3%,
    rgba(232,197,71,.18) 20%,
    rgba(232,197,71,.22) 50%,
    rgba(232,197,71,.18) 80%,
    rgba(232,197,71,.06) 97%,
    transparent 100%
  );
  pointer-events:none;z-index:0;
  filter:blur(0.5px);
}

/* ── Row ── */
.lp-row{
  display:flex;width:100%;align-items:center;
  position:relative;z-index:1;margin-bottom:10px;
}
.lp-row.right{justify-content:flex-end}

/* ── Card — COMPLETELY REDESIGNED ── */
.level-card{
  width:calc(50% - 22px);
  border-radius:20px;
  padding:15px 13px 14px;
  position:relative;cursor:pointer;
  transition:transform .22s cubic-bezier(.4,0,.2,1),box-shadow .22s;
  overflow:hidden;min-height:130px;
}

/* Locked — vibrant, tempting, "I want this" feel */
.level-card.locked{
  background:linear-gradient(145deg,#1a1035 0%,#140d28 50%,#1c1238 100%);
  border:1.5px solid rgba(160,100,255,.35);
  cursor:pointer;
  box-shadow:0 4px 24px rgba(0,0,0,.6),0 0 0 1px rgba(140,80,255,.08),inset 0 1px 0 rgba(180,120,255,.1);
}
/* top glow shimmer */
.level-card.locked::before{
  content:'';position:absolute;top:0;left:0;right:0;height:60%;
  background:linear-gradient(180deg,rgba(160,100,255,.1) 0%,transparent 100%);
  pointer-events:none;border-radius:20px 20px 0 0;
}
/* frosted lock overlay at bottom */
.level-card.locked::after{
  content:'🔒 Unlock करो';
  position:absolute;bottom:0;left:0;right:0;
  padding:7px 0 8px;
  background:linear-gradient(0deg,rgba(20,8,40,.95) 0%,rgba(20,8,40,.7) 70%,transparent 100%);
  color:rgba(180,130,255,.7);
  font-size:8px;font-weight:600;
  font-family:'Noto Sans Devanagari',sans-serif;
  text-align:center;letter-spacing:.5px;
  border-radius:0 0 20px 20px;
}
.level-card.locked:hover{
  transform:translateY(-4px) scale(1.02);
  border-color:rgba(180,120,255,.6);
  box-shadow:0 10px 32px rgba(0,0,0,.7),0 0 24px rgba(150,80,255,.2),inset 0 1px 0 rgba(200,150,255,.15);
}
.level-card.locked:active{transform:scale(.95)}

/* Completed — teal/green tint */
.level-card.completed{
  background:linear-gradient(145deg,#0d1f16 0%,#091510 100%);
  border:1.5px solid rgba(80,220,120,.3);
  box-shadow:0 4px 20px rgba(0,0,0,.5),0 0 0 1px rgba(80,220,120,.08);
}
.level-card.completed:hover{
  transform:translateY(-5px) scale(1.03);
  box-shadow:0 14px 40px rgba(0,0,0,.6),0 0 20px rgba(80,220,120,.15);
  border-color:rgba(80,220,120,.5);
}

/* Current — BRIGHT GOLD, hard to miss */
.level-card.current{
  background:linear-gradient(145deg,#2a2000 0%,#1e1700 60%,#261e00 100%);
  border:2px solid rgba(232,197,71,.75);
  box-shadow:
    0 0 0 1px rgba(232,197,71,.15),
    0 8px 32px rgba(232,197,71,.22),
    0 0 40px rgba(232,197,71,.1);
  animation:lvCardPulse 2.5s ease-in-out infinite;
}
/* "TODAY" ribbon on current */
.level-card.current::after{
  content:'आज पढ़ें';
  position:absolute;top:0;right:0;
  background:linear-gradient(135deg,#E8C547,#c9a227);
  color:#0a0a00;font-size:7.5px;font-weight:700;
  font-family:'Noto Sans Devanagari',sans-serif;
  padding:4px 8px 3px;
  border-radius:0 18px 0 10px;
  letter-spacing:.5px;
  box-shadow:0 2px 8px rgba(232,197,71,.4);
}
@keyframes lvCardPulse{
  0%,100%{box-shadow:0 0 0 1px rgba(232,197,71,.15),0 8px 32px rgba(232,197,71,.18)}
  50%{box-shadow:0 0 0 3px rgba(232,197,71,.25),0 12px 50px rgba(232,197,71,.35),0 0 40px rgba(232,197,71,.15)}
}
.level-card.current:hover{transform:translateY(-5px) scale(1.04)}
.level-card:not(.locked):active{transform:scale(.93)}

/* ── Arm (card → path) ── */
.lp-arm{
  flex:1;height:2px;
  background:linear-gradient(90deg,rgba(232,197,71,.35),rgba(232,197,71,.08));
  border-radius:2px;
}
.lp-row.right .lp-arm{
  background:linear-gradient(90deg,rgba(232,197,71,.08),rgba(232,197,71,.35));
}

/* ── Center node ── */
.lp-node{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;z-index:2;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;
  background:linear-gradient(135deg,#160d2a,#0f0820);
  border:2px solid rgba(150,90,255,.3);
  color:rgba(170,110,255,.6);
  box-shadow:0 0 0 4px rgba(0,0,0,.5),0 0 10px rgba(130,70,255,.1);
}
.lp-node.done-node{
  background:linear-gradient(135deg,#0d2015,#0a1a0f);
  border-color:#50dc78;color:#50dc78;
  box-shadow:0 0 14px rgba(80,220,120,.3),0 0 0 4px rgba(80,220,120,.08);
  font-size:13px;
}
.lp-node.cur-node{
  background:linear-gradient(135deg,#2a2000,#1a1400);
  border-color:#E8C547;color:#E8C547;
  animation:nodeGlow 1.6s ease-in-out infinite;
  font-size:13px;
}
@keyframes nodeGlow{
  0%,100%{box-shadow:0 0 12px rgba(232,197,71,.5),0 0 0 4px rgba(232,197,71,.12)}
  50%{box-shadow:0 0 26px rgba(232,197,71,.8),0 0 0 8px rgba(232,197,71,.22)}
}

/* ── Week milestone ── */
.lp-milestone{
  width:78%;text-align:center;
  margin:10px 0 4px;padding:9px 16px;
  border-radius:24px;
  background:linear-gradient(135deg,rgba(232,197,71,.07),rgba(232,197,71,.03));
  border:1px solid rgba(232,197,71,.2);
  font-family:'Cinzel Decorative',serif;
  font-size:8px;letter-spacing:3.5px;
  color:rgba(232,197,71,.7);
  position:relative;z-index:1;
  box-shadow:0 0 20px rgba(232,197,71,.05);
}

/* ── Card internals ── */
.lc-day{
  font-family:'Cinzel Decorative',serif;font-size:7.5px;
  letter-spacing:3px;color:#a07820;
  margin-bottom:8px;
  text-transform:uppercase;
}
.level-card.current .lc-day{color:#E8C547;text-shadow:0 0 8px rgba(232,197,71,.4)}
.level-card.completed .lc-day{color:#50dc78;opacity:.8}
.level-card.locked .lc-day{color:rgba(160,110,255,.55);}
.lc-emoji{display:none}

.lc-icon{
  width:44px;height:44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:10px;
  transition:transform .2s;
}
/* Locked icon */
.level-card.locked .lc-icon{
  background:linear-gradient(135deg,rgba(160,100,255,.15),rgba(120,60,220,.06));
  border:1px solid rgba(160,100,255,.3);
  box-shadow:0 0 14px rgba(140,80,255,.15);
}
/* Completed icon */
.level-card.completed .lc-icon{
  background:linear-gradient(135deg,rgba(80,220,120,.12),rgba(80,220,120,.04));
  border:1px solid rgba(80,220,120,.25);
  box-shadow:0 0 12px rgba(80,220,120,.1);
}
/* Current icon */
.level-card.current .lc-icon{
  background:linear-gradient(135deg,rgba(232,197,71,.2),rgba(232,197,71,.06));
  border:1.5px solid rgba(232,197,71,.5);
  box-shadow:0 0 18px rgba(232,197,71,.2),inset 0 1px 0 rgba(232,197,71,.25);
  animation:iconPop 2.5s ease-in-out infinite;
}
@keyframes iconPop{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.06)}
}
.level-card.locked .lc-icon svg{stroke:rgba(180,130,255,.75);width:20px;height:20px;stroke-width:1.5;fill:none}
.level-card.completed .lc-icon svg{stroke:#50dc78;width:20px;height:20px;stroke-width:1.5;fill:none}
.level-card.current .lc-icon svg{stroke:#E8C547;width:20px;height:20px;stroke-width:1.5;fill:none;filter:drop-shadow(0 0 4px rgba(232,197,71,.5))}

.lc-title{
  font-family:'Noto Sans Devanagari',sans-serif;font-size:10.5px;font-weight:600;
  color:rgba(238,232,213,.85);line-height:1.5;
  margin-bottom:6px;letter-spacing:.1px;
}
.level-card.current .lc-title{color:#ffffff;text-shadow:0 1px 8px rgba(255,255,255,.15)}
.level-card.locked .lc-title{color:rgba(200,170,255,.65);font-weight:500}
.level-card.completed .lc-title{color:rgba(200,245,210,.8)}

.lc-dur{
  font-size:9.5px;color:rgba(255,255,255,.25);
  font-family:'Noto Sans Devanagari',sans-serif;
  display:flex;align-items:center;gap:4px;
}
.level-card.current .lc-dur{color:rgba(232,197,71,.5)}
.level-card.completed .lc-dur{color:rgba(80,220,120,.4)}
.level-card.locked .lc-dur{color:rgba(160,120,255,.4)}

/* Status badge */
.lc-status{
  position:absolute;top:12px;right:12px;
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:10px;
}
.lc-status.done{
  background:linear-gradient(135deg,rgba(80,220,120,.18),rgba(80,220,120,.06));
  border:1.5px solid rgba(80,220,120,.5);
  box-shadow:0 0 10px rgba(80,220,120,.2);
}
.lc-status.done svg{stroke:#50dc78;width:12px;height:12px;stroke-width:2.5}
.lc-status.cur{
  background:rgba(232,197,71,.18);border:1.5px solid rgba(232,197,71,.7);
  color:#E8C547;font-size:11px;
  animation:badgePop 1.4s ease-in-out infinite;
  box-shadow:0 0 12px rgba(232,197,71,.3);
}
@keyframes badgePop{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.lc-status.lock{
  background:rgba(140,80,255,.1);
  border:1px solid rgba(160,100,255,.3);
}
.lc-status.lock svg{stroke:rgba(170,120,255,.65);width:11px;height:11px}

/* Stars */
.lc-stars{display:flex;gap:3px;margin-top:8px}
.lc-star{font-size:11px;color:rgba(255,255,255,.08);line-height:1}
.lc-star.lit{color:#E8C547;filter:drop-shadow(0 0 5px rgba(232,197,71,.7))}

/* Coming soon */
.lv-coming{
  width:70%;text-align:center;margin:16px 0;padding:22px 18px;
  color:rgba(232,197,71,.35);
  font-family:'Noto Sans Devanagari',sans-serif;font-size:12px;
  border:1px dashed rgba(232,197,71,.15);border-radius:18px;
  position:relative;z-index:1;
  background:rgba(232,197,71,.02);
}

/* ════════════════════════════
   LESSON SCREEN
════════════════════════════ */
#lessonScreen{display:none;position:fixed;inset:0;z-index:500;background:var(--bg);overflow-y:auto}
#lessonScreen.open{display:block}
.lscreen-inner{max-width:480px;margin:0 auto;padding:0 0 160px}
.lhdr{background:var(--bg2);padding:20px 18px 14px;position:sticky;top:0;z-index:10;border-bottom:1px solid var(--bdr)}
.lhdr-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.back-btn{background:var(--card);border:1px solid var(--bdr);color:var(--fg);width:36px;height:36px;border-radius:50%;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s;flex-shrink:0}
.back-btn:hover{background:rgba(212,175,55,.14)}
.lhdr-badge{background:linear-gradient(135deg,var(--gd),var(--gdim));color:#000;font-family:'Cinzel Decorative',serif;font-size:8px;letter-spacing:2px;padding:3px 12px;border-radius:20px;font-weight:700}
.lhdr-timer{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--gd);font-family:'Cormorant Garamond',serif}
.tdot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:tblink 1s ease-in-out infinite;flex-shrink:0}
@keyframes tblink{0%,100%{opacity:1}50%{opacity:.3}}
.lpbar{height:5px;background:rgba(212,175,55,.1);border-radius:4px;overflow:hidden}
.lpbar-fill{height:100%;background:linear-gradient(90deg,var(--gdim),var(--g),var(--gl));border-radius:4px;transition:width .6s cubic-bezier(.34,1.56,.64,1);width:0%;box-shadow:0 0 10px rgba(232,197,71,.45)}
.ltop{padding:18px 18px 0;text-align:center}
.ltop-emoji{font-size:38px;display:block;margin-bottom:8px}
.ltop-title{font-family:'Cinzel Decorative',serif;font-size:clamp(15px,5vw,19px);color:var(--fg);line-height:1.35;margin-bottom:5px}
.ltop-sub{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:13px;color:var(--gd)}

/* Lesson content sections */
.lsec{margin:14px 18px 0;background:var(--card);border:1px solid var(--bdr);border-radius:16px;padding:18px;display:none}
.lsec.active{display:block;animation:secIn .45s cubic-bezier(.22,1,.36,1) both;box-shadow:0 4px 24px rgba(212,175,55,.06),0 1px 0 rgba(212,175,55,.08) inset}
@keyframes secIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.lsec-hdr{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid rgba(212,175,55,.08)}
.lsec-num{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--gd),var(--gdim));color:#000;font-family:'Cinzel Decorative',serif;font-size:10px;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;box-shadow:0 2px 10px rgba(212,175,55,.3)}
.lsec-title{font-family:'Cinzel Decorative',serif;font-size:11px;letter-spacing:2px;color:var(--fg);text-transform:uppercase;line-height:1.4}
.lsec p{font-size:13.5px;color:var(--txt);line-height:2;margin-bottom:13px}
.lsec p:last-child{margin-bottom:0}
.lsec p b,.lsec p strong{color:var(--fg)}
.lsec h4{font-family:'Cinzel Decorative',serif;font-size:11px;color:var(--fg);letter-spacing:1px;margin:16px 0 10px;padding-left:10px;border-left:2px solid var(--g)}

/* Content blocks */
.qbox{background:linear-gradient(135deg,rgba(212,175,55,.09),rgba(212,175,55,.02));border:1px solid rgba(212,175,55,.22);border-left:3px solid var(--g);border-radius:0 12px 12px 0;padding:15px 18px;margin:14px 0;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:15px;color:rgba(232,197,71,.9);line-height:1.75;position:relative}
.qbox::before{content:'\201C';position:absolute;top:-4px;left:14px;font-size:32px;color:rgba(212,175,55,.15);font-family:'Cormorant Garamond',serif;line-height:1}
.keylist{list-style:none;margin:12px 0}
.keylist li{font-size:13.5px;color:var(--txt);padding:10px 0;border-bottom:1px solid rgba(212,175,55,.07);display:flex;align-items:flex-start;gap:12px;line-height:1.8}
.keylist li::before{content:'◆';font-size:7px;color:var(--g);flex-shrink:0;margin-top:6px}
.keylist li:last-child{border-bottom:none}
.keylist li b{color:var(--fg)}
.story-box{background:linear-gradient(135deg,var(--bg3),var(--bg4));border-radius:14px;padding:16px;margin:14px 0;border:1px solid rgba(212,175,55,.14);position:relative;overflow:hidden}
.story-label{font-family:'Cinzel Decorative',serif;font-size:7.5px;letter-spacing:2.5px;color:var(--gd);text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.story-label::before{content:'';width:14px;height:1px;background:var(--gd);display:inline-block}
.story-box p{font-size:13.5px;color:var(--txt);line-height:1.9}
.hbox{background:linear-gradient(135deg,rgba(212,175,55,.12),rgba(212,175,55,.04));border:1px solid rgba(212,175,55,.28);border-radius:12px;padding:16px;margin:14px 0;text-align:center}
.hbox .hv{font-family:'Cinzel Decorative',serif;font-size:26px;color:var(--fg);display:block;margin-bottom:5px;text-shadow:0 0 20px rgba(212,175,55,.25)}
.hbox .hl{font-size:11.5px;color:var(--gd);letter-spacing:1px;line-height:1.5}
.reflect-box{background:linear-gradient(135deg,rgba(100,149,237,.07),rgba(100,149,237,.02));border:1px solid rgba(100,149,237,.22);border-left:3px solid #6495ed;border-radius:0 12px 12px 0;padding:14px 16px;margin:14px 0}
.reflect-label{font-family:'Cinzel Decorative',serif;font-size:7.5px;letter-spacing:2.5px;color:#6495ed;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.reflect-label::before{content:'';width:14px;height:1px;background:#6495ed;display:inline-block}
.reflect-box p{font-size:13.5px;color:var(--txt);line-height:1.85}
.action-box{background:linear-gradient(135deg,rgba(76,175,80,.07),rgba(76,175,80,.02));border:1px solid rgba(76,175,80,.22);border-left:3px solid var(--green);border-radius:0 12px 12px 0;padding:14px 16px;margin:14px 0}
.action-label{font-family:'Cinzel Decorative',serif;font-size:7.5px;letter-spacing:2.5px;color:var(--green);text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.action-label::before{content:'';width:14px;height:1px;background:var(--green);display:inline-block}
.action-box p{font-size:13.5px;color:var(--txt);line-height:1.85}
.tip-box{background:linear-gradient(135deg,rgba(255,170,0,.07),rgba(255,170,0,.02));border:1px solid rgba(255,170,0,.22);border-left:3px solid #ffaa00;border-radius:0 12px 12px 0;padding:14px 16px;margin:14px 0}
.tip-label{font-family:'Cinzel Decorative',serif;font-size:7.5px;letter-spacing:2.5px;color:#ffaa00;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.tip-label::before{content:'';width:14px;height:1px;background:#ffaa00;display:inline-block}
.tip-box p{font-size:13.5px;color:var(--txt);line-height:1.85}
/* NEW — Science/Research box */
.science-box{background:linear-gradient(135deg,rgba(20,184,166,.07),rgba(20,184,166,.02));border:1px solid rgba(20,184,166,.22);border-left:3px solid #14b8a6;border-radius:0 12px 12px 0;padding:14px 16px;margin:14px 0}
.science-label{font-family:'Cinzel Decorative',serif;font-size:7.5px;letter-spacing:2.5px;color:#14b8a6;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.science-label::before{content:'';width:14px;height:1px;background:#14b8a6;display:inline-block}
.science-box p{font-size:13.5px;color:var(--txt);line-height:1.85}
/* NEW — Myth/Warning box */
.myth-box{background:linear-gradient(135deg,rgba(248,81,73,.06),rgba(248,81,73,.01));border:1px solid rgba(248,81,73,.2);border-left:3px solid #f85149;border-radius:0 12px 12px 0;padding:14px 16px;margin:14px 0}
.myth-label{font-family:'Cinzel Decorative',serif;font-size:7.5px;letter-spacing:2.5px;color:#f85149;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.myth-label::before{content:'';width:14px;height:1px;background:#f85149;display:inline-block}
.myth-box p{font-size:13.5px;color:var(--txt);line-height:1.85}
/* NEW — Interactive journal prompt */
.journal-prompt{background:var(--bg2);border:1px dashed rgba(212,175,55,.28);border-radius:12px;padding:14px 16px;margin:14px 0}
.journal-q{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:14px;color:var(--fg);line-height:1.7;margin-bottom:10px}
.journal-input{width:100%;background:var(--bg3);border:1px solid rgba(212,175,55,.18);border-radius:8px;padding:10px 12px;font-size:13px;color:var(--txt);font-family:'Noto Sans Devanagari',sans-serif;resize:none;min-height:72px;box-sizing:border-box;line-height:1.7;outline:none;transition:border-color .2s}
.journal-input:focus{border-color:rgba(212,175,55,.45)}
.journal-save{margin-top:8px;background:none;border:1px solid rgba(212,175,55,.28);color:var(--gd);border-radius:8px;padding:7px 16px;font-family:'Cinzel Decorative',serif;font-size:8px;letter-spacing:1px;cursor:pointer;transition:.2s}
.journal-save:hover{background:rgba(212,175,55,.08)}
body.light .journal-input{background:var(--bg3);color:var(--txt)}

/* ═══════════════════════════════════════
   🎮 GAMIFIED LESSON WIDGETS CSS
═══════════════════════════════════════ */

/* ── Tap-to-Reveal Card ── */
.mx-reveal-card{
  background:linear-gradient(135deg,rgba(232,197,71,.08),rgba(232,197,71,.02));
  border:1.5px dashed rgba(232,197,71,.35);
  border-radius:16px;padding:18px;margin:14px 0;
  cursor:pointer;transition:all .25s;position:relative;overflow:hidden;
  text-align:center;
}
.mx-reveal-card:active{transform:scale(.97);}
.mx-reveal-card .mx-reveal-hint{
  font-family:'Cinzel Decorative',serif;font-size:9px;
  color:rgba(232,197,71,.6);letter-spacing:2px;margin-bottom:8px;
}
.mx-reveal-card .mx-reveal-icon{font-size:36px;margin-bottom:10px;display:block;}
.mx-reveal-card .mx-reveal-q{
  font-family:'Cormorant Garamond',serif;font-size:15px;
  color:var(--fg);line-height:1.6;font-style:italic;
}
.mx-reveal-card .mx-reveal-ans{
  display:none;margin-top:14px;
  background:rgba(0,0,0,.3);border-radius:12px;padding:14px;
  font-size:13.5px;color:var(--txt);line-height:1.8;text-align:left;
  border-left:3px solid #E8C547;
}
.mx-reveal-card.revealed .mx-reveal-ans{display:block;}
.mx-reveal-card.revealed{
  border-style:solid;border-color:rgba(232,197,71,.5);
  background:linear-gradient(135deg,rgba(232,197,71,.12),rgba(232,197,71,.04));
  cursor:default;
}
.mx-reveal-card .mx-reveal-tap{
  font-size:10px;color:rgba(232,197,71,.5);margin-top:8px;
  font-family:'Cormorant Garamond',serif;
  animation:revealPulse 2s ease-in-out infinite;
}
.mx-reveal-card.revealed .mx-reveal-tap{display:none;}
@keyframes revealPulse{0%,100%{opacity:.5}50%{opacity:1}}

/* ── Emoji Poll / Reaction Vote ── */
.mx-poll{
  background:rgba(255,255,255,.03);border:1px solid var(--bdr);
  border-radius:16px;padding:16px;margin:14px 0;
}
.mx-poll-q{
  font-family:'Cormorant Garamond',serif;font-size:14px;
  color:var(--fg);line-height:1.6;margin-bottom:14px;font-weight:600;
}
.mx-poll-opts{display:flex;flex-wrap:wrap;gap:8px;}
.mx-poll-opt{
  flex:1;min-width:calc(50% - 4px);
  background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.1);
  border-radius:14px;padding:12px 8px;text-align:center;cursor:pointer;
  transition:all .2s;font-size:13px;color:var(--txt);
  font-family:'Noto Sans Devanagari',sans-serif;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  user-select:none;-webkit-user-select:none;
}
.mx-poll-opt:active{transform:scale(.95);}
.mx-poll-opt .mx-poll-emoji{font-size:24px;display:block;margin-bottom:4px;}
.mx-poll-opt.selected{
  background:rgba(232,197,71,.15);
  border-color:rgba(232,197,71,.5);color:var(--fg);
  transform:scale(1.03);
}
.mx-poll-opt.correct-pick{
  background:rgba(74,222,128,.15);border-color:rgba(74,222,128,.5);color:#4ade80;
}
.mx-poll-opt.wrong-pick{
  background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.4);color:#f87171;
}
.mx-poll-feedback{
  margin-top:12px;padding:12px;border-radius:10px;font-size:12.5px;
  color:var(--txt);line-height:1.65;display:none;
  font-family:'Cormorant Garamond',serif;
}
.mx-poll-feedback.show{display:block;}
.mx-poll-feedback.good{background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.25);}
.mx-poll-feedback.info{background:rgba(232,197,71,.08);border:1px solid rgba(232,197,71,.2);}

/* ── Brain Meter (sliding scale) ── */
.mx-meter{
  background:rgba(255,255,255,.03);border:1px solid var(--bdr);
  border-radius:16px;padding:16px;margin:14px 0;
}
.mx-meter-q{
  font-size:14px;color:var(--fg);line-height:1.6;margin-bottom:16px;
  font-family:'Cormorant Garamond',serif;font-weight:600;
}
.mx-meter-track{
  height:6px;background:rgba(255,255,255,.1);border-radius:6px;
  position:relative;margin-bottom:8px;
}
.mx-meter-fill{
  height:100%;border-radius:6px;
  background:linear-gradient(90deg,#6495ed,#E8C547,#4ade80);
  width:50%;transition:width .3s;
}
.mx-meter input[type=range]{
  width:100%;-webkit-appearance:none;background:transparent;
  height:22px;cursor:pointer;margin:0;
}
.mx-meter input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;
  border-radius:50%;background:linear-gradient(135deg,#E8C547,#c9a227);
  border:2px solid #fff;box-shadow:0 2px 8px rgba(232,197,71,.4);
  cursor:pointer;
}
.mx-meter input[type=range]::-webkit-slider-runnable-track{
  height:6px;background:rgba(255,255,255,.1);border-radius:6px;
}
.mx-meter-labels{display:flex;justify-content:space-between;font-size:10px;color:var(--fgd);margin-top:4px;font-family:'Cormorant Garamond',serif;}
.mx-meter-val{text-align:center;font-family:'Cinzel Decorative',serif;font-size:20px;color:#E8C547;margin:10px 0 4px;}
.mx-meter-submit{
  width:100%;margin-top:10px;
  background:linear-gradient(135deg,rgba(232,197,71,.15),rgba(232,197,71,.05));
  border:1px solid rgba(232,197,71,.3);color:var(--fg);
  border-radius:12px;padding:11px;font-family:'Cinzel Decorative',serif;
  font-size:9px;letter-spacing:1.5px;cursor:pointer;transition:.2s;
}
.mx-meter-submit:hover{background:rgba(232,197,71,.2);}
.mx-meter-result{
  margin-top:12px;padding:12px;background:rgba(232,197,71,.07);
  border-radius:10px;font-size:13px;color:var(--txt);
  line-height:1.7;display:none;font-family:'Cormorant Garamond',serif;
  border:1px solid rgba(232,197,71,.2);
}
.mx-meter-result.show{display:block;}

/* ── Flip Cards (term & definition) ── */
.mx-flip-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0;}
.mx-flip-wrap{perspective:600px;height:100px;}
.mx-flip-inner{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;transition:transform .5s cubic-bezier(.4,0,.2,1);
  cursor:pointer;
}
.mx-flip-wrap.flipped .mx-flip-inner{transform:rotateY(180deg);}
.mx-flip-front,.mx-flip-back{
  position:absolute;inset:0;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  padding:12px;text-align:center;backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.mx-flip-front{
  background:linear-gradient(135deg,var(--bg3),var(--bg4));
  border:1.5px solid rgba(232,197,71,.2);
  font-family:'Cinzel Decorative',serif;font-size:10px;
  color:var(--fg);letter-spacing:.5px;
}
.mx-flip-back{
  background:linear-gradient(135deg,rgba(232,197,71,.15),rgba(232,197,71,.05));
  border:1.5px solid rgba(232,197,71,.4);
  transform:rotateY(180deg);
  font-size:12px;color:var(--txt);
  font-family:'Cormorant Garamond',serif;line-height:1.5;
}
.mx-flip-hint{
  text-align:center;font-size:10px;color:var(--fgd);
  font-family:'Cormorant Garamond',serif;margin-bottom:6px;
}

/* ── Drag-and-drop Sort (touch-friendly tap-to-sort) ── */
.mx-sort{margin:14px 0;}
.mx-sort-q{font-size:14px;color:var(--fg);margin-bottom:12px;font-family:'Cormorant Garamond',serif;font-weight:600;line-height:1.6;}
.mx-sort-list{display:flex;flex-direction:column;gap:8px;}
.mx-sort-item{
  background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.1);
  border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:10px;
  cursor:pointer;transition:all .2s;
  font-size:13px;color:var(--txt);font-family:'Noto Sans Devanagari',sans-serif;
}
.mx-sort-item.selected-sort{
  border-color:rgba(232,197,71,.5);background:rgba(232,197,71,.1);color:var(--fg);
  transform:scale(1.02);
}
.mx-sort-item.placed{
  border-color:rgba(74,222,128,.4);background:rgba(74,222,128,.08);color:#4ade80;
  pointer-events:none;
}
.mx-sort-num{
  width:24px;height:24px;border-radius:50%;
  background:rgba(255,255,255,.08);display:flex;align-items:center;
  justify-content:center;font-size:11px;color:var(--fgd);flex-shrink:0;
  font-family:'Cinzel Decorative',serif;
}
.mx-sort-check-btn{
  width:100%;margin-top:10px;
  background:linear-gradient(135deg,#4ade80,#22c55e);
  border:none;border-radius:12px;padding:12px;color:#000;
  font-family:'Cinzel Decorative',serif;font-size:9px;letter-spacing:1.5px;
  cursor:pointer;transition:.2s;display:none;
}
.mx-sort-check-btn.show{display:block;}
.mx-sort-result{
  margin-top:10px;padding:12px;border-radius:10px;font-size:13px;
  color:var(--txt);line-height:1.7;display:none;
  font-family:'Cormorant Garamond',serif;
}
.mx-sort-result.show{display:block;}
.mx-sort-result.good{background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.25);}
.mx-sort-result.bad{background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.25);}

/* ── Scenario Choice (story branch) ── */
.mx-scenario{
  background:linear-gradient(135deg,var(--bg3),var(--bg4));
  border:1px solid rgba(232,197,71,.18);border-radius:16px;padding:18px;margin:14px 0;
}
.mx-scenario-label{
  font-family:'Cinzel Decorative',serif;font-size:8px;
  color:var(--gd);letter-spacing:2px;margin-bottom:10px;
  display:flex;align-items:center;gap:6px;
}
.mx-scenario-label::before{content:'';width:14px;height:1px;background:var(--gd);}
.mx-scenario-story{
  font-size:13.5px;color:var(--txt);line-height:1.85;margin-bottom:14px;
  font-family:'Cormorant Garamond',serif;
  background:rgba(0,0,0,.2);border-radius:10px;padding:12px;
  border-left:3px solid rgba(232,197,71,.3);
}
.mx-scenario-choose{font-size:11px;color:var(--fgd);margin-bottom:10px;font-family:'Cormorant Garamond',serif;}
.mx-scenario-opts{display:flex;flex-direction:column;gap:8px;}
.mx-scenario-btn{
  background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.1);
  border-radius:12px;padding:13px 14px;font-size:13px;color:var(--txt);
  cursor:pointer;text-align:left;transition:all .2s;width:100%;
  font-family:'Noto Sans Devanagari',sans-serif;line-height:1.5;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.mx-scenario-btn:active{transform:scale(.97);}
.mx-scenario-btn.chosen-right{background:rgba(74,222,128,.12);border-color:rgba(74,222,128,.5);color:#4ade80;}
.mx-scenario-btn.chosen-wrong{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.4);color:#f87171;}
.mx-scenario-btn.show-right{background:rgba(74,222,128,.06);border-color:rgba(74,222,128,.3);color:#4ade80;}
.mx-scenario-result{
  margin-top:12px;padding:12px;border-radius:10px;display:none;
  font-size:13px;color:var(--txt);line-height:1.7;
  font-family:'Cormorant Garamond',serif;
}
.mx-scenario-result.show{display:block;}
.mx-scenario-result.good{background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.25);}
.mx-scenario-result.meh{background:rgba(232,197,71,.08);border:1px solid rgba(232,197,71,.2);}

/* ── XP Badge pop on widget complete ── */
.mx-widget-xp{
  display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(135deg,rgba(232,197,71,.2),rgba(232,197,71,.05));
  border:1px solid rgba(232,197,71,.35);border-radius:20px;
  padding:4px 12px;font-family:'Cinzel Decorative',serif;
  font-size:9px;color:#E8C547;letter-spacing:1px;margin-top:8px;
  animation:xpBadgePop .4s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes xpBadgePop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}

/* ── Progress dots for section widgets ── */
.mx-widget-label{
  font-family:'Cinzel Decorative',serif;font-size:8px;
  color:var(--gd);letter-spacing:2px;margin-bottom:10px;
  display:flex;align-items:center;gap:6px;text-transform:uppercase;
}
.mx-widget-label::before{content:'';width:14px;height:1px;background:var(--gd);}

/* Section nav */
.sec-nav{display:none;gap:10px;align-items:center;padding:12px 16px 22px;position:fixed;bottom:0;left:0;right:0;background:rgba(5,5,5,.97);backdrop-filter:blur(20px);border-top:1px solid var(--bdr);z-index:9999}.sec-nav.active{display:flex}
body.light .sec-nav{background:rgba(255,248,237,.97)}
.sec-prev{flex:1;background:var(--card);border:1px solid var(--bdr);color:var(--fg);border-radius:12px;padding:13px 10px;font-family:'Cinzel Decorative',serif;font-size:9px;letter-spacing:1px;cursor:pointer;transition:all .25s}
.sec-prev:hover:not(:disabled){background:rgba(212,175,55,.1);border-color:rgba(212,175,55,.35)}
.sec-next{flex:2;background:linear-gradient(135deg,var(--gdim),var(--g),var(--gdim));background-size:200% 100%;color:#000;border:none;border-radius:12px;padding:13px 10px;font-family:'Cinzel Decorative',serif;font-size:9px;letter-spacing:1px;cursor:pointer;transition:all .4s;position:relative;overflow:hidden;font-weight:700}
.sec-next:hover:not(:disabled){box-shadow:0 6px 22px rgba(212,175,55,.4);background-position:100% 0}
.sec-next:disabled,.sec-prev:disabled{opacity:.3;cursor:default}
.sec-mid{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0}
.sec-counter{font-family:'Cinzel Decorative',serif;font-size:8px;color:var(--gd);letter-spacing:1px;white-space:nowrap}
.sec-dots{display:flex;gap:3px;align-items:center}
.sec-dot{height:5px;border-radius:3px;transition:all .3s;background:rgba(212,175,55,.18)}
.sec-dot.done{background:rgba(212,175,55,.45)}
.sec-dot.active{background:var(--g);box-shadow:0 0 6px rgba(212,175,55,.5)}

/* Quiz */
.qnum-lbl{font-size:9px;letter-spacing:2px;color:var(--gd);font-family:'Cormorant Garamond',serif;margin-bottom:6px}
.qtext{font-size:14px;color:var(--fg);line-height:1.6;margin-bottom:14px;font-weight:600}
.qopts{display:flex;flex-direction:column;gap:8px}
.qopt{background:var(--card);border:1px solid var(--bdr);border-radius:10px;padding:12px 14px;font-size:13px;color:var(--txt);cursor:pointer;transition:all .3s;text-align:left;width:100%;font-family:'Noto Sans Devanagari',sans-serif}
.qopt:hover:not(:disabled){background:rgba(212,175,55,.08);border-color:rgba(212,175,55,.28);color:var(--fg)}
.qopt.correct{background:rgba(76,175,80,.1)!important;border-color:#4CAF50!important;color:#7bc97e!important}
.qopt.wrong{background:rgba(248,81,73,.08)!important;border-color:#f85149!important;color:#f85149!important}
.qfb{margin-top:12px;padding:12px 14px;border-radius:10px;font-size:12px;line-height:1.6;display:none}
.qfb.show{display:block}
.qfb.good{background:rgba(76,175,80,.07);border:1px solid rgba(76,175,80,.28);color:#7bc97e}
.qfb.bad{background:rgba(248,81,73,.07);border:1px solid rgba(248,81,73,.28);color:#f85149}
.q-next-btn{margin-top:12px;background:linear-gradient(135deg,var(--gd),var(--g));color:#000;border:none;border-radius:8px;padding:10px 20px;font-family:'Cinzel Decorative',serif;font-size:9px;letter-spacing:1px;cursor:pointer;display:none;transition:all .3s}
.q-next-btn.show{display:inline-block}
.quiz-score{text-align:center;padding:18px 0;display:none}
.quiz-score.show{display:block}
.qs-circle{width:85px;height:85px;border-radius:50%;background:linear-gradient(135deg,rgba(212,175,55,.15),rgba(212,175,55,.04));border:2px solid var(--g);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;box-shadow:0 0 20px var(--shadow)}
.qs-val{font-family:'Cinzel Decorative',serif;font-size:20px;color:var(--fg)}
.qs-msg{font-size:14px;color:var(--txt);line-height:1.6;margin-bottom:4px}
.comp-btn-wrap{padding:0 18px}
.comp-btn{width:100%;background:linear-gradient(135deg,var(--gdim),var(--g),var(--gdim));background-size:200% 100%;color:#000;border:none;border-radius:14px;padding:16px;font-family:'Cinzel Decorative',serif;font-size:11px;font-weight:700;letter-spacing:2px;cursor:pointer;margin-top:18px;transition:all .4s;display:none}
.comp-btn.show{display:block}
.comp-btn:hover{box-shadow:0 8px 28px var(--shadow);background-position:100% 0}
/* Share Card */
.share-card-wrap{display:none;margin:16px 18px 0;text-align:center}
.share-card-wrap.show{display:block}
.share-card{background:linear-gradient(135deg,#0a0a0a 0%,#111 40%,#0d0d0d 100%);border:1px solid rgba(212,175,55,.4);border-radius:16px;padding:22px 20px 18px;position:relative;overflow:hidden}
.share-card::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at top,rgba(212,175,55,.07) 0%,transparent 60%);pointer-events:none}
.share-card-logo{font-family:'Cinzel Decorative',serif;font-size:16px;color:#E8C547;letter-spacing:2px;margin-bottom:4px}
.share-card-tag{font-size:10px;color:#666;letter-spacing:1px;margin-bottom:14px;font-family:'Cormorant Garamond',serif}
.share-card-day{font-family:'Cinzel Decorative',serif;font-size:11px;color:#888;letter-spacing:1.5px;margin-bottom:6px}
.share-card-title{font-family:'Cormorant Garamond',serif;font-size:15px;color:var(--fg);margin-bottom:14px;line-height:1.4}
.share-card-score{display:inline-flex;align-items:center;gap:8px;background:rgba(212,175,55,.1);border:1px solid rgba(212,175,55,.3);border-radius:10px;padding:8px 18px;margin-bottom:12px}
.share-card-score-num{font-family:'Cinzel Decorative',serif;font-size:22px;color:#E8C547}
.share-card-score-label{font-size:11px;color:#888;font-family:'Cormorant Garamond',serif}
.share-card-streak{font-size:12px;color:#E8C547;margin-bottom:4px;font-family:'Cormorant Garamond',serif}
.share-card-footer{font-size:10px;color:#444;margin-top:10px;font-family:'Cormorant Garamond',serif;letter-spacing:.5px}
.share-btn-row{display:flex;gap:8px;margin-top:12px}
.share-btn{flex:1;padding:10px 6px;border-radius:10px;font-size:11px;font-family:'Cinzel Decorative',serif;letter-spacing:.5px;cursor:pointer;border:none;transition:.2s}
.share-btn-wa{background:rgba(37,211,102,.15);border:1px solid rgba(37,211,102,.35)!important;color:#25d366}
.share-btn-copy{background:rgba(212,175,55,.1);border:1px solid rgba(212,175,55,.3)!important;color:#E8C547}

/* Celebration */
.burst{position:fixed;inset:0;z-index:2000;pointer-events:none;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}
.burst.on{opacity:1}
.bring{width:150px;height:150px;border-radius:50%;border:3px solid var(--g);position:absolute}
.burst.on .bring{animation:bexp .8s ease-out forwards}
@keyframes bexp{from{transform:scale(0);opacity:1}to{transform:scale(4);opacity:0}}
.btxt{font-family:'Cinzel Decorative',serif;font-size:clamp(18px,5vw,24px);color:var(--fg);text-shadow:0 0 28px rgba(212,175,55,.8);text-align:center;position:relative;z-index:1;opacity:0}
.burst.on .btxt{animation:bta .9s .2s ease forwards}
@keyframes bta{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}

/* Toast */
.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(16px);background:linear-gradient(135deg,#1a1200,#0d0d0d);border:1px solid rgba(212,175,55,.3);color:var(--fg);padding:11px 22px;border-radius:40px;font-size:12px;z-index:3000;opacity:0;transition:all .4s;white-space:nowrap;max-width:90vw;text-align:center;pointer-events:none}
body.light .toast,body.theme-light .toast,body.theme-arctic .toast,body.theme-sakura .toast,body.theme-parchment .toast{background:linear-gradient(135deg,#fff3d6,#fff8ed);color:var(--fg)}
body.theme-amoled .toast{background:#111;border-color:rgba(255,255,255,.15)}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* Mood picker */
.mood-pick-btn{background:var(--card);border:1.5px solid var(--bdr);border-radius:12px;font-size:22px;width:38px;height:38px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;flex:1}.mood-pick-btn svg{pointer-events:none}.mood-pick-btn:hover,.mood-pick-btn.selected{background:var(--glow);border-color:var(--g);transform:scale(1.15);opacity:1}
.mood-pick-btn:hover,.mood-pick-btn.selected{background:var(--glow);border-color:var(--g);transform:scale(1.15)}
.mood-pick-btn:active{transform:scale(.95)}

/* Quick theme pill active dot */
#quickThemePill button.qtp-active{outline:3px solid var(--fg);outline-offset:2px}

/* ── SELF ASSESSMENT SLIDERS ── */
.assess-slider{-webkit-appearance:none;width:100%;height:3px;border-radius:2px;background:var(--fg-dim);outline:none;cursor:pointer}
.assess-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--g),var(--gd));cursor:pointer;box-shadow:0 0 8px var(--shadow);transition:.2s}
.assess-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}

/* ── HABIT TRACKER ── */
.habit-item{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--bdr);transition:.2s}
.habit-item:last-child{border-bottom:none}
.habit-check{width:26px;height:26px;border-radius:8px;border:2px solid var(--bdr);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:.2s;flex-shrink:0}
.habit-check.done{background:linear-gradient(135deg,var(--g),var(--gd));border-color:transparent}
.habit-name{flex:1;font-size:13px;color:var(--txt);font-family:'Cormorant Garamond',serif}
.habit-streak{font-size:10px;color:var(--gd);font-family:'Cinzel Decorative',serif}
.habit-del{background:none;border:none;color:var(--fgd);font-size:14px;cursor:pointer;opacity:.5;transition:.2s;padding:4px}
.habit-del:hover{opacity:1;color:var(--red)}

/* ── WEEKLY CHALLENGE ── */
#weeklyChallengeCard:hover{transform:translateY(-2px);box-shadow:0 8px 24px var(--shadow)}

/* ── MODALS general ── */
.mindrix-modal{position:fixed;inset:0;z-index:9600;background:rgba(0,0,0,.8);backdrop-filter:blur(12px);display:none;align-items:center;justify-content:center;padding:20px}
.mindrix-modal.open{display:flex}
.modal-box{background:var(--bg2);border:1px solid var(--bdr);border-radius:22px;padding:24px 20px;max-width:360px;width:100%;max-height:85vh;overflow-y:auto}
.modal-close{position:absolute;top:14px;right:14px;background:var(--card);border:1px solid var(--bdr);color:var(--fgd);border-radius:50%;width:30px;height:30px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center}

/* Bottom Nav */
.bnav{position:fixed;bottom:0;left:0;right:0;z-index:200;background:#0d0b07;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border-top:1px solid rgba(232,197,71,.15);box-shadow:0 -4px 30px rgba(0,0,0,.7);display:flex;justify-content:space-around;align-items:center;padding:8px 4px max(18px,env(safe-area-inset-bottom));overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.bnav::-webkit-scrollbar{display:none}
body.light .bnav{background:#fdf5e0;border-top:1px solid rgba(180,140,20,.18);box-shadow:0 -4px 20px rgba(0,0,0,.08)}
body.light .nbtn{color:#8a6a20}
body.light .nbtn:not(.active) svg{opacity:.5}
body.light .nbtn.active{color:#3d2800}
body.light .nbtn.active span{color:#b07800}
body.light .nbtn:not(.active) span{color:#8a6a20}
/* ── Duolingo-style 3D nav buttons ── */
.nbtn{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;cursor:pointer;color:#6b5a30;transition:all .18s cubic-bezier(.4,0,.2,1);min-width:56px;max-width:72px;flex:1;padding:0 2px 2px;border-radius:20px;position:relative;-webkit-tap-highlight-color:transparent}
.nbtn:active .nbtn-icon-wrap{transform:translateY(3px)!important;box-shadow:none!important}
.nbtn:active .nbtn-3d-base{transform:scaleY(.6)!important}
.nbtn.active{color:#1a1200}
.nbtn:not(.active){color:#7a6535}
/* Icon pill — the 3D raised pill */
.nbtn-icon-wrap{width:48px;height:40px;border-radius:16px;display:flex;align-items:center;justify-content:center;transition:all .18s cubic-bezier(.34,1.4,.64,1);background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.06);position:relative;transform:translateY(0);box-shadow:none}
/* Active = golden 3D raised pill */
.nbtn.active .nbtn-icon-wrap{background:linear-gradient(160deg,#FFE566 0%,#D4960A 100%);border:none;transform:translateY(-2px);box-shadow:0 5px 0 #8B6000,0 6px 12px rgba(180,120,0,.55),inset 0 1px 0 rgba(255,255,240,.45)}
/* Inactive hover */
.nbtn:not(.active):hover .nbtn-icon-wrap{background:rgba(232,197,71,.1);border-color:rgba(232,197,71,.2);transform:translateY(-1px)}
/* 3D base shadow strip under active pill */
.nbtn-3d-base{display:none}
.nbtn svg{width:24px;height:24px;transition:all .18s}
.nbtn.active svg{filter:drop-shadow(0 0 4px rgba(255,210,0,.5)) brightness(1.15)}
.nbtn:not(.active) svg{opacity:.42;filter:grayscale(.3) brightness(.85)}
.nbtn span{font-size:10px;letter-spacing:.2px;font-family:'Noto Sans Devanagari',sans-serif;font-weight:600;line-height:1;margin-top:2px;transition:all .18s}
.nbtn.active span{font-weight:800;color:#E8C020}
.nbtn:not(.active) span{color:#6b5830;opacity:.8}
.nbtn-pip{display:none}
.nbtn::after{display:none}

/* ════════════════════════════
   SETTINGS SYSTEM
════════════════════════════ */
/* Settings Panel */
#settingsPanel{position:fixed;top:0;left:-100%;width:88%;max-width:360px;height:100%;background:var(--bg2);z-index:1002;transition:.4s cubic-bezier(.4,0,.2,1);border-right:1px solid var(--bdr);overflow-y:auto;overflow-x:hidden}
#settingsPanel.open{left:0}
.set-hdr{padding:28px 20px 18px;border-bottom:1px solid var(--bdr)}
.set-hdr-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.set-title{font-family:'Cinzel Decorative',serif;font-size:17px;color:var(--fg)}
.set-close{width:32px;height:32px;border-radius:50%;background:var(--card);border:1px solid var(--bdr);color:var(--fg);font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.3s}
.set-close:hover{background:rgba(212,175,55,.1)}
.set-sub{font-size:11px;color:var(--fgd);font-family:'Cormorant Garamond',serif}

/* Settings items */
.set-group{padding:14px 16px}
.set-group-label{font-family:'Cinzel Decorative',serif;font-size:8px;letter-spacing:2px;color:var(--gd);text-transform:uppercase;margin-bottom:8px;padding-left:4px}
.set-item{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:12px;cursor:pointer;transition:.3s;margin-bottom:4px}
.set-item:hover{background:rgba(212,175,55,.06)}
.set-item:active{background:rgba(212,175,55,.1);transform:scale(.99)}
.set-icon{width:36px;height:36px;border-radius:10px;background:var(--card);border:1px solid var(--bdr);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;transition:.3s}
.set-item:hover .set-icon{border-color:rgba(212,175,55,.3);background:rgba(212,175,55,.06)}
.set-item-text{flex:1}
.set-item-title{font-size:14px;color:var(--fg);margin-bottom:2px}
.set-item-sub{font-size:11px;color:var(--fgd);font-family:'Cormorant Garamond',serif}
.set-item-arrow{color:var(--fg-dim);font-size:12px}
.set-toggle{position:relative;width:44px;height:24px;cursor:pointer;flex-shrink:0}
.set-toggle input{opacity:0;width:0;height:0;position:absolute}
.set-toggle-track{position:absolute;inset:0;border-radius:12px;background:rgba(212,175,55,.12);border:1px solid var(--bdr);transition:.3s}
.set-toggle input:checked+.set-toggle-track{background:rgba(212,175,55,.3);border-color:var(--gd)}
.set-toggle-thumb{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--fg-dim);transition:.3s;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.set-toggle input:checked~.set-toggle-thumb{left:23px;background:var(--g)}
.set-separator{height:1px;background:var(--bdr);margin:8px 16px}
.set-credits{text-align:center;padding:16px;font-size:10px;color:var(--fg-dim);font-family:'Cormorant Garamond',serif;line-height:1.8}

/* Overlay */
#overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;z-index:1001}
body.light #overlay{background:rgba(58,37,0,.4)}

/* Sub-pages (slide in from right) */
.sub-page{position:fixed;top:0;right:-100%;width:100%;height:100%;background:var(--bg);z-index:1003;transition:.4s cubic-bezier(.4,0,.2,1);overflow-y:auto}
.sub-page.open{right:0}
.sub-page-inner{max-width:480px;margin:0 auto;padding:0 0 80px}
#stab-content-profile{isolation:auto;position:static}
#mxVisitorCard,#mxMoodCard,#mxSpotlightCard{position:static!important;z-index:auto!important;transform:none!important}
.sub-hdr{display:flex;align-items:center;gap:12px;padding:22px 18px 16px;border-bottom:1px solid var(--bdr);background:var(--bg2);position:sticky;top:0;z-index:10}
.sub-back{width:36px;height:36px;border-radius:50%;background:var(--card);border:1px solid var(--bdr);color:var(--fg);font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.3s;flex-shrink:0}
.sub-back:hover{background:rgba(212,175,55,.1)}
.sub-hdr-text{flex:1}
.sub-hdr-title{font-family:'Cinzel Decorative',serif;font-size:15px;color:var(--fg)}
.sub-hdr-sub{font-size:11px;color:var(--fgd);font-family:'Cormorant Garamond',serif;font-style:italic}
.sub-content{padding:16px 18px}

/* About page */
.about-logo{text-align:center;padding:28px 20px 20px}
.about-logo-ring{width:80px;height:80px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.about-logo-letter{font-family:'Cinzel Decorative',serif;font-size:26px;background:linear-gradient(135deg,var(--gd),var(--gl));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.about-app-name{font-family:'Cinzel Decorative',serif;font-size:18px;color:var(--fg);margin-bottom:4px}
.about-{font-size:11px;color:var(--fgd);font-family:'Cormorant Garamond',serif}
.about-tagline{font-size:13px;color:var(--txt);text-align:center;line-height:1.7;padding:0 20px;margin-bottom:18px}
.about-card{background:var(--card);border:1px solid var(--bdr);border-radius:12px;padding:14px 16px;margin-bottom:10px}
.about-card-title{font-family:'Cinzel Decorative',serif;font-size:10px;letter-spacing:2px;color:var(--gd);margin-bottom:8px;text-transform:uppercase}
.about-card p{font-size:13px;color:var(--txt);line-height:1.8}
.about-stat-row{display:flex;gap:10px;margin-bottom:10px}
.about-stat{flex:1;background:var(--card);border:1px solid var(--bdr);border-radius:10px;padding:12px;text-align:center}
.about-stat-num{font-family:'Cinzel Decorative',serif;font-size:18px;color:var(--fg);display:block;margin-bottom:2px}
.about-stat-lbl{font-size:9px;color:var(--fgd);letter-spacing:1px;text-transform:uppercase;font-family:'Cormorant Garamond',serif}
.creator-card{background:linear-gradient(135deg,rgba(212,175,55,.07),rgba(212,175,55,.02));border:1px solid rgba(212,175,55,.22);border-radius:12px;padding:16px;margin-bottom:10px;text-align:center}
.creator-avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--gdim),var(--gd));display:flex;align-items:center;justify-content:center;margin:0 auto 10px;font-size:22px;box-shadow:0 0 20px var(--shadow)}
.creator-name{font-family:'Cinzel Decorative',serif;font-size:13px;color:var(--fg);margin-bottom:3px}
.creator-handle{font-size:12px;color:var(--gd)}
.creator-desc{font-size:12px;color:var(--txtd);margin-top:8px;line-height:1.7}

/* Achievements */
.ach-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ach-card{background:linear-gradient(145deg,rgba(255,255,255,0.035),rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.07);border-radius:18px;padding:16px 10px 14px;text-align:center;position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ach-card::before{content:'';position:absolute;inset:0;border-radius:18px;background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,0.055) 0%,transparent 60%);pointer-events:none}
.ach-card.earned{border-color:rgba(232,197,71,.3);background:linear-gradient(145deg,rgba(232,197,71,.07),rgba(232,197,71,.015));box-shadow:0 4px 24px rgba(0,0,0,.4),inset 0 0 0 1px rgba(232,197,71,.1)}
.ach-card.earned:active{transform:scale(0.97)}
.ach-card.locked{opacity:.38;filter:grayscale(.55)}
.ach-icon{display:flex;align-items:center;justify-content:center;margin:0 auto 10px;width:60px;height:60px}
.ach-name{font-family:'Cinzel Decorative',serif;font-size:8.5px;color:var(--fg);letter-spacing:.8px;margin-bottom:4px;line-height:1.3}
.ach-desc{font-size:10px;color:var(--fgd);font-family:'Cormorant Garamond',serif;line-height:1.5}
.ach-earned-badge{position:absolute;top:8px;right:8px}
.pts-display{background:linear-gradient(135deg,rgba(212,175,55,.1),rgba(212,175,55,.03));border:1px solid var(--bdr);border-radius:12px;padding:16px;text-align:center;margin-bottom:14px}
.pts-num{font-family:'Cinzel Decorative',serif;font-size:32px;background:linear-gradient(135deg,var(--gd),var(--gl));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.pts-lbl{font-size:11px;color:var(--fgd);letter-spacing:2px}

/* Help */
.faq-item{background:var(--card);border:1px solid var(--bdr);border-radius:12px;margin-bottom:8px;overflow:hidden}
.faq-q{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;cursor:pointer;transition:.3s;font-size:13px;color:var(--fg)}
.faq-q:hover{background:rgba(212,175,55,.04)}
.faq-q.open{color:var(--g)}
.faq-arrow{transition:.3s;font-size:12px;color:var(--gd)}
.faq-q.open .faq-arrow{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:.4s cubic-bezier(.4,0,.2,1);font-size:12px;color:var(--txtd);line-height:1.75}
.faq-a.open{max-height:300px;padding:0 16px 14px}

/* Contact */
.contact-card{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--bdr);border-radius:12px;padding:16px;margin-bottom:10px;cursor:pointer;transition:.3s}
.contact-card:hover{border-color:rgba(212,175,55,.32);transform:translateX(4px)}
.contact-icon{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,rgba(212,175,55,.12),rgba(212,175,55,.04));border:1px solid var(--bdr);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.contact-title{font-size:14px;color:var(--fg);margin-bottom:2px}
.contact-sub{font-size:11px;color:var(--fgd);font-family:'Cormorant Garamond',serif}

/* Focus Timer */
.timer-face{text-align:center;padding:28px 20px}
.timer-circle{width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,var(--bg3),var(--bg));border:3px solid var(--bdr);display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto 20px;position:relative;box-shadow:0 0 40px var(--shadow)}
.timer-svg{position:absolute;top:-3px;left:-3px;width:206px;height:206px;transform:rotate(-90deg)}
.timer-track{fill:none;stroke:var(--fg-dim);stroke-width:4}
.timer-prog{fill:none;stroke:var(--g);stroke-width:4;stroke-linecap:round;stroke-dasharray:628;stroke-dashoffset:628;transition:stroke-dashoffset 1s linear;filter:drop-shadow(0 0 5px rgba(212,175,55,.6))}
.timer-display{font-family:'Cinzel Decorative',serif;font-size:40px;color:var(--fg);line-height:1}
.timer-label{font-size:10px;color:var(--fgd);letter-spacing:2px;margin-top:4px}
.timer-mode-row{display:flex;gap:8px;justify-content:center;margin-bottom:18px}
.timer-mode-btn{background:var(--card);border:1px solid var(--bdr);color:var(--fgd);border-radius:20px;padding:6px 14px;font-size:11px;cursor:pointer;transition:.3s;font-family:'Cormorant Garamond',serif}
.timer-mode-btn.active,.timer-mode-btn:hover{background:rgba(212,175,55,.1);border-color:var(--gd);color:var(--fg)}
.timer-btns{display:flex;gap:10px;justify-content:center;margin-bottom:18px}
.timer-btn{width:52px;height:52px;border-radius:50%;font-size:18px;cursor:pointer;transition:all .3s;border:none;display:flex;align-items:center;justify-content:center}
.timer-btn.primary{background:linear-gradient(135deg,var(--gd),var(--g));color:#000;box-shadow:0 4px 16px var(--shadow)}
.timer-btn.secondary{background:var(--card);border:1px solid var(--bdr);color:var(--fg)}
.timer-btn:hover{transform:scale(1.06)}
.timer-btn:active{transform:scale(.96)}
.timer-sessions{text-align:center;font-size:12px;color:var(--fgd);font-family:'Cormorant Garamond',serif}
.timer-dot-row{display:flex;justify-content:center;gap:6px;margin-top:6px}
.timer-dot{width:8px;height:8px;border-radius:50%;background:var(--fg-dim);transition:.3s}
.timer-dot.done{background:var(--g)}

/* Theme Settings */
.theme-preview{border-radius:14px;padding:16px;margin-bottom:12px;border:1px solid var(--bdr)}
.theme-preview.dark-prev{background:#050505}
.theme-preview.light-prev{background:#FFF8ED}
.theme-prev-title{font-family:'Cinzel Decorative',serif;font-size:11px;margin-bottom:8px}
.theme-preview.dark-prev .theme-prev-title{color:#D4AF37}
.theme-preview.light-prev .theme-prev-title{color:#7A5200}
.theme-prev-bar{height:4px;border-radius:2px;margin-bottom:6px}
.theme-preview.dark-prev .theme-prev-bar{background:linear-gradient(90deg,#5a3e0a,#D4AF37)}
.theme-preview.light-prev .theme-prev-bar{background:linear-gradient(90deg,#8B6000,#B8960C)}
.theme-btn{width:100%;background:var(--card);border:2px solid var(--bdr);border-radius:12px;padding:14px;font-family:'Cinzel Decorative',serif;font-size:10px;letter-spacing:2px;color:var(--fg);cursor:pointer;transition:.3s;margin-bottom:8px;display:flex;align-items:center;justify-content:center;gap:10px}
.theme-btn.selected{border-color:var(--g);background:rgba(212,175,55,.06);box-shadow:0 0 16px var(--shadow)}
.theme-btn:hover{border-color:var(--gd)}

/* Sound settings */
.sound-item{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid var(--bdr)}
.sound-item:last-child{border-bottom:none}
.sound-item-info{flex:1}
.sound-item-title{font-size:13px;color:var(--fg);margin-bottom:2px}
.sound-item-sub{font-size:11px;color:var(--fgd);font-family:'Cormorant Garamond',serif}
.notif-preset-btn{background:var(--bg4);border:1.5px solid var(--bdr);border-radius:10px;padding:10px 4px;font-size:12px;color:var(--txt);cursor:pointer;transition:.2s;text-align:center;line-height:1.5;font-family:'Cormorant Garamond',serif}
.notif-preset-btn span{font-size:10px;color:var(--fgd);display:block}
.notif-preset-btn.active{border-color:var(--g);background:rgba(232,197,71,.12);color:var(--g)}
.notif-preset-btn:active{transform:scale(.95)}
/* WA Reminder time buttons */
.wa-time-btn{background:var(--bg4);border:1.5px solid rgba(37,211,102,.25);border-radius:10px;padding:10px 4px;font-size:12px;color:var(--txt);cursor:pointer;transition:.2s;text-align:center;font-family:'Cormorant Garamond',serif;width:100%}
.wa-time-btn.active{border-color:#25D366;background:rgba(37,211,102,.12);color:#25D366;font-weight:600}
.wa-time-btn:active{transform:scale(.95)}
.vol-slider{-webkit-appearance:none;width:80px;height:3px;border-radius:2px;background:var(--fg-dim);outline:none}
.vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--g);cursor:pointer;box-shadow:0 0 6px var(--shadow)}

/* Data page */
.data-stat{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--bdr)}
.data-stat:last-child{border-bottom:none}
.data-stat-label{font-size:13px;color:var(--txt)}
.data-stat-val{font-family:'Cinzel Decorative',serif;font-size:12px;color:var(--fg)}
.danger-btn{width:100%;background:rgba(255,77,77,.06);border:1px solid rgba(255,77,77,.2);color:var(--red);border-radius:12px;padding:14px;font-family:'Cinzel Decorative',serif;font-size:10px;letter-spacing:2px;cursor:pointer;transition:.3s;margin-top:12px}
.danger-btn:hover{background:rgba(255,77,77,.12);border-color:rgba(255,77,77,.4)}

/* Confirm modal */
.confirm-modal{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.7);backdrop-filter:blur(5px)}
.confirm-modal.open{display:flex}
.confirm-box{background:var(--bg2);border:1px solid var(--bdr);border-radius:18px;padding:28px 24px;width:90%;max-width:320px;text-align:center}
.confirm-icon{font-size:36px;display:block;margin-bottom:12px}
.confirm-title{font-family:'Cinzel Decorative',serif;font-size:14px;color:var(--fg);margin-bottom:8px}
.confirm-desc{font-size:13px;color:var(--txtd);line-height:1.7;margin-bottom:20px}
.confirm-btns{display:flex;gap:10px}
.confirm-cancel{flex:1;background:var(--card);border:1px solid var(--bdr);color:var(--fg);border-radius:10px;padding:12px;font-family:'Cinzel Decorative',serif;font-size:9px;cursor:pointer;transition:.3s}
.confirm-ok{flex:1;background:rgba(255,77,77,.1);border:1px solid rgba(255,77,77,.3);color:var(--red);border-radius:10px;padding:12px;font-family:'Cinzel Decorative',serif;font-size:9px;cursor:pointer;transition:.3s}
.confirm-ok:hover{background:rgba(255,77,77,.2)}

/* Streak Banner */
.streak-banner{margin:0 18px;background:linear-gradient(135deg,rgba(255,100,0,.08),rgba(212,175,55,.06));border:1px solid rgba(255,150,0,.2);border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:12px;cursor:default}
.streak-fire{font-size:32px;animation:flk 1.5s ease-in-out infinite;flex-shrink:0}
.streak-info{flex:1}
.streak-count{font-family:'Cinzel Decorative',serif;font-size:22px;color:var(--fg);line-height:1}
.streak-label{font-size:10px;color:var(--gd);letter-spacing:2px;text-transform:uppercase;font-family:'Cormorant Garamond',serif;margin-top:2px}
.streak-msg{font-size:11px;color:var(--txtd);margin-top:3px;line-height:1.4}
.streak-dots{display:flex;gap:4px;flex-wrap:wrap;max-width:120px}
.streak-dot{width:10px;height:10px;border-radius:50%;background:var(--fg-dim);transition:all .3s}
.streak-dot.active{background:linear-gradient(135deg,#ff6b00,#ffb300);box-shadow:0 0 6px rgba(255,150,0,.5)}
.streak-dot.today{background:linear-gradient(135deg,#ff4400,#ff8800);box-shadow:0 0 8px rgba(255,100,0,.6);animation:dotPulse 1.5s ease-in-out infinite}
@keyframes dotPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}

/* Today done card */
.today-done-overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.today-done-msg{text-align:center;color:var(--fg)}
.today-done-icon{font-size:32px;display:block;margin-bottom:6px}
.today-done-text{font-family:'Cinzel Decorative',serif;font-size:11px;letter-spacing:2px}

/* ════════════════════════════
   PREMIUM SCREEN
════════════════════════════ */
#premiumScreen{display:none;position:fixed;inset:0;z-index:400;background:var(--bg);overflow-y:auto}
#premiumScreen.open{display:block;animation:slideUp .35s ease}
.prem-inner{max-width:480px;margin:0 auto;padding:0 0 110px}

/* Premium Header */
.prem-hdr{padding:22px 20px 0;position:relative}
.prem-back{background:var(--card);border:1px solid var(--bdr);color:var(--fg);width:38px;height:38px;border-radius:50%;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center}

/* Hero Section */
.prem-hero{text-align:center;padding:28px 22px 0;position:relative}
.prem-crown-wrap{width:80px;height:80px;border-radius:50%;margin:0 auto 18px;background:radial-gradient(circle,#1a1000,#050200);border:2px solid rgba(212,175,55,.6);display:flex;align-items:center;justify-content:center;position:relative;animation:premCrownPulse 3s ease-in-out infinite;box-shadow:0 0 40px rgba(212,175,55,.3),0 0 80px rgba(212,175,55,.1)}
@keyframes premCrownPulse{0%,100%{box-shadow:0 0 40px rgba(212,175,55,.3),0 0 80px rgba(212,175,55,.1)}50%{box-shadow:0 0 70px rgba(212,175,55,.5),0 0 140px rgba(212,175,55,.2)}}
.prem-crown-rings{position:absolute;inset:-15px;border-radius:50%;border:1px solid rgba(212,175,55,.12);animation:premRing 3s ease-out infinite}
.prem-crown-rings2{position:absolute;inset:-28px;border-radius:50%;border:1px solid rgba(212,175,55,.06);animation:premRing 3s ease-out 1s infinite}
@keyframes premRing{0%{opacity:.8;transform:scale(.85)}100%{opacity:0;transform:scale(1)}}
.prem-crown{font-size:36px}
.prem-title{font-family:'Cinzel Decorative',serif;font-size:clamp(20px,6vw,26px);font-weight:900;background:linear-gradient(135deg,#7a5e10 0%,#D4AF37 30%,#FFE066 50%,#D4AF37 70%,#7a5e10 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:3px;margin-bottom:6px}
.prem-tagline{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:14px;color:var(--gd);letter-spacing:1.5px;margin-bottom:22px}

/* Price Banner */
.prem-price-banner{background:linear-gradient(135deg,rgba(212,175,55,.08),rgba(212,175,55,.02));border:1px solid rgba(212,175,55,.25);border-radius:16px;padding:16px 20px;margin:0 20px 24px;text-align:center;position:relative;overflow:hidden}
.prem-price-banner::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--g),transparent)}
.prem-price-label{font-family:'Cormorant Garamond',serif;font-size:11px;letter-spacing:3px;color:var(--fgd);text-transform:uppercase;margin-bottom:6px}
.prem-price-amount{font-family:'Cinzel Decorative',serif;font-size:32px;color:var(--g);letter-spacing:2px}
.prem-price-period{font-family:'Cormorant Garamond',serif;font-size:12px;color:var(--fgd);font-style:italic}
.prem-price-note{font-size:10px;color:rgba(212,175,55,.45);margin-top:6px;font-family:'Cormorant Garamond',serif;letter-spacing:1px}

/* Divider */
.prem-divider{display:flex;align-items:center;gap:12px;padding:0 20px;margin:4px 0 16px}
.prem-divider::before,.prem-divider::after{content:'';flex:1;height:1px;background:linear-gradient(to right,transparent,rgba(212,175,55,.2))}
.prem-divider::after{background:linear-gradient(to left,transparent,rgba(212,175,55,.2))}
.prem-divider span{font-family:'Cormorant Garamond',serif;font-size:10px;color:var(--gd);letter-spacing:2px;text-transform:uppercase;white-space:nowrap}

/* Section Label */
.prem-sec-label{font-family:'Cormorant Garamond',serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gd);padding:0 20px;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.prem-sec-label::after{content:'';flex:1;height:1px;background:linear-gradient(to right,var(--gd),transparent)}

/* Content Cards — locked */
.prem-card{margin:0 18px 12px;background:var(--card);border:1px solid var(--bdr);border-radius:16px;padding:18px 18px;position:relative;overflow:hidden;transition:all .3s;cursor:default}
.prem-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1.5px;background:linear-gradient(90deg,transparent,rgba(212,175,55,.25),transparent)}
.prem-card-locked{opacity:.7}
.prem-card-top{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.prem-card-icon{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,rgba(212,175,55,.1),rgba(212,175,55,.04));border:1px solid rgba(212,175,55,.2);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.prem-card-info{flex:1}
.prem-card-title{font-family:'Cinzel Decorative',serif;font-size:11px;color:var(--fg);letter-spacing:.5px;margin-bottom:3px}
.prem-card-sub{font-size:11px;color:var(--txtd);font-family:'Cormorant Garamond',serif}
.prem-card-lock{position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:50%;background:rgba(212,175,55,.08);border:1px solid rgba(212,175,55,.2);display:flex;align-items:center;justify-content:center;font-size:13px}
.prem-card-preview{font-size:12px;color:var(--txtd);line-height:1.7;font-family:'Cormorant Garamond',serif;padding-top:8px;border-top:1px solid var(--bdr)}
.prem-card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.prem-tag{font-size:9px;letter-spacing:1px;padding:4px 10px;border-radius:20px;background:rgba(212,175,55,.06);border:1px solid rgba(212,175,55,.15);color:var(--gd);font-family:'Cormorant Garamond',serif}

/* ════ PREMIUM PAYMENT & ACTIVATION SYSTEM ════ */
.prem-card-unlocked{opacity:1!important;cursor:pointer}
.prem-card-unlocked:hover{transform:translateY(-3px);box-shadow:0 12px 40px var(--shadow);border-color:rgba(212,175,55,.5)!important}
.prem-unlocked-badge{position:absolute;top:14px;right:14px;background:linear-gradient(135deg,var(--gdim),var(--g));color:#000;font-family:'Cinzel Decorative',serif;font-size:7px;letter-spacing:1.5px;padding:4px 10px;border-radius:20px;font-weight:700}
.prem-read-btn{width:100%;background:linear-gradient(135deg,var(--gdim),var(--g),var(--gdim));background-size:200% 100%;color:#000;border:none;border-radius:10px;padding:12px;font-family:'Cinzel Decorative',serif;font-size:9px;font-weight:700;letter-spacing:2px;cursor:pointer;transition:all .4s;margin-top:12px;position:relative;overflow:hidden}
.prem-read-btn:hover{background-position:100% 0;box-shadow:0 6px 22px var(--shadow)}
.prem-activated-banner{margin:0 18px 20px;background:linear-gradient(135deg,rgba(93,216,118,.08),rgba(93,216,118,.03));border:1px solid rgba(93,216,118,.3);border-radius:16px;padding:16px 20px;text-align:center;display:none}
.prem-activated-banner.show{display:block}
.pab-icon{font-size:28px;margin-bottom:8px;display:block}
.pab-title{font-family:'Cinzel Decorative',serif;font-size:12px;color:#5DD876;letter-spacing:2px;margin-bottom:4px}
.pab-sub{font-size:11px;color:var(--txtd);font-family:'Cormorant Garamond',serif}
/* Payment Modal */
#paymentModal{display:none;position:fixed;inset:0;z-index:6000;background:rgba(0,0,0,.85);backdrop-filter:blur(12px);align-items:flex-end;justify-content:center}
#paymentModal.show{display:flex}
.pay-sheet{background:var(--bg2);border-radius:28px 28px 0 0;border:1px solid var(--bdr);border-bottom:none;width:100%;max-width:480px;padding:0 0 36px;animation:sheetUp .35s cubic-bezier(.4,0,.2,1)}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.pay-sheet-hdr{padding:20px 20px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--bdr)}
.pay-sheet-title{font-family:'Cinzel Decorative',serif;font-size:13px;color:var(--fg);letter-spacing:1px}
.pay-sheet-close{width:30px;height:30px;border-radius:50%;background:var(--card);border:1px solid var(--bdr);color:var(--fg);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.pay-step{padding:18px 20px;display:none}
.pay-step.active{display:block;animation:slideUp .3s ease}
/* Step 1 — Payment */
.pay-amount-box{background:linear-gradient(135deg,rgba(212,175,55,.1),rgba(212,175,55,.04));border:1px solid rgba(212,175,55,.3);border-radius:14px;padding:18px;text-align:center;margin-bottom:16px}
.pay-amount-main{font-family:'Cinzel Decorative',serif;font-size:38px;color:var(--g);letter-spacing:2px;display:block;margin-bottom:3px}
.pay-amount-sub{font-size:12px;color:var(--fgd);font-family:'Cormorant Garamond',serif;letter-spacing:1px}
.pay-upi-box{background:var(--card);border:1px solid var(--bdr);border-radius:12px;padding:14px 16px;display:flex;align-items:center;gap:12px;margin-bottom:12px}
.pay-upi-icon{width:42px;height:42px;border-radius:10px;background:linear-gradient(135deg,#4CAF50,#2e7d32);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.pay-upi-id{font-family:'Cinzel Decorative',serif;font-size:12px;color:var(--fg);margin-bottom:3px;letter-spacing:.5px}
.pay-upi-sub{font-size:10px;color:var(--fgd);font-family:'Cormorant Garamond',serif}
.pay-copy-btn{background:rgba(212,175,55,.1);border:1px solid rgba(212,175,55,.3);color:var(--g);border-radius:8px;padding:8px 14px;font-size:10px;cursor:pointer;font-family:'Cinzel Decorative',serif;letter-spacing:1px;transition:.3s;flex-shrink:0}
.pay-copy-btn:hover{background:rgba(212,175,55,.2)}
.pay-method-btn{width:100%;background:linear-gradient(135deg,var(--gdim),var(--g),var(--gdim));background-size:200% 100%;color:#000;border:none;border-radius:12px;padding:15px;font-family:'Cinzel Decorative',serif;font-size:10px;font-weight:700;letter-spacing:2px;cursor:pointer;transition:all .4s;position:relative;overflow:hidden;margin-bottom:10px}
.pay-method-btn:hover{background-position:100% 0;box-shadow:0 6px 22px var(--shadow)}
.pay-method-btn-alt{width:100%;background:var(--card);border:1px solid var(--bdr);color:var(--fg);border-radius:12px;padding:14px;font-family:'Cinzel Decorative',serif;font-size:9px;letter-spacing:2px;cursor:pointer;transition:.3s;margin-bottom:12px}
.pay-method-btn-alt:hover{background:rgba(212,175,55,.06)}
.pay-note{font-size:11px;color:var(--fgd);text-align:center;font-family:'Cormorant Garamond',serif;line-height:1.7}
/* Step 2 — UTR Entry */
.pay-input{width:100%;background:var(--card);border:1.5px solid var(--bdr);border-radius:12px;padding:14px 16px;font-size:15px;color:var(--txt);font-family:'Cinzel Decorative',serif;outline:none;transition:.3s;letter-spacing:1px;margin-bottom:10px}
.pay-input:focus{border-color:rgba(232,197,71,.6);box-shadow:0 0 0 3px rgba(232,197,71,.08)}
.pay-submit-btn{width:100%;background:linear-gradient(135deg,var(--gdim),var(--g));color:#000;border:none;border-radius:12px;padding:15px;font-family:'Cinzel Decorative',serif;font-size:10px;letter-spacing:2px;cursor:pointer;transition:.3s;margin-bottom:10px}
.pay-submit-btn:hover{box-shadow:0 6px 22px var(--shadow)}
.pay-error{display:none;font-size:11px;color:var(--red);text-align:center;margin-bottom:10px;font-family:'Cormorant Garamond',serif}
/* Step 3 — Confirmation */
.pay-success-icon{font-size:48px;text-align:center;display:block;margin-bottom:12px}
.pay-success-title{font-family:'Cinzel Decorative',serif;font-size:14px;color:var(--fg);letter-spacing:2px;text-align:center;margin-bottom:8px}
.pay-success-desc{font-size:12px;color:var(--txtd);text-align:center;line-height:1.8;font-family:'Cormorant Garamond',serif;margin-bottom:16px}
.pay-wa-btn{width:100%;background:linear-gradient(135deg,#25D366,#128C7E);color:#fff;border:none;border-radius:12px;padding:15px;font-family:'Cinzel Decorative',serif;font-size:10px;letter-spacing:2px;cursor:pointer;transition:.3s;margin-bottom:10px;display:flex;align-items:center;justify-content:center;gap:10px}
.pay-wa-btn:hover{box-shadow:0 6px 22px rgba(37,211,102,.3)}
/* Step 4 — Activation Code */
.pay-act-icon{font-size:38px;text-align:center;display:block;margin-bottom:10px}
/* Admin Tool Modal */
#adminModal{display:none;position:fixed;inset:0;z-index:7000;background:rgba(0,0,0,.9);backdrop-filter:blur(15px);align-items:center;justify-content:center}
#adminModal.show{display:flex}
.admin-box{background:var(--bg2);border:1px solid var(--bdr);border-radius:24px;padding:28px 24px;width:90%;max-width:360px;text-align:center}
.admin-title{font-family:'Cinzel Decorative',serif;font-size:12px;color:var(--gd);letter-spacing:2px;margin-bottom:4px}
.admin-sub{font-size:11px;color:var(--fgd);font-family:'Cormorant Garamond',serif;margin-bottom:18px;line-height:1.6}
.admin-input{width:100%;background:var(--card);border:1.5px solid var(--bdr);border-radius:11px;padding:13px 15px;font-size:14px;color:var(--txt);font-family:'Cinzel Decorative',serif;outline:none;transition:.3s;text-align:center;margin-bottom:12px;letter-spacing:2px}
.admin-input:focus{border-color:rgba(232,197,71,.6)}
.admin-result{background:linear-gradient(135deg,rgba(212,175,55,.1),rgba(212,175,55,.04));border:1px solid rgba(212,175,55,.3);border-radius:12px;padding:14px;margin:12px 0;display:none}
.admin-code{font-family:'Cinzel Decorative',serif;font-size:18px;color:var(--g);letter-spacing:3px}
.prem-coming-soon{display:inline-block;background:rgba(212,175,55,.06);border:1px solid rgba(212,175,55,.15);color:var(--gd);font-family:'Cormorant Garamond',serif;font-size:10px;letter-spacing:2px;padding:5px 14px;border-radius:20px}
.prem-blur-overlay{position:absolute;bottom:0;left:0;right:0;height:50px;background:linear-gradient(to top,var(--card),transparent);border-radius:0 0 14px 14px}
.prem-coming-soon{display:inline-flex;align-items:center;gap:6px;background:rgba(212,175,55,.06);border:1px solid rgba(212,175,55,.18);border-radius:20px;padding:4px 12px;font-family:'Cinzel Decorative',serif;font-size:8px;color:var(--gd);letter-spacing:1.5px;margin-top:8px}

/* Perks Section */
.prem-perks{margin:0 18px 16px;background:linear-gradient(135deg,rgba(212,175,55,.06),rgba(212,175,55,.02));border:1px solid rgba(212,175,55,.18);border-radius:16px;padding:18px}
.prem-perk{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid rgba(212,175,55,.08)}
.prem-perk:last-child{border-bottom:none;padding-bottom:0}
.prem-perk-icon{font-size:20px;flex-shrink:0;margin-top:1px}
.prem-perk-text{flex:1}
.prem-perk-title{font-family:'Cinzel Decorative',serif;font-size:11px;color:var(--fg);margin-bottom:2px;letter-spacing:.5px}
.prem-perk-desc{font-size:11px;color:var(--txtd);font-family:'Cormorant Garamond',serif;line-height:1.6}

/* CTA Button */
.prem-cta-wrap{padding:0 18px;margin-top:6px}
.prem-cta{width:100%;background:linear-gradient(135deg,#5a3e0a,#D4AF37,#FFE066,#D4AF37,#5a3e0a);background-size:300% 100%;color:#000;border:none;border-radius:16px;padding:18px 24px;font-family:'Cinzel Decorative',serif;font-size:13px;font-weight:700;letter-spacing:3px;cursor:pointer;transition:all .4s;position:relative;overflow:hidden;box-shadow:0 8px 32px rgba(212,175,55,.3)}
.prem-cta:hover{background-position:100% 0;box-shadow:0 12px 45px rgba(212,175,55,.45);transform:translateY(-2px)}
.prem-cta:active{transform:scale(.97)}
.prem-cta-shim{position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shim 2.5s infinite}
.prem-cta-note{text-align:center;font-size:10px;color:rgba(212,175,55,.4);font-family:'Cormorant Garamond',serif;margin-top:8px;letter-spacing:1px}

/* Testimonials */
.prem-testimonials{margin:0 18px 16px}
.prem-testi{background:var(--card);border:1px solid var(--bdr);border-radius:14px;padding:16px;margin-bottom:10px;position:relative}
.prem-testi::before{content:'"';position:absolute;top:-8px;left:14px;font-family:'Cormorant Garamond',serif;font-size:40px;color:var(--gd);opacity:.4;line-height:1}
.prem-testi-text{font-family:'Cormorant Garamond',serif;font-size:13px;color:var(--txt);line-height:1.7;font-style:italic;margin-bottom:10px}
.prem-testi-author{display:flex;align-items:center;gap:8px}
.prem-testi-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--gdim),var(--gd));display:flex;align-items:center;justify-content:center;font-size:12px}
.prem-testi-name{font-family:'Cinzel Decorative',serif;font-size:9px;color:var(--gd);letter-spacing:1px}
.prem-testi-stars{color:var(--g);font-size:10px;margin-left:auto}

/* Guarantee */
.prem-guarantee{margin:0 18px;background:rgba(93,216,118,.05);border:1px solid rgba(93,216,118,.15);border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:12px;margin-bottom:16px}
.prem-guarantee-icon{font-size:24px;flex-shrink:0}
.prem-guarantee-text{font-size:12px;color:var(--txt);line-height:1.6;font-family:'Cormorant Garamond',serif}
.prem-guarantee-text b{color:var(--green)}
@keyframes premDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.4)}}
@keyframes swSlideUp{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}

/* ═══════════════ ADMIN SYSTEM CSS ═══════════════ */
#sysLoginOverlay{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.97);backdrop-filter:blur(20px);align-items:center;justify-content:center;flex-direction:column}
#sysLoginOverlay.show{display:flex}
.sys-login-box{background:linear-gradient(145deg,#0d0d0d,#1a1408);border:1px solid rgba(212,175,55,.25);border-radius:20px;padding:36px 28px 28px;width:min(90vw,380px);box-shadow:0 0 60px rgba(212,175,55,.1)}
.sys-login-logo{text-align:center;font-family:'Cinzel Decorative',serif;font-size:22px;letter-spacing:3px;background:linear-gradient(135deg,#7a5e10,#E8C547,#FFF0A0,#E8C547);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:4px}
.sys-login-sub{text-align:center;color:rgba(212,175,55,.4);font-size:10px;letter-spacing:4px;text-transform:uppercase;margin-bottom:28px}
.sys-field{margin-bottom:16px}
.sys-field label{display:block;color:rgba(212,175,55,.6);font-size:10px;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px}
.sys-field-wrap{position:relative}
.sys-field input{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(212,175,55,.2);border-radius:10px;padding:12px 44px 12px 14px;color:#fff;font-size:14px;outline:none;box-sizing:border-box;transition:.3s}
.sys-field input:focus{border-color:rgba(212,175,55,.6);background:rgba(212,175,55,.05)}
.sys-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:rgba(212,175,55,.4);cursor:pointer;font-size:16px;padding:4px}
.sys-auth-btn{width:100%;padding:14px;background:linear-gradient(135deg,#7a5e10,#E8C547,#c9a227);border:none;border-radius:12px;color:#000;font-weight:700;font-size:15px;letter-spacing:2px;cursor:pointer;margin-top:8px;transition:.3s}
.sys-auth-btn:hover{opacity:.9;transform:translateY(-1px)}
.sys-auth-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.sys-err{color:#ff6b6b;font-size:12px;text-align:center;margin-top:12px;min-height:18px;letter-spacing:.5px}
.sys-lockbar{background:rgba(255,80,80,.1);border:1px solid rgba(255,80,80,.3);border-radius:8px;padding:10px;text-align:center;margin-top:12px;color:#ff6b6b;font-size:12px;display:none}
.sys-lockbar.show{display:block}
#sysPanel{display:none;position:fixed;inset:0;z-index:9998;background:#050505;flex-direction:column;overflow:hidden}
#sysPanel.show{display:flex}
.sys-panel-hdr{background:linear-gradient(135deg,#0d0d0d,#1a1408);border-bottom:1px solid rgba(212,175,55,.2);padding:14px 18px 10px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.sys-panel-title{font-family:'Cinzel Decorative',serif;font-size:15px;letter-spacing:2px;background:linear-gradient(135deg,#E8C547,#FFF0A0);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.sys-panel-close{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#aaa;padding:6px 12px;cursor:pointer;font-size:13px}
.sys-panel-body{flex:1;overflow-y:auto;padding:20px 16px;padding-bottom:80px}
.sys-tab-nav{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(180deg,transparent,#0a0a0a);padding:10px 8px 14px;display:flex;gap:6px;justify-content:center;border-top:1px solid rgba(212,175,55,.1)}
.sys-tab-btn{flex:1;max-width:70px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;color:#888;padding:8px 4px;font-size:18px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;transition:.3s}
.sys-tab-btn span{font-size:9px;letter-spacing:.5px;font-family:sans-serif}
.sys-tab-btn.active{background:linear-gradient(135deg,rgba(212,175,55,.15),rgba(212,175,55,.05));border-color:rgba(212,175,55,.4);color:#E8C547}
.sys-tab-pane{display:none}.sys-tab-pane.active{display:block}
.sys-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:18px;margin-bottom:16px}
.sys-card-title{color:rgba(212,175,55,.8);font-size:11px;letter-spacing:2px;text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.sys-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sys-stat-box{background:rgba(212,175,55,.06);border:1px solid rgba(212,175,55,.15);border-radius:12px;padding:16px;text-align:center}
.sys-stat-num{font-family:'Cinzel Decorative',serif;font-size:28px;color:#E8C547;line-height:1}
.sys-stat-lbl{color:#888;font-size:10px;letter-spacing:1px;margin-top:6px}
.sys-input{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:11px 14px;color:#fff;font-size:14px;outline:none;box-sizing:border-box;margin-bottom:10px;transition:.3s}
.sys-input:focus{border-color:rgba(212,175,55,.5)}
.sys-input::placeholder{color:#444}
.sys-btn{padding:11px 18px;border:none;border-radius:10px;cursor:pointer;font-size:13px;font-weight:600;transition:.3s;margin-right:8px;margin-bottom:8px}
.sys-btn-gold{background:linear-gradient(135deg,#7a5e10,#E8C547);color:#000}
.sys-btn-red{background:rgba(255,80,80,.15);border:1px solid rgba(255,80,80,.3);color:#ff6b6b}
.sys-btn-green{background:rgba(80,200,120,.15);border:1px solid rgba(80,200,120,.3);color:#50c878}
.sys-btn-grey{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#ccc}
.sys-code-out{background:rgba(212,175,55,.08);border:1px solid rgba(212,175,55,.3);border-radius:10px;padding:14px;text-align:center;font-family:'Courier New',monospace;font-size:18px;letter-spacing:3px;color:#E8C547;margin:10px 0;display:none}
.sys-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.sys-toggle-row:last-child{border-bottom:none}
.sys-toggle-label{color:#ccc;font-size:13px}
.sys-toggle-sub{color:#666;font-size:11px;margin-top:2px}
.sys-toggle{position:relative;width:46px;height:26px;flex-shrink:0}
.sys-toggle input{opacity:0;width:0;height:0}
.sys-slider{position:absolute;inset:0;background:#333;border-radius:34px;cursor:pointer;transition:.3s}
.sys-slider:before{content:"";position:absolute;height:20px;width:20px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s}
.sys-toggle input:checked+.sys-slider{background:linear-gradient(135deg,#c9a227,#E8C547)}
.sys-toggle input:checked+.sys-slider:before{transform:translateX(20px)}
.sys-ann-preview{background:linear-gradient(135deg,rgba(212,175,55,.15),rgba(212,175,55,.05));border:1px solid rgba(212,175,55,.4);border-radius:12px;padding:14px 16px;margin:10px 0;color:#E8C547;font-size:14px;text-align:center;display:none;line-height:1.5}
.sys-section-lbl{color:#666;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;margin:16px 0 8px;padding-left:2px}
.sys-danger-zone{border:1px solid rgba(255,80,80,.2);border-radius:14px;padding:16px;margin-bottom:16px;background:rgba(255,30,30,.04)}
.sys-danger-title{color:rgba(255,80,80,.7);font-size:11px;letter-spacing:2px;text-transform:uppercase;margin-bottom:14px}
.sys-chip{display:inline-block;background:rgba(212,175,55,.12);border:1px solid rgba(212,175,55,.3);border-radius:20px;padding:3px 12px;font-size:11px;color:#E8C547;margin:3px}
.version-trig-active{background:rgba(212,175,55,.08)!important;border-radius:6px;transition:.5s}

/* ── DASHBOARD & TOOLS SCREENS — Force visible regardless of #app state ── */
#dashScreen, #toolsScreen {
  visibility: visible !important;
}
#dashScreen.active-screen,
#toolsScreen.active-screen {
  display: block !important;
}

/* ── CERTIFICATE FULLSCREEN OVERLAY ── */
#certFullscreenOverlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #000;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  animation: certFsIn .28s cubic-bezier(.4,0,.2,1);
}
#certFullscreenOverlay.active {
  display: flex;
}
#certFullscreenOverlay .cert-fs-inner {
  width: min(94vw, 520px);
  max-height: 96vh;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 0 80px rgba(232,197,71,.25), 0 0 0 1px rgba(232,197,71,.15);
  pointer-events: none;
}
#certFullscreenOverlay .cert-fs-inner svg {
  width: 100%;
  display: block;
  border-radius: 18px;
}
#certFullscreenOverlay .cert-fs-hint {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.6);
  border: 1px solid rgba(232,197,71,.25);
  color: rgba(232,197,71,.8);
  font-size: 11px;
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: 1.5px;
  padding: 6px 18px;
  border-radius: 30px;
  white-space: nowrap;
  animation: certHintPulse 2.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes certFsIn {
  from { opacity:0; transform:scale(.88); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes certHintPulse {
  0%,100% { opacity:.7; }
  50%      { opacity:1; }
}
.cert-card-wrap {
  cursor: zoom-in;
  transition: transform .18s;
}
.cert-card-wrap:active { transform: scale(.97); }

/* ── AVATAR SVG GLOBAL FIX ── */
#profileAvatarDisplay svg,
#wallMyAvatar svg,
#sw-chat-avatar svg,
#sw-myavatar svg,
#sw-avatar svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}
/* Prevent raw av-id text from showing */
#profileAvatarDisplay:not(:has(svg)):not(:has(img)),
#sp-avatar:not(:has(svg)):not(:has(img)),
#wallMyAvatar:not(:has(svg)):not(:has(img)) {
  font-size: 0 !important;
  color: transparent !important;
}
/* ── AVATAR SVG GLOBAL FIX ── */
.avatar-wrap svg, [id*="Avatar"] svg, [id*="avatar"] svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border-radius: 50% !important;
}
/* ── SP-AVATAR SIZE LOCK ── */
#sp-avatar {
  width: 84px !important;
  height: 84px !important;
  min-width: 84px !important;
  max-width: 84px !important;
  min-height: 84px !important;
  max-height: 84px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
#sp-avatar img, #sp-avatar svg {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 50% !important;
  display: block !important;
}

/* ═══════════════════════════════════════
   INTERACTIVE LESSON SYSTEM — CSS
═══════════════════════════════════════ */

/* TTS Button in section header */
.lsec-tts-btn{
  margin-left:auto;
  background:rgba(232,197,71,.1);
  border:1px solid rgba(232,197,71,.25);
  color:var(--fg);
  border-radius:20px;
  padding:5px 11px;
  font-size:10px;
  display:flex;align-items:center;gap:5px;
  cursor:pointer;
  font-family:'Noto Sans Devanagari',sans-serif;
  letter-spacing:.3px;
  transition:background .2s,transform .15s,border-color .2s,color .2s;
  flex-shrink:0;
  touch-action:manipulation;
  user-select:none;
}
.lsec-tts-btn:active{ transform:scale(.93); }
.lsec-tts-btn:hover{ background:rgba(232,197,71,.18); }
.lsec-tts-btn.speaking{
  background:rgba(239,68,68,.15);
  border-color:rgba(239,68,68,.5);
  color:#f87171;
  animation:ttsPulse 1.2s ease-in-out infinite;
}
.lsec-tts-btn.speaking:hover{
  background:rgba(239,68,68,.28);
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ttsPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(239,68,68,.3); }
  50%{ box-shadow:0 0 0 6px rgba(239,68,68,0); }
}

/* True/False Card */
.mx-tf-card{
  margin:18px 0 6px;
  background:linear-gradient(135deg,rgba(232,197,71,.07),rgba(0,229,192,.05));
  border:1px solid rgba(232,197,71,.2);
  border-radius:14px;
  padding:16px;
  animation:secIn .4s ease both;
}
.mx-tf-label{
  font-size:10px;
  font-family:'Cinzel Decorative',serif;
  letter-spacing:1.5px;
  color:var(--fgd);
  margin-bottom:10px;
  text-transform:uppercase;
}
.mx-tf-statement{
  font-size:14px;
  color:var(--txt);
  line-height:1.65;
  margin-bottom:14px;
  font-style:italic;
}
.mx-tf-btns{
  display:flex;gap:10px;
}
.mx-tf-btn{
  flex:1;
  padding:11px 8px;
  border-radius:12px;
  font-size:13px;
  font-family:'Noto Sans Devanagari',sans-serif;
  cursor:pointer;
  transition:transform .15s,background .2s;
  touch-action:manipulation;
  border:1px solid transparent;
  font-weight:600;
}
.mx-tf-true{
  background:rgba(74,222,128,.12);
  border-color:rgba(74,222,128,.3);
  color:#4ade80;
}
.mx-tf-false{
  background:rgba(248,113,113,.12);
  border-color:rgba(248,113,113,.3);
  color:#f87171;
}
.mx-tf-btn:active{ transform:scale(.92); }
.mx-tf-btn:disabled{ opacity:.5;cursor:default;transform:none; }
.mx-tf-btn.tf-selected-correct{ background:rgba(74,222,128,.3);border-color:#4ade80; }
.mx-tf-btn.tf-selected-wrong{ background:rgba(248,113,113,.3);border-color:#f87171; }
.mx-tf-feedback{
  margin-top:10px;
  font-size:12.5px;
  line-height:1.6;
  display:none;
  padding:10px 12px;
  border-radius:10px;
}
.mx-tf-feedback.show{ display:block; animation:secIn .3s ease; }
.mx-tf-feedback.good{ background:rgba(74,222,128,.1);color:#4ade80; }
.mx-tf-feedback.bad{ background:rgba(248,113,113,.1);color:#f87171; }

/* Screen flash overlay */
#mxSecFlash{
  position:fixed;inset:0;z-index:9999;
  pointer-events:none;opacity:0;
  transition:opacity .12s;
}

/* Floating XP popup */
.mx-float-xp{
  position:fixed;
  font-family:'Cinzel Decorative',serif;
  font-size:13px;
  font-weight:900;
  color:#E8C547;
  pointer-events:none;
  z-index:10000;
  text-shadow:0 2px 8px rgba(0,0,0,.5);
  animation:mxFloatUp .9s ease forwards;
}
@keyframes mxFloatUp{
  0%{ opacity:1;transform:translateY(0) scale(1); }
  70%{ opacity:1;transform:translateY(-52px) scale(1.15); }
  100%{ opacity:0;transform:translateY(-80px) scale(.9); }
}

/* Lesson confetti particle */
.mx-confetti-dot{
  position:fixed;
  width:7px;height:7px;
  border-radius:50%;
  pointer-events:none;
  z-index:10001;
  animation:mxConfettiFall 1.2s ease forwards;
}
@keyframes mxConfettiFall{
  0%{ opacity:1;transform:translateY(0) rotate(0deg); }
  100%{ opacity:0;transform:translateY(120px) rotate(360deg); }
}

/* [style] */
#lp-wrapper { display:none; }
#app-wrapper { display:none; }
#lp-wrapper{
  --g: #E8C547; --gd: #C9A227; --gl: #FFF0A0; --gdim: #7a5e10;
  --bg: #06050A; --bg2: #0D0B14; --bg3: #15121F;
  --card: rgba(255,255,255,.03); --bdr: rgba(232,197,71,.12);
  --fg: #F0EAD6; --fgd: rgba(240,234,214,.55); --fgdd: rgba(240,234,214,.3);
}
#lp-wrapper{ margin:0; padding:0; box-sizing:border-box; scroll-behavior:smooth; background:var(--bg); color:var(--fg); font-family:'Cormorant Garamond',serif; overflow-x:hidden; }
#lp-wrapper /* ── NAV ── */
nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px;
  background:rgba(6,5,10,.92);
  backdrop-filter:blur(28px);
  -webkit-backdrop-filter:blur(28px);
  border-bottom:1px solid rgba(232,197,71,.07);
}
#lp-wrapper .nav-logo{
  font-family:'Cinzel Decorative',serif;
  font-size:15px; letter-spacing:3px;
  background:linear-gradient(135deg,var(--gdim),var(--g),var(--gl));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
#lp-wrapper .nav-cta{
  background:linear-gradient(135deg,var(--gdim),var(--g));
  color:#000; border:none; border-radius:8px;
  padding:9px 18px;
  font-family:'Cinzel Decorative',serif; font-size:8px; letter-spacing:2px;
  cursor:pointer; font-weight:700;
  text-decoration:none; display:inline-block;
  transition:.2s;
}
#lp-wrapper .nav-cta:hover{ transform:translateY(-1px); box-shadow:0 4px 16px rgba(232,197,71,.3); }
#lp-wrapper /* ── HERO ── */
.hero{
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:90px 24px 60px;
  position:relative; text-align:center;
  overflow:hidden;
  background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(232,197,71,.06) 0%, transparent 65%);
}
#lp-wrapper .hero-glow{
  position:absolute; top:10%; left:50%; transform:translateX(-50%);
  width:700px; height:500px;
  background:radial-gradient(ellipse, rgba(232,197,71,.05) 0%, transparent 60%);
  pointer-events:none;
}
#lp-wrapper .hero-rings{
  position:absolute; inset:0; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}
#lp-wrapper .hero-ring{
  position:absolute; border-radius:50%;
  border:1px solid rgba(232,197,71,.04);
  animation:ringExpand 5s ease-out infinite;
}
#lp-wrapper .hero-ring:nth-child(1){ width:350px; height:350px; }
#lp-wrapper .hero-ring:nth-child(2){ width:550px; height:550px; animation-delay:1s; }
#lp-wrapper .hero-ring:nth-child(3){ width:750px; height:750px; animation-delay:2s; }
@keyframes ringExpand{
  0%{ opacity:.5; transform:scale(.95); }
  100%{ opacity:0; transform:scale(1.08); }
}
#lp-wrapper .hero-badge{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(232,197,71,.06);
  border:1px solid rgba(232,197,71,.2);
  border-radius:40px; padding:6px 16px;
  font-size:10px; color:rgba(232,197,71,.8); letter-spacing:2px;
  font-family:'Cinzel Decorative',serif;
  margin-bottom:28px;
  animation:fadeUp .8s ease both;
}
#lp-wrapper .hero-title{
  font-family:'Cinzel Decorative',serif;
  font-size:clamp(32px,8vw,56px);
  letter-spacing:5px; line-height:1.15;
  background:linear-gradient(160deg,var(--gl) 0%,var(--g) 45%,var(--gd) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  margin-bottom:14px;
  animation:fadeUp .8s .1s ease both;
}
#lp-wrapper .hero-sub{
  font-size:clamp(14px,3vw,17px);
  color:var(--fgd); letter-spacing:1.5px;
  margin-bottom:18px;
  font-style:italic;
  animation:fadeUp .8s .2s ease both;
}
#lp-wrapper .hero-desc{
  font-size:clamp(14px,2.5vw,16px);
  color:var(--fgdd); line-height:2; max-width:480px;
  margin:0 auto 40px;
  animation:fadeUp .8s .3s ease both;
}
#lp-wrapper .hero-desc b{ color:rgba(232,197,71,.8); font-weight:600; }
#lp-wrapper .hero-btns{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
  animation:fadeUp .8s .4s ease both;
  margin-bottom:56px;
}
#lp-wrapper .btn-primary{
  background:linear-gradient(135deg,#6a4a0e,var(--g) 50%,var(--gl));
  color:#0a0800; border:none; border-radius:14px;
  padding:16px 32px;
  font-family:'Cinzel Decorative',serif; font-size:10px; font-weight:700; letter-spacing:2.5px;
  cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  box-shadow:0 4px 24px rgba(232,197,71,.2), 0 1px 0 rgba(255,255,255,.15) inset;
  transition:.25s;
}
#lp-wrapper .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 36px rgba(232,197,71,.32); }
#lp-wrapper .btn-primary:active{ transform:scale(.97); }
#lp-wrapper .btn-secondary{
  background:transparent;
  color:rgba(232,197,71,.7); border:1px solid rgba(232,197,71,.25);
  border-radius:14px; padding:16px 28px;
  font-family:'Cinzel Decorative',serif; font-size:10px; letter-spacing:2px;
  cursor:pointer; text-decoration:none; display:inline-block;
  transition:.25s;
}
#lp-wrapper .btn-secondary:hover{ background:rgba(232,197,71,.05); border-color:rgba(232,197,71,.45); color:var(--g); }
#lp-wrapper .hero-stats{
  display:flex; gap:0; justify-content:center;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(232,197,71,.1);
  border-radius:20px; overflow:hidden;
  animation:fadeUp .8s .5s ease both;
}
#lp-wrapper .stat{
  text-align:center; padding:16px 24px;
  border-right:1px solid rgba(232,197,71,.08);
}
#lp-wrapper .stat:last-child{ border-right:none; }
#lp-wrapper .stat-num{
  font-family:'Cinzel Decorative',serif;
  font-size:22px; color:var(--g); display:block; margin-bottom:3px;
}
#lp-wrapper .stat-label{
  font-size:10px; color:var(--fgdd); letter-spacing:1px;
}
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(24px); }
  to{ opacity:1; transform:translateY(0); }
}
#lp-wrapper /* ── SECTION COMMON ── */
section{ padding:72px 24px; position:relative; z-index:1; }
#lp-wrapper .sec-label{
  font-family:'Cinzel Decorative',serif; font-size:9px;
  color:rgba(232,197,71,.6); letter-spacing:4px;
  text-align:center; margin-bottom:10px; text-transform:uppercase;
}
#lp-wrapper .sec-title{
  font-family:'Cinzel Decorative',serif;
  font-size:clamp(18px,4vw,28px); letter-spacing:2px;
  text-align:center; margin-bottom:8px;
  background:linear-gradient(135deg,var(--gd),var(--g),var(--gl));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
#lp-wrapper .sec-sub{
  font-size:14px; color:var(--fgdd); text-align:center;
  max-width:440px; margin:0 auto 44px; line-height:1.9;
}
#lp-wrapper .inner{ max-width:860px; margin:0 auto; }
#lp-wrapper /* ── DIVIDER ── */
.divider{
  width:60px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,197,71,.5),transparent);
  margin:0 auto 44px;
}
#lp-wrapper /* ── FEATURES ── */
.features-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:14px;
}
#lp-wrapper .feat-card{
  background:rgba(255,255,255,.02);
  border:1px solid rgba(232,197,71,.08);
  border-radius:18px; padding:26px 22px;
  transition:.3s; position:relative; overflow:hidden;
}
#lp-wrapper .feat-card::after{
  content:''; position:absolute; inset:0; border-radius:18px;
  background:linear-gradient(135deg,rgba(232,197,71,.04) 0%,transparent 60%);
  opacity:0; transition:.3s;
}
#lp-wrapper .feat-card:hover{ border-color:rgba(232,197,71,.2); transform:translateY(-3px); box-shadow:0 12px 40px rgba(0,0,0,.5); }
#lp-wrapper .feat-card:hover::after{ opacity:1; }
#lp-wrapper .feat-icon{ font-size:28px; margin-bottom:14px; display:block; color:rgba(232,197,71,.7); }
#lp-wrapper .feat-title{
  font-family:'Cinzel Decorative',serif; font-size:10px;
  color:var(--g); letter-spacing:1.5px; margin-bottom:8px;
}
#lp-wrapper .feat-desc{ font-size:13px; color:var(--fgd); line-height:1.85; }
#lp-wrapper /* ── HOW IT WORKS ── */
.steps{ display:flex; flex-direction:column; gap:0; max-width:560px; margin:0 auto; }
#lp-wrapper .step{
  display:flex; gap:20px; align-items:flex-start;
  padding:24px 0; position:relative;
}
#lp-wrapper .step:not(:last-child)::after{
  content:''; position:absolute;
  left:17px; top:64px; bottom:0; width:1px;
  background:linear-gradient(180deg,rgba(232,197,71,.25),transparent);
}
#lp-wrapper .step-num{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--gdim),var(--g));
  display:flex; align-items:center; justify-content:center;
  font-family:'Cinzel Decorative',serif; font-size:13px; color:#000; font-weight:700;
  box-shadow:0 4px 16px rgba(232,197,71,.2);
}
#lp-wrapper .step-body{ flex:1; padding-top:4px; }
#lp-wrapper .step-title{
  font-family:'Cinzel Decorative',serif; font-size:11px;
  color:var(--g); letter-spacing:1px; margin-bottom:5px;
}
#lp-wrapper .step-desc{ font-size:13px; color:var(--fgd); line-height:1.8; }
#lp-wrapper /* ── CURRICULUM PREVIEW ── */
.curr-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:10px;
}
#lp-wrapper .curr-card{
  background:rgba(255,255,255,.02);
  border:1px solid rgba(232,197,71,.08);
  border-radius:14px; padding:18px 16px;
  display:flex; gap:12px; align-items:flex-start;
  transition:.2s;
}
#lp-wrapper .curr-card:hover{ border-color:rgba(232,197,71,.18); background:rgba(232,197,71,.03); }
#lp-wrapper .curr-emoji{ font-size:20px; flex-shrink:0; color:rgba(232,197,71,.65); }
#lp-wrapper .curr-info{ flex:1; }
#lp-wrapper .curr-day{ font-size:8px; color:var(--gdim); letter-spacing:2px; font-family:'Cinzel Decorative',serif; margin-bottom:3px; text-transform:uppercase; }
#lp-wrapper .curr-name{ font-size:13px; color:var(--fgd); line-height:1.5; }
#lp-wrapper /* ── TESTIMONIALS ── */
.testi-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;
}
#lp-wrapper .testi-card{
  background:rgba(255,255,255,.02);
  border:1px solid rgba(232,197,71,.08);
  border-radius:18px; padding:24px 22px;
  position:relative; transition:.3s;
}
#lp-wrapper .testi-card:hover{ border-color:rgba(232,197,71,.16); transform:translateY(-2px); }
#lp-wrapper .testi-card::before{
  content:'"';
  position:absolute; top:12px; left:18px;
  font-family:'Cormorant Garamond',serif; font-size:52px;
  color:rgba(232,197,71,.08); line-height:1;
}
#lp-wrapper .testi-text{ font-size:13px; color:var(--fgd); line-height:1.95; margin-bottom:18px; font-style:italic; padding-top:8px; }
#lp-wrapper .testi-author{ display:flex; gap:10px; align-items:center; }
#lp-wrapper .testi-avatar{
  width:34px; height:34px; border-radius:50%;
  background:linear-gradient(135deg,var(--gdim),var(--g));
  display:flex; align-items:center; justify-content:center;
  font-size:14px; flex-shrink:0;
}
#lp-wrapper .testi-name{ font-family:'Cinzel Decorative',serif; font-size:9px; color:var(--g); letter-spacing:1px; margin-bottom:2px; }
#lp-wrapper .testi-meta{ font-size:10px; color:var(--fgdd); }
#lp-wrapper /* ── PREMIUM CTA ── */
.prem-section{
  background:rgba(255,255,255,.02);
  border:1px solid rgba(232,197,71,.12);
  border-radius:24px; padding:48px 32px;
  text-align:center; max-width:560px; margin:0 auto;
  position:relative; overflow:hidden;
}
#lp-wrapper .prem-section::before{
  content:''; position:absolute; top:-80px; left:50%; transform:translateX(-50%);
  width:400px; height:400px;
  background:radial-gradient(circle,rgba(232,197,71,.05),transparent 65%);
  pointer-events:none;
}
#lp-wrapper .prem-price{
  font-family:'Cinzel Decorative',serif;
  font-size:44px; color:var(--g);
  margin:14px 0 4px;
}
#lp-wrapper .prem-price-note{ font-size:12px; color:var(--fgdd); margin-bottom:24px; letter-spacing:.5px; }
#lp-wrapper .prem-features{ list-style:none; text-align:left; margin-bottom:28px; }
#lp-wrapper .prem-features li{
  font-size:13px; color:var(--fgd); padding:7px 0;
  border-bottom:1px solid rgba(232,197,71,.06);
  display:flex; gap:10px; align-items:flex-start;
}
#lp-wrapper .prem-features li:last-child{ border-bottom:none; }
#lp-wrapper /* ── FAQ ── */
.faq-list{ max-width:580px; margin:0 auto; }
#lp-wrapper .faq-item{
  border-bottom:1px solid rgba(232,197,71,.08);
  padding:18px 0;
}
#lp-wrapper .faq-q{
  font-family:'Cinzel Decorative',serif; font-size:10px;
  color:var(--fg); letter-spacing:1px; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  line-height:1.5;
}
#lp-wrapper .faq-q span{ color:rgba(232,197,71,.6); font-size:18px; transition:.3s ease; flex-shrink:0; }
#lp-wrapper .faq-a{
  font-size:13px; color:var(--fgd); line-height:1.9;
  max-height:0; overflow:hidden; transition:.35s ease;
}
#lp-wrapper .faq-item.open .faq-a{ max-height:200px; padding-top:10px; }
#lp-wrapper .faq-item.open .faq-q span{ transform:rotate(45deg); color:var(--g); }
#lp-wrapper /* ── FOOTER ── */
footer{
  padding:36px 24px; text-align:center;
  border-top:1px solid rgba(232,197,71,.06);
}
#lp-wrapper .footer-logo{
  font-family:'Cinzel Decorative',serif; font-size:15px; letter-spacing:3px;
  background:linear-gradient(135deg,var(--gdim),var(--g));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  margin-bottom:8px;
}
#lp-wrapper .footer-tagline{ font-size:11px; color:var(--fgdd); letter-spacing:2px; margin-bottom:14px; font-style:italic; }
#lp-wrapper .footer-link{ font-size:11px; color:rgba(232,197,71,.55); text-decoration:none; margin:0 10px; transition:.2s; }
#lp-wrapper .footer-link:hover{ color:var(--g); }
#lp-wrapper .footer-copy{ font-size:10px; color:rgba(240,234,214,.2); margin-top:14px; letter-spacing:.5px; }
#lp-wrapper /* ── SCROLL REVEAL ── */
.reveal{ opacity:0; transform:translateY(24px); transition:.65s ease; }
#lp-wrapper .reveal.visible{ opacity:1; transform:none; }

/* [style id="mx-dove-css"] */
/* MindriX Dove Avatar — theme aware */
.mx-dove-av .mx-dv-bg   { fill: #0f0b1e }
.mx-dove-av .mx-dv-rim  { stroke: #E8C547 }
.mx-dove-av .mx-dv-fill { fill: #E8C547 }
.mx-dove-av .mx-dv-eye  { fill: #0a0800 }
.mx-dove-av .mx-dv-beak { fill: #c9a227 }
.mx-dove-av .mx-dv-branch { stroke: #5a9a3a }
/* Light theme */
[data-theme="light"] .mx-dove-av .mx-dv-bg   { fill: #fffbe6 }
[data-theme="light"] .mx-dove-av .mx-dv-rim  { stroke: #b8860b }
[data-theme="light"] .mx-dove-av .mx-dv-fill { fill: #b8860b }
[data-theme="light"] .mx-dove-av .mx-dv-eye  { fill: #3a2800 }
[data-theme="light"] .mx-dove-av .mx-dv-beak { fill: #7a5400 }
/* Sepia */
[data-theme="sepia"] .mx-dove-av .mx-dv-bg   { fill: #f0e0c0 }
[data-theme="sepia"] .mx-dove-av .mx-dv-rim  { stroke: #7a5400 }
[data-theme="sepia"] .mx-dove-av .mx-dv-fill { fill: #7a5400 }
[data-theme="sepia"] .mx-dove-av .mx-dv-eye  { fill: #2a1800 }
[data-theme="sepia"] .mx-dove-av .mx-dv-beak { fill: #5c3d00 }
/* AMOLED */
[data-theme="amoled"] .mx-dove-av .mx-dv-bg  { fill: #000 }
[data-theme="amoled"] .mx-dove-av .mx-dv-fill{ fill: #E8C547 }
/* Slate / Ocean / Forest / Rose — all use gold on dark */
[data-theme="slate"] .mx-dove-av .mx-dv-bg   { fill: #1e2533 }
[data-theme="ocean"] .mx-dove-av .mx-dv-bg   { fill: #0a1a2d }
[data-theme="ocean"] .mx-dove-av .mx-dv-fill { fill: #00d4ff }
[data-theme="ocean"] .mx-dove-av .mx-dv-rim  { stroke: #00d4ff }
[data-theme="ocean"] .mx-dove-av .mx-dv-beak { fill: #0099cc }
[data-theme="forest"] .mx-dove-av .mx-dv-bg  { fill: #0a1f0a }
[data-theme="forest"] .mx-dove-av .mx-dv-fill{ fill: #7fff00 }
[data-theme="forest"] .mx-dove-av .mx-dv-rim { stroke: #7fff00 }
[data-theme="forest"] .mx-dove-av .mx-dv-beak{ fill: #5ab300 }
[data-theme="rose"] .mx-dove-av .mx-dv-bg    { fill: #2d0a0a }
[data-theme="rose"] .mx-dove-av .mx-dv-fill  { fill: #ffd700 }
[data-theme="rose"] .mx-dove-av .mx-dv-rim   { stroke: #ffd700 }
[data-theme="rose"] .mx-dove-av .mx-dv-beak  { fill: #ffa500 }

/* [style] */
@keyframes spBlob1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-15px,10px) scale(1.15)}}
        @keyframes spBlob2{0%{transform:translate(0,0) scale(1)}100%{transform:translate(10px,-12px) scale(1.2)}}
        @keyframes xpShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
        @keyframes onlinePulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 5px rgba(34,197,94,0)}}

/* [style] */
.wf-chip{border-radius:20px;padding:5px 13px;font-size:10px;cursor:pointer;font-family:'Cormorant Garamond',serif;transition:.2s;white-space:nowrap;border:1px solid var(--bdr);background:var(--card);color:var(--fgd)} .wf-chip.active{background:rgba(232,197,71,.14);border-color:rgba(232,197,71,.4);color:var(--g)}

/* [style] */
@keyframes fabPulse{0%,100%{box-shadow:0 6px 24px rgba(232,197,71,.5),0 0 0 0 rgba(232,197,71,.35)}60%{box-shadow:0 6px 24px rgba(232,197,71,.5),0 0 0 10px rgba(232,197,71,0)}}

/* [style] */
/* Tool tiles */
.tool-tile:hover{transform:translateY(-3px);box-shadow:0 8px 24px var(--shadow)}
.tool-tile:active{transform:scale(.95)}
/* AI chips */
.ai-chip{background:var(--card);border:1px solid var(--bdr);color:var(--txtd);border-radius:20px;padding:5px 11px;font-size:11px;cursor:pointer;transition:.15s;font-family:'Cormorant Garamond',serif}
.ai-chip:hover{background:var(--glow);border-color:var(--g);color:var(--fg)}
/* Dashboard chart labels */
.chart-lbl{font-size:8px;color:var(--fgd);font-family:'Cormorant Garamond',serif;text-align:center}

/* [style] */
/* Flashcard flip */
#fcCard.flipped{background:linear-gradient(135deg,var(--glow),var(--card))}

/* [style] */
@keyframes sytSlideIn{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes sytSlideOut{from{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:0}}

/* ── Full theme-aware SYT styles — inherits --bg,--fg,--txt,--bdr etc from body ── */
#sytScreen{display:none;position:fixed;inset:0;z-index:10001;background:var(--bg);color:var(--txt);flex-direction:column;font-family:'Cormorant Garamond',Georgia,serif;transition:background .4s,color .4s}
#sytScreen *{box-sizing:border-box}
#sytHeader{padding:14px 16px;background:var(--bg2);border-bottom:1px solid var(--bdr);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:10003;flex-shrink:0;transition:background .4s}
#sytBody{flex:1;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--bdr) transparent}

/* Shared components */
.syt-back-btn{background:var(--glow);border:1px solid var(--bdr);color:var(--fg);border-radius:50%;width:36px;height:36px;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.syt-new-btn{background:linear-gradient(135deg,var(--g),var(--gd));border:none;color:var(--bg);border-radius:20px;padding:6px 14px;font-size:12px;font-weight:700;cursor:pointer;letter-spacing:.5px}
.syt-close-btn{background:var(--card);border:1px solid var(--bdr);color:var(--txtd);border-radius:50%;width:32px;height:32px;font-size:14px;cursor:pointer}
.syt-stat-box{background:var(--card);border:1px solid var(--bdr);border-radius:12px;padding:10px;text-align:center}
.syt-stat-num{font-size:18px;font-weight:700;color:var(--fg)}
.syt-stat-lbl{font-size:9px;color:var(--fgd);letter-spacing:.5px}
.syt-quote-box{background:var(--bg3);border:1px solid var(--bdr);border-radius:14px;padding:12px 14px;margin-bottom:14px;position:relative;overflow:hidden;transition:background .4s}
.syt-section-lbl{font-size:10px;color:var(--fgd);letter-spacing:1px;margin-bottom:8px}
.syt-quote-text{font-size:12px;color:var(--txtd);line-height:1.6;font-style:italic}
.syt-input{width:100%;background:var(--card);border:1px solid var(--bdr);border-radius:12px;padding:12px 14px;color:var(--txt);outline:none;font-family:'Cormorant Garamond',serif;transition:background .4s,border-color .2s;-webkit-appearance:none;display:block}
.syt-input:focus{border-color:var(--g)}
.syt-textarea{width:100%;background:var(--card);border:1px solid var(--bdr);border-radius:12px;padding:14px;color:var(--txt);font-size:14px;line-height:1.8;outline:none;resize:none;min-height:240px;font-family:'Cormorant Garamond',serif;transition:background .4s,border-color .2s;-webkit-appearance:none;display:block}
.syt-textarea:focus{border-color:var(--g)}
.syt-wc{text-align:right;font-size:10px;color:var(--fgd);margin-top:4px}
.syt-section-box{background:var(--bg3);border:1px solid var(--bdr);border-radius:16px;padding:14px;margin-bottom:14px;transition:background .4s}
.syt-tag-pill{flex-shrink:0;background:var(--card);border:1px solid var(--bdr);color:var(--txtd);border-radius:20px;padding:5px 12px;font-size:11px;cursor:pointer;white-space:nowrap;transition:.15s;font-family:inherit}
.syt-tag-pill.on{background:linear-gradient(135deg,var(--g),var(--gd));border-color:transparent;color:var(--bg);font-weight:700}
.syt-mood-btn{display:flex;flex-direction:column;align-items:center;gap:4px;background:transparent;border:1px solid transparent;border-radius:12px;padding:6px 4px;cursor:pointer;transition:.2s;min-width:40px;font-family:inherit}
.syt-mood-btn.on{background:var(--glow);border-color:var(--bdr)}
.syt-mood-lbl{font-size:9px;color:var(--txtd);white-space:nowrap}
.syt-cat-btn{background:var(--card);border:1px solid var(--bdr);color:var(--txtd);border-radius:16px;padding:5px 10px;font-size:11px;cursor:pointer;transition:.15s;font-family:inherit}
.syt-cat-btn.on{background:linear-gradient(135deg,var(--g),var(--gd));border-color:transparent;color:var(--bg)}
.syt-prompt-btn{background:var(--bg3);border:1px solid var(--bdr);color:var(--fgd);border-radius:16px;padding:5px 10px;font-size:11px;cursor:pointer;transition:.15s;font-family:inherit}
.syt-save-btn{width:100%;margin-top:16px;background:linear-gradient(135deg,var(--g),var(--gd));border:none;color:var(--bg);border-radius:16px;padding:15px;font-size:15px;font-weight:700;cursor:pointer;font-family:'Cinzel Decorative',serif;letter-spacing:.5px}

/* Card */
.syt-card{background:var(--card);border:1px solid var(--bdr);border-radius:16px;padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:.2s;position:relative;overflow:hidden}
.syt-card:active{background:var(--glow)}
.syt-card-stripe{position:absolute;top:0;left:0;width:3px;height:100%;background:linear-gradient(to bottom,var(--g),var(--gd));border-radius:3px 0 0 3px}
.syt-card-title{font-size:14px;font-weight:600;color:var(--txt);margin-top:4px;line-height:1.3}
.syt-card-preview{font-size:12px;color:var(--txtd);line-height:1.6}
.syt-card-date{font-size:10px;color:var(--fgd)}
.syt-card-words{font-size:10px;color:var(--fg);opacity:.6}
.syt-del-icon-btn{background:var(--card);border:1px solid rgba(255,80,80,.3);color:rgba(255,100,100,.7);border-radius:8px;width:30px;height:30px;cursor:pointer;font-size:13px;flex-shrink:0;transition:.15s}

/* Badges */
.syt-badge-tag{background:var(--glow);border:1px solid var(--bdr);border-radius:12px;padding:3px 9px;font-size:10px;color:var(--fg)}
.syt-badge-mood{background:var(--card);border:1px solid var(--bdr);border-radius:12px;padding:4px 10px;font-size:11px;color:var(--txtd)}
.syt-badge-time{background:var(--card);border:1px solid var(--bdr);border-radius:12px;padding:4px 10px;font-size:11px;color:var(--txtd)}

/* Detail view */
.syt-detail-title{font-size:22px;color:var(--fg);font-family:'Cinzel Decorative',serif;margin-bottom:6px;line-height:1.3}
.syt-detail-meta{font-size:11px;color:var(--fgd);margin-bottom:24px}
.syt-detail-body{font-size:15px;color:var(--txt);line-height:1.9;white-space:pre-wrap;font-family:'Cormorant Garamond',serif}
.syt-action-btn{flex:1;border-radius:14px;padding:12px;font-size:13px;cursor:pointer;background:var(--card);border:1px solid var(--bdr);color:var(--txt);font-family:inherit}
.syt-del-btn{background:var(--card);border:1px solid rgba(255,80,80,.35);color:rgba(255,100,100,.8);border-radius:14px;padding:12px 16px;font-size:13px;cursor:pointer}

/* Empty state */
.syt-empty-title{color:var(--txtd);font-size:14px;margin-bottom:8px}
.syt-empty-sub{color:var(--fgd);font-size:12px}

/* FAB */
.syt-fab{position:fixed;bottom:90px;right:20px;z-index:9980;background:linear-gradient(135deg,var(--g),var(--gd));border:none;border-radius:50%;width:52px;height:52px;font-size:22px;cursor:pointer;box-shadow:0 4px 20px rgba(212,175,55,.4);transition:.2s;display:flex;align-items:center;justify-content:center}
.syt-fab-label{position:fixed;bottom:148px;right:14px;z-index:9980;background:var(--bg2);border:1px solid var(--bdr);border-radius:20px;padding:4px 10px;font-size:10px;color:var(--fg);letter-spacing:.5px;white-space:nowrap;animation:sytFabPulse 3s ease-in-out infinite;pointer-events:none}
@keyframes sytFabPulse{0%,100%{opacity:.6}50%{opacity:1}}

/* Back to app bar */
.syt-back-bar{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:10005;background:var(--bg2);border:1px solid var(--bdr);border-radius:30px;padding:10px 24px;font-size:12px;cursor:pointer;letter-spacing:1px;display:flex;align-items:center;gap:8px;font-family:'Cinzel Decorative',serif;color:var(--fg);transition:background .4s}

/* Custom confirm modal */
#sytConfirm{display:none;position:fixed;inset:0;z-index:10010;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);align-items:center;justify-content:center;padding:20px}
#sytConfirm.open{display:flex}
.syt-confirm-box{background:var(--bg2);border:1px solid var(--bdr);border-radius:20px;padding:28px 24px;max-width:300px;width:100%;text-align:center}
.syt-confirm-title{font-size:16px;color:var(--fg);font-weight:600;margin-bottom:8px}
.syt-confirm-sub{font-size:13px;color:var(--txtd);margin-bottom:24px;line-height:1.5}
.syt-confirm-yes{width:100%;background:rgba(255,60,60,.15);border:1px solid rgba(255,80,80,.4);color:rgba(255,100,100,.9);border-radius:12px;padding:12px;font-size:14px;cursor:pointer;margin-bottom:8px;font-family:inherit}
.syt-confirm-no{width:100%;background:var(--card);border:1px solid var(--bdr);color:var(--txt);border-radius:12px;padding:12px;font-size:14px;cursor:pointer;font-family:inherit}

/* [style] */
.bm-tab-row{display:flex;gap:8px;padding:14px 18px 0;width:100%;max-width:440px;margin:0 auto}
.bm-tab{flex:1;background:var(--card);border:1px solid var(--bdr);border-radius:12px;padding:10px 6px;cursor:pointer;text-align:center;transition:.2s}
.bm-tab.bm-active{background:rgba(212,175,55,.15);border-color:rgba(212,175,55,.5)}
.bm-tab-icon{font-size:18px;display:block;margin-bottom:2px}
.bm-tab-name{font-family:"Cinzel Decorative",serif;font-size:7px;color:var(--fg);letter-spacing:1px;display:block}
.bm-tab-desc{font-size:9px;color:var(--gd);font-family:"Cormorant Garamond",serif;display:block;margin-top:1px}
.bm-ring-wrap{position:relative;width:220px;height:220px;margin:18px auto 0;display:flex;align-items:center;justify-content:center}
.bm-inner{width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 40% 35%,var(--bg3),var(--bg2));border:2px solid var(--bdr);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform 1s cubic-bezier(.4,0,.2,1),box-shadow 1s;box-shadow:0 0 30px var(--shadow);position:relative;z-index:2}
.bm-inner.bm-inhale{transform:scale(1.2);box-shadow:0 0 55px var(--shadow)}
.bm-inner.bm-exhale{transform:scale(0.83);box-shadow:0 0 12px var(--shadow)}
.bm-stat-row{display:flex;gap:8px;padding:14px 18px 0;width:100%;max-width:440px;margin:0 auto}
.bm-stat{flex:1;background:var(--card);border:1px solid var(--bdr);border-radius:12px;padding:10px;text-align:center}
.bm-stat-v{font-family:"Cinzel Decorative",serif;font-size:16px;color:var(--fg);display:block}
.bm-stat-l{font-size:8px;color:var(--fgd);letter-spacing:1px;font-family:"Cormorant Garamond",serif;display:block;margin-top:1px}

/* [style] */
/* Feature card hover effects */
.feat-card-btn:hover{transform:translateY(-3px);box-shadow:0 8px 24px var(--shadow);border-color:var(--gd)!important}
.feat-card-btn:active{transform:scale(.96)}
/* Breathe modal flex */
#breatheModal{display:none}
#breatheModal.open{display:flex}

/* [style] */
.reflect-time-btn{background:var(--card);border:1px solid var(--bdr);color:var(--fgd);border-radius:20px;padding:6px 14px;font-size:11px;cursor:pointer;font-family:'Cormorant Garamond',serif;transition:.2s}
.reflect-time-btn.active-rt{background:linear-gradient(135deg,var(--g),var(--gd));border-color:transparent;color:#000;font-weight:700}

/* [style] */
@keyframes pwaSlideUp{from{opacity:0;transform:translateX(-50%) translateY(30px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* [style] */
.habit-emoji-opt{background:var(--card);border:1px solid var(--bdr);border-radius:10px;font-size:20px;padding:8px;cursor:pointer;transition:.2s;width:100%}
.habit-emoji-opt:hover,.habit-emoji-opt.active{background:var(--glow);border-color:var(--g)}

/* [style] */
/* Sleep quality buttons */
.sleep-q-btn{flex:1;background:var(--card);border:1px solid var(--bdr);border-radius:10px;padding:8px 4px;font-size:11px;color:var(--txtd);cursor:pointer;transition:.2s;font-family:'Cormorant Garamond',serif}
.sleep-q-btn.active{background:var(--glow);border-color:var(--g);color:var(--fg);font-weight:700}
/* Goal cards */
.goal-card{background:var(--card);border:1px solid var(--bdr);border-radius:14px;padding:14px;margin-bottom:10px;position:relative}
.goal-card.done-goal{border-color:rgba(76,175,80,.3);background:rgba(76,175,80,.04)}
/* Reading book rows */
.book-row{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--bdr)}
.book-row:last-child{border-bottom:none}
.book-check-btn{width:26px;height:26px;border-radius:8px;border:2px solid var(--bdr);background:transparent;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:.2s;font-size:13px}
.book-check-btn.read{background:linear-gradient(135deg,var(--g),var(--gd));border-color:transparent}
/* Personality test */
.pt-option{width:100%;background:var(--card);border:1px solid var(--bdr);border-radius:12px;padding:13px 16px;font-size:13px;color:var(--txt);cursor:pointer;margin-bottom:8px;text-align:left;transition:.2s;font-family:'Cormorant Garamond',serif}
.pt-option:hover{background:var(--glow);border-color:var(--g)}
/* Note cards */
.note-card{background:var(--card);border:1px solid var(--bdr);border-radius:12px;padding:12px 14px;margin-bottom:8px;position:relative}

/* [style] */
/* Deep Work Timer */
.dw-time-btn{background:var(--card);border:1px solid var(--bdr);color:var(--fgd);border-radius:20px;padding:7px 14px;font-size:11px;cursor:pointer;font-family:Cormorant Garamond,serif;transition:.2s}
.dw-time-btn.active-dw{background:linear-gradient(135deg,var(--g),var(--gd));border-color:transparent;color:#000;font-weight:700}
/* Premium lock overlay for tools */
.prem-tool-overlay{position:absolute;inset:0;background:rgba(0,0,0,.45);border-radius:18px;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.tool-tile{position:relative}

/* [style] */
@keyframes t4In{from{opacity:0;transform:translateX(-50%) translateY(24px) scale(.93)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
@keyframes t4Bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes t4SpotPulse{0%,100%{box-shadow:0 0 0 4000px rgba(0,0,0,0),0 0 0 3px var(--g),0 0 20px rgba(232,197,71,.5),0 0 60px rgba(232,197,71,.2)}50%{box-shadow:0 0 0 4000px rgba(0,0,0,0),0 0 0 4px var(--gl),0 0 40px rgba(232,197,71,.8),0 0 80px rgba(232,197,71,.3)}}
@keyframes t4BarFill{from{width:0}to{width:100%}}
@keyframes t4Shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@keyframes tourBtnPulse{0%,100%{box-shadow:0 0 0 0 rgba(232,197,71,0.5)}50%{box-shadow:0 0 0 7px rgba(232,197,71,0)}}
#t4Spot.active{animation:t4SpotPulse 2s ease-in-out infinite}
#t4Card{animation:t4In .4s cubic-bezier(.4,0,.2,1) forwards}

/* [style] */
\n' + css + '\n

/* [style] */
/* Mood Journal */
#mjScreen{display:none;position:fixed;inset:0;z-index:1200;background:var(--bg);overflow-y:auto}
#mjScreen.mj-on{display:block}
.mj-wrap{max-width:480px;margin:0 auto;padding-bottom:80px}
.mj-hdr{background:var(--bg2);padding:20px 18px 14px;position:sticky;top:0;z-index:10;border-bottom:1px solid var(--bdr);display:flex;align-items:center;gap:12px}
.mj-back{width:36px;height:36px;border-radius:50%;background:var(--card);border:1px solid var(--bdr);color:var(--fg);font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.mj-emoji-row{display:flex;justify-content:space-around;padding:0 14px 12px;gap:6px}
.mj-eb{flex:1;aspect-ratio:1;border-radius:12px;border:2px solid var(--bdr);background:var(--bg2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:22px;transition:.2s}
.mj-eb.mj-sel{border-color:rgba(251,113,133,.7);background:rgba(251,113,133,.12);transform:scale(1.08)}
.mj-eb span.lbl{font-size:8px;color:var(--fgd);font-family:"Cormorant Garamond",serif}
.mj-tag{padding:5px 11px;border-radius:20px;border:1px solid var(--bdr);background:var(--bg2);color:var(--fgd);font-size:11px;font-family:"Cormorant Garamond",serif;cursor:pointer;transition:.2s;display:inline-block;margin:3px}
.mj-tag.mj-tsel{background:rgba(251,113,133,.15);border-color:rgba(251,113,133,.5);color:var(--txt)}
.mj-save{width:100%;background:linear-gradient(135deg,rgba(251,113,133,.85),rgba(251,113,133,.6));border:none;color:#fff;border-radius:14px;padding:14px;font-family:"Cinzel Decorative",serif;font-size:10px;font-weight:700;letter-spacing:2px;cursor:pointer;margin-top:4px}
.mj-bar-wrap{display:flex;align-items:flex-end;gap:5px;height:70px}
.mj-bar{flex:1;border-radius:5px 5px 0 0;min-height:4px;transition:.6s}
.mj-hist-item{display:flex;gap:12px;padding:10px 16px;border-bottom:1px solid var(--bdr);align-items:flex-start}
.mj-hist-item:last-child{border-bottom:none}

/* Daily Check-in Banner */
#dciCard{margin:12px 18px 0;background:linear-gradient(135deg,rgba(96,165,250,.12),rgba(96,165,250,.04));border:1px solid rgba(96,165,250,.35);border-radius:16px;padding:16px;cursor:pointer;transition:.3s}
#dciCard:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(96,165,250,.2)}

/* Badges */
/* ══════════════════════════════════════════════
   BADGES SCREEN — Professional Redesign
══════════════════════════════════════════════ */
#badgesScreen{display:none;position:fixed;inset:0;z-index:1200;background:var(--bg);overflow-y:auto;-webkit-overflow-scrolling:touch}
#badgesScreen.bdg-on{display:block}

/* Animations */
@keyframes bdgShimmer{0%{left:-60%}100%{left:120%}}
@keyframes bdgDetailUp{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes bdgMedalPop{0%{transform:scale(0) rotate(-15deg);opacity:0}70%{transform:scale(1.12) rotate(3deg)}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes bdgFadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes bdgPulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(232,197,71,.0)}50%{box-shadow:0 0 22px 4px rgba(232,197,71,.18)}}
@keyframes bdgProgressFill{from{width:0}to{width:var(--pct)}}
@keyframes bdgHeaderReveal{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

/* Header */
#bdgHeader{
  background:linear-gradient(180deg,rgba(232,197,71,.07) 0%,transparent 100%);
  padding:20px 18px 18px;
  position:sticky;top:0;z-index:10;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(232,197,71,.14);
  animation:bdgHeaderReveal .35s ease both;
}
#bdgHeaderInner{display:flex;align-items:center;gap:14px}
#bdgBackBtn{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  color:var(--fg);font-size:17px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;
  transition:background .2s,border-color .2s;
}
#bdgBackBtn:active{background:rgba(232,197,71,.15);border-color:rgba(232,197,71,.4)}
#bdgTitleWrap{flex:1}
#bdgTitleMain{
  font-family:"Cinzel Decorative",serif;font-size:16px;
  color:var(--fg);letter-spacing:.5px;
  display:flex;align-items:center;gap:8px;line-height:1.2;
}
#bdgTitleMain .bdg-trophy-icon{
  color:#E8C547;font-size:17px;filter:drop-shadow(0 0 6px rgba(232,197,71,.5));
}
#bdgSubtitle{font-size:11px;color:var(--fgd);margin-top:3px;font-family:"Cormorant Garamond",serif;letter-spacing:.3px}

/* Progress Card */
.bdg-progress-card{
  margin:18px 16px 6px;
  padding:16px 18px;
  background:linear-gradient(135deg,rgba(232,197,71,.07),rgba(232,197,71,.02));
  border:1px solid rgba(232,197,71,.2);
  border-radius:20px;
  position:relative;overflow:hidden;
}
.bdg-progress-card::before{
  content:'';position:absolute;top:-40px;right:-40px;
  width:100px;height:100px;
  background:radial-gradient(circle,rgba(232,197,71,.12),transparent 70%);
  pointer-events:none;
}
.bdg-prog-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.bdg-prog-label{font-family:"Cinzel Decorative",serif;font-size:8.5px;color:var(--gd);letter-spacing:2.5px}
.bdg-prog-pct{font-family:"Cinzel Decorative",serif;font-size:15px;color:var(--fg);font-weight:900}
.bdg-prog-bar-bg{height:7px;background:rgba(255,255,255,.07);border-radius:20px;overflow:hidden}
.bdg-prog-bar-fill{
  height:100%;border-radius:20px;
  background:linear-gradient(90deg,#b8962a,#E8C547,#ffe87a);
  background-size:200% 100%;
  animation:bdgProgressFill 1.2s cubic-bezier(.22,1,.36,1) both .2s;
  box-shadow:0 0 10px rgba(232,197,71,.4);
}
.bdg-prog-counts{display:flex;gap:6px;margin-top:10px}
.bdg-prog-pill{
  padding:3px 10px;border-radius:20px;font-size:8.5px;
  font-family:"Cinzel Decorative",serif;letter-spacing:.5px;
}

/* Category Section */
.bdg-cat-section{
  margin:0 16px 24px;
  animation:bdgFadeIn .4s ease both;
}
.bdg-cat-header{
  display:flex;align-items:center;gap:8px;
  margin-bottom:14px;padding:0 2px;
}
.bdg-cat-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.bdg-cat-label{
  font-family:"Cinzel Decorative",serif;
  font-size:8px;letter-spacing:3px;font-weight:700;
}
.bdg-cat-line{flex:1;height:1px;background:rgba(255,255,255,.06)}
.bdg-cat-count{font-size:9px;color:var(--fgd);font-family:"Cormorant Garamond",serif}

/* Badge Card — full redesign */
.bdg-card-pro{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;padding:16px 12px 14px;
  text-align:center;cursor:pointer;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s, border-color .22s;
  position:relative;overflow:hidden;
}
.bdg-card-pro.earned{
  background:linear-gradient(145deg,rgba(232,197,71,.1),rgba(232,197,71,.03));
  border-color:rgba(232,197,71,.35);
}
.bdg-card-pro.earned:active{transform:scale(.97)}
.bdg-card-pro.locked{opacity:.5;filter:grayscale(.6)}
.bdg-card-pro .bdg-shimmer-bar{
  position:absolute;top:0;left:-60%;width:40%;height:100%;
  pointer-events:none;
}
.bdg-card-pro .bdg-medal-wrap{display:flex;justify-content:center;margin-bottom:11px}
.bdg-card-pro .bdg-name{
  font-family:"Cinzel Decorative",serif;
  font-size:8.5px;letter-spacing:.5px;line-height:1.45;
  margin-bottom:5px;
}
.bdg-card-pro .bdg-desc{
  font-size:9px;line-height:1.5;
  font-family:"Cormorant Garamond",serif;
}
.bdg-card-pro .bdg-xp-tag{
  display:inline-flex;align-items:center;gap:3px;
  margin-top:8px;border-radius:20px;
  padding:3px 9px;font-size:8px;
  font-family:"Cinzel Decorative",serif;
}
.bdg-card-pro .bdg-tier-label{
  margin-top:5px;font-size:7.5px;
  font-family:"Cinzel Decorative",serif;letter-spacing:1.5px;
}

/* Cards Grid */
.bdg-cards-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}

/* [style] */
/* ── Post Lesson Check ── */
#postLessonModal{
  display:none;position:fixed;inset:0;z-index:9800;
  background:rgba(0,0,0,.82);backdrop-filter:blur(14px);
  align-items:flex-end;justify-content:center;padding:0;
}
#postLessonModal.plm-show{display:flex}
.plm-sheet{
  background:var(--bg2);border-radius:28px 28px 0 0;
  border:1px solid var(--bdr);border-bottom:none;
  width:100%;max-width:480px;padding:24px 20px 36px;
  animation:sheetUp .4s cubic-bezier(.34,1.2,.64,1) both;
}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.plm-handle{width:40px;height:4px;border-radius:2px;background:var(--bdr);margin:0 auto 20px}
.plm-emoji-big{font-size:44px;text-align:center;display:block;margin-bottom:6px}
.plm-title{font-family:'Cinzel Decorative',serif;font-size:14px;color:var(--fg);text-align:center;margin-bottom:4px}
.plm-sub{font-size:12px;color:var(--fgd);text-align:center;font-family:'Cormorant Garamond',serif;margin-bottom:20px}
.plm-q{font-family:'Cinzel Decorative',serif;font-size:9px;color:var(--gd);letter-spacing:2px;text-align:center;margin-bottom:14px}
.plm-reactions{display:flex;gap:8px;justify-content:center;margin-bottom:20px}
.plm-reaction{
  flex:1;max-width:72px;display:flex;flex-direction:column;align-items:center;
  gap:5px;padding:12px 6px;border-radius:16px;border:1.5px solid var(--bdr);
  background:var(--card);cursor:pointer;transition:.2s;
}
.plm-reaction:hover,.plm-reaction:active{transform:scale(1.08);border-color:rgba(212,175,55,.5);background:rgba(212,175,55,.08)}
.plm-reaction span:first-child{font-size:26px}
.plm-reaction span:last-child{font-size:9px;color:var(--fgd);font-family:'Cormorant Garamond',serif;text-align:center}
.plm-note-wrap{margin-bottom:16px}
.plm-note{width:100%;background:var(--card);border:1px solid var(--bdr);border-radius:12px;padding:11px 14px;color:var(--txt);font-size:13px;font-family:'Cormorant Garamond',serif;resize:none;outline:none;box-sizing:border-box;transition:.3s}
.plm-note:focus{border-color:rgba(212,175,55,.4)}
.plm-note::placeholder{color:var(--fgd)}
.plm-save-btn{width:100%;background:linear-gradient(135deg,var(--gdim),var(--g));border:none;color:#000;border-radius:14px;padding:14px;font-family:'Cinzel Decorative',serif;font-size:10px;font-weight:700;letter-spacing:2px;cursor:pointer;transition:.3s}
.plm-save-btn:hover{box-shadow:0 6px 20px var(--shadow);transform:translateY(-1px)}
.plm-skip{display:block;text-align:center;margin-top:10px;font-size:11px;color:var(--fgd);cursor:pointer;font-family:'Cormorant Garamond',serif;background:none;border:none;width:100%}

/* ── Badge Popup ── */
#mxBadgePopup{
  display:none;position:fixed;top:70px;left:50%;
  transform:translateX(-50%);z-index:9999;
  background:var(--bg2);border:1px solid rgba(212,175,55,.4);
  border-radius:20px;padding:16px 22px 18px;min-width:260px;max-width:320px;
  box-shadow:0 8px 40px rgba(0,0,0,.5),0 0 30px rgba(212,175,55,.15);
  text-align:center;pointer-events:none;
  animation:bdgPop .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes bdgPop{
  from{opacity:0;transform:translateX(-50%) translateY(-24px) scale(.85)}
  to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}
.mbp-shimmer{position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(212,175,55,.2),transparent);
  animation:shim 1.8s .2s ease;border-radius:20px}
.mbp-icon{font-size:48px;display:block;margin-bottom:8px;
  animation:iconBounce .6s .15s cubic-bezier(.34,1.56,.64,1) both}
@keyframes iconBounce{from{transform:scale(0) rotate(-15deg)}to{transform:scale(1) rotate(0)}}
.mbp-label{font-family:'Cinzel Decorative',serif;font-size:8px;color:var(--gd);letter-spacing:3px;margin-bottom:4px}
.mbp-name{font-family:'Cinzel Decorative',serif;font-size:15px;color:var(--fg);margin-bottom:4px}
.mbp-desc{font-size:11px;color:var(--fgd);font-family:'Cormorant Garamond',serif}

/* ── Affirmation Card Modal ── */
#affirmCardModal{
  display:none;position:fixed;inset:0;z-index:9700;
  background:rgba(0,0,0,.82);backdrop-filter:blur(16px);
  align-items:center;justify-content:center;padding:20px;
}
#affirmCardModal.acm-show{display:flex}
.acm-card{
  background:linear-gradient(145deg,var(--bg2),var(--bg3));
  border:1px solid var(--bdr);border-radius:28px;
  padding:32px 24px 26px;max-width:340px;width:100%;
  text-align:center;position:relative;overflow:hidden;
  animation:acmIn .4s cubic-bezier(.34,1.2,.64,1) both;
}
@keyframes acmIn{from{opacity:0;transform:scale(.88) translateY(16px)}to{opacity:1;transform:none}}
.acm-card::before{content:'';position:absolute;top:-50px;left:-50px;
  width:180px;height:180px;
  background:radial-gradient(circle,rgba(212,175,55,.1),transparent 70%);pointer-events:none}
.acm-close{position:absolute;top:14px;right:14px;background:var(--card);border:1px solid var(--bdr);
  color:var(--fgd);border-radius:50%;width:30px;height:30px;cursor:pointer;
  font-size:14px;display:flex;align-items:center;justify-content:center;transition:.2s;pointer-events:all}
.acm-close:hover{background:rgba(212,175,55,.1);color:var(--fg)}
.acm-pill{display:inline-block;background:linear-gradient(135deg,var(--gdim),var(--g));color:#000;
  font-family:'Cinzel Decorative',serif;font-size:7px;letter-spacing:2px;
  padding:4px 14px;border-radius:20px;margin-bottom:18px;font-weight:700}
.acm-emoji{font-size:52px;display:block;margin-bottom:14px;
  animation:acmEmoji .5s .1s cubic-bezier(.34,1.56,.64,1) both}
@keyframes acmEmoji{from{transform:scale(0)}to{transform:scale(1)}}
.acm-text{font-family:'Cinzel Decorative',serif;font-size:15px;color:var(--fg);line-height:1.65;margin-bottom:8px}
.acm-sub{font-size:12px;color:var(--fgd);font-family:'Cormorant Garamond',serif;font-style:italic;margin-bottom:24px;line-height:1.6}
.acm-counter{font-size:9px;color:var(--fgd);font-family:'Cinzel Decorative',serif;letter-spacing:1px;margin-bottom:14px}
.acm-actions{display:flex;gap:10px}
.acm-btn-next{flex:1;background:var(--card);border:1px solid var(--bdr);color:var(--fgd);
  border-radius:12px;padding:12px;font-size:12px;cursor:pointer;
  font-family:'Cormorant Garamond',serif;transition:.2s}
.acm-btn-next:hover{border-color:var(--gd);color:var(--fg)}
.acm-btn-share{flex:2;background:linear-gradient(135deg,var(--gdim),var(--g));
  border:none;color:#000;border-radius:12px;padding:12px;
  font-family:'Cinzel Decorative',serif;font-size:9px;font-weight:700;
  letter-spacing:2px;cursor:pointer;transition:.3s;position:relative;overflow:hidden}
.acm-btn-share::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  animation:shim 2.5s infinite}
.acm-btn-share:hover{box-shadow:0 4px 16px var(--shadow);transform:translateY(-1px)}

/* [style] */
/* ── Brain Challenge Screen ── */
#brainChallengeScreen {
  display:none; position:fixed; inset:0; z-index:1500;
  background:var(--bg); overflow-y:auto;
}
#brainChallengeScreen.dbc-open { display:block; animation:slideUp .35s ease; }

.dbc-wrap { max-width:480px; margin:0 auto; padding:0 0 100px; }

/* Header */
.dbc-hdr {
  background:var(--bg2); padding:18px 18px 14px;
  position:sticky; top:0; z-index:10;
  border-bottom:1px solid var(--bdr);
  display:flex; align-items:center; gap:12px;
}
.dbc-back {
  background:var(--card); border:1px solid var(--bdr); color:var(--fg);
  width:36px; height:36px; border-radius:50%; font-size:16px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:.3s;
}
.dbc-hdr-info { flex:1; }
.dbc-hdr-title {
  font-family:'Cinzel Decorative',serif; font-size:12px;
  color:var(--fg); letter-spacing:1.5px;
}
.dbc-hdr-sub {
  font-size:10px; color:var(--gd);
  font-family:'Cormorant Garamond',serif; margin-top:2px;
}
.dbc-streak-badge {
  background:linear-gradient(135deg,rgba(255,100,0,.15),rgba(232,197,71,.1));
  border:1px solid rgba(255,150,0,.3); border-radius:12px;
  padding:6px 12px; text-align:center; flex-shrink:0;
}
.dbc-streak-num {
  font-family:'Cinzel Decorative',serif; font-size:16px; color:#fb923c; line-height:1;
}
.dbc-streak-lbl {
  font-size:8px; color:var(--fgd); letter-spacing:1px;
  font-family:'Cormorant Garamond',serif; margin-top:1px;
}

/* Hero */
.dbc-hero {
  padding:24px 18px 0; text-align:center;
}
.dbc-hero-icon {
  font-size:52px; display:block; margin-bottom:10px;
  animation:dbc-float 3s ease-in-out infinite;
}
@keyframes dbc-float {
  0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)}
}
.dbc-hero-title {
  font-family:'Cinzel Decorative',serif;
  font-size:clamp(14px,4vw,18px); color:var(--fg);
  letter-spacing:1px; margin-bottom:6px; line-height:1.4;
}
.dbc-hero-tag {
  display:inline-block;
  background:linear-gradient(135deg,var(--gdim),var(--g));
  color:#000; font-family:'Cinzel Decorative',serif;
  font-size:8px; letter-spacing:2px; padding:4px 14px;
  border-radius:20px; margin-bottom:16px;
}

/* Timer Ring */
.dbc-timer-wrap {
  display:flex; align-items:center; justify-content:center; margin:16px 0 20px;
}
.dbc-timer-ring {
  position:relative; width:80px; height:80px;
}
.dbc-timer-ring svg { transform:rotate(-90deg); }
.dbc-timer-ring circle {
  fill:none; stroke-width:5; stroke-linecap:round;
}
.dbc-ring-bg { stroke:var(--fg-dim); }
.dbc-ring-fill {
  stroke:var(--g);
  stroke-dasharray:220;
  stroke-dashoffset:0;
  transition:stroke-dashoffset 1s linear;
}
.dbc-timer-num {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Cinzel Decorative',serif; font-size:20px; color:var(--fg);
}

/* Challenge Card */
.dbc-card {
  margin:0 16px; background:var(--card);
  border:1px solid var(--bdr); border-radius:18px;
  padding:20px; position:relative; overflow:hidden;
}
.dbc-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--g),transparent);
}
.dbc-cat-badge {
  display:inline-block; font-size:9px; letter-spacing:2px;
  padding:3px 12px; border-radius:20px; margin-bottom:12px;
  font-family:'Cormorant Garamond',serif;
}
.dbc-scenario {
  font-size:14px; color:var(--txt); line-height:1.85;
  margin-bottom:16px; font-family:'Noto Sans Devanagari',sans-serif;
}
.dbc-scenario b { color:var(--fg); }
.dbc-question {
  font-family:'Cinzel Decorative',serif; font-size:11px;
  color:var(--fg); letter-spacing:.5px; margin-bottom:14px;
  background:rgba(232,197,71,.06); border:1px solid rgba(232,197,71,.18);
  border-radius:10px; padding:11px 14px;
}

/* Options */
.dbc-opts { display:flex; flex-direction:column; gap:9px; }
.dbc-opt {
  background:var(--card); border:1.5px solid var(--bdr);
  border-radius:12px; padding:13px 15px;
  font-size:13px; color:var(--txt); cursor:pointer;
  transition:all .25s; text-align:left; width:100%;
  font-family:'Noto Sans Devanagari',sans-serif; line-height:1.5;
}
.dbc-opt:hover:not(:disabled) {
  background:rgba(232,197,71,.08); border-color:rgba(232,197,71,.35); color:var(--fg);
}
.dbc-opt.dbc-correct {
  background:rgba(76,175,80,.1)!important; border-color:#4CAF50!important;
  color:#7bc97e!important;
}
.dbc-opt.dbc-wrong {
  background:rgba(248,81,73,.08)!important; border-color:#f85149!important;
  color:#f85149!important;
}

/* Result */
.dbc-result {
  margin:16px 0 0; border-radius:12px; padding:14px;
  display:none; font-size:13px; line-height:1.75;
  font-family:'Cormorant Garamond',serif;
}
.dbc-result.dbc-res-show { display:block; animation:secIn .4s ease both; }
.dbc-result.dbc-res-correct {
  background:rgba(76,175,80,.07); border:1px solid rgba(76,175,80,.28); color:#7bc97e;
}
.dbc-result.dbc-res-wrong {
  background:rgba(248,81,73,.07); border:1px solid rgba(248,81,73,.28); color:#f85149;
}
.dbc-res-explanation {
  margin-top:8px; font-size:12px; color:var(--txt);
  border-top:1px solid rgba(255,255,255,.08); padding-top:8px; line-height:1.8;
}

/* Xp & Next */
.dbc-xp-bar {
  margin:20px 16px 0; background:var(--card); border:1px solid var(--bdr);
  border-radius:14px; padding:14px 16px;
  display:flex; align-items:center; gap:12px;
}
.dbc-xp-icon { font-size:24px; flex-shrink:0; }
.dbc-xp-info { flex:1; }
.dbc-xp-label {
  font-family:'Cinzel Decorative',serif; font-size:10px; color:var(--fg); letter-spacing:1px;
}
.dbc-xp-val {
  font-family:'Cinzel Decorative',serif; font-size:18px; color:var(--g); margin-top:2px;
}

.dbc-next-btn {
  margin:14px 16px 0; width:calc(100% - 32px);
  background:linear-gradient(135deg,var(--gdim),var(--g),var(--gdim));
  background-size:200% 100%; color:#000; border:none; border-radius:14px;
  padding:15px; font-family:'Cinzel Decorative',serif; font-size:10px;
  font-weight:700; letter-spacing:2px; cursor:pointer; display:none; transition:all .4s;
}
.dbc-next-btn.dbc-show { display:block; animation:secIn .3s ease both; }
.dbc-next-btn:hover { background-position:100% 0; box-shadow:0 6px 22px var(--shadow); }

/* Already done card */
.dbc-done-card {
  margin:20px 16px 0; background:linear-gradient(135deg,rgba(76,175,80,.08),rgba(76,175,80,.02));
  border:1px solid rgba(76,175,80,.25); border-radius:18px; padding:22px; text-align:center;
}
.dbc-done-icon { font-size:44px; display:block; margin-bottom:10px; }
.dbc-done-title {
  font-family:'Cinzel Decorative',serif; font-size:13px; color:#5DD876; letter-spacing:1.5px; margin-bottom:8px;
}
.dbc-done-sub {
  font-size:12px; color:var(--txtd); font-family:'Cormorant Garamond',serif; line-height:1.8;
}
.dbc-share-btn {
  margin-top:14px; background:linear-gradient(135deg,#25D366,#128C7E);
  border:none; color:#fff; border-radius:12px; padding:12px 22px;
  font-family:'Cinzel Decorative',serif; font-size:10px; letter-spacing:1.5px; cursor:pointer;
}

/* History strip */
.dbc-history {
  margin:20px 16px 0;
}
.dbc-history-title {
  font-family:'Cinzel Decorative',serif; font-size:9px; color:var(--gd);
  letter-spacing:2px; margin-bottom:10px;
  display:flex; align-items:center; gap:8px;
}
.dbc-history-title::after {
  content:''; flex:1; height:1px;
  background:linear-gradient(to right,var(--gd),transparent);
}
.dbc-hist-row {
  background:var(--card); border:1px solid var(--bdr); border-radius:12px;
  padding:11px 14px; margin-bottom:7px;
  display:flex; align-items:center; gap:10px;
}
.dbc-hist-icon { font-size:20px; flex-shrink:0; }
.dbc-hist-info { flex:1; min-width:0; }
.dbc-hist-q {
  font-size:11px; color:var(--txt); font-family:'Cormorant Garamond',serif;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dbc-hist-meta { font-size:9px; color:var(--fgd); margin-top:2px; letter-spacing:.5px; }
.dbc-hist-badge {
  font-size:9px; padding:3px 8px; border-radius:8px;
  font-family:'Cinzel Decorative',serif; flex-shrink:0;
}
.dbc-hist-badge.win {
  background:rgba(76,175,80,.12); color:#5DD876; border:1px solid rgba(76,175,80,.25);
}
.dbc-hist-badge.lose {
  background:rgba(248,81,73,.08); color:#f85149; border:1px solid rgba(248,81,73,.2);
}

/* Tools Hub tile */
.dbc-tool-tile {
  background:linear-gradient(135deg,rgba(147,197,253,.1),rgba(147,197,253,.03));
  border:1px solid rgba(147,197,253,.3); border-radius:18px;
  padding:20px 14px; cursor:pointer; text-align:center; transition:.25s;
}
.dbc-tool-tile:hover {
  border-color:rgba(147,197,253,.6); transform:translateY(-3px);
}

/* [style] */
'
    +'@keyframes mxFbFadeIn{from{opacity:0}to{opacity:1}}'
    +'@keyframes mxFbSlideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}'
    +'.mx-fb-star{font-size:28px;cursor:pointer;transition:transform .15s;user-select:none;line-height:1;padding:4px}'
    +'.mx-fb-star:hover,.mx-fb-star.active{transform:scale(1.25)}'
    +'

/* [style] */
/* ─── 3D COMMUNITY ─── */
#communityPage{
  background:radial-gradient(ellipse at 20% 0%,rgba(37,211,102,0.07) 0%,transparent 55%),
             radial-gradient(ellipse at 80% 100%,rgba(232,197,71,0.06) 0%,transparent 50%);
}
/* Floating 3D cards */
.mx3d{
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s;
  will-change:transform;
}
.mx3d:hover,.mx3d:active{
  transform:translateY(-8px) rotateX(4deg) rotateY(-2deg) scale(1.03);
  box-shadow:0 24px 48px rgba(0,0,0,.45),0 0 32px rgba(232,197,71,.12)!important;
}
/* Hero banner 3D float */
@keyframes mx3dFloat{
  0%,100%{transform:rotateX(0) rotateY(0) translateY(0)}
  25%    {transform:rotateX(2deg) rotateY(-2deg) translateY(-5px)}
  50%    {transform:rotateX(-1deg) rotateY(3deg) translateY(-8px)}
  75%    {transform:rotateX(2deg) rotateY(-1deg) translateY(-3px)}
}
.mx3d-hero{
  animation:mx3dFloat 7s ease-in-out infinite;
  transform-style:preserve-3d;
}
/* Glowing avatar */
@keyframes avatarGlow{
  0%,100%{box-shadow:0 0 12px rgba(232,197,71,.4),0 0 0 3px rgba(232,197,71,.15)}
  50%    {box-shadow:0 0 28px rgba(232,197,71,.7),0 0 0 6px rgba(232,197,71,.25)}
}
/* Live badge */
.mx-live{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.4);
  border-radius:20px;padding:5px 14px;font-size:10px;color:#34d399;
  font-family:'Cinzel Decorative',serif;letter-spacing:1px;
}
.mx-live-dot{
  width:7px;height:7px;background:#34d399;border-radius:50%;
  animation:liveDot 1s infinite;
}
@keyframes liveDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.6)}}
/* Scrolling ticker */
.mx-ticker{
  overflow:hidden;white-space:nowrap;
  background:rgba(232,197,71,.05);border:1px solid rgba(232,197,71,.12);
  border-radius:12px;padding:8px 0;margin-bottom:14px;
}
.mx-ticker-track{
  display:inline-flex;gap:48px;
  animation:tickerRoll 22s linear infinite;
}
.mx-ticker-track:hover{animation-play-state:paused}
@keyframes tickerRoll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mx-tick-item{font-size:11px;color:rgba(232,197,71,.65);font-family:'Cormorant Garamond',serif}
/* Reaction burst */
@keyframes rxBurst{
  0%  {opacity:1;transform:scale(0) translateY(0)}
  50% {opacity:1;transform:scale(1.6) translateY(-22px)}
  100%{opacity:0;transform:scale(.4) translateY(-55px)}
}
.mx-rx-burst{position:fixed;pointer-events:none;font-size:22px;z-index:9999;animation:rxBurst .8s ease-out forwards}
/* Shoutout card hover */
#shoutoutFeed>div{transition:transform .25s ease,box-shadow .25s}
#shoutoutFeed>div:hover{transform:translateX(5px) rotateY(2deg);box-shadow:-5px 5px 18px rgba(0,0,0,.3)}
/* Feature grid items */
#communityPage [style*="grid-template-columns"]>div{
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s;cursor:pointer
}
#communityPage [style*="grid-template-columns"]>div:hover{
  transform:translateY(-6px) scale(1.05) rotate(-1deg);
  box-shadow:0 14px 32px rgba(0,0,0,.3),0 0 20px rgba(232,197,71,.1)
}
/* Neon header glow */
#communityPage .sub-hdr-title{text-shadow:0 0 24px rgba(232,197,71,.45)}

/* ─── STREAK BANNER CLOSE BTN ─── */
#mxStreakClose{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  width:24px;height:24px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.5);font-size:12px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  line-height:1;flex-shrink:0;
  transition:background .2s,color .2s;
  z-index:8001;
}
#mxStreakClose:hover{background:rgba(255,80,80,.3);color:#fff}
#mxStreakBanner{padding-right:36px!important}

/* ─── EXIT WARNING ─── */
#mxExitModal{
  display:none;position:fixed;inset:0;z-index:99999;
  background:rgba(0,0,0,.93);backdrop-filter:blur(22px);
  align-items:center;justify-content:center;
}
#mxExitModal.show{display:flex}
.mx-exit-card{
  width:min(88vw,360px);
  background:linear-gradient(145deg,#0a0800,#1a1200,#0f0c00);
  border:1px solid rgba(232,197,71,.35);border-radius:28px;
  padding:36px 26px 26px;text-align:center;
  position:relative;overflow:hidden;
  animation:exitIn .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes exitIn{from{opacity:0;transform:scale(.7) translateY(40px)}to{opacity:1;transform:scale(1) translateY(0)}}
.mx-exit-card::before{
  content:'';position:absolute;top:-50%;left:50%;transform:translateX(-50%);
  width:200px;height:200px;
  background:radial-gradient(circle,rgba(232,197,71,.07),transparent 70%);
  border-radius:50%;pointer-events:none;
}
@keyframes sadBounce{0%,100%{transform:rotate(-5deg) scale(1)}50%{transform:rotate(5deg) scale(1.12)}}
.mx-exit-emoji{font-size:58px;display:block;animation:sadBounce 2.2s ease-in-out infinite;margin-bottom:10px}
.mx-exit-h1{font-family:'Cinzel Decorative',serif;font-size:19px;color:#E8C547;margin-bottom:10px;letter-spacing:1px;line-height:1.4}
.mx-exit-msg{font-family:'Cormorant Garamond',serif;font-size:15px;color:rgba(255,255,255,.72);line-height:1.85;margin-bottom:6px}
.mx-exit-quote{font-family:'Cormorant Garamond',serif;font-size:13px;color:rgba(255,255,255,.38);line-height:1.8;margin-bottom:20px;font-style:italic}
.mx-exit-prog-row{display:flex;justify-content:space-between;font-size:10px;color:rgba(232,197,71,.5);font-family:'Cinzel Decorative',serif;letter-spacing:1px;margin-bottom:6px}
.mx-exit-prog-bar{height:6px;background:rgba(255,255,255,.08);border-radius:10px;overflow:hidden;margin-bottom:4px}
.mx-exit-prog-fill{height:100%;background:linear-gradient(90deg,#c9a227,#E8C547,#FFF0A0);border-radius:10px;transition:width 1.2s ease;width:0}
.mx-exit-prog-sub{font-size:10px;color:rgba(255,255,255,.28);font-family:'Cormorant Garamond',serif;margin-bottom:20px}
@keyframes stayPulse{0%,100%{box-shadow:0 0 0 0 rgba(232,197,71,.45);background-position:0 0}50%{box-shadow:0 0 0 10px rgba(232,197,71,0);background-position:100% 0}}
.mx-exit-stay{
  width:100%;padding:16px;border:none;border-radius:16px;
  background:linear-gradient(135deg,#7a5e10,#E8C547,#FFF0A0,#E8C547);
  background-size:200% 100%;color:#000;
  font-family:'Cinzel Decorative',serif;font-size:13px;font-weight:700;letter-spacing:2px;
  cursor:pointer;margin-bottom:10px;animation:stayPulse 1.8s infinite;
}
.mx-exit-leave{
  width:100%;padding:12px;background:transparent;
  border:1px solid rgba(255,255,255,.1);border-radius:12px;
  color:rgba(255,255,255,.22);font-family:'Cormorant Garamond',serif;
  font-size:12px;cursor:pointer;letter-spacing:.5px;
}

/* [style] */
/* ── Lightning Round ── */
#mxLightningModal{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);display:none;flex-direction:column;align-items:center;justify-content:center;padding:20px}
#mxLightningModal.open{display:flex}
.mlr-card{width:100%;max-width:420px;background:linear-gradient(145deg,#141720,#1C2030);border:1.5px solid rgba(232,197,71,.3);border-radius:24px;padding:24px;position:relative;overflow:hidden}
.mlr-top-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.mlr-timer-ring{width:52px;height:52px;position:relative;flex-shrink:0}
.mlr-timer-ring svg{transform:rotate(-90deg)}
.mlr-timer-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Cinzel Decorative',serif;font-size:13px;color:#E8C547}
.mlr-progress{display:flex;gap:5px;flex:1;justify-content:center}
.mlr-dot{width:10px;height:10px;border-radius:50%;background:rgba(232,197,71,.2);transition:.3s}
.mlr-dot.done{background:#5DD876}
.mlr-dot.active{background:#E8C547;box-shadow:0 0 8px rgba(232,197,71,.7)}
.mlr-dot.wrong{background:#ef4444}
.mlr-q{font-family:'Noto Sans Devanagari',sans-serif;font-size:15px;color:#f0f0f0;line-height:1.6;margin-bottom:20px;min-height:60px}
.mlr-opts{display:flex;flex-direction:column;gap:10px}
.mlr-opt{background:rgba(255,255,255,.05);border:1.5px solid rgba(232,197,71,.2);border-radius:14px;padding:13px 16px;font-family:'Noto Sans Devanagari',sans-serif;font-size:13px;color:#e0e0e0;cursor:pointer;text-align:left;transition:.18s;touch-action:manipulation}
.mlr-opt:active{transform:scale(.97)}
.mlr-opt.correct{background:rgba(93,216,118,.15);border-color:#5DD876;color:#5DD876}
.mlr-opt.wrong{background:rgba(239,68,68,.15);border-color:#ef4444;color:#ef4444}
.mlr-opt.disabled{pointer-events:none}
.mlr-result{text-align:center;padding:10px 0}
.mlr-score-big{font-family:'Cinzel Decorative',serif;font-size:42px;color:#E8C547;line-height:1}
.mlr-combo{font-size:11px;color:#5DD876;font-family:'Cormorant Garamond',serif;letter-spacing:2px;margin-top:4px}
.mlr-xp-pill{display:inline-block;background:linear-gradient(135deg,rgba(232,197,71,.2),rgba(232,197,71,.08));border:1px solid rgba(232,197,71,.4);border-radius:20px;padding:6px 16px;font-family:'Cinzel Decorative',serif;font-size:11px;color:#E8C547;margin-top:12px}
.mlr-close-btn{position:absolute;top:14px;right:14px;background:none;border:none;color:rgba(232,197,71,.5);font-size:22px;cursor:pointer;line-height:1;padding:4px}
/* Shake animation */
@keyframes mlrShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.mlr-shake{animation:mlrShake .3s ease}

/* ── Streak Anxiety Banner ── */
#mxStreakAnxiety{margin:0 18px;border-radius:14px;padding:13px 16px;display:none;align-items:center;gap:10px;cursor:pointer;position:relative;overflow:hidden}
#mxStreakAnxiety.urgent{background:linear-gradient(135deg,rgba(239,68,68,.12),rgba(255,100,0,.08));border:1.5px solid rgba(239,68,68,.4);display:flex}
#mxStreakAnxiety.warning{background:linear-gradient(135deg,rgba(251,146,60,.1),rgba(255,200,0,.06));border:1.5px solid rgba(251,146,60,.35);display:flex}
.mxa-pulse{width:10px;height:10px;border-radius:50%;flex-shrink:0;animation:mxaPulse 1s ease-in-out infinite}
.urgent .mxa-pulse{background:#ef4444;box-shadow:0 0 8px rgba(239,68,68,.8)}
.warning .mxa-pulse{background:#fb923c;box-shadow:0 0 8px rgba(251,146,60,.8)}
@keyframes mxaPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.7}}
.mxa-text{flex:1}
.mxa-title{font-family:'Cinzel Decorative',serif;font-size:11px;letter-spacing:.5px}
.urgent .mxa-title{color:#ef4444}
.warning .mxa-title{color:#fb923c}
.mxa-sub{font-size:11px;color:rgba(240,240,240,.65);font-family:'Cormorant Garamond',serif;margin-top:2px}
.mxa-action{font-family:'Cinzel Decorative',serif;font-size:9px;color:#E8C547;background:rgba(232,197,71,.12);border:1px solid rgba(232,197,71,.3);border-radius:8px;padding:5px 10px;white-space:nowrap}

/* ── Mystery Chest ── */
#mxChestModal{position:fixed;inset:0;z-index:9100;background:rgba(0,0,0,.88);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center}
#mxChestModal.open{display:flex}
.mxc-box{background:linear-gradient(145deg,#1C2030,#141720);border:2px solid rgba(232,197,71,.5);border-radius:28px;padding:32px 24px;text-align:center;max-width:340px;width:100%;position:relative}
.mxc-chest{font-size:72px;animation:mxcFloat 2s ease-in-out infinite;cursor:pointer;display:inline-block;filter:drop-shadow(0 0 20px rgba(232,197,71,.4))}
@keyframes mxcFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}
@keyframes mxcOpen{0%{transform:scale(1)}30%{transform:scale(1.3) rotate(-5deg)}60%{transform:scale(.9) rotate(3deg)}100%{transform:scale(1.15)}}
.mxc-title{font-family:'Cinzel Decorative',serif;font-size:16px;color:#E8C547;margin:16px 0 6px;letter-spacing:1px}
.mxc-sub{font-size:12px;color:rgba(232,197,71,.6);font-family:'Cormorant Garamond',serif;margin-bottom:20px}
.mxc-tap-hint{font-size:11px;color:rgba(255,255,255,.4);font-family:'Cormorant Garamond',serif;animation:mxaFade 1.5s ease-in-out infinite}
@keyframes mxaFade{0%,100%{opacity:.4}50%{opacity:1}}
.mxc-reward{display:none;flex-direction:column;align-items:center;gap:8px}
.mxc-reward-icon{font-size:52px;animation:mxcOpen .5s ease forwards}
.mxc-reward-val{font-family:'Cinzel Decorative',serif;font-size:22px;color:#E8C547}
.mxc-reward-lbl{font-size:12px;color:rgba(232,197,71,.7);font-family:'Cormorant Garamond',serif}
.mxc-claim-btn{margin-top:18px;background:linear-gradient(135deg,#C9A227,#E8C547);border:none;border-radius:14px;padding:13px 36px;font-family:'Cinzel Decorative',serif;font-size:13px;color:#0D0F14;cursor:pointer;font-weight:700;letter-spacing:.5px}
/* confetti */
.mxc-confetti-piece{position:absolute;width:8px;height:8px;border-radius:2px;animation:mxcFall 1.2s ease-out forwards}
@keyframes mxcFall{0%{opacity:1;transform:translateY(0) rotate(0deg)}100%{opacity:0;transform:translateY(200px) rotate(720deg)}}

/* ── FOMO Nudge Toast ── */
#mxFomoToast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);z-index:8800;background:linear-gradient(135deg,#1C2030,#141720);border:1.5px solid rgba(232,197,71,.35);border-radius:16px;padding:12px 16px;display:flex;align-items:center;gap:10px;max-width:320px;width:calc(100% - 36px);opacity:0;transition:opacity .4s,transform .4s;pointer-events:none}
#mxFomoToast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.mxft-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#5a3e0a,#D4AF37);display:flex;align-items:center;justify-content:center;font-family:'Cinzel Decorative',serif;font-size:14px;color:#0D0F14;flex-shrink:0;font-weight:900}
.mxft-text{flex:1}
.mxft-name{font-family:'Cinzel Decorative',serif;font-size:11px;color:#E8C547;letter-spacing:.3px}
.mxft-msg{font-size:11px;color:rgba(240,240,240,.7);font-family:'Cormorant Garamond',serif;margin-top:2px}

/* ── Lightning Entry Button on Home ── */
#mxLightningEntry{margin:12px 18px 0;background:linear-gradient(135deg,rgba(99,102,241,.15),rgba(139,92,246,.08));border:1.5px solid rgba(99,102,241,.4);border-radius:16px;padding:14px 18px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:.2s;position:relative;overflow:hidden}
#mxLightningEntry:active{transform:scale(.98)}
.mxle-glow{position:absolute;top:-20px;right:-20px;width:80px;height:80px;background:radial-gradient(circle,rgba(139,92,246,.3),transparent);border-radius:50%}
.mxle-badge{background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:8px;padding:6px 8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mxle-info{flex:1}
.mxle-title{font-family:'Cinzel Decorative',serif;font-size:12px;color:#a78bfa;letter-spacing:.5px}
.mxle-sub{font-size:11px;color:rgba(240,240,240,.55);font-family:'Cormorant Garamond',serif;margin-top:3px}
.mxle-reward{font-family:'Cinzel Decorative',serif;font-size:10px;color:#E8C547;background:rgba(232,197,71,.1);border:1px solid rgba(232,197,71,.3);border-radius:8px;padding:4px 10px}
.mxle-done{opacity:.5;pointer-events:none}
.mxle-done-lbl{font-size:9px;color:#5DD876;font-family:'Cinzel Decorative',serif;letter-spacing:1px}

/* [style] */
@keyframes mxSlideUp{from{transform:translateY(80px);opacity:0}to{transform:translateY(0);opacity:1}}

/* [style] */
/* ─── Google Font ─── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* ─── CSS Variables ─── */
#mxAiPanel{
  --ai-gold:#E8C547;
  --ai-gold-dim:rgba(232,197,71,0.15);
  --ai-gold-glow:rgba(232,197,71,0.25);
  --ai-bg:#0a0a0e;
  --ai-surface:#111118;
  --ai-surface2:#16161f;
  --ai-border:rgba(255,255,255,0.07);
  --ai-border-gold:rgba(232,197,71,0.25);
  --ai-txt:#e8e8f2;
  --ai-txt-dim:#555568;
  --ai-txt-mid:#9090a8;
  --ai-user-bg:linear-gradient(135deg,#1e1c00,#161200);
  --ai-bot-bg:#131320;
  --ai-font:'Plus Jakarta Sans',sans-serif;
  --ai-radius:20px;
}

/* Dark/Light Theme Variables */
#mxAiPanel.theme-light{
  --ai-bg:#f5f5fa;
  --ai-surface:#ffffff;
  --ai-surface2:#eeeef8;
  --ai-border:rgba(0,0,0,0.08);
  --ai-border-gold:rgba(180,140,0,0.3);
  --ai-txt:#1a1a2e;
  --ai-txt-dim:#aaaacc;
  --ai-txt-mid:#666688;
  --ai-user-bg:linear-gradient(135deg,#fffbe6,#fff8cc);
  --ai-bot-bg:#f0f0f8;
  --ai-gold:#b8940a;
  --ai-gold-dim:rgba(184,148,10,0.12);
}

/* ─── Overlay ─── */
#mxAiOverlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,0);
  z-index:99990;display:none;
  transition:background .35s;
}
#mxAiOverlay.open{
  display:block;
  background:rgba(0,0,0,0.75);
}

/* ─── Panel ─── */
#mxAiPanel{
  position:fixed;bottom:0;left:0;right:0;
  height:96vh;
  background:var(--ai-bg);
  border-radius:26px 26px 0 0;
  border-top:1px solid var(--ai-border-gold);
  z-index:99991;
  display:flex;flex-direction:column;
  overflow:hidden;
  transform:translateY(100%);
  transition:transform .4s cubic-bezier(.22,1,.36,1);
  box-shadow:0 -30px 80px rgba(0,0,0,0.9),0 -1px 0 var(--ai-border-gold);
  font-family:var(--ai-font);
}
#mxAiPanel.open{transform:translateY(0)}

/* Drag pill */
.mxai-pill{
  width:40px;height:4px;
  background:rgba(255,255,255,0.12);
  border-radius:2px;margin:14px auto 0;
  flex-shrink:0;cursor:grab;
}
#mxAiPanel.theme-light .mxai-pill{background:rgba(0,0,0,0.12)}

/* ─── Top Bar ─── */
.mxai-topbar{
  display:flex;align-items:center;gap:11px;
  padding:11px 16px 11px;
  border-bottom:1px solid var(--ai-border);
  flex-shrink:0;
  background:linear-gradient(135deg,rgba(232,197,71,0.05),transparent);
  position:relative;
}
.mxai-topbar-logo{
  width:40px;height:40px;flex-shrink:0;
  background:linear-gradient(135deg,#E8C547,#b8900a);
  border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
  box-shadow:0 4px 16px var(--ai-gold-glow);
}
.mxai-topbar-info{flex:1;min-width:0}
.mxai-topbar-name{
  font-size:15px;font-weight:700;
  color:var(--ai-gold);letter-spacing:.2px;
}
.mxai-topbar-status{
  display:flex;align-items:center;gap:5px;margin-top:1px;
}
.mxai-status-dot{
  width:6px;height:6px;border-radius:50%;
  background:#444;flex-shrink:0;
  transition:background .3s;
}
.mxai-status-dot.on{
  background:#22c55e;
  box-shadow:0 0 7px #22c55e88;
  animation:mxaiPulse 2s infinite;
}
@keyframes mxaiPulse{0%,100%{opacity:1}50%{opacity:.4}}
.mxai-status-lbl{
  font-size:11px;color:var(--ai-txt-dim);
  font-weight:500;
}
.mxai-topbar-actions{display:flex;gap:6px;align-items:center}

/* Icon buttons in top bar */
.mxai-icon-btn{
  width:34px;height:34px;border-radius:10px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--ai-border);
  color:var(--ai-txt-dim);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .2s;
  flex-shrink:0;font-size:15px;
}
.mxai-icon-btn:active{transform:scale(.93)}
.mxai-icon-btn:hover,.mxai-icon-btn.active{
  background:var(--ai-gold-dim);
  border-color:var(--ai-border-gold);
  color:var(--ai-gold);
}
#mxAiPanel.theme-light .mxai-icon-btn{
  background:rgba(0,0,0,0.04);
  color:var(--ai-txt-mid);
}

/* ─── Settings Drawer ─── */
/* Settings backdrop */
#mxAiSettingsBd{
  display:none;position:absolute;inset:0;
  background:rgba(0,0,0,0);
  z-index:30;
  transition:background .3s;
  pointer-events:none;
}
#mxAiSettingsBd.open{
  display:block;
  background:rgba(0,0,0,0.55);
  pointer-events:auto;
}
/* Settings drawer */
#mxAiSettings{
  display:none;flex-direction:column;gap:0;
  background:var(--ai-surface);
  position:absolute;
  bottom:0;left:0;right:0;
  z-index:31;
  border-radius:22px 22px 0 0;
  border-top:1px solid var(--ai-border-gold);
  box-shadow:0 -20px 60px rgba(0,0,0,0.8);
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
  max-height:88%;
}
#mxAiSettings.open{
  display:flex;
  transform:translateY(0);
  pointer-events:auto;
}
/* Drag pill inside settings */
#mxAiSettings .mxai-set-pill{
  width:36px;height:4px;
  background:rgba(255,255,255,0.15);
  border-radius:2px;
  margin:12px auto 4px;
  flex-shrink:0;
}
#mxAiPanel.theme-light #mxAiSettings .mxai-set-pill{background:rgba(0,0,0,0.12)}
/* Settings header row */
.mxai-set-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 16px 12px;
  border-bottom:1px solid var(--ai-border);
  flex-shrink:0;
}
.mxai-set-title{
  font-size:14px;font-weight:700;
  color:var(--ai-txt);
  font-family:var(--ai-font);
  letter-spacing:0.3px;
}
.mxai-set-close{
  width:30px;height:30px;border-radius:10px;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--ai-border);
  color:var(--ai-txt-mid);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.mxai-set-close:hover{background:rgba(239,68,68,0.12);color:#ef4444;border-color:rgba(239,68,68,0.3)}
#mxAiPanel.theme-light .mxai-set-close{background:rgba(0,0,0,0.04)}
.mxai-settings-inner{
  padding:16px 16px 32px;
  display:flex;flex-direction:column;gap:16px;
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  flex:1;min-height:0;
}
.mxai-settings-section{
  display:flex;flex-direction:column;gap:8px;
}
.mxai-settings-label{
  font-size:10px;font-weight:700;letter-spacing:1.2px;
  color:var(--ai-txt-dim);text-transform:uppercase;
}
/* Option pills row */
.mxai-opt-row{
  display:flex;gap:6px;flex-wrap:wrap;
}
.mxai-opt{
  padding:6px 13px;border-radius:20px;
  font-size:12px;font-weight:500;
  border:1px solid var(--ai-border);
  background:transparent;
  color:var(--ai-txt-mid);
  cursor:pointer;transition:all .18s;
  white-space:nowrap;
}
.mxai-opt:active{transform:scale(.95)}
.mxai-opt.sel{
  background:var(--ai-gold-dim);
  border-color:var(--ai-border-gold);
  color:var(--ai-gold);font-weight:600;
}
/* Toggle row */
.mxai-toggle-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 13px;border-radius:12px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--ai-border);
}
#mxAiPanel.theme-light .mxai-toggle-row{background:rgba(0,0,0,0.03)}
.mxai-toggle-lbl{
  font-size:13px;font-weight:500;
  color:var(--ai-txt);
}
.mxai-toggle-sub{font-size:11px;color:var(--ai-txt-dim);margin-top:1px}
/* Toggle switch */
.mxai-switch{
  position:relative;width:42px;height:24px;flex-shrink:0;
}
.mxai-switch input{opacity:0;width:0;height:0;position:absolute}
.mxai-switch-track{
  position:absolute;inset:0;border-radius:12px;
  background:rgba(255,255,255,0.1);
  border:1px solid var(--ai-border);
  cursor:pointer;transition:background .2s;
}
.mxai-switch input:checked+.mxai-switch-track{
  background:var(--ai-gold);border-color:var(--ai-gold);
}
.mxai-switch-thumb{
  position:absolute;top:3px;left:3px;
  width:16px;height:16px;border-radius:50%;
  background:#fff;
  transition:transform .2s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.mxai-switch input:checked~.mxai-switch-thumb{transform:translateX(18px)}
/* Font size slider */
.mxai-slider-row{
  display:flex;align-items:center;gap:10px;
}
.mxai-slider{
  flex:1;-webkit-appearance:none;appearance:none;
  height:4px;border-radius:2px;
  background:var(--ai-border);outline:none;
  cursor:pointer;
}
.mxai-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:18px;height:18px;border-radius:50%;
  background:var(--ai-gold);
  box-shadow:0 2px 8px var(--ai-gold-glow);
  cursor:pointer;
}
.mxai-slider-val{
  font-size:12px;font-weight:600;
  color:var(--ai-gold);min-width:28px;text-align:center;
}

/* Header credit pill */
.mxai-hdr-credit{
  display:flex;align-items:center;gap:5px;
  padding:4px 10px 4px 8px;
  border-radius:20px;
  background:rgba(232,197,71,0.1);
  border:1px solid rgba(232,197,71,0.25);
  color:var(--ai-gold);
  font-size:11px;font-weight:600;
  cursor:pointer;
  transition:all .18s;
  white-space:nowrap;
  font-family:var(--ai-font);
}
.mxai-hdr-credit:hover{background:rgba(232,197,71,0.18);border-color:rgba(232,197,71,0.4)}
#mxAiPanel.theme-light .mxai-hdr-credit{background:rgba(184,148,10,0.1);color:#b8940a}

/* ─── Quick Chips ─── */
#mxAiSugg{
  padding:10px 14px;
  border-bottom:1px solid var(--ai-border);
  flex-shrink:0;
  overflow-x:auto;scrollbar-width:none;
  display:flex;gap:7px;
  -webkit-overflow-scrolling:touch;
}
#mxAiSugg::-webkit-scrollbar{display:none}
.mxai-chip{
  white-space:nowrap;
  padding:7px 14px;border-radius:20px;
  font-size:12px;font-weight:500;
  color:var(--ai-txt-mid);
  background:rgba(255,255,255,0.04);
  border:1px solid var(--ai-border);
  cursor:pointer;transition:all .18s;
  flex-shrink:0;
}
.mxai-chip:active{transform:scale(.95)}
.mxai-chip:hover{
  background:var(--ai-gold-dim);
  border-color:var(--ai-border-gold);
  color:var(--ai-gold);
}
#mxAiPanel.theme-light .mxai-chip{background:rgba(0,0,0,0.04)}

/* ─── Messages ─── */
#mxAiMsgs{
  flex:1;min-height:0;overflow-y:auto;
  padding:18px 14px;
  display:flex;flex-direction:column;gap:16px;
  scrollbar-width:thin;scrollbar-color:#1a1a28 transparent;
  scroll-behavior:smooth;
}
#mxAiMsgs::-webkit-scrollbar{width:3px}
#mxAiMsgs::-webkit-scrollbar-thumb{background:#1e1e30;border-radius:2px}

/* Welcome screen */
.mxai-welcome{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:30px 16px;text-align:center;
  flex:1;
}
.mxai-welcome-icon{
  width:80px;height:80px;
  background:linear-gradient(135deg,rgba(232,197,71,0.18),rgba(232,197,71,0.04));
  border:1px solid var(--ai-border-gold);
  border-radius:26px;
  display:flex;align-items:center;justify-content:center;
  font-size:42px;margin-bottom:18px;
  box-shadow:0 12px 40px var(--ai-gold-glow);
  animation:mxaiWelcome .6s cubic-bezier(.22,1,.36,1) both;
}
@keyframes mxaiWelcome{from{opacity:0;transform:scale(.8) translateY(10px)}to{opacity:1;transform:none}}
.mxai-welcome h3{
  font-size:20px;font-weight:700;
  color:var(--ai-txt);margin-bottom:8px;
}
.mxai-welcome p{
  font-size:13.5px;color:var(--ai-txt-dim);
  line-height:1.65;max-width:290px;
}
.mxai-welcome-caps{
  margin-top:18px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
}
.mxai-wcap{
  padding:5px 12px;border-radius:12px;
  font-size:11px;font-weight:600;
  color:var(--ai-txt-mid);
  background:rgba(255,255,255,0.05);
  border:1px solid var(--ai-border);
}

/* Message row */
.mxai-m{
  display:flex;gap:10px;
  animation:mxaiIn .3s cubic-bezier(.22,1,.36,1) both;
  align-items:flex-end;
}
@keyframes mxaiIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.mxai-m.u{flex-direction:row-reverse}

/* Avatar */
.mxai-av{
  width:32px;height:32px;border-radius:11px;
  flex-shrink:0;display:flex;align-items:center;
  justify-content:center;font-size:16px;
  margin-bottom:2px;
}
.mxai-av.b{
  background:linear-gradient(135deg,#E8C547,#b8900a);
  box-shadow:0 3px 10px var(--ai-gold-glow);
}
.mxai-av.u{
  background:var(--ai-surface2);
  border:1px solid var(--ai-border);
}

/* Bubble wrap */
.mxai-bwrap{
  display:flex;flex-direction:column;
  max-width:80%;gap:4px;
}
.mxai-m.u .mxai-bwrap{align-items:flex-end}

/* Bubble */
.mxai-bbl{
  padding:12px 16px;
  border-radius:20px;
  word-break:break-word;line-height:1.75;
  position:relative;
}
.mxai-m.b .mxai-bbl{
  background:var(--ai-bot-bg);
  border:1px solid var(--ai-border);
  border-bottom-left-radius:5px;
  color:var(--ai-txt);
}
.mxai-m.u .mxai-bbl{
  background:var(--ai-user-bg);
  border:1px solid var(--ai-border-gold);
  border-bottom-right-radius:5px;
  color:#e8e0b0;
}
#mxAiPanel.theme-light .mxai-m.u .mxai-bbl{color:#5a4800}

/* Message actions (copy, etc) */
.mxai-bbl-actions{
  display:none;position:absolute;
  top:-14px;right:10px;
  background:var(--ai-surface);
  border:1px solid var(--ai-border);
  border-radius:8px;padding:2px 4px;
  gap:2px;
  box-shadow:0 4px 16px rgba(0,0,0,0.4);
}
.mxai-m.b .mxai-bbl:hover .mxai-bbl-actions{display:flex}
.mxai-bbl-action{
  width:26px;height:26px;border-radius:6px;
  background:none;border:none;
  color:var(--ai-txt-mid);font-size:13px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.mxai-bbl-action:hover{background:var(--ai-gold-dim);color:var(--ai-gold)}

/* ─── TTS Speak Button ─── */
.mxai-bbl-action.tts-btn.speaking{
  background:rgba(232,197,71,0.18);color:var(--ai-gold);
  animation:mxaiTtsPulse 1s ease-in-out infinite;
}
@keyframes mxaiTtsPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(232,197,71,0.35)}
  50%{box-shadow:0 0 0 5px rgba(232,197,71,0)}
}

/* ─── Voice Call Mode — Deep Space Cosmic Redesign ─── */
#mxAiVoiceCall{
  display:none;position:absolute;inset:0;z-index:50;
  flex-direction:column;align-items:center;justify-content:center;
  padding:0 24px 56px;overflow:hidden;
  /* Dark default */
  background:radial-gradient(ellipse 90% 70% at 50% 15%,#0e0b1e 0%,#060410 50%,#020108 100%);
  transition:background .6s;
}
#mxAiVoiceCall.active{
  display:flex;
  animation:mxvcIn .5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes mxvcIn{from{opacity:0;transform:scale(.95) translateY(20px)}to{opacity:1;transform:none}}
#mxAiVoiceCall.exiting{
  animation:mxvcOut .32s cubic-bezier(.55,0,1,.45) both;
}
@keyframes mxvcOut{from{opacity:1;transform:none}to{opacity:0;transform:scale(.96) translateY(10px)}}

/* ── LIGHT THEME overrides ── */
#mxAiPanel.theme-light #mxAiVoiceCall{
  background:radial-gradient(ellipse 90% 70% at 50% 15%,#e8eeff 0%,#f0f4ff 45%,#f8f9ff 100%);
}
#mxAiPanel.theme-light .mxvc-star{background:rgba(100,80,200,0.7);}
#mxAiPanel.theme-light .mxvc-nebula{
  background:
    radial-gradient(ellipse 55% 40% at 50% 30%,rgba(180,140,255,0.18) 0%,transparent 65%),
    radial-gradient(ellipse 35% 25% at 20% 70%,rgba(100,120,255,0.1) 0%,transparent 55%),
    radial-gradient(ellipse 30% 20% at 80% 65%,rgba(80,160,255,0.08) 0%,transparent 50%);
}
#mxAiPanel.theme-light #mxAiVoiceCall.listening .mxvc-nebula{
  background:
    radial-gradient(ellipse 65% 50% at 50% 35%,rgba(184,148,10,0.22) 0%,transparent 65%),
    radial-gradient(ellipse 40% 30% at 20% 70%,rgba(200,160,0,0.12) 0%,transparent 55%);
}
#mxAiPanel.theme-light #mxAiVoiceCall.speaking-ai .mxvc-nebula{
  background:
    radial-gradient(ellipse 65% 50% at 50% 35%,rgba(0,160,100,0.15) 0%,transparent 65%),
    radial-gradient(ellipse 40% 30% at 25% 65%,rgba(0,180,120,0.1) 0%,transparent 55%);
}
/* Orb light theme */
#mxAiPanel.theme-light .mxvc-orb{
  background:
    radial-gradient(circle at 35% 35%,rgba(255,255,255,0.6) 0%,transparent 50%),
    linear-gradient(135deg,#d4a500 0%,#b8940a 55%,#8a6c00 100%);
  box-shadow:
    0 0 0 3px rgba(184,148,10,0.2),
    0 0 24px rgba(184,148,10,0.5),
    0 0 60px rgba(184,148,10,0.18),
    0 8px 28px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.6);
}
#mxAiPanel.theme-light #mxAiVoiceCall.speaking-ai .mxvc-orb{
  background:
    radial-gradient(circle at 35% 35%,rgba(255,255,255,0.5) 0%,transparent 50%),
    linear-gradient(135deg,#00c878 0%,#00a060 55%,#006640 100%);
  box-shadow:
    0 0 0 3px rgba(0,180,100,0.2),
    0 0 24px rgba(0,180,100,0.5),
    0 0 60px rgba(0,180,100,0.15),
    0 8px 28px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.5);
}
/* Orbit rings light */
#mxAiPanel.theme-light .mxvc-orbit{border-color:rgba(184,148,10,0.2);}
#mxAiPanel.theme-light .mxvc-orbit:nth-child(2){border-color:rgba(120,80,220,0.12);}
#mxAiPanel.theme-light .mxvc-ring{border-color:rgba(184,148,10,0.18);}
#mxAiPanel.theme-light .mxvc-ring:nth-child(4){border-color:rgba(184,148,10,0.26);}
#mxAiPanel.theme-light .mxvc-ring:nth-child(5){border-color:rgba(184,148,10,0.35);}
/* Bottom fog light — inverted/dimmed */
#mxAiPanel.theme-light .mxvc-bottom-fog{
  filter:hue-rotate(200deg) brightness(0.85) saturate(0.7);
  opacity:0.35;mix-blend-mode:multiply;
}
/* Status text light */
#mxAiPanel.theme-light .mxvc-status{color:#1a1a2e;}
#mxAiPanel.theme-light .mxvc-sub{color:#555580;}
/* Transcript light */
#mxAiPanel.theme-light .mxvc-transcript{
  background:rgba(255,255,255,0.7);
  border-color:rgba(0,0,0,0.1);
  color:#666688;
  box-shadow:0 2px 16px rgba(0,0,0,0.06);
}
#mxAiPanel.theme-light .mxvc-transcript.has-text{
  color:#1a1a2e;
  border-color:rgba(184,148,10,0.35);
  background:rgba(255,248,200,0.6);
}
/* Wave light */
#mxAiPanel.theme-light .mxvc-wave span{background:#b8940a;}
#mxAiPanel.theme-light #mxAiVoiceCall.speaking-ai .mxvc-wave span{background:#00a060;}
/* Controls glass light */
#mxAiPanel.theme-light .mxvc-controls{
  background:rgba(255,255,255,0.55);
  border-color:rgba(0,0,0,0.08);
  box-shadow:0 8px 32px rgba(0,0,0,0.1),inset 0 1px 0 rgba(255,255,255,0.9);
}
#mxAiPanel.theme-light .mxvc-btn.mute,
#mxAiPanel.theme-light .mxvc-btn.spk{
  background:rgba(0,0,0,0.04);
  border-color:rgba(0,0,0,0.1);
  color:rgba(0,0,0,0.5);
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
}
#mxAiPanel.theme-light .mxvc-btn.mute:hover,
#mxAiPanel.theme-light .mxvc-btn.spk:hover{
  background:rgba(0,0,0,0.08);color:rgba(0,0,0,0.75);
}
#mxAiPanel.theme-light .mxvc-btn-lbl{color:rgba(0,0,0,0.35);}
#mxAiPanel.theme-light .mxvc-btn-wrap:has(.end) .mxvc-btn-lbl{color:rgba(200,30,30,0.5);}
/* Limit bar light */
#mxAiPanel.theme-light #mxVcTimer{color:rgba(0,0,0,0.35);}
/* Logo text light */
#mxAiPanel.theme-light #mxAiVoiceCall .mxvc-logo-txt{color:rgba(0,0,0,0.45);}

/* ── Starfield ── */
.mxvc-stars{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.mxvc-star{
  position:absolute;border-radius:50%;background:#fff;
  animation:mxvcTwinkle ease-in-out infinite;
}
@keyframes mxvcTwinkle{0%,100%{opacity:.05}50%{opacity:.5}}

/* ── Nebula ── */
.mxvc-nebula{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 55% 40% at 50% 30%,rgba(232,197,71,0.07) 0%,transparent 65%),
    radial-gradient(ellipse 35% 25% at 20% 70%,rgba(100,60,200,0.06) 0%,transparent 60%),
    radial-gradient(ellipse 30% 20% at 80% 75%,rgba(60,120,255,0.05) 0%,transparent 55%);
  transition:opacity .8s;
}
#mxAiVoiceCall.listening .mxvc-nebula{
  background:
    radial-gradient(ellipse 65% 50% at 50% 35%,rgba(232,197,71,0.15) 0%,transparent 65%),
    radial-gradient(ellipse 40% 30% at 20% 70%,rgba(180,120,255,0.09) 0%,transparent 55%);
  animation:mxvcNebulaBreath .9s ease-in-out infinite alternate;
}
#mxAiVoiceCall.speaking-ai .mxvc-nebula{
  background:
    radial-gradient(ellipse 65% 50% at 50% 35%,rgba(77,255,180,0.13) 0%,transparent 65%),
    radial-gradient(ellipse 40% 30% at 25% 65%,rgba(40,200,255,0.07) 0%,transparent 55%);
  animation:mxvcNebulaBreath .45s ease-in-out infinite alternate;
}
@keyframes mxvcNebulaBreath{from{opacity:.65}to{opacity:1}}

/* ── Bottom fog ── */
.mxvc-bottom-fog{
  position:absolute;bottom:0;left:0;right:0;height:40%;
  background:url('images/bg-image.jpg') center bottom/cover no-repeat;
  pointer-events:none;z-index:1;
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.3) 28%,rgba(0,0,0,.75) 65%,#000 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.3) 28%,rgba(0,0,0,.75) 65%,#000 100%);
  opacity:.78;mix-blend-mode:screen;
  animation:mxvcFogDrift 6s ease-in-out infinite alternate;
}
@keyframes mxvcFogDrift{from{opacity:.65;transform:scaleX(1) translateY(0)}to{opacity:.88;transform:scaleX(1.04) translateY(-5px)}}
#mxAiVoiceCall.listening .mxvc-bottom-fog{animation-duration:1s;filter:hue-rotate(25deg) brightness(1.1);opacity:.9;}
#mxAiVoiceCall.speaking-ai .mxvc-bottom-fog{animation-duration:.6s;filter:hue-rotate(155deg) brightness(1.15);opacity:.92;}

/* ── Orb system ── */
/* ── Orb wrap — larger canvas ── */
.mxvc-orb-wrap{
  position:relative;width:270px;height:270px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:0px;
}

/* ── Deep glow pool behind orb ── */
.mxvc-glow-pool{
  position:absolute;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,197,71,0.22) 0%,rgba(232,197,71,0.06) 45%,transparent 75%);
  pointer-events:none;z-index:0;
  filter:blur(18px);
  transition:background .7s;
  animation:mxvcPoolIdle 4s ease-in-out infinite alternate;
}
@keyframes mxvcPoolIdle{from{transform:scale(1);opacity:.7}to{transform:scale(1.18);opacity:1}}
#mxAiVoiceCall.listening .mxvc-glow-pool{
  width:220px;height:220px;
  background:radial-gradient(circle,rgba(232,197,71,0.38) 0%,rgba(255,180,0,0.12) 45%,transparent 72%);
  animation:mxvcPoolActive .75s ease-in-out infinite alternate;
  filter:blur(22px);
}
#mxAiVoiceCall.speaking-ai .mxvc-glow-pool{
  width:240px;height:240px;
  background:radial-gradient(circle,rgba(77,255,180,0.4) 0%,rgba(0,220,140,0.12) 45%,transparent 72%);
  animation:mxvcPoolActive .4s ease-in-out infinite alternate;
  filter:blur(24px);
}
@keyframes mxvcPoolActive{from{transform:scale(1);opacity:.75}to{transform:scale(1.28);opacity:1}}

/* ── Outer halo — slow breathe ── */
.mxvc-glow{
  position:absolute;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,197,71,0.1) 0%,transparent 68%);
  pointer-events:none;z-index:0;transition:background .7s,width .5s,height .5s;
  animation:mxvcHaloIdle 5s ease-in-out infinite alternate;
}
@keyframes mxvcHaloIdle{from{opacity:.55;transform:scale(1)}to{opacity:.9;transform:scale(1.08)}}
#mxAiVoiceCall.listening .mxvc-glow{
  width:260px;height:260px;
  background:radial-gradient(circle,rgba(232,197,71,0.18) 0%,transparent 65%);
  animation:mxvcHaloActive .8s ease-in-out infinite alternate;
}
#mxAiVoiceCall.speaking-ai .mxvc-glow{
  width:270px;height:270px;
  background:radial-gradient(circle,rgba(77,255,180,0.2) 0%,transparent 65%);
  animation:mxvcHaloActive .42s ease-in-out infinite alternate;
}
@keyframes mxvcHaloActive{from{transform:scale(1);opacity:.6}to{transform:scale(1.15);opacity:1}}

/* ── Rotating conic-accent ring (aurora effect) ── */
.mxvc-aurora{
  position:absolute;width:200px;height:200px;border-radius:50%;
  background:conic-gradient(
    from 0deg,
    transparent 0%,
    rgba(232,197,71,0.0) 30%,
    rgba(232,197,71,0.55) 50%,
    rgba(255,200,80,0.2) 65%,
    transparent 80%,
    transparent 100%
  );
  pointer-events:none;z-index:1;
  mask-image:radial-gradient(circle,transparent 42%,black 48%,black 52%,transparent 58%);
  -webkit-mask-image:radial-gradient(circle,transparent 42%,black 48%,black 52%,transparent 58%);
  animation:mxvcAurora 6s linear infinite;
  opacity:.6;
}
@keyframes mxvcAurora{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
#mxAiVoiceCall.listening .mxvc-aurora{
  animation-duration:2.2s;opacity:.95;
  background:conic-gradient(
    from 0deg,
    transparent 0%,
    rgba(232,197,71,0.0) 20%,
    rgba(255,220,80,0.9) 45%,
    rgba(232,197,71,0.4) 60%,
    transparent 75%,
    transparent 100%
  );
}
#mxAiVoiceCall.speaking-ai .mxvc-aurora{
  animation-duration:1.4s;opacity:.95;
  background:conic-gradient(
    from 0deg,
    transparent 0%,
    rgba(77,255,180,0.0) 20%,
    rgba(77,255,180,0.9) 45%,
    rgba(40,220,255,0.5) 60%,
    transparent 75%,
    transparent 100%
  );
}

/* ── Rotating dashed orbit rings ── */
.mxvc-orbit{
  position:absolute;border-radius:50%;
  border:1px dashed rgba(232,197,71,0.15);
  animation:mxvcOrbit 22s linear infinite;
  transition:border-color .5s;
}
.mxvc-orbit:nth-child(3){width:100%;height:100%;}
.mxvc-orbit:nth-child(4){
  width:74%;height:74%;
  border-color:rgba(160,90,255,0.12);
  animation-duration:14s;animation-direction:reverse;
}
@keyframes mxvcOrbit{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
#mxAiVoiceCall.listening .mxvc-orbit:nth-child(3){animation-duration:3.8s;border-color:rgba(232,197,71,0.5);}
#mxAiVoiceCall.listening .mxvc-orbit:nth-child(4){animation-duration:2.2s;border-color:rgba(220,160,255,0.38);}
#mxAiVoiceCall.speaking-ai .mxvc-orbit:nth-child(3){animation-duration:2.2s;border-color:rgba(77,255,180,0.55);}
#mxAiVoiceCall.speaking-ai .mxvc-orbit:nth-child(4){animation-duration:1.4s;border-color:rgba(40,230,255,0.42);}

/* ── Halo pulse rings ── */
.mxvc-ring{
  position:absolute;border-radius:50%;
  border:1.5px solid rgba(232,197,71,0.1);
  animation:mxvcRingBreath 3.5s ease-in-out infinite;
  transition:border-color .5s;
}
.mxvc-ring:nth-child(5){width:90%;height:90%;animation-delay:0s;}
.mxvc-ring:nth-child(6){width:72%;height:72%;border-color:rgba(232,197,71,0.17);animation-delay:.7s;}
.mxvc-ring:nth-child(7){width:56%;height:56%;border-color:rgba(232,197,71,0.26);animation-delay:1.4s;}
@keyframes mxvcRingBreath{0%,100%{transform:scale(1);opacity:.35}50%{transform:scale(1.07);opacity:1}}
#mxAiVoiceCall.listening .mxvc-ring{
  border-color:rgba(232,197,71,0.55)!important;
  animation:mxvcRingListen .6s ease-in-out infinite alternate!important;
}
#mxAiVoiceCall.speaking-ai .mxvc-ring{
  border-color:rgba(77,255,180,0.5)!important;
  animation:mxvcRingListen .35s ease-in-out infinite alternate!important;
}
@keyframes mxvcRingListen{from{transform:scale(1);opacity:.5}to{transform:scale(1.12);opacity:1}}

/* ── Floating particles ── */
.mxvc-particles{position:absolute;width:270px;height:270px;pointer-events:none;}
.mxvc-dot{
  position:absolute;border-radius:50%;
  background:var(--ai-gold);opacity:0;
  box-shadow:0 0 4px var(--ai-gold);
}
.mxvc-dot:nth-child(1){width:5px;height:5px;top:5%;left:50%;}
.mxvc-dot:nth-child(2){width:4px;height:4px;top:16%;left:89%;}
.mxvc-dot:nth-child(3){width:6px;height:6px;top:65%;left:94%;}
.mxvc-dot:nth-child(4){width:4px;height:4px;top:90%;left:55%;}
.mxvc-dot:nth-child(5){width:5px;height:5px;top:72%;left:4%;}
.mxvc-dot:nth-child(6){width:3px;height:3px;top:20%;left:2%;}
.mxvc-dot:nth-child(7){width:4px;height:4px;top:46%;left:98%;}
.mxvc-dot:nth-child(8){width:3px;height:3px;top:52%;left:0%;}
#mxAiVoiceCall.listening .mxvc-dot,
#mxAiVoiceCall.speaking-ai .mxvc-dot{animation:mxvcDotRise 2s ease-in-out infinite;}
#mxAiVoiceCall.speaking-ai .mxvc-dot{background:#4dffb4;box-shadow:0 0 4px #4dffb4;}
.mxvc-dot:nth-child(1){animation-delay:0s}.mxvc-dot:nth-child(2){animation-delay:.25s}
.mxvc-dot:nth-child(3){animation-delay:.5s}.mxvc-dot:nth-child(4){animation-delay:.75s}
.mxvc-dot:nth-child(5){animation-delay:1s}.mxvc-dot:nth-child(6){animation-delay:1.25s}
.mxvc-dot:nth-child(7){animation-delay:1.5s}.mxvc-dot:nth-child(8){animation-delay:1.75s}
@keyframes mxvcDotRise{
  0%{opacity:0;transform:scale(0) translateY(0)}
  20%{opacity:1;transform:scale(1.2) translateY(-6px)}
  60%{opacity:.5;transform:scale(.8) translateY(-20px)}
  100%{opacity:0;transform:scale(0) translateY(-34px)}
}

/* ── CORE ORB — 3D premium ── */
.mxvc-orb{
  width:122px;height:122px;border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%,rgba(255,255,255,0.55) 0%,rgba(255,255,255,0.05) 38%,transparent 55%),
    radial-gradient(circle at 70% 75%,rgba(0,0,0,0.35) 0%,transparent 55%),
    linear-gradient(145deg,#ffe066 0%,#e8a800 35%,#c87800 65%,#6b3e00 100%);
  display:flex;align-items:center;justify-content:center;
  box-shadow:
    0 0 0 2px rgba(255,220,60,0.18),
    0 0 0 6px rgba(232,197,71,0.12),
    0 0 32px rgba(232,197,71,0.7),
    0 0 80px rgba(232,197,71,0.28),
    0 0 140px rgba(200,160,0,0.12),
    0 12px 40px rgba(0,0,0,0.65),
    inset 0 2px 0 rgba(255,255,255,0.55),
    inset 0 -3px 8px rgba(0,0,0,0.35);
  position:relative;z-index:2;
  cursor:pointer;
  -webkit-user-select:none;user-select:none;
  transition:box-shadow .6s cubic-bezier(.22,1,.36,1), background .6s;
  will-change:transform,filter;
}
/* Inner aurora shimmer layer */
.mxvc-orb::before{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(
    from 180deg at 40% 40%,
    rgba(255,255,255,0.0) 0%,
    rgba(255,255,255,0.22) 18%,
    rgba(255,220,80,0.15) 32%,
    rgba(255,255,255,0.0) 45%,
    rgba(255,255,255,0.0) 100%
  );
  animation:mxvcOrbShimmer 4s linear infinite;
  pointer-events:none;
  mix-blend-mode:overlay;
  border-radius:50%;
  overflow:hidden;
}
@keyframes mxvcOrbShimmer{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

.mxvc-orb svg{
  position:relative;z-index:1;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.6));
  pointer-events:none;
}

/* ── Emotion Face on Orb ── */
.mxvc-face{
  position:absolute;inset:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  z-index:3;pointer-events:none;
  opacity:0;
  transition:opacity .5s cubic-bezier(.22,1,.36,1);
}
.mxvc-face.show{opacity:1;}
.mxvc-face svg{
  filter:drop-shadow(0 2px 8px rgba(0,0,0,0.5));
  transition:all .4s cubic-bezier(.34,1.56,.64,1);
}
/* Hide default icon when face shows */
.mxvc-orb.has-emotion > svg:first-of-type{
  opacity:0;transition:opacity .3s;
}

/* Emotion color themes — orb background override */
#mxAiVoiceCall.emotion-happy .mxvc-orb{
  background:
    radial-gradient(circle at 32% 28%,rgba(255,255,255,0.55) 0%,transparent 52%),
    radial-gradient(circle at 70% 75%,rgba(0,0,0,0.3) 0%,transparent 55%),
    linear-gradient(145deg,#ffe566 0%,#ffb800 40%,#e07000 70%,#7a3500 100%);
  box-shadow:
    0 0 0 2px rgba(255,200,0,0.25),0 0 0 8px rgba(255,200,0,0.1),
    0 0 38px rgba(255,200,0,0.8),0 0 90px rgba(255,180,0,0.3),
    0 12px 40px rgba(0,0,0,0.6),inset 0 2px 0 rgba(255,255,255,0.55);
}
#mxAiVoiceCall.emotion-happy .mxvc-aurora{
  background:conic-gradient(from 0deg,transparent 0%,rgba(255,220,0,0.0) 25%,rgba(255,220,0,0.95) 48%,rgba(255,160,0,0.4) 62%,transparent 78%,transparent 100%);
  animation-duration:3s;
}
#mxAiVoiceCall.emotion-thinking .mxvc-orb{
  background:
    radial-gradient(circle at 32% 28%,rgba(255,255,255,0.45) 0%,transparent 52%),
    radial-gradient(circle at 70% 75%,rgba(0,0,0,0.35) 0%,transparent 55%),
    linear-gradient(145deg,#c8b8ff 0%,#8060e0 40%,#5030b0 70%,#1a0860 100%);
  box-shadow:
    0 0 0 2px rgba(160,120,255,0.25),0 0 0 8px rgba(140,100,255,0.1),
    0 0 38px rgba(140,100,255,0.75),0 0 90px rgba(120,80,255,0.28),
    0 12px 40px rgba(0,0,0,0.65),inset 0 2px 0 rgba(255,255,255,0.45);
  animation:mxvcOrbThink 1.8s ease-in-out infinite alternate!important;
}
@keyframes mxvcOrbThink{
  from{transform:scale(1);filter:brightness(1) saturate(1);}
  to{transform:scale(1.06) rotate(2deg);filter:brightness(1.15) saturate(1.1);}
}
#mxAiVoiceCall.emotion-thinking .mxvc-aurora{
  background:conic-gradient(from 0deg,transparent 0%,rgba(160,120,255,0.0) 25%,rgba(180,140,255,0.9) 48%,rgba(120,80,255,0.4) 62%,transparent 78%,transparent 100%);
  animation-duration:4s;
}
#mxAiVoiceCall.emotion-thinking .mxvc-glow-pool{
  background:radial-gradient(circle,rgba(140,100,255,0.3) 0%,rgba(100,60,220,0.08) 45%,transparent 72%);
}
#mxAiVoiceCall.emotion-sad .mxvc-orb{
  background:
    radial-gradient(circle at 32% 28%,rgba(255,255,255,0.35) 0%,transparent 52%),
    radial-gradient(circle at 70% 75%,rgba(0,0,0,0.4) 0%,transparent 55%),
    linear-gradient(145deg,#80c8ff 0%,#2880d0 40%,#0850a0 70%,#021840 100%);
  box-shadow:
    0 0 0 2px rgba(60,150,255,0.2),0 0 0 8px rgba(40,120,255,0.08),
    0 0 32px rgba(40,130,255,0.65),0 0 80px rgba(20,100,255,0.22),
    0 12px 40px rgba(0,0,0,0.7),inset 0 2px 0 rgba(255,255,255,0.35);
  animation:mxvcOrbSad 3s ease-in-out infinite alternate!important;
}
@keyframes mxvcOrbSad{
  from{transform:scale(1) translateY(0);filter:brightness(0.95);}
  to{transform:scale(0.97) translateY(3px);filter:brightness(0.85);}
}
#mxAiVoiceCall.emotion-sad .mxvc-aurora{
  background:conic-gradient(from 0deg,transparent 0%,rgba(60,140,255,0.0) 25%,rgba(80,160,255,0.75) 48%,rgba(40,100,255,0.35) 62%,transparent 78%,transparent 100%);
  animation-duration:8s;opacity:.4;
}
#mxAiVoiceCall.emotion-serious .mxvc-orb{
  background:
    radial-gradient(circle at 32% 28%,rgba(255,255,255,0.3) 0%,transparent 52%),
    radial-gradient(circle at 70% 75%,rgba(0,0,0,0.45) 0%,transparent 55%),
    linear-gradient(145deg,#ff9060 0%,#e04010 40%,#a01800 70%,#400000 100%);
  box-shadow:
    0 0 0 2px rgba(255,80,40,0.25),0 0 0 8px rgba(220,60,20,0.1),
    0 0 36px rgba(220,60,20,0.8),0 0 85px rgba(180,40,0,0.3),
    0 12px 40px rgba(0,0,0,0.7),inset 0 2px 0 rgba(255,255,255,0.3);
  animation:mxvcOrbSerious 1s ease-in-out infinite alternate!important;
}
@keyframes mxvcOrbSerious{
  from{transform:scale(1);filter:brightness(1) saturate(1.1);}
  to{transform:scale(1.04);filter:brightness(1.12) saturate(1.3);}
}
#mxAiVoiceCall.emotion-serious .mxvc-aurora{
  background:conic-gradient(from 0deg,transparent 0%,rgba(255,80,40,0.0) 25%,rgba(255,100,50,0.9) 48%,rgba(200,50,0,0.45) 62%,transparent 78%,transparent 100%);
  animation-duration:2s;
}
#mxAiVoiceCall.emotion-excited .mxvc-orb{
  background:
    radial-gradient(circle at 32% 28%,rgba(255,255,255,0.6) 0%,transparent 50%),
    radial-gradient(circle at 70% 75%,rgba(0,0,0,0.25) 0%,transparent 55%),
    linear-gradient(145deg,#fff0a0 0%,#ffcc00 30%,#ff8800 60%,#ff2200 100%);
  box-shadow:
    0 0 0 2px rgba(255,180,0,0.3),0 0 0 10px rgba(255,160,0,0.15),
    0 0 45px rgba(255,160,0,0.9),0 0 110px rgba(255,120,0,0.35),
    0 12px 40px rgba(0,0,0,0.55),inset 0 2px 0 rgba(255,255,255,0.65);
  animation:mxvcOrbExcited .3s ease-in-out infinite alternate!important;
}
@keyframes mxvcOrbExcited{
  from{transform:scale(1);filter:brightness(1.1) saturate(1.2);}
  to{transform:scale(1.16);filter:brightness(1.35) saturate(1.5);}
}
#mxAiVoiceCall.emotion-excited .mxvc-aurora{
  background:conic-gradient(from 0deg,transparent 0%,rgba(255,180,0,0.0) 15%,rgba(255,200,0,1) 42%,rgba(255,100,0,0.6) 58%,transparent 72%,transparent 100%);
  animation-duration:1s;opacity:1;
}

/* ── Curious — teal/cyan ── */
#mxAiVoiceCall.emotion-curious .mxvc-orb{
  background:
    radial-gradient(circle at 32% 28%,rgba(255,255,255,0.5) 0%,transparent 52%),
    radial-gradient(circle at 70% 75%,rgba(0,0,0,0.3) 0%,transparent 55%),
    linear-gradient(145deg,#a0fff0 0%,#00c8b8 40%,#008070 70%,#002830 100%);
  box-shadow:0 0 0 2px rgba(0,220,200,0.25),0 0 0 8px rgba(0,200,180,0.1),0 0 38px rgba(0,200,180,0.8),0 0 90px rgba(0,160,150,0.3),0 12px 40px rgba(0,0,0,0.6),inset 0 2px 0 rgba(255,255,255,0.5);
  animation:mxvcOrbCurious 2.2s ease-in-out infinite alternate!important;
}
@keyframes mxvcOrbCurious{
  from{transform:scale(1) rotate(-2deg);filter:brightness(1) saturate(1);}
  to{transform:scale(1.07) rotate(2deg);filter:brightness(1.1) saturate(1.15);}
}
#mxAiVoiceCall.emotion-curious .mxvc-aurora{
  background:conic-gradient(from 0deg,transparent 0%,rgba(0,200,180,0) 25%,rgba(0,220,200,0.9) 48%,rgba(0,160,150,0.4) 62%,transparent 78%,transparent 100%);
  animation-duration:3.5s;
}
/* ── Laughing — lime/green ── */
#mxAiVoiceCall.emotion-laughing .mxvc-orb{
  background:
    radial-gradient(circle at 32% 28%,rgba(255,255,255,0.6) 0%,transparent 50%),
    radial-gradient(circle at 70% 75%,rgba(0,0,0,0.2) 0%,transparent 55%),
    linear-gradient(145deg,#e0ffb0 0%,#80e000 35%,#40a000 65%,#103800 100%);
  box-shadow:0 0 0 2px rgba(120,220,0,0.3),0 0 0 10px rgba(100,200,0,0.12),0 0 42px rgba(100,200,0,0.85),0 0 100px rgba(80,180,0,0.32),0 12px 40px rgba(0,0,0,0.55),inset 0 2px 0 rgba(255,255,255,0.65);
  animation:mxvcOrbLaugh .45s ease-in-out infinite alternate!important;
}
@keyframes mxvcOrbLaugh{
  from{transform:scale(1) skewX(-1deg);filter:brightness(1.05) saturate(1.1);}
  to{transform:scale(1.13) skewX(1deg);filter:brightness(1.3) saturate(1.4);}
}
#mxAiVoiceCall.emotion-laughing .mxvc-aurora{
  background:conic-gradient(from 0deg,transparent 0%,rgba(120,220,0,0) 15%,rgba(140,240,0,0.95) 42%,rgba(80,180,0,0.5) 58%,transparent 72%,transparent 100%);
  animation-duration:1.2s;opacity:1;
}
/* ── Surprised — pink/magenta ── */
#mxAiVoiceCall.emotion-surprised .mxvc-orb{
  background:
    radial-gradient(circle at 32% 28%,rgba(255,255,255,0.6) 0%,transparent 50%),
    radial-gradient(circle at 70% 75%,rgba(0,0,0,0.28) 0%,transparent 55%),
    linear-gradient(145deg,#ffc0f0 0%,#e040b0 35%,#a00080 65%,#380028 100%);
  box-shadow:0 0 0 2px rgba(220,60,180,0.28),0 0 0 10px rgba(200,40,160,0.12),0 0 42px rgba(200,40,160,0.88),0 0 105px rgba(160,0,130,0.32),0 12px 40px rgba(0,0,0,0.58),inset 0 2px 0 rgba(255,255,255,0.6);
  animation:mxvcOrbSurprised .25s ease-in-out 3!important;
}
@keyframes mxvcOrbSurprised{
  0%{transform:scale(1);}50%{transform:scale(1.22);}100%{transform:scale(1.05);}
}
#mxAiVoiceCall.emotion-surprised .mxvc-aurora{
  background:conic-gradient(from 0deg,transparent 0%,rgba(220,60,180,0) 20%,rgba(240,80,200,0.95) 45%,rgba(180,20,150,0.5) 60%,transparent 75%,transparent 100%);
  animation-duration:1.5s;opacity:1;
}

/* Idle float */
#mxAiVoiceCall:not(.listening):not(.speaking-ai) .mxvc-orb{
  animation:mxvcOrbFloat 3.5s ease-in-out infinite;
}
@keyframes mxvcOrbFloat{
  0%,100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-5px) scale(1.015);}
}

/* Listening */
#mxAiVoiceCall.listening .mxvc-orb{
  animation:mxvcOrbListen .55s cubic-bezier(.37,0,.63,1) infinite alternate;
  box-shadow:
    0 0 0 2px rgba(255,220,60,0.3),
    0 0 0 8px rgba(232,197,71,0.18),
    0 0 40px rgba(232,197,71,0.85),
    0 0 100px rgba(232,197,71,0.38),
    0 12px 40px rgba(0,0,0,0.6),
    inset 0 2px 0 rgba(255,255,255,0.55),
    inset 0 -3px 8px rgba(0,0,0,0.3);
}
@keyframes mxvcOrbListen{
  from{transform:scale(1);filter:brightness(1) saturate(1);}
  to{transform:scale(1.14);filter:brightness(1.22) saturate(1.2);}
}

/* Speaking AI — green */
#mxAiVoiceCall.speaking-ai .mxvc-orb{
  background:
    radial-gradient(circle at 32% 28%,rgba(255,255,255,0.55) 0%,rgba(255,255,255,0.05) 38%,transparent 55%),
    radial-gradient(circle at 70% 75%,rgba(0,0,0,0.3) 0%,transparent 55%),
    linear-gradient(145deg,#a0ffda 0%,#00e890 35%,#00b870 60%,#004d30 100%);
  box-shadow:
    0 0 0 2px rgba(77,255,180,0.25),
    0 0 0 8px rgba(77,255,180,0.14),
    0 0 40px rgba(77,255,180,0.82),
    0 0 100px rgba(77,255,180,0.32),
    0 12px 40px rgba(0,0,0,0.6),
    inset 0 2px 0 rgba(255,255,255,0.55),
    inset 0 -3px 8px rgba(0,0,0,0.3);
  animation:mxvcOrbSpeak .42s cubic-bezier(.37,0,.63,1) infinite alternate;
}
#mxAiVoiceCall.speaking-ai .mxvc-orb::before{
  background:conic-gradient(
    from 180deg at 40% 40%,
    rgba(255,255,255,0.0) 0%,
    rgba(255,255,255,0.28) 18%,
    rgba(100,255,200,0.18) 32%,
    rgba(255,255,255,0.0) 45%,
    rgba(255,255,255,0.0) 100%
  );
}
@keyframes mxvcOrbSpeak{
  from{transform:scale(1);filter:brightness(1) saturate(1);}
  to{transform:scale(1.12);filter:brightness(1.25) saturate(1.3);}
}

/* Tap ripple — double ring */
.mxvc-orb.ripple::after{
  content:'';position:absolute;
  inset:-14px;border-radius:50%;
  border:2.5px solid rgba(232,197,71,0.7);
  animation:mxvcRipple1 .7s cubic-bezier(.22,1,.36,1) forwards;
}
.mxvc-orb.ripple::before{
  animation:mxvcOrbShimmer 4s linear infinite,mxvcRipple2 .7s .1s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes mxvcRipple1{0%{transform:scale(1);opacity:1}100%{transform:scale(1.7);opacity:0}}
@keyframes mxvcRipple2{0%{opacity:0}10%{opacity:.5}100%{opacity:0}}

/* ── Status text ── */
.mxvc-status{
  font-size:20px;font-weight:800;
  color:var(--ai-txt);font-family:var(--ai-font);
  margin-top:20px;letter-spacing:.2px;
  transition:color .4s;
}
.mxvc-sub{
  font-size:13px;color:var(--ai-txt-dim);
  margin-top:6px;font-family:var(--ai-font);
  text-align:center;line-height:1.65;
  transition:color .4s;
  max-width:240px;
}

/* ── Gemini waveform ── */
.mxvc-wave{
  display:flex;gap:3px;align-items:center;
  height:44px;margin-top:12px;
}
.mxvc-wave span{
  border-radius:4px;background:var(--ai-gold);
  opacity:.18;transform:scaleY(.16);
  transition:background .5s;
}
.mxvc-wave span:nth-child(1){width:3px;height:14px;}
.mxvc-wave span:nth-child(2){width:3px;height:22px;}
.mxvc-wave span:nth-child(3){width:4px;height:34px;}
.mxvc-wave span:nth-child(4){width:3px;height:44px;}
.mxvc-wave span:nth-child(5){width:4px;height:38px;}
.mxvc-wave span:nth-child(6){width:3px;height:28px;}
.mxvc-wave span:nth-child(7){width:4px;height:44px;}
.mxvc-wave span:nth-child(8){width:3px;height:36px;}
.mxvc-wave span:nth-child(9){width:4px;height:44px;}
.mxvc-wave span:nth-child(10){width:3px;height:30px;}
.mxvc-wave span:nth-child(11){width:3px;height:20px;}
.mxvc-wave span:nth-child(12){width:3px;height:12px;}
#mxAiVoiceCall.listening .mxvc-wave span{opacity:.9;animation:mxvcBar 1.1s ease-in-out infinite;}
#mxAiVoiceCall.speaking-ai .mxvc-wave span{opacity:.92;background:#4dffb4;animation:mxvcBar .48s ease-in-out infinite;}
.mxvc-wave span:nth-child(1){animation-delay:0s}.mxvc-wave span:nth-child(2){animation-delay:.07s}
.mxvc-wave span:nth-child(3){animation-delay:.14s}.mxvc-wave span:nth-child(4){animation-delay:.22s}
.mxvc-wave span:nth-child(5){animation-delay:.3s}.mxvc-wave span:nth-child(6){animation-delay:.22s}
.mxvc-wave span:nth-child(7){animation-delay:.14s}.mxvc-wave span:nth-child(8){animation-delay:.07s}
.mxvc-wave span:nth-child(9){animation-delay:.04s}.mxvc-wave span:nth-child(10){animation-delay:.11s}
.mxvc-wave span:nth-child(11){animation-delay:.18s}.mxvc-wave span:nth-child(12){animation-delay:.26s}
@keyframes mxvcBar{
  0%,100%{transform:scaleY(.16)}
  25%{transform:scaleY(.5)}
  50%{transform:scaleY(1)}
  75%{transform:scaleY(.62)}
}

/* ── Live transcript ── */
.mxvc-transcript{
  margin-top:12px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:20px;padding:11px 20px;
  font-size:13px;color:var(--ai-txt-dim);
  font-family:var(--ai-font);
  width:100%;max-width:310px;text-align:center;
  line-height:1.65;min-height:46px;
  display:flex;align-items:center;justify-content:center;
  transition:all .35s;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 2px 12px rgba(0,0,0,0.2);
}
.mxvc-transcript.has-text{
  color:var(--ai-txt);
  border-color:rgba(232,197,71,0.28);
  background:rgba(232,197,71,0.05);
  box-shadow:0 2px 16px rgba(232,197,71,0.1);
}

/* ── Controls glass pill ── */
.mxvc-controls{
  display:flex;gap:28px;align-items:flex-end;
  margin-top:22px;
  position:relative;z-index:5;
  padding:18px 36px 16px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:36px;
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  box-shadow:
    0 8px 36px rgba(0,0,0,0.45),
    0 1px 0 rgba(255,255,255,0.07) inset,
    0 -1px 0 rgba(0,0,0,0.3) inset;
}
.mxvc-btn-wrap{display:flex;flex-direction:column;align-items:center;gap:7px;}
.mxvc-btn-lbl{
  font-size:10px;font-weight:600;letter-spacing:.4px;
  color:rgba(255,255,255,0.3);font-family:var(--ai-font);
  text-transform:uppercase;transition:color .2s;
  user-select:none;pointer-events:none;
}
.mxvc-btn{
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:none;cursor:pointer;
  transition:
    transform .2s cubic-bezier(.34,1.56,.64,1),
    box-shadow .22s ease,
    background .22s ease,
    border-color .22s ease;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  position:relative;overflow:hidden;
}
/* Shimmer sweep */
.mxvc-btn::before{
  content:'';position:absolute;
  top:-50%;left:-70%;
  width:50%;height:200%;
  background:linear-gradient(to right,transparent,rgba(255,255,255,0.14),transparent);
  transform:skewX(-18deg);
  transition:left .4s ease;
  pointer-events:none;
}
.mxvc-btn:hover::before{left:130%;}
.mxvc-btn:active{transform:scale(.87)!important;transition-duration:.1s!important;}

/* END */
.mxvc-btn.end{
  background:linear-gradient(145deg,rgba(239,68,68,0.3),rgba(180,20,20,0.18));
  border:1.5px solid rgba(239,68,68,0.5);
  color:#ff7070;
  width:64px;height:64px;
  box-shadow:
    0 0 0 0 rgba(239,68,68,.45),
    0 5px 22px rgba(239,68,68,.32),
    inset 0 1px 0 rgba(255,120,120,.18);
  animation:mxvcEndPulse 2.8s ease-in-out infinite;
}
@keyframes mxvcEndPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.4),0 5px 22px rgba(239,68,68,.3),inset 0 1px 0 rgba(255,120,120,.18);}
  50%{box-shadow:0 0 0 9px rgba(239,68,68,0),0 5px 22px rgba(239,68,68,.3),inset 0 1px 0 rgba(255,120,120,.18);}
}
.mxvc-btn.end:hover{
  background:linear-gradient(145deg,rgba(239,68,68,.45),rgba(200,30,30,.3));
  transform:scale(1.05);
}
.mxvc-btn-wrap:has(.end) .mxvc-btn-lbl{color:rgba(239,100,100,.55);}

/* MUTE & SPK */
.mxvc-btn.mute,.mxvc-btn.spk{
  background:rgba(255,255,255,0.06);
  border:1.5px solid rgba(255,255,255,0.1);
  color:rgba(255,255,255,.55);
  box-shadow:0 2px 12px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.07);
}
.mxvc-btn.mute:hover,.mxvc-btn.spk:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.2);
  color:rgba(255,255,255,.85);
  transform:scale(1.07);
  box-shadow:0 4px 18px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.1);
}
.mxvc-btn.mute.active{
  background:linear-gradient(145deg,rgba(239,68,68,.22),rgba(180,20,20,.12));
  border-color:rgba(239,68,68,.5);
  color:#ff7070;
  box-shadow:0 0 18px rgba(239,68,68,.28),inset 0 1px 0 rgba(255,120,120,.15);
  animation:mxvcMutePulse 1.8s ease-in-out infinite;
}
@keyframes mxvcMutePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.3),0 0 18px rgba(239,68,68,.22);}
  50%{box-shadow:0 0 0 6px rgba(239,68,68,0),0 0 18px rgba(239,68,68,.22);}
}
.mxvc-btn-wrap:has(.mute.active) .mxvc-btn-lbl{color:rgba(239,100,100,.65);}
.mxvc-btn.spk.active{
  background:linear-gradient(145deg,rgba(232,197,71,.22),rgba(160,130,0,.1));
  border-color:rgba(232,197,71,.5);
  color:var(--ai-gold);
  box-shadow:0 0 18px rgba(232,197,71,.3),inset 0 1px 0 rgba(255,220,80,.15);
}
.mxvc-btn-wrap:has(.spk.active) .mxvc-btn-lbl{color:rgba(232,197,71,.65);}

/* ── FAB in topbar ── */
.mxai-vcall-fab{
  width:32px;height:32px;border-radius:50%;
  background:rgba(77,255,180,0.1);
  border:1.5px solid rgba(77,255,180,0.3);
  color:#4dffb4;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .2s;flex-shrink:0;
}
.mxai-vcall-fab:hover{background:rgba(77,255,180,.2);}
.mxai-vcall-fab.active{
  background:rgba(239,68,68,.14);
  border-color:rgba(239,68,68,.45);
  color:#ef4444;
  animation:mxvcFabPulse 1.6s ease-in-out infinite;
}
@keyframes mxvcFabPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.38)}
  50%{box-shadow:0 0 0 7px rgba(239,68,68,0)}
}

/* ── Timer ── */
#mxVcTimer.warn{color:#f59e0b!important;animation:mxvcTimerWarn 1s ease-in-out infinite}
#mxVcTimer.danger{color:#ef4444!important;animation:mxvcTimerWarn .5s ease-in-out infinite}
@keyframes mxvcTimerWarn{0%,100%{opacity:1}50%{opacity:.3}}

/* ── Limit bar ── */
#mxVcLimitBar{
  position:absolute;top:0;left:0;right:0;height:2px;
  background:rgba(255,255,255,.05);overflow:hidden;
}
#mxVcLimitFill{
  height:100%;
  background:linear-gradient(90deg,#E8C547,#4dffb4,#a78bfa);
  background-size:220% 100%;
  animation:mxvcLimitShimmer 3.5s linear infinite;
  transition:width .5s linear;
}
@keyframes mxvcLimitShimmer{0%{background-position:0%}100%{background-position:220%}}

/* ── Paywall overlay ── */
#mxVcPaywall{
  display:none;position:absolute;inset:0;z-index:60;
  background:rgba(2,1,8,.9);backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  flex-direction:column;align-items:center;justify-content:center;
  padding:28px;border-radius:inherit;
  animation:mxvcPwIn .4s cubic-bezier(.22,1,.36,1) both;
}
@keyframes mxvcPwIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
#mxVcPaywall.show{display:flex;}
.mxvc-pw-icon{
  width:72px;height:72px;border-radius:50%;
  background:linear-gradient(135deg,rgba(232,197,71,.22),rgba(232,197,71,.05));
  border:2px solid rgba(232,197,71,.4);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
  animation:mxvcPwIconPulse 2.2s ease-in-out infinite;
}
@keyframes mxvcPwIconPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(232,197,71,.35)}
  50%{box-shadow:0 0 0 18px rgba(232,197,71,0)}
}
.mxvc-pw-title{font-size:20px;font-weight:800;color:#fff;font-family:var(--ai-font);margin-bottom:8px;text-align:center}
.mxvc-pw-sub{font-size:13px;color:rgba(255,255,255,.55);text-align:center;line-height:1.65;margin-bottom:6px}
.mxvc-pw-plans{display:flex;flex-direction:column;gap:10px;width:100%;max-width:280px;margin:16px 0}
.mxvc-pw-plan{
  border-radius:14px;padding:14px 16px;
  display:flex;align-items:center;gap:12px;cursor:pointer;
  transition:all .22s;border:1.5px solid;
}
.mxvc-pw-plan.premium{
  background:linear-gradient(135deg,rgba(232,197,71,.14),rgba(232,197,71,.04));
  border-color:rgba(232,197,71,.5);
}
.mxvc-pw-plan.premium:hover{background:linear-gradient(135deg,rgba(232,197,71,.25),rgba(232,197,71,.1));transform:scale(1.02);}
.mxvc-pw-plan.credits{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);}
.mxvc-pw-plan.credits:hover{background:rgba(255,255,255,.09);transform:scale(1.02);}
.mxvc-pw-pi{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mxvc-pw-plan.premium .mxvc-pw-pi{background:rgba(232,197,71,.14)}
.mxvc-pw-plan.credits .mxvc-pw-pi{background:rgba(255,255,255,.07)}
.mxvc-pw-pl{flex:1}
.mxvc-pw-pname{font-size:14px;font-weight:700;color:#fff;font-family:var(--ai-font)}
.mxvc-pw-pdesc{font-size:11px;color:rgba(255,255,255,.45);margin-top:2px}
.mxvc-pw-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;background:rgba(232,197,71,.18);color:var(--ai-gold);border:1px solid rgba(232,197,71,.3)}
.mxvc-pw-dismiss{font-size:12px;color:rgba(255,255,255,.28);cursor:pointer;margin-top:4px;padding:8px}
.mxvc-pw-dismiss:hover{color:rgba(255,255,255,.6)}


/* Timestamp */
.mxai-ts{font-size:10px;color:var(--ai-txt-dim);padding:0 4px;font-weight:500}

/* Streaming cursor */
.mxai-stream-cursor{
  display:inline-block;
  width:2px;height:1em;
  background:var(--ai-gold);
  margin-left:2px;
  vertical-align:text-bottom;
  animation:mxaiCursorBlink .6s step-end infinite;
}
@keyframes mxaiCursorBlink{0%,100%{opacity:1}50%{opacity:0}}

/* Typing dots — premium wave */
.mxai-typing{display:flex;gap:5px;padding:5px 3px;align-items:flex-end}
.mxai-typing span{
  width:7px;height:7px;border-radius:50%;
  background:var(--ai-gold);opacity:.35;
  animation:mxaiDot 1.3s infinite ease-in-out;
  display:inline-block;
}
.mxai-typing span:nth-child(2){animation-delay:.18s}
.mxai-typing span:nth-child(3){animation-delay:.36s}
@keyframes mxaiDot{
  0%,60%,100%{transform:translateY(0) scale(.75);opacity:.3}
  30%{transform:translateY(-7px) scale(1.1);opacity:1}
}

/* Date divider */
.mxai-divider{
  display:flex;align-items:center;gap:10px;
  color:var(--ai-txt-dim);font-size:10px;font-weight:600;
  letter-spacing:.8px;text-transform:uppercase;margin:4px 0;
}
.mxai-divider::before,.mxai-divider::after{
  content:'';flex:1;height:1px;background:var(--ai-border);
}

/* Formatting inside bubbles */
.mxai-bbl strong{color:var(--ai-gold);font-weight:700}
.mxai-bbl em{color:var(--ai-txt-mid)}
.mxai-bbl code{
  font-family:monospace;font-size:12px;
  background:rgba(232,197,71,0.1);
  border:1px solid rgba(232,197,71,0.2);
  padding:1px 6px;border-radius:5px;color:var(--ai-gold);
}
.mxai-bbl ul{margin:6px 0 6px 18px;display:flex;flex-direction:column;gap:3px}
.mxai-bbl li{list-style:disc}

/* ─── Input Zone ─── */
.mxai-inp-zone{
  padding:10px 14px 16px;
  border-top:1px solid var(--ai-border);
  background:var(--ai-bg);
  flex-shrink:0;
}
.mxai-inp-box{
  display:flex;gap:8px;align-items:flex-end;
  background:var(--ai-surface);
  border:1.5px solid var(--ai-border);
  border-radius:18px;
  padding:7px 8px 7px 14px;
  transition:border-color .2s,box-shadow .2s;
}
.mxai-inp-box:focus-within{
  border-color:var(--ai-border-gold);
  box-shadow:0 0 0 4px var(--ai-gold-dim);
}
#mxAiInput{
  flex:1;background:none;border:none;
  padding:5px 0;font-size:14px;
  color:var(--ai-txt);outline:none;
  resize:none;max-height:120px;
  line-height:1.55;font-family:var(--ai-font);
  caret-color:var(--ai-gold);
  font-weight:500;
}
#mxAiInput::placeholder{color:var(--ai-txt-dim)}
/* Input action buttons */
.mxai-inp-actions{display:flex;gap:5px;align-items:flex-end;flex-shrink:0}
.mxai-inp-btn{
  width:34px;height:34px;border-radius:11px;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--ai-border);
  color:var(--ai-txt-dim);font-size:15px;
  cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:all .18s;
  flex-shrink:0;
}
.mxai-inp-btn:hover{background:var(--ai-gold-dim);border-color:var(--ai-border-gold);color:var(--ai-gold)}
.mxai-inp-btn:active{transform:scale(.92)}
/* Send button */
#mxAiSend{
  width:38px;height:38px;border-radius:13px;
  background:linear-gradient(135deg,#E8C547,#c8a010);
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;flex-shrink:0;color:#000;
  box-shadow:0 3px 12px var(--ai-gold-glow);
}
#mxAiSend:hover{transform:scale(1.06);box-shadow:0 6px 20px var(--ai-gold-glow)}
#mxAiSend:active{transform:scale(.95)}
#mxAiSend:disabled{opacity:.3;cursor:not-allowed;transform:none;box-shadow:none}
/* Char count + hint */
.mxai-inp-meta{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:7px;padding:0 2px;
}
.mxai-inp-hint{font-size:10px;color:var(--ai-txt-dim);font-weight:500}
.mxai-char-count{font-size:10px;color:var(--ai-txt-dim);font-weight:500}
.mxai-char-count.warn{color:#f59e0b}
.mxai-char-count.over{color:#ef4444}

/* Voice recording indicator */
.mxai-recording{
  display:none;align-items:center;gap:8px;
  padding:8px 14px;margin-bottom:8px;
  background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.25);
  border-radius:12px;
  font-size:12px;color:#ef4444;font-weight:500;
}
.mxai-recording.active{display:flex}
.mxai-rec-dot{
  width:8px;height:8px;border-radius:50%;
  background:#ef4444;animation:mxaiRec .8s infinite alternate;
}
@keyframes mxaiRec{from{opacity:1}to{opacity:.3}}

/* ─── Toast notification ─── */
.mxai-toast{
  position:absolute;bottom:90px;left:50%;transform:translateX(-50%) translateY(10px);
  background:var(--ai-surface);border:1px solid var(--ai-border-gold);
  color:var(--ai-gold);
  padding:8px 18px;border-radius:20px;
  font-size:12px;font-weight:600;
  opacity:0;transition:all .25s;pointer-events:none;
  white-space:nowrap;z-index:10;
  box-shadow:0 8px 30px rgba(0,0,0,0.5);
}
.mxai-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ─── Scroll to bottom button ─── */
#mxAiScrollBtn{
  position:absolute;bottom:100px;right:16px;
  width:36px;height:36px;border-radius:50%;
  background:var(--ai-surface);
  border:1px solid var(--ai-border-gold);
  color:var(--ai-gold);font-size:16px;
  cursor:pointer;display:none;
  align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,0.5);
  z-index:5;transition:all .2s;
}
#mxAiScrollBtn.show{display:flex}
#mxAiScrollBtn:hover{transform:scale(1.1)}

/* Font sizes */
#mxAiPanel.fs-small .mxai-bbl{font-size:12.5px}
#mxAiPanel.fs-medium .mxai-bbl{font-size:14px}
#mxAiPanel.fs-large .mxai-bbl{font-size:15.5px}
#mxAiPanel.fs-xlarge .mxai-bbl{font-size:17px}

/* Compact mode */
#mxAiPanel.compact #mxAiMsgs{gap:8px}
#mxAiPanel.compact .mxai-bbl{padding:9px 13px}

/* Bubble shape options */
#mxAiPanel.bubble-rounded .mxai-bbl{border-radius:20px}
#mxAiPanel.bubble-sharp .mxai-bbl{border-radius:8px}
#mxAiPanel.bubble-pill .mxai-bbl{border-radius:24px}

/* Avatar visibility */
#mxAiPanel.no-avatar .mxai-av{display:none}

/* ─── Chat History in Settings ─── */
.mxai-history-section{display:flex;flex-direction:column;gap:0}
.mxai-history-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:8px;
}
.mxai-history-actions{display:flex;gap:6px}
.mxai-hist-btn{
  padding:5px 11px;border-radius:8px;font-size:11px;font-weight:600;
  border:1px solid var(--ai-border);background:transparent;
  color:var(--ai-txt-dim);cursor:pointer;transition:all .18s;
  display:flex;align-items:center;gap:4px;
}
.mxai-hist-btn:hover{background:var(--ai-gold-dim);border-color:var(--ai-border-gold);color:var(--ai-gold)}
.mxai-hist-btn.danger:hover{background:rgba(239,68,68,0.1);border-color:rgba(239,68,68,0.4);color:#ef4444}
.mxai-sessions-list{
  display:flex;flex-direction:column;gap:6px;
  max-height:180px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--ai-border) transparent;
}
.mxai-sessions-list::-webkit-scrollbar{width:3px}
.mxai-sessions-list::-webkit-scrollbar-thumb{background:var(--ai-border);border-radius:2px}
.mxai-session-item{
  display:flex;align-items:center;gap:9px;
  padding:9px 11px;border-radius:11px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--ai-border);
  cursor:pointer;transition:all .18s;
  position:relative;
}
.mxai-session-item:hover{
  background:var(--ai-gold-dim);
  border-color:var(--ai-border-gold);
}
.mxai-session-icon{
  width:30px;height:30px;border-radius:9px;flex-shrink:0;
  background:rgba(232,197,71,0.08);
  border:1px solid var(--ai-border-gold);
  display:flex;align-items:center;justify-content:center;
  color:var(--ai-gold);
}
.mxai-session-info{flex:1;min-width:0}
.mxai-session-title{
  font-size:12px;font-weight:600;color:var(--ai-txt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mxai-session-meta{
  font-size:10px;color:var(--ai-txt-dim);margin-top:1px;
  display:flex;gap:6px;align-items:center;
}
.mxai-session-del{
  width:22px;height:22px;border-radius:6px;flex-shrink:0;
  background:transparent;border:none;
  color:var(--ai-txt-dim);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.mxai-session-del:hover{background:rgba(239,68,68,0.1);color:#ef4444}
.mxai-no-history{
  text-align:center;padding:16px;
  color:var(--ai-txt-dim);font-size:12px;
  line-height:1.6;
}

/* [style] */
/* ─── Chuna Patthar Dialog ─── */
#cpDialog{
  position:fixed;inset:0;z-index:99999;
  display:none;align-items:center;justify-content:center;
  padding:24px;
  background:rgba(0,0,0,0);
  backdrop-filter:blur(0px);
  transition:background .4s,backdrop-filter .4s;
}
#cpDialog.open{
  display:flex;
  background:rgba(0,0,0,0.82);
  backdrop-filter:blur(14px);
  animation:cpFadeIn .35s ease both;
}
@keyframes cpFadeIn{from{background:rgba(0,0,0,0);backdrop-filter:blur(0)}to{background:rgba(0,0,0,0.82);backdrop-filter:blur(14px)}}
.cp-card{
  background:linear-gradient(145deg,#0f0d00,#1a1600,#0a0900);
  border:1.5px solid rgba(232,197,71,0.4);
  border-radius:28px;
  max-width:370px;width:100%;
  padding:0;overflow:hidden;
  box-shadow:0 0 80px rgba(232,197,71,0.18),0 30px 80px rgba(0,0,0,0.9);
  animation:cpSlideUp .45s cubic-bezier(.22,1,.36,1) both;
  position:relative;
}
@keyframes cpSlideUp{from{opacity:0;transform:translateY(30px) scale(.94)}to{opacity:1;transform:none}}
.cp-glow-top{
  position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,#E8C547,#FFF0A0,#E8C547,transparent);
  animation:cpGlowSlide 3s infinite linear;
}
@keyframes cpGlowSlide{0%{opacity:.6}50%{opacity:1}100%{opacity:.6}}
.cp-icon-wrap{
  display:flex;align-items:center;justify-content:center;
  padding:28px 0 16px;
  position:relative;
}
.cp-icon{
  width:72px;height:72px;border-radius:22px;overflow:hidden;
  border:2px solid rgba(232,197,71,0.5);
  box-shadow:0 0 30px rgba(232,197,71,0.35),0 8px 24px rgba(0,0,0,0.6);
  animation:cpIconPulse 2.5s ease-in-out infinite;
}
@keyframes cpIconPulse{0%,100%{box-shadow:0 0 30px rgba(232,197,71,0.35),0 8px 24px rgba(0,0,0,0.6)}50%{box-shadow:0 0 50px rgba(232,197,71,0.55),0 8px 32px rgba(0,0,0,0.7)}}
.cp-icon img{width:100%;height:100%;object-fit:cover;display:block}
.cp-body{padding:0 24px 10px;text-align:center}
.cp-quote-label{
  font-family:'Cinzel Decorative',serif;
  font-size:9px;letter-spacing:3px;
  color:rgba(232,197,71,0.55);
  text-transform:uppercase;margin-bottom:14px;
}
.cp-quote{
  font-family:'Cormorant Garamond',serif;
  font-size:18px;font-style:italic;line-height:1.7;
  color:#EEE8D5;
  margin-bottom:8px;
  text-shadow:0 2px 20px rgba(232,197,71,0.15);
}
.cp-quote em{
  color:#E8C547;font-style:normal;
  font-weight:700;font-size:20px;
}
.cp-author{
  font-family:'Cinzel Decorative',serif;
  font-size:10px;letter-spacing:2px;
  color:rgba(232,197,71,0.7);
  margin-bottom:6px;
}
.cp-divider{
  width:80px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,197,71,0.4),transparent);
  margin:14px auto;
}
.cp-sub{
  font-family:'Noto Sans Devanagari',sans-serif;
  font-size:13px;color:rgba(238,232,213,0.65);
  line-height:1.65;margin-bottom:18px;
}
.cp-footer{
  padding:0 24px 28px;
  display:flex;flex-direction:column;gap:10px;
}
.cp-btn-primary{
  width:100%;padding:14px;
  background:linear-gradient(135deg,#E8C547,#C9920A,#E8C547);
  background-size:200%;
  border:none;border-radius:14px;
  font-family:'Cinzel Decorative',serif;
  font-size:11px;letter-spacing:2px;
  color:#0a0800;font-weight:900;
  cursor:pointer;
  transition:all .25s;
  animation:cpBtnGlow 2s infinite alternate;
}
@keyframes cpBtnGlow{from{box-shadow:0 4px 20px rgba(232,197,71,0.3)}to{box-shadow:0 4px 30px rgba(232,197,71,0.55)}}
.cp-btn-primary:active{transform:scale(.97)}
.cp-btn-secondary{
  width:100%;padding:10px;
  background:none;border:1px solid rgba(232,197,71,0.2);
  border-radius:12px;
  font-family:'Cinzel Decorative',serif;
  font-size:10px;letter-spacing:1.5px;
  color:rgba(232,197,71,0.5);
  cursor:pointer;transition:all .2s;
}
.cp-btn-secondary:hover{border-color:rgba(232,197,71,0.4);color:rgba(232,197,71,0.7)}

/* ─── AI Tutor — Mood Bar ─── */
#mxAiMoodBar{
  display:flex;gap:6px;align-items:center;
  padding:8px 14px;
  border-bottom:1px solid var(--ai-border);
  flex-shrink:0;
  background:rgba(0,0,0,0.2);
  overflow-x:auto;scrollbar-width:none;
}
#mxAiMoodBar::-webkit-scrollbar{display:none}
.mxai-mood-lbl{
  font-size:10px;color:var(--ai-txt-dim);
  white-space:nowrap;font-weight:600;
  font-family:var(--ai-font);letter-spacing:.5px;
}
.mxai-mood-btn{
  flex-shrink:0;
  padding:4px 10px;border-radius:16px;
  border:1px solid var(--ai-border);
  background:none;color:var(--ai-txt-mid);
  font-size:12px;cursor:pointer;
  transition:all .18s;white-space:nowrap;
  font-family:var(--ai-font);
}
.mxai-mood-btn:active{transform:scale(.93)}
.mxai-mood-btn.sel{
  background:rgba(232,197,71,0.15);
  border-color:rgba(232,197,71,0.4);
  color:#E8C547;
}

/* ─── Sangam Tip Banner ─── */
.mxai-tip-banner{
  margin:0 14px 12px;
  padding:12px 14px;
  background:linear-gradient(135deg,rgba(232,197,71,0.08),rgba(232,197,71,0.03));
  border:1px solid rgba(232,197,71,0.2);
  border-radius:16px;
  animation:mxaiWelcome .5s ease both;
}
.mxai-tip-header{
  display:flex;align-items:center;gap:6px;
  margin-bottom:6px;
}
.mxai-tip-badge{
  font-size:9px;font-weight:700;letter-spacing:1.5px;
  color:#E8C547;font-family:var(--ai-font);
  text-transform:uppercase;
}
.mxai-tip-text{
  font-size:12.5px;color:var(--ai-txt);
  line-height:1.6;font-family:var(--ai-font);
}
.mxai-tip-author{
  font-size:10px;color:var(--ai-txt-dim);
  margin-top:5px;font-style:italic;
}

/* ═══ AI Paywall Modal CSS ═══ */
#mxAiPaywall{
  position:fixed;inset:0;z-index:99998;
  display:none;align-items:flex-end;justify-content:center;
  background:rgba(0,0,0,0.65);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
#mxAiPaywall.open{ display:flex; }
.mxpw-sheet{
  width:100%;max-width:480px;
  background:linear-gradient(180deg,#1a1300 0%,#0d0e18 100%);
  border-radius:24px 24px 0 0;
  border:1px solid rgba(232,197,71,0.18);
  border-bottom:none;
  padding:8px 20px 36px;
  max-height:85vh;overflow-y:auto;
  animation:mxpwSlideUp .3s ease;
}
@keyframes mxpwSlideUp{
  from{transform:translateY(100%);opacity:0}
  to{transform:translateY(0);opacity:1}
}
.mxpw-pill{
  width:36px;height:4px;border-radius:2px;
  background:rgba(232,197,71,0.3);
  margin:8px auto 20px;
}
.mxpw-head{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;margin-bottom:20px;
}
.mxpw-icon{
  width:56px;height:56px;border-radius:16px;
  background:rgba(232,197,71,0.1);border:1.5px solid rgba(232,197,71,0.3);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:12px;
}
.mxpw-title{
  font-family:Cinzel Decorative,serif;font-size:15px;
  color:#E8C547;letter-spacing:.5px;margin-bottom:6px;
}
.mxpw-sub{
  font-size:13px;color:rgba(255,255,255,0.65);
  font-family:Cormorant Garamond,serif;line-height:1.5;
}
.mxpw-cards{
  display:flex;flex-direction:column;gap:10px;margin-bottom:16px;
}
.mxpw-card{
  display:flex;align-items:center;gap:12px;
  padding:13px 14px;border-radius:14px;cursor:pointer;
  border:1.5px solid rgba(232,197,71,0.15);
  background:rgba(255,255,255,0.03);transition:.2s;
}
.mxpw-card:active{transform:scale(.98);}
.mxpw-card.gold{border-color:rgba(232,197,71,0.4);background:rgba(232,197,71,0.06);}
.mxpw-card.green{border-color:rgba(34,197,94,0.35);background:rgba(34,197,94,0.05);}
.mxpw-card.blue{border-color:rgba(99,102,241,0.35);background:rgba(99,102,241,0.05);}
.mxpw-card-icon{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  background:rgba(232,197,71,0.08);
  display:flex;align-items:center;justify-content:center;
  color:#E8C547;
}
.mxpw-card.green .mxpw-card-icon{background:rgba(34,197,94,0.1);color:#22c55e;}
.mxpw-card.blue .mxpw-card-icon{background:rgba(99,102,241,0.1);color:#818cf8;}
.mxpw-card-body{ flex:1;min-width:0; }
.mxpw-card-title{
  font-family:Cinzel Decorative,serif;font-size:10px;
  color:#E8C547;letter-spacing:.5px;margin-bottom:3px;
}
.mxpw-card.green .mxpw-card-title{color:#4ade80;}
.mxpw-card.blue .mxpw-card-title{color:#818cf8;}
.mxpw-card-desc{
  font-size:11px;color:rgba(255,255,255,0.5);
  font-family:Cormorant Garamond,serif;
}
.mxpw-card-badge{
  font-family:Cinzel Decorative,serif;font-size:10px;
  color:#E8C547;background:rgba(232,197,71,0.12);
  border:1px solid rgba(232,197,71,0.3);
  border-radius:8px;padding:4px 8px;white-space:nowrap;flex-shrink:0;
}
.mxpw-dismiss{
  text-align:center;font-size:11px;
  color:rgba(255,255,255,0.35);
  font-family:Cormorant Garamond,serif;
  padding:8px;cursor:pointer;
}
.mxpw-dismiss:active{color:rgba(255,255,255,0.6);}

/* [style id="mxUPPatchStyles"] */
/* ── Animated Empty State Styles ── */
@keyframes mxESFloat {
  0%,100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-8px) rotate(-3deg); }
  66% { transform: translateY(-4px) rotate(3deg); }
}
@keyframes mxESPulse {
  0%,100% { opacity:0.4; transform: scale(1); }
  50% { opacity:0.8; transform: scale(1.08); }
}
@keyframes mxESOrbit {
  from { transform: rotate(0deg) translateX(38px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(38px) rotate(-360deg); }
}
@keyframes mxESOrbit2 {
  from { transform: rotate(120deg) translateX(52px) rotate(-120deg); }
  to   { transform: rotate(480deg) translateX(52px) rotate(-480deg); }
}
@keyframes mxESOrbit3 {
  from { transform: rotate(240deg) translateX(30px) rotate(-240deg); }
  to   { transform: rotate(600deg) translateX(30px) rotate(-600deg); }
}
@keyframes mxESReveal {
  from { opacity:0; transform:translateY(20px) scale(0.95); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes mxESShimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes mxESSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes mxESBlink {
  0%,100% { opacity:1; }
  50% { opacity:0.3; }
}
@keyframes mxESWave {
  0%,100% { transform:scaleY(0.4); }
  50% { transform:scaleY(1); }
}

.mxes-wrap {
  animation: mxESReveal 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
  text-align: center;
  padding: 44px 24px 36px;
  position: relative;
  overflow: hidden;
}
.mxes-wrap::before {
  content:'';
  position:absolute;
  inset:0;
  background: radial-gradient(ellipse at 50% 30%, rgba(232,197,71,0.04) 0%, transparent 65%);
  pointer-events:none;
}
.mxes-icon-wrap {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto 22px;
}
.mxes-icon-bg {
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(232,197,71,0.12);
  animation: mxESPulse 3s ease-in-out infinite;
}
.mxes-icon-bg-2 {
  position:absolute;
  inset:-12px;
  border-radius:50%;
  border:1px dashed rgba(232,197,71,0.07);
  animation: mxESSpin 18s linear infinite;
}
.mxes-icon-core {
  position:absolute;
  inset:14px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:34px;
  animation: mxESFloat 4s ease-in-out infinite;
}
.mxes-orbit-dot {
  position:absolute;
  top:50%;
  left:50%;
  width:7px;
  height:7px;
  border-radius:50%;
  margin:-3.5px;
}
.mxes-orbit-dot:nth-child(1){ animation:mxESOrbit 3.5s linear infinite; background:#E8C547; opacity:0.7; }
.mxes-orbit-dot:nth-child(2){ animation:mxESOrbit2 5s linear infinite; background:#818cf8; opacity:0.6; }
.mxes-orbit-dot:nth-child(3){ animation:mxESOrbit3 4s linear infinite; background:#22c55e; opacity:0.5; }
.mxes-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: 13px;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
  background: linear-gradient(135deg, #E8C547 0%, #FFF0A0 50%, #C9A227 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: mxESShimmer 3s linear infinite;
}
.mxes-sub {
  font-family: 'Cormorant Garamond', serif;
  font-size: 13.5px;
  color: rgba(255,255,255,0.38);
  line-height: 1.8;
  font-style: italic;
  margin-bottom: 20px;
}
.mxes-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 22px;
  border-radius: 50px;
  border: 1.5px solid rgba(232,197,71,0.35);
  background: rgba(232,197,71,0.07);
  color: var(--g,#e8c547);
  font-family: 'Cinzel Decorative', serif;
  font-size: 8px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}
.mxes-cta-btn:hover {
  background: rgba(232,197,71,0.15);
  border-color: rgba(232,197,71,0.6);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(232,197,71,0.18);
}
.mxes-lines {
  display:flex;
  align-items:flex-end;
  gap:3px;
  justify-content:center;
  height:22px;
  margin: 0 auto 18px;
}
.mxes-line-bar {
  width:3px;
  background: linear-gradient(to top, rgba(232,197,71,0.6), rgba(232,197,71,0.15));
  border-radius:2px;
  animation: mxESWave 1.2s ease-in-out infinite;
}
.mxes-line-bar:nth-child(1){height:10px;animation-delay:0s}
.mxes-line-bar:nth-child(2){height:18px;animation-delay:0.15s}
.mxes-line-bar:nth-child(3){height:14px;animation-delay:0.3s}
.mxes-line-bar:nth-child(4){height:22px;animation-delay:0.45s}
.mxes-line-bar:nth-child(5){height:16px;animation-delay:0.6s}
.mxes-line-bar:nth-child(6){height:10px;animation-delay:0.75s}

/* ── Post card shimmer upgrade ── */
.mxup-post-card {
  background: var(--card,#1a1a2e);
  border: 1px solid var(--bdr,rgba(255,255,255,.08));
  border-radius:16px;
  padding:14px;
  margin-bottom:10px;
  transition: all 0.22s ease;
  position:relative;
  overflow:hidden;
}
.mxup-post-card::before {
  content:'';
  position:absolute;
  inset:0;
  opacity:0;
  transition: opacity 0.22s;
  background: radial-gradient(circle at 50% 0%, rgba(232,197,71,0.05), transparent 70%);
  pointer-events:none;
}
.mxup-post-card:hover {
  border-color: rgba(232,197,71,0.22);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.mxup-post-card:hover::before { opacity:1; }

/* ── Profile cover pattern ── */
@keyframes mxUPCoverDrift {
  0%   { transform: translate(0,0) rotate(0deg); }
  33%  { transform: translate(8px,-6px) rotate(2deg); }
  66%  { transform: translate(-6px,4px) rotate(-1deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}

/* [style id="mxAchStyles"] */
/* ════ RESET OLD STYLES ════ */
.ach-grid { display: flex !important; flex-direction: column !important; gap: 0 !important; }
.ach-card { display: none !important; }  /* hide old cards, new ones render via JS */

/* ════ ACHIEVEMENT PAGE HEADER ════ */
.mx-ach-topbar {
  background: linear-gradient(135deg, rgba(232,197,71,0.08) 0%, rgba(232,197,71,0.03) 100%);
  border: 1px solid rgba(232,197,71,0.15);
  border-radius: 18px;
  padding: 18px 16px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
.mx-ach-topbar::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(232,197,71,0.12), transparent 70%);
  pointer-events: none;
}
.mx-ach-topbar-icon {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #E8C547, #C9A227);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(232,197,71,0.35), 0 0 0 3px rgba(232,197,71,0.15);
}
.mx-ach-topbar-info { flex: 1; }
.mx-ach-topbar-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: 13px;
  color: var(--fg, #E8C547);
  letter-spacing: 0.5px;
  margin-bottom: 3px;
}
.mx-ach-topbar-sub {
  font-family: 'Cormorant Garamond', serif;
  font-size: 12px;
  color: var(--fgd, #aaa);
  font-style: italic;
}
.mx-ach-topbar-count {
  font-family: 'Cinzel Decorative', serif;
  font-size: 22px;
  color: var(--g, #E8C547);
  text-align: right;
  flex-shrink: 0;
}
.mx-ach-topbar-count span {
  display: block;
  font-size: 9px;
  color: var(--fgd);
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: 1px;
  margin-top: 1px;
}

/* ════ CATEGORY SECTION ════ */
.mx-ach-section {
  margin-bottom: 26px;
}
.mx-ach-section-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 0 2px;
}
.mx-ach-section-icon {
  width: 30px; height: 30px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.mx-ach-section-label {
  font-family: 'Cinzel Decorative', serif;
  font-size: 9.5px;
  letter-spacing: 2px;
  flex: 1;
}
.mx-ach-section-prog {
  font-family: 'Cormorant Garamond', serif;
  font-size: 12px;
  color: var(--fgd);
  font-weight: 600;
}

/* ════ BADGE CARD — DUOLINGO STYLE ════ */
.mx-badge-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mx-badge-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255,255,255,0.035);
  border: 1.5px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: 14px 16px 14px 14px;
  position: relative;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.34,1.2,0.64,1);
  cursor: default;
}
.mx-badge-card.mx-earned {
  border-color: transparent;
  background: rgba(255,255,255,0.045);
}
.mx-badge-card.mx-earned::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1.5px;
  background: linear-gradient(135deg, var(--tier-c1, #E8C547), var(--tier-c2, #C9A227), var(--tier-c1, #E8C547));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.mx-badge-card.mx-earned::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: radial-gradient(ellipse at 30% 50%, var(--tier-c1, #E8C547) 0%, transparent 65%);
  opacity: 0.06;
  pointer-events: none;
}
.mx-badge-card.mx-locked {
  opacity: 0.6;
}
.mx-badge-card.mx-earned:active {
  transform: scale(0.97);
}

/* Badge Medal circle */
.mx-badge-medal {
  position: relative;
  flex-shrink: 0;
  width: 68px; height: 68px;
}
.mx-badge-medal-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}
.mx-badge-medal-ring svg {
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}
.mx-badge-medal-inner {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}
.mx-badge-medal-lock {
  position: absolute;
  bottom: -1px; right: -1px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg2, #141720);
  border: 2px solid var(--bdr);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px;
  z-index: 2;
}
.mx-badge-medal-check {
  position: absolute;
  bottom: -1px; right: -1px;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* Badge info */
.mx-badge-info { flex: 1; min-width: 0; }
.mx-badge-tier-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 20px;
  padding: 3px 9px;
  font-family: 'Cinzel Decorative', serif;
  font-size: 7.5px;
  letter-spacing: 1.2px;
  margin-bottom: 5px;
  border: 1px solid;
  font-weight: 700;
}
.mx-badge-name {
  font-family: 'Cinzel Decorative', serif;
  font-size: 12px;
  color: var(--fg, #fff);
  letter-spacing: 0.2px;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.mx-badge-desc {
  font-family: 'Cormorant Garamond', serif;
  font-size: 12.5px;
  color: var(--fgd, #aaa);
  line-height: 1.45;
  font-style: italic;
}
.mx-badge-xp {
  font-family: 'Cinzel Decorative', serif;
  font-size: 9px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
}

/* ════ EARNED CELEBRATION SHIMMER ════ */
@keyframes mxAchShine {
  0% { transform: translateX(-130%) rotate(18deg); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateX(230%) rotate(18deg); opacity: 0; }
}
.mx-badge-card.mx-earned .mx-badge-shine {
  position: absolute;
  top: -60%;
  left: -40%;
  width: 40%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.09), rgba(255,255,255,0.04), transparent);
  animation: mxAchShine 4s ease-in-out infinite;
  animation-delay: 0.5s;
  pointer-events: none;
}

/* ════ PROGRESS BAR (section) ════ */
.mx-ach-sec-progbar {
  height: 3px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 14px;
}
.mx-ach-sec-progbar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 1s cubic-bezier(0.34,1.2,0.64,1);
}

/* ════ BADGE UNLOCK TOAST (Premium) ════ */
@keyframes mxBadgeToastIn {
  from { opacity:0; transform: translateX(-50%) translateY(-32px) scale(0.85); }
  to   { opacity:1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes mxBadgeToastOut {
  from { opacity:1; transform: translateX(-50%) translateY(0) scale(1); }
  to   { opacity:0; transform: translateX(-50%) translateY(-20px) scale(0.9); }
}
@keyframes mxBadgeGlow {
  0%,100% { box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 0 var(--tier-glow, rgba(232,197,71,0.6)); }
  50%      { box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 10px rgba(232,197,71,0); }
}
@keyframes mxBadgeParticle {
  0%   { transform: translate(0,0) scale(1); opacity:1; }
  100% { transform: translate(var(--px), var(--py)) scale(0); opacity:0; }
}
@keyframes mxBadgeRingPop {
  0%   { transform: scale(0) rotate(-180deg); opacity:0; }
  60%  { transform: scale(1.15) rotate(10deg); opacity:1; }
  100% { transform: scale(1) rotate(0deg); opacity:1; }
}
.mx-badge-toast {
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  width: min(90vw, 320px);
  background: linear-gradient(145deg, var(--bg3,#1c2030), var(--bg2,#141720));
  border-radius: 22px;
  padding: 20px 18px 18px;
  text-align: center;
  animation: mxBadgeToastIn 0.45s cubic-bezier(0.34,1.56,0.64,1) forwards, mxBadgeGlow 2s ease-in-out 0.5s infinite;
  border: 1.5px solid var(--tier-c1, #E8C547);
}
.mx-badge-toast-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 22px;
}
.mx-badge-toast-particle {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  top: 50%; left: 50%;
  animation: mxBadgeParticle 0.8s ease-out both;
}
.mx-badge-toast-medal {
  width: 76px; height: 76px;
  margin: 0 auto 14px;
  position: relative;
  animation: mxBadgeRingPop 0.55s cubic-bezier(0.34,1.56,0.64,1) 0.1s both;
}
.mx-badge-toast-label {
  font-family: 'Cinzel Decorative', serif;
  font-size: 9px;
  letter-spacing: 2.5px;
  margin-bottom: 6px;
}
.mx-badge-toast-name {
  font-family: 'Cinzel Decorative', serif;
  font-size: 16px;
  color: var(--fg, #fff);
  margin-bottom: 5px;
}
.mx-badge-toast-desc {
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px;
  color: var(--fgd, #aaa);
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 14px;
}
.mx-badge-toast-xp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(232,197,71,0.1);
  border: 1px solid rgba(232,197,71,0.25);
  border-radius: 20px;
  padding: 6px 16px;
  font-family: 'Cinzel Decorative', serif;
  font-size: 10px;
  color: var(--g, #E8C547);
  margin-bottom: 14px;
}
.mx-badge-toast-close {
  display: block;
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  color: var(--fgd);
  font-family: 'Cinzel Decorative', serif;
  font-size: 8px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.18s;
}
.mx-badge-toast-close:hover {
  background: rgba(255,255,255,0.1);
}

/* [style id="mxDuoAchStyles"] */
/* ════════════════════════════════════════
   ACHIEVEMENTS PAGE — PREMIUM DARK THEME
════════════════════════════════════════ */
#badgesScreen {
  background: #0d0d16 !important;
  font-family: 'Nunito', sans-serif !important;
}

#bdgHeader {
  background: linear-gradient(180deg, rgba(15,15,28,0.98) 0%, rgba(15,15,28,0.92) 100%) !important;
  border-bottom: 1px solid rgba(232,197,71,0.15) !important;
  padding: 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}
#bdgHeaderInner {
  display: flex !important;
  align-items: center !important;
  padding: 16px 18px !important;
  gap: 14px !important;
}
#bdgBackBtn {
  width: 38px !important; height: 38px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #f0f0f5 !important;
  font-size: 18px !important;
  cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: all 0.2s !important;
}
#bdgBackBtn:active { background: rgba(232,197,71,0.15) !important; border-color: rgba(232,197,71,0.4) !important; }
#bdgTitleMain {
  font-family: 'Nunito', sans-serif !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #f0f0f5 !important;
  letter-spacing: 0.2px !important;
}
#bdgTitleMain .bdg-trophy-icon { display: none !important; }
#bdgSubtitle {
  font-family: 'Nunito', sans-serif !important;
  font-size: 12px !important;
  color: rgba(255,255,255,0.4) !important;
  margin-top: 2px !important;
  font-weight: 600 !important;
}
#bdgGrid { padding: 0 !important; background: #0d0d16 !important; }

/* ═══ KEYFRAMES ═══ */
@keyframes mx-pop { 0%{transform:scale(0.7) rotate(-8deg);opacity:0} 70%{transform:scale(1.08) rotate(2deg)} 100%{transform:scale(1) rotate(0);opacity:1} }
@keyframes mx-fadein { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes mx-shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(200%)} }
@keyframes mx-glow-pulse { 0%,100%{opacity:0.4} 50%{opacity:1} }
@keyframes mx-progress { from{width:0} to{width:var(--w)} }
@keyframes mx-float { 0%,100%{transform:translateY(0px)} 50%{transform:translateY(-4px)} }

/* ═══ HERO BANNER ═══ */
.mx-hero {
  position: relative;
  margin: 0;
  padding: 28px 20px 24px;
  background: linear-gradient(135deg, rgba(232,197,71,0.12) 0%, rgba(255,107,53,0.06) 50%, rgba(99,102,241,0.08) 100%);
  border-bottom: 1px solid rgba(232,197,71,0.12);
  overflow: hidden;
  text-align: center;
}
.mx-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(232,197,71,0.08), transparent);
  pointer-events: none;
}
.mx-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
}
.mx-xp-ring {
  width: 90px; height: 90px;
  margin: 0 auto 16px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  animation: mx-float 3s ease-in-out infinite;
}
.mx-xp-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mx-xp-inner {
  font-family: 'Nunito', sans-serif;
  font-size: 22px; font-weight: 900;
  color: #E8C547;
  text-shadow: 0 0 20px rgba(232,197,71,0.5);
  position: relative; z-index: 1;
  line-height: 1;
}
.mx-xp-inner small { display: block; font-size: 9px; color: rgba(232,197,71,0.6); font-weight: 700; letter-spacing: 1px; margin-top: 2px; }
.mx-hero-name {
  font-family: 'Nunito', sans-serif;
  font-size: 20px; font-weight: 900;
  color: #f0f0f5;
  margin-bottom: 4px;
}
.mx-hero-sub {
  font-size: 12px; color: rgba(255,255,255,0.45); font-weight: 600;
}
.mx-hero-stats {
  display: flex; gap: 10px; margin-top: 20px;
  justify-content: center;
}
.mx-stat-pill {
  flex: 1; max-width: 110px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px; padding: 10px 8px; text-align: center;
}
.mx-stat-val {
  font-family: 'Nunito', sans-serif;
  font-size: 20px; font-weight: 900; color: #E8C547;
  line-height: 1;
}
.mx-stat-lbl { font-size: 9px; color: rgba(255,255,255,0.4); font-weight: 700; margin-top: 3px; letter-spacing: 0.5px; }

/* ═══ PERSONAL RECORDS ═══ */
.mx-records-section { padding: 20px 16px 4px; }
.mx-section-title {
  font-family: 'Nunito', sans-serif;
  font-size: 11px; font-weight: 800;
  color: rgba(255,255,255,0.35);
  letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.mx-section-title::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.07); }
.mx-records-row {
  display: flex; gap: 10px;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 4px;
}
.mx-records-row::-webkit-scrollbar { display: none; }
.mx-record-card {
  flex-shrink: 0; width: 130px;
  border-radius: 18px; padding: 14px 12px 12px;
  position: relative; overflow: hidden; text-align: center;
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: transform 0.2s;
}
.mx-record-card:active { transform: scale(0.96); }
.mx-record-icon {
  font-size: 28px; margin-bottom: 6px;
  display: block;
  filter: drop-shadow(0 4px 12px currentColor);
}
.mx-record-val {
  font-family: 'Nunito', sans-serif;
  font-size: 26px; font-weight: 900; color: #fff;
  line-height: 1; margin-bottom: 4px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.mx-record-label {
  font-family: 'Nunito', sans-serif;
  font-size: 11px; font-weight: 800;
  color: rgba(255,255,255,0.75);
}
.mx-record-date { font-size: 9px; color: rgba(255,255,255,0.35); margin-top: 2px; font-weight: 600; }
.mx-record-shimmer {
  position: absolute; top: 0; left: 0; right: 0; height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), transparent);
  border-radius: 18px 18px 0 0;
  pointer-events: none;
}

/* ═══ OVERALL PROGRESS ═══ */
.mx-overall-prog {
  margin: 16px 16px 0;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(232,197,71,0.2);
  border-radius: 18px; padding: 16px 18px;
  position: relative; overflow: hidden;
}
.mx-overall-prog::before {
  content: ''; position: absolute;
  top: -30px; right: -30px; width: 80px; height: 80px;
  background: radial-gradient(circle, rgba(232,197,71,0.1), transparent);
  pointer-events: none;
}
.mx-prog-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.mx-prog-title { font-size: 13px; font-weight: 800; color: #f0f0f5; }
.mx-prog-pct { font-size: 22px; font-weight: 900; color: #E8C547; }
.mx-prog-bar-bg { height: 8px; background: rgba(255,255,255,0.07); border-radius: 20px; overflow: hidden; }
.mx-prog-bar-fill {
  height: 100%; border-radius: 20px;
  background: linear-gradient(90deg, #b8962a, #E8C547, #fff5b0);
  box-shadow: 0 0 12px rgba(232,197,71,0.4);
  animation: mx-progress 1.4s cubic-bezier(0.22,1,0.36,1) both 0.3s;
}
.mx-prog-counts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.mx-prog-pill {
  padding: 3px 10px; border-radius: 20px;
  font-size: 10px; font-weight: 700;
  border: 1px solid currentColor;
}

/* ═══ CATEGORY HEADER ═══ */
.mx-cat-header {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 16px 10px;
}
.mx-cat-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.mx-cat-name {
  font-family: 'Nunito', sans-serif;
  font-size: 13px; font-weight: 800;
  color: #f0f0f5;
}
.mx-cat-line { flex: 1; height: 1px; background: rgba(255,255,255,0.06); }
.mx-cat-progress {
  font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.05);
  border-radius: 20px; padding: 2px 9px;
}

/* ═══ BADGE GRID ═══ */
.mx-badge-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px; padding: 0 14px 8px;
}

/* ═══ BADGE CARD ═══ */
.mx-badge-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px; padding: 14px 8px 12px;
  text-align: center; cursor: pointer;
  position: relative; overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s, border-color 0.22s;
  display: flex; flex-direction: column; align-items: center;
}
.mx-badge-card.mx-earned {
  border-color: var(--tier-color, rgba(232,197,71,0.35));
  background: linear-gradient(145deg, rgba(var(--tier-rgb,232,197,71),0.1), rgba(var(--tier-rgb,232,197,71),0.02));
  box-shadow: 0 4px 24px rgba(var(--tier-rgb,232,197,71),0.1), inset 0 1px 0 rgba(255,255,255,0.08);
}
.mx-badge-card.mx-earned:active { transform: scale(0.94); }
.mx-badge-card.mx-locked { opacity: 0.38; filter: grayscale(0.7); }
.mx-badge-card.mx-earned .mx-card-shimmer {
  position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
  animation: mx-shimmer 3s ease-in-out 1s forwards;
  pointer-events: none;
}
.mx-shield-wrap { margin-bottom: 9px; position: relative; }
.mx-badge-name {
  font-family: 'Nunito', sans-serif;
  font-size: 10px; font-weight: 800;
  color: #e8e8f0; line-height: 1.3; margin-bottom: 4px;
}
.mx-badge-card.mx-locked .mx-badge-name { color: rgba(255,255,255,0.25); }
.mx-badge-tier-lbl {
  font-size: 9px; font-weight: 700;
  color: rgba(255,255,255,0.3);
}
.mx-badge-card.mx-earned .mx-badge-tier-lbl {
  color: var(--tier-color, #E8C547);
}

/* Earned check badge */
.mx-earned-check {
  position: absolute; top: -3px; right: -3px;
  width: 16px; height: 16px;
  background: #22c55e;
  border: 2px solid #0d0d16;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; color: #fff; font-weight: 900;
}

/* ═══ BOTTOM DIVIDER ═══ */
.mx-section-gap { height: 10px; background: rgba(0,0,0,0.25); margin: 8px 0; }

/* [style] */
/* ══════════════════════════════════════════════════════════════
   MINDRIX WELLNESS TOKEN SYSTEM v3 — FULLY THEME-ADAPTIVE
   Zero hardcoded gold. All colors via CSS variables.
══════════════════════════════════════════════════════════════ */

/* ── Base tokens from theme vars ── */
:root {
  --t-accent:    var(--g,   #E8C547);
  --t-accent-l:  var(--gl,  #FFF0A0);
  --t-accent-d:  var(--gd,  #C9A227);
  --t-bg1:       var(--bg,  #0D0F14);
  --t-bg2:       var(--bg2, #141720);
  --t-bg3:       var(--bg3, #1C2030);
  --t-card:      var(--card,rgba(255,255,255,0.04));
  --t-bdr:       var(--bdr, rgba(255,255,255,0.08));
  --t-txt:       var(--txt, #EEE8D5);
  --t-txtd:      var(--txtd,rgba(238,232,213,0.65));
  --t-fg:        var(--fg,  rgba(232,197,71,0.95));
  --t-fgd:       var(--fgd, rgba(232,197,71,0.6));
  --t-shadow:    var(--shadow, rgba(232,197,71,0.22));

  /* Derived semi-transparent accent layers — set per theme below */
  --t-a9:   rgba(232,197,71,0.09);
  --t-a13:  rgba(232,197,71,0.13);
  --t-a28:  rgba(232,197,71,0.28);
  --t-a20:  rgba(232,197,71,0.20);
  --t-a05:  rgba(232,197,71,0.05);
  --t-a06:  rgba(232,197,71,0.06);
  --t-a07:  rgba(232,197,71,0.07);
  --t-a10:  rgba(232,197,71,0.10);
  --t-a18:  rgba(232,197,71,0.18);
  --t-a30:  rgba(232,197,71,0.30);
  --t-a03:  rgba(232,197,71,0.03);

  /* CTA button text — dark on gold */
  --t-cta-txt: #000000;

  /* Radius */
  --r-sm: 10px; --r-md: 16px; --r-lg: 20px; --r-xl: 26px;

  /* Mood colors (fixed semantic) */
  --mood-joy:#FBBF24; --mood-calm:#34D399; --mood-ok:#94A3B8;
  --mood-sad:#60A5FA; --mood-angry:#F87171;
  --mood-anxious:#A78BFA; --mood-tired:#6B7280;

  /* Streak colors (fixed semantic) */
  --streak-mind:#8B5CF6; --streak-heal:#10B981;
  --streak-focus:#3B82F6; --streak-wise:var(--t-accent);
}

/* ── MIDNIGHT BLUE ── */
body.theme-midnight {
  --t-a9:  rgba(96,165,250,0.09); --t-a13: rgba(96,165,250,0.13);
  --t-a28: rgba(96,165,250,0.28); --t-a20: rgba(96,165,250,0.20);
  --t-a05: rgba(96,165,250,0.05); --t-a06: rgba(96,165,250,0.06);
  --t-a07: rgba(96,165,250,0.07); --t-a10: rgba(96,165,250,0.10);
  --t-a18: rgba(96,165,250,0.18); --t-a30: rgba(96,165,250,0.30);
  --t-a03: rgba(96,165,250,0.03);
  --t-cta-txt: #ffffff;
}
/* ── EMERALD FOREST ── */
body.theme-emerald {
  --t-a9:  rgba(52,211,153,0.09); --t-a13: rgba(52,211,153,0.13);
  --t-a28: rgba(52,211,153,0.28); --t-a20: rgba(52,211,153,0.20);
  --t-a05: rgba(52,211,153,0.05); --t-a06: rgba(52,211,153,0.06);
  --t-a07: rgba(52,211,153,0.07); --t-a10: rgba(52,211,153,0.10);
  --t-a18: rgba(52,211,153,0.18); --t-a30: rgba(52,211,153,0.30);
  --t-a03: rgba(52,211,153,0.03);
  --t-cta-txt: #000000;
}
/* ── ROYAL PURPLE ── */
body.theme-purple {
  --t-a9:  rgba(192,132,252,0.09); --t-a13: rgba(192,132,252,0.13);
  --t-a28: rgba(192,132,252,0.28); --t-a20: rgba(192,132,252,0.20);
  --t-a05: rgba(192,132,252,0.05); --t-a06: rgba(192,132,252,0.06);
  --t-a07: rgba(192,132,252,0.07); --t-a10: rgba(192,132,252,0.10);
  --t-a18: rgba(192,132,252,0.18); --t-a30: rgba(192,132,252,0.30);
  --t-a03: rgba(192,132,252,0.03);
  --t-cta-txt: #ffffff;
}
/* ── ROSE PETAL ── */
body.theme-rose {
  --t-a9:  rgba(251,113,133,0.09); --t-a13: rgba(251,113,133,0.13);
  --t-a28: rgba(251,113,133,0.28); --t-a20: rgba(251,113,133,0.20);
  --t-a05: rgba(251,113,133,0.05); --t-a06: rgba(251,113,133,0.06);
  --t-a07: rgba(251,113,133,0.07); --t-a10: rgba(251,113,133,0.10);
  --t-a18: rgba(251,113,133,0.18); --t-a30: rgba(251,113,133,0.30);
  --t-a03: rgba(251,113,133,0.03);
  --t-cta-txt: #ffffff;
}
/* ── SUNSET ORANGE ── */
body.theme-sunset {
  --t-a9:  rgba(251,146,60,0.09); --t-a13: rgba(251,146,60,0.13);
  --t-a28: rgba(251,146,60,0.28); --t-a20: rgba(251,146,60,0.20);
  --t-a05: rgba(251,146,60,0.05); --t-a06: rgba(251,146,60,0.06);
  --t-a07: rgba(251,146,60,0.07); --t-a10: rgba(251,146,60,0.10);
  --t-a18: rgba(251,146,60,0.18); --t-a30: rgba(251,146,60,0.30);
  --t-a03: rgba(251,146,60,0.03);
  --t-cta-txt: #ffffff;
}
/* ── ARCTIC WHITE ── */
body.theme-arctic {
  --t-a9:  rgba(2,132,199,0.09); --t-a13: rgba(2,132,199,0.13);
  --t-a28: rgba(2,132,199,0.28); --t-a20: rgba(2,132,199,0.20);
  --t-a05: rgba(2,132,199,0.05); --t-a06: rgba(2,132,199,0.06);
  --t-a07: rgba(2,132,199,0.07); --t-a10: rgba(2,132,199,0.10);
  --t-a18: rgba(2,132,199,0.18); --t-a30: rgba(2,132,199,0.30);
  --t-a03: rgba(2,132,199,0.03);
  --t-cta-txt: #ffffff;
  --t-txt: #0C4A6E; --t-txtd: rgba(12,74,110,0.6);
}
/* ── LIGHT GOLD ── */
body.theme-light, body.light {
  --t-a9:  rgba(184,134,11,0.09); --t-a13: rgba(184,134,11,0.13);
  --t-a28: rgba(184,134,11,0.28); --t-a20: rgba(184,134,11,0.20);
  --t-a05: rgba(184,134,11,0.05); --t-a06: rgba(184,134,11,0.06);
  --t-a07: rgba(184,134,11,0.07); --t-a10: rgba(184,134,11,0.10);
  --t-a18: rgba(184,134,11,0.18); --t-a30: rgba(184,134,11,0.30);
  --t-a03: rgba(184,134,11,0.03);
  --t-cta-txt: #ffffff;
  --t-txt: #1C1200; --t-txtd: rgba(28,18,0,0.58);
}
/* ── SAFFRON INDIA ── */
body.theme-saffron {
  --t-a9:  rgba(249,115,22,0.09); --t-a13: rgba(249,115,22,0.13);
  --t-a28: rgba(249,115,22,0.28); --t-a20: rgba(249,115,22,0.20);
  --t-a05: rgba(249,115,22,0.05); --t-a06: rgba(249,115,22,0.06);
  --t-a07: rgba(249,115,22,0.07); --t-a10: rgba(249,115,22,0.10);
  --t-a18: rgba(249,115,22,0.18); --t-a30: rgba(249,115,22,0.30);
  --t-a03: rgba(249,115,22,0.03);
  --t-cta-txt: #ffffff;
}
/* ── DEEP OCEAN ── */
body.theme-ocean {
  --t-a9:  rgba(6,182,212,0.09); --t-a13: rgba(6,182,212,0.13);
  --t-a28: rgba(6,182,212,0.28); --t-a20: rgba(6,182,212,0.20);
  --t-a05: rgba(6,182,212,0.05); --t-a06: rgba(6,182,212,0.06);
  --t-a07: rgba(6,182,212,0.07); --t-a10: rgba(6,182,212,0.10);
  --t-a18: rgba(6,182,212,0.18); --t-a30: rgba(6,182,212,0.30);
  --t-a03: rgba(6,182,212,0.03);
  --t-cta-txt: #ffffff;
}
/* ── CHERRY BLOSSOM ── */
body.theme-sakura {
  --t-a9:  rgba(236,72,153,0.09); --t-a13: rgba(236,72,153,0.13);
  --t-a28: rgba(236,72,153,0.28); --t-a20: rgba(236,72,153,0.20);
  --t-a05: rgba(236,72,153,0.05); --t-a06: rgba(236,72,153,0.06);
  --t-a07: rgba(236,72,153,0.07); --t-a10: rgba(236,72,153,0.10);
  --t-a18: rgba(236,72,153,0.18); --t-a30: rgba(236,72,153,0.30);
  --t-a03: rgba(236,72,153,0.03);
  --t-cta-txt: #ffffff;
  --t-txt: #4a0020; --t-txtd: rgba(74,0,32,0.6);
}
/* ── AMOLED BLACK ── */
body.theme-amoled {
  --t-a9:  rgba(255,255,255,0.09); --t-a13: rgba(255,255,255,0.13);
  --t-a28: rgba(255,255,255,0.28); --t-a20: rgba(255,255,255,0.20);
  --t-a05: rgba(255,255,255,0.05); --t-a06: rgba(255,255,255,0.06);
  --t-a07: rgba(255,255,255,0.07); --t-a10: rgba(255,255,255,0.10);
  --t-a18: rgba(255,255,255,0.18); --t-a30: rgba(255,255,255,0.30);
  --t-a03: rgba(255,255,255,0.03);
  --t-cta-txt: #000000;
}
/* ── ANCIENT PARCHMENT ── */
body.theme-parchment {
  --t-a9:  rgba(109,40,217,0.09); --t-a13: rgba(109,40,217,0.13);
  --t-a28: rgba(109,40,217,0.28); --t-a20: rgba(109,40,217,0.20);
  --t-a05: rgba(109,40,217,0.05); --t-a06: rgba(109,40,217,0.06);
  --t-a07: rgba(109,40,217,0.07); --t-a10: rgba(109,40,217,0.10);
  --t-a18: rgba(109,40,217,0.18); --t-a30: rgba(109,40,217,0.30);
  --t-a03: rgba(109,40,217,0.03);
  --t-cta-txt: #ffffff;
  --t-txt: #1A0A2E; --t-txtd: rgba(26,10,46,0.6);
}

/* ════════════════════════════════════════════════════
   WELLNESS TOOLS PAGE SHELL
════════════════════════════════════════════════════ */
#wellnessToolsPage .sub-page-inner { padding-bottom: 120px; }

/* ════════════════════════════════════════════════════
   HERO BANNER
════════════════════════════════════════════════════ */
.wt4-hero {
  position: relative; padding: 26px 20px 20px;
  overflow: hidden; margin-bottom: 2px;
}
.wt4-hero-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 130% 70% at 50% -10%,
    var(--t-a9) 0%, transparent 65%);
  pointer-events: none;
}
.wt4-hero-orb {
  position: absolute; border-radius: 50%;
  filter: blur(44px); pointer-events: none;
}
.wt4-orb-a {
  width:140px; height:140px; top:-30px; right:-20px; opacity:0.15;
  background: radial-gradient(circle, var(--t-accent), transparent);
  animation: wt4Float 9s ease-in-out infinite;
}
.wt4-orb-b {
  width:90px; height:90px; bottom:-10px; left:5px; opacity:0.10;
  background: radial-gradient(circle, var(--t-accent-d), transparent);
  animation: wt4Float 13s ease-in-out infinite reverse;
}
@keyframes wt4Float {
  0%,100%{transform:translateY(0) scale(1)}
  50%    {transform:translateY(-10px) scale(1.07)}
}
.wt4-hero-eyebrow {
  font-family:'Cinzel Decorative',serif;
  font-size:8.5px; letter-spacing:3px;
  color:var(--t-accent); margin-bottom:5px; text-transform:uppercase;
}
.wt4-hero-title {
  font-family:'Noto Sans Devanagari',sans-serif;
  font-size:20px; font-weight:700;
  color:var(--t-txt); line-height:1.3;
}
.wt4-hero-sub {
  font-family:'Cormorant Garamond',serif;
  font-size:13px; color:var(--t-txtd);
  margin-top:4px; line-height:1.5;
}

/* ════════════════════════════════════════════════════
   SECTION DIVIDERS
════════════════════════════════════════════════════ */
.wt4-divider {
  display:flex; align-items:center; gap:10px;
  padding:0 20px; margin:22px 0 12px;
}
.wt4-divider-line {
  flex:1; height:1px;
  background: linear-gradient(to right, transparent, var(--t-a28), transparent);
}
.wt4-divider-label {
  font-family:'Cinzel Decorative',serif;
  font-size:8px; letter-spacing:2.5px;
  color:var(--t-fgd); white-space:nowrap; text-transform:uppercase;
}

/* ════════════════════════════════════════════════════
   PREMIUM LESSON CARD
════════════════════════════════════════════════════ */
.wt4-lesson-wrap { margin:0 16px 4px; }
.wt4-lesson-card {
  background: linear-gradient(135deg, var(--t-a9), var(--t-a03));
  border: 1px solid var(--t-a20);
  border-radius:var(--r-xl); padding:20px;
  position:relative; overflow:hidden;
}
.wt4-lesson-card-shine {
  position:absolute; top:-40%; left:-30%;
  width:60%; height:160%;
  background: linear-gradient(105deg, transparent, var(--t-a05), transparent);
  pointer-events:none;
  animation: wt4Shine 6s ease-in-out infinite;
}
@keyframes wt4Shine { 0%,100%{left:-30%} 50%{left:110%} }
.wt4-lesson-badge {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--t-a13); border:1px solid var(--t-a28);
  border-radius:20px; padding:3px 10px;
  font-family:'Cinzel Decorative',serif;
  font-size:8px; letter-spacing:1.5px;
  color:var(--t-accent); margin-bottom:12px;
}
.wt4-lesson-emoji { font-size:30px; margin-bottom:8px; display:block; }
.wt4-lesson-title {
  font-family:'Cormorant Garamond',serif;
  font-size:18px; font-weight:700;
  color:var(--t-txt); line-height:1.35; margin-bottom:5px;
}
.wt4-lesson-sub {
  font-family:'Noto Sans Devanagari',sans-serif;
  font-size:11px; color:var(--t-txtd);
  margin-bottom:12px; line-height:1.5;
}
.wt4-lesson-chips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.wt4-lesson-chip {
  display:inline-flex; align-items:center; gap:4px;
  background:var(--t-a05); border:1px solid var(--t-a13);
  border-radius:20px; padding:3px 9px;
  font-family:'Cormorant Garamond',serif;
  font-size:10px; color:var(--t-txtd);
}
.wt4-progress-label {
  display:flex; justify-content:space-between;
  font-family:'Cormorant Garamond',serif;
  font-size:10px; color:var(--t-txtd); margin-bottom:5px;
}
.wt4-progress-track {
  height:5px; background:var(--t-a05);
  border-radius:6px; overflow:hidden; margin-bottom:14px;
}
.wt4-progress-fill {
  height:100%; border-radius:6px;
  background:linear-gradient(90deg, var(--t-accent-d), var(--t-accent));
  transition:width 1.2s cubic-bezier(.34,1.56,.64,1);
}
.wt4-lesson-cta {
  width:100%;
  background:linear-gradient(135deg, var(--t-accent-d), var(--t-accent));
  border:none; color:var(--t-cta-txt);
  border-radius:var(--r-md); padding:13px;
  font-family:'Cinzel Decorative',serif;
  font-size:10px; font-weight:700;
  letter-spacing:0.5px; cursor:pointer;
  display:flex; align-items:center;
  justify-content:center; gap:8px;
  position:relative; overflow:hidden;
  transition:opacity .2s, transform .15s;
}
.wt4-lesson-cta::after {
  content:''; position:absolute;
  top:-50%; left:-60%; width:35%; height:200%;
  background:rgba(255,255,255,0.22);
  transform:skewX(-18deg);
  animation:wt4CTA 3.5s ease-in-out infinite;
}
@keyframes wt4CTA {
  0%  {left:-60%;opacity:0} 15%{opacity:1}
  45% {left:130%;opacity:0} 100%{left:130%;opacity:0}
}
.wt4-lesson-cta:active { transform:scale(0.98); }

/* ════════════════════════════════════════════════════
   MOTIVATION QUOTE CARD
════════════════════════════════════════════════════ */
.wt4-quote-wrap { margin:0 16px 4px; position:relative; }
.wt4-quote-card {
  background:var(--t-card); border:1px solid var(--t-bdr);
  border-radius:var(--r-xl); padding:22px 20px;
  position:relative; overflow:hidden;
}
.wt4-quote-aura {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:80%; height:80%;
  background:radial-gradient(ellipse, var(--t-a06), transparent 70%);
  pointer-events:none;
  animation:wt4Aura 5s ease-in-out infinite;
}
@keyframes wt4Aura {
  0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}
  50%    {opacity:1; transform:translate(-50%,-50%) scale(1.04)}
}
.wt4-quote-qmark {
  font-size:56px; line-height:0.8;
  color:var(--t-accent); opacity:0.12;
  font-family:Georgia,serif; margin-bottom:-8px;
}
.wt4-quote-text {
  font-family:'Cormorant Garamond',serif;
  font-size:15.5px; font-style:italic;
  color:var(--t-txt); line-height:1.8;
  position:relative; z-index:1; margin-bottom:12px;
}
.wt4-quote-author {
  font-family:'Cinzel Decorative',serif;
  font-size:8.5px; letter-spacing:2px;
  color:var(--t-fgd);
  position:relative; z-index:1; margin-bottom:14px;
}
.wt4-quote-btns { display:flex; gap:8px; position:relative; z-index:1; }
.wt4-qbtn {
  flex:1; padding:9px;
  border-radius:var(--r-sm);
  font-family:'Cormorant Garamond',serif;
  font-size:11px; cursor:pointer;
  display:flex; align-items:center;
  justify-content:center; gap:5px;
  transition:all .2s;
  border:1px solid var(--t-bdr);
  background:var(--t-bg3);
  color:var(--t-txtd);
}
.wt4-qbtn:active { transform:scale(0.97); }
.wt4-qbtn.saved {
  background:var(--t-a10);
  border-color:var(--t-a30);
  color:var(--t-accent);
}

/* ════════════════════════════════════════════════════
   MOOD TRACKER CARD
════════════════════════════════════════════════════ */
.wt4-mood-wrap { margin:0 16px 4px; }
.wt4-mood-card {
  background:var(--t-card);
  border:1px solid var(--t-bdr);
  border-radius:var(--r-xl); padding:18px 16px;
}
.wt4-mood-card-header {
  display:flex; align-items:center;
  justify-content:space-between; margin-bottom:14px;
}
.wt4-mood-card-label {
  font-family:'Cinzel Decorative',serif;
  font-size:9.5px; letter-spacing:1.5px;
  color:var(--t-accent);
}
.wt4-mood-status {
  font-family:'Cormorant Garamond',serif;
  font-size:11px; color:var(--t-txtd);
}
.wt4-mood-card .mood-pick-btn {
  border-radius:14px !important;
  padding:10px 5px !important;
  display:flex !important; flex-direction:column !important;
  align-items:center !important; gap:3px !important;
  font-size:20px !important;
  transition:all .25s cubic-bezier(.34,1.56,.64,1) !important;
  width:100% !important;
}
.wt4-mood-card .mood-pick-btn.selected {
  transform:scale(1.08) !important;
  box-shadow:0 0 0 2px var(--t-accent) !important;
}
.wt4-mood-card #moodLoggedMsg {
  font-size:12px !important;
  background:var(--t-a07);
  border:1px solid var(--t-a18);
  border-radius:10px; padding:8px 12px;
  margin-top:10px !important;
  color:var(--t-txt) !important;
}

/* ════════════════════════════════════════════════════
   STREAK GRID
════════════════════════════════════════════════════ */
.wt4-streak-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:10px; padding:0 16px;
}
.wt4-streak-card {
  border-radius:var(--r-lg); padding:14px 12px;
  border:1px solid var(--t-a13);
  position:relative; overflow:hidden; transition:transform .2s;
}
.wt4-streak-card:active { transform:scale(0.98); }
.wt4-streak-glow {
  position:absolute; top:-12px; right:-12px;
  width:70px; height:70px; border-radius:50%;
  filter:blur(22px); opacity:0.22;
}
.wt4-streak-shield {
  position:absolute; top:9px; right:9px;
  font-size:9px; color:var(--t-txtd);
  display:flex; align-items:center; gap:2px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:7px; padding:2px 5px;
}
.wt4-streak-icon { font-size:22px; display:block; margin-bottom:5px; }
.wt4-streak-type {
  font-family:'Cinzel Decorative',serif;
  font-size:7.5px; letter-spacing:1.5px;
  text-transform:uppercase; margin-bottom:3px;
}
.wt4-streak-num {
  font-family:'Cinzel Decorative',serif;
  font-size:28px; line-height:1;
  color:var(--t-txt); margin-bottom:1px;
}
.wt4-streak-unit {
  font-family:'Cormorant Garamond',serif;
  font-size:10px; color:var(--t-txtd); margin-bottom:8px;
}
.wt4-streak-bar {
  height:3px; background:var(--t-a07);
  border-radius:4px; overflow:hidden;
}
.wt4-streak-bar-fill {
  height:100%; border-radius:4px;
  transition:width 1s cubic-bezier(.34,1.56,.64,1);
}
/* Per-type streak colors (semantic, not theme-dependent) */
.wt4-streak-card[data-type="mind"] {
  background:rgba(139,92,246,0.10); border-color:rgba(139,92,246,0.22);
}
.wt4-streak-card[data-type="mind"] .wt4-streak-type,
.wt4-streak-card[data-type="mind"] .wt4-streak-num { color:#A78BFA; }
.wt4-streak-card[data-type="mind"] .wt4-streak-bar-fill { background:#8B5CF6; }
.wt4-streak-card[data-type="mind"] .wt4-streak-glow { background:#8B5CF6; }
.wt4-streak-card[data-type="heal"] {
  background:rgba(16,185,129,0.10); border-color:rgba(16,185,129,0.22);
}
.wt4-streak-card[data-type="heal"] .wt4-streak-type,
.wt4-streak-card[data-type="heal"] .wt4-streak-num { color:#34D399; }
.wt4-streak-card[data-type="heal"] .wt4-streak-bar-fill { background:#10B981; }
.wt4-streak-card[data-type="heal"] .wt4-streak-glow { background:#10B981; }
.wt4-streak-card[data-type="focus"] {
  background:rgba(59,130,246,0.10); border-color:rgba(59,130,246,0.22);
}
.wt4-streak-card[data-type="focus"] .wt4-streak-type,
.wt4-streak-card[data-type="focus"] .wt4-streak-num { color:#93C5FD; }
.wt4-streak-card[data-type="focus"] .wt4-streak-bar-fill { background:#3B82F6; }
.wt4-streak-card[data-type="focus"] .wt4-streak-glow { background:#3B82F6; }
.wt4-streak-card[data-type="wise"] {
  background:var(--t-a07); border-color:var(--t-a20);
}
.wt4-streak-card[data-type="wise"] .wt4-streak-type,
.wt4-streak-card[data-type="wise"] .wt4-streak-num { color:var(--t-accent); }
.wt4-streak-card[data-type="wise"] .wt4-streak-bar-fill {
  background:linear-gradient(90deg, var(--t-accent-d), var(--t-accent));
}
.wt4-streak-card[data-type="wise"] .wt4-streak-glow { background:var(--t-accent); }

/* ════════════════════════════════════════════════════
   QUICK TOOLS GRID
════════════════════════════════════════════════════ */
.wt4-tools-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:9px; padding:0 16px;
}
.wt4-tool-btn {
  background:var(--t-card); border:1px solid var(--t-bdr);
  border-radius:var(--r-lg); padding:14px 6px 12px;
  display:flex; flex-direction:column;
  align-items:center; gap:6px;
  cursor:pointer; transition:all .2s;
}
.wt4-tool-btn:hover {
  border-color:var(--t-a28);
  background:var(--t-a06);
  transform:translateY(-2px);
}
.wt4-tool-btn:active { transform:scale(0.94); opacity:.85; }
.wt4-tool-icon {
  width:38px; height:38px; border-radius:12px;
  display:flex; align-items:center;
  justify-content:center; font-size:20px;
  background:var(--t-a07);
  border:1px solid var(--t-a18);
}
.wt4-tool-label {
  font-family:'Cormorant Garamond',serif;
  font-size:10.5px; color:var(--t-txtd);
  text-align:center; line-height:1.3;
}

/* Tool icon semantic colors (fixed per tool, visible on any theme bg) */
.wt4-tools-grid .wt4-tool-btn:nth-child(1)  .wt4-tool-icon { background:rgba(96,165,250,0.15);  border-color:rgba(96,165,250,0.25); }
.wt4-tools-grid .wt4-tool-btn:nth-child(2)  .wt4-tool-icon { background:rgba(52,211,153,0.15);  border-color:rgba(52,211,153,0.25); }
.wt4-tools-grid .wt4-tool-btn:nth-child(3)  .wt4-tool-icon { background:rgba(251,191,36,0.15);  border-color:rgba(251,191,36,0.25); }
.wt4-tools-grid .wt4-tool-btn:nth-child(4)  .wt4-tool-icon { background:rgba(192,132,252,0.15); border-color:rgba(192,132,252,0.25); }
.wt4-tools-grid .wt4-tool-btn:nth-child(5)  .wt4-tool-icon { background:rgba(139,92,246,0.15);  border-color:rgba(139,92,246,0.25); }
.wt4-tools-grid .wt4-tool-btn:nth-child(6)  .wt4-tool-icon { background:rgba(16,185,129,0.15);  border-color:rgba(16,185,129,0.25); }
.wt4-tools-grid .wt4-tool-btn:nth-child(7)  .wt4-tool-icon { background:rgba(59,130,246,0.15);  border-color:rgba(59,130,246,0.25); }
.wt4-tools-grid .wt4-tool-btn:nth-child(8)  .wt4-tool-icon { background:rgba(248,113,113,0.15); border-color:rgba(248,113,113,0.25); }
.wt4-tools-grid .wt4-tool-btn:nth-child(9)  .wt4-tool-icon { background:rgba(167,139,250,0.15); border-color:rgba(167,139,250,0.25); }
.wt4-tools-grid .wt4-tool-btn:nth-child(10) .wt4-tool-icon { background:rgba(6,182,212,0.15);   border-color:rgba(6,182,212,0.25); }
.wt4-tools-grid .wt4-tool-btn:nth-child(11) .wt4-tool-icon { background:rgba(251,146,60,0.15);  border-color:rgba(251,146,60,0.25); }
.wt4-tools-grid .wt4-tool-btn:nth-child(12) .wt4-tool-icon { background:rgba(74,222,128,0.15);  border-color:rgba(74,222,128,0.25); }

/* ════════════════════════════════════════════════════
   AI GUIDE CARD (intentional purple brand)
════════════════════════════════════════════════════ */
.wt4-section-clone { display:block !important; }
.wt4-section-clone > * { display:block !important; }
.wt4-ai-card {
  margin:0 16px 4px;
  border-radius:var(--r-xl); padding:22px 18px;
  background:linear-gradient(135deg,rgba(139,92,246,0.1),rgba(59,130,246,0.06));
  border:1px solid rgba(139,92,246,0.22);
  position:relative; overflow:hidden;
}
.wt4-ai-bg {
  position:absolute; inset:0;
  background:radial-gradient(ellipse 55% 55% at 80% 20%,rgba(139,92,246,0.12),transparent);
  pointer-events:none;
}
.wt4-ai-avatar {
  width:50px; height:50px; border-radius:50%;
  background:linear-gradient(135deg,#7C3AED,#3B82F6);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; margin-bottom:10px;
  box-shadow:0 0 22px rgba(139,92,246,0.38);
  animation:wt4AIPulse 3.5s ease-in-out infinite;
  position:relative; z-index:1;
}
@keyframes wt4AIPulse {
  0%,100%{box-shadow:0 0 20px rgba(139,92,246,.35)}
  50%    {box-shadow:0 0 34px rgba(139,92,246,.6)}
}
.wt4-ai-title {
  font-family:'Cinzel Decorative',serif;
  font-size:11px; letter-spacing:1.5px;
  color:#A78BFA; margin-bottom:5px; position:relative; z-index:1;
}
.wt4-ai-desc {
  font-family:'Noto Sans Devanagari',sans-serif;
  font-size:12px; color:var(--t-txtd);
  line-height:1.7; margin-bottom:12px; position:relative; z-index:1;
}
.wt4-ai-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(139,92,246,0.12);
  border:1px solid rgba(139,92,246,0.28);
  border-radius:20px; padding:5px 12px;
  font-family:'Cinzel Decorative',serif;
  font-size:8px; letter-spacing:1px;
  color:#A78BFA; position:relative; z-index:1;
}
.wt4-ai-dot {
  width:6px; height:6px; border-radius:50%;
  background:#A78BFA; animation:wt4Dot 1.6s ease-in-out infinite;
}
@keyframes wt4Dot { 0%,100%{opacity:.3} 50%{opacity:1} }

/* ════════════════════════════════════════════════════
   ENTRANCE ANIMATIONS
════════════════════════════════════════════════════ */
.wt4-in { animation:wt4FadeUp .45s ease both; }
@keyframes wt4FadeUp {
  from{opacity:0;transform:translateY(16px)}
  to  {opacity:1;transform:translateY(0)}
}
.wt4-d1{animation-delay:.05s} .wt4-d2{animation-delay:.1s}
.wt4-d3{animation-delay:.15s} .wt4-d4{animation-delay:.2s}
.wt4-d5{animation-delay:.25s} .wt4-d6{animation-delay:.3s}
.wt4-d7{animation-delay:.35s} .wt4-d8{animation-delay:.4s}

/* ════════════════════════════════════════════════════
   EXISTING SECTION TITLES INSIDE WELLNESS
════════════════════════════════════════════════════ */
#wtContainer .sec-title {
  font-family:'Cinzel Decorative',serif !important;
  font-size:10px !important; letter-spacing:2px !important;
  color:var(--t-accent) !important;
  text-transform:uppercase !important;
  margin-bottom:10px !important;
  display:flex; align-items:center; gap:6px;
}
#wtContainer section { padding:0 !important; margin-top:0 !important; }

/* ── Like/Save buttons — theme-aware SVG heart ── */
#likeQuoteBtn, #likeBiasBtn, #likeAffirmBtn, #likeMindfulBtn {
  color: var(--t-txtd);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, color 0.2s;
}
#likeQuoteBtn:hover, #likeBiasBtn:hover,
#likeAffirmBtn:hover, #likeMindfulBtn:hover { color: #F87171; }

/* [style] */
/* ── REACTION BAR ── */
.mx-reaction-bar{
  display:flex;gap:8px;margin:14px 0 4px;padding:10px 0 0;
  border-top:1px solid rgba(212,175,55,0.1);
  flex-wrap:wrap;
}
.mx-react-btn{
  display:flex;align-items:center;gap:5px;
  background:var(--card);border:1px solid var(--bdr);
  border-radius:20px;padding:6px 12px;font-size:13px;
  cursor:pointer;transition:all .25s;user-select:none;
  font-family:'Cormorant Garamond',serif;color:var(--fgd);
  -webkit-tap-highlight-color:transparent;
}
.mx-react-btn:active{transform:scale(.9);}
.mx-react-btn.reacted{
  background:rgba(232,197,71,0.15);
  border-color:rgba(232,197,71,0.5);
  color:var(--fg);
}
.mx-react-btn .react-count{font-size:11px;color:var(--fgd);}

/* ── XP FLOAT POPUP ── */
.mx-xp-float{
  position:fixed;pointer-events:none;z-index:9999;
  font-family:'Cinzel Decorative',serif;font-size:16px;font-weight:900;
  color:#E8C547;text-shadow:0 0 20px rgba(232,197,71,0.8);
  animation:xpFloatUp 1.4s ease-out forwards;
}
@keyframes xpFloatUp{
  0%{opacity:1;transform:translateY(0) scale(1);}
  60%{opacity:1;transform:translateY(-60px) scale(1.2);}
  100%{opacity:0;transform:translateY(-100px) scale(.8);}
}

/* ── DOPAMINE STREAK BANNER ── */
.mx-dopa-banner{
  background:linear-gradient(135deg,rgba(232,197,71,0.18),rgba(0,229,192,0.1));
  border:1px solid rgba(232,197,71,0.4);border-radius:14px;
  padding:12px 16px;margin:12px 0;display:flex;align-items:center;gap:12px;
  animation:dopaSlideIn .4s cubic-bezier(.34,1.3,.64,1);
}
@keyframes dopaSlideIn{from{opacity:0;transform:translateX(-20px);}to{opacity:1;transform:translateX(0);}}
.mx-dopa-icon{font-size:22px;flex-shrink:0;}
.mx-dopa-title{font-family:'Cinzel Decorative',serif;font-size:10px;color:var(--g);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:2px;}
.mx-dopa-msg{font-family:'Cormorant Garamond',serif;font-size:13px;color:var(--fg);line-height:1.5;}

/* ── CONCEPT REVEAL CARD ── */
.mx-reveal-card{
  background:linear-gradient(135deg,var(--bg3),var(--bg2));
  border:1px solid rgba(0,229,192,0.3);border-radius:16px;
  padding:18px;margin:14px 0;position:relative;overflow:hidden;
  cursor:pointer;transition:all .3s;
}
.mx-reveal-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at top left,rgba(0,229,192,0.08),transparent 60%);
}
.mx-reveal-card:active{transform:scale(.98);}
.mx-reveal-card-label{font-size:9px;color:rgba(0,229,192,0.9);letter-spacing:2px;text-transform:uppercase;font-family:'Cinzel Decorative',serif;margin-bottom:8px;}
.mx-reveal-card-q{font-family:'Cormorant Garamond',serif;font-size:15px;color:var(--fg);line-height:1.6;margin-bottom:10px;}
.mx-reveal-card-hint{font-size:10px;color:var(--fgd);font-family:'Cormorant Garamond',serif;display:flex;align-items:center;gap:4px;}
.mx-reveal-card-ans{
  display:none;margin-top:12px;padding-top:12px;
  border-top:1px solid rgba(0,229,192,0.2);
  font-family:'Cormorant Garamond',serif;font-size:13px;color:var(--txt);line-height:1.7;
  animation:revealFadeIn .4s ease;
}
.mx-reveal-card-ans.open{display:block;}
@keyframes revealFadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

/* ── STORY-STYLE PROGRESS BUBBLES ── */
#mxStoryDots{
  display:flex;gap:4px;padding:10px 18px 0;position:sticky;top:0;
  background:linear-gradient(var(--bg),transparent);z-index:10;
}
.mx-story-dot{height:3px;border-radius:2px;background:rgba(212,175,55,0.2);flex:1;transition:all .4s;}
.mx-story-dot.done{background:var(--g);}
.mx-story-dot.active{background:linear-gradient(90deg,var(--g),rgba(0,229,192,0.8));animation:storyPulse 1.5s ease-in-out infinite;}
@keyframes storyPulse{0%,100%{opacity:1;}50%{opacity:.6;}}

/* ── PRIDE COMPLETION BADGE ── */
.mx-pride-overlay{
  position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,0.92);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px;text-align:center;
  animation:prideFadeIn .5s ease;
}
.mx-pride-overlay.hide{animation:prideFadeOut .4s ease forwards;}
@keyframes prideFadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes prideFadeOut{from{opacity:1;}to{opacity:0;}}
.mx-pride-logo{font-size:64px;margin-bottom:8px;animation:prideZoom .6s cubic-bezier(.34,1.5,.64,1) .2s both;}
@keyframes prideZoom{from{transform:scale(0) rotate(-10deg);}to{transform:scale(1) rotate(0);}}
.mx-pride-super{font-family:'Cinzel Decorative',serif;font-size:10px;letter-spacing:4px;color:rgba(0,229,192,0.9);margin-bottom:8px;text-transform:uppercase;}
.mx-pride-heading{font-family:'Cinzel Decorative',serif;font-size:22px;color:#E8C547;line-height:1.3;margin-bottom:10px;text-shadow:0 0 30px rgba(232,197,71,0.5);}
.mx-pride-sub{font-family:'Cormorant Garamond',serif;font-size:15px;color:rgba(255,255,255,0.82);line-height:1.7;max-width:320px;margin:0 auto 20px;}
.mx-pride-stats{display:flex;gap:16px;justify-content:center;margin-bottom:24px;}
.mx-pride-stat{background:rgba(232,197,71,0.1);border:1px solid rgba(232,197,71,0.3);border-radius:14px;padding:12px 20px;text-align:center;}
.mx-pride-stat-val{font-family:'Cinzel Decorative',serif;font-size:20px;color:#E8C547;display:block;}
.mx-pride-stat-lbl{font-size:10px;color:rgba(255,255,255,0.5);letter-spacing:1px;font-family:'Cormorant Garamond',serif;}
.mx-pride-badge{background:linear-gradient(135deg,rgba(232,197,71,0.2),rgba(0,229,192,0.15));border:1.5px solid rgba(232,197,71,0.5);border-radius:20px;padding:10px 22px;font-family:'Cinzel Decorative',serif;font-size:10px;color:#E8C547;letter-spacing:2px;margin-bottom:20px;display:inline-block;}
.mx-pride-close{padding:14px 48px;border-radius:30px;background:linear-gradient(135deg,#E8C547,#B8880A);border:none;color:#000;font-family:'Cinzel Decorative',serif;font-size:11px;letter-spacing:1px;cursor:pointer;font-weight:900;transition:all .25s;box-shadow:0 6px 24px rgba(232,197,71,0.35);}
.mx-pride-close:active{transform:scale(.97);}

/* ── INSIGHT POP ── */
.mx-insight-pop{
  position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);
  z-index:800;max-width:340px;width:90%;
  background:linear-gradient(135deg,#0d0d0d,#111);
  border:1px solid rgba(0,229,192,0.4);border-radius:18px;
  padding:16px;box-shadow:0 12px 40px rgba(0,0,0,0.7);
  opacity:0;transition:all .4s cubic-bezier(.34,1.3,.64,1);
  pointer-events:none;
}
.mx-insight-pop.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;}
.mx-insight-header{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.mx-insight-ico{font-size:18px;}
.mx-insight-title{font-family:'Cinzel Decorative',serif;font-size:9px;color:rgba(0,229,192,0.9);letter-spacing:2px;text-transform:uppercase;}
.mx-insight-text{font-family:'Cormorant Garamond',serif;font-size:13px;color:var(--txt);line-height:1.6;}
.mx-insight-close{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--fgd);font-size:16px;cursor:pointer;padding:4px 8px;}

/* ── SWIPE FACT CARDS ── */
.mx-swipe-deck{position:relative;height:130px;margin:12px 0;}
.mx-swipe-card{
  position:absolute;inset:0;background:linear-gradient(135deg,var(--bg3),var(--bg2));
  border-radius:16px;border:1px solid var(--bdr);padding:16px 18px;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:transform .4s cubic-bezier(.34,1.2,.64,1),opacity .3s;
  will-change:transform;
}
.mx-swipe-card.swiped-left{transform:translateX(-110%) rotate(-8deg);opacity:0;}
.mx-swipe-card.swiped-right{transform:translateX(110%) rotate(8deg);opacity:0;}
.mx-swipe-card:nth-child(2){transform:scale(0.96) translateY(6px);z-index:1;}
.mx-swipe-card:nth-child(3){transform:scale(0.92) translateY(12px);z-index:0;}
.mx-swipe-card:first-child{z-index:3;}
.mx-swipe-top{font-size:9px;color:var(--fgd);letter-spacing:2px;font-family:'Cinzel Decorative',serif;text-transform:uppercase;}
.mx-swipe-fact{font-family:'Cormorant Garamond',serif;font-size:14px;color:var(--fg);line-height:1.6;}
.mx-swipe-hint{font-size:10px;color:var(--fgd);display:flex;justify-content:space-between;}
.mx-swipe-actions{display:flex;gap:10px;justify-content:center;margin-top:10px;}
.mx-swipe-btn{width:44px;height:44px;border-radius:50%;border:1.5px solid;background:transparent;font-size:20px;cursor:pointer;transition:all .25s;display:flex;align-items:center;justify-content:center;}
.mx-swipe-btn.skip{border-color:rgba(255,95,95,0.4);color:#ff5f5f;}
.mx-swipe-btn.save{border-color:rgba(0,229,192,0.4);color:rgba(0,229,192,0.9);}
.mx-swipe-btn:active{transform:scale(.88);}

/* ── SECTION COMPLETE MICRO-CELEBRATION ── */
.mx-sec-complete{
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,rgba(93,216,118,0.15),rgba(93,216,118,0.05));
  border:1px solid rgba(93,216,118,0.3);border-radius:12px;
  padding:10px 14px;margin:12px 0;
  animation:secDoneSlide .5s cubic-bezier(.34,1.3,.64,1);
}
@keyframes secDoneSlide{from{opacity:0;transform:scale(.9);}to{opacity:1;transform:scale(1);}}
.mx-sec-complete-ico{font-size:20px;}
.mx-sec-complete-text{font-family:'Cormorant Garamond',serif;font-size:13px;color:rgba(93,216,118,0.9);line-height:1.5;}

/* ── QUIZ UPGRADE: explanation cards ── */
.qopt.correct{background:rgba(93,216,118,0.18)!important;border-color:rgba(93,216,118,0.6)!important;color:#5DD876!important;}
.qopt.wrong{background:rgba(255,95,95,0.15)!important;border-color:rgba(255,95,95,0.5)!important;color:#ff5f5f!important;}
.qfb{
  background:rgba(232,197,71,0.08);border:1px solid rgba(232,197,71,0.2);
  border-radius:12px;padding:12px 14px;font-size:12px;font-family:'Cormorant Garamond',serif;
  color:var(--txt);line-height:1.7;display:none;margin-top:8px;
}
.qfb.show{display:block;animation:qfbIn .35s ease;}
.qfb.good{border-color:rgba(93,216,118,0.35);background:rgba(93,216,118,0.08);}
.qfb.bad{border-color:rgba(255,95,95,0.3);background:rgba(255,95,95,0.06);}
@keyframes qfbIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

/* ── PRIDE CONFETTI PARTICLES ── */
.mx-confetti-p{
  position:fixed;pointer-events:none;z-index:1900;
  width:8px;height:8px;border-radius:2px;
  animation:confFall linear forwards;
}
@keyframes confFall{
  0%{opacity:1;transform:translateY(0) rotate(0deg);}
  100%{opacity:0;transform:translateY(100vh) rotate(720deg);}
}

/* ── DID YOU KNOW FLOAT ── */
.mx-dyk-pill{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,rgba(192,132,252,0.15),rgba(192,132,252,0.05));
  border:1px solid rgba(192,132,252,0.3);border-radius:24px;
  padding:8px 14px;font-size:11px;font-family:'Cormorant Garamond',serif;
  color:rgba(192,132,252,0.9);cursor:pointer;transition:all .25s;margin:8px 0;
}
.mx-dyk-pill:active{transform:scale(.97);}

/* ── LESSON SCREEN ENHANCEMENTS ── */
#lessonScreen .ltop{position:relative;}
.mx-lesson-tagline{
  font-family:'Cormorant Garamond',serif;font-size:11px;
  color:rgba(0,229,192,0.7);letter-spacing:1px;text-align:center;
  margin-top:-6px;margin-bottom:4px;
}
.lsec.active{animation:secAppear .35s cubic-bezier(.34,1.2,.64,1);}
@keyframes secAppear{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* ── MOTIVATIONAL TICKER ── */
.mx-ticker{
  overflow:hidden;white-space:nowrap;font-size:10px;
  color:rgba(232,197,71,0.6);letter-spacing:1px;
  font-family:'Cinzel Decorative',serif;padding:6px 0;
  border-top:1px solid rgba(212,175,55,0.08);
  border-bottom:1px solid rgba(212,175,55,0.08);
  margin:10px 0;
}
.mx-ticker-inner{display:inline-block;animation:ticker 20s linear infinite;}
@keyframes ticker{0%{transform:translateX(100%);}100%{transform:translateX(-100%);}
}

/* ── COMPLETION RING ANIMATION ── */
.mx-comp-ring{
  width:80px;height:80px;position:relative;margin:0 auto 16px;
}
.mx-comp-ring svg{transform:rotate(-90deg);}
.mx-comp-ring-bg{fill:none;stroke:rgba(212,175,55,0.15);stroke-width:5;}
.mx-comp-ring-fill{fill:none;stroke:#E8C547;stroke-width:5;stroke-linecap:round;
  stroke-dasharray:220;stroke-dashoffset:220;transition:stroke-dashoffset 1.5s ease;
}