/* آکادمی جذابیت — design system v2
   Dark obsidian theme: girih geometry, gold foil, ember particles */
@import url("https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700;900&display=swap");

:root{
  --bg:#07070d; --bg2:#0d0d18;
  --glass:rgba(255,255,255,.05);
  --glass-strong:rgba(255,255,255,.09);
  --stroke:rgba(255,255,255,.09);
  --stroke-strong:rgba(255,255,255,.16);
  --gold-stroke:rgba(217,164,65,.35);
  --text:#f4f1fb; --muted:#a29db8; --faint:#6b6680;
  --crimson:#e0114b; --ember:#ff6a3d; --gold:#d9a441; --gold-hi:#f3d488;
  --ok:#3ddc84; --err:#ff5470;
  --grad:linear-gradient(135deg,#e0114b,#ff6a3d);
  --grad-gold:linear-gradient(135deg,#b8862e,#f3d488 50%,#b8862e);
  --r-lg:26px; --r-md:18px; --r-sm:12px;
  --shadow:0 24px 60px rgba(0,0,0,.55);
  --ease:cubic-bezier(.22,.61,.36,1);
  --girih:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84'%3E%3Cg fill='none' stroke='%23d9a441' stroke-opacity='.16'%3E%3Crect x='22' y='22' width='40' height='40'/%3E%3Crect x='22' y='22' width='40' height='40' transform='rotate(45 42 42)'/%3E%3Ccircle cx='42' cy='42' r='5'/%3E%3C/g%3E%3C/svg%3E");
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{
  font-family:"Vazirmatn",system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--text); min-height:100dvh;
  direction:rtl; overflow-x:hidden;
  padding-bottom:calc(96px + env(safe-area-inset-bottom));
}
/* ---- ambient: aurora mesh + drifting glow ---- */
.aura{position:fixed;inset:0;z-index:-2;background:
  radial-gradient(55% 45% at 85% -8%,rgba(224,17,75,.20),transparent 62%),
  radial-gradient(45% 40% at 8% 108%,rgba(217,164,65,.12),transparent 60%),
  radial-gradient(38% 34% at 92% 82%,rgba(96,44,180,.14),transparent 62%),
  var(--bg);
  animation:auroraShift 26s ease-in-out infinite alternate}
@keyframes auroraShift{to{filter:hue-rotate(-14deg) saturate(1.18)}}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");}
/* ---- ember particles ---- */
.embers{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.embers i{position:absolute;bottom:-12px;border-radius:50%;
  background:radial-gradient(circle,#ffd9a0,rgba(255,106,61,0) 70%);
  animation:emberRise linear infinite;opacity:0}
@keyframes emberRise{
  0%{transform:translateY(0) translateX(0) scale(1);opacity:0}
  8%{opacity:.85}
  100%{transform:translateY(-105vh) translateX(var(--drift,20px)) scale(.15);opacity:0}}

.glass{background:var(--glass);border:1px solid var(--stroke);
  backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%);
  border-radius:var(--r-lg)}
.gold-edge{position:relative}
.gold-edge::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-stroke),transparent);
  border-radius:inherit;pointer-events:none}

button,.btn{font-family:inherit;cursor:pointer;border:0;color:var(--text)}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 28px;border-radius:999px;font-size:15px;font-weight:800;overflow:hidden;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),opacity .2s;user-select:none}
.btn:active{transform:scale(.965)}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 34px rgba(224,17,75,.42)}
.btn-primary::after{content:"";position:absolute;top:0;bottom:0;width:44%;left:-60%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.34),transparent);
  transform:skewX(-18deg);animation:shimmer 3.2s ease-in-out infinite}
@keyframes shimmer{0%,55%{left:-60%}85%,100%{left:130%}}
.btn-ghost{background:var(--glass);border:1px solid var(--stroke);color:var(--text);
  backdrop-filter:blur(20px)}
.btn-gold{background:var(--grad-gold);color:#241a05;
  box-shadow:0 10px 30px rgba(217,164,65,.35)}
.btn[disabled]{opacity:.45;pointer-events:none}

input,textarea,select{font-family:inherit;width:100%;padding:15px 17px;
  background:rgba(255,255,255,.045);border:1px solid var(--stroke);
  border-radius:var(--r-sm);color:var(--text);font-size:15px;outline:none;
  transition:border-color .2s,background .2s,box-shadow .2s}
input:focus,textarea:focus,select:focus{border-color:rgba(224,17,75,.6);
  background:rgba(255,255,255,.07);box-shadow:0 0 0 4px rgba(224,17,75,.12)}
::placeholder{color:var(--faint)}

/* ---- topbar ---- */
.topbar{position:sticky;top:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:12px;height:calc(62px + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) 16px 0;
  background:rgba(7,7,13,.62);backdrop-filter:blur(28px) saturate(160%);
  -webkit-backdrop-filter:blur(28px) saturate(160%)}
