/* دليل تعليمي — من alidash_solar_guide_updated.html */
body.guide-page-body { overflow-x: hidden; }

.guide-app {
  --gold: #B07800;
  --gold-light: #D4950A;
  --gold-dim: rgba(176,120,0,0.1);
  --gold-border: rgba(176,120,0,0.28);
  --bg: #F4F6FA;
  --bg2: #FFFFFF;
  --bg3: #EEF1F7;
  --panel: #FFFFFF;
  --border: rgba(0,0,0,0.08);
  --border2: rgba(0,0,0,0.13);
  --text: #0F172A;
  --muted: #5A6A85;
  --red: #C0392B;
  --blue: #1A5FA8;
  --green: #146B3A;
  --orange: #C0620A;
  --guide-sticky-top: 72px;
  --guide-toc-h: 52px;
}
.guide-app *,.guide-app *::before,.guide-app *::after{box-sizing:border-box;}
.guide-app{
  scroll-behavior:smooth;
  font-family:'Cairo',var(--font,sans-serif);
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
  overflow-x:hidden;
}

/* ── LAYOUT: عرض كامل + فهرس أفقي ── */
.guide-app {
  position: relative;
  width: 100%;
  background: var(--bg);
}
.guide-app #main {
  width: 100%;
  min-height: 100vh;
}

/* ── فهرس الدليل (تحت الهيرو، sticky تحت هيدر الموقع) ── */
.guide-app .guide-toc {
  position: sticky;
  top: var(--guide-sticky-top);
  z-index: 900;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
}
.guide-app .guide-toc-scroll {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px 8px;
  padding: 10px 48px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(176, 120, 0, 0.35) transparent;
}
.guide-app .guide-toc-scroll::-webkit-scrollbar {
  height: 5px;
}
.guide-app .guide-toc-scroll::-webkit-scrollbar-thumb {
  background: rgba(176, 120, 0, 0.35);
  border-radius: 99px;
}
.guide-app .guide-toc-group {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.04em;
  padding: 5px 10px;
  margin-inline-start: 10px;
  background: var(--bg3);
  border-radius: 6px;
}
.guide-app .guide-toc-scroll > .guide-toc-group:first-child {
  margin-inline-start: 0;
}
.guide-app .sb-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: color 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.guide-app .sb-link:hover,
.guide-app .sb-link.active {
  color: var(--gold);
  background: var(--gold-dim);
  border-color: var(--gold-border);
}
.guide-app .sb-link.active {
  box-shadow: inset 0 -2px 0 var(--gold);
}
.guide-app .sb-link .sb-icon {
  font-size: 14px;
  flex-shrink: 0;
}
.hero{
  background:linear-gradient(180deg,#FFFDF8 0%,#F8FAFC 100%);
  border-bottom:1px solid var(--border);
  padding:28px 48px 32px;
  position:relative;
}
.guide-app .hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(220px,42%);
  gap:28px 36px;
  align-items:center;
  max-width:1100px;
  margin:0 auto;
}
.guide-app .hero-figure{
  margin:0;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:0 16px 40px rgba(15,23,42,.08);
  background:var(--panel);
}
.guide-app .hero-figure img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}
.hero-inner{
  max-width:36rem;
}
.hero-tag{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--gold-dim);border:1px solid var(--gold-border);
  color:var(--gold);border-radius:99px;padding:5px 14px;
  font-size:11px;font-weight:800;letter-spacing:.06em;margin-bottom:12px;
}
.hero h1{
  font-size:clamp(22px,3vw,32px);font-weight:900;
  color:var(--text);line-height:1.4;margin:0 0 12px;
}
.hero h1 span{color:var(--gold);}
.hero-lead{
  color:var(--muted);
  font-size:14px;
  font-weight:600;
  line-height:1.75;
  margin:0;
  max-width:32rem;
  padding-top:12px;
  border-top:1px solid var(--border);
}

