/* ===== حياة البرمجة — ملف الأنماط الرئيسي ===== */
:root{
  --bg:#0F172A; --bg-2:#0B1220; --primary:#1E293B; --secondary:#334155;
  --accent:#22C55E; --accent-2:#4ADE80; --accent-soft:rgba(34,197,94,.12);
  --fg:#F8FAFC; --fg-soft:#CBD5E1; --muted:#272F42; --border:#475569;
  --border-soft:rgba(148,163,184,.18); --danger:#EF4444; --warn:#F59E0B; --info:#38BDF8;
  --glass:rgba(255,255,255,.05); --glass-strong:rgba(255,255,255,.08);
  --font-body:'IBM Plex Sans Arabic','IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono','IBM Plex Sans Arabic',ui-monospace,monospace;
  --r-sm:10px; --r:16px; --r-lg:22px; --shadow:0 18px 40px -18px rgba(0,0,0,.75);
  --max:1180px; --t:.25s cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:16.5px;
  line-height:1.85;font-weight:400;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(900px 600px at 85% -5%,rgba(34,197,94,.10),transparent 60%),
             radial-gradient(800px 700px at 5% 10%,rgba(56,189,248,.08),transparent 60%),var(--bg)}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.35;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,1.2rem + 3.2vw,3.4rem);line-height:1.25}
h2{font-size:clamp(1.5rem,1.1rem + 1.7vw,2.3rem)}
h3{font-size:clamp(1.05rem,.98rem + .4vw,1.3rem)}
p{margin:0 0 1rem;color:var(--fg-soft)}
a{color:inherit;text-decoration:none;transition:color var(--t),border-color var(--t),background var(--t),transform var(--t)}
strong{color:var(--fg);font-weight:600}
ul,ol{margin:0;padding:0;list-style:none}
img{max-width:100%;display:block}
button,input{font-family:inherit;font-size:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
::selection{background:var(--accent);color:#04210f}
.container{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:20px}
.container-narrow{max-width:900px}
.skip-link{position:absolute;inset-inline-start:-9999px;top:8px;z-index:200;background:var(--accent);color:#04210f;padding:10px 16px;border-radius:8px;font-weight:600}
.skip-link:focus{inset-inline-start:20px}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}.reveal{opacity:1;transform:none}}
/* ===== أزرار ===== */
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:var(--r-sm);border:1px solid transparent;
  font-weight:600;font-size:.98rem;cursor:pointer;transition:transform var(--t),box-shadow var(--t),background var(--t),border-color var(--t)}
.btn svg,.btn i{width:18px;height:18px}
.btn-primary{background:linear-gradient(135deg,var(--accent),#16A34A);color:#04210f;box-shadow:0 12px 28px -14px rgba(34,197,94,.85)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 34px -14px rgba(34,197,94,.95)}
.btn-ghost{background:var(--glass);border-color:var(--border-soft);color:var(--fg);backdrop-filter:blur(10px)}
.btn-ghost:hover{transform:translateY(-2px);background:var(--glass-strong);border-color:var(--accent)}
.icon-btn{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--glass);border:1px solid var(--border-soft);cursor:pointer;transition:all var(--t)}
.icon-btn:hover{background:var(--glass-strong);border-color:var(--accent);transform:translateY(-2px)}
.icon-btn svg,.icon-btn i{width:20px;height:20px}
.mini-link{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-weight:600;font-size:.92rem}
.mini-link svg,.mini-link i{width:16px;height:16px;transition:transform var(--t)}
.mini-link:hover svg,.mini-link:hover i{transform:translateX(-4px)}
/* ===== شريط التنقل ===== */
.nav{position:sticky;top:0;z-index:100;background:rgba(15,23,42,.72);backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--border-soft);transition:box-shadow var(--t),background var(--t)}
.nav.is-scrolled{box-shadow:0 12px 30px -22px rgba(0,0,0,.9);background:rgba(11,18,32,.86)}
.nav-inner{display:flex;align-items:center;gap:18px;min-height:70px}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand-mark{display:grid;place-items:center;filter:drop-shadow(0 6px 14px rgba(34,197,94,.25))}
.brand-text{display:flex;flex-direction:column;line-height:1.25}
.brand-text strong{font-size:1.05rem}
.brand-text small{color:#94A3B8;font-size:.72rem;font-family:var(--font-mono)}
.nav-links{display:flex;align-items:center;gap:4px;margin-inline-start:auto;flex-wrap:wrap}
.nav-links a{padding:8px 11px;border-radius:9px;font-size:.92rem;color:var(--fg-soft)}
.nav-links a:hover{background:var(--glass);color:var(--fg)}
.nav-cta{background:var(--accent-soft);color:var(--accent-2)!important;border:1px solid rgba(34,197,94,.35);font-weight:600}
.nav-cta:hover{background:rgba(34,197,94,.2)!important}
.menu-btn{display:none;margin-inline-start:auto}
.menu-btn-txt{font-size:.9rem;font-weight:600;line-height:1}
.icon-btn.menu-btn{grid-auto-flow:column}
@media (max-width:1040px){
  .menu-btn{display:inline-flex;width:auto;min-width:42px;padding:0 14px;gap:8px;align-items:center}
  .menu-btn .menu-btn-txt{display:inline}
  .nav-links{position:fixed;inset-inline:12px;top:78px;flex-direction:column;align-items:stretch;gap:2px;padding:12px;
    background:rgba(11,18,32,.97);border:1px solid var(--border-soft);border-radius:var(--r);backdrop-filter:blur(18px);
    box-shadow:var(--shadow);display:none;max-height:72vh;overflow:auto}
  .nav-links.is-open{display:flex;animation:fadeDown .28s ease}
  .nav-links a{padding:12px 14px;font-size:1rem}
}
@keyframes fadeDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
/* ===== الواجهة الترحيبية (Hero) ===== */
.hero{position:relative;padding:clamp(48px,7vw,96px) 0 40px;overflow:hidden}
.hero-glow{position:absolute;top:-220px;inset-inline-end:-160px;width:620px;height:620px;border-radius:50%;
  background:radial-gradient(circle,rgba(34,197,94,.22),transparent 65%);filter:blur(20px);pointer-events:none}
.grid-overlay{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(148,163,184,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.07) 1px,transparent 1px);
  background-size:56px 56px;mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000,transparent 75%)}
