@font-face {
  font-family: "Reem Kufi";
  src: url("assets/ReemKufi.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Noto Naskh Arabic";
  src: url("assets/NotoNaskhArabic-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
.customizer {
  padding: 100px 0;
  background: radial-gradient(circle at 85% 10%, #403021 0, transparent 34%), #171511;
  border-block: 1px solid var(--line);
}
.customizer-head { max-width: 850px; margin-bottom: 35px; }
.customizer-head h2 { font-size: clamp(53px, 5vw, 78px); line-height: 1; margin: 8px 0 12px; }
.customizer-head p { color: var(--muted); font-size: 25px; margin-bottom: 0; }
.customizer-layout { display: grid; grid-template-columns: minmax(0, 1fr) 265px; gap: 26px; align-items: start; }
.customizer-board-shell { min-width: 0; position: relative; }
.aspect-lock { position: absolute; left: 16px; top: 30%; z-index: 2; display: flex; align-items: center; gap: 7px; min-height: 42px; padding: 3px 10px; border: 1px solid #8c9cb1; border-radius: 5px; background: #f6f8fc; color: #1d2939; font: 17px Arial, sans-serif; box-shadow: 0 2px 7px #0002; }
.aspect-lock[aria-pressed="false"] { background: #fff; color: #42546c; }
.aspect-lock-icon { font-size: 20px; line-height: 1; }
.aspect-lock:focus-visible { outline: 3px solid #6a9aff; }
.board-ruler { display: flex; justify-content: space-between; gap: 12px; align-items: center; color: var(--gold-light); font-size: 20px; margin-bottom: 10px; }
.board-ruler small { color: var(--muted); font-size: 17px; }
.board-stage { background: #fff; border: 2px solid #dadde3; padding: 5px; box-shadow: 0 25px 65px #0008; }
.board-svg { display: block; width: 100%; height: auto; aspect-ratio: 900 / 1100; user-select: none; -webkit-user-select: none; overflow: visible; }
.board-svg .editable-text { cursor: grab; touch-action: none; }
.board-svg .editable-text.is-dragging { cursor: grabbing; }
.board-svg .editable-text.is-placeholder { opacity: .45; }
.board-svg .editable-text.is-too-large { fill: #c52020; }
.board-svg .hit-area { fill: transparent; pointer-events: none; }
.board-svg .editable-text.is-selected .hit-area { pointer-events: all; }
.board-svg #other-text-layers > g { cursor: pointer; touch-action: none; }
.board-svg .selection-box { vector-effect: non-scaling-stroke; }
.board-dimensions rect { fill: #e8e9eb; stroke: #2b2b2b; stroke-width: 2.5; }
.board-dimensions text { fill: #191919; font: 39px Arial, sans-serif; direction: ltr; unicode-bidi: isolate; }
.resize-handle .handle-hit { x: -29; y: -29; width: 58px; height: 58px; fill: transparent; pointer-events: all; }
.resize-handle .handle-mark { x: -8; y: -8; width: 16px; height: 16px; fill: #fff; stroke: #6a9aff; stroke-width: 2; pointer-events: none; }
.resize-handle[data-handle="nw"],.resize-handle[data-handle="se"] { cursor: nwse-resize; }
.resize-handle[data-handle="ne"],.resize-handle[data-handle="sw"] { cursor: nesw-resize; }
.board-hint { display: flex; justify-content: space-between; align-items: start; gap: 14px; margin-top: 12px; color: var(--muted); font-size: 19px; }
.board-hint strong { color: var(--gold-light); font-weight: 400; }
.board-status { min-height: 28px; margin: 9px 0 0; font-size: 21px; color: #d8c5a6; }
.board-status.warning { color: #ff7c70; }
.board-status.error { color: #ff8a79; }
.customizer-controls { background: #27231b; border: 1px solid var(--line); padding: 22px; }
.customizer-controls h3 { font-size: 37px; line-height: 1; margin: 0 0 17px; }
.ready-panel { margin-bottom: 15px; padding: 12px; border: 1px solid rgba(225,195,148,.45); border-radius: 5px; background: #332c23; }
.ready-panel > strong { display: block; margin-bottom: 9px; font-size: 23px; font-weight: 400; }
.ready-list { display: grid; gap: 7px; max-height: 270px; overflow: auto; }
.ready-list p { margin: 0; color: var(--muted); font-size: 18px; }
.ready-list button { width: 100%; padding: 8px 10px; border: 1px solid var(--gold); border-radius: 5px; background: #f5e7d0; color: #211910; text-align: right; font-family: inherit; font-size: 20px; cursor: pointer; }
.ready-list button:hover { background: var(--gold); }
.vector-selected-note { margin: 0 0 16px; color: var(--gold-light); font-size: 19px; line-height: 1.35; }
.layer-panel { margin-bottom: 20px; padding: 12px; border: 1px solid rgba(225, 195, 148, .32); background: #1d1b17; border-radius: 5px; }
.layer-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 11px; }
.layer-panel-heading strong { font-size: 24px; font-weight: 400; }
.layer-panel-heading button { border: 1px solid var(--gold); border-radius: 5px; background: var(--gold); color: #211910; padding: 4px 8px; font-size: 19px; white-space: nowrap; }
.layer-list { display: grid; gap: 7px; }
.layer-row { display: flex; min-width: 0; border: 1px solid #585047; border-radius: 5px; background: #302b23; }
.layer-row.is-active { border-color: #8db2ff; background: #292f3b; }
.layer-select { min-width: 0; flex: 1; border: 0; color: #f5ead9; background: transparent; text-align: right; padding: 6px 9px; font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer-remove { flex: none; border: 0; border-inline-start: 1px solid #5e5548; color: #f0c7be; background: transparent; font: 23px Arial, sans-serif; width: 36px; }
.layer-remove:hover { background: #5c3029; }
.customizer-field { display: grid; gap: 7px; margin-bottom: 18px; }
.customizer-field label { font-size: 21px; }
.customizer-field textarea,
.customizer-field select,
.customizer-field input[type="number"] {
  width: 100%;
  background: #fdf7ed;
  color: #292015;
  border: 1px solid #bb9d71;
  border-radius: 5px;
  padding: 8px 10px;
  font-size: 23px;
  line-height: 1.3;
}
.customizer-field textarea { min-height: 125px; resize: vertical; }
.customizer-field select { appearance: auto; min-height: 43px; }
.customizer-measures { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; direction: rtl; }
.customizer-measures .customizer-field { min-width: 0; }
.customizer-measures input { direction: ltr; text-align: center; }
.measure-hint { display: block; color: var(--muted); font-size: 17px; margin: -8px 0 18px; }
.customizer-field input[type="range"] { width: 100%; accent-color: var(--gold); cursor: pointer; }
.customizer-field small { color: var(--muted); font-size: 17px; }
.customizer-size { color: var(--gold-light); font-size: 21px; }
.customizer-controls .btn { width: 100%; margin-top: 4px; }
.customizer-controls .btn-secondary { margin-top: 12px; }
.customizer-footnote { margin: 14px 0 0; color: var(--muted); font-size: 18px; }
@media (max-width: 900px) {
  .customizer-layout { grid-template-columns: minmax(0, 1fr) 225px; gap: 17px; }
  .customizer-controls { padding: 16px; }
}
@media (max-width: 680px) {
  .customizer { padding: 72px 0; }
  .customizer-head h2 { font-size: 58px; }
  .customizer-head p { font-size: 22px; }
  .customizer-layout { display: flex; flex-direction: column; gap: 18px; }
  .customizer-board-shell, .customizer-controls { width: 100%; }
  .board-stage { border-width: 5px; padding: 2px; }
  .aspect-lock { top: 26%; left: 10px; font-size: 13px; padding: 3px 6px; min-height: 33px; }
  .aspect-lock-icon { font-size: 16px; }
  .board-ruler { font-size: 18px; }
  .board-ruler small { font-size: 14px; }
  .board-hint { display: block; font-size: 17px; }
  .board-hint span { display: block; }
  .board-status { font-size: 18px; }
  .customizer-controls { padding: 20px; }
}

.board-svg #text-lines,.board-svg #other-text-layers > g > g{fill:#fff5df;filter:drop-shadow(0 2px 2px rgba(0,0,0,.8))}
.board-svg #text-lines path[fill="none"],.board-svg #other-text-layers path[fill="none"]{stroke:#fff5df}
.ready-list button img{display:block;width:100%;height:54px;object-fit:contain;filter:brightness(0) invert(1)}