/* المرحلة الأولى من محرر ورقتي المرن */
#toolbarActions{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
#topbar button.tool-btn{
  position:relative;width:38px;height:36px;min-height:36px;padding:0;
  display:inline-grid;place-items:center;font-size:17px;border-radius:9px
}
#topbar button.tool-btn .tool-text{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important
}
#topbar button.tool-btn.primary-action{width:42px}
#topbar button.tool-btn:focus-visible{outline:3px solid var(--a);outline-offset:2px}
#assetBar{
  display:none;align-items:center;gap:7px;min-height:43px;padding:6px 12px;
  background:#fff;border-bottom:1px solid var(--brd);box-shadow:0 3px 12px rgba(9,37,28,.08);
  overflow-x:auto;overflow-y:hidden;white-space:nowrap;z-index:18
}
#assetBar.on{display:flex}
#assetBar .asset-kind{font-size:12px;font-weight:800;color:var(--p);padding-left:8px;border-left:1px solid var(--brd)}
#assetBar button,#assetBar select,#assetBar input[type="number"]{
  min-height:30px;border:1px solid var(--brd);background:#fff;color:var(--p);
  border-radius:8px;padding:4px 8px;font-size:12px;font-weight:700
}
#assetBar button:hover{background:#edf5f1;border-color:var(--p)}
#assetBar input[type="color"]{width:32px;height:30px;border:1px solid var(--brd);border-radius:8px;padding:2px;background:#fff}
.a4[data-frame]:before{
  content:"";position:absolute;inset:7mm;pointer-events:none;z-index:3;
  border-color:var(--frame-color,#1f3b32);border-width:var(--frame-width,2px)
}
.a4[data-frame="simple"]:before{border-style:solid}
.a4[data-frame="double"]:before{border-style:double;border-width:calc(var(--frame-width,2px) * 3)}
.a4[data-frame="dashed"]:before{border-style:dashed}
.a4[data-frame="rounded"]:before{border-style:solid;border-radius:8mm}
.a4[data-frame="school"]:before{
  border-style:dashed;border-radius:4mm;
  box-shadow:0 0 0 3px #fff,0 0 0 5px var(--frame-color,#1f3b32)
}
.a4[data-frame="corners"]:before{
  border:0;
  background:
    linear-gradient(var(--frame-color,#1f3b32),var(--frame-color,#1f3b32)) right top/24mm var(--frame-width,2px) no-repeat,
    linear-gradient(var(--frame-color,#1f3b32),var(--frame-color,#1f3b32)) right top/var(--frame-width,2px) 24mm no-repeat,
    linear-gradient(var(--frame-color,#1f3b32),var(--frame-color,#1f3b32)) left top/24mm var(--frame-width,2px) no-repeat,
    linear-gradient(var(--frame-color,#1f3b32),var(--frame-color,#1f3b32)) left top/var(--frame-width,2px) 24mm no-repeat,
    linear-gradient(var(--frame-color,#1f3b32),var(--frame-color,#1f3b32)) right bottom/24mm var(--frame-width,2px) no-repeat,
    linear-gradient(var(--frame-color,#1f3b32),var(--frame-color,#1f3b32)) right bottom/var(--frame-width,2px) 24mm no-repeat,
    linear-gradient(var(--frame-color,#1f3b32),var(--frame-color,#1f3b32)) left bottom/24mm var(--frame-width,2px) no-repeat,
    linear-gradient(var(--frame-color,#1f3b32),var(--frame-color,#1f3b32)) left bottom/var(--frame-width,2px) 24mm no-repeat
}
.a4 .inner{position:relative;z-index:1}
.free-layer{position:absolute;inset:0;pointer-events:none;z-index:10;overflow:hidden}
.free-item{
  position:absolute;pointer-events:auto;min-width:34px;min-height:28px;
  touch-action:none;user-select:none;transform-origin:center center;
  border:1px solid transparent
}
.free-item.selected{border:2px solid #1683e8;box-shadow:0 0 0 1px rgba(255,255,255,.9)}
.a4.pdf-rendering .free-item,.a4.pdf-rendering .free-item.selected{border-color:transparent!important;box-shadow:none!important}
.free-item.locked{border-color:#8a95a0}
.free-item .free-content{width:100%;height:100%;overflow:hidden;opacity:var(--free-opacity,1)}
.free-item[data-kind="image"] .free-content img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.free-item[data-kind="text"] .free-content{
  display:flex;align-items:center;min-height:100%;padding:7px;
  font-size:22px;line-height:1.45;white-space:pre-wrap;word-break:break-word;
  background:rgba(255,255,255,.82);cursor:text;user-select:text
}
.free-item[data-kind="text"] .free-content:focus{outline:0;background:rgba(235,248,255,.94)}
.free-item[data-kind="shape"] .free-content{overflow:visible}
.shape-visual{position:relative;width:100%;height:100%;background:var(--shape-fill,#f3bd3f);border:var(--shape-stroke-width,2px) solid var(--shape-stroke,#1f3b32)}
.shape-visual[data-shape="rounded"]{border-radius:22px}
.shape-visual[data-shape="circle"]{border-radius:50%}
.shape-visual[data-shape="line"],.shape-visual[data-shape="arrow"]{
  position:absolute;left:0;top:50%;height:0;background:none;border:0;
  border-top:var(--shape-stroke-width,4px) solid var(--shape-stroke,#1f3b32)
}
.shape-visual[data-shape="arrow"]:after{
  content:"";position:absolute;left:-2px;top:calc(var(--shape-stroke-width,4px) * -2.2);
  border-top:calc(var(--shape-stroke-width,4px) * 2) solid transparent;
  border-bottom:calc(var(--shape-stroke-width,4px) * 2) solid transparent;
  border-right:calc(var(--shape-stroke-width,4px) * 3) solid var(--shape-stroke,#1f3b32)
}
.shape-visual[data-shape="triangle"]{
  width:0;height:0;margin:auto;background:none;border:0;
  border-left:calc(var(--shape-width,110px) / 2) solid transparent;
  border-right:calc(var(--shape-width,110px) / 2) solid transparent;
  border-bottom:var(--shape-height,100px) solid var(--shape-fill,#f3bd3f)
}
.shape-visual[data-shape="bubble"]{border-radius:20px}
.shape-visual[data-shape="bubble"]:after{
  content:"";position:absolute;right:18px;bottom:-18px;
  border-top:20px solid var(--shape-fill,#f3bd3f);border-left:18px solid transparent
}
.free-item.layer-hidden{opacity:.2!important;filter:grayscale(1)}
.free-item.layer-hidden:after{
  content:"مخفي";position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(255,255,255,.7);color:#913c2b;font-size:12px;font-weight:900
}
.a4.pdf-rendering .free-item.layer-hidden,.a4.pdf-rendering .canvas-guide{display:none!important}
.free-item.grouped{outline:1px dashed rgba(22,131,232,.65);outline-offset:3px}
.canvas-guide{
  display:none;position:absolute;pointer-events:none;z-index:999;background:#e8488b;
  box-shadow:0 0 0 1px rgba(255,255,255,.85)
}
.canvas-guide.on{display:block}
.canvas-guide.vertical{top:0;bottom:0;width:1px}
.canvas-guide.horizontal{left:0;right:0;height:1px}
.layer-list{display:flex;flex-direction:column;gap:7px;max-height:55vh;overflow:auto}
.layer-row{
  display:grid;grid-template-columns:34px minmax(0,1fr) repeat(4,32px);align-items:center;
  gap:5px;padding:7px;border:1px solid var(--brd);border-radius:10px;background:#fff
}
.layer-row.active{border-color:#1683e8;background:#eef7ff}
.layer-row .layer-icon{font-size:18px;text-align:center}
.layer-row .layer-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800;color:var(--p)}
.layer-row button{width:31px;height:30px;padding:0;border:1px solid var(--brd);border-radius:7px;background:#f7f9f8}
.shape-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.shape-choice{
  min-height:72px;display:grid;place-items:center;gap:4px;border:2px solid var(--brd);
  border-radius:12px;background:#fff;color:var(--p);font-weight:800
}
.shape-choice:hover{border-color:var(--a);background:#fff9e9}
.shape-sample{display:block;width:42px;height:28px;background:#efbd49;border:2px solid #1f3b32}
.shape-sample.circle{width:32px;height:32px;border-radius:50%}
.shape-sample.rounded{border-radius:10px}
.shape-sample.line,.shape-sample.arrow{height:0;background:none;border:0;border-top:4px solid #1f3b32}
.shape-sample.arrow:after{content:"◀";position:relative;left:21px;top:-13px}
.shape-sample.triangle{width:0;height:0;background:none;border:0;border-left:18px solid transparent;border-right:18px solid transparent;border-bottom:32px solid #efbd49}
.shape-sample.bubble{border-radius:10px}
.zoom-control{display:flex;align-items:center;gap:3px}
.zoom-control button,.zoom-control output{
  width:32px!important;height:32px!important;min-height:32px!important;padding:0!important;
  display:grid;place-items:center;border-radius:8px!important
}
.zoom-control output{width:48px!important;font-size:11px;font-weight:900;background:rgba(255,255,255,.1)}
.free-controls{
  display:none;position:absolute;top:-34px;right:0;align-items:center;gap:3px;
  padding:3px;background:#fff;border:1px solid #ccd5da;border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,.14);z-index:4;direction:rtl
}
.free-item.selected>.free-controls{display:flex}
.free-controls button{
  width:25px;height:24px;border:0;border-radius:5px;background:#edf3f6;
  font-size:12px;color:#15382d;padding:0
}
.free-controls button:hover{background:#e8b23d}
.free-opacity-control{
  width:76px;height:24px;display:flex;align-items:center;gap:3px;padding:0 4px;
  border-radius:6px;background:#edf3f6;color:#15382d;font-size:11px
}
.free-opacity-control input{width:52px;height:5px;margin:0;accent-color:#e8b23d;cursor:pointer}
.asset-opacity input[type="range"]{
  width:110px;height:7px;accent-color:#2f8069;
  background:linear-gradient(90deg,transparent,#2f8069);border-radius:8px;cursor:pointer
}
.resize-handle{
  display:none;position:absolute;width:12px;height:12px;border:2px solid #fff;
  border-radius:50%;background:#1683e8;z-index:5
}
.free-item.selected:not(.locked)>.resize-handle{display:block}
.resize-handle[data-handle="nw"]{left:-7px;top:-7px;cursor:nwse-resize}
.resize-handle[data-handle="ne"]{right:-7px;top:-7px;cursor:nesw-resize}
.resize-handle[data-handle="sw"]{left:-7px;bottom:-7px;cursor:nesw-resize}
.resize-handle[data-handle="se"]{right:-7px;bottom:-7px;cursor:nwse-resize}
.rotate-handle{
  display:none;position:absolute;bottom:-33px;left:50%;width:26px;height:26px;
  transform:translateX(-50%);border:2px solid #fff;border-radius:50%;
  background:#1683e8;color:#fff;font-size:14px;line-height:20px;z-index:5;cursor:grab
}
.free-item.selected:not(.locked)>.rotate-handle{display:block}
.a4.image-drop-ready{box-shadow:0 0 0 5px var(--a),0 8px 24px rgba(0,0,0,.18)}
.mimg.image-target,.iadd.image-target,.mbx.image-target{outline:3px solid var(--a);outline-offset:2px}
.mbx img{width:100%;height:100%;object-fit:contain!important;padding:1mm}
.irow img{object-fit:contain!important;background:#fff}
.frame-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.frame-choice{
  min-height:70px;border:2px solid var(--brd);border-radius:10px;background:#fff;
  color:var(--p);font-weight:800;padding:8px
}
.frame-choice:hover,.frame-choice.on{border-color:var(--a);background:#fffaea}
.frame-preview{display:block;width:52px;height:32px;margin:0 auto 5px;border-color:currentColor}
.frame-preview.simple{border:2px solid}.frame-preview.double{border:5px double}
.frame-preview.dashed{border:2px dashed}.frame-preview.rounded{border:2px solid;border-radius:10px}
.frame-preview.school{border:2px dashed;box-shadow:0 0 0 2px #fff,0 0 0 4px currentColor}
.frame-preview.corners{
  background:
    linear-gradient(currentColor,currentColor) right top/16px 2px no-repeat,
    linear-gradient(currentColor,currentColor) right top/2px 16px no-repeat,
    linear-gradient(currentColor,currentColor) left bottom/16px 2px no-repeat,
    linear-gradient(currentColor,currentColor) left bottom/2px 16px no-repeat
}
@media print{
  .free-controls,.resize-handle,.rotate-handle,#assetBar{display:none!important}
  .free-item,.free-item.selected{border-color:transparent!important;box-shadow:none!important}
  .free-item.layer-hidden,.canvas-guide{display:none!important}
}
@media(max-width:767px){
  #topbar button.tool-btn{width:38px;min-width:38px;height:38px;min-height:38px}
  #assetBar{padding:5px 8px}
  .free-controls{top:-38px}
  .frame-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shape-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .layer-row{grid-template-columns:30px minmax(100px,1fr) repeat(4,30px)}
}