/* صانع GIF (14a) — /gif/. The editor: the preview in the middle, the tools beside it (desktop) or under it (phones).
   Same family as the games pages: paper panels, ink controls, soft corners (garden.css zeroes corners at zero
   specificity, so every corner here carries !important). One accent of its own: the yellow trim frame. */
.gif-page{
  --gf-acc:#F2B400; --gf-acc-ink:#2A1F00; --gf-seg-on:var(--paper,#fff); --gf-shade:rgba(10,12,14,.56);
  --gf-check-a:#ffffff; --gf-check-b:#E9EAEC; --strip-bg:#DADCDF;
  --gf-stage-h:clamp(300px,calc(100vh - 400px),760px);
}
html[data-theme="dark"] .gif-page{--gf-seg-on:var(--sand); --gf-check-a:#2A2B2F; --gf-check-b:#202125; --strip-bg:#28292D}
.gf{width:100%;max-width:1400px;margin:0 auto;padding:14px 24px 48px;box-sizing:border-box}
.gf *,.gf *::before,.gf *::after{box-sizing:border-box}
.gf [hidden]{display:none!important}
.gf svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:where(.gf) button{font-family:var(--font);color:inherit;-webkit-tap-highlight-color:transparent}
.gf :is(button,input,textarea,[tabindex]):focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---------- head ---------- */
.gf-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 14px;min-height:48px}
.gf-title{display:flex;align-items:center;gap:6px;min-width:0}
.gf-title-t{min-width:0}
.gf-title h1{margin:0;font:700 26px/1.2 var(--font);color:var(--ink)}
.gf-safe{display:flex;align-items:center;gap:5px;margin:2px 0 0;font:400 13px/1.4 var(--font);color:var(--ink-3)}
.gf-safe svg{width:14px;height:14px;flex:none}
.gf-headacts{display:flex;align-items:center;gap:4px;flex:none}
.gf[data-state="empty"] .gf-headacts > :not(#gfHelp):not([data-kg-install]){display:none!important}
/* 14l: «أضفه لشاشتك» sits in the head before a file is open; on phones it steps aside once editing starts (room for the title) */
@media (max-width:479px){.gf:not([data-state="empty"]) .gf-headacts > [data-kg-install]{display:none}}
.gf-ico{display:inline-grid;place-items:center;width:40px;height:40px;flex:none;padding:0;border:0;background:none;color:var(--ink);cursor:pointer;text-decoration:none;transition:background-color var(--d1)}
.gf-ico svg{width:21px;height:21px}
.gf-ico.sm{width:36px;height:36px}.gf-ico.sm svg{width:18px;height:18px}
.gf-ico:hover:not(:disabled){background:var(--tile-2)}
.gf-ico:disabled{opacity:.32;cursor:default}
.gf-pill{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border:1px solid var(--line-2);background:var(--paper);color:var(--ink);font:500 14px var(--font);cursor:pointer;white-space:nowrap;transition:border-color var(--d1)}
.gf-pill svg{width:18px;height:18px}
.gf-pill:hover{border-color:var(--ink)}
html[data-look="garden"] .gf :is(.gf-ico,.gf-play,.gf-sws button,.gf-sw-pick,.gf-li-n,.gf-spin,.gf-h,.gf-dot){border-radius:50%!important}
html[data-look="garden"] .gf :is(.gf-pill,.gf-here,.gf-crop-dim,.gf-badge,.gf-bar,.gf-bar i,.gf-sw i){border-radius:999px!important}

/* ---------- the empty state: drop a file ---------- */
.gf-drop{position:relative;display:grid;place-items:center;min-height:min(70vh,640px);padding:40px 20px;border:1.5px dashed var(--line-2);background:var(--tile);text-align:center;cursor:pointer;transition:border-color var(--d1),background-color var(--d1)}
.gf-drop:hover{border-color:var(--ink-3)}
html[data-look="garden"] .gf :is(.gf-drop,.gf-stage,.gf-panel,.gf-result,.gf-res-img,.gf-dragover > div,.gf-modes button,.gf-tool,.gf-filters i){border-radius:var(--r-card)!important}
.gf-drop-in{display:flex;flex-direction:column;align-items:center;max-width:560px;cursor:default}
.gf-drop-art{width:min(260px,70vw);color:var(--ink);cursor:pointer}
.gf-drop-art .mood{width:100%;height:auto;display:block}
.gf-drop-art .mood :is(.fr,.p){transform-box:fill-box;transform-origin:center}
.gf-drop-art .mood .fr{animation:gfFrame 1.5s steps(1) infinite}
.gf-drop-art .mood .f2{animation-delay:.5s}.gf-drop-art .mood .f3{animation-delay:1s}
.gf-drop-art .mood .f2 .p{transform-origin:50% 100%;animation:gfHop .5s ease-out infinite alternate}
@keyframes gfFrame{0%{opacity:1}33.3%,100%{opacity:.35}}
@keyframes gfHop{to{transform:translateY(-3px)}}
.gf-drop h2{margin:18px 0 8px;font:700 clamp(22px,3.2vw,30px)/1.3 var(--font);color:var(--ink)}
.gf-drop-sub{margin:0 0 20px;font:400 16px/1.7 var(--font);color:var(--ink-2)}
html[data-look] .gf :is(.gf-drop,.gf-keys) kbd{font-family:var(--font)!important;letter-spacing:0;display:inline-block;padding:1px 7px;border:1px solid var(--line-2);border-bottom-width:2px;background:var(--paper);font:500 12.5px/1.6 var(--font);color:var(--ink)}
.gf-big{min-height:52px!important;padding:0 26px!important;font:700 17px var(--font)!important}
.gf-big svg{width:22px;height:22px}
.gf-drop-kinds{margin:16px 0 0;max-width:46ch;font:400 14px/1.7 var(--font);color:var(--ink-3)}
.gf-feats{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.gf-feats li{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border:1px solid var(--line);background:var(--paper);font:500 13.5px var(--font);color:var(--ink-2)}
.gf-feats svg{width:17px;height:17px;color:var(--ink)}
html[data-look="garden"] .gf :is(.gf-feats li,.gf-privacy){border-radius:999px!important}
.gf-privacy{display:inline-flex;align-items:center;gap:7px;margin:20px 0 0;padding:8px 14px;background:color-mix(in srgb,var(--gf-acc) 18%,var(--paper));font:500 13.5px/1.5 var(--font);color:var(--ink);text-align:start}
.gf-privacy svg{width:16px;height:16px;flex:none}
.gf-opening{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:color-mix(in srgb,var(--tile) 88%,transparent);font:500 15px var(--font);color:var(--ink)}
.gf-err{position:absolute;inset-inline:16px;bottom:16px;margin:0;padding:12px 14px;background:color-mix(in srgb,var(--danger) 12%,var(--paper));color:var(--ink);font:500 14px/1.6 var(--font)}
.gf-spin{display:inline-block;width:22px;height:22px;flex:none;border:2.5px solid var(--line-2);border-top-color:var(--ink);animation:gfSpin .8s linear infinite}
@keyframes gfSpin{to{transform:rotate(360deg)}}

/* ---------- the editor ---------- */
.gf-editor{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:22px;align-items:start}
.gf-stagecol{min-width:0}
.gf.gf-long{--gf-stage-h:clamp(280px,calc(100vh - 436px),740px)}
.gf-stage{position:relative;display:grid;place-items:center;height:var(--gf-stage-h);background:var(--tile-2);overflow:hidden;user-select:none;-webkit-user-select:none}
.gf.gf-alpha .gf-stage,.gf-res-img.alpha{background-color:var(--gf-check-a);background-image:conic-gradient(var(--gf-check-b) 25%,transparent 0 50%,var(--gf-check-b) 0 75%,transparent 0);background-size:18px 18px}
.gf-stage canvas{grid-area:1/1;display:block;max-width:100%;max-height:100%;touch-action:pinch-zoom}
.gf[data-tab="text"] .gf-stage canvas{touch-action:none}
.gf-crop{grid-area:1/1;position:relative;touch-action:none}
.gf-shade{position:absolute;inset:0;background:var(--gf-shade);pointer-events:none}
.gf-crop-box{position:absolute;outline:1.5px solid #fff;cursor:move;touch-action:none}
.gf-crop-box:focus-visible{outline:2px solid var(--gf-acc)!important;outline-offset:0}
.gf-grid{position:absolute;inset:0;opacity:.0;transition:opacity var(--d1);pointer-events:none;
  background:linear-gradient(to right,transparent calc(33.33% - .5px),rgba(255,255,255,.7) 0 calc(33.33% + .5px),transparent 0 calc(66.66% - .5px),rgba(255,255,255,.7) 0 calc(66.66% + .5px),transparent 0),
             linear-gradient(to bottom,transparent calc(33.33% - .5px),rgba(255,255,255,.7) 0 calc(33.33% + .5px),transparent 0 calc(66.66% - .5px),rgba(255,255,255,.7) 0 calc(66.66% + .5px),transparent 0)}
.gf-crop-box.dragging .gf-grid,.gf-crop-box:hover .gf-grid{opacity:1}
.gf-h{position:absolute;width:16px;height:16px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.45);transform:translate(-50%,-50%)}
.gf-h::before{content:"";position:absolute;inset:-13px}
.gf-h[data-h="nw"]{left:0;top:0;cursor:nwse-resize}.gf-h[data-h="ne"]{left:100%;top:0;cursor:nesw-resize}
.gf-h[data-h="se"]{left:100%;top:100%;cursor:nwse-resize}.gf-h[data-h="sw"]{left:0;top:100%;cursor:nesw-resize}
.gf-h[data-h="n"]{left:50%;top:0;cursor:ns-resize}.gf-h[data-h="s"]{left:50%;top:100%;cursor:ns-resize}
.gf-h[data-h="e"]{left:100%;top:50%;cursor:ew-resize}.gf-h[data-h="w"]{left:0;top:50%;cursor:ew-resize}
html[data-look="garden"] .gf :is(.gf-h[data-h="n"],.gf-h[data-h="s"],.gf-h[data-h="e"],.gf-h[data-h="w"]){border-radius:3px!important}
.gf-h:is([data-h="n"],[data-h="s"]){width:26px;height:7px}.gf-h:is([data-h="e"],[data-h="w"]){width:7px;height:26px}
.gf-crop-dim{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);padding:3px 9px;background:rgba(10,12,14,.66);color:#fff;font:500 12px/1.4 var(--font);white-space:nowrap;pointer-events:none}
.gf-tbox{position:absolute;outline:1.5px dashed var(--gf-acc);outline-offset:2px;pointer-events:none}
.gf-tsz{position:absolute;right:-12px;bottom:-12px;width:20px;height:20px;border:2px solid #fff;background:var(--gf-acc);box-shadow:0 1px 4px rgba(0,0,0,.4);pointer-events:auto;cursor:nwse-resize;touch-action:none}
.gf-tsz::before{content:"";position:absolute;inset:-11px}
html[data-look="garden"] .gf .gf-tsz{border-radius:50%!important}
.gf-badge{position:absolute;top:12px;left:50%;transform:translateX(-50%);max-width:calc(100% - 24px);padding:7px 14px;background:rgba(10,12,14,.78);color:#fff;font:500 13.5px/1.5 var(--font);text-align:center;pointer-events:none;z-index:3;animation:gfIn .2s var(--ease)}
@keyframes gfIn{from{opacity:0;transform:translate(-50%,-4px)}}
.gf-stage-busy{position:absolute;inset:auto auto 12px 12px;display:grid;place-items:center;width:40px;height:40px;background:rgba(10,12,14,.55);z-index:3}
html[data-look="garden"] .gf .gf-stage-busy{border-radius:50%!important}
.gf-stage-busy .gf-spin{border-color:rgba(255,255,255,.35);border-top-color:#fff;width:20px;height:20px}

/* transport */
.gf-transport{display:flex;align-items:center;gap:10px;margin:12px 0 8px}
.gf-play{display:grid;place-items:center;width:48px;height:48px;flex:none;padding:0;border:0;background:var(--ink);color:var(--bg);cursor:pointer;transition:transform var(--d1)}
.gf-play svg{width:22px;height:22px;fill:currentColor;stroke:currentColor;stroke-width:1.4}
.gf-play .i-pause{display:none;fill:none;stroke-width:3}
.gf.gf-playing .gf-play .i-play{display:none}.gf.gf-playing .gf-play .i-pause{display:block}
.gf-play:active{transform:scale(.94)}
.gf-steps{direction:ltr;display:flex;align-items:center;gap:0}
.gf-clock{min-width:62px;font:600 15px var(--font);font-variant-numeric:tabular-nums;color:var(--ink);text-align:center}
.gf-outinfo{margin-inline-start:auto;font:500 13px/1.4 var(--font);color:var(--ink-3);text-align:end}

/* the filmstrip */
.gf-tl{position:relative;padding:0 18px;user-select:none;-webkit-user-select:none}
.gf-strip{position:relative;height:58px;touch-action:none;cursor:pointer}
.gf-thumbs{position:absolute;inset:0;width:100%;height:100%;display:block;background:var(--strip-bg)}
html[data-look="garden"] .gf :is(.gf-thumbs,.gf-strip,.gf-over){border-radius:6px!important}
.gf-dim{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--bg) 70%,transparent);pointer-events:none}
.gf-dim-a{left:0}.gf-dim-b{right:0}
.gf-sel{position:absolute;top:-3px;bottom:-3px;border-block:3px solid var(--gf-acc);cursor:grab;min-width:2px}
.gf-strip.dragging .gf-sel{cursor:grabbing}
.gf-hd{position:absolute;top:-3px;bottom:-3px;width:18px;background:var(--gf-acc);cursor:ew-resize;touch-action:none}
.gf-hd::after{content:"";position:absolute;top:50%;left:50%;width:3px;height:18px;margin:-9px 0 0 -1.5px;background:var(--gf-acc-ink);opacity:.55}
html[data-look="garden"] .gf .gf-hd::after{border-radius:2px!important}
.gf-hd::before{content:"";position:absolute;inset:-6px -12px}
.gf-hd-in{right:100%}.gf-hd-out{left:100%}
html[data-look="garden"] .gf .gf-hd-in{border-radius:7px 0 0 7px!important}
html[data-look="garden"] .gf .gf-hd-out{border-radius:0 7px 7px 0!important}
.gf-sel.cut-a .gf-hd-in,.gf-sel.cut-b .gf-hd-out{display:none}
.gf-hd:focus-visible{outline:2px solid var(--ink)!important;outline-offset:2px}
.gf-ph{position:absolute;top:-8px;bottom:-8px;width:2px;margin-left:-1px;background:var(--ink);pointer-events:none;box-shadow:0 0 0 1px color-mix(in srgb,var(--bg) 70%,transparent)}
.gf-ph::before{content:"";position:absolute;top:-2px;left:50%;width:10px;height:10px;margin-left:-5px;background:var(--ink)}
html[data-look="garden"] .gf .gf-ph::before{border-radius:50%!important}
.gf-over{position:relative;height:20px;margin-top:14px;background:var(--tile-2);cursor:pointer;touch-action:none}
.gf-over-sel{position:absolute;top:0;bottom:0;background:var(--gf-acc);opacity:.85}
.gf-lens{position:absolute;top:-3px;bottom:-3px;border:2px solid var(--ink);cursor:grab;min-width:8px}
html[data-look="garden"] .gf .gf-lens{border-radius:5px!important}
.gf-over-ph{position:absolute;top:-2px;bottom:-2px;width:2px;margin-left:-1px;background:var(--ink);pointer-events:none}

/* exact times: laid out left→right like the strip above, so «من» sits under the start */
.gf-trim{direction:ltr;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:12px;margin-top:14px}
.gf-tf{direction:rtl;display:grid;gap:6px;min-width:0}
.gf-tf label{font:500 13px var(--font);color:var(--ink-3)}
.gf-tf:last-child{text-align:end}
.gf-tfrow{direction:ltr;display:flex;align-items:center;gap:4px}
.gf-time{flex:1;min-width:0;width:100%;min-height:42px;padding:0 6px;border:1px solid var(--line-2);background:var(--field);color:var(--ink);font:600 15px var(--font);font-variant-numeric:tabular-nums;text-align:center}
.gf-time:focus{border-color:var(--ink);outline:none}
.gf-nudge{display:grid;place-items:center;width:40px;height:42px;flex:none;padding:0;border:1px solid var(--line);background:var(--paper);cursor:pointer}
.gf-nudge svg{width:16px;height:16px}
.gf-nudge:hover{border-color:var(--ink-3)}
.gf-here{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid var(--line-2);background:transparent;font:500 13px var(--font);color:var(--ink-2);cursor:pointer;justify-self:start;white-space:nowrap}
.gf-tf:last-child .gf-here{justify-self:end}
.gf-here:hover{border-color:var(--ink);color:var(--ink)}
.gf-here.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.gf-here svg{width:16px;height:16px}
.gf-span{display:flex;flex-direction:column;align-items:center;padding-bottom:42px;min-width:64px}
.gf-span b{font:700 22px/1.1 var(--font);font-variant-numeric:tabular-nums;color:var(--ink)}
.gf-span span{font:400 12px var(--font);color:var(--ink-3)}
.gf-note{margin:12px 0 0;padding:10px 14px;background:var(--tile-2);font:500 13.5px/1.6 var(--font);color:var(--ink-2)}
.gf-note.warn{background:color-mix(in srgb,var(--gf-acc) 22%,var(--paper));color:var(--ink)}
html[data-look="garden"] .gf :is(.gf-note,.gf-ml,.gf-err,.gf-opening){border-radius:var(--r-ctl)!important}

/* ---------- the tools panel ---------- */
.gf-panel{position:sticky;top:82px;display:flex;flex-direction:column;height:calc(100vh - 150px);max-height:860px;min-height:520px;border:1px solid var(--line);background:var(--paper);overflow:hidden}
.gf-tabs{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid var(--line);flex:none}
.gf-tabs button{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;min-height:62px;padding:11px 2px 7px;border:0;border-bottom:2px solid transparent;background:none;font:500 12.5px/1.25 var(--font);color:var(--ink-3);cursor:pointer;text-align:center;transition:color var(--d1),border-color var(--d1)}
html[data-look="garden"] .gf .gf-tabs button{border-radius:0!important}
.gf-tabs button svg{width:22px;height:22px;stroke-width:1.6}
.gf-tabs button:hover{color:var(--ink)}
.gf-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink);font-weight:700}
.gf-panes{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:18px 18px 8px}
.gf-group{margin:0 0 22px}
.gf-group h3{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 10px;font:700 14.5px/1.4 var(--font);color:var(--ink)}
.gf-val{font:500 13px var(--font);font-variant-numeric:tabular-nums;color:var(--ink-3)}
.gf-hint{margin:8px 0 0;font:400 13px/1.65 var(--font);color:var(--ink-3)}
.gf-hint:first-of-type:not(:last-child){margin:-4px 0 10px}

/* segmented choices */
.gf-seg{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:3px;padding:3px;background:var(--tile-2)}
.gf-seg-3{--n:3}.gf-seg-4{--n:4}.gf-seg-5{--n:5}.gf-seg-6{--n:6}
html[data-look="garden"] .gf .gf-seg{border-radius:8px!important}
.gf-seg button{min-height:40px;padding:0 4px;border:0;background:none;font:500 14px var(--font);font-variant-numeric:tabular-nums;color:var(--ink-2);cursor:pointer;white-space:nowrap;transition:background-color var(--d1),color var(--d1)}
.gf-seg button:hover{color:var(--ink)}
.gf-seg button[aria-checked="true"]{background:var(--gf-seg-on);color:var(--ink);font-weight:700;box-shadow:0 1px 3px rgba(15,20,25,.12)}
.gf-seg.sm button{min-height:36px;font-size:13px}
.gf-btnrow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gf-tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:66px;padding:8px 4px;border:1px solid var(--line-2);background:var(--paper);font:500 12.5px/1.3 var(--font);color:var(--ink);cursor:pointer;text-align:center;transition:border-color var(--d1),background-color var(--d1)}
.gf-tool svg{width:22px;height:22px}
.gf-tool:hover{border-color:var(--ink)}
.gf-tool[aria-pressed="true"]{border-color:var(--ink);background:var(--tile-2)}
.gf-reset{min-height:40px;font-size:13.5px}
.gf-custom{display:flex;align-items:center;gap:10px;margin-top:10px}
.gf-custom label{font:500 13px var(--font);color:var(--ink-3)}
.gf-custom input,.gf-when-f input{width:110px;min-height:40px;padding:0 10px;border:1px solid var(--line-2);background:var(--field);color:var(--ink);font:600 15px var(--font);font-variant-numeric:tabular-nums}