/* arch line: ONE continuous gold hairline that dips into a smooth U under the
   medallion and fades out at both ends — no stitched segments, no seam.
   The header's frosted fill (::before) extends down to this exact curve so the
   glass reaches the gold line everywhere and cradles the medallion — the line
   IS the header's bottom edge, not a detached rule below it. */
.topbar::before{content:"";position:absolute;left:0;right:0;top:100%;height:28px;
  pointer-events:none;z-index:0;
  background:rgba(7,7,13,.62);
  backdrop-filter:blur(28px) saturate(160%);-webkit-backdrop-filter:blur(28px) saturate(160%);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='28' viewBox='0 0 1400 28'%3E%3Cpath d='M0 0 L0 5 H616 C658 5 652 24 700 24 C748 24 742 5 784 5 H1400 L1400 0 Z' fill='white'/%3E%3C/svg%3E") center top/1400px 28px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='28' viewBox='0 0 1400 28'%3E%3Cpath d='M0 0 L0 5 H616 C658 5 652 24 700 24 C748 24 742 5 784 5 H1400 L1400 0 Z' fill='white'/%3E%3C/svg%3E") center top/1400px 28px no-repeat}
.topbar::after{content:"";position:absolute;left:0;right:0;top:100%;height:28px;
  pointer-events:none;z-index:1;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='28' viewBox='0 0 1400 28' preserveAspectRatio='xMidYMin meet'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23d9a441' stop-opacity='0'/%3E%3Cstop offset='.3' stop-color='%23d9a441' stop-opacity='.5'/%3E%3Cstop offset='.5' stop-color='%23f3d488' stop-opacity='.85'/%3E%3Cstop offset='.7' stop-color='%23d9a441' stop-opacity='.5'/%3E%3Cstop offset='1' stop-color='%23d9a441' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 5 H616 C658 5 652 24 700 24 C748 24 742 5 784 5 H1400' fill='none' stroke='url(%23g)' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center top/1400px 28px no-repeat}
.top-side{display:flex;align-items:center;gap:9px;min-width:0}
.top-side.end{justify-content:flex-end}

/* ---- medallion (centered emblem) ---- */
.seal{position:relative;width:56px;height:56px;flex:0 0 auto;border-radius:50%;
  margin-top:16px;z-index:2}
/* soft radial halo behind the emblem — replaces the old hard dark ring so the
   logo blends into the header instead of looking cut-out/patched-in. */
.seal::before{content:"";position:absolute;left:50%;top:50%;
  width:150%;height:150%;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(224,17,75,.30) 0%,rgba(224,17,75,.12) 42%,transparent 70%);
  pointer-events:none;z-index:-1}
.seal-img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;
  border:1px solid rgba(217,164,65,.45);
  box-shadow:0 0 0 1px rgba(217,164,65,.28),
    0 8px 22px rgba(0,0,0,.5),0 0 28px rgba(224,17,75,.28)}
.top-actions{display:flex;align-items:center;gap:9px}
.streak-chip{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;
  border-radius:999px;font-size:12px;font-weight:800;color:var(--gold-hi);
  background:linear-gradient(160deg,rgba(217,164,65,.16),rgba(255,255,255,.05));
  border:1px solid var(--gold-stroke);backdrop-filter:blur(12px)}
.streak-chip svg{width:14px;height:14px;color:var(--ember)}
.icon-btn{width:38px;height:38px;border-radius:13px;display:inline-grid;place-items:center;
  color:var(--muted);background:rgba(255,255,255,.06);border:1px solid var(--stroke);
  backdrop-filter:blur(12px);transition:color .2s,border-color .2s,transform .15s}
.icon-btn svg{width:17px;height:17px}
.icon-btn:hover{color:var(--err);border-color:rgba(255,84,112,.35)}
.icon-btn:active{transform:scale(.9)}

/* ---- floating glass dock tabbar ---- */
.tabbar{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(14px + env(safe-area-inset-bottom));z-index:60;
  display:flex;gap:2px;padding:8px;border-radius:26px;min-width:300px;
  background:linear-gradient(160deg,rgba(24,23,38,.66),rgba(10,10,18,.72));
  backdrop-filter:blur(34px) saturate(180%);-webkit-backdrop-filter:blur(34px) saturate(180%);
  border:1px solid var(--stroke-strong);box-shadow:var(--shadow),
    inset 0 1px 0 rgba(255,255,255,.08)}
.tabbar::before{content:"";position:absolute;top:-1px;left:18%;right:18%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(217,164,65,.45),transparent)}
.tabbar button{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;
  gap:4px;background:none;font-size:10.5px;font-weight:700;color:var(--faint);
  padding:10px 6px 8px;border-radius:19px;
  transition:color .28s var(--ease),transform .18s var(--ease)}
.tabbar button:active{transform:scale(.92)}
.tabbar button .ic{width:22px;height:22px;display:block;line-height:1;
  transition:transform .3s var(--ease),filter .3s var(--ease),color .3s}