/* ── CONTENT ── */
.content{padding:0 60px 100px;}
@media(max-width:900px){
  .guide-app .hero-grid{grid-template-columns:1fr;}
  .guide-app .hero-figure{max-width:520px;margin:0 auto;}
  .guide-app .media-duo{grid-template-columns:1fr;}
  .guide-app .step-thumbs{grid-template-columns:1fr;}
  .guide-app .guide-toc-scroll{padding:8px 24px;}
  .guide-app .sb-link{padding:7px 12px;font-size:12px;}
  .content,.hero{padding-right:24px;padding-left:24px;}
  .guide-app .guide-footer-cta{margin:32px 24px;}
}

/* ── SECTION ── */
.sec{
  padding-top:70px;
  border-top:1px solid var(--border);
  margin-top:60px;
}
.sec:first-child{border-top:none;margin-top:0;padding-top:60px;}
.sec-header{
  display:flex;align-items:flex-start;gap:20px;margin-bottom:36px;
}
.sec-num{
  width:48px;height:48px;border-radius:14px;
  background:var(--gold-dim);border:1.5px solid var(--gold-border);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;flex-shrink:0;
}
.sec-header h2{font-size:clamp(22px,3vw,32px);font-weight:900;line-height:1.3;}
.sec-header p{color:var(--muted);font-size:15px;margin-top:6px;line-height:1.7;}

/* ── CARDS GRID ── */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin:24px 0;}
.card{
  background:var(--panel);border:1px solid var(--border);
  border-radius:16px;padding:22px;
}
.card h4{
  font-size:16px;
  font-weight:800;
  margin:0 0 12px;
  padding-bottom:10px;
  border-bottom:1px solid var(--border);
  line-height:1.45;
  display:block;
}
.card p,.card li{font-size:14px;color:var(--muted);line-height:1.75;}
.card ul{list-style:none;display:flex;flex-direction:column;gap:8px;padding:0;margin:0;}
.card ul li{
  padding-right:1rem;
  position:relative;
  line-height:1.75;
}
.card ul li::before{
  content:'';
  position:absolute;
  right:0;
  top:0.72em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--gold);
  transform:translateY(-50%);
  opacity:0.85;
}
.card.warn ul li::before{background:var(--red);}
.card.info ul li::before,.card.green-c ul li::before{background:var(--blue);}
.card.highlight ul li::before{background:var(--gold-light);}