.hero-inner{position:relative;display:grid;grid-template-columns:1.1fr .95fr;gap:clamp(28px,4vw,56px);align-items:center}
.badge,.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;font-size:.8rem;font-family:var(--font-mono);
  background:var(--accent-soft);border:1px solid rgba(34,197,94,.3);color:var(--accent-2)}
.badge svg,.pill svg{width:15px;height:15px}
.hero-copy h1{margin:18px 0 14px}
.grad{background:linear-gradient(110deg,var(--accent-2),#38BDF8 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:clamp(1rem,.95rem + .35vw,1.14rem);max-width:60ch;color:#D5DEEA}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 22px}
.hero-tags{display:flex;flex-wrap:wrap;gap:10px}
.hero-tags li{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;font-size:.84rem;
  background:var(--glass);border:1px solid var(--border-soft);color:var(--fg-soft)}
.hero-tags svg,.hero-tags i{width:15px;height:15px;color:var(--accent)}
/* نافذة الكود */
.hero-visual{position:relative}
.code-window{background:linear-gradient(160deg,#141E33,#0C1526);border:1px solid var(--border-soft);border-radius:var(--r-lg);
  box-shadow:var(--shadow);overflow:hidden;transform:perspective(1200px) rotateY(-6deg);animation:floaty 7s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:perspective(1200px) rotateY(-6deg) translateY(0)}50%{transform:perspective(1200px) rotateY(-6deg) translateY(-12px)}}
.code-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:rgba(255,255,255,.04);border-bottom:1px solid var(--border-soft)}
.dot{width:11px;height:11px;border-radius:50%}
.dot.red{background:#F87171}.dot.amber{background:#FBBF24}.dot.green{background:#34D399}
.code-file{margin-inline-start:10px;font-family:var(--font-mono);font-size:.76rem;color:#94A3B8}
.code-body{margin:0;padding:18px 20px;font-family:var(--font-mono);font-size:.8rem;line-height:2;overflow-x:auto;direction:ltr;text-align:left;color:#E2E8F0}
.c-com{color:#64748B}.c-kw{color:#C084FC}.c-fn{color:#4ADE80}.c-str{color:#FCD34D}.c-num{color:#38BDF8}
.float-chip{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;font-family:var(--font-mono);font-size:.74rem;
  background:rgba(30,41,59,.9);border:1px solid var(--border-soft);backdrop-filter:blur(10px);box-shadow:var(--shadow)}
.float-chip svg,.float-chip i{width:15px;height:15px;color:var(--accent)}
.chip-1{top:-14px;inset-inline-start:-10px;animation:floaty 6s ease-in-out infinite}
.chip-2{bottom:-16px;inset-inline-end:-6px;animation:floaty 8s ease-in-out infinite .6s}
/* الإحصاءات */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(34px,5vw,58px);padding:0}
.stats li{text-align:center;padding:20px 12px;border-radius:var(--r);background:var(--glass);border:1px solid var(--border-soft);transition:transform var(--t),border-color var(--t)}
.stats li:hover{transform:translateY(-3px);border-color:rgba(34,197,94,.4)}
.stats strong{display:block;font-family:var(--font-mono);font-size:clamp(1.5rem,1.1rem + 1.4vw,2.2rem);color:var(--accent-2)}
.stats span{font-size:.82rem;color:#94A3B8}
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr}
  .code-window{transform:none;animation:none}
  .stats{grid-template-columns:repeat(2,1fr)}
  .float-chip{display:none}
}
/* ===== الأقسام العامة ===== */
.section{padding:clamp(56px,7vw,92px) 0}
.section-alt{background:linear-gradient(180deg,rgba(11,18,32,.9),rgba(15,23,42,.6));border-block:1px solid var(--border-soft)}
.sec-head{max-width:760px;margin-bottom:clamp(28px,4vw,44px)}
.sec-head h2{margin:16px 0 12px}
.sec-head p{font-size:1.02rem;margin:0}
.section-alt .sec-head{margin-inline:auto;text-align:center}
.flow-title{font-size:1.1rem;margin-bottom:22px}
/* ===== بطاقة الترحيب ===== */
.welcome-card{position:relative;padding:clamp(26px,4vw,48px);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(140deg,rgba(30,41,59,.85),rgba(15,23,42,.7));border:1px solid var(--border-soft);
  backdrop-filter:blur(14px);box-shadow:var(--shadow)}
.welcome-card::after{content:"";position:absolute;top:-120px;inset-inline-start:-100px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(34,197,94,.18),transparent 70%);pointer-events:none}
.welcome-head{position:relative;max-width:80ch}
.welcome-head h2{margin:16px 0 14px}
.welcome-head p:last-of-type{margin-bottom:0}
.welcome-sign{margin-top:18px;padding-top:16px;border-top:1px dashed var(--border-soft);font-family:var(--font-mono);font-size:.86rem;color:var(--accent-2)}
.welcome-paths{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.path-card{padding:22px;border-radius:var(--r);background:var(--glass);border:1px solid var(--border-soft);transition:transform var(--t),border-color var(--t),background var(--t)}
.path-card:hover{transform:translateY(-4px);border-color:rgba(34,197,94,.45);background:var(--glass-strong)}
.path-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent-2);margin-bottom:14px}
.path-ico svg,.path-ico i{width:22px;height:22px}
.path-card p{font-size:.92rem;margin-bottom:14px;color:#94A3B8}
@media (max-width:900px){.welcome-paths{grid-template-columns:1fr}}
/* ===== بطاقات المفاهيم ===== */
.cards-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.concept{padding:24px;border-radius:var(--r);background:var(--glass);border:1px solid var(--border-soft);transition:transform var(--t),border-color var(--t),box-shadow var(--t)}
.concept:hover{transform:translateY(-4px);border-color:rgba(34,197,94,.4);box-shadow:0 20px 40px -24px rgba(0,0,0,.9)}
.concept .ico,.tool .ico{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--accent-soft);color:var(--accent-2);margin-bottom:14px}
.concept .ico svg,.tool .ico svg,.concept .ico i,.tool .ico i{width:21px;height:21px}
.concept h3{font-size:1.05rem}
.concept p{margin:0;font-size:.9rem;color:#94A3B8}
@media (max-width:1040px){.cards-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cards-4{grid-template-columns:1fr}}
/* ===== خطوات سير العمل ===== */
.flow{margin-top:44px;padding:clamp(22px,3vw,34px);border-radius:var(--r-lg);background:var(--glass);border:1px solid var(--border-soft)}
.flow-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.flow-steps li{display:flex;gap:12px;align-items:flex-start}
.step-n{flex-shrink:0;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;font-family:var(--font-mono);font-size:.85rem;
  background:var(--accent-soft);color:var(--accent-2);border:1px solid rgba(34,197,94,.35)}
.flow-steps strong{font-size:.96rem}
.flow-steps p{margin:4px 0 0;font-size:.86rem;color:#94A3B8}
@media (max-width:900px){.flow-steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.flow-steps{grid-template-columns:1fr}}
/* ===== التبويبات (المجالات) ===== */
.tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:30px}
.tab{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;cursor:pointer;font-size:.9rem;font-weight:500;
  background:var(--glass);border:1px solid var(--border-soft);color:var(--fg-soft);transition:all var(--t)}
.tab svg,.tab i{width:17px;height:17px}
.tab:hover{transform:translateY(-2px);border-color:rgba(34,197,94,.45);color:var(--fg)}
.tab.is-active{background:linear-gradient(135deg,var(--accent),#16A34A);color:#04210f;border-color:transparent;font-weight:600;box-shadow:0 12px 26px -14px rgba(34,197,94,.9)}
.tab-panel{padding:clamp(24px,3.4vw,40px);border-radius:var(--r-lg);background:var(--glass);border:1px solid var(--border-soft);
  backdrop-filter:blur(12px);animation:fadeUp .4s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.fp-top{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:6px}
.fp-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--accent-soft);color:var(--accent-2)}
.fp-ico svg,.fp-ico i{width:26px;height:26px}
.fp-top h3{margin:0;font-size:1.35rem}
.fp-top .fp-sub{font-family:var(--font-mono);font-size:.78rem;color:#94A3B8;display:block}
.fp-desc{margin:14px 0 20px;max-width:78ch}
.fp-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:22px}
.fp-box{padding:20px;border-radius:var(--r);background:rgba(11,18,32,.55);border:1px solid var(--border-soft)}
.fp-box h4{font-size:.95rem;margin-bottom:12px;display:flex;align-items:center;gap:8px;color:var(--accent-2)}
.fp-box h4 svg,.fp-box h4 i{width:17px;height:17px}
.fp-box li{position:relative;padding-inline-start:20px;font-size:.9rem;color:#CBD5E1;margin-bottom:8px}
.fp-box li::before{content:"";position:absolute;inset-inline-start:4px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
@media (max-width:860px){.fp-grid{grid-template-columns:1fr}}
.chipset{display:flex;flex-wrap:wrap;gap:8px}
.chipset span{padding:6px 12px;border-radius:999px;font-family:var(--font-mono);font-size:.76rem;background:var(--accent-soft);color:var(--accent-2);border:1px solid rgba(34,197,94,.22)}
/* ===== أول سطر كود ===== */
.code-play{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border-soft);background:linear-gradient(160deg,#141E33,#0C1526);box-shadow:var(--shadow)}
.code-tabs{display:flex;gap:4px;padding:10px 12px;overflow-x:auto;background:rgba(255,255,255,.03);border-bottom:1px solid var(--border-soft)}
.code-tabs button{padding:8px 15px;border-radius:9px;border:1px solid transparent;background:transparent;cursor:pointer;font-family:var(--font-mono);font-size:.8rem;color:#94A3B8;white-space:nowrap;transition:all var(--t)}
.code-tabs button:hover{background:var(--glass);color:var(--fg)}
.code-tabs button.is-active{background:var(--accent-soft);color:var(--accent-2);border-color:rgba(34,197,94,.35)}
.code-panel-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--border-soft)}
.copy-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:9px;background:var(--glass);border:1px solid var(--border-soft);
  cursor:pointer;font-size:.8rem;font-weight:500;transition:all var(--t)}
.copy-btn:hover{border-color:var(--accent);color:var(--accent-2);transform:translateY(-1px)}
.copy-btn svg,.copy-btn i{width:15px;height:15px}
.code-play .code-body{max-height:340px}
.code-play .code-body .ln{display:block;white-space:pre}
/* ===== الفلترة والبحث ===== */
.filter-bar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:20px}
.search-field{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r-sm);background:var(--glass);
  border:1px solid var(--border-soft);flex:1 1 320px;max-width:460px;transition:border-color var(--t),background var(--t)}
.search-field:focus-within{border-color:var(--accent);background:var(--glass-strong)}
.search-field svg,.search-field i{width:18px;height:18px;color:#94A3B8;flex-shrink:0}
.search-field input{flex:1;background:none;border:0;outline:none;font-size:.95rem}
.search-field input::placeholder{color:#64748B}
.search-wide{max-width:100%;margin-bottom:24px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips-center{justify-content:center;margin-bottom:28px}
.chip{padding:9px 16px;border-radius:999px;cursor:pointer;font-size:.85rem;background:var(--glass);border:1px solid var(--border-soft);
  color:var(--fg-soft);transition:all var(--t)}
.chip:hover{transform:translateY(-2px);border-color:rgba(34,197,94,.4);color:var(--fg)}
.chip.is-active{background:var(--accent-soft);border-color:rgba(34,197,94,.5);color:var(--accent-2);font-weight:600}
.result-count{font-family:var(--font-mono);font-size:.8rem;color:#94A3B8;margin-bottom:18px}
.empty-msg{display:flex;align-items:center;gap:10px;padding:22px;border-radius:var(--r);background:var(--glass);border:1px dashed var(--border-soft);color:#94A3B8}
.empty-msg svg,.empty-msg i{width:20px;height:20px}
/* ===== شبكة اللغات ===== */
.lang-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.lang-card{position:relative;padding:22px;border-radius:var(--r);background:var(--glass);border:1px solid var(--border-soft);
  transition:transform var(--t),border-color var(--t),box-shadow var(--t);animation:fadeUp .35s ease}
.lang-card:hover{transform:translateY(-4px);border-color:rgba(34,197,94,.45);box-shadow:0 22px 44px -26px rgba(0,0,0,.95)}
.lang-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.lang-badge{display:grid;place-items:center;min-width:46px;height:46px;padding-inline:8px;border-radius:13px;font-family:var(--font-mono);font-weight:700;font-size:.82rem;
  background:linear-gradient(135deg,rgba(34,197,94,.18),rgba(56,189,248,.12));border:1px solid var(--border-soft);color:var(--accent-2)}
.lang-top h3{margin:0;font-size:1.1rem}
.lang-top small{display:block;font-family:var(--font-mono);font-size:.72rem;color:#94A3B8}
.lang-card p{font-size:.88rem;color:#94A3B8;margin-bottom:14px;min-height:44px}
.lang-meta{display:flex;flex-direction:column;gap:10px;padding-top:14px;border-top:1px solid var(--border-soft)}
.meter{display:flex;align-items:center;gap:10px;font-size:.76rem;color:#94A3B8;font-family:var(--font-mono)}
.meter span:first-child{min-width:74px}
.meter-bar{flex:1;height:7px;border-radius:99px;background:rgba(148,163,184,.16);overflow:hidden}
.meter-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),#38BDF8)}
.lang-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.lang-tags span{font-size:.72rem;padding:4px 10px;border-radius:999px;background:rgba(148,163,184,.12);color:#CBD5E1;font-family:var(--font-mono)}
/* ===== خارطة الطريق ===== */
.progress-wrap{margin-bottom:26px;padding:20px 22px;border-radius:var(--r);background:var(--glass);border:1px solid var(--border-soft)}
.progress-bar{height:9px;border-radius:99px;background:rgba(148,163,184,.16);overflow:hidden}
.progress-bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),#38BDF8);transition:width .5s cubic-bezier(.4,0,.2,1)}
.progress-label{margin:12px 0 0;font-family:var(--font-mono);font-size:.82rem;color:#94A3B8}
.roadmap{display:flex;flex-direction:column;gap:12px;counter-reset:step}
.rstep{border-radius:var(--r);background:var(--glass);border:1px solid var(--border-soft);overflow:hidden;transition:border-color var(--t),background var(--t)}
.rstep.is-done{border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.06)}
.rstep-head{display:flex;align-items:center;gap:14px;width:100%;padding:18px 20px;background:none;border:0;cursor:pointer;text-align:start;transition:background var(--t)}
.rstep-head:hover{background:var(--glass-strong)}
.rstep-num{flex-shrink:0;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;font-family:var(--font-mono);font-weight:700;font-size:.85rem;
  background:var(--accent-soft);color:var(--accent-2);border:1px solid rgba(34,197,94,.3)}
.rstep.is-done .rstep-num{background:var(--accent);color:#04210f}
.rstep-title{flex:1;font-weight:600;font-size:1rem}
.rstep-check{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-family:var(--font-mono);color:#94A3B8;
  padding:6px 11px;border-radius:999px;border:1px solid var(--border-soft);background:rgba(11,18,32,.5)}
.rstep-check input{accent-color:var(--accent);width:15px;height:15px;cursor:pointer}
.chev{width:19px;height:19px;color:#94A3B8;transition:transform var(--t)}
.rstep.is-open .chev{transform:rotate(180deg)}
.rstep-body{display:none;padding:0 20px 20px 20px;border-top:1px solid var(--border-soft);padding-top:16px}
.rstep.is-open .rstep-body{display:block;animation:fadeUp .3s ease}
.rstep-body p{font-size:.92rem}
.rstep-body li{position:relative;padding-inline-start:22px;font-size:.88rem;color:#CBD5E1;margin-bottom:7px}
.rstep-body li::before{content:"";position:absolute;inset-inline-start:5px;top:.75em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
@media (max-width:640px){.rstep-head{flex-wrap:wrap;gap:10px}.rstep-title{flex:1 1 100%;order:3}.rstep-check{order:2}}
/* ===== المشاريع ===== */
.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.proj{padding:24px;border-radius:var(--r);background:var(--glass);border:1px solid var(--border-soft);display:flex;flex-direction:column;gap:12px;
  transition:transform var(--t),border-color var(--t);animation:fadeUp .35s ease}
.proj:hover{transform:translateY(-4px);border-color:rgba(34,197,94,.45)}
.proj-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.proj h3{margin:0;font-size:1.05rem}
.level{font-size:.72rem;font-family:var(--font-mono);padding:5px 11px;border-radius:999px;border:1px solid}
.level.beginner{color:#4ADE80;border-color:rgba(74,222,128,.35);background:rgba(74,222,128,.1)}
.level.mid{color:#FBBF24;border-color:rgba(251,191,36,.35);background:rgba(251,191,36,.1)}
.level.advanced{color:#F472B6;border-color:rgba(244,114,182,.35);background:rgba(244,114,182,.1)}
.proj p{margin:0;font-size:.89rem;color:#94A3B8}
.proj-skills{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:12px;border-top:1px solid var(--border-soft)}
.proj-skills span{font-family:var(--font-mono);font-size:.72rem;padding:4px 10px;border-radius:999px;background:rgba(148,163,184,.12);color:#CBD5E1}
/* ===== الأدوات ===== */
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.tool{padding:24px;border-radius:var(--r);background:var(--glass);border:1px solid var(--border-soft);transition:transform var(--t),border-color var(--t)}
.tool:hover{transform:translateY(-4px);border-color:rgba(34,197,94,.4)}
.tool h3{font-size:1rem}
.tool p{margin:0;font-size:.88rem;color:#94A3B8}
/* ===== الأكورديون (المفاهيم + الأسئلة) ===== */
.accordion{display:flex;flex-direction:column;gap:10px}
.acc-item{border-radius:var(--r);background:var(--glass);border:1px solid var(--border-soft);overflow:hidden;transition:border-color var(--t)}
.acc-item.is-open{border-color:rgba(34,197,94,.42)}
.acc-head{display:flex;align-items:center;gap:14px;width:100%;padding:17px 20px;background:none;border:0;cursor:pointer;text-align:start;transition:background var(--t)}
.acc-head:hover{background:var(--glass-strong)}
.acc-head h3{margin:0;flex:1;font-size:1rem}
.acc-term{font-family:var(--font-mono);font-size:.76rem;color:var(--accent-2);background:var(--accent-soft);padding:4px 10px;border-radius:999px;flex-shrink:0}
.acc-body{display:none;padding:0 20px 18px;border-top:1px solid var(--border-soft);padding-top:15px}
.acc-item.is-open .acc-body{display:block;animation:fadeUp .28s ease}
.acc-body p{margin:0 0 10px;font-size:.92rem}
.acc-body p:last-child{margin-bottom:0}
.acc-body .acc-tip{font-family:var(--font-mono);font-size:.8rem;color:var(--accent-2)}
/* ===== افعل / تجنّب + المفاهيم الخاطئة ===== */
.do-dont{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.do-card,.dont-card{padding:26px;border-radius:var(--r-lg);border:1px solid var(--border-soft);background:var(--glass)}
.do-card{border-color:rgba(34,197,94,.3);background:linear-gradient(160deg,rgba(34,197,94,.08),rgba(15,23,42,.6))}
.dont-card{border-color:rgba(239,68,68,.28);background:linear-gradient(160deg,rgba(239,68,68,.07),rgba(15,23,42,.6))}
.do-card h3,.dont-card h3{display:flex;align-items:center;gap:10px;font-size:1.1rem}
.do-card h3 svg,.dont-card h3 svg,.do-card h3 i,.dont-card h3 i{width:21px;height:21px}
.do-card h3 svg,.do-card h3 i{color:var(--accent)}
.dont-card h3 svg,.dont-card h3 i{color:#F87171}
.do-card li,.dont-card li{position:relative;padding-inline-start:24px;font-size:.92rem;color:#CBD5E1;margin-bottom:9px}
.do-card li::before{content:"";position:absolute;inset-inline-start:4px;top:.7em;width:8px;height:8px;border-radius:2px;background:var(--accent)}
.dont-card li::before{content:"";position:absolute;inset-inline-start:4px;top:.7em;width:8px;height:8px;border-radius:2px;background:#F87171}
.myths{margin-top:38px}
.myth-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.myth{padding:22px;border-radius:var(--r);background:var(--glass);border:1px solid var(--border-soft)}
.myth p{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;margin-bottom:12px}
.myth svg,.myth i{width:18px;height:18px;flex-shrink:0;margin-top:.35em}
.myth-wrong{color:#F87171!important}
.myth-right{color:#CBD5E1!important;margin-bottom:0!important}
.myth-right svg,.myth-right i{color:var(--accent)}
@media (max-width:820px){.do-dont,.myth-grid{grid-template-columns:1fr}}
/* ===== المسارات الوظيفية ===== */
.career-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.career{padding:24px;border-radius:var(--r);background:var(--glass);border:1px solid var(--border-soft);transition:transform var(--t),border-color var(--t)}
.career:hover{transform:translateY(-4px);border-color:rgba(34,197,94,.42)}
.career-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.career-top .ico{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--accent-soft);color:var(--accent-2)}
.career-top .ico svg,.career-top .ico i{width:21px;height:21px}
.career-top h3{margin:0;font-size:1.02rem}
.career-top small{display:block;font-family:var(--font-mono);font-size:.73rem;color:#94A3B8}
.career p{font-size:.88rem;color:#94A3B8}
.career-skills{display:flex;flex-wrap:wrap;gap:6px}
.career-skills span{font-family:var(--font-mono);font-size:.72rem;padding:4px 10px;border-radius:999px;background:rgba(148,163,184,.12);color:#CBD5E1}
.career-first{margin-top:12px;padding-top:12px;border-top:1px solid var(--border-soft);font-size:.83rem;color:var(--accent-2);font-family:var(--font-mono)}
/* ===== المصادر ===== */
.res-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:16px}
.res{padding:24px;border-radius:var(--r);background:var(--glass);border:1px solid var(--border-soft);display:flex;flex-direction:column;gap:10px;transition:transform var(--t),border-color var(--t)}
.res:hover{transform:translateY(-4px);border-color:rgba(34,197,94,.42)}
.res h3{display:flex;align-items:center;gap:10px;font-size:1rem;margin:0}
.res h3 svg,.res h3 i{width:19px;height:19px;color:var(--accent)}
.res p{margin:0;font-size:.88rem;color:#94A3B8}
.tag{margin-top:auto;align-self:flex-start;font-family:var(--font-mono);font-size:.71rem;padding:5px 11px;border-radius:999px;background:var(--accent-soft);color:var(--accent-2)}
/* ===== الاختبار ===== */
.quiz-card{padding:clamp(24px,3.4vw,40px);border-radius:var(--r-lg);background:linear-gradient(150deg,rgba(30,41,59,.85),rgba(15,23,42,.7));
  border:1px solid var(--border-soft);backdrop-filter:blur(12px)}
.quiz-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.quiz-counter{font-family:var(--font-mono);font-size:.8rem;color:#94A3B8}
.quiz-track{flex:1;min-width:180px;height:7px;border-radius:99px;background:rgba(148,163,184,.16);overflow:hidden}
.quiz-track span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#38BDF8);transition:width .4s ease}
.quiz-question{font-size:clamp(1.05rem,.98rem + .6vw,1.4rem);margin-bottom:20px}
.quiz-options{display:grid;gap:10px;margin-bottom:16px}
.opt{display:flex;align-items:center;gap:12px;width:100%;padding:15px 18px;border-radius:var(--r-sm);cursor:pointer;text-align:start;
  background:var(--glass);border:1px solid var(--border-soft);transition:all var(--t);font-size:.95rem}
.opt:hover:not(:disabled){transform:translateX(-3px);border-color:rgba(34,197,94,.5);background:var(--glass-strong)}
.opt:disabled{cursor:default}
.opt .key{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;font-family:var(--font-mono);font-size:.78rem;
  background:rgba(148,163,184,.15);color:#CBD5E1;flex-shrink:0}
.opt.is-correct{border-color:var(--accent);background:rgba(34,197,94,.14)}
.opt.is-correct .key{background:var(--accent);color:#04210f}
.opt.is-wrong{border-color:#F87171;background:rgba(239,68,68,.12)}
.opt.is-wrong .key{background:#F87171;color:#2b0b0b}
.quiz-feedback{min-height:26px;font-size:.9rem;margin:0 0 14px;color:var(--accent-2);font-family:var(--font-mono)}
.quiz-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--border-soft)}
.quiz-score{margin-inline-start:auto;font-family:var(--font-mono);font-size:.85rem;color:#94A3B8}
.quiz-score strong{color:var(--accent-2);font-size:1.1rem}
.quiz-done{text-align:center;padding:20px 0}
.quiz-done h3{font-size:1.4rem}
.quiz-done .big{font-family:var(--font-mono);font-size:3rem;color:var(--accent-2);line-height:1;margin:10px 0}
/* ===== دعوة للبدء ===== */
.cta-section{padding:clamp(40px,6vw,80px) 0 96px}
.cta-card{position:relative;text-align:center;padding:clamp(32px,5vw,60px);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(140deg,rgba(34,197,94,.14),rgba(11,18,32,.85));border:1px solid rgba(34,197,94,.3)}
.cta-card::before{content:"";position:absolute;inset:auto -80px -140px auto;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,rgba(56,189,248,.16),transparent 70%);pointer-events:none}
.cta-card h2{margin-bottom:14px}
.cta-card p{max-width:70ch;margin-inline:auto;font-size:1.02rem}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}
/* ===== التذييل ===== */
.footer{background:linear-gradient(180deg,rgba(11,18,32,.6),rgba(8,13,24,.95));border-top:1px solid var(--border-soft);padding-top:52px}
.footer-inner{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px;padding-bottom:36px}
.footer-brand p{font-size:.88rem;color:#94A3B8;margin-top:16px;max-width:42ch}
.footer-col h3{font-size:.95rem;margin-bottom:14px;color:var(--fg)}
.footer-col a{display:block;font-size:.88rem;color:#94A3B8;padding:5px 0;transition:color var(--t),transform var(--t)}
.footer-col a:hover{color:var(--accent-2);transform:translateX(-4px)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;padding:18px 20px 26px;border-top:1px solid var(--border-soft)}
.footer-bottom p{margin:0;font-size:.82rem;color:#64748B;font-family:var(--font-mono)}
.footer-note{display:flex;align-items:center;gap:8px}
.footer-note svg,.footer-note i{width:15px;height:15px}
@media (max-width:900px){.footer-inner{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-inner{grid-template-columns:1fr}}
/* ===== التنبيهات وزر الأعلى ===== */
.toast-wrap{position:fixed;inset-block-end:22px;inset-inline-start:22px;z-index:150;display:flex;flex-direction:column;gap:10px}
.toast{display:flex;align-items:center;gap:10px;padding:13px 18px;border-radius:var(--r-sm);background:rgba(11,18,32,.96);
  border:1px solid rgba(34,197,94,.4);box-shadow:var(--shadow);font-size:.88rem;animation:toastIn .3s ease;backdrop-filter:blur(10px)}
.toast svg,.toast i{width:18px;height:18px;color:var(--accent)}
.toast.is-out{animation:toastOut .3s ease forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(14px)}}
.to-top{position:fixed;inset-block-end:22px;inset-inline-end:22px;z-index:140;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;cursor:pointer;
  background:linear-gradient(135deg,var(--accent),#16A34A);color:#04210f;border:0;box-shadow:0 14px 30px -14px rgba(34,197,94,.9);
  opacity:0;visibility:hidden;transform:translateY(14px);transition:all var(--t)}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
.to-top:hover{transform:translateY(-3px)}
.to-top svg,.to-top i{width:20px;height:20px}
/* ===== لمسات نهائية ===== */
.tab,.chip,.opt,.rstep-head,.acc-head,.copy-btn,.icon-btn{cursor:pointer}
.tab:focus-visible,.chip:focus-visible,.opt:focus-visible,.rstep-head:focus-visible,.acc-head:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:1180px){.container{padding-inline:18px}}
@media (max-width:640px){
  h1{font-size:1.85rem}
  .btn{padding:12px 18px;font-size:.92rem}
  .section{padding:52px 0}
  .search-field{max-width:100%}
  .toast-wrap{inset-inline:14px;inset-block-end:14px}
}
/* ===== الأيقونات (Lucide) ===== */
svg.lucide,i[data-lucide]{width:18px;height:18px;flex-shrink:0;vertical-align:-3px}
.career-first{display:flex;align-items:flex-start;gap:8px}
.career-first svg,.career-first i{width:16px;height:16px;margin-top:.42em;color:var(--accent)}
.brand-text small,.footer-note{line-height:1.7}
.no-icons i[data-lucide],.no-icons svg.lucide{display:none}
/* ===== شريط الترحيب (بداية الموقع) ===== */
.wb{position:relative;overflow:hidden;padding:18px 0;
  background:linear-gradient(90deg,rgba(34,197,94,.14),rgba(56,189,248,.10) 45%,transparent);
  border-bottom:1px solid var(--border-soft);animation:wbIn .7s ease both}
.wb::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.07) 50%,transparent 65%);
  transform:translateX(-100%);animation:wbShine 7s ease-in-out 1.2s infinite}
.wb-inner{position:relative;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.wb-badge{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;flex:none;
  background:var(--accent-soft);color:var(--accent-2);border:1px solid rgba(34,197,94,.35);
  animation:wbPulse 3.4s ease-in-out infinite}
.wb-badge svg,.wb-badge i{width:26px;height:26px}
.wb-copy{flex:1 1 320px;min-width:0}
.wb-title{margin:0;font-size:clamp(1.05rem,.95rem + .5vw,1.35rem);font-weight:700;color:var(--fg)}
.wb-name{font-weight:700;background:linear-gradient(90deg,var(--accent-2),var(--info));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.wb-sub{margin:4px 0 0;font-size:.9rem;color:#94A3B8}
.wb-go{flex:none;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;
  font-size:.88rem;font-weight:600;color:var(--accent-2);border:1px solid rgba(34,197,94,.35);background:var(--glass)}
.wb-go:hover{transform:translateY(-2px);background:var(--accent-soft);border-color:var(--accent)}
.wb-go svg,.wb-go i{width:16px;height:16px}
.no-icons .wb-badge,.no-icons .wb-go i{display:none}
@keyframes wbIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes wbShine{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
@keyframes wbPulse{0%,100%{box-shadow:0 0 0 6px rgba(34,197,94,.06)}50%{box-shadow:0 0 0 12px rgba(34,197,94,.11)}}
@media (max-width:640px){.wb-inner{gap:14px}.wb-go{width:100%;justify-content:center}}
/* ===== مكتبة الملفات ===== */
.lib-grid{display:grid;gap:18px}
.lib-card{display:grid;grid-template-columns:220px 1fr;gap:26px;padding:clamp(20px,2.6vw,30px);border-radius:var(--r-lg);
  background:linear-gradient(150deg,rgba(30,41,59,.6),rgba(15,23,42,.78));border:1px solid var(--border-soft);
  align-items:start;transition:border-color var(--t),transform var(--t)}
.lib-card:hover{border-color:rgba(34,197,94,.42);transform:translateY(-3px)}
.lib-cover{position:relative;display:flex;flex-direction:column;gap:10px;aspect-ratio:3/4;padding:22px 18px;border-radius:var(--r-sm);
  background:linear-gradient(160deg,#1E293B,#0F172A);border:1px solid rgba(148,163,184,.22);box-shadow:var(--shadow);overflow:hidden}
.lib-cover::before{content:"";position:absolute;inset:0 auto 0 0;width:6px;background:linear-gradient(180deg,var(--accent),#38BDF8)}
.lib-cover-tag{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;color:var(--accent-2)}
.lib-cover strong{font-size:1.02rem;line-height:1.65;color:var(--fg)}
.lib-cover-sub{font-size:.78rem;color:#94A3B8;margin-top:auto}
.lib-cover-pages{font-family:var(--font-mono);font-size:.72rem;color:#64748B}
.lib-body{display:flex;flex-direction:column;gap:14px}
.lib-body h3{display:flex;align-items:center;gap:10px;margin:0;font-size:1.16rem}
.lib-body h3 svg,.lib-body h3 i{width:20px;height:20px;color:var(--accent)}
.lib-body p{margin:0;font-size:.93rem;color:#94A3B8;line-height:1.95}.lib-meta{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.lib-meta li{display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:.73rem;padding:6px 12px;border-radius:999px;
  background:var(--glass);border:1px solid var(--border-soft);color:#CBD5E1}
.lib-meta svg,.lib-meta i{width:15px;height:15px;color:var(--accent)}
.lib-actions{display:flex;flex-wrap:wrap;gap:12px}
.lib-body .lib-note{display:flex;gap:8px;align-items:flex-start;font-size:.78rem;color:#64748B;line-height:1.85}
.lib-note svg,.lib-note i,.lib-tip svg,.lib-tip i{flex-shrink:0;margin-top:5px}
.lib-note svg,.lib-note i{width:15px;height:15px;color:#64748B}
.lib-tip{display:flex;gap:10px;align-items:flex-start;margin:22px 0 0;padding:16px 20px;border-radius:var(--r-sm);
  background:var(--accent-soft);border:1px solid rgba(34,197,94,.28);font-size:.88rem;color:var(--fg-soft);line-height:1.9}
.lib-tip svg,.lib-tip i{width:18px;height:18px;color:var(--accent)}
@media (max-width:760px){.lib-card{grid-template-columns:1fr;gap:20px}.lib-cover{max-width:240px;margin-inline:auto;width:100%}}

/* ===== قسم البرامج والمنصّات: برامج ومنصّات صناعة الأكواد ===== */
.chk{display:inline-flex;align-items:center;gap:9px;padding:12px 16px;border-radius:var(--r-sm);background:var(--glass);
  border:1px solid var(--border-soft);cursor:pointer;font-size:.9rem;transition:border-color var(--t),background var(--t),transform var(--t)}
.chk:hover{border-color:var(--accent);background:var(--glass-strong);transform:translateY(-2px)}
.chk input{accent-color:var(--accent);width:17px;height:17px;margin:0}
.chk span{display:inline-flex;align-items:center;gap:7px;font-weight:500}
.chk svg,.chk i{width:16px;height:16px;color:var(--accent)}
.linkish{background:none;border:0;padding:0;color:var(--accent);font:inherit;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.linkish:hover{color:var(--accent-2)}
#codeToolFilters .chip{display:inline-flex;align-items:center;gap:8px}
#codeToolFilters .chip svg,#codeToolFilters .chip i{width:16px;height:16px}
.ctool-group{display:flex;align-items:center;gap:10px;margin:34px 0 16px;font-size:1.02rem;color:var(--fg)}
.ctool-group:first-child{margin-top:0}
.ctool-group svg,.ctool-group i{width:19px;height:19px;color:var(--accent)}
.ctool-group span{font-family:var(--font-mono);font-size:.72rem;padding:3px 10px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-2);border:1px solid rgba(34,197,94,.24)}
.ctool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.ctool{position:relative;display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:var(--r);
  background:var(--glass);border:1px solid var(--border-soft);backdrop-filter:blur(12px);
  transition:transform var(--t),border-color var(--t),box-shadow var(--t);animation:fadeUp .45s ease both}
.ctool:hover{transform:translateY(-4px);border-color:rgba(34,197,94,.45);box-shadow:0 20px 40px -26px rgba(0,0,0,.95)}
.ctool-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ctool-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--accent-soft);color:var(--accent-2)}
.ctool-ico svg,.ctool-ico i{width:20px;height:20px}
.ctool-price{font-family:var(--font-mono);font-size:.7rem;padding:5px 11px;border-radius:999px;white-space:nowrap;
  border:1px solid var(--border-soft);color:#94A3B8;background:rgba(148,163,184,.09)}
.ctool-price.is-free{color:var(--accent-2);background:var(--accent-soft);border-color:rgba(34,197,94,.28)}
.ctool-price.is-paid{color:var(--warn);background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.28)}
.ctool-cat{align-self:flex-start;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.02em;color:#7C8CA5}
.ctool h3{display:block;margin:0;font-size:1.02rem;line-height:1.5}
.ctool p{margin:0;font-size:.87rem;color:#94A3B8;line-height:1.8}
.ctool-tags{display:flex;flex-wrap:wrap;gap:7px;margin:2px 0 0}
.ctool-tags li{font-family:var(--font-mono);font-size:.68rem;padding:4px 10px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid var(--border-soft);color:#A9B7CB}
.ctool-link{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:12px;color:var(--accent);
  font-weight:600;font-size:.88rem;border-top:1px solid var(--border-soft)}
.ctool-link svg,.ctool-link i{width:16px;height:16px;transition:transform var(--t)}
.ctool-link:hover{color:var(--accent-2)}
.ctool-link:hover svg,.ctool-link:hover i{transform:translate(2px,-2px)}
.ctool-note{margin-top:38px;padding:clamp(20px,3vw,30px);border-radius:var(--r-lg);
  background:linear-gradient(135deg,rgba(34,197,94,.07),rgba(56,189,248,.05));border:1px solid rgba(34,197,94,.22)}
.ctool-note h3{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:1.02rem}
.ctool-note h3 svg,.ctool-note h3 i{width:19px;height:19px;color:var(--accent)}
.tick-list{display:grid;gap:11px}
.tick-list li{position:relative;padding-inline-start:26px;font-size:.9rem;color:#A9B7CB;line-height:1.85}
.tick-list li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle,var(--accent) 45%,transparent 46%);box-shadow:0 0 0 3px rgba(34,197,94,.12)}
.tick-list strong{color:var(--fg)}
@media (max-width:640px){
  .filter-bar{align-items:stretch}
  .chk{justify-content:center}
  .ctool-grid{grid-template-columns:1fr}
}
/* إصلاح عام: أي عنصر عليه hidden يجب أن يُخفى حتى لو كان display مضبوطاً بالفئة */
[hidden]{display:none!important}