.tabbar button .ic svg{width:100%;height:100%;display:block}
.tabbar button .lbl{transition:letter-spacing .25s}
.tabbar button .dot{position:absolute;bottom:3px;width:3.5px;height:3.5px;border-radius:50%;
  background:transparent;transition:background .25s,box-shadow .25s}
.tabbar button.active{color:var(--text)}
.tabbar button.active .ic{
  transform:translateY(-2px);
  filter:drop-shadow(0 0 8px rgba(224,17,75,.75)) drop-shadow(0 2px 5px rgba(0,0,0,.5))}
.tabbar button.active .dot{background:var(--crimson);box-shadow:0 0 8px rgba(224,17,75,.9)}
.tabbar button.active .lbl{letter-spacing:.4px}
.tabbar button.active::before{content:"";position:absolute;inset:0;border-radius:19px;
  background:linear-gradient(165deg,rgba(224,17,75,.24),rgba(255,106,61,.07) 70%,transparent);
  border:1px solid rgba(224,17,75,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 18px rgba(224,17,75,.18)}

/* ---- views ---- */
.view{max-width:560px;margin:0 auto;padding:20px 18px 34px;animation:viewIn .34s var(--ease)}
@keyframes viewIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.gold-text{background:var(--grad-gold);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.fire-text{background:linear-gradient(120deg,#fff 10%,#ffb199 45%,var(--crimson));
  -webkit-background-clip:text;background-clip:text;color:transparent}
h1.hero{font-size:27px;font-weight:900;line-height:1.4;margin:10px 0 4px;letter-spacing:-.3px}
.sub{color:var(--muted);font-size:13.5px;line-height:1.9}

/* ornamental divider */
.orn{display:flex;align-items:center;gap:10px;margin:26px 0 14px;color:var(--gold)}
.orn::before,.orn::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-stroke))}
.orn::after{background:linear-gradient(90deg,var(--gold-stroke),transparent)}
.orn span{font-size:12.5px;font-weight:800;letter-spacing:1px}

/* ---- stat strip ---- */
.statstrip{display:flex;gap:10px;margin-top:16px}
.statstrip .st{flex:1;padding:12px 8px;text-align:center;border-radius:var(--r-md);
  background:var(--glass);border:1px solid var(--stroke);backdrop-filter:blur(20px)}
.st b{display:block;font-size:17px;font-weight:900}
.st span{font-size:10.5px;color:var(--faint)}

/* ---- course cards: sigil cover ---- */
.card-course{position:relative;display:block;width:100%;text-align:right;
  margin-bottom:18px;border-radius:var(--r-lg);overflow:hidden;
  background:var(--glass);border:1px solid var(--stroke);
  backdrop-filter:blur(26px) saturate(150%);
  transition:transform .25s var(--ease),border-color .25s,box-shadow .25s;
  animation:cardIn .5s var(--ease) both}
@keyframes cardIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.card-course:active{transform:scale(.975)}
.card-course:hover{border-color:var(--stroke-strong);
  box-shadow:0 18px 50px rgba(0,0,0,.45)}
.cc-cover{position:relative;height:118px;overflow:hidden;
  background:var(--cover-bg,linear-gradient(140deg,#1a0b14,#241019));
  border-bottom:1px solid rgba(217,164,65,.18)}
.cc-cover::before{content:"";position:absolute;inset:0;background-image:var(--girih);
  background-size:84px;opacity:.5}
.cc-cover::after{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 120% at 82% 0%,var(--cover-glow,rgba(224,17,75,.5)),transparent 62%)}
.cc-glyph{position:absolute;left:6px;bottom:-26px;font-size:96px;line-height:1;
  opacity:.16;filter:blur(.4px);transform:rotate(-8deg);z-index:1}
.cc-shine{position:absolute;top:0;bottom:0;width:36%;left:-70%;z-index:2;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.13),transparent);
  transform:skewX(-16deg);animation:shimmer 4.6s ease-in-out infinite}
.cc-badge{position:absolute;top:12px;right:12px;z-index:3}
.cc-body{position:relative;padding:15px 17px 17px}
.cc-title{font-size:17.5px;font-weight:900;margin-bottom:4px;letter-spacing:-.2px}
.cc-sub{color:var(--muted);font-size:12.5px;margin-bottom:12px;line-height:1.8;min-height:18px}
.cc-meta{display:flex;gap:14px;color:var(--faint);font-size:11.5px;align-items:center}
.cc-price{margin-inline-start:auto;font-weight:800;font-size:13px;color:var(--gold-hi)}
.cc-bar{position:absolute;right:0;bottom:0;height:3px;width:100%;background:rgba(255,255,255,.05)}
.cc-bar i{display:block;height:100%;background:var(--grad);
  box-shadow:0 0 12px rgba(224,17,75,.7);border-radius:0 3px 3px 0}

.badge{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;
  font-size:10.5px;font-weight:800;border-radius:999px;backdrop-filter:blur(8px);
  background:rgba(61,220,132,.14);color:var(--ok);border:1px solid rgba(61,220,132,.35)}