.card.highlight{border-color:var(--gold-border);background:linear-gradient(135deg,#FFFDF5,#FFF8E7);}
.card.warn{border-color:rgba(192,57,43,0.25);background:#FFF5F5;}
.card.info{border-color:rgba(26,95,168,0.2);background:#F0F6FF;}
.card.green-c{border-color:rgba(20,107,58,0.2);background:#F0FFF6;}

/* ── 3 بطاقات + بطاقة عريضة تحتها ── */
.guide-app .card-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 24px 0 28px;
}
.guide-app .cards-row-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  gap: 16px;
  align-items: stretch;
}
.guide-app .cards-row-3 .card {
  height: 100%;
  min-height: 100%;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}
.guide-app .card-panel > .callout-span {
  margin: 0;
  width: 100%;
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}
@media (max-width: 1024px) {
  .guide-app .cards-row-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .guide-app .cards-row-3 .card:last-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 640px) {
  .guide-app .cards-row-3 {
    grid-template-columns: 1fr;
  }
  .guide-app .cards-row-3 .card:last-child {
    grid-column: auto;
  }
}

/* ── شبكة بطاقتين ── */
.guide-app .cards-row-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  gap: 16px;
  align-items: stretch;
}
.guide-app .cards-row-2 .card {
  height: 100%;
  min-height: 100%;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}
@media (max-width: 640px) {
  .guide-app .cards-row-2 {
    grid-template-columns: 1fr;
  }
}

/* ── كتلة متراصة: تنبيه + معادلة ── */
.guide-app .block-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.guide-app .block-stack--section {
  margin: 24px 0 28px;
}
.guide-app .block-stack .callout,
.guide-app .block-stack .formula-wrap {
  margin: 0;
}
.guide-app .block-stack .callout-span {
  width: 100%;
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}
.guide-app .block-stack .formula {
  border-radius: 16px;
  padding: 20px 24px;
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}
.guide-app .block-stack .formula-label {
  margin-bottom: 8px;
}

/* ── بطاقات + صورة بنفس الصف ── */
.guide-app .cards-with-media {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 24px 0;
  align-items: stretch;
}
.guide-app .cards-with-media--2plus1 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.guide-app .cards-row-1 {
  grid-template-columns: 1fr;
  margin: 0 0 24px;
}
.guide-app .card-media {
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}
.guide-app .card-media img {
  display: block;
  width: 100%;
  flex: 1;
  min-height: 160px;
  max-height: 280px;
  object-fit: cover;
  object-position: center;
}
.guide-app .card-media figcaption {
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  border-top: 1px solid var(--border);
  background: var(--bg3);
  flex-shrink: 0;
}
@media (max-width: 1100px) {
  .guide-app .cards-with-media,
  .guide-app .cards-with-media--2plus1 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .guide-app .card-media {
    grid-column: 1 / -1;
    max-height: 320px;
  }
  .guide-app .card-media img {
    max-height: 240px;
  }
}
@media (max-width: 640px) {
  .guide-app .cards-with-media,
  .guide-app .cards-with-media--2plus1 {
    grid-template-columns: 1fr;
  }
  .guide-app .card-media {
    grid-column: auto;
  }
}

/* ── صور بحجم بطاقة واحدة ── */
.guide-app .sec-figure--card {
  max-width: min(100%, 320px);
  margin-right: auto;
  margin-left: auto;
}
.guide-app .sec-figure--card img {
  max-height: 220px;
  object-fit: cover;
}

/* ── نتائج المثال التطبيقي ── */
.guide-app .result-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 32px;
}
.guide-app .result-card {
  text-align: center;
  padding: 18px 14px;
}
.guide-app .result-card-ico {
  font-size: 28px;
  margin-bottom: 8px;
}
.guide-app .result-card-val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 22px;
  font-weight: 700;
  color: var(--gold);
}
.guide-app .result-card-sub {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
  margin-top: 4px;
}
@media (max-width: 900px) {
  .guide-app .result-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .guide-app .result-cards {
    grid-template-columns: 1fr;
  }
}

