/* The studio canvas editor's styles. Skinned by the host's shadcn tokens: see editor.js. */

/* ── المحرّر كما في كانفا ─────────────────────────────────────────────────
   التحويم: حدّ أزرق 1px بإزاحة 2px واسم العنصر فوقه. التحديد: حدّ 2px وتظليل خفيف ومقاسه،
   وشريط أدوات عائم فوقه (PixelCraft من UI8، وPlate Block Selection من 21st.dev). */
#hov,#selbox{position:absolute;pointer-events:none;display:none;border-radius:2px;z-index:6}
#hov.on,#selbox.on{display:block}
#hov{outline:1px solid hsl(var(--primary));outline-offset:0}
#selbox{outline:2px solid hsl(var(--primary));background:hsl(var(--primary)/.06)}
#hov b,#selbox b{position:absolute;bottom:100%;inset-inline-start:-1px;margin-bottom:4px;white-space:nowrap;
  font-size:12px;font-weight:500;line-height:22px;height:22px;padding:0 8px;border-radius:4px;
  background:hsl(var(--primary));color:#fff;direction:rtl;font-variant-numeric:tabular-nums}
#hov b{background:hsl(var(--foreground));color:hsl(var(--background))}
#hov.low b{bottom:auto;top:100%;margin:4px 0 0}
#selbox b{bottom:auto;top:100%;margin:6px 0 0}
/* eight handles, as in Photoshop: corners scale, sides stretch (editor.js wireResize) */
#selbox .rh{display:none;position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:3px;
  background:#fff;border:2px solid hsl(var(--primary));pointer-events:auto;touch-action:none;z-index:2}
#selbox.el .rh{display:block}
#selbox .rh[data-h="nw"]{left:0;top:0}
#selbox .rh[data-h="n"]{left:50%;top:0}
#selbox .rh[data-h="ne"]{left:100%;top:0}
#selbox .rh[data-h="e"]{left:100%;top:50%}
#selbox .rh[data-h="se"]{left:100%;top:100%}
#selbox .rh[data-h="s"]{left:50%;top:100%}
#selbox .rh[data-h="sw"]{left:0;top:100%}
#selbox .rh[data-h="w"]{left:0;top:50%}
#selbox .rh[data-h="n"],#selbox .rh[data-h="s"]{width:18px;height:8px;margin:-4px 0 0 -9px;border-radius:4px}
#selbox .rh[data-h="e"],#selbox .rh[data-h="w"]{width:8px;height:18px;margin:-9px 0 0 -4px;border-radius:4px}
@media (pointer:coarse){#selbox .rh{width:18px;height:18px;margin:-9px 0 0 -9px}}
#snapx,#snapy{position:absolute;display:none;pointer-events:none;z-index:7;background:#E0007A}
#snapx{top:0;bottom:0;width:1px}
#snapy{left:0;right:0;height:1px}
#snapx.on,#snapy.on{display:block}
#guides .hline{position:absolute;left:0;right:0;border-top:1px dashed #00B7EB}
#seltools{position:absolute;z-index:20;display:flex;align-items:center;gap:2px;padding:4px;border-radius:var(--radius-lg);
  background:hsl(var(--card));border:1px solid hsl(var(--border));box-shadow:var(--shadow-elevated)}
#seltools[hidden]{display:none}
#seltools button{width:36px;height:36px;border-radius:var(--radius);display:grid;place-items:center;
  color:hsl(var(--foreground));transition:background-color .15s ease-out,color .15s ease-out}
#seltools button:hover:not([disabled]){background:hsl(var(--muted))}
#seltools button.danger{color:hsl(var(--danger-soft-foreground))}
#seltools button[disabled]{color:hsl(var(--disabled-fg));cursor:not-allowed}
#seltools svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#seltools .sep{width:1px;height:20px;background:hsl(var(--border));margin:0 2px}
.ruler{position:absolute;z-index:5;pointer-events:none;color:hsl(var(--muted-foreground));overflow:hidden;direction:ltr}
.ruler i{position:absolute;background:currentColor;opacity:.45}
#rulx i{bottom:0;width:1px;height:5px}
#ruly i{right:0;height:1px;width:5px}
.ruler i.M{opacity:.9}
#rulx i.M{height:9px}
#ruly i.M{width:9px}
.ruler em{position:absolute;font-size:10px;font-weight:500;line-height:1;font-style:normal;font-variant-numeric:tabular-nums}
#rulx em{top:1px;transform:translateX(3px)}
#ruly em{left:1px;transform:translateY(3px);font-size:9px}