.badge.locked{background:rgba(7,7,13,.55);color:var(--gold-hi);
  border-color:var(--gold-stroke)}

/* ---- course detail: cinematic band ---- */
.band{position:relative;margin:-20px -18px 0;padding:26px 20px 58px;overflow:hidden;
  background:var(--cover-bg,linear-gradient(140deg,#1a0b14,#241019))}
.band::before{content:"";position:absolute;inset:0;background-image:var(--girih);
  background-size:84px;opacity:.5}
.band::after{content:"";position:absolute;inset:0;
  background:radial-gradient(80% 110% at 85% -10%,var(--cover-glow,rgba(224,17,75,.5)),transparent 60%),
  linear-gradient(180deg,transparent 40%,var(--bg) 96%)}
.band-in{position:relative;z-index:2}
.band .cc-glyph{font-size:130px;bottom:auto;top:-14px;opacity:.14}
.back-fab{position:relative;z-index:3;width:38px;height:38px;border-radius:13px;
  display:grid;place-items:center;background:rgba(10,10,18,.5);color:var(--text);
  border:1px solid var(--stroke-strong);backdrop-filter:blur(10px);margin-bottom:14px;
  transition:transform .2s}
.back-fab:active{transform:scale(.92)}
.band-hero{display:flex;gap:14px;align-items:flex-start}
.progress-ring{--p:0;width:56px;height:56px;border-radius:50%;flex-shrink:0;position:relative;
  background:conic-gradient(var(--crimson) calc(var(--p)*1%),rgba(255,255,255,.09) 0);
  display:grid;place-items:center;filter:drop-shadow(0 0 10px rgba(224,17,75,.35))}
.progress-ring i{width:44px;height:44px;border-radius:50%;background:#12101c;
  display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:900}
.buy-panel{position:relative;z-index:2;margin:-44px 0 0}

/* ---- lesson rows ---- */
.lesson-row{display:flex;align-items:center;gap:12px;width:100%;text-align:right;
  padding:14px;border-radius:var(--r-md);margin-bottom:9px;
  background:var(--glass);border:1px solid var(--stroke);color:var(--text);
  backdrop-filter:blur(20px);position:relative;overflow:hidden;
  transition:transform .2s var(--ease),border-color .2s}
.lesson-row::after{content:"";position:absolute;inset:0 100% 0 0;background:
  linear-gradient(90deg,rgba(224,17,75,.12),transparent);
  transition:inset .3s var(--ease)}
.lesson-row:hover::after{inset:0 0 0 0}
.lesson-row:active{transform:scale(.98)}
.lesson-row.locked{opacity:.5}
.lesson-row.done{border-color:rgba(61,220,132,.22)}
.lr-icon{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;
  font-size:17px;flex-shrink:0;background:rgba(255,255,255,.06);
  border:1px solid var(--stroke);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.lesson-row.done .lr-icon{background:rgba(61,220,132,.12);color:var(--ok);
  border-color:rgba(61,220,132,.3)}
.lr-title{font-size:13.5px;font-weight:700;margin-bottom:2px}
.lr-meta{font-size:11px;color:var(--faint)}

/* ---- login ---- */
.login-wrap{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;
  max-width:400px;margin:0 auto;padding:24px}
.sigil-orbit{position:relative;width:104px;height:104px;margin:0 auto 22px}
.sigil-orbit .core{position:absolute;inset:14px;border-radius:50%;display:grid;place-items:center;
  overflow:hidden;z-index:2;
  box-shadow:0 16px 50px rgba(224,17,75,.55),0 0 0 2px rgba(217,164,65,.4),
    inset 0 2px 0 rgba(255,255,255,.4)}
.sigil-orbit .core img{width:100%;height:100%;object-fit:cover}
.sigil-orbit .ring{position:absolute;inset:0;border-radius:50%;
  border:1.5px dashed rgba(217,164,65,.45);animation:spin 14s linear infinite}
.sigil-orbit .ring2{position:absolute;inset:-12px;border-radius:50%;
  border:1px solid rgba(224,17,75,.25);animation:spin 22s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.login-card{padding:24px;border-radius:var(--r-lg);background:rgba(15,14,26,.72);
  border:1px solid var(--stroke-strong);backdrop-filter:blur(30px);
  box-shadow:var(--shadow)}

/* ---- player ---- */
.player-sheet{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;
  background:rgba(6,6,11,.94);backdrop-filter:blur(34px);animation:sheetIn .32s var(--ease)}
@keyframes sheetIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.player-top{display:flex;align-items:center;gap:12px;padding:14px 16px;
  padding-top:calc(14px + env(safe-area-inset-top));
  border-bottom:1px solid var(--stroke)}
.player-title{font-size:14px;font-weight:800;flex:1;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.player-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:0;padding:14px;gap:18px}
.player-stage video{width:100%;max-width:560px;border-radius:20px;
  border:1px solid var(--stroke-strong);box-shadow:var(--shadow)}
.stage-frame{width:100%;max-width:520px;flex:1;display:grid;place-items:center;
  border-radius:22px;background:rgba(255,255,255,.03);border:1px solid var(--stroke);
  overflow:auto;padding:16px;position:relative}
.stage-frame::before{content:"";position:absolute;inset:0;background-image:var(--girih);
  background-size:84px;opacity:.22;pointer-events:none}
.stage-frame iframe,.stage-frame img{position:relative;z-index:1}
.stage-frame img{max-width:100%;border-radius:16px;box-shadow:var(--shadow)}
/* audio: throne equalizer (loading placeholder) */
.eq{display:flex;align-items:flex-end;gap:7px;height:120px}
.eq i{width:9px;border-radius:6px 6px 0 0;background:var(--grad);
  animation:eqB 1s ease-in-out infinite alternate;box-shadow:0 0 16px rgba(224,17,75,.4)}
.eq i:nth-child(2){animation-delay:.12s}.eq i:nth-child(3){animation-delay:.24s}
.eq i:nth-child(4){animation-delay:.36s}.eq i:nth-child(5){animation-delay:.48s}
.eq i:nth-child(6){animation-delay:.6s}.eq i:nth-child(7){animation-delay:.32s}
@keyframes eqB{from{height:14%}to{height:96%}}
.player-stage audio{width:100%;max-width:440px}

/* ---- audio mode (podcast player) ---- */
.stage-frame.audio-mode{padding:0;overflow:hidden;max-width:440px;
  background:radial-gradient(120% 90% at 50% 0%,rgba(224,17,75,.14),transparent 55%),
             radial-gradient(100% 80% at 50% 110%,rgba(217,164,65,.10),transparent 60%),
             rgba(255,255,255,.03)}
.audio-bg{position:absolute;inset:-30px;background-size:cover;background-position:center;
  filter:blur(46px) saturate(.85) brightness(.5);opacity:.5;pointer-events:none}
.audio-bg::after{content:"";position:absolute;inset:0;background:rgba(8,8,14,.45)}
.audio-deck{position:relative;z-index:2;width:min(92%,380px);display:flex;flex-direction:column;
  gap:12px;padding:18px 18px 14px;border-radius:20px}
.audio-viz{width:100%;height:110px;display:block}
.audio-title{display:flex;align-items:center;gap:8px;font-size:13px;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.audio-live{width:8px;height:8px;border-radius:50%;background:#e0114b;flex:none;
  box-shadow:0 0 10px rgba(224,17,75,.8);animation:aLive 1.6s ease-in-out infinite}
@keyframes aLive{0%,100%{opacity:.35}50%{opacity:1}}
.audio-seek-wrap{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--muted);
  font-variant-numeric:tabular-nums}
.audio-time{flex:none;min-width:34px;text-align:center}
.audio-seek{position:relative;flex:1;height:22px;display:flex;align-items:center;cursor:pointer;
  touch-action:none}
.audio-seek::before{content:"";position:absolute;left:0;right:0;height:4px;border-radius:2px;
  background:rgba(255,255,255,.12)}
.audio-buf,.audio-played{position:absolute;left:0;height:4px;border-radius:2px;pointer-events:none}
.audio-played{background:linear-gradient(90deg,#d9a441,#e0114b);width:0}
.audio-knob{position:absolute;top:50%;transform:translate(-50%,-50%);width:13px;height:13px;
  border-radius:50%;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.5);
  inset-inline-start:0;transition:transform .15s var(--ease)}
.audio-seek:hover .audio-knob{transform:translate(-50%,-50%) scale(1.25)}
.audio-ctr{display:flex;align-items:center;justify-content:center;gap:10px}
.audio-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--stroke-strong);
  background:rgba(255,255,255,.05);color:#fff;font-size:13px;font-weight:700;cursor:pointer;
  display:grid;place-items:center;transition:all .18s var(--ease);user-select:none}
.audio-btn:hover{background:rgba(255,255,255,.11);border-color:var(--gold)}
.audio-btn:active{transform:scale(.93)}
.audio-btn.audio-rate{width:auto;padding:0 13px;border-radius:20px;font-size:12px}
.audio-btn.audio-mute.muted{opacity:.5}
.audio-btn.audio-play{width:58px;height:58px;font-size:19px;background:var(--grad);border:0;
  color:#fff;box-shadow:0 4px 22px rgba(224,17,75,.42)}
.audio-btn.audio-play.playing{box-shadow:0 4px 30px rgba(224,17,75,.62)}
.audio-btn.muted{opacity:.5}

/* RTL fix: seek bar direction must be LTR so time flows left→right like every player,
   while the rest of the deck stays RTL */
.audio-seek-wrap,.audio-ctr{direction:ltr}
.player-bottom{padding:14px 18px calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid var(--stroke)}

/* ---- toast / modal ---- */
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:110px;z-index:200;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast-item{padding:12px 22px;border-radius:15px;font-size:13px;font-weight:700;
  background:rgba(18,17,30,.92);border:1px solid var(--stroke-strong);
  backdrop-filter:blur(18px);box-shadow:var(--shadow);
  animation:tIn .32s var(--ease);max-width:86vw;text-align:center}
.toast-item.err{border-color:rgba(255,84,112,.55);color:var(--err)}
.toast-item.ok{border-color:rgba(61,220,132,.55);color:var(--ok)}
@keyframes tIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1}}

.modal-back{position:fixed;inset:0;z-index:150;background:rgba(4,4,8,.66);
  backdrop-filter:blur(10px);display:grid;place-items:center;padding:20px;
  animation:sheetIn .25s var(--ease)}
.modal{width:100%;max-width:430px;padding:24px;border-radius:var(--r-lg);
  background:rgba(17,16,28,.95);border:1px solid var(--stroke-strong);box-shadow:var(--shadow)}
.modal h3{font-size:17px;margin-bottom:16px}
.field{margin-bottom:13px}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:7px;font-weight:600}

/* ---- skeleton ---- */
.sk{border-radius:var(--r-lg);height:190px;margin-bottom:18px;position:relative;overflow:hidden;
  background:rgba(255,255,255,.035)}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
  animation:skMove 1.4s infinite}
@keyframes skMove{to{transform:translateX(100%)}}

.row{display:flex;align-items:center;gap:10px}
.spread{justify-content:space-between}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.center{text-align:center}

/* ---- profile ---- */
.avatar{--h:0;width:86px;height:86px;margin:0 auto;border-radius:28px;position:relative;
  display:grid;place-items:center;
  background:
    linear-gradient(160deg,
      hsl(calc(var(--h) * 1deg) 85% 52%),
      hsl(calc(var(--h) * 1deg + 40deg) 90% 38%));
  box-shadow:0 14px 40px hsl(calc(var(--h) * 1deg) 85% 45% / .45),
    inset 0 2px 0 rgba(255,255,255,.35)}
.avatar span{font-size:34px;font-weight:900;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.35)}
.avatar::after{content:"";position:absolute;inset:-6px;border-radius:33px;
  border:1.5px dashed hsl(calc(var(--h) * 1deg) 80% 60% / .5);
  animation:spin 16s linear infinite}
