@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
:root{--bg:#0b0f1a;--bg2:#111729;--card:rgba(255,255,255,.05);--card2:rgba(255,255,255,.09);--line:rgba(255,255,255,.12);--tx:#e8eef9;--mut:#9aa7bf;--a:#58a6ff;--b:#8957e5;--ok:#3ddc97;--warn:#f5a623;--bad:#ff5d6c;--well:rgba(0,0,0,.28);--track:rgba(255,255,255,.13);--sel:rgba(88,166,255,.12);--glow:.2;--shadow:0 20px 50px -28px rgba(0,0,0,.8);
  --font:'Cairo','Inter',system-ui,sans-serif;--mono:'Fira Code',ui-monospace,monospace;--pad:clamp(14px,3.5vw,32px);--gap:clamp(12px,2vw,20px);--r:clamp(16px,2vw,22px);--ease:cubic-bezier(.22,.8,.24,1);color-scheme:dark}
:root[data-theme=light]{--bg:#f2f6fc;--bg2:#fff;--card:rgba(255,255,255,.72);--card2:rgba(15,23,42,.06);--line:rgba(15,23,42,.12);--tx:#0f1b2d;--mut:#516079;--a:#1f6feb;--b:#7c3aed;--ok:#0f9d63;--warn:#b7791f;--bad:#d92d3f;--well:rgba(15,23,42,.05);--track:rgba(15,23,42,.13);--sel:rgba(31,111,235,.1);--glow:.14;--shadow:0 18px 40px -26px rgba(30,60,120,.45);color-scheme:light}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);font-family:var(--font);line-height:1.65;min-height:100dvh;overflow-x:hidden;display:flex;flex-direction:column;
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 80% 60% at 50% 25%,transparent 0,var(--bg) 100%);opacity:.72}
a{color:var(--a);text-decoration:none}a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--a);outline-offset:3px;border-radius:8px}
svg{flex-shrink:0}
#bg3d{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;opacity:0;transition:opacity 1.4s ease}
#bg3d.on{opacity:1}
.glow{position:fixed;width:min(560px,90vw);aspect-ratio:1;border-radius:50%;filter:blur(130px);opacity:var(--glow);z-index:-2;pointer-events:none}
.g1{background:var(--a);top:-14vh;inset-inline-end:-12vw}.g2{background:var(--b);bottom:-16vh;inset-inline-start:-12vw}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding-inline:var(--pad)}
main{flex:1}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;width:100%;padding:calc(10px + env(safe-area-inset-top)) max(var(--pad),calc((100vw - 1120px)/2 + var(--pad))) 10px;transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent;animation:dropIn .7s var(--ease) both}
.top.scrolled{background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-color:var(--line)}
.brand{display:flex;align-items:center;gap:11px;color:var(--tx);font-weight:800;font-size:1.3rem}
.brand:hover{text-decoration:none}
.logo-mark{filter:drop-shadow(0 6px 14px rgba(88,166,255,.35));transition:transform .5s var(--ease)}
.brand:hover .logo-mark{transform:rotate(-8deg) scale(1.08)}
.wm{padding-bottom:.18em;background:linear-gradient(120deg,var(--tx),var(--a) 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
.top .sp{flex:1}
.chip,.icon-btn{background:var(--card);border:1px solid var(--line);color:var(--tx);cursor:pointer;transition:border-color .25s,color .25s,transform .25s;position:relative;overflow:hidden;backdrop-filter:blur(8px)}
.chip{min-height:42px;padding:0 16px;border-radius:99px;font-weight:700;font-size:.88rem;display:inline-flex;align-items:center;gap:8px}
.icon-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center}
.chip:hover,.icon-btn:hover{border-color:var(--a);color:var(--a);text-decoration:none}
.icon-btn:active,.chip:active{transform:scale(.94)}
.icon-btn .sun{display:none}:root[data-theme=light] .icon-btn .sun{display:block}:root[data-theme=light] .icon-btn .moon{display:none}
.icon-btn svg{transition:transform .5s var(--ease)}.icon-btn:hover svg{transform:rotate(25deg)}

/* ---------- home ---------- */
.hero{text-align:center;padding:clamp(28px,7vw,76px) 0 clamp(12px,3vw,24px)}
h1{font-size:clamp(1.9rem,4.8vw + .6rem,3.7rem);font-weight:800;line-height:1.22;letter-spacing:-.01em}
.hero-t{padding-bottom:.2em;background:linear-gradient(110deg,var(--tx) 0%,var(--a) 40%,var(--b) 60%,var(--tx) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 7s linear infinite,fadeUp .9s var(--ease) both}
.lead{color:var(--mut);max-width:640px;margin:14px auto 0;font-size:clamp(1rem,.5vw + .88rem,1.18rem);animation:fadeUp .9s .1s var(--ease) both}
.badges{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:20px;animation:fadeUp .9s .2s var(--ease) both}
.badge{display:inline-flex;gap:8px;align-items:center;padding:6px 15px;border-radius:99px;background:var(--card);border:1px solid var(--line);font-size:.86rem;color:var(--mut);backdrop-filter:blur(8px)}
.badge svg{color:var(--ok)}
.search{position:relative;display:block;max-width:580px;margin:28px auto 0;animation:fadeUp .9s .3s var(--ease) both}
.search svg{position:absolute;inset-inline-start:18px;top:50%;translate:0 -50%;color:var(--mut);pointer-events:none}
.search input{width:100%;min-height:56px;padding:10px 20px;padding-inline-start:50px;border-radius:16px;border:1px solid var(--line);background:var(--card);backdrop-filter:blur(10px);font-size:1.02rem;transition:border-color .25s,box-shadow .25s}
.search input:focus{border-color:var(--a);outline:none;box-shadow:0 0 0 4px rgba(88,166,255,.18)}
.tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:20px 0 8px;animation:fadeUp .9s .4s var(--ease) both}
.tabs button{position:relative;overflow:hidden;min-height:42px;padding:0 20px;border-radius:99px;border:1px solid var(--line);background:var(--card);cursor:pointer;font-weight:700;font-size:.92rem;transition:.25s;backdrop-filter:blur(8px)}
.tabs button:hover{border-color:var(--a)}
.tabs button[aria-pressed=true]{background:linear-gradient(120deg,var(--a),var(--b));border-color:transparent;color:#fff;box-shadow:0 8px 22px -10px var(--b)}
.sec-h{font-size:1.2rem;font-weight:800;margin:34px 0 14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,262px),1fr));gap:var(--gap);perspective:1200px}
[data-cat=convert]{--c1:#58a6ff;--c2:#7c8cff}[data-cat=pdf]{--c1:#ff7ab6;--c2:#b66bff}[data-cat=compress]{--c1:#3ddc97;--c2:#4fb8ff}[data-cat=media]{--c1:#ffb44d;--c2:#ff6b6b}
.tool{position:relative;display:flex;flex-direction:column;gap:8px;padding:22px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);color:var(--tx);overflow:hidden;backdrop-filter:blur(10px);box-shadow:var(--shadow);
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .45s var(--ease),border-color .3s,box-shadow .3s;animation:cardIn .7s calc(var(--i,0)*55ms + .45s) var(--ease) both;will-change:transform}
.tool.tilting{transition:transform .08s linear,border-color .3s,box-shadow .3s}
.tool::before{content:"";position:absolute;inset:0;background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--c1) 22%,transparent),transparent 55%);opacity:0;transition:opacity .35s;pointer-events:none}
.tool:hover{border-color:color-mix(in srgb,var(--c1) 70%,transparent);box-shadow:0 26px 50px -26px var(--c1);text-decoration:none}
.tool:hover::before{opacity:1}
.tool .ic,.thead .ic{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;color:var(--c1);background:linear-gradient(135deg,color-mix(in srgb,var(--c1) 22%,transparent),color-mix(in srgb,var(--c2) 22%,transparent));border:1px solid color-mix(in srgb,var(--c1) 35%,transparent);margin-bottom:6px;transition:transform .5s var(--ease)}
.tool:hover .ic{transform:translateY(-3px) rotate(-6deg) scale(1.06)}
.tool h3{font-size:1.04rem;font-weight:800}
.tool p{color:var(--mut);font-size:.9rem;flex:1}
.tool .go{position:absolute;inset-inline-end:16px;bottom:14px;color:var(--c1);opacity:0;transform:translateX(8px);transition:.35s var(--ease)}
[dir=rtl] .tool .go{transform:translateX(-8px)}
[dir=ltr] .tool .go svg{transform:scaleX(-1)}
.tool:hover .go{opacity:1;transform:none}
.grid.mini{grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))}
.grid.mini .tool{flex-direction:row;align-items:center;padding:14px 16px;gap:12px}
.grid.mini .ic{width:42px;height:42px;margin:0;border-radius:12px}
.grid.mini h3{font-size:.95rem}
.empty{grid-column:1/-1;text-align:center;color:var(--mut);padding:40px;border:1px dashed var(--line);border-radius:var(--r)}
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--gap);margin-top:40px}
.why>div{padding:22px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);backdrop-filter:blur(10px)}
.why .wi{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--sel);color:var(--a);margin-bottom:10px}
.why b{display:block;margin-bottom:4px;font-size:1.04rem}.why span:not(.wi){color:var(--mut);font-size:.92rem}

