:root{
  --ink:#0e1116;
  --panel:#121822;
  --muted:#9aa6b2;
  --border:#2b3444;
  --ok:#20c997;
  --grid:20px;
  --footer-h:48px; /* ارتفاع الفوتر */
  --gap:20px;      /* مسافة هواء أسفل اللوحة قبل الفوتر */
}

html, body {height:100%;}
body{
  background:var(--ink);
  color:#e9eef7;
  font-family:"IBM Plex Sans Arabic",system-ui;
  overflow:hidden;                          /* لا سكرول للصفحة */
padding-bottom: calc(var(--footer-h) + var(--gap)); /* مساحة للفوتر + مسافة أمان */
}

/* هيدر/فوتر بنفس الروح */
.app-header{
  position:sticky;top:0;z-index:10;
  background:linear-gradient(180deg, rgba(14,17,22,.96), rgba(14,17,22,.7));
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border)
}
.app-footer{
  position:fixed; inset:auto 0 0 0; z-index:20; /* زيدنا الزندكس للتأكيد */
  background:linear-gradient(0deg, rgba(14,17,22,.96), rgba(14,17,22,.7));
  backdrop-filter:blur(6px);
  border-top:1px solid var(--border);
  height:var(--footer-h);
  display:flex; align-items:center;
}

.panel{background:#121822;border:1px solid var(--border)}

/* المساحة بين الهيدر والفوتر، الارتفاع يتأقلم JS */
.layout{align-items:flex-start;height:calc(100vh - var(--footer-h) - 76px);} /* إرتفاع أولي، يُصحح برمجيًا */


/* مسافة أمان بين سكشن المحتوى والفوتر */
section.flex-grow-1{
  margin-bottom: var(--gap);
}


/* مسافة أمان بين سكشن المحتوى والفوتر */
section.flex-grow-1{
  margin-bottom: var(--gap);
}




.sidebar{width:320px;flex:0 0 320px; position:sticky; top:80px; z-index:5;}
.sidebar .btn{min-height:38px}

/* اللوحة — سيُضبط ارتفاعها برمجيًا حتى لا تتخطى الفوتر */
.board-viewport{
  position:relative;
  height:300px; /* قيمة أولية — تُستبدل برمجياً */
  border:2px dashed var(--border);
  border-radius:1rem;
  overflow:auto;              /* السكرول داخل البورد */
  will-change:height;
}
.board-content{
  position:absolute;inset:0;transform-origin:0 0;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 1px, transparent var(--grid)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 1px, transparent var(--grid))
}
.fabric-layer{position:absolute;inset:0; z-index:1;}
.html-layer{position:absolute;inset:0; z-index:2; pointer-events:none;}
.block{position:absolute; cursor:grab; user-select:none; pointer-events:auto;}
.block .inner{background:#1b2230;border:1px solid var(--border);border-radius:.9rem;padding:.6rem .8rem;min-width:220px;max-width:780px}
.block.selected{outline:2px dashed rgba(255,255,255,.15);outline-offset:2px}
.muted{color:var(--muted)!important}
.tiny{font-size:.8rem;color:var(--muted)}

/* لوح ألوان */
.palette-head { display:flex; align-items:center; justify-content:space-between; margin:.4rem 0 .25rem }
.palette-title { font-size:.85rem; color:#9aa6b2 }
.palette-row { display:flex; flex-wrap:wrap; gap:.35rem; }
.swatch{width:22px;height:22px;border-radius:6px;border:1px solid rgba(255,255,255,.15);cursor:pointer}
.swatch:focus { outline:2px solid rgba(32,201,151,.6) }

.legend-dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-inline-start:.3rem}