.tx-row{display:flex;align-items:center;gap:12px;padding:13px 14px;margin-bottom:8px;
  border-radius:var(--r-md);background:var(--glass);border:1px solid var(--stroke);
  backdrop-filter:blur(18px)}
.tx-fail{opacity:.6}
.tx-ic{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;
  font-size:15px;flex-shrink:0}
.tx-ic.ok{background:rgba(61,220,132,.12);color:var(--ok);border:1px solid rgba(61,220,132,.3)}
.tx-ic.wait{background:rgba(217,164,65,.12);color:var(--gold-hi);border:1px solid var(--gold-stroke)}
.tx-ic.fail{background:rgba(255,84,112,.12);color:var(--err);border:1px solid rgba(255,84,112,.3)}
.tx-ic.gift{background:rgba(224,17,75,.12);color:#ff9ab5;border:1px solid rgba(224,17,75,.3)}
.tx-amt{font-size:12.5px;font-weight:800;color:var(--text)}

/* ---- support / tickets ---- */
.ticket-card{display:block;width:100%;text-align:right;padding:14px 16px;margin-bottom:10px;
  border-radius:var(--r-md);background:var(--glass);border:1px solid var(--stroke);
  color:var(--text);backdrop-filter:blur(20px);
  transition:transform .2s var(--ease),border-color .2s}
.ticket-card:active{transform:scale(.98)}
.tstat{display:inline-flex;padding:3px 11px;border-radius:999px;font-size:10px;font-weight:800}
.tstat.open{background:rgba(217,164,65,.13);color:var(--gold-hi);border:1px solid var(--gold-stroke)}
.tstat.answered{background:rgba(61,220,132,.12);color:var(--ok);border:1px solid rgba(61,220,132,.3)}
.tstat.closed{background:rgba(255,255,255,.06);color:var(--faint);border:1px solid var(--stroke)}
.mode-pick{display:flex;gap:8px}
.mode-pick .mp{flex:1;padding:13px 8px;border-radius:var(--r-sm);font-size:12px;font-weight:700;
  background:rgba(255,255,255,.04);border:1px solid var(--stroke);color:var(--muted);
  transition:all .2s var(--ease)}
.mode-pick .mp.active{background:linear-gradient(160deg,rgba(224,17,75,.25),rgba(255,106,61,.1));
  border-color:rgba(224,17,75,.55);color:var(--text);
  box-shadow:0 0 0 3px rgba(224,17,75,.12)}
.chat-scroll{display:flex;flex-direction:column;gap:12px;max-height:52vh;min-height:200px;
  overflow-y:auto;padding:4px 2px;scroll-behavior:smooth}
.msg{max-width:86%;animation:viewIn .28s var(--ease)}
.msg.mine{align-self:flex-end;text-align:right}
.msg.theirs{align-self:flex-start}
.msg.sys{align-self:center;max-width:95%}
.msg-who{font-size:10px;color:var(--faint);margin-bottom:4px;font-weight:700}
.msg.mine .msg-who{text-align:right}
.msg-bub{padding:12px 15px;border-radius:18px;font-size:13px;line-height:1.9;
  backdrop-filter:blur(16px)}
.msg.mine .msg-bub{background:var(--grad);color:#fff;border-bottom-right-radius:6px;
  box-shadow:0 6px 20px rgba(224,17,75,.3)}
.msg.theirs .msg-bub{background:var(--glass-strong);border:1px solid var(--stroke-strong);
  border-bottom-left-radius:6px}
.msg.theirs[data-ai] .msg-bub{border-color:var(--gold-stroke);
  background:linear-gradient(160deg,rgba(217,164,65,.1),rgba(255,255,255,.05))}
.msg.sys .msg-bub{background:none;border:1px dashed var(--stroke-strong);color:var(--faint);
  font-size:11px;text-align:center;border-radius:999px;padding:8px 16px}
.chat-bar{display:flex;gap:8px;margin-top:12px;position:sticky;bottom:0;
  padding:8px 0 calc(4px + env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent,rgba(7,7,13,.9) 40%)}

/* ---- checkout modal ---- */
.ck-ov{position:fixed;inset:0;z-index:200;background:rgba(4,4,10,.7);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:viewIn .25s var(--ease)}
.ck-modal{width:100%;max-width:380px;border-radius:22px;padding:24px;
  background:var(--glass-strong,rgba(18,18,28,.92));border:1px solid var(--stroke-strong);
  box-shadow:0 30px 80px rgba(0,0,0,.5)}
.bundle-card .cc-body{background:none}

/* ---- cart button + badge ---- */
.cart-btn{position:relative}
.cart-badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;
  border-radius:999px;background:var(--grad);color:#fff;font-size:9.5px;font-weight:900;
  display:none;place-items:center;box-shadow:0 2px 8px rgba(224,17,75,.5);line-height:1}