/* ---------- tool page ---------- */
.crumb{display:inline-flex;gap:8px;align-items:center;color:var(--mut);font-size:.9rem;margin:10px 0 6px;transition:color .2s;animation:fadeUp .6s var(--ease) both}
.crumb:hover{color:var(--a);text-decoration:none}
[dir=rtl] .crumb .ar{display:inline-flex;transform:scaleX(-1)}
.thead{display:flex;gap:clamp(12px,2.4vw,20px);align-items:center;padding:8px 0 22px;animation:fadeUp .7s .05s var(--ease) both}
.thead .ic{width:64px;height:64px;border-radius:19px;margin:0;box-shadow:0 14px 30px -14px var(--c1)}
.thead h1{font-size:clamp(1.45rem,3.2vw + .6rem,2.4rem)}
.thead p{color:var(--mut);margin-top:4px;max-width:700px}
.stack{display:flex;flex-direction:column;gap:var(--gap)}
.stack>*{animation:fadeUp .7s var(--ease) both}.stack>:nth-child(2){animation-delay:.08s}.stack>:nth-child(3){animation-delay:.16s}.stack>:nth-child(4){animation-delay:.24s}.stack>:nth-child(5){animation-delay:.3s}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(16px,3vw,26px);backdrop-filter:blur(12px);box-shadow:var(--shadow);min-width:0}
.card h2{font-size:1.02rem;font-weight:800;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.card:has(>ul.files:empty){display:none}
/* options and the action button appear only after the user adds something */
#tool-root:not(.has-files)>.act,#tool-root:not(.has-files)>.card:has(.opts),#tool-root:not(.has-files)>.card:has(.seg){display:none}

/* drop zone */
.drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;min-height:230px;padding:30px 22px;border-radius:var(--r);background:var(--card);backdrop-filter:blur(12px);cursor:pointer;transition:background .3s,transform .3s var(--ease),box-shadow .3s;isolation:isolate}
.drop::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:conic-gradient(from var(--ang),var(--a),var(--b),#ff7ab6,var(--a));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.5;animation:spin 7s linear infinite;transition:opacity .3s;z-index:-1;pointer-events:none}
.drop:hover,.drop.over{background:var(--sel);box-shadow:0 24px 50px -28px var(--a)}
.drop:hover::before,.drop.over::before{opacity:1}
.drop.over{transform:scale(1.015)}
.dz-ico{position:relative;display:grid;place-items:center;width:82px;height:82px;border-radius:50%;color:var(--a);background:linear-gradient(135deg,rgba(88,166,255,.2),rgba(137,87,229,.2));margin-bottom:4px}
.dz-ico .ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--a);opacity:.5;animation:ping 2.6s ease-out infinite}
.dz-ico svg:first-of-type{animation:bob 3.2s ease-in-out infinite}
.dz-ico em{position:absolute;inset-inline-end:-2px;bottom:-2px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--a),var(--b));color:#fff;box-shadow:0 6px 14px -4px var(--b)}
.drop b{font-size:1.14rem}.dz-hint{color:var(--mut);font-size:.9rem}
.dz-btn{display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:9px 20px;border-radius:99px;font-weight:700;font-size:.92rem;color:#fff;background:linear-gradient(120deg,var(--a),var(--b));box-shadow:0 10px 22px -12px var(--b);transition:transform .25s var(--ease)}
.drop:hover .dz-btn{transform:translateY(-2px)}
.drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.drop:has(input:focus-visible){outline:2px solid var(--a);outline-offset:3px}

/* file list */
.files{list-style:none;display:grid;gap:8px}
.file{display:flex;align-items:center;gap:12px;padding:8px 12px;border:1px solid var(--line);border-radius:14px;background:var(--card2);animation:fileIn .5s calc(var(--i,0)*40ms) var(--ease) both;transition:border-color .25s,transform .25s}
.file:hover{border-color:var(--a);transform:translateX(-2px)}[dir=ltr] .file:hover{transform:translateX(2px)}
.file .th{width:46px;height:46px;border-radius:10px;background:var(--well);display:grid;place-items:center;color:var(--a);flex-shrink:0;overflow:hidden}
.file .th img{width:100%;height:100%;object-fit:cover}
.file .nm{flex:1;min-width:0}
.file .nm b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.95rem;direction:ltr;text-align:start}
.file .nm small{color:var(--mut)}
.file .ac{display:flex;gap:4px;flex-shrink:0}
.file .ac button{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--card);cursor:pointer;display:grid;place-items:center;transition:.2s}
.file .ac button:hover:not(:disabled){border-color:var(--a);color:var(--a);transform:translateY(-1px)}
.file .ac button:last-child:hover{border-color:var(--bad);color:var(--bad)}
.file .ac button:disabled{opacity:.3;cursor:default}

