/* ==========================================
   Toolsfox.com — Main CSS (مطابق للصورة)
   ========================================== */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#1a1a2e;--bg2:#111827;--bg3:#1f2937;--bg4:#374151;
  --orange:#f97316;--orange2:#fb923c;
  --text:#f9fafb;--text2:#9ca3af;--text3:#6b7280;
  --border:#ffffff14;--border2:#ffffff1f;
  --font:'Cairo',sans-serif;--mono:'JetBrains Mono',monospace;
  --radius:10px;
}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.container{max-width:1100px;margin:0 auto;padding:0 1.5rem}

/* ---- NAV ---- */
nav{background:var(--bg2);border-bottom:1px solid var(--border);padding:0 1.5rem;
    display:flex;align-items:center;justify-content:space-between;height:52px;
    position:sticky;top:0;z-index:100}
.nav-logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.98rem;color:var(--text);text-decoration:none}
.nav-logo-icon{width:28px;height:28px;background:linear-gradient(135deg,#f97316,#ef4444);
               border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.85rem}
.nav-links{display:flex;gap:1.8rem;list-style:none}
.nav-links a{color:var(--text2);font-size:.8rem;font-weight:600;letter-spacing:.3px;transition:color .2s}
.nav-links a:hover{color:var(--text)}
.nav-right{display:flex;align-items:center;gap:.7rem}
.nav-search{background:var(--bg3);border:1px solid var(--border2);border-radius:6px;
            padding:5px 10px;color:var(--text2);font-size:.8rem;outline:none;width:110px;font-family:var(--font)}
.btn-signup{background:var(--orange);color:#fff;border:none;padding:6px 16px;border-radius:6px;
            font-family:var(--font);font-size:.8rem;font-weight:700;cursor:pointer;transition:opacity .2s}
.btn-signup:hover{opacity:.85}

/* ---- HERO ---- */
.hero{padding:3.5rem 1.5rem 2rem;max-width:1100px;margin:0 auto}
.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.hero-left h1{font-size:2.5rem;font-weight:900;line-height:1.2;color:var(--text);margin-bottom:1rem}
.hero-left p{color:var(--text2);font-size:.92rem;line-height:1.8;margin-bottom:1.6rem}
.hero-btns{display:flex;gap:.8rem;flex-wrap:wrap}
.btn-orange{background:var(--orange);color:#fff;border:none;padding:10px 22px;border-radius:8px;
            font-family:var(--font);font-weight:700;font-size:.85rem;cursor:pointer;
            transition:opacity .2s;display:inline-block}
.btn-orange:hover{opacity:.85}
.btn-outline{background:transparent;color:var(--text);border:2px solid var(--border2);padding:8px 22px;
             border-radius:8px;font-family:var(--font);font-weight:700;font-size:.85rem;
             cursor:pointer;transition:border-color .2s;display:inline-block}
.btn-outline:hover{border-color:var(--orange);color:var(--orange)}
.hero-note{font-size:.72rem;color:var(--text3);margin-top:.5rem;display:block}

/* ---- DIAGRAM ---- */
.hero-diagram{background:var(--bg2);border:1px solid var(--border2);border-radius:12px;padding:1.4rem}
.diag-top,.diag-bot{display:flex;align-items:center;justify-content:center;gap:.5rem}
.diag-arrows{display:flex;justify-content:space-around;padding:0 1.5rem;margin:.3rem 0;color:var(--orange);font-size:.9rem}
.d-node{background:var(--bg3);border:1px solid var(--border2);border-radius:10px;
        padding:10px 12px;display:flex;flex-direction:column;align-items:center;gap:4px;
        font-size:.68rem;color:var(--text2);font-weight:600;min-width:70px;text-align:center}
.d-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;
        font-size:1rem;font-weight:700}