/* «إضافة» */
.addg{display:flex;flex-direction:column;gap:8px;padding:4px 0 16px;border-bottom:1px solid hsl(var(--border))}
.addg:last-child{border-bottom:0}
.addg h4{font-size:var(--fs-caption);font-weight:600;color:hsl(var(--foreground))}
.addrow{display:flex;flex-wrap:wrap;gap:8px}
.addb{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:84px;flex:1 1 84px;padding:12px 8px;
  border:1px solid hsl(var(--border));border-radius:var(--radius-lg);background:hsl(var(--card));
  font-size:var(--fs-micro);font-weight:500;color:hsl(var(--foreground));
  transition:border-color .15s ease-out,background-color .15s ease-out,transform .15s ease-out}
.addb:hover{border-color:hsl(var(--primary)/.45);background:hsl(var(--primary)/.04)}
.addb:active{transform:scale(.97)}
.addb .ai{height:28px;display:grid;place-items:center;color:hsl(var(--primary-text))}
.addb .ai svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.addb .ai img{max-height:22px;max-width:64px;display:block}
.selhead{font-size:var(--fs-xs);color:hsl(var(--muted-foreground));font-variant-numeric:tabular-nums}
.proprow{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:var(--fs-xs)}

/* ── المحرّر كما في كانفا، الجولة الثانية: تحديد متعدّد، قفل، محاذاة، طبقات، قائمة الزر الأيمن ── */
#holder .selx{position:absolute;pointer-events:none;z-index:6;border-radius:2px;outline:1.5px solid hsl(var(--primary))}
#selbox.multi{outline-style:dashed;outline-width:1.5px;background:transparent}
#selbox.locked{outline-color:hsl(var(--muted-foreground));background:hsl(var(--muted-foreground)/.06)}
#selbox.locked b{background:hsl(var(--muted-foreground))}
#selbox.editing{outline-width:1.5px;background:transparent}
#marq{position:absolute;display:none;pointer-events:none;z-index:8;border-radius:2px;
  outline:1px solid hsl(var(--primary));background:hsl(var(--primary)/.08)}
#marq.on{display:block}
#seltools button[hidden]{display:none}
#seltools button[aria-pressed="true"],#seltools button[aria-expanded="true"]{background:hsl(var(--accent));color:hsl(var(--accent-foreground))}
#alignpop{position:absolute;z-index:21;display:grid;grid-template-columns:repeat(4,36px);gap:2px;padding:6px;
  border-radius:var(--radius-lg);background:hsl(var(--card));border:1px solid hsl(var(--border));box-shadow:var(--shadow-elevated);
  transform-origin:top center;animation:pop .14s cubic-bezier(.2,.8,.2,1)}
#alignpop[hidden]{display:none}
#alignpop .cap{grid-column:1/-1;font-size:var(--fs-micro);font-weight:600;color:hsl(var(--muted-foreground));padding:2px 6px 4px}
#alignpop button{width:36px;height:36px;border-radius:var(--radius);display:grid;place-items:center;color:hsl(var(--foreground))}
#alignpop button:hover:not([disabled]){background:hsl(var(--muted))}
#alignpop button[disabled]{color:hsl(var(--disabled-fg));cursor:not-allowed}
#alignpop svg,.aligns svg,.lrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.aligns{display:flex;flex-wrap:wrap;gap:2px;justify-content:flex-end}
/* the label on its own line and the eight buttons in one row under it, at any panel width */
.proprow.alrow{flex-direction:column;align-items:stretch;gap:6px}
.alrow .aligns{justify-content:flex-start}
.aligns .mini.ico{width:32px;height:32px;padding:0;display:grid;place-items:center}
#guides.ghost .lbl{display:none}
#guides.ghost .trim{box-shadow:none}
.flash{position:absolute;pointer-events:none;z-index:7;border-radius:3px;outline:2px solid hsl(var(--primary));
  background:hsl(var(--primary)/.14);animation:flash .6s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes flash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
@keyframes pop{from{opacity:0;transform:scale(.97)}}
#ctx{position:fixed;z-index:70;min-width:236px;padding:6px;border-radius:var(--radius-lg);background:hsl(var(--card));
  border:1px solid hsl(var(--border));box-shadow:var(--shadow-overlay);animation:pop .12s cubic-bezier(.2,.8,.2,1);transform-origin:top left}
