:root{
  --bg:#07090d;--bg2:#0d1118;--card:#11161f;--card2:#161c27;--line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.16);
  --text:#f4f1ea;--muted:#a9b1c0;--dim:#6f7888;
  --gold:#f4c584;--gold2:#e0a458;--orange:#ff9d2f;--teal:#14e0c3;--red:#ff5d6c;--green:#3ddc97;
  --r:18px;--shadow:0 24px 60px rgba(0,0,0,.55);
  --font:'Cairo',Tahoma,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;display:flex;flex-direction:column}
html[dir=ltr] body{--font:'Montserrat','Cairo',sans-serif}
button,input,textarea{font:inherit;color:inherit}
a{color:var(--gold)}
img{max-width:100%;display:block}

/* living background */
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(120% 80% at 50% -10%,#1a1208 0%,transparent 60%),var(--bg)}
.aurora i{position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(90px);opacity:.33;animation:float 26s ease-in-out infinite alternate}
.aurora i:nth-child(1){background:#e0a458;top:-25vmax;inset-inline-start:-15vmax}
.aurora i:nth-child(2){background:#14e0c3;bottom:-30vmax;inset-inline-end:-20vmax;opacity:.18;animation-duration:32s}
.aurora i:nth-child(3){background:#ff7a3d;top:30%;inset-inline-start:40%;width:34vmax;height:34vmax;opacity:.14;animation-duration:22s}
@keyframes float{to{transform:translate(6vmax,4vmax) scale(1.12)}}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(180deg,#000,transparent 70%)}

/* salawat line */
.salawat{text-align:center;padding:7px 12px;font-family:'Amiri','Cairo',serif;font-size:16px;letter-spacing:.3px;border-bottom:1px solid rgba(244,197,132,.15);background:linear-gradient(90deg,transparent,rgba(224,164,88,.08),transparent)}
.salawat span{background:linear-gradient(90deg,#b9853f,#ffe2a8,#e0a458,#ffe2a8,#b9853f);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:200% center}}

/* top bar */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px clamp(14px,3vw,30px);position:sticky;top:0;z-index:20;background:rgba(7,9,13,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text);min-width:0}
.brand img{width:40px;height:40px;border-radius:11px;box-shadow:0 0 0 1px rgba(244,197,132,.35),0 6px 20px rgba(224,164,88,.25)}
.brand b{display:block;font-size:16px;font-weight:900;white-space:nowrap}
.brand small{display:block;color:var(--muted);font-size:11.5px}
.top-act{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.who{color:var(--muted);font-size:13px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip{border:1px solid rgba(244,197,132,.35);background:rgba(244,197,132,.08);color:var(--gold);padding:6px 14px;border-radius:999px;font-weight:700;font-size:13px;cursor:pointer;transition:.2s}
.chip:hover{background:rgba(244,197,132,.16)}
.chip.ghost{border-color:var(--line2);background:transparent;color:var(--muted)}

main{flex:1;width:100%;max-width:1280px;margin:0 auto;padding:clamp(16px,3vw,32px) clamp(14px,3vw,28px) 40px}
.loading{display:grid;place-items:center;min-height:50vh}
.loading i{width:42px;height:42px;border-radius:50%;border:3px solid rgba(244,197,132,.2);border-top-color:var(--gold);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* buttons / inputs */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:999px;font-weight:900;font-size:14.5px;cursor:pointer;border:0;transition:transform .15s,box-shadow .2s,opacity .2s;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.go{color:#1a0f00;background:linear-gradient(135deg,var(--gold),var(--orange));box-shadow:0 10px 28px rgba(255,157,47,.32)}
.btn.go:hover{box-shadow:0 14px 36px rgba(255,157,47,.45)}
.btn.ghost{background:transparent;color:var(--teal);border:1px solid rgba(20,224,195,.45)}
.btn.soft{background:rgba(255,255,255,.06);color:var(--text);border:1px solid var(--line)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;color:var(--muted);font-weight:700}
.field input,textarea{background:rgba(0,0,0,.35);border:1px solid var(--line2);border-radius:14px;padding:13px 15px;font-size:15px;outline:none;transition:.2s;width:100%}
.field input:focus,textarea:focus{border-color:var(--gold2);box-shadow:0 0 0 4px rgba(224,164,88,.15)}
.field input.code{letter-spacing:2px;font-family:'Montserrat',monospace;text-transform:uppercase;direction:ltr;text-align:center;font-weight:700}

/* welcome / sign in */
.welcome{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(18px,3vw,40px);align-items:center;min-height:calc(100vh - 220px)}
@media(max-width:900px){.welcome{grid-template-columns:1fr}}
.hero-pic{position:relative;border-radius:28px;isolation:isolate;padding:3px;max-width:560px;width:100%;justify-self:center}
.hero-pic::before{content:"";position:absolute;inset:0;border-radius:28px;z-index:-2;background:conic-gradient(from var(--a,0deg),#ffd27a,#ff7a3d,#14e0c3,#ffd27a);animation:spinA 7s linear infinite}
.hero-pic::after{content:"";position:absolute;inset:-30px;z-index:-3;border-radius:50px;background:radial-gradient(closest-side,rgba(255,157,47,.35),transparent);filter:blur(30px)}
.hero-pic img{border-radius:25px;width:100%;aspect-ratio:1;object-fit:cover}
.hero-pic .badge{position:absolute;bottom:16px;inset-inline-start:16px;background:rgba(7,9,13,.75);backdrop-filter:blur(8px);border:1px solid rgba(244,197,132,.35);border-radius:14px;padding:9px 14px;font-size:13px}
.hero-pic .badge b{color:var(--gold);display:block;font-size:15px}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes spinA{to{--a:360deg}}
.signin h1{font-size:clamp(28px,4.2vw,48px);font-weight:900;line-height:1.25}
.signin h1 em{font-style:normal;background:linear-gradient(90deg,var(--gold),var(--orange) 60%,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 40px rgba(255,157,47,.25)}
.signin .lead{color:var(--muted);margin:12px 0 22px;line-height:1.9;font-size:15px;max-width:520px}
.panel{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015)),var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:clamp(18px,2.5vw,28px)}
.form{display:grid;gap:14px}
.form .msg{font-size:13.5px;min-height:20px;font-weight:700}
.form .msg.bad{color:var(--red)}.form .msg.ok{color:var(--green)}
.lockbox{display:flex;gap:10px;align-items:center;background:rgba(255,93,108,.1);border:1px solid rgba(255,93,108,.35);color:#ffc2c8;border-radius:14px;padding:12px 14px;font-size:14px}
.lockbox b{font-family:'Montserrat';font-size:18px;color:#fff}
.tiny{color:var(--dim);font-size:12px;line-height:1.7}

/* courses grid */
.hello{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.hello h2{font-size:clamp(22px,3vw,32px);font-weight:900}
.hello p{color:var(--muted);margin-top:4px}
.stats{display:flex;gap:10px;flex-wrap:wrap}
.stat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px 16px;min-width:110px}
.stat b{display:block;font-size:22px;font-family:'Montserrat';color:var(--gold)}
.stat span{font-size:12px;color:var(--muted)}
.courses{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.ccard{position:relative;border-radius:22px;overflow:hidden;background:var(--card);border:1px solid var(--line);cursor:pointer;transition:transform .25s,box-shadow .25s,border-color .25s;display:flex;flex-direction:column}
.ccard:hover{transform:translateY(-4px);border-color:rgba(244,197,132,.4);box-shadow:0 22px 50px rgba(0,0,0,.5),0 0 0 1px rgba(244,197,132,.15),0 0 40px rgba(224,164,88,.12)}
.ccard .cv{aspect-ratio:16/9;background:#000 center/cover no-repeat;position:relative}
.ccard .cv::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(7,9,13,.9))}
.ccard .cb{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.ccard h3{font-size:17px;font-weight:900}
.ccard p{color:var(--muted);font-size:13px;line-height:1.7;flex:1}
.ccard .meta{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.bar{height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--gold),var(--orange));border-radius:inherit;transition:width .6s}
.done-tag{position:absolute;top:12px;inset-inline-end:12px;z-index:2;background:linear-gradient(135deg,var(--gold),var(--orange));color:#1a0f00;font-weight:900;font-size:12px;border-radius:999px;padding:4px 12px}

/* watch page */
.watch{display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:start}
@media(max-width:980px){.watch{grid-template-columns:1fr}}
.back{background:none;border:0;color:var(--muted);cursor:pointer;font-weight:700;margin-bottom:12px;display:inline-flex;gap:6px;align-items:center}
.back:hover{color:var(--gold)}
.player{background:#000;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;aspect-ratio:16/9;position:relative}
.player iframe,.player video,.player #yt{position:absolute;inset:0;width:100%;height:100%;border:0}
.player .empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);background:radial-gradient(60% 70% at 50% 45%,rgba(20,224,195,.14),transparent 70%)}
.lhead{margin:16px 2px 0}
.lhead .crumb{color:var(--gold);font-size:12.5px;font-weight:700}
.lhead h2{font-size:clamp(19px,2.4vw,24px);font-weight:900;margin-top:4px}
.lhead p{color:var(--muted);margin-top:8px;line-height:1.9;font-size:14px;white-space:pre-line}
.lstate{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 13px;font-size:13px;font-weight:800}
.pill.done{background:rgba(61,220,151,.13);color:var(--green);border:1px solid rgba(61,220,151,.35)}
.pill.not{background:rgba(255,157,47,.1);color:var(--orange);border:1px solid rgba(255,157,47,.35)}
.pill.new{background:rgba(255,255,255,.05);color:var(--muted);border:1px solid var(--line)}
.watchbar{flex:1;min-width:160px}
.row{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.aside{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)),var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);overflow:hidden;position:sticky;top:84px;max-height:calc(100vh - 100px);display:flex;flex-direction:column}
@media(max-width:980px){.aside{position:static;max-height:none}}
.ahead{padding:16px 18px;border-bottom:1px solid var(--line)}
.ahead .pct{display:flex;justify-content:space-between;font-weight:900;font-size:14px;margin-bottom:8px}
.ahead .pct b{color:var(--gold);font-family:'Montserrat'}
.list{overflow:auto;padding:8px 8px 14px}
.sectitle{font-weight:900;padding:12px 10px 6px;color:var(--gold);font-size:13.5px;display:flex;justify-content:space-between;gap:8px}
.sectitle small{color:var(--dim);font-weight:700}
.les{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:12px;color:var(--muted);font-size:13.5px;cursor:pointer;transition:.18s;width:100%;background:none;border:0;text-align:start}
.les:hover{background:rgba(255,255,255,.045);color:#fff}
.les.active{background:rgba(20,224,195,.1);box-shadow:inset 3px 0 0 var(--teal);color:#fff;font-weight:700}
html[dir=rtl] .les.active{box-shadow:inset -3px 0 0 var(--teal)}
.les .ic{width:24px;height:24px;flex:none;display:grid;place-items:center;border-radius:7px;background:rgba(255,255,255,.06);font-size:12px}
.les.done .ic{background:var(--teal);color:#06231e;font-weight:900}
.les.part .ic{background:conic-gradient(var(--orange) calc(var(--p)*1%),rgba(255,255,255,.08) 0);color:#fff}
.les .t{flex:1;min-width:0}
.les .d{font-size:11.5px;color:var(--dim);font-family:'Montserrat'}

/* achievements */
.ach{margin-top:22px}
.ach h3,.notes h3{font-size:16px;font-weight:900;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.bdg{border-radius:16px;padding:14px 12px;text-align:center;background:var(--card);border:1px solid var(--line);position:relative;overflow:hidden;transition:.3s}
.bdg .e{font-size:28px;display:block;filter:grayscale(1);opacity:.35;transition:.3s}
.bdg b{display:block;font-size:13px;margin-top:6px}
.bdg span{display:block;font-size:11.5px;color:var(--dim);margin-top:2px}
.bdg.on{border-color:rgba(244,197,132,.45);background:radial-gradient(80% 90% at 50% 0%,rgba(244,197,132,.18),transparent 70%),var(--card);box-shadow:0 0 30px rgba(224,164,88,.12)}
.bdg.on .e{filter:none;opacity:1;animation:pop .6s}
.bdg.on span{color:var(--gold)}
@keyframes pop{0%{transform:scale(.4)}70%{transform:scale(1.2)}to{transform:scale(1)}}

/* notes */
.notes{margin-top:22px}
.notes textarea{min-height:90px;resize:vertical}
.nlist{display:grid;gap:8px;margin-top:12px}
.nitem{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:14px;padding:10px 13px;font-size:13.5px;line-height:1.8;white-space:pre-line}
.nitem small{display:block;color:var(--dim);font-size:11.5px}
.nitem .rep{margin-top:6px;padding-top:6px;border-top:1px dashed var(--line2);color:var(--gold)}

/* featured + footer */
.feat{position:relative;border-radius:24px;overflow:hidden;isolation:isolate;padding:20px;display:flex;align-items:center;gap:16px;margin-top:24px}
.feat::before{content:"";position:absolute;inset:-60%;z-index:-2;background:conic-gradient(from var(--a,0deg),#ffd27a,#ff7a3d,#14e0c3,#ffd27a);animation:spinA 9s linear infinite}
.feat::after{content:"";position:absolute;inset:2px;z-index:-1;border-radius:22px;background:var(--card)}
.feat .av{width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--orange));display:grid;place-items:center;font-weight:900;color:#06231e;font-size:22px;flex:none}
.feat .tag{display:inline-block;margin-bottom:4px;padding:2px 11px;border-radius:999px;background:linear-gradient(135deg,var(--gold),var(--orange));color:#1a0f00;font-weight:900;font-size:11.5px}
.feat b{font-size:16px;display:block}.feat p{color:var(--muted);font-size:13px;margin-top:2px;line-height:1.7}
.foot{text-align:center;padding:18px 14px 26px;color:var(--dim);font-size:12px;display:grid;gap:10px;justify-items:center}
.social{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.social a{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--muted);transition:.2s}
.social a:hover{color:var(--gold);border-color:rgba(244,197,132,.4);transform:translateY(-2px)}
.social svg{width:15px;height:15px;fill:currentColor}

.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,30px);opacity:0;pointer-events:none;background:#141a24;border:1px solid var(--line2);box-shadow:var(--shadow);padding:12px 18px;border-radius:14px;font-weight:700;font-size:14px;transition:.3s;z-index:60;max-width:92vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.ok{border-color:rgba(61,220,151,.45)}.toast.bad{border-color:rgba(255,93,108,.5)}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:70}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* fixes */
html,main{overflow-x:clip}
.hero-pic img{height:auto}
.form>div:empty{display:none}
@media(max-width:900px){.hero-pic{max-width:420px}.welcome{min-height:0}}