/* rows: a small label and its control */
.gf-row{display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:10px;margin:0 0 12px}
.gf-lab{font:500 13px var(--font);color:var(--ink-3)}

/* sliders */
.gf-range{-webkit-appearance:none;appearance:none;width:100%;height:40px;margin:0;background:none;cursor:pointer;--p:50%}
.gf-range::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:linear-gradient(to left,var(--ink) var(--p),var(--sand) var(--p))}
.gf-range::-moz-range-track{height:6px;border-radius:99px;background:var(--sand)}
.gf-range::-moz-range-progress{height:6px;border-radius:99px;background:var(--ink)}
.gf-range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border:3px solid var(--paper);border-radius:50%;background:var(--ink);box-shadow:0 1px 4px rgba(15,20,25,.3)}
.gf-range::-moz-range-thumb{width:16px;height:16px;border:3px solid var(--paper);border-radius:50%;background:var(--ink);box-shadow:0 1px 4px rgba(15,20,25,.3)}
.gf-range:focus-visible{outline:none}
.gf-range:focus-visible::-webkit-slider-thumb{outline:2px solid var(--ink);outline-offset:2px}
[dir="rtl"] .gf-range{direction:rtl}

/* switches */
.gf-sw-row{margin:12px 0 0}
.gf-sw{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:48px;padding:4px 0;border:0;background:none;text-align:start;cursor:pointer}
.gf-sw-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.gf-sw-t b{font:600 14px/1.4 var(--font);color:var(--ink)}
.gf-sw-t small{font:400 12.5px/1.5 var(--font);color:var(--ink-3)}
.gf-sw i{position:relative;flex:none;width:42px;height:25px;background:var(--sand);transition:background-color var(--d1)}
.gf-sw i::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:inset-inline-start var(--d1) var(--ease)}
.gf-sw[aria-checked="true"] i{background:var(--ink)}
.gf-sw[aria-checked="true"] i::after{inset-inline-start:20px;background:var(--bg)}