/* ---- flash-sale (campaign) fire treatment ---- */
.card-course.on-sale{border-color:rgba(255,106,61,.5);
  box-shadow:0 0 0 1px rgba(255,106,61,.25),0 14px 44px rgba(224,17,75,.22)}
.card-course.on-sale .cc-cover::after{background:radial-gradient(80% 120% at 82% 0%,
  rgba(255,106,61,.6),transparent 60%)}
.sale-flame{position:absolute;top:10px;left:10px;z-index:4;display:inline-flex;align-items:center;
  gap:5px;padding:5px 11px;border-radius:999px;font-size:11px;font-weight:900;color:#fff;
  background:linear-gradient(135deg,#e0114b,#ff6a3d);
  box-shadow:0 4px 16px rgba(224,17,75,.5);
  animation:flamePulse 1.8s ease-in-out infinite}
@keyframes flamePulse{0%,100%{box-shadow:0 4px 16px rgba(224,17,75,.45);transform:translateY(0)}
  50%{box-shadow:0 6px 26px rgba(255,106,61,.7);transform:translateY(-1px)}}
.sale-old{text-decoration:line-through;opacity:.5;font-size:12px}
.sale-off{color:var(--ember);font-weight:900;font-size:12px}
/* countdown pills */
.countdown{display:inline-flex;gap:5px;align-items:center;direction:ltr}
.cd-seg{min-width:30px;padding:5px 4px;border-radius:9px;text-align:center;line-height:1.1;
  background:linear-gradient(160deg,rgba(224,17,75,.22),rgba(255,106,61,.1));
  border:1px solid rgba(255,106,61,.35)}
.cd-seg b{display:block;font-size:15px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums}
.cd-seg span{display:block;font-size:8.5px;color:var(--gold-hi);margin-top:1px}
.cd-colon{font-weight:900;color:var(--ember);opacity:.7}
.cd-wrap{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;
  padding:11px 13px;border-radius:14px;
  background:linear-gradient(135deg,rgba(224,17,75,.14),rgba(255,106,61,.06));
  border:1px solid rgba(255,106,61,.3)}
.cd-label{font-size:11px;font-weight:800;color:var(--ember)}
.cd-ended{font-size:12px;font-weight:800;color:var(--faint)}
.w-fire,.w-badge.fire{background:linear-gradient(135deg,#e0114b,#ff6a3d);color:#fff}

/* ---- announcement banner (student) ---- */
.ann-banner{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:180;
  width:min(560px,calc(100vw - 24px));display:flex;align-items:flex-start;gap:10px;
  padding:13px 16px;border-radius:16px;
  background:linear-gradient(160deg,rgba(217,164,65,.16),rgba(255,255,255,.06));
  border:1px solid var(--gold-stroke);backdrop-filter:blur(20px);
  box-shadow:0 12px 40px rgba(0,0,0,.45);
  animation:viewIn .3s var(--ease);transition:opacity .3s}
.ann-tag{flex-shrink:0;padding:3px 10px;border-radius:999px;font-size:10px;font-weight:800;
  background:rgba(217,164,65,.2);color:var(--gold-hi);border:1px solid var(--gold-stroke)}
.ann-text{flex:1;font-size:12.5px;line-height:1.8;color:var(--text)}
.ann-close{flex-shrink:0;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;
  background:none;border:none;color:var(--faint);cursor:pointer;font-size:13px}
.ann-close:hover{color:var(--text);background:rgba(255,255,255,.08)}

/* ---- admin ops widgets ---- */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.st-box{padding:14px;display:flex;flex-direction:column;gap:4px}
.st-box b{font-size:15px}
.bar-mini{display:inline-block;width:60px;height:6px;border-radius:999px;
  background:rgba(255,255,255,.08);overflow:hidden;vertical-align:middle;margin-left:6px}
.bar-mini i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--crimson),var(--ember))}