#ctx[hidden]{display:none}
#ctx button{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;height:34px;padding:0 10px;
  border-radius:6px;font-size:var(--fs-xs);text-align:start;color:hsl(var(--foreground))}
#ctx button:hover:not([disabled]),#ctx button:focus-visible{background:hsl(var(--muted));outline:none}
#ctx button[disabled]{color:hsl(var(--disabled-fg));cursor:not-allowed}
#ctx hr{border:0;border-top:1px solid hsl(var(--border));margin:4px 2px}
#ctx kbd{border:0;background:none;min-width:0;height:auto;padding:0;font-size:var(--fs-micro);color:hsl(var(--muted-foreground))}
kbd{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 7px;
  border:1px solid hsl(var(--input));border-bottom-width:2px;border-radius:6px;background:hsl(var(--muted));
  font:500 12px/1 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;direction:ltr;color:hsl(var(--foreground));
  font-variant-numeric:tabular-nums;white-space:nowrap}
.qrrow{display:flex;gap:8px}
.qrrow .tin{flex:1;min-width:0}
.selg .note{margin:0}
/* «الطبقات» */
.layers{list-style:none;display:flex;flex-direction:column;gap:1px;margin-top:4px}
.lrow{display:flex;align-items:center;gap:4px;min-height:38px;padding-inline-end:4px;border-radius:var(--radius);cursor:pointer;
  font-size:var(--fs-xs);position:relative;outline:none;transition:background-color .12s ease-out}
.lrow:hover{background:hsl(var(--muted))}
.lrow:focus-visible{box-shadow:inset 0 0 0 2px hsl(var(--ring))}
.lrow[aria-selected="true"]{background:hsl(var(--accent));color:hsl(var(--accent-foreground))}
.lrow.off .lname,.lrow.off .lic{opacity:.45}
.lrow.lift{opacity:.45}
.lrow .lname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow .lname small{font-size:var(--fs-micro);color:hsl(var(--muted-foreground));margin-inline-start:8px}
.lrow[aria-selected="true"] .lname small{color:inherit;opacity:.75}
.lrow .lic{width:18px;height:18px;flex:0 0 auto;color:hsl(var(--muted-foreground));display:grid;place-items:center}
.lrow button{width:30px;height:30px;flex:0 0 auto;display:grid;place-items:center;border-radius:6px;color:hsl(var(--muted-foreground))}
.lrow button:hover:not([disabled]){background:hsl(var(--background));color:hsl(var(--foreground))}
.lrow button[disabled]{opacity:.35;cursor:not-allowed}
.lrow > button:not(.car){opacity:0;transition:opacity .12s ease-out}
.lrow:hover > button,.lrow:focus-within > button,.lrow > button[aria-pressed="true"]{opacity:1}
@media (hover:none){ .lrow > button:not(.car){opacity:1} }
.lrow .car{width:24px}
.lrow.drop-above::before,.lrow.drop-below::after{content:"";position:absolute;inset-inline:6px;height:2px;border-radius:1px;background:hsl(var(--primary))}
.lrow.drop-above::before{top:-1px}
.lrow.drop-below::after{bottom:-1px}
/* فحص الطباعة */
#preBox{max-width:560px}
#preBox p{margin-bottom:14px}
.pre-list{list-style:none;display:flex;flex-direction:column;gap:6px;max-height:min(52vh,460px);overflow:auto;margin-bottom:18px}
.pre-list button{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:start;padding:10px 12px;
  border:1px solid hsl(var(--border));border-radius:var(--radius-lg);font-size:var(--fs-xs);line-height:var(--lh-snug);
  transition:border-color .15s ease-out,background-color .15s ease-out}