.ic-n8n{background:var(--orange);color:#fff;font-size:.72rem}
.ic-react{background:#0d1f2d;border:1px solid #61dafb55;color:#61dafb}
.ic-cloud{background:#1e3a5f;border:1px solid #3b82f655;color:#60a5fa}
.ic-html{background:#7c2d12;border:1px solid #f9731655;color:#fb923c;font-size:.6rem;font-weight:900}
.ic-sync{background:var(--bg3);border:1px solid var(--border2);color:var(--text2);font-size:.9rem}
.d-arr{color:var(--orange);font-size:.85rem;flex-shrink:0}
.code-box{background:#0f172a;border:1px solid #1e293b;border-radius:8px;padding:10px 12px;
          font-family:var(--mono);font-size:.7rem;color:#7dd3fc;line-height:1.7;margin-top:1rem;
          white-space:pre-wrap}
.ck{color:var(--orange)}.cs{color:#86efac}.cc{color:var(--text3)}

/* ---- 3 COLUMNS ---- */
.three-cols-section{padding:0 1.5rem 2.5rem}
.three-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;max-width:1100px;margin:0 auto}
.col-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:1.3rem;overflow:hidden}
.col-head{display:flex;align-items:center;gap:8px;margin-bottom:1rem;padding-bottom:.8rem;border-bottom:1px solid var(--border)}
.col-icon{font-size:1.2rem}
.col-title{font-size:.88rem;font-weight:900;color:var(--text);line-height:1.3;flex:1}
.col-head-badge{font-size:.75rem;opacity:.5}
.prompt-badge{background:var(--bg3);color:var(--text2);border:1px solid var(--border2);
              border-radius:4px;padding:2px 7px;font-size:.62rem;font-weight:700;opacity:1}
.col-item{display:flex;align-items:center;gap:8px;padding:.65rem 0;border-bottom:1px solid #ffffff08;
          text-decoration:none;transition:background .15s;border-radius:6px}
.col-item:last-child{border-bottom:none}
.col-item:hover{background:var(--bg3)}
.col-item-title{font-size:.8rem;font-weight:600;color:#e5e7eb;line-height:1.4;flex:1}
.yt-badge{background:#ef4444;color:#fff;border-radius:4px;padding:2px 7px;font-size:.62rem;font-weight:700;flex-shrink:0}

/* ---- LEAD MAGNET ---- */
.lead-popup{position:fixed;bottom:1.5rem;left:1.5rem;background:var(--bg2);
            border:1px solid var(--border2);border-radius:12px;padding:1.2rem;
            width:275px;z-index:200;box-shadow:0 20px 60px #00000070}
.lead-close{position:absolute;top:.6rem;right:.6rem;background:none;border:none;
            color:var(--text3);font-size:.9rem;cursor:pointer;line-height:1;padding:4px}
.lead-tag{display:flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;
          color:var(--orange);margin-bottom:.5rem}
.lead-dot{width:8px;height:8px;background:var(--orange);border-radius:50%}
.lead-title{font-size:.85rem;font-weight:700;color:var(--text);line-height:1.4;margin-bottom:.4rem}
.lead-desc{font-size:.75rem;color:var(--text2);line-height:1.5;margin-bottom:.8rem}
.lead-input{width:100%;background:var(--bg3);border:1px solid var(--border2);border-radius:7px;
            padding:8px 10px;color:var(--text);font-family:var(--font);font-size:.78rem;
            outline:none;margin-bottom:.6rem;display:block}
.lead-btn{width:100%;background:var(--orange);color:#fff;border:none;padding:9px;
          border-radius:7px;font-family:var(--font);font-weight:700;font-size:.82rem;cursor:pointer}

/* ---- BREADCRUMB ---- */
.breadcrumb{padding:.8rem 0;margin-bottom:1.5rem}
.breadcrumb ol{display:flex;align-items:center;gap:.5rem;list-style:none;flex-wrap:wrap}
.breadcrumb a{color:var(--text2);font-size:.82rem}
.breadcrumb a:hover{color:var(--orange)}
.breadcrumb .sep{color:var(--text3);font-size:.8rem}
.breadcrumb li:last-child span{font-size:.82rem;color:var(--text3)}

/* ---- ARTICLE PAGE ---- */
.article-wrap{padding:2rem 1.5rem}
.article-layout{display:grid;grid-template-columns:1fr 320px;gap:2.5rem;max-width:1100px;margin:0 auto}
.article-header{margin-bottom:2rem}
.article-meta-top{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-bottom:1rem}
.cat-badge{padding:3px 12px;border-radius:20px;font-size:.75rem;font-weight:700}
.meta-date,.meta-read,.meta-views{font-size:.78rem;color:var(--text3)}
.article-title{font-size:2rem;font-weight:900;line-height:1.3;margin-bottom:.8rem}
.article-desc{font-size:1rem;color:var(--text2);line-height:1.7;margin-bottom:1.5rem}
.article-cover{width:100%;border-radius:12px;object-fit:cover;max-height:420px;margin-bottom:1.5rem}
.article-content{line-height:1.9;font-size:.95rem}
.article-content h2{font-size:1.4rem;font-weight:700;margin:2rem 0 .8rem;color:var(--text)}
.article-content h3{font-size:1.1rem;font-weight:700;margin:1.5rem 0 .6rem;color:var(--text2)}
.article-content p{margin-bottom:1rem;color:#d1d5db}
.article-content a{color:var(--orange);text-decoration:underline}
.code-block{background:#0f172a;border:1px solid #1e293b;border-radius:8px;padding:1rem 1.2rem;
            font-family:var(--mono);font-size:.82rem;line-height:1.7;overflow-x:auto;margin:1rem 0}
.inline-code{background:var(--bg3);border-radius:4px;padding:2px 7px;font-family:var(--mono);font-size:.85em;color:#7dd3fc}
.code-snippet-box{background:var(--bg2);border:1px solid var(--border2);border-radius:10px;
                  margin-bottom:1.5rem;overflow:hidden}
.code-header{display:flex;align-items:center;justify-content:space-between;padding:.7rem 1rem;
             border-bottom:1px solid var(--border);font-size:.82rem;font-weight:700}
.copy-btn{background:var(--bg3);border:1px solid var(--border2);color:var(--text2);
          padding:3px 12px;border-radius:6px;font-size:.75rem;cursor:pointer;font-family:var(--font)}
.copy-btn:hover{background:var(--orange);color:#fff;border-color:var(--orange)}
.code-snippet-box pre{padding:1rem;font-family:var(--mono);font-size:.8rem;line-height:1.7;overflow-x:auto;color:#7dd3fc}

.workflow-cta{background:linear-gradient(135deg,#f9731615,#f9731605);border:1px solid #f9731630;
              border-radius:10px;padding:1.2rem 1.5rem;display:flex;align-items:center;gap:1rem;margin:2rem 0}
.workflow-cta span{font-size:1.8rem}
.workflow-cta strong{display:block;font-weight:700;margin-bottom:.2rem}
.workflow-cta p{font-size:.85rem;color:var(--text2)}
.workflow-cta .btn-orange{margin-right:auto;flex-shrink:0;white-space:nowrap}

.article-tags{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:1.5rem 0}
.tags-label{font-size:.8rem;color:var(--text3);font-weight:600}
.tag-pill{background:var(--bg3);border:1px solid var(--border2);color:var(--text2);padding:3px 12px;
          border-radius:20px;font-size:.75rem;transition:all .2s}
.tag-pill:hover{border-color:var(--orange);color:var(--orange)}

.share-section{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border)}
.share-section p{font-size:.85rem;color:var(--text2);margin-bottom:.8rem}
.share-btns{display:flex;gap:.6rem;flex-wrap:wrap}
.share-btn{padding:6px 16px;border-radius:6px;font-size:.78rem;font-weight:700;transition:opacity .2s}
.share-btn:hover{opacity:.8}
.share-twitter{background:#1da1f222;color:#1da1f2;border:1px solid #1da1f240}
.share-linkedin{background:#0077b622;color:#0077b6;border:1px solid #0077b640}
.share-whatsapp{background:#25d36622;color:#25d366;border:1px solid #25d36640}

/* ---- SIDEBAR ---- */
.article-sidebar{display:flex;flex-direction:column;gap:1.2rem}
.sidebar-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:1.2rem}
.sidebar-card h3{font-size:.9rem;font-weight:700;margin-bottom:1rem;padding-bottom:.6rem;border-bottom:1px solid var(--border)}
.quick-info{list-style:none;display:flex;flex-direction:column;gap:.6rem}
.quick-info li{display:flex;justify-content:space-between;font-size:.8rem}
.quick-info li span:first-child{color:var(--text2)}
.quick-info li span:last-child{font-weight:600}
.related-item{display:flex;gap:.8rem;padding:.6rem 0;border-bottom:1px solid var(--border);align-items:center}
.related-item:last-child{border-bottom:none}
.related-item img{width:56px;height:42px;object-fit:cover;border-radius:6px;flex-shrink:0}
.related-title{font-size:.8rem;font-weight:600;line-height:1.4;color:var(--text)}
.related-item small{font-size:.72rem;color:var(--text3)}
.sidebar-lead{background:var(--bg2);border:1px solid #f9731630;border-radius:10px;padding:1.2rem;text-align:center}
.sidebar-lead p{font-size:.85rem;font-weight:700;margin-bottom:.8rem}
.sidebar-lead input{width:100%;background:var(--bg3);border:1px solid var(--border2);border-radius:6px;
                    padding:7px 10px;color:var(--text);font-family:var(--font);font-size:.8rem;outline:none;margin-bottom:.6rem;display:block}
.sidebar-lead button{width:100%;background:var(--orange);color:#fff;border:none;padding:8px;
                     border-radius:6px;font-family:var(--font);font-weight:700;font-size:.82rem;cursor:pointer}

/* ---- FOOTER ---- */
footer{background:var(--bg2);border-top:1px solid var(--border);padding:2rem 1.5rem;text-align:center;margin-top:3rem}
.footer-logo{font-weight:900;font-size:1rem;color:var(--text);margin-bottom:.4rem}
footer p{font-size:.8rem;color:var(--text3)}

/* ---- RESPONSIVE ---- */
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr}
  .three-cols{grid-template-columns:1fr 1fr}
  .article-layout{grid-template-columns:1fr}
  .article-sidebar{display:none}
}
@media(max-width:600px){
  .three-cols{grid-template-columns:1fr}
  nav .nav-links{display:none}
  .hero-left h1{font-size:1.8rem}
  .lead-popup{width:calc(100% - 2rem);left:1rem;right:1rem}
}