/* Demo Skills — "DemoHub-style" learning-path layout (BolEnglish brand).
   Self-contained; layered over be-shell.css (site header/footer only). */

:root{
  --dh-pri:#7c3aed; --dh-pri2:#a78bfa; --dh-indigo:#6366f1;
  --dh-pink:#ec4899; --dh-ink:#1f2937; --dh-mut:#6b7280;
  --dh-line:#e9e7f5; --dh-bg:#f7f6fe; --dh-card:#ffffff;
  --dh-green:#16a34a; --dh-say:#f1effe; --dh-saybd:#ddd6fe;
  --dh-blue:#3b82f6; --dh-amber:#f59e0b;
}
.dh{ background:var(--dh-bg); display:block; }
.dh *{ box-sizing:border-box; }
.dh-wrap{ max-width:1180px; margin:0 auto; padding:26px 20px 70px; }

/* ---------- breadcrumb + hero ---------- */
.dh-crumb{ font-size:.86rem; color:var(--dh-mut); margin:0 0 14px; }
.dh-crumb b{ color:var(--dh-pri); font-weight:600; }
.dh-hero{ display:grid; grid-template-columns:1.4fr .9fr; gap:24px; align-items:center;
  background:linear-gradient(135deg,#ffffff,#f3f0ff); border:1px solid var(--dh-line);
  border-radius:24px; padding:30px 32px; margin:0 0 26px; box-shadow:0 20px 50px -34px rgba(124,58,237,.4); }
.dh-hero h1{ font-size:2.4rem; line-height:1.1; margin:0 0 10px; font-weight:800; color:var(--dh-ink); }
.dh-hero p{ color:var(--dh-mut); font-size:1.02rem; line-height:1.55; max-width:560px; margin:0 0 20px; }
.dh-stats{ display:flex; flex-wrap:wrap; gap:12px; }
.dh-statchip{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--dh-line);
  border-radius:14px; padding:10px 14px; min-width:120px; }
.dh-statchip .ic{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; font-size:1.1rem;
  background:rgba(124,58,237,.1); color:var(--dh-pri); flex:none; }
.dh-statchip b{ display:block; font-size:1.02rem; color:var(--dh-ink); line-height:1.1; }
.dh-statchip span{ font-size:.78rem; color:var(--dh-mut); }
.dh-hero-art{ position:relative; }
.dh-note{ position:absolute; top:-6px; right:4px; font-family:'Caveat',cursive; font-size:1.3rem;
  color:var(--dh-pri); transform:rotate(-6deg); max-width:180px; text-align:center; }
.dh-laptop{ width:100%; max-width:360px; margin-left:auto; display:block; }

/* ---------- main + sidebar grid ---------- */
.dh-grid{ display:grid; grid-template-columns:1fr 320px; gap:24px; align-items:start; }
.dh-main{ min-width:0; }

/* ---------- filter tabs + search ---------- */
.dh-filters{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin:0 0 18px; }
.dh-tabs{ display:flex; flex-wrap:wrap; gap:8px; }
.dh-tab{ cursor:pointer; border:1px solid var(--dh-line); background:#fff; color:var(--dh-ink); font:inherit;
  font-weight:600; font-size:.88rem; border-radius:9999px; padding:8px 15px; transition:all .16s; }
