/* =====================================================================
   MCA ACADEMY - AURORA DESIGN SYSTEM
   Light theme: lavender canvas, purple / orange / blue / green gradient cards
   Dark theme : deep green glass, mint + violet accents
   Loaded LAST on every page (student, teacher, admin, console, store).
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
   --au-font:'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
   --au-bg:#f3f0fb; --au-bg-a:rgba(167,139,250,.35); --au-bg-b:rgba(253,186,116,.30); --au-bg-c:rgba(96,165,250,.22);
   --au-card:rgba(255,255,255,.80); --au-solid:#ffffff; --au-line:rgba(109,40,217,.11);
   --au-ink:#1e1a3a; --au-muted:#7a7799;
   --au-p:#7c3aed; --au-pg:linear-gradient(135deg,#a78bfa 0%,#7c3aed 55%,#6d28d9 100%);
   --au-k1:linear-gradient(135deg,#a78bfa,#7c3aed);
   --au-k2:linear-gradient(135deg,#fdba74,#f97316);
   --au-k3:linear-gradient(135deg,#60a5fa,#2563eb);
   --au-k4:linear-gradient(135deg,#4ade80,#16a34a);
   --au-o:#f97316; --au-b:#3b82f6; --au-g:#22c55e; --au-danger:#ef4444;
   --au-glow:0 12px 28px -14px rgba(124,58,237,.55);
   --au-lift:0 18px 40px -22px rgba(60,30,120,.35);
   --au-r1:24px; --au-r2:18px; --au-r3:12px;
   --au-ease:cubic-bezier(.22,.8,.24,1);
   --au-spring:cubic-bezier(.34,1.56,.64,1);

   /* re-map the legacy variables so every old component re-themes */
   --white:var(--au-solid); --black:var(--au-ink); --light-color:var(--au-muted);
   --light-bg:var(--au-bg); --border:.1rem solid var(--au-line);
   --main-color:var(--au-p); --oragen:var(--au-o);
   --mca-dark-blue:#4c1d95; --mca-dark-blue-2:#6d28d9; --mca-dark-red:#ea580c; --mca-dark-red-2:#f97316; --mca-gold:#f59e0b;
}
body.dark,html.dark body{
   --au-bg:#06100d; --au-bg-a:rgba(52,211,153,.20); --au-bg-b:rgba(139,124,246,.18); --au-bg-c:rgba(16,185,129,.12);
   --au-card:rgba(17,33,28,.72); --au-solid:#10201b; --au-line:rgba(255,255,255,.075);
   --au-ink:#e8f6ef; --au-muted:#8db0a2;
   --au-p:#34d399; --au-pg:linear-gradient(135deg,#6ee7b7 0%,#34d399 45%,#059669 100%);
   --au-k1:linear-gradient(135deg,#6ee7b7,#059669);
   --au-k2:linear-gradient(135deg,#a79bff,#6d5ce8);
   --au-k3:linear-gradient(135deg,#5eead4,#0d9488);
   --au-k4:linear-gradient(135deg,#bef264,#65a30d);
   --au-o:#8b7cf6; --au-b:#2dd4bf; --au-g:#a3e635;
   --au-glow:0 12px 30px -14px rgba(52,211,153,.55);
   --au-lift:0 18px 40px -22px rgba(0,0,0,.8);
   --white:var(--au-solid); --black:var(--au-ink); --light-color:var(--au-muted); --light-bg:var(--au-bg);
   --mca-dark-blue:#065f46; --mca-dark-blue-2:#047857; --mca-dark-red:#6d5ce8; --mca-dark-red-2:#8b7cf6;
}

/* console + store keep their own variable names: map them to Aurora */
.con-body,.st{
   --blue:#5b21b6; --blue2:#6d28d9; --blue3:var(--au-p);
   --red:#c2410c; --red2:var(--au-o); --gold:#f59e0b; --green:var(--au-g);
   --bg:transparent; --card:var(--au-card); --ink:var(--au-ink); --muted:var(--au-muted); --line:var(--au-line);
   --shadow:none; --radius:var(--au-r1);
}
body.dark.con-body,body.dark.st,html.dark .con-body,html.dark .st{ --blue:#047857; --blue2:#065f46; }

/* ---------- base ---------- */
*{font-family:var(--au-font)}
html{scroll-behavior:smooth}
body{background:var(--au-bg)!important;color:var(--au-ink);transition:background .5s var(--au-ease),color .3s;animation:auPageIn .6s var(--au-ease) both}
body::before{
   content:"";position:fixed;inset:-10%;z-index:-2;pointer-events:none;
   background:
      radial-gradient(40% 38% at calc(12% + var(--ox,0px)) calc(8% + var(--oy,0px)),var(--au-bg-a),transparent 70%),
      radial-gradient(36% 34% at calc(88% - var(--ox,0px)) calc(14% + var(--oy,0px)),var(--au-bg-b),transparent 70%),
      radial-gradient(40% 40% at calc(60% + var(--ox,0px)) calc(96% - var(--oy,0px)),var(--au-bg-c),transparent 72%);
   animation:auDrift 22s ease-in-out infinite alternate;
}
body::after{ /* soft grid in the dark theme only */
   content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .6s;
   background-image:linear-gradient(var(--au-line) 1px,transparent 1px),linear-gradient(90deg,var(--au-line) 1px,transparent 1px);
   background-size:46px 46px;mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent);
}
body.dark::after,html.dark body::after{opacity:.5}
@keyframes auPageIn{from{opacity:0}to{opacity:1}}
@keyframes auDrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(2%,3%,0) scale(1.08)}}
::selection{background:var(--au-p);color:#fff}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:var(--au-line);border-radius:9px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:var(--au-p);background-clip:padding-box}

section,.con-main,.st-wrap{animation:auSectionIn .7s var(--au-ease) both}
@keyframes auSectionIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* page leave / loader (mca-ui.js toggles these) */
body.mca-leaving{opacity:0!important;transition:opacity .22s var(--au-ease)!important;pointer-events:none}
#mca-loader{background:rgba(10,8,30,.28)!important;backdrop-filter:blur(8px)}
#mca-loader .spinner{width:64px!important;height:64px!important;border:0!important;border-radius:50%!important;
   background:conic-gradient(from 0deg,transparent 0 20%,var(--au-p) 20% 100%);
   -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));
   animation:auSpin .8s linear infinite!important}
@keyframes auSpin{to{transform:rotate(360deg)}}