/* options */
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:18px}
.fld{display:flex;flex-direction:column;gap:8px;min-width:0}
.fld.fseg{grid-column:1/-1}
.fld>label,.fld>.lb{font-size:.86rem;color:var(--mut);font-weight:700}
.fld input[type=text],.fld input[type=number],.fld textarea{width:100%;min-height:46px;padding:8px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card);transition:border-color .25s,box-shadow .25s}
.fld textarea{min-height:150px;resize:vertical;font-family:var(--mono);font-size:.9rem;direction:auto}
.fld input:focus,.fld textarea:focus{border-color:var(--a);outline:none;box-shadow:0 0 0 4px rgba(88,166,255,.16)}
.fld .val{color:var(--a);font-family:var(--mono);font-weight:700;background:var(--sel);padding:1px 10px;border-radius:99px;margin-inline-start:6px}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.opt{flex:1 1 auto;position:relative;display:flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:8px 16px;border-radius:14px;border:1px solid var(--line);background:var(--card);cursor:pointer;text-align:start;transition:border-color .25s,background .25s,box-shadow .25s,transform .2s var(--ease);touch-action:manipulation}
.opt:hover{border-color:color-mix(in srgb,var(--a) 60%,transparent);transform:translateY(-1px)}
.opt:active{transform:scale(.97)}
.opt .oi{display:grid;place-items:center;color:var(--mut);transition:color .25s,transform .35s var(--ease)}
.opt .ot{display:flex;flex-direction:column;gap:2px;line-height:1.3}
.opt .ot b{font-weight:700;font-size:.93rem}
.opt .ot small{color:var(--mut);font-size:.78rem;font-weight:400}
.opt.on{border-color:var(--a);background:var(--sel);box-shadow:0 0 0 3px rgba(88,166,255,.16),0 12px 22px -16px var(--a)}
.opt.on .oi{color:var(--a);transform:scale(1.12)}
.opt.on::after{content:"";position:absolute;top:8px;inset-inline-end:8px;width:8px;height:8px;border-radius:50%;background:var(--a);box-shadow:0 0 0 3px rgba(88,166,255,.25)}
.seg.cards .opt{flex:1 1 220px;flex-direction:row;justify-content:flex-start;align-items:flex-start;padding:16px;gap:14px}
.seg.cards .oi{width:46px;height:46px;border-radius:13px;background:var(--card2)}
.seg.cards .opt.on .oi{background:linear-gradient(135deg,rgba(88,166,255,.25),rgba(137,87,229,.25))}
input[type=range]{--dg:to right;width:100%;height:32px;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;touch-action:pan-y;direction:ltr}
[dir=rtl] input[type=range]{--dg:to right}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:99px;background:linear-gradient(var(--dg),var(--a),var(--b)) 0/var(--p,50%) 100% no-repeat,var(--track)}
input[type=range]::-moz-range-track{height:8px;border-radius:99px;background:var(--track)}
input[type=range]::-moz-range-progress{height:8px;border-radius:99px;background:linear-gradient(90deg,var(--a),var(--b))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-9px;border-radius:50%;background:#fff;border:3px solid var(--a);box-shadow:0 4px 12px rgba(0,0,0,.4);transition:transform .2s}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--a)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.18)}
.fld .rlab{display:flex;justify-content:space-between;align-items:center}

/* buttons */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 30px;border-radius:15px;border:1px solid transparent;font-weight:800;font-size:1.04rem;cursor:pointer;color:#fff;background:linear-gradient(120deg,var(--a),var(--b));box-shadow:0 14px 28px -14px var(--b);transition:transform .25s var(--ease),opacity .25s,box-shadow .3s;touch-action:manipulation}
.btn::after{content:"";position:absolute;top:0;bottom:0;width:60%;left:-80%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg)}
.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 20px 34px -14px var(--b);text-decoration:none}
.btn:hover:not(:disabled)::after{animation:shine .9s}
.btn:active:not(:disabled){transform:scale(.97)}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;filter:saturate(.6)}
.btn.ghost{background:var(--card);color:var(--tx);border-color:var(--line);box-shadow:none;backdrop-filter:blur(8px)}
.btn.ghost:hover:not(:disabled){border-color:var(--a);color:var(--a);box-shadow:none}
.btn.sm{min-height:42px;padding:0 18px;font-size:.92rem;border-radius:12px}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.4);transform:scale(0);animation:rip .65s ease-out;pointer-events:none}
.ghost .ripple,.chip .ripple,.tabs .ripple{background:rgba(88,166,255,.3)}
.act{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.note{color:var(--mut);font-size:.88rem}
.warn{color:var(--warn);font-size:.9rem;margin-top:8px}
.prog .bar{position:relative;height:12px;border-radius:99px;background:var(--track);overflow:hidden}
.prog .bar i{position:relative;display:block;height:100%;width:0;background:linear-gradient(90deg,var(--a),var(--b));border-radius:99px;transition:width .25s}
.prog .bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);background-size:60% 100%;background-repeat:no-repeat;animation:shim 1.3s linear infinite}
.prog small{display:block;margin-top:8px;color:var(--mut)}

