/* ═══════════════════════════════════════════════════════════
   CS251 Software Engineering — Shared Stylesheet
   Used by: Software/index.html and Software/lectures/*.html
═══════════════════════════════════════════════════════════ */

:root{
  --bg:#070c18; --bg2:#0b1120; --card:#0f172a; --card2:#141e33;
  --border:#1e3a5f; --border2:#253650;
  --cyan:#00d4ff; --cyan2:#0ea5e9; --amber:#f59e0b; --green:#10b981;
  --red:#ef4444; --purple:#8b5cf6; --pink:#f472b6; --teal:#14b8a6;
  --t1:#e2e8f0; --t2:#94a3b8; --t3:#64748b;
  --code:#0d1117; --fw:280px;
  --fh:'Outfit',sans-serif; --fb:'DM Sans','Noto Sans Arabic',sans-serif; --fc:'Fira Code',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--t1);font-family:var(--fb);line-height:1.75;overflow-x:hidden;direction:ltr}

/* ─── PROGRESS BAR ─── */
#prog-bar{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--cyan),var(--purple),var(--amber));z-index:9999;transition:width .2s;width:0}

/* ─── SIDEBAR ─── */
#sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--fw);background:var(--bg2);border-right:1px solid var(--border);overflow-y:auto;z-index:100;padding:20px 0;transition:.3s}
#sidebar::-webkit-scrollbar{width:4px}
#sidebar::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
.sb-logo{padding:12px 20px 20px;border-bottom:1px solid var(--border);margin-bottom:16px}
.sb-logo h2{font-family:var(--fh);font-size:1.1rem;color:var(--cyan);font-weight:700}
.sb-logo p{font-size:.72rem;color:var(--t3);margin-top:3px}
.sb-section{padding:6px 20px 2px;font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);margin-top:10px}
.sb-link{display:flex;align-items:center;gap:10px;padding:8px 20px;font-size:.82rem;color:var(--t2);text-decoration:none;transition:.2s;border-inline-start:3px solid transparent;position:relative}
.sb-link:hover,.sb-link.active{color:var(--t1);background:rgba(0,212,255,.06);border-inline-start-color:var(--cyan)}
.sb-dot{width:7px;height:7px;border-radius:50%;background:var(--border2);flex-shrink:0;transition:.2s}
.sb-link.active .sb-dot,.sb-link:hover .sb-dot{background:var(--cyan)}
.sb-back{display:flex;align-items:center;gap:8px;margin:10px 16px 16px;padding:8px 12px;border:1px solid var(--border);border-radius:8px;color:var(--t2);font-size:.75rem;text-decoration:none;transition:.2s}
.sb-back:hover{border-color:var(--cyan);color:var(--cyan)}

/* ─── MAIN ─── */
#main{margin-left:var(--fw);padding:0 0 80px}