.pre-list button:hover{border-color:hsl(var(--primary)/.45);background:hsl(var(--primary)/.03)}
.pre-pg{font-size:var(--fs-caption);font-weight:600;margin-top:6px}
.sev{width:8px;height:8px;border-radius:50%;margin-top:7px;flex:0 0 auto}
.sev.err{background:hsl(0 72% 51%)}
.sev.warn{background:hsl(38 92% 50%)}
.sev.info{background:hsl(var(--muted-foreground))}
/* الاختصارات */
#keysBox{max-width:720px}
.keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:4px 32px;margin-bottom:20px;
  max-height:calc(100dvh - 250px);overflow:auto}
.keys section{display:flex;flex-direction:column}
.keys h4{font-size:var(--fs-caption);font-weight:600;color:hsl(var(--primary-text));margin:12px 0 4px}
.kr{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:5px 0;border-bottom:1px solid hsl(var(--border));
  font-size:var(--fs-xs)}
.kr:last-child{border-bottom:0}
.kc{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;font-size:var(--fs-micro);color:hsl(var(--muted-foreground))}
.ks{display:inline-flex;gap:4px;direction:ltr}
@media (prefers-reduced-motion:reduce){ #ctx,#alignpop{animation:none} .flash{display:none} }
@media (pointer:coarse){
  #seltools button{width:44px;height:44px}
  #alignpop{grid-template-columns:repeat(4,44px)}
  #alignpop button,.aligns .mini.ico{width:44px;height:44px}
  #ctx button{height:44px}
  .lrow{min-height:44px}
  .lrow button,.lrow .car{width:44px;height:44px}
}
/* 360px Android: eight 44px buttons would run past the edge; they touch each other, so the hit areas stay continuous */
@media (pointer:coarse) and (max-width:380px){
  #seltools{gap:0}
  #seltools button{width:40px}
}



/* ── the layout, after PixelCraft ── */
.ed-stage{background-color:var(--page);
  background-image:radial-gradient(hsl(var(--muted-foreground)/.28) 1px,transparent 1.3px);background-size:18px 18px}
.ed-stage.dock-bottom{padding-bottom:96px}
.ed-stage.dock-bottom .zoom{inset-block-end:auto;inset-block-start:14px}
.ed-stage.dock-side{padding-inline-end:96px}
#dock{position:absolute;z-index:19;display:flex;gap:2px;padding:6px;
  border-radius:var(--radius-xl);background:hsl(var(--card));border:1px solid hsl(var(--border));box-shadow:var(--shadow-elevated)}
#dock[hidden]{display:none}
.dock-bottom #dock{inset-block-end:16px;left:50%;transform:translateX(-50%)}
.dock-side #dock{flex-direction:column;inset-inline-end:16px;top:50%;transform:translateY(-50%)}
#dock button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:60px;height:56px;padding:0 10px;
  border-radius:var(--radius-lg);font-size:var(--fs-micro);font-weight:500;color:hsl(var(--foreground));
  transition:background-color .15s ease-out,color .15s ease-out}
#dock button:hover{background:hsl(var(--muted))}
#dock button[aria-expanded="true"]{background:hsl(var(--accent));color:hsl(var(--accent-foreground))}
#dock button:active{transform:scale(.97)}
#dock svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#dockpop{position:absolute;z-index:22;width:300px;display:flex;flex-direction:column;gap:10px;padding:14px;
  border-radius:var(--radius-xl);background:hsl(var(--card));border:1px solid hsl(var(--border));box-shadow:var(--shadow-overlay);
  animation:pop .14s cubic-bezier(.2,.8,.2,1)}
#dockpop[hidden]{display:none}
#dockpop h4{font-size:var(--fs-caption);font-weight:600}
#dockpop .note{margin:0}
/* the layers beside the canvas */
.ed-side{flex:0 0 272px;min-width:0;display:flex;flex-direction:column;min-height:0;background:hsl(var(--card));
  border-inline-end:1px solid hsl(var(--border))}