/* colour swatches */
.gf-sws{display:flex;flex-wrap:wrap;gap:7px}
.gf-sws button,.gf-sw-pick{position:relative;width:34px;height:34px;flex:none;padding:0;border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);background:var(--c);cursor:pointer}
.gf-sws button::before,.gf-sw-pick::before{content:"";position:absolute;inset:-4px}
.gf-sws button[aria-checked="true"],.gf-sw-pick.on{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink)}
.gf-sw-pick{display:grid;place-items:center;overflow:hidden;background:conic-gradient(#ff3b30,#ffd60a,#34c759,#0a84ff,#bf5af2,#ff3b30)}
.gf-sw-pick.on{background:var(--c)}
.gf-sw-pick input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.gf-sw-pick span{font:700 16px/1 var(--font);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);pointer-events:none}
.gf-sw-pick.on span{display:none}

/* captions + free texts */
.gf-caps .gf-cap{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:8px;margin:0 0 8px}
.gf-cap span{font:500 13px var(--font);color:var(--ink-3)}
.gf-cap textarea,.gf-layers input{width:100%;min-height:46px;padding:11px 12px;border:1px solid var(--line-2);background:var(--field);color:var(--ink);font:600 16px/1.45 var(--font);resize:none;overflow:hidden}
.gf-cap textarea::placeholder{color:var(--ink-3);font-weight:400;opacity:.8}
.gf-cap textarea:focus,.gf-cap.on textarea{border-color:var(--ink);outline:none}
.gf-layer-ed{padding:14px 14px 4px;background:var(--tile)}
html[data-look="garden"] .gf :is(.gf-layer-ed,.gf-layers li){border-radius:var(--r-card)!important}
.gf-layer-ed h3{font-size:13.5px;color:var(--ink-2)}
.gf-when{margin-top:2px;border-top:1px solid var(--line)}
.gf-when-f{display:flex;flex-wrap:wrap;align-items:end;gap:10px;padding:2px 0 12px}
.gf-when-f label{display:grid;gap:4px;font:500 12.5px var(--font);color:var(--ink-3)}
.gf-when-f input{width:96px}
.gf-layers{margin:0 0 10px;padding:0;list-style:none}
.gf-layers li{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:4px 4px 4px 4px;border:1px solid var(--line-2);background:var(--paper);transition:border-color var(--d1)}
.gf-layers li.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.gf-li-n{display:grid;place-items:center;width:28px;height:28px;flex:none;margin-inline-start:6px;background:var(--c,#fff);border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);font:700 12px var(--font);color:#111;text-shadow:0 0 2px #fff}
.gf-layers input{flex:1;min-width:0;min-height:42px;border:0;background:none;padding:0 4px}
.gf-layers input:focus{outline:none}
.gf-del{display:grid;place-items:center;width:40px;height:40px;flex:none;padding:0;border:0;background:none;color:var(--ink-3);cursor:pointer}
.gf-del svg{width:19px;height:19px}
.gf-del:hover{color:var(--danger)}
.gf-add{width:100%;border-style:dashed!important}
.gf-add svg{width:18px;height:18px}

/* background */
.gf-modes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gf-modes button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:68px;padding:11px 12px;border:1px solid var(--line-2);background:var(--paper);text-align:start;cursor:pointer;transition:border-color var(--d1),background-color var(--d1)}
.gf-modes b{font:700 14.5px/1.3 var(--font);color:var(--ink)}
.gf-modes small{font:400 12px/1.45 var(--font);color:var(--ink-3)}
.gf-modes button:hover{border-color:var(--ink-3)}
.gf-modes button[aria-checked="true"]{border-color:var(--ink);background:var(--tile);box-shadow:0 0 0 1px var(--ink)}
.gf-ml{display:flex;align-items:center;gap:8px;margin:10px 0 0;padding:10px 12px;background:var(--tile);font:500 13px/1.55 var(--font);color:var(--ink-2)}
.gf-ml i{width:8px;height:8px;flex:none;border-radius:50%!important;background:#2E8B57}
.gf-ml[data-st="failed"] i{background:var(--danger)}
.gf-ml .gf-spin{width:16px;height:16px;border-width:2px}
.gf-keypick{display:flex;align-items:center;gap:8px}
.gf-keypick input[type="color"]{width:44px;height:40px;padding:2px;border:1px solid var(--line-2);background:var(--paper);cursor:pointer}
.gf-bgopts{padding-top:2px}

/* colours */
.gf-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 8px}
.gf-filters button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:0;background:none;font:500 12.5px/1.3 var(--font);color:var(--ink-2);cursor:pointer}
.gf-filters i{display:block;width:100%;aspect-ratio:1;border:1px solid var(--line);transition:box-shadow var(--d1)}
.gf-filters button[aria-checked="true"]{color:var(--ink);font-weight:700}
.gf-filters button[aria-checked="true"] i{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink)}
.fl-none{background:linear-gradient(160deg,#7FB7E8 0 38%,#F4C77B 38% 52%,#5E8F4E 52%)}
.fl-bw{background:linear-gradient(160deg,#B4B4B4 0 38%,#D8D8D8 38% 52%,#6E6E6E 52%)}
.fl-old{background:linear-gradient(160deg,#C8B48E 0 38%,#E6CF9E 38% 52%,#8C7553 52%)}
.fl-vivid{background:linear-gradient(160deg,#3DA2FF 0 38%,#FFC23A 38% 52%,#2FA33A 52%)}
.fl-warm{background:linear-gradient(160deg,#A9B6C6 0 38%,#FFC57E 38% 52%,#7A8F45 52%)}
.fl-cool{background:linear-gradient(160deg,#6EB9F2 0 38%,#D9CF9F 38% 52%,#4E8F72 52%)}
.fl-fried{background:linear-gradient(160deg,#00B7FF 0 38%,#FF9D00 38% 52%,#58D100 52%);filter:contrast(1.3)}

/* export */
.gf-export{flex:none;padding:14px 18px 16px;border-top:1px solid var(--line);background:var(--paper)}
.gf-name{display:grid;gap:5px}
.gf-name > span:first-child{font:500 12.5px var(--font);color:var(--ink-3)}
.gf-namebox{display:flex;align-items:center;border:1px solid var(--line-2);background:var(--field)}
html[data-look="garden"] .gf .gf-namebox{border-radius:var(--r-ctl)!important}
.gf-namebox:focus-within{border-color:var(--ink)}
.gf-namebox input{flex:1;min-width:0;min-height:42px;padding:0 12px;border:0!important;background:none;color:var(--ink);font:500 15px var(--font);outline:none}
.gf-namebox i{padding-inline:0 12px;font:500 14px var(--font);font-style:normal;color:var(--ink-3)}
.gf-exrow{display:flex;align-items:center;gap:12px;margin-top:12px}
.gf-est{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;transition:opacity var(--d1)}
.gf-est b{font:700 17px/1.3 var(--font);color:var(--ink);font-variant-numeric:tabular-nums}
.gf-est span{font:400 12px/1.4 var(--font);color:var(--ink-3);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gf-est.stale{opacity:.45}
.gf-est.heavy b{color:var(--danger)}
.gf-go{flex:none;min-height:50px!important;padding:0 22px!important;font:700 16px var(--font)!important}
.gf-go svg{width:22px;height:22px}
.gf-go:disabled{opacity:.4;cursor:not-allowed}
.gf-prog{margin-top:12px}
.gf-bar{height:6px;background:var(--sand);overflow:hidden}
.gf-bar i{display:block;width:0;height:100%;background:var(--ink);transition:width .2s linear}
.gf-progrow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px;font:500 13px var(--font);color:var(--ink-2);font-variant-numeric:tabular-nums}
.gf.gf-exporting .gf-panes,.gf.gf-exporting .gf-stagecol .gf-transport,.gf.gf-exporting .gf-tl,.gf.gf-exporting .gf-trim{opacity:.5;pointer-events:none}
.gf.gf-exporting .gf-exrow{display:none}

/* ---------- the result ---------- */
.gf-result{width:min(600px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:0;background:var(--paper);color:var(--ink);box-shadow:0 30px 80px -30px rgba(0,0,0,.55);overflow:auto}
.gf-result::backdrop{background:rgba(10,12,14,.5)}
.gf-result[open]{animation:gfPop .26s var(--ease)}
@keyframes gfPop{from{opacity:0;transform:translateY(14px) scale(.98)}}
.gf-res-in{padding:16px 20px 18px}
.gf-res-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.gf-res-head h2{margin:0;font:700 22px/1.3 var(--font)}
.gf-res-img{display:grid;place-items:center;padding:12px;background:var(--tile-2);min-height:160px}
.gf-res-img img{display:block;max-width:100%;max-height:min(52vh,480px);width:auto;height:auto;image-rendering:auto}
.gf-res-meta{margin:10px 0 14px;text-align:center;font:500 13.5px var(--font);font-variant-numeric:tabular-nums;color:var(--ink-3)}
.gf-res-acts{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:8px;margin-top:14px}
.gf-res-acts .g-btn{min-height:50px}
.gf-res-acts svg{width:20px;height:20px}
.gf-res-acts #gfShare[hidden] + #gfEdit{grid-column:span 2}
.gf-res-note{display:flex;align-items:center;justify-content:center;gap:6px;margin:14px 0 0;font:400 12.5px/1.5 var(--font);color:var(--ink-3);text-align:center}
.gf-res-note svg{width:14px;height:14px;flex:none}
.gf-helpdlg{width:min(520px,calc(100vw - 32px))}
.gf-steps-list{margin:0 0 6px;padding:0 20px 0 0;font:400 15px/1.75 var(--font);color:var(--ink-2)}
.gf-steps-list li{margin:0 0 6px}
.gf-steps-list b{color:var(--ink)}
.gf-keys-h{margin:16px 0 8px;font:700 15px var(--font)}
.gf-keys{margin:0;display:grid;gap:2px}
.gf-keys div{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:38px;border-bottom:1px solid var(--line)}
.gf-keys dt{flex:none}.gf-keys dd{margin:0;font:400 14px var(--font);color:var(--ink-2);text-align:end}

.gf-dragover{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px;background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:none}
.gf-dragover > div{display:flex;flex-direction:column;align-items:center;gap:10px;padding:48px 64px;border:2px dashed var(--ink);background:var(--paper);font:700 20px var(--font);color:var(--ink)}
.gf-dragover svg{width:42px;height:42px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- narrower screens: one column, the preview stays in view while you use the tools ---------- */
@media (max-width:1100px) and (min-width:1000px){.gf-editor{grid-template-columns:minmax(0,1fr) 340px}}
@media (max-width:999px){
  .gf{padding:10px 16px 32px}
  .gf-editor{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .gf-stagecol{display:contents}
  .gf-stage{position:sticky;top:0;z-index:6;height:auto;aspect-ratio:var(--ar,16/9);max-height:44vh;min-height:180px;width:100%;margin:0 -16px;width:calc(100% + 32px);box-shadow:0 10px 18px -16px rgba(0,0,0,.4)}
  html[data-look="garden"] .gf .gf-stage{border-radius:0!important}
  .gf-panel{position:static;height:auto;max-height:none;min-height:0;margin-top:18px;overflow:visible}
  .gf-tabs{position:sticky;top:min(44vh,var(--stage-px,44vh));z-index:5;background:var(--paper)}
  .gf-panes{flex:none;overflow:visible;padding:16px 16px 4px}
  .gf-export{position:sticky;bottom:0;z-index:5;box-shadow:0 -10px 20px -18px rgba(0,0,0,.45);padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}
}
@media (min-width:600px) and (max-width:999px){
  .gf-stage{margin:0;width:100%;max-height:52vh}
  html[data-look="garden"] .gf .gf-stage{border-radius:var(--r-card)!important}
}
@media (max-width:599px){
  .gf-head{margin:2px 0 10px;min-height:44px}
  .gf-title h1{font-size:21px}
  .gf-safe{font-size:12px}
  .gf[data-state="editing"] .gf-safe{display:none}
  .gf-pill span{display:none}
  .gf-pill{width:40px;padding:0;justify-content:center}
  .gf-drop{min-height:auto;padding:28px 16px 32px}
  .gf-transport{margin:10px 0 6px}
  .gf-tl{padding:0 16px}
  .gf-strip{height:52px}
  .gf-trim{gap:6px}
  .gf-span{min-width:44px}
  .gf-span b{font-size:18px}
  .gf-tabs button{min-height:58px;font-size:11.5px;gap:4px}
  .gf-tabs button svg{width:21px;height:21px}
  .gf-name{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px}
  .gf-export .gf-name{display:none}   /* phones: the name lives in the result sheet */
  .gf-exrow{margin-top:0}
  .gf-go{padding:0 16px!important}
  .gf-res-in{padding:14px 16px 16px}
  .gf-result{width:100%;max-width:100%;margin:auto auto 0;max-height:94dvh}
  html[data-look="garden"] .gf .gf-result{border-radius:16px 16px 0 0!important}
  .gf-res-acts{grid-template-columns:1fr 1fr}
  .gf-res-acts #gfDl{grid-column:1 / -1}
  .gf-res-acts #gfShare[hidden] + #gfEdit{grid-column:1 / -1}
  .gf-filters{gap:10px 6px}
}
@media (max-width:380px){
  .gf-here{padding:0 8px;font-size:12px}
  .gf-nudge{width:34px}
  .gf-time{font-size:14px}
}
@media (pointer:coarse){.gf-paste{display:none}}
@media (prefers-reduced-motion:reduce){
  .gf *,.gf *::before,.gf *::after{animation:none!important;transition:none!important}
}
/* 14o (Aziz): «خفّف الملف» in the result — optional, its own quiet box; a big file gets the question in ink */
.gf-squash{margin:4px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-card,14px)}
.gf-squash h3{margin:0 0 4px;font:700 15px/1.4 var(--font);display:flex;align-items:baseline;gap:8px}
.gf-squash h3 small{font:400 12px var(--font);color:var(--ink-3)}
.gf-sq-q{margin:0 0 10px;font:400 13.5px/1.6 var(--font);color:var(--ink-3)}
.gf-squash.is-big .gf-sq-q{color:var(--ink);font-weight:500}
.gf-sq-opts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.gf-sq-opts button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;padding:6px 4px;border:1px solid var(--line);border-radius:var(--r-ctl,10px);background:var(--paper);color:var(--ink-2);font:500 13.5px var(--font);cursor:pointer}
.gf-sq-opts button small{font:400 12px var(--font);color:var(--ink-3);font-variant-numeric:tabular-nums;min-height:1.2em}
.gf-sq-opts button:hover{background:var(--tile-2)}
.gf-sq-opts button[aria-checked="true"]{border-color:var(--ink);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.gf-sq-opts button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.gf-squash[aria-busy="true"] .gf-sq-opts button{cursor:progress}
.gf-sq-note{margin:8px 0 0;min-height:1.4em;font:400 12.5px/1.5 var(--font);color:var(--ink-3);text-align:center}
@media (max-width:420px){.gf-sq-opts{grid-template-columns:repeat(2,1fr)}}