/* results */
.ok-h .okc{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ok);color:#fff;animation:pop .6s var(--ease) both}
.res{list-style:none;display:grid;gap:8px}
.res li{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--card2);flex-wrap:wrap;animation:fileIn .5s calc(var(--i,0)*60ms) var(--ease) both}
.res .th{width:50px;height:50px;border-radius:10px;overflow:hidden;background:var(--well);display:grid;place-items:center;color:var(--ok);flex-shrink:0}
.res .th img{width:100%;height:100%;object-fit:cover}
.res .nm{flex:1;min-width:150px}
.res .nm b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr;text-align:start;font-size:.95rem}
.res .nm small{color:var(--mut)}.res .nm small.good{color:var(--ok);font-weight:700}
.res a.btn{text-decoration:none}
.sumbar{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:14px;padding:13px 18px;border-radius:14px;background:linear-gradient(120deg,rgba(61,220,151,.14),rgba(88,166,255,.14));border:1px solid color-mix(in srgb,var(--ok) 45%,transparent);font-weight:800}
.others{margin-top:30px}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;max-width:1120px;width:100%;margin:36px auto 0;padding:20px var(--pad) 28px;color:var(--mut);font-size:.85rem;border-top:1px solid var(--line)}
.foot .fl{display:inline-flex;gap:8px;align-items:center}.foot .fl svg{color:var(--ok)}
.toast{position:fixed;bottom:max(24px,env(safe-area-inset-bottom));inset-inline:0;margin-inline:auto;width:max-content;max-width:90vw;background:var(--tx);color:var(--bg);padding:11px 24px;border-radius:99px;font-weight:700;opacity:0;pointer-events:none;transform:translateY(20px);transition:.35s var(--ease);z-index:50;box-shadow:0 14px 34px -10px rgba(0,0,0,.5)}
.toast.show{opacity:1;transform:none}.toast.err{background:var(--bad);color:#fff}

/* scroll reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0)*80ms)}
.rv.in{opacity:1;transform:none}

/* keyframes */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes dropIn{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}
@keyframes cardIn{from{opacity:0;transform:perspective(900px) translateY(34px) rotateX(-12deg) scale(.96)}to{opacity:1;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}}
@keyframes fileIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes sheen{to{background-position:-220% 0}}
@keyframes spin{to{--ang:360deg}}
@keyframes ping{0%{transform:scale(.9);opacity:.6}80%,100%{transform:scale(1.5);opacity:0}}
@keyframes bob{0%,100%{transform:translateY(2px)}50%{transform:translateY(-4px)}}
@keyframes shine{to{left:130%}}
@keyframes shim{from{background-position:-80% 0}to{background-position:180% 0}}
@keyframes rip{to{transform:scale(1);opacity:0}}
@keyframes pop{0%{transform:scale(0) rotate(-40deg)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
@view-transition{navigation:auto}
::view-transition-old(root){animation:.25s ease both vt-out}::view-transition-new(root){animation:.35s ease both vt-in}
@keyframes vt-out{to{opacity:0;transform:scale(.99)}}@keyframes vt-in{from{opacity:0;transform:translateY(8px)}}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .btn{width:100%}.act .btn.sm,.res a.btn,.dz-btn{width:auto}
  .thead{align-items:flex-start}.thead .ic{width:52px;height:52px}
  .seg.cards .opt{flex-basis:100%}
  .opt{padding:8px 12px}
  .file .ac button{width:34px;height:34px}
  .drop{min-height:200px}
  .tool{transform:none!important}
  .badge{font-size:.8rem;padding:5px 12px}
}
@media (max-width:350px){.wm{display:none}.opt .ot b{font-size:.88rem}}
@media (hover:none){.tool{transform:none}.tool .go{opacity:.7;transform:none}}
@media (min-width:1400px){html{font-size:112.5%}.wrap,.foot{max-width:1280px}.top{padding-inline:max(var(--pad),calc((100vw - 1280px)/2 + var(--pad)))}}
@media (min-width:2000px){html{font-size:137.5%}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.rv{opacity:1;transform:none}}

[hidden]{display:none!important}

/* ---------- v2 additions ---------- */
.prog .pl{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;min-height:36px}
.prog .pl small{margin:0}
.btn.sm.cancel{padding:6px 14px;flex-shrink:0}
.cmpbar{height:5px;border-radius:99px;background:var(--track);margin-top:7px;overflow:hidden;max-width:260px}
.cmpbar i{display:block;height:100%;background:linear-gradient(90deg,var(--ok),var(--a));border-radius:99px}
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.chain b{font-size:.9rem;color:var(--mut)}
.chain .chip{padding:7px 13px;font-size:.88rem;cursor:pointer}
.chain .chip:hover{border-color:var(--a);color:var(--a)}
#tool-root:not(.has-files)>.card:has(.pgrid){display:none}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:14px}
.pcard{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px;background:var(--well);border:1px solid var(--line);border-radius:14px;cursor:grab;transition:border-color .2s,opacity .2s,transform .2s}
.pcard.drag{opacity:.45}
.pcard.over{border-color:var(--a);transform:scale(1.03)}
.pcard.del{opacity:.4}
.pcard.del .pf::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent 0 8px,rgba(255,93,108,.25) 8px 12px)}
.pf{position:relative;width:100%;aspect-ratio:3/4;display:grid;place-items:center;overflow:hidden;border-radius:8px;background:#fff}
.pf canvas{max-width:100%;max-height:100%;transition:transform .3s var(--ease);transform:rotate(var(--r,0deg))}
.pn{font-size:.8rem;color:var(--mut);font-family:var(--mono)}
.pt{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.pt button{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--card2);border:1px solid var(--line);color:var(--tx);cursor:pointer;transition:border-color .2s,color .2s}
.pt button:hover{border-color:var(--a);color:var(--a)}
[dir=rtl] .mv-prev,[dir=ltr] .mv-next{transform:scaleX(-1)}
.org-bar{margin-bottom:6px}
.faq{max-width:1120px;margin:40px auto 0;padding-inline:var(--pad)}
.faq h2{font-size:1.15rem;font-weight:800;margin-bottom:14px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:700;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:inline-end;color:var(--a);font-weight:800}
.faq details[open] summary::after{content:"−"}
.faq p{margin-top:10px;color:var(--mut)}
html[lang=ar] [lang=en],html[lang=en] [lang=ar]{display:none!important}
.legal{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;font-size:.85rem}

/* ---------- Hawwil Lite: phones ---------- */
@media (max-width:640px){
  html.lite #bg3d,html.lite .glow{display:none}
  html.lite .btn{min-height:52px;font-size:1.05rem;border-radius:16px}
  html.lite .act{position:sticky;bottom:0;z-index:20;margin-inline:calc(var(--pad) * -1);padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--bg) 70%,transparent)}
  html.lite .act .btn.sm,html.lite .act .btn.ghost{width:auto;min-height:44px}
  html.lite .drop{min-height:230px}
  html.lite .others{display:none}
  html.lite .grid{grid-template-columns:repeat(2,1fr);gap:10px}
  html.lite .tool{padding:16px 14px}
  html.lite .tool p,html.lite .tool .go{display:none}
  html.lite .tool .ic{width:46px;height:46px}
  html.lite .pgrid{grid-template-columns:repeat(2,1fr)}
  html.lite .pt button{width:36px;height:36px}
  html.lite .file .ac button{width:40px;height:40px}
  html.lite .seg .opt{min-height:44px}
}
.steps{padding-inline-start:1.4em;color:var(--mut);display:grid;gap:6px}
.card>p{color:var(--mut)}
.org-list{list-style:none;display:grid;gap:4px;margin:10px 0;font-size:.92rem}
.org-list code{font-family:var(--mono);direction:ltr;unicode-bidi:isolate}
.good{color:var(--ok)}.bad-t{color:var(--bad)}.ok-p{color:var(--ok);font-weight:700}