.ed-side[hidden]{display:none}
.ed-side-h{display:flex;align-items:center;justify-content:space-between;gap:8px;height:49px;padding:0 12px 0 8px;
  border-bottom:1px solid hsl(var(--border));font-size:var(--fs-xs)}
.ed-side-h button{width:32px;height:32px;display:grid;place-items:center;border-radius:var(--radius);color:hsl(var(--muted-foreground))}
.ed-side-h button:hover{background:hsl(var(--muted));color:hsl(var(--foreground))}
.ed-side-h svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#pLayers.docked{display:flex;flex:1 1 auto}
/* exact size and position */
.spcap{font-size:var(--fs-micro);font-weight:600;color:hsl(var(--muted-foreground))}
.sizepos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.spf{display:flex;align-items:center;gap:6px;min-width:0;height:36px;padding:0 10px;border:1px solid hsl(var(--input));border-radius:var(--radius);
  background:hsl(var(--muted));direction:ltr}
.spf:focus-within{border-color:hsl(var(--ring));box-shadow:0 0 0 2px hsl(var(--ring)/.18)}
.spf span{font-size:var(--fs-micro);font-weight:600;color:hsl(var(--muted-foreground));width:12px}
.spf input{flex:1;width:100%;min-width:0;border:0;background:none;outline:0;font:inherit;font-size:var(--fs-xs);
  font-variant-numeric:tabular-nums;color:hsl(var(--foreground));-moz-appearance:textfield}
.spf input::-webkit-inner-spin-button,.spf input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.spf:has(input:disabled){opacity:.55}
@media (pointer:coarse){ .spf{height:44px} .spf input{font-size:16px} #dock button{height:60px} }
@media (max-width:640px){ #dock,#dockpop{display:none !important} }
@media (prefers-reduced-motion:reduce){ #dockpop{animation:none} }

/* «الرفوعات»: the illustration shelf beside the design (editor.js buildUploads) */
.up-pane{position:fixed;z-index:40;width:min(340px,calc(100vw - 16px));display:flex;flex-direction:column;gap:10px;padding:14px;
  background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius-xl);box-shadow:var(--shadow-overlay);
  -webkit-user-select:none;user-select:none}
.up-pane[hidden]{display:none}
.up-pane.over{outline:2px dashed hsl(var(--primary));outline-offset:-6px}
.up-h{display:flex;align-items:center;justify-content:space-between}
.up-h b{font-size:15px}
.up-x{width:32px;height:32px;display:grid;place-items:center;border-radius:var(--radius);border:0;background:transparent;color:hsl(var(--muted-foreground));cursor:pointer}
.up-x:hover{background:hsl(var(--muted))}
.up-x svg,.up-del svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.up-tabs{display:flex;flex-wrap:wrap;gap:6px}
.up-tabs .mini.on{background:hsl(var(--primary));color:#fff;border-color:hsl(var(--primary))}
.up-grid{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-content:start;padding:2px}
.up-cell{position:relative;aspect-ratio:1;border-radius:var(--radius);background:#fff center/84% no-repeat;border:1px solid hsl(var(--border));
  cursor:grab;transition:border-color .15s,box-shadow .15s}
.up-cell:hover,.up-cell:focus-visible{border-color:hsl(var(--primary));box-shadow:0 0 0 3px hsl(var(--primary)/.15);outline:0}
.up-cell:active{cursor:grabbing}
.up-del{position:absolute;top:4px;inset-inline-end:4px;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;border:0;
  background:hsl(var(--foreground)/.75);color:#fff;cursor:pointer;opacity:0;transition:opacity .15s}
.up-cell:hover .up-del,.up-cell:focus-within .up-del{opacity:1}
.up-empty{grid-column:1/-1;color:hsl(var(--muted-foreground));font-size:13px;line-height:1.6;padding:16px 4px}
.up-f{display:flex;flex-direction:column;gap:6px}
.up-note{font-size:12px;color:hsl(var(--muted-foreground));line-height:1.5}