/* ---- anti-piracy watermark (player) ---- */
.wm{position:absolute;inset:0;pointer-events:none;z-index:5;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.player-stage .wm{color:rgba(255,255,255,.10);font-size:clamp(20px,6vw,42px);
  font-weight:900;letter-spacing:4px;transform:rotate(-18deg);
  text-shadow:0 1px 2px rgba(0,0,0,.15);white-space:nowrap;
  user-select:none;-webkit-user-select:none}

/* ---- admin (inherits tokens) ---- */
body.admin-body{padding-bottom:30px}
.admin-wrap{max-width:1280px;margin:0 auto;padding:0}

/* ---- admin sidebar shell ---- */
.admin-shell{display:flex;min-height:100dvh;align-items:stretch}
.admin-side{position:sticky;top:0;height:100dvh;width:228px;flex:0 0 228px;
  display:flex;flex-direction:column;gap:6px;padding:20px 14px;
  background:rgba(10,6,10,.72);border-left:1px solid var(--stroke);
  backdrop-filter:blur(26px) saturate(150%)}
.side-brand{display:flex;align-items:center;gap:10px;padding:2px 8px 18px;
  border-bottom:1px solid var(--stroke);margin-bottom:12px}
.side-nav{display:flex;flex-direction:column;gap:4px;flex:1}
.side-nav button{display:flex;align-items:center;gap:11px;width:100%;
  padding:11px 14px;border-radius:14px;font-size:13px;font-weight:700;
  background:transparent;border:1px solid transparent;color:var(--muted);
  transition:all .2s var(--ease);text-align:right}
.side-nav button:hover{background:rgba(255,255,255,.05);color:var(--text)}
.side-nav button.active{background:var(--grad);color:#fff;border-color:transparent;
  box-shadow:0 6px 20px rgba(224,17,75,.35)}
.side-ic{font-size:15px;width:20px;text-align:center;flex:0 0 20px}
.side-foot{border-top:1px solid var(--stroke);padding-top:12px}
.admin-main{flex:1;min-width:0;padding:24px 22px 70px;overflow-x:hidden}

@media (max-width:820px){
  .admin-shell{flex-direction:column}
  .admin-side{position:sticky;top:0;height:auto;width:100%;flex:none;
    flex-direction:row;align-items:center;padding:10px 12px;gap:8px;z-index:60}
  .side-brand{border:0;margin:0;padding:0}
  .side-brand > div{display:none}
  .side-nav{flex-direction:row;overflow-x:auto;flex:1;gap:2px;scrollbar-width:none}
  .side-nav button{padding:8px 12px;font-size:11.5px;white-space:nowrap;border-radius:999px}
  .side-nav button span:last-child{display:none}
  .side-ic{width:auto;flex:none;font-size:17px}
  .side-foot{border:0;padding:0;display:flex;gap:6px}
  .side-foot .btn{display:none}
  .admin-main{padding:16px 14px 60px}
}

/* legacy pill nav kept for safety */
.admin-nav{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:18px}
.admin-nav button{padding:9px 18px;border-radius:999px;font-size:13px;font-weight:800;
  background:var(--glass);border:1px solid var(--stroke);color:var(--muted);white-space:nowrap}
.admin-nav button.active{background:var(--grad);color:#fff;border-color:transparent;
  box-shadow:0 6px 20px rgba(224,17,75,.35)}
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th{text-align:right;color:var(--faint);font-weight:600;padding:8px 10px;
  border-bottom:1px solid var(--stroke)}
.tbl td{padding:10px;border-bottom:1px solid rgba(255,255,255,.05)}
.chip{padding:3px 10px;border-radius:999px;font-size:10.5px;font-weight:800}
.chip.ok{background:rgba(61,220,132,.12);color:var(--ok)}
.chip.no{background:rgba(255,255,255,.07);color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}