/* ===== المعقل التفاعلية — تصميم عصري داكن ===== */
* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg:#070b14; --bg2:#0d1424; --card:#101a30; --line:#1e2c4a;
  --neon:#00ff9d; --cyan:#00c8ff; --red:#ff4d6d; --amber:#ffc857;
  --txt:#e8eefc; --muted:#8fa3c8;
  --font:'Segoe UI', Tahoma, Arial, sans-serif;
}
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--txt); font-family:var(--font); min-height:100vh; overflow-x:hidden; }

.bg-grid { position:fixed; inset:0; z-index:-2;
  background-image:linear-gradient(#14203a 1px,transparent 1px),linear-gradient(90deg,#14203a 1px,transparent 1px);
  background-size:44px 44px; mask-image:radial-gradient(ellipse at 50% 0%, #000 30%, transparent 75%); }
.bg-glow { position:fixed; z-index:-1; width:60vw; height:60vw; border-radius:50%; filter:blur(120px); opacity:.14;
  background:var(--neon); top:-25vw; right:-15vw; animation:pulse 7s ease-in-out infinite alternate; }
@keyframes pulse { to { opacity:.25; transform:scale(1.15); } }

.screen { display:none; } .screen.active { display:block; }
.hidden { display:none !important; }
.grad { background:linear-gradient(90deg,var(--neon),var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.muted { color:var(--muted); }

/* ===== الدخول ===== */
#auth-screen { min-height:100vh; align-items:center; justify-content:center; padding:20px; }
.auth-box { width:100%; max-width:420px; background:rgba(16,26,48,.85); backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:22px; padding:36px 28px; text-align:center;
  box-shadow:0 0 60px rgba(0,255,157,.08); }
.auth-box .logo { font-size:52px; }
.auth-box h1 { margin:8px 0 4px; font-size:30px; }
.auth-box h1 span { color:var(--neon); }
.tagline { color:var(--muted); font-size:14px; margin-bottom:22px; }
.tabs { display:flex; gap:8px; background:var(--bg2); border-radius:12px; padding:5px; margin-bottom:18px; }
.tab-btn { flex:1; border:none; background:transparent; color:var(--muted); padding:10px; border-radius:9px; cursor:pointer; font-weight:700; font-size:15px; }
.tab-btn.active { background:linear-gradient(90deg,var(--neon),var(--cyan)); color:#04121c; }
.auth-form { display:none; flex-direction:column; gap:12px; }
.auth-form.active { display:flex; }
input { width:100%; background:var(--bg2); border:1px solid var(--line); color:var(--txt);
  padding:13px 15px; border-radius:11px; font-size:15px; outline:none; transition:.2s; font-family:var(--font); }
input:focus { border-color:var(--neon); box-shadow:0 0 0 3px rgba(0,255,157,.12); }
.msg { margin-top:12px; font-size:14px; min-height:18px; }
.msg.err { color:var(--red); } .msg.ok { color:var(--neon); }

/* ===== أزرار ===== */
.btn-primary { background:linear-gradient(90deg,var(--neon),var(--cyan)); color:#04121c; border:none;
  padding:12px 22px; border-radius:11px; font-weight:800; font-size:15px; cursor:pointer; transition:.2s; text-decoration:none; display:inline-block; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(0,255,157,.3); }
.btn-primary.big { padding:15px 34px; font-size:17px; }
.btn-primary:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.btn-ghost { background:transparent; border:1px solid var(--line); color:var(--muted); padding:9px 16px;
  border-radius:10px; cursor:pointer; font-size:14px; transition:.2s; }
.btn-ghost:hover { border-color:var(--neon); color:var(--neon); }
.btn-ghost.wide { width:100%; margin-top:12px; }

/* ===== الهيكل ===== */
#app.active { display:block; }
#auth-screen.active { display:flex; }
.topbar { position:sticky; top:0; z-index:50; display:flex; justify-content:space-between; align-items:center;
  padding:14px 22px; background:rgba(7,11,20,.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.brand { font-weight:900; font-size:20px; }
.brand span { color:var(--neon); }
.user-chip { display:flex; align-items:center; gap:12px; font-size:14px; }
.badge { background:rgba(0,200,255,.12); color:var(--cyan); border:1px solid rgba(0,200,255,.35);
  padding:4px 12px; border-radius:20px; font-size:12px; font-weight:700; }
.badge.big { font-size:15px; padding:7px 18px; }
.points { color:var(--amber); font-weight:800; }

.sidenav { position:fixed; top:64px; bottom:0; right:0; width:210px; padding:18px 12px;
  display:flex; flex-direction:column; gap:6px; border-left:1px solid var(--line); background:rgba(13,20,36,.6); }
.nav-btn { text-align:right; background:transparent; border:none; color:var(--muted); padding:12px 16px;
  border-radius:11px; font-size:15px; cursor:pointer; transition:.15s; font-weight:600; font-family:var(--font); }
.nav-btn:hover { background:var(--card); color:var(--txt); }
.nav-btn.active { background:linear-gradient(90deg,rgba(0,255,157,.15),rgba(0,200,255,.08)); color:var(--neon); border-right:3px solid var(--neon); }

.content { margin-right:210px; padding:28px; max-width:1200px; }
.view { display:none; animation:fade .3s; } .view.active { display:block; }
@keyframes fade { from { opacity:0; transform:translateY(8px); } }

.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px; margin-bottom:18px; }
.card.center { text-align:center; }
.sec-title { margin:26px 0 12px; }

/* ===== الرئيسية ===== */
.hero { text-align:center; padding:60px 20px 40px; }
.hero h1 { font-size:clamp(30px,5vw,52px); margin-bottom:12px; }
.hero p { color:var(--muted); font-size:17px; margin-bottom:26px; }
.stats-row { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:20px; }
.stat-card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px 34px; text-align:center; min-width:130px; }
.stat-card b { display:block; font-size:30px; color:var(--neon); }
.stat-card span { color:var(--muted); font-size:13px; }
.feed { display:flex; flex-direction:column; gap:8px; }
.feed-item { background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:10px 14px; font-size:14px; }
.feed-item time { color:var(--muted); font-size:12px; display:block; margin-top:3px; }

/* ===== المسار ===== */
.path-track { display:flex; flex-direction:column; gap:16px; position:relative; }
.path-step { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px 22px; position:relative; }
.path-step::before { content:''; position:absolute; right:35px; top:-16px; height:16px; width:2px; background:var(--line); }
.path-step:first-child::before { display:none; }
.p-icon { font-size:30px; margin-bottom:6px; }
.path-step h4 { margin-bottom:4px; font-size:18px; }
.path-step p { color:var(--muted); font-size:14px; margin-bottom:8px; }
.path-step.done { border-color:rgba(0,255,157,.4); }
.path-step.done .p-icon { filter:none; }
.lesson-box { background:var(--bg2); border-radius:10px; padding:12px 16px; font-size:14px; margin-top:8px; }
.lesson-box ul { margin:8px 20px 0 0; color:var(--muted); }

/* ===== الاختبار ===== */
.quiz-progress { height:8px; background:var(--bg2); border-radius:6px; overflow:hidden; margin-bottom:10px; }
#quiz-bar { height:100%; width:0; background:linear-gradient(90deg,var(--neon),var(--cyan)); transition:.3s; }
#quiz-q { font-size:18px; font-weight:700; direction:ltr; text-align:left; }
#quiz-opts { display:flex; flex-direction:column; gap:10px; margin-top:14px; direction:ltr; }
.opt-btn { text-align:left; background:var(--bg2); border:1px solid var(--line); color:var(--txt); padding:13px 16px;
  border-radius:11px; cursor:pointer; font-size:15px; transition:.15s; }
.opt-btn:hover { border-color:var(--neon); }
.opt-btn.correct { border-color:var(--neon); background:rgba(0,255,157,.12); }
.opt-btn.wrong { border-color:var(--red); background:rgba(255,77,109,.1); }
.quiz-score { font-size:56px; font-weight:900; margin:14px 0; }

/* ===== المختبرات ===== */
.conn-banner { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.conn-banner code { display:inline-block; background:#000; color:var(--neon); padding:8px 14px; border-radius:8px; direction:ltr; margin-top:6px; font-size:14px; }
.labs-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin-top:16px; }
.lab-card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; transition:.2s; position:relative; overflow:hidden; }
.lab-card:hover { transform:translateY(-4px); border-color:var(--neon); }
.lab-card.done-card { border-color:rgba(0,255,157,.5); }
.lab-card h3 { font-size:17px; margin-bottom:4px; }
.lab-card .en { color:var(--muted); font-size:12px; direction:ltr; display:block; text-align:right; margin-bottom:10px; }
.lab-card p { font-size:13px; color:var(--muted); margin-bottom:12px; }
.lab-tags { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.tag { font-size:11px; padding:3px 10px; border-radius:14px; background:var(--bg2); border:1px solid var(--line); color:var(--muted); }
.tag.red { color:var(--red); border-color:rgba(255,77,109,.4); }
.tag.pts { color:var(--amber); border-color:rgba(255,200,87,.4); }
.lab-card .btn-primary { width:100%; }
.done-stamp { position:absolute; top:12px; left:12px; background:rgba(0,255,157,.15); color:var(--neon);
  border:1px solid var(--neon); padding:3px 12px; border-radius:14px; font-size:12px; font-weight:800; }

/* ===== غرفة المختبر ===== */
.lab-layout { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:14px; }
@media (max-width:900px) { .lab-layout { grid-template-columns:1fr; } }
.panel { background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-bottom:14px; }
.panel-head { padding:11px 16px; font-weight:800; font-size:14px; border-bottom:1px solid var(--line); background:var(--bg2);
  display:flex; justify-content:space-between; align-items:center; }
.terminal { height:280px; overflow-y:auto; background:#04070e; padding:14px; font-family:'Courier New',monospace;
  font-size:13.5px; line-height:1.7; direction:ltr; text-align:left; }
.terminal.vic { height:220px; }
.terminal .cmd { color:#fff; } .terminal .out { color:#9fb2d8; white-space:pre-wrap; }
.terminal .ok { color:var(--neon); } .terminal .bad { color:var(--red); }
.terminal .vic-effect { color:var(--amber); }
.term-input-row { display:flex; align-items:center; gap:8px; padding:10px 14px; border-top:1px solid var(--line); background:#04070e; direction:ltr; }
.prompt { font-family:monospace; color:var(--neon); font-size:13px; white-space:nowrap; }
.term-input-row input { background:transparent; border:none; font-family:monospace; font-size:13.5px; padding:6px; }
.victim-meta { display:flex; gap:14px; padding:10px 16px; font-size:12px; color:var(--muted); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.vic-browser { border-top:1px solid var(--line); }
.browser-bar { background:var(--bg2); padding:8px 14px; font-size:12px; direction:ltr; text-align:left; color:var(--muted); }
.browser-body { padding:22px; text-align:center; min-height:130px; }
.browser-body input { max-width:260px; margin:6px auto; text-align:left; direction:ltr; display:block; }
#lab-steps { margin:14px 18px; padding-right:20px; color:var(--muted); font-size:14px; line-height:2; }
#lab-steps li.done { color:var(--neon); text-decoration:line-through; }
.chat { max-height:180px; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; }
.chat .me { align-self:flex-start; background:rgba(0,200,255,.12); border-radius:12px 12px 12px 2px; padding:8px 12px; font-size:13px; }
.chat .expert { align-self:flex-end; background:rgba(0,255,157,.1); border-radius:12px 12px 2px 12px; padding:8px 12px; font-size:13px; border:1px solid rgba(0,255,157,.25); }
#expert-box { margin-top:4px; }

/* ===== المتصدرون ===== */
.board-table { width:100%; border-collapse:collapse; background:var(--card); border-radius:16px; overflow:hidden; border:1px solid var(--line); }
.board-table th, .board-table td { padding:13px 16px; text-align:right; border-bottom:1px solid var(--line); font-size:14px; }
.board-table th { background:var(--bg2); color:var(--muted); font-size:13px; }
.board-table tr.me-row { background:rgba(0,255,157,.07); }
.rank-1 { color:var(--amber); font-weight:900; }

/* ===== ملفي ===== */
.me-grid { display:grid; grid-template-columns:340px 1fr; gap:16px; }
@media (max-width:800px) { .me-grid { grid-template-columns:1fr; } }
.avatar { width:90px; height:90px; border-radius:50%; margin:0 auto 12px; display:flex; align-items:center; justify-content:center;
  font-size:40px; font-weight:900; background:linear-gradient(135deg,var(--neon),var(--cyan)); color:#04121c; }

/* ===== الجوال ===== */
@media (max-width:860px) {
  .sidenav { position:fixed; top:auto; bottom:0; right:0; left:0; width:100%; flex-direction:row;
    justify-content:space-around; padding:8px; border-left:none; border-top:1px solid var(--line); background:rgba(7,11,20,.95); }
  .nav-btn { font-size:11px; padding:9px 6px; text-align:center; flex:1; }
  .nav-btn.active { border-right:none; border-bottom:3px solid var(--neon); }
  .content { margin-right:0; padding:18px 14px 90px; }
  .topbar { padding:12px 14px; }
  .user-chip #user-name { display:none; }
}
/* زر الإرشاد */
.hint-btn { background:transparent; border:1px solid rgba(255,200,87,.45); color:var(--amber);
  font-size:11px; padding:2px 10px; border-radius:12px; cursor:pointer; margin-right:6px; font-family:var(--font); }
.hint-btn:hover { background:rgba(255,200,87,.12); }
.hint-text { color:var(--amber); font-size:13px; margin:6px 22px 4px 0; direction:ltr; }