/* ===== HubGit – Common Styles (Colorful) ===== */
:root{
  --brand:#0ea5e9;           /* sky-500 */
  --brand-600:#0284c7;
  --brand-700:#0369a1;
  --accent:#10b981;          /* emerald-500 */
  --accent-600:#059669;
  --rose:#f43f5e;            /* rose-500 */
  --amber:#f59e0b;           /* amber-500 */
  --violet:#8b5cf6;          /* violet-500 */
  --ink:#0f172a;             /* slate-900 */
  --muted:#475569;           /* slate-600 */
  --surface:#ffffff;
  --border:#e2e8f0;
  --code-bg:#0b1220;
  --code-fg:#e2e8f0;
  --hero-grad: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
}
html{scroll-behavior:smooth}
body{font-family:"Vazirmatn",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif;background:#f8fafc;color:var(--ink)}
a{color:var(--brand)} a:hover{color:var(--brand-700)}
.logo{font-weight:700;font-size:1.125rem;display:flex;align-items:center;gap:.5rem}
.logo .mark{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:#0ea5e9;color:#fff}

.navbar{background:#fff}
.article-hero{background:var(--hero-grad);color:#fff}
.article-hero .breadcrumb a{color:#f1f5f9}
.article-hero .breadcrumb .active{color:#e2e8f0}
.article-hero .meta small{color:#eef2ff}
.article-hero .badge-level{border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.15); color:#fff}

.badge-level{background:#e0f2fe;color:#0369a1}
.badge-basic{background:#e0f2fe;color:#075985}
.badge-intermediate{background:#fef9c3;color:#92400e}
.badge-advanced{background:#fee2e2;color:#991b1b}

.progress-dots{display:flex;gap:.4rem;align-items:center}
.progress-dots a{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--border);text-decoration:none;color:#475569;font-weight:700;font-size:.85rem;background:#fff}
.progress-dots a.active,.progress-dots a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

.toc .list-group-item{padding:.5rem .75rem}
.toc .list-group-item:hover{background:#f1f5f9}

section h2 .tag{font-size:.75rem;margin-inline-start:.5rem}

.card-feature{height:100%;border:1px solid var(--border);border-radius:16px;transition:transform .2s,box-shadow .2s}
.card-feature:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(2,8,23,.08)}
.card-feature .icon{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;background:#e0f2fe;color:#0369a1}

/* Colored callouts */
.callout{border:1px solid var(--border);border-radius:14px;padding:12px;background:#fff}
.callout.info{border-color:#bae6fd;background:#eff6ff}
.callout.tip{border-color:#bbf7d0;background:#f0fdf4}
.callout.warn{border-color:#fed7aa;background:#fff7ed}
.callout.danger{border-color:#fecaca;background:#fff1f2}

/* Placeholders for images */
.img-placeholder{border:1.5px dashed #94a3b8;border-radius:12px;background:#f8fafc;display:flex;align-items:center;justify-content:center;min-height:220px;color:#64748b;padding:1rem;text-align:center}
figure figcaption{color:#64748b;font-size:.875rem;margin-top:.5rem}

/* Code blocks: LTR + copy button outside */
.code-font{font-family:"Fira Code",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:.95rem}
pre[dir="ltr"], pre[dir="ltr"] code{direction:ltr;text-align:left;unicode-bidi:embed}
.codebox{ position:relative; margin-top:2.25rem;}
.codebox > pre{ margin-top:.75rem; background:var(--code-bg); color:var(--code-fg); border-radius:12px; padding:1rem; overflow:auto;}
.copy-btn{ position:absolute; top:0; inset-inline-end:0; transform:translateY(calc(-100% - 8px)); border:1px solid #cbd5e1; background:#fff; color:#0f172a; padding:.3rem .6rem; border-radius:8px; font-size:.875rem; cursor:pointer; z-index:5;}
@media (max-width:480px){ .copy-btn{ top:100%; transform:translateY(8px);} .codebox{ margin-top:1rem;} }

.code-steps{ background:#0b1220; color:#e2e8f0; padding:1rem; border-radius:12px; overflow:auto; border:1px solid #1e293b}
.code-steps bdi{ display:block; white-space:pre-wrap; }
.code-steps bdi[dir="rtl"]{ text-align:right; }
.code-steps bdi[dir="ltr"]{ text-align:left; }

/* Footer */
footer{background:#0f172a;color:#e2e8f0}
footer a{color:#cbd5e1}
footer .btn-outline-light{border-color:#334155}
footer .logo .mark{background:#334155}

/* Dark theme */
[data-bs-theme="dark"]{
  --surface:#0b1220; --ink:#e2e8f0; --muted:#94a3b8; --border:#334155; background:#0b1220;
}
[data-bs-theme="dark"] .navbar{background:#0b1220;border-bottom:1px solid var(--border)}
[data-bs-theme="dark"] .article-hero{background:linear-gradient(135deg,#0ea5e9 0%,#14b8a6 60%,#8b5cf6 100%);}
[data-bs-theme="dark"] .card-feature{background:#0b1220;border-color:#334155}
[data-bs-theme="dark"] .img-placeholder{background:#0b1220;border-color:#334155;color:#94a3b8}