.dh-tab:hover{ border-color:var(--dh-pri2); }
.dh-tab.is-on{ background:var(--dh-pri); color:#fff; border-color:var(--dh-pri); }
.dh-search{ flex:1 1 220px; max-width:320px; border:1px solid var(--dh-line); border-radius:12px;
  padding:10px 14px; font:inherit; font-size:.9rem; background:#fff; }
.dh-search:focus{ outline:none; border-color:var(--dh-pri2); box-shadow:0 0 0 3px rgba(124,58,237,.12); }

/* ---------- module card ---------- */
.dh-mod{ background:var(--dh-card); border:1px solid var(--dh-line); border-radius:18px; margin:0 0 14px;
  box-shadow:0 14px 34px -28px rgba(31,41,55,.4); overflow:hidden; }
.dh-mod.is-open{ box-shadow:0 20px 44px -26px rgba(124,58,237,.45); border-color:var(--dh-saybd); }
.dh-mod-top{ display:grid; grid-template-columns:auto auto 1fr auto auto; gap:14px; align-items:center;
  padding:16px 18px; cursor:pointer; }
.dh-mod-n{ width:30px; height:30px; border-radius:50%; background:var(--dh-bg); color:var(--dh-mut);
  display:grid; place-items:center; font-weight:800; font-size:.85rem; flex:none; }
.dh-mod.is-open .dh-mod-n{ background:var(--dh-pri); color:#fff; }
.dh-mod-ic{ width:48px; height:48px; border-radius:13px; display:grid; place-items:center; font-size:1.4rem;
  background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(236,72,153,.1)); flex:none; }
.dh-mod-h{ min-width:0; }
.dh-mod-title{ font-weight:800; font-size:1.08rem; color:var(--dh-ink); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dh-tag{ font-size:.7rem; font-weight:700; padding:3px 9px; border-radius:9999px; text-transform:none; }
.dh-tag.Fundamentals{ background:#ede9fe; color:#6d28d9; }
.dh-tag.Presentation{ background:#dbeafe; color:#2563eb; }
.dh-tag[class*="Sales"]{ background:#fce7f3; color:#be185d; }
.dh-tag.Advanced{ background:#fef3c7; color:#b45309; }
.dh-mod-desc{ margin:3px 0 0; color:var(--dh-mut); font-size:.9rem; line-height:1.45; }
.dh-mod-meta{ text-align:right; font-size:.8rem; color:var(--dh-mut); white-space:nowrap; }
.dh-dots{ letter-spacing:2px; margin-right:6px; }
.dh-dots .on{ color:var(--dh-pri); }
.dh-dots .off{ color:var(--dh-line); }
.dh-mod-meta .lvl{ font-weight:700; color:var(--dh-ink); }
.dh-mod-meta .sub{ display:block; margin-top:3px; }
.dh-chev{ border:0; background:var(--dh-bg); width:34px; height:34px; border-radius:10px; cursor:pointer;
  color:var(--dh-mut); font-size:.8rem; transition:transform .2s; flex:none; }
.dh-mod.is-open .dh-chev{ transform:rotate(180deg); background:var(--dh-pri); color:#fff; }
@media(max-width:640px){
  .dh-mod-top{ grid-template-columns:auto auto 1fr auto; }
  .dh-mod-meta{ grid-column:2 / 4; text-align:left; margin-top:-6px; }
}

/* ---------- module body (expanded) ---------- */
.dh-mod-body{ padding:0 18px 20px; border-top:1px solid var(--dh-line); }
.dh-body-top{ display:grid; grid-template-columns:1.2fr .8fr; gap:18px; align-items:center; padding:18px 0; }
@media(max-width:700px){ .dh-body-top{ grid-template-columns:1fr; } }
.dh-learn h4{ margin:0 0 10px; font-size:1rem; font-weight:800; }
.dh-learn ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.dh-learn li{ display:flex; gap:9px; align-items:flex-start; font-size:.92rem; color:var(--dh-ink); }
.dh-learn li::before{ content:"\2713"; color:var(--dh-green); font-weight:800; flex:none; }
.dh-body-art{ border-radius:16px; min-height:150px; display:grid; place-items:center; text-align:center;
  background:linear-gradient(135deg,rgba(124,58,237,.1),rgba(236,72,153,.08)); padding:18px; }
.dh-body-art .big{ font-size:3.2rem; }
.dh-body-art .cap{ font-family:'Caveat',cursive; font-size:1.25rem; color:var(--dh-pri); margin-top:6px; }
.dh-chips{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 16px; }
.dh-chip{ display:flex; align-items:center; gap:8px; background:var(--dh-bg); border:1px solid var(--dh-line);
  border-radius:12px; padding:9px 14px; font-size:.84rem; color:var(--dh-ink); }
.dh-chip b{ color:var(--dh-pri); }
.dh-actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0 0 18px; }
.dh-btn{ cursor:pointer; border:0; font:inherit; font-weight:700; border-radius:12px; padding:11px 18px;
  background:linear-gradient(135deg,var(--dh-pri),var(--dh-pink)); color:#fff; display:inline-flex; gap:8px; align-items:center; }
.dh-btn.ghost{ background:#fff; color:var(--dh-ink); border:1px solid var(--dh-line); }
.dh-btn.done{ background:var(--dh-green); }
.dh-save{ margin-left:auto; color:var(--dh-mut); font-size:.86rem; cursor:pointer; background:none; border:0; font:inherit; display:inline-flex; gap:6px; align-items:center; }

/* topic cards inside expanded module */
.dh-topics{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:14px; }
.dh-topic{ background:var(--dh-bg); border:1px solid var(--dh-line); border-radius:14px; padding:14px; }
.dh-tname{ margin:0 0 8px; font-weight:800; color:var(--dh-pri); font-size:1rem; }
.dh-tline{ margin:0 0 6px; font-size:.88rem; line-height:1.45; color:var(--dh-ink); }
.dh-tline b{ color:var(--dh-mut); font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; margin-right:5px; }
.dh-say{ margin-top:9px; background:var(--dh-say); border:1px solid var(--dh-saybd); border-radius:12px; padding:10px 12px; }
.dh-say-lbl{ font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--dh-pri); }
.dh-say-en{ margin:3px 0 0; font-weight:700; color:#3b0f6b; line-height:1.4; font-size:.92rem; }
.dh-say-hi{ margin:3px 0 0; color:var(--dh-pink); font-size:.86rem; line-height:1.4; }

/* ---------- sidebar ---------- */
.dh-side{ position:sticky; top:18px; display:grid; gap:16px; }
@media(max-width:960px){ .dh-grid{ grid-template-columns:1fr; } .dh-side{ position:static; } }
.dh-scard{ background:var(--dh-card); border:1px solid var(--dh-line); border-radius:18px; padding:18px; }
.dh-scard h3{ margin:0 0 14px; font-size:1.02rem; font-weight:800; }
.dh-prog-ring{ display:flex; align-items:center; gap:16px; margin-bottom:14px; }
.dh-ring{ --p:0; width:84px; height:84px; border-radius:50%; flex:none;
  background:conic-gradient(var(--dh-pri) calc(var(--p)*1%), var(--dh-line) 0); display:grid; place-items:center; }
.dh-ring::before{ content:""; width:64px; height:64px; border-radius:50%; background:#fff; grid-area:1/1; }
.dh-ring b{ grid-area:1/1; z-index:1; font-size:1.2rem; font-weight:800; color:var(--dh-ink); }
.dh-prog-ring .txt{ font-size:.9rem; color:var(--dh-mut); }
.dh-prog-ring .txt b{ color:var(--dh-ink); }
.dh-prog-mini{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; text-align:center; margin-top:4px; }
.dh-prog-mini div{ background:var(--dh-bg); border-radius:12px; padding:10px 6px; }
.dh-prog-mini b{ display:block; font-size:1.05rem; color:var(--dh-ink); }
.dh-prog-mini span{ font-size:.72rem; color:var(--dh-mut); }
.dh-keep{ margin-top:14px; background:linear-gradient(135deg,#f3f0ff,#fdf2f8); border-radius:14px; padding:12px 14px;
  display:flex; gap:10px; align-items:center; font-size:.84rem; color:var(--dh-ink); }
.dh-path ol{ list-style:none; margin:0; padding:0; display:grid; gap:4px; counter-reset:p; }
.dh-path li{ display:flex; gap:10px; align-items:center; font-size:.9rem; color:var(--dh-ink); padding:7px 8px; border-radius:10px; cursor:pointer; }
.dh-path li:hover{ background:var(--dh-bg); }
.dh-path li.is-current{ background:rgba(124,58,237,.08); font-weight:600; }
.dh-path .n{ width:22px; height:22px; border-radius:50%; border:1.5px solid var(--dh-line); color:var(--dh-mut);
  display:grid; place-items:center; font-size:.72rem; flex:none; }
.dh-path li.done .n{ background:var(--dh-green); border-color:var(--dh-green); color:#fff; }
.dh-path li.done span{ color:var(--dh-mut); }
.dh-cert{ background:linear-gradient(135deg,#efeafe,#fbeffb); border:1px solid var(--dh-saybd); text-align:center; }
.dh-cert .cap{ width:52px; height:52px; margin:0 auto 10px; border-radius:14px; background:#fff; display:grid; place-items:center; font-size:1.6rem; }
.dh-cert p{ font-size:.84rem; color:var(--dh-mut); margin:0 0 12px; }
.dh-res a, .dh-help a{ text-decoration:none; }
.dh-reslink{ display:flex; gap:11px; align-items:center; padding:10px 8px; border-radius:12px; cursor:pointer; }
.dh-reslink:hover{ background:var(--dh-bg); }
.dh-reslink .ic{ width:36px; height:36px; border-radius:10px; background:rgba(124,58,237,.1); color:var(--dh-pri);
  display:grid; place-items:center; flex:none; }
.dh-reslink b{ display:block; font-size:.9rem; color:var(--dh-ink); }
.dh-reslink span{ font-size:.76rem; color:var(--dh-mut); }
.dh-help{ background:linear-gradient(135deg,#f3f0ff,#ffffff); }
.dh-help p{ font-size:.86rem; color:var(--dh-mut); margin:8px 0 12px; }

/* ---------- script builder + checklist sections ---------- */
.dh-section{ background:var(--dh-card); border:1px solid var(--dh-line); border-radius:18px; padding:22px; margin:26px 0 0; }
.dh-section > h2{ margin:0 0 4px; font-size:1.3rem; font-weight:800; }
.dh-section > p.sub{ margin:0 0 16px; color:var(--dh-mut); }
.dh-bld-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
.dh-bld-tab{ cursor:pointer; border:1px solid var(--dh-line); background:#fff; color:var(--dh-ink); font:inherit;
  font-weight:700; border-radius:9999px; padding:9px 16px; }
.dh-bld-tab.is-on{ background:linear-gradient(135deg,var(--dh-pri),var(--dh-indigo)); color:#fff; border-color:transparent; }
.dh-steplist{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.dh-step{ background:var(--dh-bg); border:1px solid var(--dh-line); border-radius:14px; padding:14px 16px; }
.dh-step-do{ margin-bottom:2px; } .dh-step-do b{ color:var(--dh-mut); }
.dh-step-n{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:linear-gradient(135deg,var(--dh-pri),var(--dh-indigo)); color:#fff; font-weight:800; font-size:.8rem; margin-right:8px; }
.dh-check{ display:grid; gap:8px; }
.dh-check-item{ display:flex; gap:12px; align-items:flex-start; background:var(--dh-bg); border:1px solid var(--dh-line);
  border-radius:12px; padding:12px 14px; cursor:pointer; }
.dh-check-item input{ width:20px; height:20px; margin-top:1px; accent-color:var(--dh-pri); flex:none; }
.dh-check-item:has(input:checked) span{ color:var(--dh-mut); text-decoration:line-through; }
.dh-checkbar{ display:flex; gap:12px; align-items:center; margin:0 0 14px; font-size:.86rem; color:var(--dh-mut); }
.dh-checkbar .track{ flex:1; height:8px; background:var(--dh-line); border-radius:9999px; overflow:hidden; }
.dh-checkbar .track i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--dh-pri),var(--dh-pink)); }
.dh-checkbar button{ border:1px solid var(--dh-line); background:#fff; border-radius:9999px; padding:5px 12px; cursor:pointer; font:inherit; font-size:.8rem; }
.dh-hidden{ display:none !important; }

.dh-learn li a{ color:var(--dh-ink); text-decoration:none; font-weight:600; }
.dh-learn li a:hover{ color:var(--dh-pri); text-decoration:underline; }

/* Script Builder say-this: English by default; Hinglish when html[lang="hi-Latn"] */
.dh-say-hi{ display:none; }
html[lang="hi-Latn"] .dh-say-en{ display:none; }
html[lang="hi-Latn"] .dh-say-hi{ display:block; }