/* ─── HERO ─── */
.hero{background:linear-gradient(135deg,#060d1e 0%,#0a1628 40%,#0e0a2e 100%);padding:70px 60px 60px;position:relative;overflow:hidden;border-bottom:1px solid var(--border)}
.hero::before{content:'';position:absolute;top:-100px;right:-100px;width:500px;height:500px;background:radial-gradient(circle,rgba(0,212,255,.08) 0%,transparent 70%);pointer-events:none}
.hero::after{content:'';position:absolute;bottom:-50px;left:200px;width:300px;height:300px;background:radial-gradient(circle,rgba(139,92,246,.06) 0%,transparent 70%);pointer-events:none}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.2);border-radius:20px;padding:5px 14px;font-size:.75rem;color:var(--cyan);margin-bottom:20px;font-family:var(--fc)}
.hero h1{font-family:var(--fh);font-size:2.8rem;font-weight:800;line-height:1.15;margin-bottom:14px}
.hero h1 span{background:linear-gradient(135deg,var(--cyan),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero p{color:var(--t2);max-width:700px;font-size:1rem}
.hero-stats{display:flex;gap:30px;margin-top:30px;flex-wrap:wrap}
.hstat{text-align:center}
.hstat .num{font-family:var(--fh);font-size:1.8rem;font-weight:700;color:var(--cyan)}
.hstat .lbl{font-size:.72rem;color:var(--t3);margin-top:2px}

/* ─── CONTENT ─── */
.content{padding:40px 60px}
.chapter{margin-bottom:80px}

/* ─── CHAPTER HEADER ─── */
.ch-header{display:flex;align-items:center;gap:16px;margin-bottom:32px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.ch-num{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-weight:700;font-size:1rem;flex-shrink:0}
.ch-num.blue{background:rgba(0,212,255,.12);color:var(--cyan);border:1px solid rgba(0,212,255,.25)}
.ch-num.purple{background:rgba(139,92,246,.12);color:var(--purple);border:1px solid rgba(139,92,246,.25)}
.ch-num.amber{background:rgba(245,158,11,.12);color:var(--amber);border:1px solid rgba(245,158,11,.25)}
.ch-num.green{background:rgba(16,185,129,.12);color:var(--green);border:1px solid rgba(16,185,129,.25)}
.ch-num.pink{background:rgba(244,114,182,.12);color:var(--pink);border:1px solid rgba(244,114,182,.25)}
.ch-num.red{background:rgba(239,68,68,.12);color:var(--red);border:1px solid rgba(239,68,68,.25)}
.ch-num.teal{background:rgba(20,184,166,.12);color:var(--teal);border:1px solid rgba(20,184,166,.25)}
.ch-title h2{font-family:var(--fh);font-size:1.6rem;font-weight:700}
.ch-title p{color:var(--t3);font-size:.85rem;margin-top:3px}

/* ─── TOPIC CARD ─── */
.topic{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:24px 28px;margin-bottom:20px;position:relative;overflow:hidden;transition:.25s}
.topic::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent,var(--cyan)),transparent);opacity:.6}
.topic:hover{border-color:var(--border2);transform:translateY(-1px)}
.topic-title{font-family:var(--fh);font-size:1.05rem;font-weight:600;margin-bottom:10px;color:var(--t1);display:flex;align-items:center;gap:10px}
.topic-title .icon{font-size:1.1rem}
.topic p{color:var(--t2);font-size:.9rem;margin-bottom:10px}
.topic p:last-child{margin-bottom:0}
.topic ul,.topic ol{padding-inline-start:22px;color:var(--t2);font-size:.9rem;margin:8px 0}
.topic ul li,.topic ol li{margin-bottom:4px}

/* ─── GRIDS ─── */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