/* ---------- reveal / 3D tilt / ripple (driven by aurora.js) ---------- */
.au-reveal{opacity:0;transform:translateY(26px) rotateX(10deg) scale(.97);transform-origin:50% 100%}
.au-reveal.au-in{opacity:1;transform:none;transition:opacity .7s var(--au-ease),transform .8s var(--au-spring);transition-delay:calc(var(--i,0)*55ms)}
.au-tilt{transform-style:preserve-3d;will-change:transform}
.au-tilt.au-tilting{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(6px)!important;transition:transform .08s linear!important}
.au-tilt:not(.au-tilting){transition:transform .55s var(--au-spring),opacity .6s,border-color .25s,background .25s}
.au-tilt::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
   background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.28),transparent 60%);z-index:1}
.au-tilt.au-tilting::before{opacity:1}
.au-ripple-host{position:relative;overflow:hidden}
.au-ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.55);pointer-events:none;animation:auRipple .65s var(--au-ease) forwards}
@keyframes auRipple{to{transform:scale(1);opacity:0}}
.au-burst{position:fixed;width:8px;height:8px;border-radius:50%;pointer-events:none;z-index:99999;background:var(--au-p);animation:auBurst .7s var(--au-ease) forwards}
@keyframes auBurst{from{transform:translate(0,0) scale(1);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}

/* =====================================================================
   SHARED CONTROLS (classic pages)
   ===================================================================== */
.btn,.inline-btn,.option-btn,.delete-btn,.inline-option-btn,.inline-delete-btn{
   position:relative;overflow:hidden;border-radius:14px!important;font-weight:700;letter-spacing:.01em;color:#fff!important;
   background:var(--au-pg)!important;border:0;
   box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.12),var(--au-glow);
   transition:transform .25s var(--au-spring),filter .2s,box-shadow .25s!important}
.btn:hover,.inline-btn:hover,.option-btn:hover,.delete-btn:hover,.inline-option-btn:hover,.inline-delete-btn:hover{transform:translateY(-3px) scale(1.02);filter:brightness(1.08);background:var(--au-pg)}
.btn:active,.inline-btn:active,.option-btn:active,.delete-btn:active{transform:translateY(1px) scale(.97);box-shadow:inset 0 2px 6px rgba(0,0,0,.25)}
.option-btn,.inline-option-btn{background:var(--au-k2)!important}
.delete-btn,.inline-delete-btn{background:linear-gradient(135deg,#fb7185,#e11d48)!important}
body.dark .option-btn,html.dark .option-btn{background:var(--au-k2)!important}

input,textarea,select{color:var(--au-ink);transition:border-color .25s,box-shadow .25s,background .25s}
.form-container form input,.form-container form textarea,.form-container form select,
.playlist-form form input,.playlist-form form textarea,.playlist-form form select,
.video-form form input,.video-form form textarea,.video-form form select,.box.name-box,
input.box,textarea.box,select.box{
   background:var(--au-card)!important;border:1.5px solid var(--au-line)!important;border-radius:14px!important;color:var(--au-ink)!important}
input:focus,textarea:focus,select:focus{border-color:var(--au-p)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--au-p) 18%,transparent)!important}
input[type=submit],input[type=button],.form-container form input[type=submit],.form-container form .btn,.playlist-form form input[type=submit],.video-form form input[type=submit]{
   background:var(--au-pg)!important;color:#fff!important;border:0!important;font-weight:700;cursor:pointer;
   box-shadow:inset 0 1px 0 rgba(255,255,255,.35),var(--au-glow);transition:transform .25s var(--au-spring),filter .2s}
input[type=submit]:hover{transform:translateY(-3px) scale(1.02);filter:brightness(1.08)}
input[type=submit]:active{transform:translateY(1px) scale(.97)}
.side-bar .profile .flex-btn{display:flex;gap:.6rem}
.side-bar .profile .flex-btn .option-btn{flex:1;text-align:center;padding:1rem .6rem;font-size:1.4rem}
::placeholder{color:var(--au-muted);opacity:.8}

.heading{border:0!important;font-weight:800;letter-spacing:-.02em;position:relative;padding-bottom:1rem;color:var(--au-ink)}
.heading::after{content:"";display:block;width:5.2rem;height:.5rem;border-radius:1rem;margin-top:1rem;background:var(--au-pg);animation:auBar 1s var(--au-ease) both}
@keyframes auBar{from{width:0}to{width:5.2rem}}
.empty{background:var(--au-card);border:1.5px dashed var(--au-line);border-radius:var(--au-r1);color:var(--au-muted)}
.message{background:var(--au-card)!important;border:1px solid var(--au-line);border-left:5px solid var(--au-p);border-radius:14px;animation:auToast .5s var(--au-spring) both;backdrop-filter:blur(10px)}
@keyframes auToast{from{opacity:0;transform:translateX(30px) scale(.95)}to{opacity:1;transform:none}}

/* every card-like box on classic pages */
.box-container .box,.quick-select .box-container .box,.courses .box-container .box,.teachers .box-container .box,
.dashboard .box-container .box,.contents .box-container .box,.playlists .box-container .box,.comments .show-comments .box,
.tutor-profile .details,.about .box-container .box,.reviews .box-container .box,.liked-videos .box-container .box,
.playlist .row,.watch-video .video-details,.form-container form,.videos-container .box-container .box,
.view-content .container,.playlist-details .row,.comments .add-comment,.comments .show-comments,.edit-comment form{
   background:var(--au-card)!important;border:1px solid var(--au-line)!important;border-radius:var(--au-r1)!important;
   backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
   box-shadow:var(--au-lift);position:relative;color:var(--au-ink)}
