/* ==========================================================================
   مُعلِّم (mo3llm) — الهوية البصرية: كحلي #14315F + برتقالي #F08A24
   يُحمَّل بعد style.css من شريط التنقّل الموحّد (includes/site.php)، فيعلو على ألوانه
   للشاشة فقط — لا يؤثر على الطباعة
   ========================================================================== */
@media screen {
:root{
  --brand:#14315F; --brand-2:#2E6FD0; --brand-3:#0E9F8E; --warm:#F08A24; --pink:#D64566;
  --accent:#F08A24; --accent-dark:#D9731A; --accent-soft:#FFF1E3;
  --navy:#14315F; --navy-dark:#0B1F3F; --heading:#14315F; --chip-active:#14315F;
  --grad:linear-gradient(135deg,#14315F 0%,#1D4479 100%);
  --grad-soft:linear-gradient(135deg,rgba(20,49,95,.07),rgba(46,111,208,.07));
  --bg:#F6F8FB; --surface:#FFFFFF; --surface-2:#F4F6FA; --text:#1A2233; --muted:#5B6472; --border:#E3E8F0;
  --gold:#C9650A; --gold-bright:#F08A24; --green:#0E9F6E; --danger:#E0445A;
  --shadow:0 10px 30px rgba(20,49,95,.07), 0 2px 6px rgba(20,49,95,.05);
  --shadow-lg:0 18px 45px rgba(20,49,95,.16);
}
}
@media screen and (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
  --bg:#0B1220; --surface:#121B2E; --surface-2:#18233A; --text:#E8EDF6; --muted:#A3AEC2; --border:#24314D;
  --heading:#DCE6F7; --navy:#4F7FCC; --navy-dark:#3F6DB8; --chip-bg:#18233A;
  --grad:linear-gradient(135deg,#1D4479,#2A5A9E);
  --grad-soft:linear-gradient(135deg,rgba(143,179,234,.12),rgba(143,179,234,.06));
  --shadow:0 10px 30px rgba(0,0,0,.35); --shadow-lg:0 18px 45px rgba(0,0,0,.45);
}
}
:root[data-theme="dark"]{
  --bg:#0B1220; --surface:#121B2E; --surface-2:#18233A; --text:#E8EDF6; --muted:#A3AEC2; --border:#24314D;
  --heading:#DCE6F7; --navy:#4F7FCC; --navy-dark:#3F6DB8; --chip-bg:#18233A;
  --grad:linear-gradient(135deg,#1D4479,#2A5A9E);
  --grad-soft:linear-gradient(135deg,rgba(143,179,234,.12),rgba(143,179,234,.06));
}

@media screen {
/* ---------- الأساس ---------- */
body{
  background:
    radial-gradient(900px 500px at 100% -10%, rgba(20,49,95,.07), transparent 60%),
    radial-gradient(700px 420px at -10% 10%, rgba(240,138,36,.05), transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
::selection{background:rgba(240,138,36,.25)}
.tab-btn.active{box-shadow:0 6px 16px rgba(20,49,95,.22)}
.btn-primary{box-shadow:0 8px 20px rgba(20,49,95,.2)}
.btn-primary:hover:not(:disabled){box-shadow:0 12px 26px rgba(20,49,95,.28)}
.btn-gold{background:var(--accent) !important; box-shadow:0 8px 20px rgba(240,138,36,.3)}
input:focus, select:focus, textarea:focus{box-shadow:0 0 0 4px rgba(20,49,95,.12) !important}
.opt.sel{box-shadow:0 0 0 3px rgba(20,49,95,.15) !important}
.app-header::after{background:rgba(240,138,36,.28)}

/* ---------- شريط التنقّل ---------- */
/* الشعار والاسم كاملًا (معلم + mo3llm.com) في ترويسة كل الصفحات وفي التذييل */
.site-nav .brand, .site-footer .brand{gap:12px}
.brand-txt{display:flex; flex-direction:column; line-height:1.25}
.brand-name{font-size:var(--fs-xl); font-weight:900; color:var(--heading)}
.site-nav .brand-domain, .site-footer .brand-domain{display:block !important; font-size:var(--fs-xs); font-weight:700; color:var(--muted); letter-spacing:.3px; text-align:start}
.brand-domain b{color:var(--accent); font-weight:800}
.site-nav .brand .brand-logo{width:44px; height:44px}
.site-nav .brand.brand-lg .brand-logo{width:52px; height:52px}
.nav-links a{position:relative}
.nav-links a.active{background:var(--navy); color:#fff; box-shadow:0 6px 16px rgba(20,49,95,.22)}
.nav-new{position:absolute; top:6px; inset-inline-end:4px; width:7px; height:7px; border-radius:50%; background:var(--accent)}
.nav-btn{background:var(--navy); box-shadow:0 6px 16px rgba(20,49,95,.2)}
.nav-btn:hover{background:var(--navy-dark)}
.nav-btn.accent{background:var(--accent); box-shadow:0 6px 16px rgba(240,138,36,.3)}
.nav-btn.accent:hover{background:var(--accent-dark)}
.nav-btn.ghost{background:transparent; box-shadow:none}
.nav-user .avatar{background:var(--navy)}
@media (max-width: 640px){ .site-nav .brand .brand-logo, .site-nav .brand.brand-lg .brand-logo{width:40px; height:40px} .brand-name{font-size:var(--fs-lg)} }

/* ---------- تنبيه إضافة البريد الإلكتروني ---------- */
.em-banner{display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; background:var(--accent-soft); border-bottom:1px solid #F7D2A8; color:#7A3E05; font-size:var(--fs-sm); font-weight:700; padding:8px 16px; text-align:center}
.em-banner a{background:var(--accent); color:#fff !important; text-decoration:none; border-radius:999px; padding:4px 14px; font-size:var(--fs-sm)}
.em-banner a:hover{background:var(--accent-dark)}

/* ---------- التذييل: كحلي داكن بنصوص برتقالية ---------- */
.site-footer{background:#0B1F3F; color:#C9D4E5}
.site-footer .brand, .site-footer .brand-name{color:var(--accent)}
.site-footer .brand-domain{color:#C9D4E5}
.site-footer h4{color:var(--accent)}
.site-footer .f-col a{color:#C9D4E5}
.site-footer .f-col a:hover{color:var(--accent)}
.site-footer .f-social a{border-color:rgba(240,138,36,.3)}
.f-copy{color:var(--accent); font-weight:700; border-top:1px solid rgba(240,138,36,.22)}

/* ==========================================================================
   الصفحة الرئيسية
   ========================================================================== */
/* ---------- الواجهة الكحلية ---------- */
.hero-band{background-color:#14315F; background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size:18px 18px; padding-bottom:64px}
.hero-band .hero2 h1{color:#fff}
.hero-band .hero2 h1 .hl{color:var(--accent)}
.hero-band .hero2 .lead{color:#C9D4E5}
.hero-band .hero2 .pill{color:var(--accent); background:rgba(240,138,36,.14)}
.hero-band .who{color:#fff}
.hero-band .path.p1{background:var(--accent); color:#fff}
.hero-band .path.p1:hover{background:var(--accent-dark)}
.hero-band .path.p2{background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.35); color:#fff}
.hero-band .path.p2:hover{background:rgba(255,255,255,.12)}
.hero-band .path.p2 span{color:#C9D4E5}
.hero-band .path.p2 svg{color:var(--accent)}
.hero-band .btn-p{background:var(--accent)}
.hero-band .btn-p:hover{background:var(--accent-dark)}
.hero-band .demo{border:0; box-shadow:0 20px 50px rgba(0,0,0,.25)}
/* الشريط البرتقالي أعلى الرئيسية */
.ann-bar{display:block; background:var(--accent); color:#fff !important; text-align:center; font-size:var(--fs-sm); font-weight:700; padding:8px 16px; text-decoration:none; line-height:1.6}
.ann-bar:hover{background:var(--accent-dark)}
/* الواجهة: عمود واحد وزرّان */
.hero-band .hero2.hero-solo{grid-template-columns:1fr; padding-bottom:40px}
.hero-solo .col{max-width:780px}
.hero-solo .lead{max-width:680px}
.hero-ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:6px}
.hcta{display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:12px 24px; border-radius:14px; font-size:var(--fs-md); font-weight:800; text-decoration:none}
.hcta svg{width:22px; height:22px}
.hcta.p{background:var(--accent); color:#fff} .hcta.p:hover{background:var(--accent-dark)}
.hcta.o{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.45)} .hcta.o:hover{background:rgba(255,255,255,.08)}
.hcta.o svg{color:var(--accent)}
.hero-uni{align-self:flex-start; font-size:var(--fs-sm); font-weight:700; color:#C9D4E5; text-decoration:none; border-bottom:1px dashed rgba(201,212,229,.5)}
.hero-uni:hover{color:#fff}
@media (max-width: 520px){ .hcta{flex:1 1 100%; justify-content:center} }
.stats2 .st-free b{color:var(--accent)}
.hero-band + .hp .stats2{position:relative; z-index:2; margin-top:-48px; box-shadow:var(--shadow)}
.stats2 b{color:var(--heading)}
@media (max-width: 620px){ .stats2{grid-template-columns:repeat(2,minmax(0,1fr)); padding:16px 18px} .stats2 b{font-size:22px} }

/* ---------- عناوين الأقسام والشارات ---------- */
.kick{color:#E07A12}
.sec-h a{color:var(--navy)}
.sec-head .kicker{color:#C9650A; background:var(--accent-soft)}
.b-stu{color:#14315F; background:#E8EDF5}
.b-tea{color:#1C5DB8; background:#E6F0FB}
.b-uni{color:#9A4D06; background:var(--accent-soft)}
.post .tag{color:var(--heading)}
.phone-mock .timer{color:var(--navy)}
.g1{background:#14315F} .g2{background:#2E6FD0} .g3{background:#0E9F8E} .g4{background:#F08A24}
.how .n{background:var(--navy)}

/* ---------- البطاقات: شريط علوي بلون البطاقة، أيقونة ملوّنة، علامة مائية، ورابط بسهم ---------- */
.grid4 > .card{--c:#14315F; --t:#E8EDF5; margin:0; border-radius:18px; overflow:hidden; transition:transform .2s, border-color .2s, box-shadow .2s}
.grid4 > .card:has(.ic.c1){--c:#14315F; --t:#E8EDF5}
.grid4 > .card:has(.ic.c2){--c:#2E6FD0; --t:#E6F0FB}
.grid4 > .card:has(.ic.c3){--c:#0E9F8E; --t:#E1F5F1}
.grid4 > .card:has(.ic.c4){--c:#E07A12; --t:#FFF1E3}
.grid4 > .card:has(.ic.c5){--c:#6C4BD1; --t:#EFEBFD}
.grid4 > .card::before{content:''; position:absolute; top:0; inset-inline:0; height:3px; background:var(--c)}
.grid4 > .card .ic{background:var(--t); color:var(--c)}
.grid4 > .card:has(.stretch):hover{transform:translateY(-3px); border-color:var(--c); box-shadow:var(--shadow)}
.grid4 > .card .wm{position:absolute; inset-inline-end:-16px; top:-14px; width:92px; height:92px; color:var(--c); opacity:.06; pointer-events:none}
.grid4 > .card .wm svg{width:100%; height:100%}
.grid4 > .card .btn-p, .grid4 > .card .more-link{
  margin-top:auto; display:flex; align-items:center; justify-content:space-between; width:100%;
  background:none; color:var(--c); border:0; border-top:1px dashed var(--border); border-radius:0;
  padding:12px 0 0; min-height:0; box-shadow:none; font-weight:800; font-size:var(--fs-ctl); text-decoration:none
}
.grid4 > .card .btn-p:hover{background:none}
.grid4 > .card .btn-p::after, .grid4 > .card .more-link::after, .tl-go::after{
  content:'←'; flex:none; width:26px; height:26px; border-radius:50%; background:var(--t); display:grid; place-items:center; font-size:14px; line-height:1
}
[dir="ltr"] .grid4 > .card .btn-p::after, [dir="ltr"] .grid4 > .card .more-link::after, [dir="ltr"] .tl-go::after{content:'→'}
:root[data-theme="dark"] .grid4 > .card .ic{background:rgba(255,255,255,.06)}

/* ---------- البطاقتان المميّزتان (المعمل الافتراضي والاختبارات المباشرة) ---------- */
.grid4 > .feat{
  grid-column:1 / -1; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:24px;
  background-color:#14315F; background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size:18px 18px;
  color:#fff; border-radius:20px; padding:26px 28px
}
.feat-txt{max-width:660px; position:relative; z-index:1; display:flex; flex-direction:column; gap:10px}
.feat-tags{display:flex; gap:6px; flex-wrap:wrap}
.ftag{font-size:var(--fs-xs); font-weight:700; border-radius:999px; padding:3px 12px; background:rgba(255,255,255,.12); color:#fff}
.ftag.hot{background:var(--accent)}
.ftag.live{background:#D64566}
.feat h3{margin:0; font-size:var(--fs-xl); font-weight:800; color:#fff}
.feat p{margin:0; color:#C9D4E5; font-size:var(--fs-base)}
.feat-btn{align-self:flex-start; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:10px 20px; border-radius:12px; background:var(--accent); color:#fff !important; font-weight:800; font-size:var(--fs-ctl); text-decoration:none; margin-top:4px}
.feat-btn:hover{background:var(--accent-dark)}
.feat-art{flex:none; width:124px; height:124px; border-radius:28px; background:rgba(255,255,255,.08); display:grid; place-items:center; color:var(--accent)}
.feat-art svg{width:64px; height:64px}
@media (max-width: 620px){ .feat-art{display:none} .grid4 > .feat{padding:22px 18px} }

/* ---------- قسم «جرّب بنفسك» ---------- */
.tl-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px}
.tl-card{position:relative; background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:20px; display:flex; flex-direction:column; gap:12px; overflow:hidden}
.tl-card::before{content:''; position:absolute; top:0; inset-inline:0; height:3px; background:var(--c)}
.tl-lab{--c:#6C4BD1; --t:#EFEBFD}
.tl-live{--c:#0E9F8E; --t:#E1F5F1}
.tl-head{display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap}
.tl-head > b{display:flex; align-items:center; gap:8px; font-size:var(--fs-md); font-weight:800; color:var(--heading)}
.tl-head > b svg{width:22px; height:22px; color:var(--c)}
.tl-badge{font-size:var(--fs-xs); font-weight:700; border-radius:999px; padding:3px 10px; background:var(--t); color:var(--c)}
.tl-dot{display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-sm); font-weight:800; color:#D64566}
.tl-dot i{width:8px; height:8px; border-radius:50%; background:#D64566; animation:tlpulse 1.2s infinite}
@keyframes tlpulse{50%{opacity:.25}}
#tlWave{width:100%; height:150px; border-radius:14px; background:var(--t); display:block}
.tl-ctrls{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.tl-ctrls label{display:flex; flex-direction:column; gap:6px; font-size:var(--fs-sm); color:var(--muted)}
.tl-ctrls label b{color:var(--heading)}
.tl-ctrls input{width:100%; accent-color:var(--accent); min-height:28px}
.tl-law{font-size:var(--fs-ctl); font-weight:700; color:var(--heading)}
.tl-law small{color:var(--muted); font-weight:500; font-size:var(--fs-xs)}
.tl-q{font-size:var(--fs-md); font-weight:700; margin:0}
.tl-opts{display:flex; flex-direction:column; gap:6px}
.tl-opt{display:flex; justify-content:space-between; align-items:center; border:1px solid var(--border); border-radius:12px; padding:9px 12px; font-size:var(--fs-base); position:relative; overflow:hidden}
.tl-opt i{position:absolute; top:0; bottom:0; inset-inline-start:0; width:0; background:var(--surface-2); transition:width .5s}
.tl-opt.ok i{background:var(--t)}
.tl-opt span, .tl-opt b{position:relative; z-index:1}
.tl-opt b{color:var(--muted); font-size:var(--fs-sm)}
.tl-opt.ok b{color:var(--c)}
.tl-opt.ok.done{border-color:var(--c)}
.tl-meta{display:flex; justify-content:space-between; gap:8px; font-size:var(--fs-sm); color:var(--muted)}
.tl-meta b{color:var(--heading)}
.tl-note{font-size:var(--fs-xs); color:var(--muted); margin:0}
.tl-go{margin-top:auto; display:flex; justify-content:space-between; align-items:center; border-top:1px dashed var(--border); padding-top:12px; color:var(--c); font-weight:800; font-size:var(--fs-ctl); text-decoration:none}
@media (max-width: 520px){ .tl-ctrls{grid-template-columns:1fr} }
@media (prefers-reduced-motion: reduce){ .tl-dot i{animation:none} .grid4 > .card{transition:none} }
}