/* ─── CODE BLOCK ─── */
.code-wrap{background:var(--code);border:1px solid #21262d;border-radius:10px;margin:14px 0;overflow:hidden}
.code-header{display:flex;align-items:center;justify-content:space-between;padding:9px 16px;background:rgba(255,255,255,.03);border-bottom:1px solid #21262d}
.code-dots{display:flex;gap:6px}
.code-dots span{width:10px;height:10px;border-radius:50%}
.code-dots span:nth-child(1){background:#ff5f57}
.code-dots span:nth-child(2){background:#febc2e}
.code-dots span:nth-child(3){background:#28c840}
.code-lang{font-family:var(--fc);font-size:.68rem;color:var(--t3)}
.code-wrap pre{padding:16px 20px;font-family:var(--fc);font-size:.82rem;line-height:1.75;overflow-x:auto;color:#cdd6f4;direction:ltr;text-align:left}
.code-wrap pre code{background:transparent;padding:0;color:inherit}
.kw{color:#cba6f7}.str{color:#a6e3a1}.num{color:#fab387}.fn{color:#89b4fa}
.cmt{color:#585b70;font-style:italic}.prop{color:#89dceb}.tag{color:#f38ba8}
.line-bug{background:rgba(239,68,68,.15);display:block;border-inline-start:3px solid var(--red);padding-inline-start:8px;margin-inline-start:-11px}
.line-num{color:#585b70;margin-right:14px;user-select:none;display:inline-block;width:22px;text-align:right}

/* ─── INLINE CODE ─── */
code{font-family:var(--fc);background:rgba(0,212,255,.08);color:var(--cyan);padding:2px 7px;border-radius:4px;font-size:.82em;direction:ltr;unicode-bidi:isolate;display:inline-block}

/* ─── INFO BOXES ─── */
.tip,.warn,.info,.danger{display:flex;gap:12px;padding:14px 16px;border-radius:10px;margin:14px 0;font-size:.87rem;display: flex;justify-content: flex-end;}
.tip{background:rgba(16,185,129,.08);border-inline-start:3px solid var(--green);color:#6ee7b7}
.warn{background:rgba(245,158,11,.08);border-inline-start:3px solid var(--amber);color:#fcd34d}
.info{background:rgba(0,212,255,.08);border-inline-start:3px solid var(--cyan);color:#7dd3fc;display: flex;justify-content: flex-end;}
.danger{background:rgba(239,68,68,.08);border-inline-start:3px solid var(--red);color:#fca5a5}
.tip b,.warn b,.info b,.danger b{display:block;margin-bottom:3px;font-weight:600}

/* ─── TABLE ─── */
.tbl{width:100%;border-collapse:collapse;margin:14px 0;font-size:.85rem}
.tbl th{background:var(--card2);color:var(--cyan);font-family:var(--fh);font-weight:600;padding:10px 14px;text-align:start;border-bottom:2px solid var(--border)}
.tbl td{padding:9px 14px;border-bottom:1px solid var(--border);color:var(--t2);vertical-align:top}
.tbl tr:hover td{background:rgba(255,255,255,.02)}

/* ─── BADGES ─── */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:600;font-family:var(--fc)}
.badge-cyan{background:rgba(0,212,255,.1);color:var(--cyan);border:1px solid rgba(0,212,255,.2)}
.badge-green{background:rgba(16,185,129,.1);color:var(--green);border:1px solid rgba(16,185,129,.2)}
.badge-amber{background:rgba(245,158,11,.1);color:var(--amber);border:1px solid rgba(245,158,11,.2)}
.badge-red{background:rgba(239,68,68,.1);color:var(--red);border:1px solid rgba(239,68,68,.2)}
.badge-purple{background:rgba(139,92,246,.1);color:var(--purple);border:1px solid rgba(139,92,246,.2)}
.badge-pink{background:rgba(244,114,182,.1);color:var(--pink);border:1px solid rgba(244,114,182,.2)}
.badge-teal{background:rgba(20,184,166,.1);color:var(--teal);border:1px solid rgba(20,184,166,.2)}

/* ─── QUIZ ─── */
.quiz-section{background:linear-gradient(135deg,#0c1830 0%,#0e1525 100%);border:1px solid var(--border);border-radius:16px;padding:30px;margin-top:40px}
.quiz-header{display:flex;align-items:center;gap:14px;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.quiz-icon{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,var(--purple),var(--pink));display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.quiz-header h3{font-family:var(--fh);font-size:1.2rem;font-weight:700}
.quiz-header p{font-size:.8rem;color:var(--t3)}
.q-item{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px 22px;margin-bottom:14px;transition:.2s}
.q-num{font-family:var(--fc);font-size:.7rem;color:var(--t3);margin-bottom:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.q-num .q-src{background:rgba(139,92,246,.1);color:var(--purple);padding:2px 8px;border-radius:4px;font-size:.65rem}
.q-text{font-size:.92rem;color:var(--t1);margin-bottom:14px;line-height:1.65}
.q-text strong{color:var(--cyan)}
.q-opts{display:flex;flex-direction:column;gap:8px}
.q-opt{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:.2s;font-size:.85rem;color:var(--t2);user-select:none}
.q-opt:hover{border-color:var(--border2);color:var(--t1);background:rgba(255,255,255,.02)}
.q-opt.selected{border-color:var(--cyan);background:rgba(0,212,255,.06);color:var(--t1)}
.q-opt.correct{border-color:var(--green)!important;background:rgba(16,185,129,.1)!important;color:#6ee7b7!important}
.q-opt.wrong{border-color:var(--red)!important;background:rgba(239,68,68,.1)!important;color:#fca5a5!important}
.q-opt-letter{width:24px;height:24px;border-radius:6px;background:var(--card2);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-family:var(--fc);flex-shrink:0;font-weight:600}
.q-explain{display:none;margin-top:14px;padding:14px 16px;background:rgba(0,212,255,.05);border-inline-start:3px solid var(--cyan);border-radius:0 8px 8px 0;font-size:.84rem;color:#bae6fd;line-height:1.65}
.q-explain.show{display:block;animation:fadeIn .35s ease}
.q-explain b{color:var(--cyan);display:block;margin:6px 0 3px}
.q-explain .why-wrong{margin-top:8px;padding:8px 10px;background:rgba(239,68,68,.06);border-inline-start:2px solid var(--red);border-radius:0 6px 6px 0;font-size:.8rem;color:#fca5a5}
.q-explain .why-wrong b{color:var(--red)}
.quiz-btn{display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:10px 22px;border-radius:8px;border:none;cursor:pointer;font-family:var(--fh);font-size:.85rem;font-weight:600;transition:.2s}
.btn-check{background:linear-gradient(135deg,var(--purple),var(--cyan2));color:#fff}
.btn-check:hover{opacity:.9;transform:translateY(-1px)}
.btn-reset{background:rgba(255,255,255,.06);color:var(--t2);margin-inline-start:8px;border:1px solid var(--border)}
.btn-reset:hover{background:rgba(255,255,255,.1);color:var(--t1)}
.q-score{display:none;margin-top:16px;padding:14px 18px;border-radius:10px;font-family:var(--fh);font-weight:600;text-align:center}
.q-score.good{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);color:var(--green)}
.q-score.ok{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);color:var(--amber)}
.q-score.bad{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:var(--red)}

/* ─── CHEAT SHEET ─── */
.cheat{background:var(--card2);border:1px solid var(--border);border-radius:14px;padding:22px;margin-bottom:18px}
.cheat h3{font-family:var(--fh);font-size:1rem;font-weight:700;margin-bottom:14px;color:var(--cyan);display:flex;align-items:center;gap:8px}
.cheat-item{display:flex;align-items:flex-start;gap:10px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:.85rem}
.cheat-item:last-child{border-bottom:none}
.cheat-key{min-width:180px;font-family:var(--fc);font-size:.78rem;color:var(--amber);flex-shrink:0}
.cheat-val{color:var(--t2);line-height:1.55}

/* ─── TIMELINE (NEW) ─── */
.timeline{position:relative;padding:20px 0 20px 30px}
.timeline::before{content:'';position:absolute;left:6px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--red),var(--amber),var(--cyan))}
.tl-item{position:relative;margin-bottom:22px;padding-left:20px}
.tl-item::before{content:'';position:absolute;left:-30px;top:8px;width:14px;height:14px;border-radius:50%;background:var(--card2);border:3px solid var(--accent,var(--cyan));box-shadow:0 0 0 4px rgba(0,212,255,.08)}
.tl-date{font-family:var(--fc);font-size:.78rem;color:var(--amber);margin-bottom:3px}
.tl-title{font-family:var(--fh);font-weight:600;font-size:1rem;color:var(--t1);margin-bottom:4px}
.tl-desc{font-size:.85rem;color:var(--t2);line-height:1.6}

/* ─── OVERFLOW VISUALIZER (NEW) ─── */
.overflow-viz{background:var(--code);border:1px solid #21262d;border-radius:12px;padding:24px;margin:16px 0;text-align:center}
.ov-step{display:inline-flex;flex-direction:column;align-items:center;margin:0 6px;padding:14px 18px;background:var(--card2);border:1px solid var(--border);border-radius:10px;font-family:var(--fc);min-width:140px;transition:.4s}
.ov-step.active{border-color:var(--cyan);transform:scale(1.05);box-shadow:0 6px 20px rgba(0,212,255,.18)}
.ov-step.danger{border-color:var(--red);background:rgba(239,68,68,.1);color:#fca5a5}
.ov-arrow{display:inline-block;color:var(--t3);margin:0 2px;font-size:1.3rem;vertical-align:middle}
.ov-label{font-size:.7rem;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.ov-val{font-size:1rem;font-weight:600;color:var(--cyan)}
.ov-step.danger .ov-val{color:var(--red)}
.ov-trigger{margin-top:18px;padding:10px 22px;border:none;border-radius:8px;background:linear-gradient(135deg,var(--red),var(--amber));color:#fff;font-family:var(--fh);font-weight:600;cursor:pointer;font-size:.85rem;transition:.2s}
.ov-trigger:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(245,158,11,.3)}

/* ─── COMPARISON CARDS ─── */
.compare{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:14px 0}
.cmp-card{background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:18px;position:relative;overflow:hidden}
.cmp-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent,var(--cyan))}
.cmp-card h4{font-family:var(--fh);font-size:1rem;color:var(--accent,var(--cyan));margin-bottom:10px;font-weight:700}
.cmp-card p{font-size:.84rem;color:var(--t2);line-height:1.55}

/* ─── STAGES (production stack) ─── */
.stages-wrap{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin:14px 0}
.stages-stack{display:flex;flex-direction:column-reverse;gap:8px}
.stage-row{display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--card2);border:1px solid var(--border);border-radius:10px;border-inline-start:4px solid var(--accent)}
.stage-row .stage-name{font-family:var(--fh);font-weight:600;color:var(--t1);min-width:120px}
.stage-row .stage-out{font-family:var(--fc);font-size:.78rem;color:var(--t3);margin-left:auto;text-align:right}
.stage-row.s1{--accent:var(--cyan)}
.stage-row.s2{--accent:var(--green)}
.stage-row.s3{--accent:var(--amber)}
.stage-row.s4{--accent:var(--purple)}
.stage-row.s5{--accent:var(--pink)}
.pillars{display:flex;flex-direction:column;gap:8px}
.pillar{padding:10px 14px;background:rgba(20,184,166,.08);border:1px solid rgba(20,184,166,.2);border-radius:8px;text-align:center;font-family:var(--fh);font-size:.78rem;color:var(--teal);font-weight:600}

/* ─── SWEBOK GRID ─── */
.swebok-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0}
.kw-card{background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:14px 16px;transition:.2s;border-inline-start:3px solid var(--accent,var(--cyan))}
.kw-card:hover{transform:translateY(-2px);border-color:var(--border2);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.kw-card .kw-tag{font-family:var(--fc);font-size:.7rem;color:var(--accent,var(--cyan));font-weight:600;margin-bottom:4px;letter-spacing:.05em}
.kw-card .kw-name{font-family:var(--fh);font-size:.92rem;color:var(--t1);font-weight:600;margin-bottom:6px}
.kw-card .kw-desc{font-size:.78rem;color:var(--t2);line-height:1.55}
.kw-card.added-2013{--accent:var(--amber)}
.kw-card.added-2024{--accent:var(--green)}

/* ─── FLASHCARDS ─── */
.flashcards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:14px 0}
.flashcard{perspective:1000px;height:170px;cursor:pointer}
.fc-inner{position:relative;width:100%;height:100%;transition:transform .6s;transform-style:preserve-3d}
.flashcard.flipped .fc-inner{transform:rotateY(180deg)}
.fc-front,.fc-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:14px;padding:20px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;border:1px solid var(--border)}
.fc-front{background:linear-gradient(135deg,var(--card2),var(--card));color:var(--t1)}
.fc-back{background:linear-gradient(135deg,#1a2546,#101a30);transform:rotateY(180deg);color:var(--cyan)}
.fc-q{font-family:var(--fh);font-weight:600;font-size:.95rem;line-height:1.4}
.fc-a{font-family:var(--fh);font-weight:700;font-size:1rem;line-height:1.5;color:var(--cyan)}
.fc-hint{position:absolute;bottom:10px;right:14px;font-size:.65rem;color:var(--t3);font-family:var(--fc)}

/* ─── LECTURE CARDS (LANDING) ─── */
.lectures-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:30px}
.lec-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px;transition:.25s;cursor:pointer;position:relative;overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;min-height:180px}
.lec-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent,var(--cyan)),transparent)}
.lec-card.ready{--accent:var(--cyan)}
.lec-card.ready:hover{transform:translateY(-3px);border-color:var(--cyan);box-shadow:0 10px 30px rgba(0,212,255,.15)}
.lec-card.locked{--accent:var(--t3);opacity:.55;cursor:not-allowed}
.lec-card.locked:hover{transform:none}
.lec-num{font-family:var(--fc);font-size:.72rem;color:var(--accent);margin-bottom:6px;letter-spacing:.06em}
.lec-title{font-family:var(--fh);font-size:1rem;font-weight:600;color:var(--t1);margin-bottom:8px;line-height:1.35}
.lec-meta{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font-size:.72rem;color:var(--t3)}
.lec-status{padding:3px 10px;border-radius:20px;font-size:.68rem;font-weight:600;font-family:var(--fc)}
.lec-status.ready{background:rgba(16,185,129,.12);color:var(--green);border:1px solid rgba(16,185,129,.25)}
.lec-status.locked{background:rgba(100,116,139,.12);color:var(--t3);border:1px solid rgba(100,116,139,.25)}

/* ─── BUTTONS ─── */
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:8px;text-decoration:none;font-family:var(--fh);font-size:.84rem;font-weight:600;transition:.2s;border:1px solid transparent;cursor:pointer}
.btn-primary{background:linear-gradient(135deg,var(--cyan),var(--purple));color:#fff}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,212,255,.25)}
.btn-ghost{background:rgba(255,255,255,.04);color:var(--t1);border-color:var(--border)}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:var(--border2)}

/* ─── DIAGRAM WRAPPER ─── */
.diagram{background:var(--code);border:1px solid #21262d;border-radius:12px;padding:24px;margin:16px 0;overflow-x:auto}

/* ─── SCROLL TO TOP ─── */
#scroll-top{position:fixed;bottom:20px;right:20px;width:42px;height:42px;border-radius:11px;background:rgba(0,212,255,.15);border:1px solid rgba(0,212,255,.3);color:var(--cyan);font-size:1.15rem;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:.3s;z-index:200}
#scroll-top.show{opacity:1}

/* ─── MOBILE MENU BUTTON ─── */
#menu-btn{position:fixed;bottom:20px;left:20px;z-index:200;width:46px;height:46px;border-radius:12px;background:var(--cyan);border:none;cursor:pointer;color:#000;font-size:1.3rem;display:none;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,212,255,.4)}

/* ─── ANIMATIONS ─── */
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(0,212,255,.4)}50%{box-shadow:0 0 0 14px rgba(0,212,255,0)}}
.animate{animation:fadeIn .4s ease forwards}
.topic{animation:fadeIn .35s ease forwards}

/* ─── BIDI FIX (Arabic / English mix) ─── */
/* Lecture text is mostly Arabic with embedded English terms. Keep Arabic
   containers RTL, then isolate inline English so punctuation and wrapping
   remain readable. Pure English elements are set to LTR by app.js. */
#main p, #main h1, #main h2, #main h3, #main h4, #main h5, #main h6,
#main li, #main td, #main th,
#main .topic-title, #main .ch-title p,
#main .tip div, #main .warn div, #main .info div, #main .danger div,
#main .q-text, #main .q-explain, #main .cheat-val, #main .q-opt,
#main .hero p, #main .hero-badge, #main .topic p, #main .ch-title h2,
#main .q-num, #main .tl-desc, #main .cmp-card p, #main .kw-card .kw-desc,
#main .lec-title, #main .fc-q, #main .fc-a, #main .q-score,
#main .invest-desc, #main .req-bad, #main .req-good,
#main .why-wrong, #main .pillar, #main .stage-out, #main .cheat-key{
  direction: rtl;
  unicode-bidi: isolate;
  text-align: start;
}

#main [dir="rtl"]{
  direction: rtl;
  unicode-bidi: isolate;
}

#main [dir="ltr"]{
  direction: ltr;
  unicode-bidi: isolate;
}

/* LTR isolation for inline English technical content.
   Prevents code, keywords, etc. from being reordered by bidi algorithm. */
code, .kw, .str, .num, .fn, .prop, .tag, .cmt,
.badge, .code-lang, .line-num, .q-opt-letter, .q-src,
.lec-num, .lec-status, .sb-section,
.hstat .num, .hstat .lbl, .sb-link, .sb-back,
.ov-label, .ov-val, .rs-num, .rs-name,
.kw-tag, .kw-name, .mul-val, .mul-mean,
.cheat-key, .ex-badge, .tl-date,
.uml-name, .uml-attrs, .uml-ops{
  direction: ltr;
  unicode-bidi: isolate;
}

/* Strong/emphasis inside Arabic text — keep bidi-isolated but inherit direction
   so punctuation around them renders correctly */
strong, b, em, i{
  unicode-bidi: isolate;
}

/* Ensure code blocks and pre are always LTR */
pre, .code-wrap, .diagram pre{
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}

/* Sidebar stays LTR (English nav labels) */
#sidebar{
  direction: ltr;
}

/* Quiz options often mix Arabic explanations with English terms. */
.q-opt{
  direction: rtl;
}

/* Quiz explanation and score: Arabic-first text. */
.q-explain, .q-score{
  direction: rtl;
  unicode-bidi: isolate;
  text-align: start;
}

/* Explicit safety rule for the <bdi> elements that app.js wraps bare Latin
   runs in. Defaults are already these per HTML spec, but stating them avoids
   surprises with older browsers / overrides. */
bdi{
  display: inline;
  direction: ltr;
  unicode-bidi: isolate;
}

/* ─── RESPONSIVE ─── */
@media(max-width:1100px){
  .lectures-grid{grid-template-columns:repeat(3,1fr)}
  .swebok-grid{grid-template-columns:repeat(2,1fr)}
  .compare{grid-template-columns:repeat(2,1fr)}
  .flashcards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  :root{--fw:0px}
  #sidebar{transform:translateX(-280px)}
  #sidebar.open{transform:translateX(0);width:280px;box-shadow:0 0 30px rgba(0,0,0,.6)}
  #main{margin-left:0}
  .content{padding:24px 16px}
  .hero{padding:40px 20px 32px}
  .hero h1{font-size:1.8rem}
  .grid2,.grid3,.grid4{grid-template-columns:1fr}
  .stages-wrap{grid-template-columns:1fr}
  #menu-btn{display:flex}
  .hero-stats{gap:14px}
  .tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .cheat-item{flex-direction:column;gap:5px}
  .cheat-key{min-width:auto}
  .lectures-grid{grid-template-columns:repeat(2,1fr)}
  .swebok-grid,.compare,.flashcards{grid-template-columns:1fr}
  .overflow-viz{padding:14px}
  .ov-step{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin:6px 0;width:100%}
  .ov-arrow{display:block;text-align:center;transform:rotate(90deg)}
}
@media(min-width:901px){#menu-btn{display:none!important}}
@media(max-width:500px){
  .lectures-grid{grid-template-columns:1fr}
  .hero h1{font-size:1.55rem}
}

/* ─── RTL LAYOUT OVERRIDES ─── */
html[dir="rtl"] body {
  direction: rtl;
}
html[dir="rtl"] #sidebar {
  left: auto;
  right: 0;
  border-right: none;
  border-left: 1px solid var(--border);
  direction: ltr;
}
html[dir="rtl"] #main {
  margin-left: 0;
  margin-right: var(--fw);
}
html[dir="rtl"] #prog-bar {
  left: auto;
  right: 0;
}
html[dir="rtl"] #scroll-top {
  right: auto;
  left: 20px;
}
html[dir="rtl"] #menu-btn {
  left: auto;
  right: 20px;
}
html[dir="rtl"] .hero::before {
  right: auto;
  left: -100px;
}
html[dir="rtl"] .hero::after {
  left: auto;
  right: 200px;
}
html[dir="rtl"] .timeline {
  padding: 20px 30px 20px 0;
}
html[dir="rtl"] .timeline::before {
  left: auto;
  right: 6px;
}
html[dir="rtl"] .tl-item {
  padding-left: 0;
  padding-right: 20px;
}
html[dir="rtl"] .tl-item::before {
  left: auto;
  right: -30px;
}
html[dir="rtl"] .q-explain {
  border-radius: 8px 0 0 8px;
}
html[dir="rtl"] .q-explain .why-wrong {
  border-radius: 8px 0 0 8px;
}
html[dir="rtl"] .fc-hint {
  right: auto;
  left: 14px;
}
@media(max-width:900px){
  html[dir="rtl"] #sidebar {
    transform: translateX(280px);
  }
  html[dir="rtl"] #sidebar.open {
    transform: translateX(0);
  }
  html[dir="rtl"] #main {
    margin-right: 0;
  }
}