/* ── المثال التطبيقي — سيناريو + مخطط جنباً إلى جنب ── */
.guide-app .example-intro-row {
  display: grid;
  grid-template-columns: minmax(200px, 30%) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  margin: 24px 0 28px;
  min-height: 240px;
}
.guide-app .example-scenario {
  margin: 0;
  padding: 16px 18px;
  font-size: 13px;
  line-height: 1.65;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 12px;
}
.guide-app .example-scenario .callout-icon {
  width: 36px;
  height: 36px;
  font-size: 16px;
  border-radius: 10px;
}
.guide-app .example-figure {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.guide-app .example-figure-media {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 10px 14px;
}
.guide-app .example-figure--loads img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  min-height: 180px;
  object-fit: contain;
}
.guide-app .example-figure figcaption {
  flex-shrink: 0;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  border-top: 1px solid var(--border);
  background: var(--bg3);
}
.guide-app .example-visuals {
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.guide-app .example-visuals-label {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  text-align: right;
}
.guide-app .example-components {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  gap: 14px;
}
.guide-app .example-components .card-media img {
  min-height: 140px;
  max-height: 160px;
  object-fit: cover;
}
.guide-app .example-components .card-media figcaption {
  font-size: 11px;
  font-weight: 800;
  color: var(--gold);
}
@media (max-width: 900px) {
  .guide-app .example-intro-row {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .guide-app .example-scenario {
    align-items: flex-start;
  }
  .guide-app .example-figure--loads img {
    min-height: 160px;
  }
  .guide-app .example-components {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .guide-app .example-components {
    grid-template-columns: 1fr;
  }
  .guide-app .example-figure--loads img {
    min-height: 140px;
  }
}

/* ── CALLOUT ── */
.callout{
  display:flex;gap:16px;align-items:flex-start;
  border-radius:12px;padding:18px 20px;margin:20px 0;
  font-size:14px;line-height:1.75;
}
.callout.tip{background:#FFF8E7;border:1px solid rgba(176,120,0,0.25);color:#7A5200;}
.callout.warn{background:#FFF1F1;border:1px solid rgba(192,57,43,0.2);color:#8B1A1A;}
.callout.info{background:#EFF6FF;border:1px solid rgba(26,95,168,0.18);color:#1A3A6B;}
.callout.green{background:#EDFFF5;border:1px solid rgba(20,107,58,0.2);color:#0A4020;}
.callout-icon{
  flex-shrink:0;
  width:40px;
  height:40px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
  margin-top:0;
}
.callout.tip .callout-icon{background:rgba(176,120,0,0.14);}
.callout.warn .callout-icon{background:rgba(192,57,43,0.12);}
.callout.info .callout-icon{background:rgba(26,95,168,0.12);}
.callout.green .callout-icon{background:rgba(20,107,58,0.12);}
.callout-icon--svg{
  font-size:0;
  background:rgba(26,95,168,0.1);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A5FA8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 20h16M6 16l6-12 6 12M9 12h6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:22px 22px;
}
.callout strong{font-weight:800;}

/* جدول مصغّر داخل البطاقة */
.guide-app .mini-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  margin-top:4px;
}
.guide-app .mini-table th,
.guide-app .mini-table td{
  padding:8px 10px;
  border-bottom:1px solid var(--border);
  text-align:right;
}
.guide-app .mini-table th{
  font-size:11px;
  font-weight:800;
  color:var(--muted);
  background:var(--bg3);
}
.guide-app .mini-table tr:last-child td,
.guide-app .mini-table tr:last-child th{
  border-bottom:none;
}
.guide-app .mini-table tr.highlight-row td{
  font-weight:800;
  color:var(--gold);
  background:rgba(176,120,0,0.06);
}

/* ── FORMULA ── */
.formula-wrap{margin:20px 0;}
.formula-label{font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px;}
.formula{
  background:#F8FAFC;border:1px dashed var(--gold-border);
  border-radius:10px;padding:16px 20px;
  font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;
  color:var(--gold);direction:ltr;text-align:left;line-height:1.8;
  overflow-x:auto;
}
.formula .cmt{color:var(--muted);font-size:12px;}
.formula .res{color:var(--green);font-weight:700;}

/* ── TABLE ── */
.tbl-wrap{overflow-x:auto;border-radius:14px;border:1px solid var(--border);margin:20px 0;}
table{width:100%;border-collapse:collapse;text-align:right;font-size:14px;}
thead th{
  background:#F1F5FB;padding:13px 16px;
  font-size:12px;font-weight:800;color:var(--muted);
  letter-spacing:.04em;border-bottom:1px solid var(--border2);
}
tbody td{padding:13px 16px;border-bottom:1px solid rgba(0,0,0,0.05);color:var(--text);}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover td{background:rgba(0,0,0,0.015);}
tr.total-row td{
  background:rgba(176,120,0,0.06);font-weight:800;
  border-top:1px solid var(--gold-border);color:var(--gold);
  font-family:'IBM Plex Mono',monospace;
}
tr.total-row td:first-child{color:var(--text);font-family:'Cairo',sans-serif;}
.td-day{color:#A06000;}
.td-night{color:#1A5FA8;}
.td-mono{font-family:'IBM Plex Mono',monospace;font-weight:700;}

/* ── SPEC TABLE ── */
.spec-table{width:100%;border-collapse:collapse;font-size:13px;}
.spec-table td{padding:10px 14px;border-bottom:1px solid rgba(0,0,0,0.05);}
.spec-table td:first-child{font-weight:800;color:var(--muted);width:45%;background:#F8FAFC;}
.spec-table td:last-child{font-family:'IBM Plex Mono',monospace;color:var(--gold);font-weight:700;}
.spec-table tr:last-child td{border-bottom:none;}

/* ── PANEL DATASHEET ── */
.datasheet-wrap{
  max-width:640px;
  margin:16px auto 20px;
}
.datasheet{
  background:linear-gradient(135deg,#1A2235,#0D1117);
  border-radius:14px;padding:20px 22px;color:#fff;
  position:relative;overflow:hidden;
}
.datasheet::before{
  content:'';position:absolute;top:-30px;left:-30px;
  width:140px;height:140px;
  background:radial-gradient(circle,rgba(176,120,0,0.2),transparent 70%);
}
.datasheet-title{
  font-size:11px;font-weight:800;color:#D4A520;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;
}
.datasheet-model{font-size:18px;font-weight:900;margin-bottom:4px;}
.datasheet-sub{font-size:12px;color:rgba(255,255,255,0.5);margin-bottom:14px;}
.ds-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.ds-item{background:rgba(255,255,255,0.06);border-radius:8px;padding:10px 12px;}
.ds-label{font-size:10px;color:rgba(255,255,255,0.45);font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px;}
.ds-val{font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:700;color:#F0C040;}
.ds-unit{font-size:11px;color:rgba(255,255,255,0.4);margin-top:1px;}
.ds-note{font-size:11px;color:rgba(255,255,255,0.4);margin-top:12px;line-height:1.55;}
@media(min-width:560px){
  .ds-grid{grid-template-columns:repeat(4,1fr);}
}

/* ── CONNECTION TYPES ── */
.conn-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0;}
.conn-box{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:20px;}
.conn-box h4{font-size:15px;font-weight:800;margin-bottom:12px;display:flex;align-items:center;gap:8px;}
.conn-diagram{
  background:#F1F5FB;border-radius:10px;padding:16px;
  font-family:'IBM Plex Mono',monospace;font-size:12px;
  color:var(--text);text-align:center;margin:10px 0;direction:ltr;
  line-height:2;
}
.conn-diagram .pos{color:var(--red);font-weight:700;}
.conn-diagram .neg{color:var(--blue);font-weight:700;}

/* ── STEPS ── */
.steps-list{display:flex;flex-direction:column;gap:16px;margin:20px 0;}
.step-item{
  background:var(--panel);border:1px solid var(--border);
  border-radius:14px;padding:20px 24px;
  display:flex;gap:16px;align-items:flex-start;
}
.step-badge{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:var(--gold-dim);border:1.5px solid var(--gold-border);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:900;color:var(--gold);
}
.step-item h4{font-size:15px;font-weight:800;margin-bottom:6px;}
.step-item p,.step-item li{font-size:14px;color:var(--muted);line-height:1.75;}

/* ── RESULT CHIP ── */
.result-box{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(20,107,58,0.08);border:1px solid rgba(20,107,58,0.2);
  border-radius:10px;padding:12px 20px;margin-top:12px;
  font-size:15px;font-weight:800;color:var(--green);
}

/* ── DIVIDER (باقي الأقسام) ── */
.divider{
  display:flex;align-items:center;gap:14px;
  margin:32px 0;color:var(--muted);font-size:12px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;
}
.divider::before,.divider::after{
  content:'';flex:1;height:1px;background:var(--border2);
}

/* ── عنوان فرعي فوق الكتلة (طريقة ٣) ── */
.guide-app .sec-block {
  margin-top: 36px;
}
.guide-app .sec-side-title {
  margin: 0 0 16px;
  padding: 0;
  font-family: 'Cairo', var(--font, sans-serif);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.45;
  color: var(--text);
  text-align: right;
}
.guide-app .sec-block > .cards,
.guide-app .sec-block > .callout,
.guide-app .sec-block > .formula-wrap,
.guide-app .sec-block > .tbl-wrap,
.guide-app .sec-block > .conn-row,
.guide-app .sec-block > .datasheet-wrap,
.guide-app .sec-block > .wire-row {
  margin-top: 0;
}
.guide-app .sec-block > .cards,
.guide-app .sec-block > .conn-row {
  margin-bottom: 0;
}
.guide-app .sec-block > .cards.cards-row-3,
.guide-app .sec-block > .cards.cards-row-2 {
  margin-top: 0;
}
.guide-app .sec-block > .block-stack {
  margin: 0;
}
.guide-app .sec-block > .sec-figure {
  margin-top: 16px;
  margin-bottom: 0;
}
.guide-app .sec-figure + .sec-block {
  margin-top: 36px;
}

/* ── صور وأشكال توضيحية ── */
.guide-app .sec-figure {
  margin: 28px 0 32px;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}
.guide-app .sec-figure img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}
.guide-app .sec-figure figcaption {
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  border-top: 1px solid var(--border);
  background: var(--bg3);
}
.guide-app .sec-figure--compact {
  margin: 20px 0 0;
}
.guide-app .media-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
  background: var(--bg3);
}
.guide-app .media-duo img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
}
.guide-app .step-thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 24px 0 28px;
}
.guide-app .step-thumb {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}
.guide-app .step-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.guide-app .step-thumb figcaption {
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 800;
  color: var(--gold);
  text-align: center;
  border-top: 1px solid var(--border);
}

/* ── WIRE TABLE ── */
.wire-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0;}
.wire-cell{
  border-radius:10px;padding:14px;text-align:center;
  border:1px solid var(--border);background:var(--panel);
}
.wire-dot{width:24px;height:24px;border-radius:50%;margin:0 auto 8px;}
.wire-cell p{font-size:12px;font-weight:700;color:var(--muted);}

/* ── RESPONSIVE ── */
@media(max-width:650px){
  .conn-row,.ds-grid,.wire-row{grid-template-columns:1fr;}
  .cards{grid-template-columns:1fr;}
}


/* ── ENHANCEMENTS V2 ── */
.guide-app ::selection{background:rgba(176,120,0,.22);}
.guide-app .progress{
  position:fixed;bottom:0;left:0;right:0;height:4px;width:0;
  background:linear-gradient(90deg,var(--gold),var(--gold-light));z-index:85;
  box-shadow:0 0 16px rgba(176,120,0,.35);
}
.guide-app .hero{padding-top:24px;}
.card,.step-item,.conn-box,.datasheet,.callout,.tbl-wrap{box-shadow:0 10px 28px rgba(15,23,42,.04);}
.card,.conn-box,.step-item{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
.card:hover,.conn-box:hover,.step-item:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(15,23,42,.08);border-color:rgba(176,120,0,.22)}
.guide-app .sec{scroll-margin-top:calc(var(--guide-sticky-top) + var(--guide-toc-h) + 20px);}
.sec-header{position:relative;}
.sec-header::after{content:'';position:absolute;bottom:-16px;right:68px;width:92px;height:3px;border-radius:999px;background:linear-gradient(90deg,var(--gold),transparent)}
.backtop{position:fixed;left:22px;bottom:22px;width:44px;height:44px;border-radius:50%;border:1px solid var(--gold-border);background:#fff;color:var(--gold);font-size:18px;font-weight:900;box-shadow:0 14px 35px rgba(15,23,42,.15);cursor:pointer;display:none;z-index:140;}
.backtop.show{display:block;}
@media(max-width:900px){
  .guide-app .hero{padding:24px 24px 28px}
}
@media(max-width:520px){
  .content,.hero{padding-right:18px;padding-left:18px}
  .guide-app .guide-toc-scroll{padding:8px 18px}
  .datasheet-wrap{max-width:100%}
  .ds-grid{grid-template-columns:1fr 1fr}
}
.guide-app .backtop { z-index: 880; }
.guide-app .guide-footer-cta {
  margin: 48px 60px 32px;
  padding: 28px;
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid var(--gold-border);
  text-align: center;
}
.guide-app .guide-footer-cta .btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.guide-app .guide-footer-cta .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  border: 1px solid var(--border);
  background: #fff;
  font-family: 'Cairo', var(--font, sans-serif);
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
}
.guide-app .guide-footer-cta .btn-primary {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}
@media print {
  .site-header, .back-bar, .site-footer, .no-print { display: none !important; }
  .guide-app { display: block; }
  .guide-app .guide-toc, .guide-app .progress, .guide-app .backtop { display: none !important; }
  .guide-app .hero { padding: 32px; background: #fff !important; color: #000; }
  .guide-app .hero h1, .guide-app .hero p { color: #000; }
  .guide-app .content { padding: 0 24px; }
  .guide-app .sec { break-inside: avoid; }
  .guide-app .card, .guide-app .callout, .guide-app .tbl-wrap, .guide-app .datasheet { box-shadow: none; }
}