/* مطابقة التصميم — صفحة المقارنة بين ملف التصميم (PDF) والمعاينة الحيّة */
:root{
  --fd-bg:#0C1A16; --fd-panel:#0A3D2E; --fd-line:#1E5B49;
  --fd-ink:#EAF6F1; --fd-muted:#B9D8CE; --fd-gold:#C8A54B; --fd-mint:#8FE3C8;
  --frame-w:1440px; --frame-h:1000px; --pane-w:576px; --scale:.4;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--fd-bg);color:var(--fd-ink);
  font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;line-height:1.7}

.fd-head{position:sticky;top:0;z-index:50;background:linear-gradient(140deg,#04241B,#12705A);
  border-bottom:1px solid var(--fd-line);padding:14px 20px 12px}
.fd-head h1{font-family:Amiri,serif;font-size:1.45rem;margin:0;color:#fff}
.fd-head p{margin:.25rem 0 0;color:var(--fd-muted);font-size:.84rem;max-width:900px}
.fd-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:11px}
.chip{background:rgba(255,255,255,.08);border:1px solid var(--fd-line);color:var(--fd-ink);
  border-radius:999px;padding:5px 13px;font:600 .78rem/1.5 inherit;cursor:pointer;transition:.15s}
.chip:hover{background:rgba(255,255,255,.16)}
.chip[aria-pressed="true"]{background:var(--fd-gold);border-color:var(--fd-gold);color:#3A2C05}
.fd-sum{margin-inline-start:auto;font-size:.78rem;color:var(--fd-mint)}

.fd-grid{display:grid;gap:26px;padding:22px 20px 60px;max-width:1500px;margin:0 auto}
.card{background:var(--fd-panel);border:1px solid var(--fd-line);border-radius:16px;overflow:hidden}
.card__head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:11px 15px;border-bottom:1px solid var(--fd-line);background:rgba(0,0,0,.14)}
.card__head h2{font-family:Amiri,serif;font-size:1.05rem;margin:0;color:#fff}
.ptag{border-radius:999px;padding:2px 11px;font-size:.72rem;font-weight:600}
.p-student{background:rgba(111,199,183,.2);color:#9fe6d7}
.p-teacher{background:rgba(200,165,75,.2);color:#E7CF92}
.p-admin{background:rgba(143,227,200,.16);color:var(--fd-mint)}
.p-branch{background:rgba(217,188,108,.16);color:#E7CF92}
.pgno{font-size:.74rem;color:var(--fd-muted)}
.card__head a{margin-inline-start:auto;color:var(--fd-gold);font-size:.78rem;text-decoration:underline}
.card__body{display:grid;grid-template-columns:1fr 1fr;gap:0}
.pane{margin:0;border-inline-end:1px solid var(--fd-line);overflow:hidden;position:relative}
.pane:last-child{border-inline-end:0}
.pane__cap{position:absolute;top:8px;inset-inline-start:8px;z-index:2;
  background:rgba(4,36,27,.85);color:var(--fd-mint);border-radius:8px;
  padding:2px 9px;font-size:.7rem;font-weight:600}
.pane img{display:block;width:100%;height:auto}
.viewport{position:relative;overflow:hidden;background:#fff;
  width:var(--pane-w);height:calc(var(--pane-w) * var(--frame-h) / var(--frame-w))}
.viewport iframe{position:absolute;top:0;inset-inline-start:0;
  width:var(--frame-w);height:var(--frame-h);border:0;
  transform:scale(var(--scale));transform-origin:top right;background:#fff}

/* وضع العرض: تصميم فقط / مباشر فقط / جنبًا إلى جنب */
body.mode-design .pane--live{display:none}
body.mode-design .card__body{grid-template-columns:1fr}
body.mode-live   .pane--design{display:none}
body.mode-live   .card__body{grid-template-columns:1fr}
body.mode-live   .viewport,body.mode-design .viewport{margin:0 auto}

/* تصغيرات الشاشات */
@media (max-width:1180px){
  :root{--pane-w:460px;--scale:.319}
}
@media (max-width:920px){
  .card__body{grid-template-columns:1fr}
  .pane{border-inline-end:0;border-bottom:1px solid var(--fd-line)}
  .pane:last-child{border-bottom:0}
}
@media (max-width:700px){
  :root{--pane-w:100%;--frame-w:1100px;--frame-h:1500px;--scale:.36}
  .viewport{width:100%;height:calc(36vw * 1500 / 1100)}
  .fd-head h1{font-size:1.15rem}
}

/* فهرس علوي بأرقام الصفحات */
.fd-toc{display:flex;gap:6px;flex-wrap:wrap;padding:16px 20px 0;max-width:1500px;margin:0 auto}
.fd-toc a{background:rgba(255,255,255,.06);border:1px solid var(--fd-line);color:var(--fd-muted);
  border-radius:8px;padding:3px 9px;font-size:.74rem;text-decoration:none}
.fd-toc a:hover{background:var(--fd-gold);color:#3A2C05;border-color:var(--fd-gold)}
.fd-note{max-width:1500px;margin:14px auto 0;padding:11px 15px;border-radius:12px;
  background:rgba(200,165,75,.1);border:1px solid rgba(200,165,75,.3);
  color:#EBDDB4;font-size:.82rem}
.fd-note b{color:var(--fd-gold)}

/* قسم اللوحات الإضافية في التطبيق (بلا صفحة مقابلة في ملف التصميم) */
.fd-extras{max-width:1500px;margin:0 auto;padding:6px 20px 0}
.fd-extras__t{font-family:Amiri,serif;font-size:1.2rem;color:var(--fd-gold);
  margin:8px 0 4px;border-top:1px solid var(--fd-line);padding-top:16px}
.fd-extras__p{margin:0 0 14px;color:var(--fd-muted);font-size:.82rem;max-width:900px}
.card--extra{border-style:dashed;border-color:rgba(200,165,75,.45)}
.pane--none{display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,#0C1A16,#0C1A16 12px,#10241D 12px,#10241D 24px);
  min-height:220px}
.pane__void{text-align:center;color:var(--fd-muted);font-size:.8rem;line-height:1.9}
.pane__void small{color:var(--fd-gold);font-size:.72rem}
body.mode-design .card--extra .card__body{grid-template-columns:1fr}