:root{
  --bg:#F6F5FE; --surface:#FFFFFF; --surface-2:#F0EEFC;
  --pri:#6D5DD3; --pri-deep:#574AB0; --pri-soft:#E7E3FB;
  --ink:#231C44; --muted:#7E78A3; --border:#E8E5F5;
  --green:#1f9d57; --red:#d83a52; --amber:#c9871f;
  --radius:18px; --shadow:0 12px 34px rgba(91,76,176,.10);
  --font:'Cairo',system-ui,'Segoe UI',Tahoma,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font);font-weight:700;border:none;cursor:pointer;border-radius:999px;padding:12px 24px;font-size:15px;transition:.2s;text-align:center}
.btn-primary{background:var(--pri);color:#fff;box-shadow:0 8px 20px rgba(109,93,211,.35)}
.btn-primary:hover{background:var(--pri-deep)}
.btn-ghost{background:#fff;border:1.5px solid var(--border);color:var(--ink)}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* nav */
.nav{position:sticky;top:0;z-index:30;background:#F6F5FE;border-bottom:1px solid var(--border);box-shadow:0 1px 0 rgba(35,28,68,.04)}
.nav-in{display:flex;align-items:center;gap:18px;height:74px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:24px;color:var(--ink)}
.logo-mark{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,#8E7DF0,var(--pri));display:grid;place-items:center;box-shadow:0 8px 18px rgba(109,93,211,.4)}
.logo-mark svg{width:24px;height:24px}
.nav-links{display:flex;gap:8px;margin-inline-start:18px;font-weight:600;font-size:15px}
.nav-links a{padding:8px 14px;border-radius:10px;color:var(--muted)}
.nav-links a:hover{background:var(--surface-2);color:var(--pri-deep)}
.nav-actions{margin-inline-start:auto;display:flex;gap:8px;align-items:center;flex-wrap:nowrap;min-width:0}
.nav-actions form{display:flex}
@media(max-width:760px){.nav-links{display:none}}
@media(max-width:560px){
  .nav-in{height:62px;gap:10px;padding:0 14px}
  .brand{font-size:18px;gap:8px}
  .brand .logo-mark{width:34px;height:34px;border-radius:10px}
  .brand .logo-mark svg{width:18px;height:18px}
  .brand img{height:32px !important}
  .nav-actions{gap:6px}
  .nav-actions .btn{padding:7px 12px;font-size:13px}
}

/* hero */
.hero{text-align:center;padding:74px 20px 54px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;width:420px;height:420px;background:radial-gradient(circle,var(--pri-soft),transparent 70%);top:-120px;inset-inline-start:50%;transform:translateX(50%);z-index:-1}
.hero .logo-mark{width:84px;height:84px;border-radius:24px;margin:0 auto 22px}
.hero .logo-mark svg{width:46px;height:46px}
.hero h1{font-size:46px;font-weight:800;margin-bottom:14px;letter-spacing:-1px}
.hero .tag{font-size:20px;color:var(--muted);max-width:580px;margin:0 auto 26px}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@media(max-width:560px){
  .hero{padding:40px 16px 32px}
  .hero .logo-mark{width:62px;height:62px;border-radius:18px;margin-bottom:14px}
  .hero .logo-mark svg{width:34px;height:34px}
  .hero h1{font-size:32px;margin-bottom:10px;letter-spacing:-.5px}
  .hero .tag{font-size:15px;line-height:1.6;margin:0 auto 18px}
}

/* section label */
.section-label{display:flex;align-items:center;gap:12px;margin:48px auto 18px;max-width:1140px;padding:0 20px}
.section-label span{background:var(--pri);color:#fff;font-weight:700;font-size:13px;padding:7px 16px;border-radius:999px}
.section-label::after{content:"";flex:1;height:2px;background:var(--border);border-radius:9px}

/* grid + cards */
.grid{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:560px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:920px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.25s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(91,76,176,.18)}
.thumb{aspect-ratio:16/10;position:relative;display:grid;place-items:center;color:#fff;text-align:center;padding:16px}
.thumb h3{font-size:20px;font-weight:800;text-shadow:0 2px 10px rgba(0,0,0,.2)}
.thumb .play{position:absolute;inset:0;display:grid;place-items:center}
.thumb .play i{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.25);backdrop-filter:blur(4px);display:grid;place-items:center;border:1.5px solid rgba(255,255,255,.6)}
.t1{background:linear-gradient(135deg,#8E7DF0,#574AB0)}
.t2{background:linear-gradient(135deg,#B07DF0,#6A2D9C)}
.t3{background:linear-gradient(135deg,#6D8DF0,#3A4FB0)}
.t4{background:linear-gradient(135deg,#7DD0F0,#2D85B0)}
.t5{background:linear-gradient(135deg,#A98EF0,#6A4FB0)}
.t6{background:linear-gradient(135deg,#F08ECB,#B02D88)}
.card-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.cat{font-size:12px;color:var(--pri);font-weight:700}
.card-title{font-weight:700;font-size:18px}
.meta{font-size:13px;color:var(--muted)}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--surface-2);color:var(--pri-deep)}
.price-row{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--border)}
.price{font-size:24px;font-weight:800}
.price .cur{font-size:13px;color:var(--muted);font-weight:600}
.old{font-size:14px;color:#B0A8C8;text-decoration:line-through;margin-inline-end:6px}

/* material detail layout */
.mdetail{display:grid;grid-template-columns:1.3fr 1fr;align-items:stretch}
@media(max-width:860px){.mdetail{grid-template-columns:1fr}}
.mdetail .media{position:relative;min-height:340px;aspect-ratio:auto;width:100%;overflow:hidden;display:grid;place-items:center;color:#fff}
@media(max-width:860px){.mdetail .media{aspect-ratio:16/10;min-height:0}}
.mdetail .info{padding:28px;min-width:0}
.buybox{background:var(--surface-2);border-radius:16px;padding:18px;margin-top:12px}

/* learn page (player + sections list) */
.learn-grid{display:grid;grid-template-columns:1fr 320px;align-items:stretch}
.learn-stage{min-width:0}
.learn-player{position:relative;background:#1a1430;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden}
.learn-player video,.learn-player audio,.learn-player iframe{width:100%;height:100%;display:block;border:0}
.learn-player .audio-pad{padding:30px;text-align:center;color:#fff;width:100%}
.learn-player .text-pad{background:#fff;color:var(--ink);padding:24px;line-height:2;width:100%;height:100%;overflow:auto}
.learn-player .wm{position:absolute;bottom:10px;inset-inline-start:12px;font-size:11px;color:rgba(255,255,255,.45);pointer-events:none}
.learn-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;flex-wrap:wrap}
.learn-meta .title{font-weight:800;font-size:16px}
.learn-meta .type{color:var(--muted);font-size:13px}
.learn-aside{background:var(--surface-2);padding:10px;overflow:auto;max-height:80vh;border-inline-start:1px solid var(--border)}
.learn-aside .sec-title{font-weight:800;font-size:14px;padding:12px 12px 8px;color:var(--pri-deep)}
.learn-aside .item{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;font-size:14px;color:var(--ink);min-height:44px}
.learn-aside .item.is-active{background:#fff;font-weight:700;box-shadow:var(--shadow)}
.learn-aside .item.is-done{color:var(--muted)}
.learn-aside .item.is-done .ttl{text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:rgba(35,28,68,.25)}
.learn-aside .item.is-partial{border:1px dashed #E6DBC6}
.learn-aside .item .ttl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.learn-aside .status-dot{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#E5E1F2;color:#9B92BB;flex:0 0 auto}
.learn-aside .item.is-done .status-dot{background:#DEF3E6;color:var(--green)}
.learn-aside .item.is-active .status-dot{background:var(--pri);color:#fff}
.learn-aside .item.is-partial .status-dot{background:#FAEFD5;color:#B8852B}
.learn-aside .now-tag,.learn-aside .done-tag,.learn-aside .partial-tag{font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px}
.learn-aside .now-tag{background:var(--pri);color:#fff}
.learn-aside .done-tag{background:#DEF3E6;color:var(--green)}
.learn-aside .partial-tag{background:#FAEFD5;color:#B8852B}

/* learn header progress meter */
.learn-progress{display:flex;align-items:center;gap:10px;margin-inline-start:auto}
.learn-progress-bar{position:relative;background:#E5E1F2;border-radius:999px;height:8px;width:160px;overflow:hidden}
.learn-progress-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--pri),var(--green));border-radius:999px;transition:width .3s}
.learn-progress-num{font-size:13px;color:var(--muted);font-weight:600;white-space:nowrap}
@media(max-width:540px){.learn-progress-bar{width:120px}}
@media(max-width:860px){
  .learn-grid{grid-template-columns:1fr}
  .learn-aside{max-height:none;border-inline-start:0;border-top:1px solid var(--border)}
  .learn-meta{padding:12px 14px}
  .learn-meta .title{font-size:15px}
}

/* auth / forms */
.auth-wrap{min-height:calc(100vh - 74px);display:grid;place-items:center;padding:40px 20px}
.auth-card{background:var(--surface);border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow);padding:34px;width:100%;max-width:440px}
.auth-card h1{font-size:26px;font-weight:800;margin-bottom:6px;text-align:center}
.auth-card .sub{color:var(--muted);text-align:center;margin-bottom:22px;font-size:15px}
.field{margin-bottom:16px}
.field label{display:block;font-weight:700;font-size:14px;margin-bottom:7px}
.field .req{color:var(--red)}
.input{width:100%;border:1.5px solid var(--border);border-radius:12px;padding:12px 14px;font-family:var(--font);font-size:15px;background:var(--surface-2);color:var(--ink);outline:none;transition:.15s}
.input:focus{border-color:var(--pri);background:#fff}
.input.error{border-color:var(--red);background:#fdf2f4}
.err{color:var(--red);font-size:13px;font-weight:600;margin-top:6px}
.hint{color:var(--muted);font-size:13px;margin-top:6px}
.checkbox{display:flex;gap:9px;align-items:flex-start;font-size:14px;color:var(--muted)}
.checkbox input{margin-top:5px}
.otp-input{text-align:center;font-size:30px;font-weight:800;letter-spacing:14px;direction:ltr}
.auth-foot{text-align:center;margin-top:18px;color:var(--muted);font-size:14px}
.auth-foot a{color:var(--pri-deep);font-weight:700}

/* alerts */
.alert{border-radius:12px;padding:12px 16px;margin-bottom:16px;font-weight:600;font-size:14px}
.alert-success{background:#E6F6EC;color:var(--green);border:1px solid #BfE6CC}
.alert-error{background:#FDECEF;color:var(--red);border:1px solid #F6C9D2}
.alert-info{background:var(--pri-soft);color:var(--pri-deep);border:1px solid var(--border)}

/* footer */
footer{background:var(--ink);color:#C8C2E4;margin-top:70px;padding:54px 0 26px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}
footer h4{color:#fff;font-weight:700;margin-bottom:14px;font-size:16px}
footer a{display:block;color:#B7B0DD;padding:5px 0;font-size:14px}
footer a:hover{color:#fff}
.pays{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.pay{height:34px;padding:0 12px;border-radius:10px;background:#fff;border:1px solid var(--border);display:flex;align-items:center;font-weight:800;font-size:13px}
.pay.mada{color:#1a8c4a}.pay.visa{color:#1a1f71}.pay.mc{color:#eb001b}.pay.apple{color:#111}.pay.stc{color:#4f008c}
.copy{border-top:1px solid rgba(255,255,255,.1);margin-top:34px;padding-top:20px;text-align:center;font-size:13px;color:#8E87B5}
.empty{text-align:center;color:var(--muted);padding:60px 20px}

/* account stats card */
.account-greeting{font-weight:800;font-size:18px;color:var(--ink);margin-bottom:14px}
.account-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.account-stats-grid > div{background:var(--surface-2);border-radius:14px;padding:14px 16px;min-width:0}
.account-stats-grid .num{font-weight:800;font-size:20px;color:var(--pri-deep);line-height:1.1;overflow-wrap:break-word}
.account-stats-grid .num .cur{font-size:12px;color:var(--muted);font-weight:600;margin-inline-start:2px}
.account-stats-grid .lbl{font-size:12px;color:var(--muted);margin-top:6px;font-weight:600}
@media(max-width:640px){.account-stats-grid{grid-template-columns:repeat(2,1fr);gap:10px}.account-stats-grid .num{font-size:18px}}

/* CMS rich-text body (terms / about / refund / contact) */
.rich-body{line-height:2;color:#3a3360;font-size:16px}
.rich-body h1,.rich-body h2,.rich-body h3,.rich-body h4{color:var(--ink);font-weight:800;margin:18px 0 10px}
.rich-body h1{font-size:28px}.rich-body h2{font-size:22px}.rich-body h3{font-size:18px}.rich-body h4{font-size:16px}
.rich-body p{margin:0 0 12px}
.rich-body ul,.rich-body ol{margin:0 0 12px;padding-inline-start:22px}
.rich-body li{margin-bottom:6px}
.rich-body a{color:var(--pri);text-decoration:underline}
.rich-body blockquote{border-inline-start:3px solid var(--pri);background:var(--surface-2);padding:10px 16px;margin:10px 0;border-radius:0 10px 10px 0;color:#4a4173}
.rich-body img{max-width:100%;border-radius:10px}
.rich-body hr{border:0;border-top:1px solid var(--border);margin:18px 0}

/* orders table */
.orders-table{width:100%;border-collapse:collapse;font-size:14px}
.orders-table th{text-align:start;padding:12px 16px;background:var(--surface-2);font-weight:700;color:var(--ink);font-size:13px}
.orders-table td{padding:14px 16px;border-top:1px solid var(--border);vertical-align:middle}
.orders-table td.muted{color:var(--muted)}
.orders-table td.actions{white-space:nowrap}
@media(max-width:640px){
  .orders-table th:nth-child(1),.orders-table td:nth-child(1){display:none}
  .orders-table th,.orders-table td{padding:10px 8px;font-size:13px}
  .orders-table td.actions a{font-size:12px}
}

/* footer socials */
.foot-socials{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.foot-socials a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff;transition:.15s}
.foot-socials a:hover{background:rgba(255,255,255,.18);transform:translateY(-1px)}
.foot-socials svg{width:18px;height:18px}
.foot-contact{margin-top:14px;display:flex;flex-direction:column;gap:6px;font-size:13px;color:rgba(255,255,255,.85)}
.foot-contact a{color:rgba(255,255,255,.85)}
.foot-contact a:hover{color:#fff}