/* ===== RV Trading Academy — theme (RTL, dark/light, brand) ===== */
:root{
  --deep:#4b0d87; --mid:#964bcc; --light:#b567ff; --darkp:#280d42;
  --white:#ffffff;
  /* dark mode (default) */
  --bg:#15111f; --bg2:#1c1729; --card:#241d36; --card2:#2b2342; --well:#17121f;
  --text:#f4eefc; --muted:#b3a3d2; --line:#352c4f; --accent:var(--light);
  --grad:linear-gradient(135deg,#6a1bb0,#b567ff);
  --shadow:0 10px 40px rgba(0,0,0,.45);
  --radius:16px;
}
:root[data-theme="light"]{
  --bg:#f4f1fb; --bg2:#ffffff; --card:#ffffff; --card2:#f7f3fe; --well:#f1ebfb;
  --text:#241f33; --muted:#6b5f86; --line:#e7defa; --accent:var(--deep);
  --grad:linear-gradient(135deg,#6a1bb0,#9a4ee0);
  --shadow:0 10px 30px rgba(75,13,135,.12);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  direction:rtl;
  font-family:"Heebo",Arial,sans-serif;
  background:
    radial-gradient(900px 500px at 100% -5%, rgba(124,42,196,.18), transparent 60%),
    radial-gradient(700px 500px at 0% 0%, rgba(181,103,255,.10), transparent 55%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text); min-height:100vh;
}
a{color:var(--accent);text-decoration:none}
button{font-family:inherit;cursor:pointer}
.hidden{display:none !important}

/* ---------- Auth ---------- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
.auth-card{width:100%;max-width:430px;background:var(--card);border:1px solid var(--line);
  border-radius:22px;padding:38px 34px;box-shadow:var(--shadow);text-align:center}
.auth-card img.logo{height:92px;margin-bottom:6px;filter:drop-shadow(0 6px 18px rgba(124,42,196,.45))}
.auth-card h1{font-size:23px;font-weight:800;margin:6px 0 2px;letter-spacing:-.3px}
.auth-card p.sub{color:var(--muted);margin:0 0 24px;font-size:14px}
.field{text-align:right;margin-bottom:15px}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;font-weight:500}
.field input{width:100%;padding:13px 15px;border-radius:12px;border:1px solid var(--line);
  background:var(--well);color:var(--text);font-size:15px;transition:.15s}
.field input:focus{outline:none;border-color:var(--light);box-shadow:0 0 0 3px rgba(181,103,255,.18)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:13px 18px;border:none;border-radius:12px;background:var(--grad);color:#fff;
  font-size:15px;font-weight:700;margin-top:6px;box-shadow:0 6px 18px rgba(124,42,196,.35);transition:.15s}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text);box-shadow:none}
.btn.google{background:#fff;color:#222;border:1px solid #e3e3e3;box-shadow:none}
.divider{display:flex;align-items:center;gap:10px;color:var(--muted);margin:18px 0;font-size:13px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.msg{font-size:13px;margin-top:12px;min-height:18px}
.msg.err{color:#ff8a8a}.msg.ok{color:#7CF0A6}

/* ---------- Shell ---------- */
.app{display:grid;grid-template-columns:264px 1fr;min-height:100vh}
.side{background:linear-gradient(180deg,var(--bg2),var(--bg));border-left:1px solid var(--line);
  padding:20px 16px;position:sticky;top:0;height:100vh;overflow:auto}
.side .brand{display:flex;align-items:center;gap:11px;margin-bottom:22px;padding:4px 6px}
.side .brand img{height:42px;filter:drop-shadow(0 4px 12px rgba(124,42,196,.5))}
.side .brand b{font-size:15px;font-weight:800;line-height:1.1}
.nav button{display:flex;align-items:center;gap:11px;width:100%;text-align:right;background:transparent;
  border:none;color:var(--muted);padding:12px 13px;border-radius:12px;font-size:15px;font-weight:600;margin-bottom:4px;transition:.15s}
.nav button:hover{background:var(--card);color:var(--text)}
.nav button.active{background:var(--grad);color:#fff;box-shadow:0 6px 16px rgba(124,42,196,.35)}
.side .bottom{margin-top:20px;border-top:1px solid var(--line);padding-top:14px}
.main{padding:34px 44px;max-width:1500px;margin:0 auto;width:100%}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px;gap:16px}
.topbar h2{margin:0;font-size:27px;font-weight:800;letter-spacing:-.4px}
.iconbtn{background:var(--card);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:9px 13px;font-size:13.5px;font-weight:600;transition:.15s}
.iconbtn:hover{border-color:var(--light);color:var(--text)}

/* ---------- Progress ---------- */
.progress{background:linear-gradient(135deg,var(--card),var(--card2));border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 24px;margin-bottom:24px;box-shadow:var(--shadow)}
.progress b{font-size:16px}
.progress .bar{height:16px;background:var(--well);border-radius:99px;overflow:hidden;margin-top:12px}
.progress .bar > span{display:block;height:100%;background:var(--grad);width:0%;border-radius:99px;transition:width .6s ease}
.progress .pct{font-weight:800;font-size:18px;color:var(--light)}

/* ---------- Cards / lessons ---------- */
.module{margin-bottom:30px}
.module h3{font-size:16px;font-weight:800;color:var(--text);margin:0 0 14px;display:flex;align-items:center;gap:10px}
.module h3::before{content:"";width:8px;height:22px;border-radius:6px;background:var(--grad)}
.lessons{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.lesson{position:relative;background:linear-gradient(135deg,var(--card),var(--card2));border:1px solid var(--line);
  border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:12px;cursor:pointer;transition:.18s;overflow:hidden}
.lesson::after{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--grad);opacity:.0;transition:.18s}
.lesson:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(181,103,255,.4)}
.lesson:hover::after{opacity:1}
.lesson .num{width:38px;height:38px;border-radius:12px;background:var(--grad);color:#fff;display:flex;
  align-items:center;justify-content:center;font-weight:800;font-size:16px;box-shadow:0 4px 12px rgba(124,42,196,.4)}
.lesson .t{font-weight:700;font-size:15.5px;line-height:1.4;flex:1}
.badge{font-size:12px;font-weight:700;padding:4px 11px;border-radius:99px;align-self:flex-start}
.badge.done{background:rgba(124,240,166,.15);color:#7CF0A6}
.badge.prog{background:rgba(181,103,255,.16);color:var(--light)}
.badge.todo{background:var(--well);color:var(--muted)}

/* ---------- Lesson view ---------- */
.embed{position:relative;width:100%;padding-top:56.25%;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#000;box-shadow:var(--shadow)}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.section{background:linear-gradient(135deg,var(--card),var(--card2));border:1px solid var(--line);
  border-radius:var(--radius);padding:24px;margin-top:20px;box-shadow:0 4px 18px rgba(0,0,0,.15)}
.section h4{margin:0 0 16px;font-size:18px;font-weight:800}
.hw-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.hw-cta .btn{width:auto;padding:13px 26px}
.q{margin-bottom:16px}
.q label{display:block;margin-bottom:7px;font-size:14px;font-weight:500;color:var(--muted)}
.q textarea,.q input[type=text],.q input[type=number]{width:100%;padding:12px;border-radius:11px;border:1px solid var(--line);background:var(--well);color:var(--text);font-size:14.5px}
.q textarea:focus,.q input:focus{outline:none;border-color:var(--light);box-shadow:0 0 0 3px rgba(181,103,255,.16)}
.q textarea{min-height:90px;resize:vertical}
.q.check{display:flex;gap:10px;align-items:flex-start}
.q.check input{margin-top:3px;width:18px;height:18px}
.uploads-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.uploads-grid img{width:120px;height:86px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}

/* ---------- Modal / Wizard ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(10,7,18,.72);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px}
.modal{background:linear-gradient(135deg,var(--card),var(--card2));border:1px solid var(--line);border-radius:20px;padding:30px;max-width:460px;width:100%;text-align:center;box-shadow:var(--shadow)}
.modal h3{margin:0 0 8px;font-weight:800}.modal p{color:var(--muted);margin:0 0 22px}
.modal .row{display:flex;gap:10px}
/* wizard */
.wiz{max-width:560px;text-align:right}
.wiz .wtop{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.wiz .step{font-size:13px;color:var(--muted);font-weight:600}
.wiz .wbar{height:7px;background:var(--well);border-radius:99px;overflow:hidden;margin:10px 0 22px}
.wiz .wbar>span{display:block;height:100%;background:var(--grad);transition:width .3s}
.wiz .qprompt{font-size:19px;font-weight:700;line-height:1.5;margin-bottom:18px}
.wiz textarea,.wiz input[type=text],.wiz input[type=number]{width:100%;padding:13px;border-radius:12px;border:1px solid var(--line);background:var(--well);color:var(--text);font-size:15px}
.wiz textarea{min-height:130px;resize:vertical}
.wiz .wcheck{display:flex;gap:10px;align-items:center;background:var(--well);border:1px solid var(--line);border-radius:12px;padding:14px}
.wiz .wcheck input{width:20px;height:20px}
.wiz .wnav{display:flex;gap:10px;margin-top:22px}
.wiz .wnav .btn{width:auto;flex:1}
.wiz .closex{background:transparent;border:none;color:var(--muted);font-size:20px;line-height:1}

/* ---------- Admin table ---------- */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:right;padding:12px 10px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:700;font-size:13px}
tr:hover td{background:rgba(181,103,255,.04)}
.tag{font-size:12px;font-weight:600;padding:3px 9px;border-radius:99px;background:var(--well);color:var(--muted)}

/* ---------- My answers / notes / qna / upload ---------- */
.my-answers{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.ans-title{font-weight:800;margin-bottom:12px}
.ans-item{background:var(--well);border:1px solid var(--line);border-radius:12px;padding:13px 15px;margin-bottom:10px}
.ans-q{font-size:13px;color:var(--muted);margin-bottom:5px;font-weight:600}
.ans-a{font-size:15px;white-space:pre-wrap;line-height:1.5}
.notes-area{width:100%;min-height:90px;resize:vertical;padding:13px;border-radius:12px;border:1px solid var(--line);background:var(--well);color:var(--text);font-size:14.5px;font-family:inherit}
.notes-area:focus{outline:none;border-color:var(--light);box-shadow:0 0 0 3px rgba(181,103,255,.16)}
.row-end{margin-top:12px;display:flex;align-items:center;gap:14px}
.upload-btn{display:inline-flex;align-items:center;gap:10px;cursor:pointer;border:1.5px dashed var(--line);
  background:var(--well);color:var(--text);padding:14px 22px;border-radius:14px;font-weight:700;font-size:14.5px;transition:.15s}
.upload-btn:hover{border-color:var(--light);background:rgba(181,103,255,.06);color:var(--light)}
.upload-btn .up-ic{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;background:var(--grad);color:#fff;font-size:16px}

/* locked lessons + next nav */
.lesson.locked{opacity:.5;filter:grayscale(.3)}
.lesson.locked:hover{transform:none;box-shadow:none;border-color:var(--line)}
.lesson-nav{display:flex;justify-content:flex-start;margin-top:22px}

/* certificate */
.cert-modal{max-width:640px}
.cert{background:linear-gradient(135deg,#1b1330,#2a1750);border:2px solid var(--light);border-radius:18px;
  padding:34px 30px;text-align:center;color:#fff}
.cert .cert-sub{letter-spacing:4px;font-size:13px;color:var(--light);margin-top:8px;font-weight:700}
.cert .cert-name{font-size:30px;font-weight:900;margin:14px 0 10px}
.cert .cert-body{color:#d9ccf2;font-size:15px;line-height:1.6;max-width:460px;margin:0 auto}
.cert .cert-meta{display:flex;justify-content:space-between;margin-top:26px;color:#b9a9d6;font-size:13px}
@media print{body *{visibility:hidden!important}.cert,.cert *{visibility:visible!important}
  .cert{position:fixed;inset:0;margin:auto;width:640px;height:max-content;background:#1b1330!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}}

@media(max-width:820px){.app{grid-template-columns:1fr}.side{position:static;height:auto}.main{padding:22px 18px}}