.box-container .box:hover{border-color:color-mix(in srgb,var(--au-p) 45%,transparent)!important}
.box-container .box .title,.box-container .box h3{color:var(--au-ink)}
.box-container .box p,.box-container .box span{color:var(--au-muted)}
.courses .box-container .box .thumb img,.playlist .row .col .thumb img,.videos-container .box-container .box img,.watch-video .video-details .video{border-radius:18px!important;transition:transform .6s var(--au-ease)}
.courses .box-container .box:hover .thumb img{transform:scale(1.06)}
.courses .box-container .box .thumb span{background:var(--au-pg)!important;border-radius:10px;color:#fff}

/* =====================================================================
   CLASSIC LAYOUT: floating glass header + sidebar
   ===================================================================== */
@media (min-width:1201px){ body:not(.con-body):not(.st){padding-left:29.6rem!important} }
.header{background:var(--au-card)!important;border:1px solid var(--au-line)!important;border-radius:22px;margin:1.4rem 1.4rem 0 0;
   backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:var(--au-lift);top:1.4rem!important}
@media (max-width:1200px){.header{margin:1rem;top:1rem!important}}
.header .flex{display:flex;align-items:center;gap:1.2rem;flex-wrap:nowrap}
.header .flex .icons{display:flex;align-items:center;gap:.8rem;flex:none}
.header .flex .icons div{margin:0!important}
@media (min-width:1201px){#menu-btn{display:none!important}}
@media (min-width:992px){#search-btn{display:none!important}}
.header .flex .logo{font-size:2.4rem;font-weight:800;letter-spacing:-.02em;
   background:var(--au-pg);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.header .flex .search-form{background:var(--au-solid)!important;border:1.5px solid var(--au-line);border-radius:16px!important}
.header .flex .search-form input{background:transparent!important;border:0!important;box-shadow:none!important}
.header .flex .icons div{background:var(--au-solid)!important;border:1px solid var(--au-line);border-radius:14px!important;color:var(--au-ink)!important;
   transition:transform .3s var(--au-spring),background .25s,color .25s}
.header .flex .icons div:hover{background:var(--au-pg)!important;color:#fff!important;transform:translateY(-3px) rotate(-6deg)}
.header .flex .profile{background:var(--au-card)!important;border:1px solid var(--au-line);border-radius:22px!important;backdrop-filter:blur(18px);
   transform-origin:top right;transition:transform .35s var(--au-spring),opacity .25s}
.mca-lang-switch a{border:1px solid var(--au-line)!important;color:var(--au-ink)!important;border-radius:10px;transition:all .25s}
.mca-lang-switch a.active,.mca-lang-switch a:hover{background:var(--au-pg)!important;color:#fff!important;border-color:transparent!important}

@media (min-width:1201px){
   .side-bar{top:1.4rem!important;left:1.4rem!important;bottom:1.4rem;height:auto!important;width:26.4rem!important}
}
.side-bar{background:var(--au-card)!important;border:1px solid var(--au-line)!important;border-radius:28px;
   backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);box-shadow:var(--au-lift);
   display:flex;flex-direction:column;overflow-y:auto;padding-bottom:1.4rem}
.side-bar .profile{padding:2.4rem 1.6rem 1.6rem;text-align:center}
.side-bar .profile img{border-radius:50%!important;padding:.4rem;background:var(--au-pg);height:9rem;width:9rem;object-fit:cover;
   animation:auFloat 5s ease-in-out infinite}
@keyframes auFloat{50%{transform:translateY(-6px)}}
.side-bar .profile h3{color:var(--au-ink);font-weight:800}
.side-bar .profile span{color:var(--au-muted)}
.side-bar .navbar{padding:.4rem 1.2rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.side-bar .navbar a{border-radius:16px!important;padding:1.15rem 1.4rem!important;margin:0!important;color:var(--au-muted)!important;
   display:flex;align-items:center;gap:1.4rem;position:relative;overflow:hidden;
   transition:transform .3s var(--au-spring),background .25s,color .25s!important;border-left:0!important}
.side-bar .navbar a i{color:inherit!important;width:2.2rem;text-align:center;margin:0!important;transition:transform .35s var(--au-spring)}
.side-bar .navbar a span{color:inherit!important;font-weight:600}
.side-bar .navbar a:hover{background:color-mix(in srgb,var(--au-p) 10%,transparent)!important;color:var(--au-p)!important;transform:translateX(5px)}
.side-bar .navbar a:hover i{transform:scale(1.25) rotate(-8deg)}
.side-bar .navbar a.on{background:var(--au-pg)!important;color:#fff!important;box-shadow:var(--au-glow);border-left:0!important}
.side-bar .navbar a.on i,.side-bar .navbar a.on span{color:#fff!important}
.side-bar .navbar a.on::after{content:"";position:absolute;right:1.2rem;width:.8rem;height:.8rem;border-radius:50%;background:#fff;animation:auPulse 2s infinite}
@keyframes auPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.6)}}
.side-bar .navbar .mca-nav-sep{color:var(--au-muted);border-color:var(--au-line)}
.side-bar .navbar a.au-cta{margin-top:auto!important;justify-content:center;background:var(--au-pg)!important;color:#fff!important;padding:1.5rem!important;box-shadow:var(--au-glow);font-weight:800}
.side-bar .navbar a.au-cta i,.side-bar .navbar a.au-cta span{color:#fff!important}
.side-bar .navbar a.au-cta:hover{transform:translateY(-4px) scale(1.03)}
.side-bar .navbar a.au-cta i{background:rgba(255,255,255,.22);border-radius:50%;width:3rem;height:3rem;display:grid;place-items:center;animation:auFloat 3s ease-in-out infinite}

/* ---------- classic dashboard (teacher + admin): gradient KPI cards ---------- */
.dashboard .box-container{grid-template-columns:repeat(auto-fit,minmax(24rem,1fr))!important}
.dashboard .box-container .box{border:0!important;color:#fff!important;text-align:left;overflow:hidden;min-height:15rem}
.dashboard .box-container .box:nth-child(4n+1){background:var(--au-k1)!important}
.dashboard .box-container .box:nth-child(4n+2){background:var(--au-k2)!important}
.dashboard .box-container .box:nth-child(4n+3){background:var(--au-k3)!important}
.dashboard .box-container .box:nth-child(4n+4){background:var(--au-k4)!important}
.dashboard .box-container .box h3{color:#fff!important;font-size:3.2rem;font-weight:800;overflow-wrap:anywhere}
.dashboard .box-container .box p{color:#fff!important;background:rgba(255,255,255,.2)!important;border-radius:12px;backdrop-filter:blur(6px);font-weight:600}
.dashboard .box-container .box::after{content:"";position:absolute;right:-5rem;top:-5rem;width:16rem;height:16rem;border-radius:50%;background:rgba(255,255,255,.14);animation:auFloat 6s ease-in-out infinite}
.dashboard .box-container .box .btn{background:rgba(255,255,255,.2)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}

/* ---------- student home dashboard (home.php) ---------- */
.au-hero{display:grid;grid-template-columns:minmax(0,1fr) 30rem;gap:2rem;max-width:1200px;margin:0 auto;padding:2rem}
.au-welcome{position:relative;overflow:hidden;border-radius:var(--au-r1);padding:3rem;color:#fff;background:var(--au-pg);box-shadow:var(--au-glow);min-height:17rem}
.au-welcome h2,.au-welcome p{position:relative;z-index:2;max-width:calc(100% - 13rem)}
.au-welcome h2{font-size:3rem;font-weight:800;letter-spacing:-.02em;color:#fff}
.au-welcome p{font-size:1.5rem;opacity:.92;margin-top:.8rem;max-width:42rem;color:#fff}
.au-welcome .au-orb{position:absolute;border-radius:50%;background:rgba(255,255,255,.16);animation:auFloat 7s ease-in-out infinite}
.au-welcome .au-orb.a{width:20rem;height:20rem;right:-6rem;top:-8rem}
.au-welcome .au-orb.b{width:11rem;height:11rem;right:9rem;bottom:-5rem;animation-delay:-3s}
.au-welcome .au-cube{position:absolute;right:4rem;top:50%;margin-top:-3.5rem;width:7rem;height:7rem;transform-style:preserve-3d;animation:auCube 14s linear infinite}
.au-welcome .au-cube i{position:absolute;inset:0;border:2px solid rgba(255,255,255,.55);border-radius:12px;background:rgba(255,255,255,.12)}
.au-welcome .au-cube i:nth-child(1){transform:translateZ(3.5rem)}.au-welcome .au-cube i:nth-child(2){transform:rotateY(90deg) translateZ(3.5rem)}
.au-welcome .au-cube i:nth-child(3){transform:rotateY(180deg) translateZ(3.5rem)}.au-welcome .au-cube i:nth-child(4){transform:rotateY(-90deg) translateZ(3.5rem)}
.au-welcome .au-cube i:nth-child(5){transform:rotateX(90deg) translateZ(3.5rem)}.au-welcome .au-cube i:nth-child(6){transform:rotateX(-90deg) translateZ(3.5rem)}
.au-welcome{perspective:700px}
@keyframes auCube{to{transform:rotateX(360deg) rotateY(360deg)}}
.au-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.6rem;margin-top:2rem}
.au-kpi{position:relative;overflow:hidden;border-radius:var(--au-r2);padding:1.8rem;color:#fff;display:flex;align-items:center;gap:1.4rem;cursor:default}
.au-kpi:nth-child(1){background:var(--au-k1)}.au-kpi:nth-child(2){background:var(--au-k2)}.au-kpi:nth-child(3){background:var(--au-k3)}.au-kpi:nth-child(4){background:var(--au-k4)}
.au-kpi .ic{width:5rem;height:5rem;border-radius:50%;background:rgba(255,255,255,.24);display:grid;place-items:center;font-size:2.1rem;flex:none;transform:translateZ(20px)}
.au-kpi b{display:block;font-size:3rem;font-weight:800;line-height:1}
.au-kpi small{font-size:1.3rem;opacity:.92;font-weight:600}
.au-panel{background:var(--au-card);border:1px solid var(--au-line);border-radius:var(--au-r1);padding:2rem;backdrop-filter:blur(14px);box-shadow:var(--au-lift)}
.au-panel h3{font-size:1.7rem;font-weight:800;margin-bottom:1.4rem;color:var(--au-ink)}
.au-learn{display:flex;align-items:center;gap:1.4rem;padding:1.1rem 0;border-bottom:1px dashed var(--au-line);color:var(--au-ink)}
.au-learn:last-child{border:0}
.au-learn img{width:6rem;height:5rem;border-radius:14px;object-fit:cover}
.au-learn .t{flex:1;min-width:0}.au-learn .t b{display:block;font-size:1.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.au-learn .t small{font-size:1.2rem;color:var(--au-muted)}
.au-bar{height:.8rem;border-radius:1rem;background:var(--au-line);overflow:hidden;margin-top:.6rem}
.au-bar i{display:block;height:100%;width:0;border-radius:1rem;background:var(--au-pg);transition:width 1.4s var(--au-ease)}
.au-side{display:flex;flex-direction:column;gap:2rem}
@media (max-width:900px){.au-hero{grid-template-columns:1fr}}

/* ---------- mini calendar (aurora.js) ---------- */
.au-cal{font-size:13px;color:var(--au-ink)}
.au-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-weight:800;font-size:15px}
.au-cal-head button{width:30px;height:30px;border-radius:10px;border:1px solid var(--au-line);background:var(--au-solid);color:var(--au-ink);cursor:pointer;transition:transform .25s var(--au-spring),background .2s}
.au-cal-head button:hover{background:var(--au-pg);color:#fff;transform:scale(1.12)}
.au-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;animation:auSlide .45s var(--au-ease) both}
.au-cal-grid.prev{animation-name:auSlideR}
@keyframes auSlide{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes auSlideR{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
.au-cal-grid span{padding:8px 0;border-radius:10px;font-weight:600;transition:background .2s,transform .25s var(--au-spring)}
.au-cal-grid span.d{color:var(--au-muted);font-size:11px;font-weight:700;text-transform:uppercase}
.au-cal-grid span.o{opacity:.3}
.au-cal-grid span.n:hover{background:color-mix(in srgb,var(--au-p) 14%,transparent);transform:scale(1.15)}
.au-cal-grid span.today{background:var(--au-pg);color:#fff;box-shadow:var(--au-glow);transform:scale(1.08)}

/* =====================================================================
   AUTH PAGES (login / register) - glass card on the animated canvas
   ===================================================================== */
.form-container{display:grid;place-items:center;min-height:calc(100vh - 12rem);perspective:1200px}
.form-container form{padding:3.2rem!important;animation:auCardIn .9s var(--au-spring) both;transform-style:preserve-3d}
@keyframes auCardIn{from{opacity:0;transform:translateY(40px) rotateX(18deg) scale(.94)}to{opacity:1;transform:none}}
.form-container form h3{font-weight:800;letter-spacing:-.02em;background:var(--au-pg);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.form-container form .link a{color:var(--au-p)}

/* =====================================================================
   CONSOLE (admin + teacher): sidebar, top bar, KPI cards, side panel
   ===================================================================== */
.con-body{font-family:var(--au-font)!important;color:var(--au-ink)}
.con-side{background:var(--au-card)!important;color:var(--au-ink)!important;border-right:1px solid var(--au-line);
   inset:14px auto 14px 14px!important;width:250px!important;border-radius:28px;backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);box-shadow:var(--au-lift)}
@media (max-width:860px){.con-side{inset:0 auto 0 0!important;border-radius:0 28px 28px 0;width:270px!important}}
.con-brand{color:var(--au-ink)!important}
.con-brand small{color:var(--au-muted)!important}
.con-logo{background:var(--au-pg)!important;color:#fff;box-shadow:var(--au-glow);animation:auFloat 5s ease-in-out infinite}
.con-nav a{color:var(--au-muted)!important;border-radius:16px!important;transition:transform .3s var(--au-spring),background .25s,color .25s!important}
.con-nav a:hover{background:color-mix(in srgb,var(--au-p) 10%,transparent)!important;color:var(--au-p)!important;transform:translateX(5px)!important}
.con-nav a:hover i{animation:auWiggle .5s}
@keyframes auWiggle{25%{transform:rotate(-14deg) scale(1.2)}60%{transform:rotate(10deg) scale(1.2)}}
.con-nav a.on{background:var(--au-pg)!important;color:#fff!important;box-shadow:var(--au-glow);animation:auPop .45s var(--au-spring)}
@keyframes auPop{from{transform:scale(.92)}to{transform:none}}
.con-nav a.on::before{display:none}
.con-nav hr{border-top-color:var(--au-line)!important}
.con-pill{background:var(--au-k2)!important;color:#fff!important;animation:auPulse 2s infinite}
.con-side-foot{border-top-color:var(--au-line)!important}
.con-lang a{background:var(--au-solid)!important;color:var(--au-muted)!important;border:1px solid var(--au-line);transition:all .25s}
.con-lang a.on,.con-lang a:hover{background:var(--au-pg)!important;color:#fff!important;border-color:transparent}
.con-logout{background:color-mix(in srgb,var(--au-danger) 12%,transparent)!important;color:var(--au-danger)!important;transition:transform .25s var(--au-spring)}
.con-logout:hover{transform:translateX(4px)}
.con-main{margin-left:278px!important}
@media (max-width:860px){.con-main{margin-left:0!important}}
.con-head{background:var(--au-card);border:1px solid var(--au-line);border-radius:22px;padding:14px 18px;backdrop-filter:blur(16px);box-shadow:var(--au-lift);animation:auSlideDown .6s var(--au-spring) both}
@keyframes auSlideDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:none}}
.con-hello h1{font-weight:800;letter-spacing:-.02em}
.con-icon,.con-me{background:var(--au-solid)!important;border:1px solid var(--au-line)!important;border-radius:14px!important;transition:transform .3s var(--au-spring),background .25s,color .25s!important}
.con-icon:hover{background:var(--au-pg)!important;color:#fff!important;border-color:transparent!important;transform:translateY(-3px) rotate(-8deg)}
.con-me img{background:var(--au-pg)!important;border-radius:12px!important}
.con-body .card{background:var(--au-card)!important;border:1px solid var(--au-line)!important;border-radius:var(--au-r1)!important;backdrop-filter:blur(14px) saturate(1.2);box-shadow:var(--au-lift);position:relative}
.card.hover:hover{border-color:color-mix(in srgb,var(--au-p) 50%,transparent)!important}
.card h3{font-weight:800}

.con-nav a.con-cta{margin-top:auto;justify-content:center;background:var(--au-k2)!important;color:#fff!important;font-weight:800;box-shadow:0 12px 28px -14px rgba(249,115,22,.7)}
.con-nav a.con-cta i{background:rgba(255,255,255,.24);border-radius:50%;width:28px;height:28px;display:grid;place-items:center}
.con-nav a.con-cta:hover{transform:translateY(-4px) scale(1.03)!important;color:#fff!important}

/* gradient KPI cards (reference style) */
.card.kpi{border:0!important;color:#fff;min-height:104px}
.kpis .card.kpi:nth-child(4n+1){background:var(--au-k1)!important}
.kpis .card.kpi:nth-child(4n+2){background:var(--au-k2)!important}
.kpis .card.kpi:nth-child(4n+3){background:var(--au-k3)!important}
.kpis .card.kpi:nth-child(4n+4){background:var(--au-k4)!important}
.kpi .ico{background:rgba(255,255,255,.24)!important;border-radius:50%!important;color:#fff;transition:transform .5s var(--au-spring)}
.card.kpi:hover .ico{transform:rotateY(180deg) scale(1.1)}
.kpi b,.kpi span{color:#fff!important}
.kpi span{opacity:.92;font-weight:600}
.kpi::after{background:rgba(255,255,255,.15)!important;border-radius:50%!important;width:130px!important;height:130px!important;animation:auFloat 6s ease-in-out infinite}

.btn{border-radius:14px!important;background:var(--au-pg)!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),var(--au-glow);position:relative;overflow:hidden;transition:transform .25s var(--au-spring),filter .2s!important}
.btn:hover{transform:translateY(-3px) scale(1.03);filter:brightness(1.08)}
.btn:active{transform:translateY(1px) scale(.96)}
.btn.red{background:var(--au-k2)!important}
.btn.green{background:var(--au-k4)!important}
.btn.ghost{background:transparent!important;color:var(--au-ink)!important;border:1px solid var(--au-line)!important;box-shadow:none}
.btn.ghost:hover{background:color-mix(in srgb,var(--au-p) 10%,transparent)!important;color:var(--au-p)!important}
.tabs{background:var(--au-card)!important;border-radius:16px!important;border-color:var(--au-line)!important}
.tabs button{border-radius:12px!important;transition:all .3s var(--au-spring)}
.tabs button.on{background:var(--au-pg)!important;box-shadow:var(--au-glow);transform:scale(1.05)}
.search input{background:var(--au-solid)!important;border-radius:16px!important}
.search input:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--au-p) 18%,transparent)}
table{border-collapse:separate;border-spacing:0 6px}
tbody tr{transition:transform .25s var(--au-spring),background .2s}
tbody tr:hover{transform:scale(1.01);background:color-mix(in srgb,var(--au-p) 7%,transparent)}
.bar i{background:var(--au-pg)!important;border-radius:14px 14px 6px 6px!important}
.ring .fg{stroke:var(--au-p)}
.pbar i{background:var(--au-pg)!important}
.badge{border-radius:10px}
.con-modal{backdrop-filter:blur(10px)}
.con-modal-card{background:var(--au-solid)!important;border:1px solid var(--au-line)!important;border-radius:28px!important;animation:auModal .5s var(--au-spring) both}
@keyframes auModal{from{opacity:0;transform:perspective(900px) rotateX(-14deg) translateY(30px) scale(.92)}to{opacity:1;transform:none}}
.toast{background:var(--au-solid)!important;border:1px solid var(--au-line);border-radius:16px;animation:auToast .5s var(--au-spring) both}
.con-tabbar{background:var(--au-card)!important;border:1px solid var(--au-line)!important;border-radius:24px 24px 0 0;backdrop-filter:blur(20px)}
.con-tabbar a.on{background:var(--au-pg)!important;color:#fff!important;border-radius:16px;transform:translateY(-6px) scale(1.06);box-shadow:var(--au-glow);transition:transform .35s var(--au-spring)}
#con-topbar span{background:var(--au-pg)!important}

/* overview split layout: content + calendar side panel */
.con-split .kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.con-body .row .kpi .ico{width:42px;height:42px}
.con-body .row .kpi .ico.g{background:var(--au-k2)!important}.con-body .row .kpi .ico.b{background:var(--au-k3)!important}
.con-body .row .kpi .ico.r{background:var(--au-k1)!important}.con-body .row .kpi .ico.n{background:var(--au-k4)!important}
.con-split{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.con-aside{display:flex;flex-direction:column;gap:18px;position:sticky;top:18px}
@media (max-width:1180px){.con-split{grid-template-columns:1fr}.con-aside{position:static}}
.con-welcome{position:relative;overflow:hidden;border-radius:var(--au-r1);padding:26px 28px;margin-bottom:18px;color:#fff;background:var(--au-pg);box-shadow:var(--au-glow);perspective:700px}
.con-welcome h2{margin:0;font-size:24px;font-weight:800;letter-spacing:-.02em;color:#fff}
.con-welcome h2,.con-welcome p{position:relative;z-index:2}
.con-welcome p{margin:6px 0 0;opacity:.92;max-width:430px}
.con-welcome .au-orb{position:absolute;border-radius:50%;background:rgba(255,255,255,.16);animation:auFloat 7s ease-in-out infinite}
.con-welcome .au-orb.a{width:190px;height:190px;right:-50px;top:-70px}.con-welcome .au-orb.b{width:100px;height:100px;right:120px;bottom:-45px;animation-delay:-3s}
.con-welcome .au-cube{position:absolute;right:44px;top:50%;margin-top:-27px;width:54px;height:54px;transform-style:preserve-3d;animation:auCube 14s linear infinite}
.con-welcome .au-cube i{position:absolute;inset:0;border:2px solid rgba(255,255,255,.55);border-radius:10px;background:rgba(255,255,255,.12)}
.con-welcome .au-cube i:nth-child(1){transform:translateZ(27px)}.con-welcome .au-cube i:nth-child(2){transform:rotateY(90deg) translateZ(27px)}
.con-welcome .au-cube i:nth-child(3){transform:rotateY(180deg) translateZ(27px)}.con-welcome .au-cube i:nth-child(4){transform:rotateY(-90deg) translateZ(27px)}
.con-welcome .au-cube i:nth-child(5){transform:rotateX(90deg) translateZ(27px)}.con-welcome .au-cube i:nth-child(6){transform:rotateX(-90deg) translateZ(27px)}

/* =====================================================================
   STORE (Udemy-style marketplace)
   ===================================================================== */
.st{font-family:var(--au-font)!important}
.st-head{background:var(--au-card)!important;backdrop-filter:blur(18px) saturate(1.3);border-bottom:1px solid var(--au-line)!important;color:var(--au-ink)!important}
.st-head a,.st-head .st-logo{color:var(--au-ink)}
.st-btn,.st-btn.solid{border-radius:14px!important;position:relative;overflow:hidden;transition:transform .25s var(--au-spring),filter .2s,background .2s!important}
.st-btn.solid{background:var(--au-pg)!important;color:#fff!important;border:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),var(--au-glow)}
.st-btn.solid:hover{transform:translateY(-3px) scale(1.03)}
.st-btn:active{transform:scale(.96)!important}
.ccard,.learn-card,.cat-tiles a,.trust>div{background:var(--au-card)!important;border:1px solid var(--au-line)!important;border-radius:var(--au-r1)!important;backdrop-filter:blur(12px);position:relative}
.ccard:hover,.learn-card:hover,.cat-tiles a:hover{border-color:color-mix(in srgb,var(--au-p) 50%,transparent)!important}
.st-hero{background:var(--au-pg)!important;border-radius:0 0 40px 40px;position:relative;overflow:hidden}
.st-hero::after{content:"";position:absolute;right:-80px;top:-100px;width:380px;height:380px;border-radius:50%;background:rgba(255,255,255,.14);animation:auFloat 8s ease-in-out infinite}
.st input,.st select,.st textarea{background:var(--au-solid);border-color:var(--au-line);border-radius:14px;color:var(--au-ink)}
.auth-card{background:var(--au-card)!important;border:1px solid var(--au-line)!important;border-radius:28px!important;backdrop-filter:blur(18px);animation:auCardIn .9s var(--au-spring) both}
.st-foot,.footer{background:var(--au-card)!important;color:var(--au-muted)!important;border-top:1px solid var(--au-line)!important}
.footer{border-radius:26px 26px 0 0;margin-top:3rem;position:relative!important;bottom:auto!important}
.quick-select .box-container .box .flex a{background:color-mix(in srgb,var(--au-p) 10%,transparent)!important;border:1px solid var(--au-line);border-radius:14px!important;color:var(--au-ink)!important;transition:transform .3s var(--au-spring),background .25s}
.quick-select .box-container .box .flex a span,.quick-select .box-container .box .flex a i{color:var(--au-ink)!important}
.quick-select .box-container .box .flex a:hover{background:var(--au-pg)!important;transform:translateY(-4px) scale(1.04)}
.quick-select .box-container .box .flex a:hover span,.quick-select .box-container .box .flex a:hover i{color:#fff!important}

/* floating theme switch (pages without a built-in one) */
.au-fab{position:fixed;right:18px;bottom:18px;z-index:1300;width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;color:#fff;font-size:20px;
   background:var(--au-pg);box-shadow:var(--au-glow);transition:transform .4s var(--au-spring);display:grid;place-items:center}
.au-fab:hover{transform:rotate(25deg) scale(1.12)}
.au-fab:active{transform:scale(.9)}
@media (max-width:760px){.au-fab{bottom:92px}}

/* mobile bottom bars (restyled) */
.mca-tabbar{background:var(--au-card)!important;border:1px solid var(--au-line)!important;border-radius:24px 24px 0 0;backdrop-filter:blur(20px)}
.mca-tabbar a{transition:transform .35s var(--au-spring),background .25s,color .25s}
.mca-tabbar a.on{background:var(--au-pg)!important;color:#fff!important;border-radius:16px;transform:translateY(-6px) scale(1.06);box-shadow:var(--au-glow)}

@media (prefers-reduced-motion:reduce){
   *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
   .au-reveal{opacity:1;transform:none}
}

/* =====================================================================
   CUSTOM CONFIRM DIALOG
   ===================================================================== */
.cf-ov{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:16px;background:rgba(12,16,30,.58);opacity:0;transition:opacity .25s var(--au-ease)}
.cf-ov.in{opacity:1}.cf-ov.out{opacity:0}
body.cf-lock{overflow:hidden}
.cf-card{width:min(400px,100%);background:var(--au-solid);color:var(--au-ink);border:1px solid var(--au-line);border-radius:14px;padding:26px 24px 20px;text-align:center;
   transform:translateY(26px) scale(.9);opacity:0;transition:transform .45s var(--au-spring),opacity .3s;box-shadow:0 24px 60px -14px rgba(0,0,0,.55)}
.cf-ov.in .cf-card{transform:none;opacity:1}
.cf-ov.out .cf-card{transform:translateY(10px) scale(.95)}
.cf-ic{width:58px;height:58px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;font-size:22px;background:color-mix(in srgb,var(--au-p) 16%,transparent);color:var(--au-p);animation:cfPop .6s var(--au-spring) .08s both}
.cf-card.danger .cf-ic{background:rgba(255,62,29,.14);color:#ff3e1d}
@keyframes cfPop{from{transform:scale(0) rotate(-40deg)}to{transform:none}}
.cf-card h3{font-size:17px;margin:0 0 6px;font-weight:700;color:var(--au-ink)}
.cf-card p{font-size:14px;line-height:1.5;color:var(--au-muted);margin:0 0 20px}
.cf-actions{display:flex;gap:10px}
.cf-actions button{flex:1;padding:10px 14px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;border:1px solid var(--au-line);background:transparent;color:var(--au-ink);
   transition:transform .2s var(--au-spring),filter .2s,box-shadow .2s;font-family:inherit}
.cf-actions button:hover{transform:translateY(-2px);filter:brightness(1.06)}
.cf-actions button:active{transform:scale(.96)}
.cf-actions button:focus-visible{outline:2px solid var(--au-p);outline-offset:2px}
.cf-actions .cf-yes{border:0;color:#fff;background:var(--au-pg);box-shadow:var(--au-glow)}
.cf-card.danger .cf-yes{background:#ff3e1d;box-shadow:0 2px 8px rgba(255,62,29,.45)}

/* =====================================================================
   QUIZ TYPES (teacher manager, review page, student quiz)
   ===================================================================== */
.qt-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:6px 0 14px}
.qt-seg button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 8px;border-radius:10px;border:1.5px solid var(--au-line);background:transparent;color:var(--au-ink);cursor:pointer;font-family:inherit;
   transition:transform .3s var(--au-spring),border-color .2s,background .2s}
.qt-seg button i{font-size:18px;color:var(--au-muted);transition:transform .35s var(--au-spring),color .2s}
.qt-seg button span{font-size:13px;font-weight:700}
.qt-seg button small{font-size:11px;color:var(--au-muted)}
.qt-seg button:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--au-p) 50%,transparent)}
.qt-seg button.on{border-color:var(--au-p);background:color-mix(in srgb,var(--au-p) 12%,transparent);transform:translateY(-2px)}
.qt-seg button.on i{color:var(--au-p);transform:scale(1.2) rotate(-6deg)}
.qt-pane:not([hidden]){animation:qtIn .4s var(--au-ease) both}
@keyframes qtIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.qt-tf{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 12px}
.qt-tf label{cursor:pointer;margin:0!important;padding:0!important;background:none!important;border:0!important}
.qt-tf input{position:absolute;opacity:0;pointer-events:none}
.qt-tf label span{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 10px;border-radius:10px;border:1.5px solid var(--au-line);font-weight:700;font-size:14px;color:var(--au-ink);
   transition:transform .3s var(--au-spring),background .2s,border-color .2s,color .2s}
.qt-tf label:hover span{transform:translateY(-2px)}
.qt-tf label:first-child input:checked+span{background:rgba(113,221,55,.16);border-color:#71dd37;color:#4fae1f}
.qt-tf label:last-child input:checked+span{background:rgba(255,62,29,.14);border-color:#ff3e1d;color:#ff3e1d}
.qt-tf input:focus-visible+span{outline:2px solid var(--au-p);outline-offset:2px}
.qt-hint{font-size:12.5px;color:var(--au-muted);margin:6px 0 10px;line-height:1.5}
.qt-hint i{color:var(--au-p);margin-right:4px}
.qt-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:5px;font-size:11px;font-weight:700;letter-spacing:.2px;white-space:nowrap;
   background:color-mix(in srgb,var(--au-p) 16%,transparent);color:var(--au-p)}
.qt-badge.truefalse{background:rgba(3,195,236,.16);color:#03c3ec}
.qt-badge.open{background:rgba(255,171,0,.18);color:#e89a00}
.qt-badge.bad{background:rgba(255,62,29,.16);color:#ff3e1d}
.qt-card{position:relative}
.qt-card .qt-badge{margin-bottom:8px}
.qt-opt{padding:7px 10px;border-radius:7px;margin:4px 0;font-size:13.5px;background:color-mix(in srgb,var(--au-ink) 5%,transparent);color:var(--au-ink)!important;display:flex;gap:6px;align-items:center}
.qt-opt.ok{background:rgba(113,221,55,.16);color:#4fae1f!important;font-weight:600}
.qt-opt.ok i{margin-left:auto}
.qt-model{font-size:12.5px;padding:8px 10px;border-radius:7px;border-left:3px solid var(--au-p);background:color-mix(in srgb,var(--au-p) 8%,transparent);margin:8px 0;color:var(--au-ink)!important}
.qt-count{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:20px;margin-left:8px;background:rgba(113,221,55,.16);color:#4fae1f;vertical-align:middle}
.qt-count.open{background:rgba(255,171,0,.18);color:#e89a00}
.contents .heading{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.qt-tab{font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:20px;border:1px solid var(--au-line);color:var(--au-muted);margin-left:6px;transition:all .25s var(--au-spring)}
.qt-tab b{background:#ff3e1d;color:#fff;border-radius:10px;padding:0 6px;margin-left:4px;font-size:11px}
.qt-tab.on,.qt-tab:hover{background:color-mix(in srgb,var(--au-p) 14%,transparent);color:var(--au-p);border-color:transparent;transform:translateY(-1px)}
.qt-reviews{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))!important}
.qt-rev-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.qt-rev-head img{width:36px;height:36px;border-radius:8px;object-fit:cover}
.qt-rev-head div{flex:1;min-width:0}.qt-rev-head b{display:block;font-size:13.5px;color:var(--au-ink)}
.qt-rev-head small{display:block;font-size:11.5px;color:var(--au-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qt-ans{margin:8px 0 10px;padding:10px 12px;border-radius:8px;background:color-mix(in srgb,var(--au-ink) 5%,transparent)}
.qt-ans small{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--au-muted);margin-bottom:3px}
.qt-ans p{font-size:13.5px;color:var(--au-ink)!important;white-space:pre-wrap;word-break:break-word}
.qt-actions{display:flex;gap:8px;margin-top:6px}.qt-actions .btn,.qt-actions .delete-btn{flex:1}
.qt-actions .qt-ok{background:#71dd37!important;box-shadow:0 2px 6px rgba(113,221,55,.4)!important}

/* student quiz */
.mca-quiz-box.qt-q{position:relative;animation:qtIn .5s var(--au-ease) both}
.qt-num{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--au-pg);color:#fff;font-size:13px;font-weight:700;margin-right:8px;flex:none}
.q-title{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.q-title .qt-badge{margin-left:auto}
.qt-open{width:100%;min-height:110px;resize:vertical}
.mca-quiz-box label{transition:background .2s,transform .25s var(--au-spring)}
.mca-quiz-box label:hover{transform:translateX(3px)}
.qt-verdict{margin-top:10px;font-size:17px;font-weight:800}
.qt-verdict.ok{color:#4fae1f}.qt-verdict.bad{color:#ff3e1d}.qt-verdict.review{color:#e89a00}
.qt-summary{margin:16px 0 4px;text-align:left}
.qt-sum-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;margin-bottom:6px;font-size:13.5px;background:color-mix(in srgb,var(--au-ink) 5%,transparent);animation:qtIn .5s var(--au-ease) both}
.qt-sum-row:nth-child(2){animation-delay:.06s}.qt-sum-row:nth-child(3){animation-delay:.12s}.qt-sum-row:nth-child(4){animation-delay:.18s}.qt-sum-row:nth-child(5){animation-delay:.24s}
.qt-sum-n{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;background:var(--au-pg);color:#fff;font-size:12px;font-weight:700;flex:none}
.qt-sum-q{flex:1;min-width:0;color:var(--au-ink)}
.qt-sum-s{font-weight:700;font-size:12.5px;white-space:nowrap}
.qt-sum-row.ok .qt-sum-s{color:#4fae1f}.qt-sum-row.bad .qt-sum-s{color:#ff3e1d}.qt-sum-row.review .qt-sum-s{color:#e89a00}
.qt-banner{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:10px;margin-bottom:14px;background:rgba(255,171,0,.14);border:1px solid rgba(255,171,0,.35);animation:qtIn .5s var(--au-ease) both}
.qt-banner i{font-size:20px;color:#e89a00;margin-top:2px;animation:auFloat 3s ease-in-out infinite}
.qt-banner b{display:block;font-size:14px;color:var(--au-ink)}.qt-banner span{font-size:12.5px;color:var(--au-muted)}
.qt-graded{display:grid;gap:8px;margin-bottom:14px}
.qt-g{padding:12px 14px;border-radius:10px;border:1px solid var(--au-line);background:var(--au-card)}
.qt-g b{font-size:13.5px;color:var(--au-ink)}.qt-g p{font-size:13px;margin:4px 0;color:var(--au-muted);white-space:pre-wrap}
.qt-g span{font-size:12px;font-weight:700}.qt-g em{display:block;font-size:12.5px;margin-top:4px;color:var(--au-ink)}
.qt-g.correct{border-color:rgba(113,221,55,.5)}.qt-g.correct span{color:#4fae1f}
.qt-g.incorrect{border-color:rgba(255,62,29,.45)}.qt-g.incorrect span{color:#ff3e1d}
.qt-g.pending{border-color:rgba(255,171,0,.5)}.qt-g.pending span{color:#e89a00}

/* views chip */
.vw-chip{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:20px;font-size:12px;font-weight:600;background:color-mix(in srgb,var(--au-p) 14%,transparent);color:var(--au-p)!important}
.vw-chip span{color:inherit!important}
.vw{display:inline-flex;gap:6px;align-items:center;font-weight:600}
.vw i{color:var(--au-p)}

/* =====================================================================
   VIDEO UPLOAD OVERLAY (live percentage / speed / time left)
   ===================================================================== */
.up-hint{font-size:12.5px;color:var(--au-muted);margin:-4px 0 12px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;word-break:break-all}
.up-hint.bad{color:#ff3e1d;font-weight:600}
.up-ov{position:fixed;inset:0;z-index:99990;display:grid;place-items:center;padding:16px;background:rgba(12,16,30,.66);opacity:0;transition:opacity .3s}
.up-ov.in{opacity:1}
.up-card{width:min(440px,100%);background:var(--au-solid);color:var(--au-ink);border:1px solid var(--au-line);border-radius:16px;padding:26px 24px 20px;text-align:center;
   transform:translateY(24px) scale(.94);transition:transform .5s var(--au-spring);box-shadow:0 24px 60px -14px rgba(0,0,0,.55)}
.up-ov.in .up-card{transform:none}
.up-ic{width:64px;height:64px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;font-size:28px;color:var(--au-p);background:color-mix(in srgb,var(--au-p) 14%,transparent)}
.up-ic i{animation:upBounce 1.3s ease-in-out infinite}
.up-ic.ok{color:#71dd37;background:rgba(113,221,55,.16)}.up-ic.ok i{animation:cfPop .6s var(--au-spring) both}
@keyframes upBounce{0%,100%{transform:translateY(3px)}50%{transform:translateY(-5px)}}
.up-card h3{font-size:17px;margin:0 0 2px;font-weight:700;color:var(--au-ink)}
.up-file{font-size:12.5px;color:var(--au-muted);margin:0 0 8px;word-break:break-all}
.up-pct{display:flex;justify-content:center;align-items:baseline;gap:2px;margin:6px 0 10px}
.up-pct b{font-size:48px;font-weight:800;line-height:1;color:var(--au-p);font-variant-numeric:tabular-nums}
.up-pct span{font-size:20px;font-weight:700;color:var(--au-muted)}
.up-bar{height:10px;border-radius:10px;background:var(--au-line);overflow:hidden}
.up-bar i{display:block;height:100%;width:0;border-radius:10px;background:var(--au-pg);position:relative;overflow:hidden}
.up-bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-100%);animation:upShine 1.4s linear infinite}
@keyframes upShine{to{transform:translateX(100%)}}
.up-meta{display:flex;justify-content:space-between;gap:8px;margin:10px 0 8px;font-size:12px;color:var(--au-muted);flex-wrap:wrap}
.up-meta span{font-variant-numeric:tabular-nums}
.up-note{font-size:12px;color:var(--au-muted);margin:6px 0 12px;line-height:1.45}.up-note i{color:#e89a00;margin-right:4px}
.up-cancel{padding:9px 20px;border-radius:8px;border:1px solid var(--au-line);background:transparent;color:var(--au-ink);cursor:pointer;font-weight:600;font-size:13px;font-family:inherit;transition:transform .2s var(--au-spring),background .2s}
.up-cancel:hover{background:color-mix(in srgb,#ff3e1d 12%,transparent);color:#ff3e1d;transform:translateY(-2px)}
.up-toast{position:fixed;left:50%;bottom:26px;z-index:100001;transform:translate(-50%,30px);opacity:0;max-width:min(92vw,440px);padding:11px 18px;border-radius:10px;font-size:13.5px;font-weight:600;
   background:var(--au-solid);color:var(--au-ink);border:1px solid var(--au-line);border-left:4px solid #71dd37;transition:all .4s var(--au-spring);box-shadow:0 12px 30px -10px rgba(0,0,0,.45)}
.up-toast.in{transform:translate(-50%,0);opacity:1}.up-toast.bad{border-left-color:#ff3e1d}

/* compact views chip inside lesson cards */
.contents .box .flex{flex-wrap:wrap;gap:6px 10px;align-items:center}
.vw-chip{white-space:nowrap;padding:2px 9px!important;font-size:11.5px!important;line-height:1.5;flex:none;width:auto!important;height:auto!important;margin:0!important}
.vw-chip i{font-size:11px!important;margin:0!important}
.vw-chip span{font-size:11.5px!important;margin:0!important}