/* merged: tools.css */
/* Karak Digital free tools – shared styles for the form-style tools */
.tb{border:1.5px solid var(--clay);background:var(--espresso);color:var(--chai);font:700 14px var(--body);border-radius:99px;padding:8px 16px;cursor:pointer;min-height:40px}
.tb:hover{border-color:var(--amber);color:var(--saffron)}
.tb.on{background:var(--amber);color:var(--espresso);border-color:var(--amber)}
.seg{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px 18px;margin-top:14px}
.fld{display:block;color:var(--chai);font-weight:600;font-size:.92rem}
.fld input[type=text],.fld input[type=number],.fld input[type=email],.fld input[type=tel],.fld input[type=password],.fld input[type=date],.fld input[type=url],.fld select,.fld textarea{display:block;width:100%;margin-top:6px;background:var(--espresso);color:var(--cream);border:1px solid var(--clay);border-radius:12px;padding:10px 12px;font:600 15px var(--body)}
.fld textarea{min-height:90px;resize:vertical;line-height:1.5}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--amber);outline-offset:1px}
.fld input[type=color]{display:block;width:100%;height:42px;margin-top:6px;border:1px solid var(--clay);border-radius:12px;background:var(--espresso);padding:3px;cursor:pointer}
.fld input[type=range]{display:block;width:100%;margin-top:10px;accent-color:var(--amber)}
.fld small{display:block;color:var(--dust);font-weight:500;margin-top:4px}
.num-ltr{direction:ltr;text-align:start}
.chk{display:flex;align-items:center;gap:8px;color:var(--chai);font-weight:600;font-size:.92rem;margin-top:12px;cursor:pointer}
.chk input{accent-color:var(--amber);width:18px;height:18px}
.sub-h{margin:22px 0 0;font-size:1rem;color:var(--saffron);font-weight:800}
.hide{display:none!important}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:24px;align-items:start}
@media(max-width:820px){.split{grid-template-columns:1fr}}
.preview{display:flex;flex-direction:column;align-items:center;gap:12px;position:sticky;top:84px}
.checker{background-color:#fff;background-image:conic-gradient(#d9d9d9 25%,transparent 0 50%,#d9d9d9 0 75%,transparent 0);background-size:16px 16px;border-radius:12px;padding:14px;line-height:0;max-width:100%}
.checker canvas,.checker img{max-width:100%;height:auto;display:block}
.warn{width:100%;color:#ffb4a2;font-size:.9rem;line-height:1.6;margin:0}
.warn.ok{color:#9be3b0}
.dl-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.out-list{display:grid;gap:12px;margin-top:16px}
.res{display:flex;align-items:center;gap:14px;background:var(--espresso);border:1px solid var(--clay);border-radius:14px;padding:10px 14px}
.res img{width:64px;height:64px;object-fit:cover;border-radius:8px;background:#fff;flex:none}
.res .meta{flex:1;min-width:0;color:var(--chai);font-size:.9rem;line-height:1.5}
.res .meta b{display:block;color:var(--cream);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr;text-align:start}
.res .gain{color:#9be3b0;font-weight:700}
.res .btn{padding:8px 16px;min-height:40px;font-size:14px;flex:none}
.flist{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.flist li{display:flex;align-items:center;gap:10px;background:var(--espresso);border:1px solid var(--clay);border-radius:12px;padding:8px 12px;color:var(--chai);font-size:.92rem}
.flist .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr;text-align:start}
.flist button{width:34px;height:34px;border:1px solid var(--clay);background:var(--roast);color:var(--chai);border-radius:99px;cursor:pointer;font-size:14px;line-height:1;flex:none}
.flist button:hover:not(:disabled){border-color:var(--amber);color:var(--saffron)}
.flist button:disabled{opacity:.3;cursor:default}
.big-result{display:grid;gap:10px;margin-top:16px}
.rrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;background:var(--espresso);border:1px solid var(--clay);border-radius:14px;padding:14px 18px;color:var(--chai)}
.rrow b{font-size:1.25rem;color:var(--cream);direction:ltr}
.rrow.main{border-color:var(--amber)}
.rrow.main b{color:var(--saffron);font-size:1.5rem}
.hdate{background:var(--espresso);border:1px solid var(--clay);border-radius:14px;padding:16px 18px;margin-top:14px;line-height:1.7}
.hdate .big{font-size:1.35rem;font-weight:800;color:var(--saffron)}
.hdate .sm{color:var(--chai)}
.status-line{margin-top:10px;color:var(--chai);font-size:.95rem;min-height:1.4em}
.range{display:flex;align-items:center;gap:10px}
.range output{min-width:3ch;color:var(--chai);font-weight:700;direction:ltr}
html[lang=ar] .fld,html[lang=ar] .chk{line-height:1.8}

/* Karak Digital free tools – design v2.
   An app-style shell with a side menu, soft glass panels and a "bento" home page. Same colours as before. */

/* ---------- background and header ---------- */
:root{--max:1320px}
header.kh .in{max-width:1320px}
body{background:
  radial-gradient(900px 520px at 88% -8%,rgba(217,135,58,.17),transparent 62%),
  radial-gradient(760px 520px at -12% 34%,rgba(168,95,30,.15),transparent 62%),
  var(--espresso);background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.06;z-index:-1;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}
html[data-theme=light] body{background:
  radial-gradient(900px 520px at 88% -8%,rgba(217,135,58,.18),transparent 62%),
  radial-gradient(760px 520px at -12% 34%,rgba(226,170,110,.2),transparent 62%),
  var(--espresso);background-attachment:fixed}
html[data-theme=light] body::before{opacity:.04}
.kh{background:rgba(30,18,12,.7)!important;-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border-bottom:1px solid transparent!important;
  border-image:linear-gradient(90deg,transparent,var(--clay) 20%,var(--amber) 50%,var(--clay) 80%,transparent) 1}
html[data-theme=light] .kh{background:rgba(255,250,242,.72)!important}
.kh-lang,.kh-theme{border-radius:14px}
.kh-lang button{border-radius:11px!important}
.kh-theme{border-radius:14px}

/* ---------- buttons and small controls: softer squares instead of pills ---------- */
.btn{border-radius:14px;letter-spacing:.01em;transition:transform .15s,box-shadow .2s,background .2s,border-color .2s}
.btn-primary{background:linear-gradient(180deg,#E6A056,#D9873A);box-shadow:0 8px 20px -6px rgba(217,135,58,.55),inset 0 1px 0 rgba(255,255,255,.28)}
.btn-primary:hover{background:linear-gradient(180deg,#EDB06C,#E3A33B);transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.03)}
.tb{border-radius:12px}
.perks li,.quick a,.chip{border-radius:12px}
.fld input[type=text],.fld input[type=number],.fld input[type=email],.fld input[type=tel],.fld input[type=password],.fld input[type=date],.fld input[type=url],.fld select,.fld textarea,.fld input[type=color],#fname,select{border-radius:14px}
#drop{border-radius:22px;background:rgba(217,135,58,.05)}
#drop:hover,#drop.over{background:rgba(217,135,58,.12)}
.res,.rrow,.hdate,.flist li,.mchip{border-radius:16px}

/* ---------- panels ---------- */
.card{border-radius:26px;border:1px solid var(--clay);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0) 40%),var(--roast);
  box-shadow:0 24px 44px -28px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.06)}
html[data-theme=light] .card{background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0) 45%),var(--roast);box-shadow:0 18px 36px -26px rgba(120,80,30,.35),inset 0 1px 0 #fff}
.card>h2:first-child{display:flex;align-items:center;gap:10px}
.card>h2:first-child::before{content:"";width:6px;height:22px;border-radius:4px;background:linear-gradient(180deg,var(--saffron),var(--amber));flex:none}
.hero{position:relative;margin-top:22px;padding:30px 34px;border-radius:28px;border:1px solid var(--clay);overflow:hidden;
  background:radial-gradient(520px 240px at 100% 0,rgba(217,135,58,.24),transparent 70%),linear-gradient(160deg,var(--roast),var(--espresso))}
.hero>*{position:relative;z-index:1}
.hero::after{content:"";position:absolute;inset-inline-end:-6px;bottom:-26px;width:200px;height:200px;opacity:.1;pointer-events:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='none' stroke='%23E3A33B' stroke-width='3' stroke-linecap='round'><path d='M22 17c-3-4 3-6 0-11'/><path d='M32 17c-3-4 3-6 0-11'/><path d='M42 17c-3-4 3-6 0-11'/></g><path d='M14 24h32v10a16 16 0 0 1-32 0z' fill='%23D9873A'/><path d='M46 28h4a6 6 0 0 1 0 12h-5' fill='none' stroke='%23D9873A' stroke-width='4' stroke-linecap='round'/></svg>") no-repeat center/contain}
.hero h1{font-size:clamp(1.7rem,3.6vw,2.6rem);margin:.25em 0 .35em}
.hero .lead{max-width:640px}
.sec-h{display:flex;align-items:center;gap:10px}
.sec-h::before{content:"";width:6px;height:1em;border-radius:4px;background:linear-gradient(180deg,var(--saffron),var(--amber));flex:none}
.tagline{letter-spacing:-.01em}

/* ---------- side menu (desktop) ---------- */
.switch a svg{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.switch a{display:flex;align-items:center;gap:10px}
@media(min-width:901px){
  main.container:is(.with-side,:has(>.switch)){max-width:1320px;display:grid;grid-template-columns:236px minmax(0,1fr);column-gap:30px;align-items:start}
  main.container:is(.with-side,:has(>.switch))>*{grid-column:2}
  main.container:is(.with-side,:has(>.switch))>.switch{grid-column:1;grid-row:1/span 40;position:sticky;top:92px;flex-direction:column;align-items:stretch;gap:4px;width:auto;max-width:none;overflow:visible;margin:28px 0 0;padding:10px;border-radius:24px;
    background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0)),var(--roast);border:1px solid var(--clay);box-shadow:0 20px 40px -28px rgba(0,0,0,.7)}
  main.container:is(.with-side,:has(>.switch))>.switch a{justify-content:flex-start;border-radius:15px;padding:11px 14px;text-align:start;white-space:normal;line-height:1.35}
  main.container:is(.with-side,:has(>.switch))>.switch a:hover:not(.on){background:rgba(217,135,58,.1)}
}
@media(max-width:900px){.switch{border-radius:16px}.switch a{border-radius:12px}}

/* ---------- home: bento ---------- */
.hero2{margin-top:16px;padding:40px 42px;border-radius:34px;border:1px solid var(--clay);overflow:hidden;
  background:radial-gradient(640px 320px at 92% 8%,rgba(217,135,58,.26),transparent 66%),linear-gradient(160deg,var(--roast),var(--espresso));box-shadow:0 30px 60px -36px rgba(0,0,0,.8)}
.hero2::before{inset:0;border-radius:inherit}
.cta-row .btn{border-radius:16px}
.today-grid{grid-template-columns:repeat(12,minmax(0,1fr))}
.tw{border-radius:26px}
.tw-clock{grid-column:span 5}.tw-tip{grid-column:span 7}.tw-word{grid-column:span 4}.tw-streak{grid-column:span 8}
.tw-time{font-size:2.3rem}
.w-ar{font-size:3.1rem}
.tgrid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense;gap:16px}
.tcard{border-radius:26px;background:linear-gradient(165deg,rgba(255,255,255,.04),rgba(255,255,255,0) 50%),var(--roast);overflow:hidden}
.tcard::after{content:"";position:absolute;inset-inline-end:-40px;bottom:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(217,135,58,.18),transparent 70%);pointer-events:none;transition:transform .35s}
.tcard:hover::after{transform:scale(1.5)}
.tcard .btn{border-radius:14px}
.tc-top .ico{border-radius:18px}
.tcard.feat{grid-column:span 2;grid-row:span 2;padding:30px;background:radial-gradient(420px 260px at 100% 0,rgba(217,135,58,.3),transparent 70%),linear-gradient(165deg,var(--roast),var(--espresso));border-color:rgba(217,135,58,.5)}
.tcard.feat .ico{width:78px;height:78px;border-radius:24px}
.tcard.feat .ico svg{width:40px;height:40px}
.tcard.feat h3{font-size:1.55rem;margin-top:26px}
.tcard.feat p{font-size:1.05rem;max-width:420px}
.tcard.feat .btn{padding:14px 28px;font-size:16px}
.tcard.wide{grid-column:span 2}
.sugg{grid-column:span 3;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:24px 28px;border-radius:26px;border:1.5px dashed var(--clove);background:rgba(217,135,58,.06)}
.sugg h3{margin:0;font-family:var(--display);font-size:1.05rem}
.sugg p{margin:0 0 10px;color:var(--chai)}
.sugg .btn{align-self:flex-start}
@media(max-width:1000px){
  .tw-clock,.tw-tip,.tw-word,.tw-streak{grid-column:span 6}
  .tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tcard.feat{grid-column:span 2;grid-row:auto}.tcard.wide,.sugg{grid-column:span 2}
}
@media(max-width:700px){.hero2{padding:24px 20px;border-radius:26px}.hero{padding:22px 20px;border-radius:22px}}
@media(max-width:560px){
  .today-grid{grid-template-columns:1fr}.tw-clock,.tw-tip,.tw-word,.tw-streak{grid-column:auto}
  .tgrid{grid-template-columns:1fr}.tcard.feat,.tcard.wide,.sugg{grid-column:auto}
}
html[lang=ar] .tcard.feat h3{font-size:1.4rem}
html[lang=ar] .sugg h3{font-family:'Noto Sans Arabic',Tahoma,sans-serif;line-height:1.7}

/* ---------- the "Free to Use" message ---------- */
.tagline{position:relative;display:flex;align-items:center;gap:20px;width:calc(100% - 44px);max-width:calc(var(--max) - 44px);margin:26px auto 0;padding:20px 30px 20px 22px;border-radius:28px;overflow:hidden;
  border:1px solid transparent;
  background:
    radial-gradient(420px 160px at 100% 0,rgba(217,135,58,.32),transparent 70%),
    linear-gradient(120deg,rgba(217,135,58,.16),rgba(217,135,58,0) 55%) padding-box,
    linear-gradient(var(--roast),var(--roast)) padding-box,
    linear-gradient(110deg,var(--amber),var(--clay) 35%,var(--clay) 65%,var(--saffron)) border-box;
  font-size:inherit;font-weight:inherit;color:var(--cream);text-align:start}
.tagline::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:radial-gradient(rgba(246,238,223,.1) 1px,transparent 1px);background-size:18px 18px;-webkit-mask-image:linear-gradient(100deg,transparent 30%,#000);mask-image:linear-gradient(100deg,transparent 30%,#000)}
.tagline .tg-ico{position:relative;flex:none;width:52px;height:52px;display:block;filter:drop-shadow(0 10px 18px rgba(217,135,58,.4))}
.tagline .tg-ico svg{width:100%;height:100%;display:block}
.tagline .tg-steam path{animation:tgsteam 2.6s ease-in-out infinite;transform-box:fill-box}
.tagline .tg-steam path:nth-child(2){animation-delay:.5s}.tagline .tg-steam path:nth-child(3){animation-delay:1s}
@keyframes tgsteam{0%{opacity:.2;transform:translateY(3px)}50%{opacity:1}100%{opacity:.2;transform:translateY(-3px)}}
.tagline .tg-text{position:relative;display:block;min-width:0}
.tagline .tg-main{display:block;font-family:var(--display);font-weight:700;font-size:clamp(1.15rem,2.6vw,1.85rem);line-height:1.3;letter-spacing:-.01em}
.tagline .tg-main span{display:inline;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0}
.tagline .tg-text,.tagline .tg-ico{margin:0}
.tagline .tg-a{color:var(--cream)}
.tagline .tg-b{background:linear-gradient(90deg,var(--saffron),#FFE2A8,var(--amber),var(--saffron));background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:tgshine 6s linear infinite}
@keyframes tgshine{to{background-position:-220% 0}}
.tagline .tg-c{color:var(--cream);background:linear-gradient(transparent 62%,rgba(217,135,58,.55) 62%,rgba(217,135,58,.55) 92%,transparent 92%);padding:0 .12em;border-radius:4px}
.tagline .tg-sub{display:block;margin-top:8px;color:var(--chai);font-weight:600;font-size:clamp(.92rem,1.6vw,1.08rem);line-height:1.5}
html[data-theme=light] .tagline{background:radial-gradient(420px 160px at 100% 0,rgba(217,135,58,.3),transparent 70%),linear-gradient(120deg,rgba(217,135,58,.14),rgba(217,135,58,0) 55%) padding-box,linear-gradient(var(--roast),var(--roast)) padding-box,linear-gradient(110deg,var(--amber),var(--clay) 35%,var(--clay) 65%,var(--saffron)) border-box}
html[data-theme=light] .tagline .tg-b{background-image:linear-gradient(90deg,#A85F1E,#E3A33B,#D9873A,#A85F1E);background-size:220% 100%}
html[lang=ar] .tagline .tg-main{font-family:'Noto Sans Arabic',Tahoma,sans-serif;font-weight:800;line-height:1.7;letter-spacing:0}
html[lang=ar] .tagline{padding:20px 22px 20px 30px}
@media(max-width:1024px){.tagline{width:calc(100% - 56px)}}
@media(max-width:700px){.tagline{width:calc(100% - 32px);gap:14px;padding:16px 18px 16px 14px;border-radius:22px}.tagline .tg-ico{width:48px;height:48px}}
@media(prefers-reduced-motion:reduce){.tagline .tg-steam path,.tagline .tg-b{animation:none}}

/* ---------- buttons v3: clear hierarchy, icons, visible states ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:11px 22px;font-size:15px;line-height:1.2;text-align:center}
.btn-primary{color:#1E120C;border:1.5px solid rgba(255,214,150,.45);text-shadow:0 1px 0 rgba(255,255,255,.18)}
.btn-primary:active{transform:translateY(1px) scale(.99);box-shadow:0 3px 10px -4px rgba(217,135,58,.6)}
.btn-ghost{background:rgba(217,135,58,.09);border:1.5px solid rgba(217,135,58,.55);color:var(--cream)}
.btn-ghost:hover{background:rgba(217,135,58,.2);border-color:var(--amber);color:var(--saffron);transform:translateY(-1px)}
.btn-ghost:active{transform:translateY(1px)}
.btn:focus-visible,.tb:focus-visible,.star:focus-visible{outline:3px solid rgba(227,163,59,.6);outline-offset:2px}
.btn:disabled,.btn[disabled]{background:transparent!important;border:1.5px dashed var(--clay)!important;color:var(--dust)!important;box-shadow:none!important;text-shadow:none!important;cursor:not-allowed;transform:none!important;opacity:1}
.tb{border:1.5px solid rgba(217,135,58,.32);background:rgba(217,135,58,.06);color:var(--chai)}
.tb:hover{background:rgba(217,135,58,.16);border-color:var(--amber);color:var(--saffron)}
.tb.on{background:linear-gradient(180deg,#E6A056,#D9873A);border-color:rgba(255,214,150,.5);color:#1E120C;box-shadow:0 6px 16px -6px rgba(217,135,58,.6)}
.row{gap:12px}
.res .btn::before{content:"";width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:var(--ic-download) center/contain no-repeat;mask:var(--ic-download) center/contain no-repeat}
.tcard .btn::after,.cta-row .btn-primary::after{content:"";width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:var(--ic-arrow) center/contain no-repeat;mask:var(--ic-arrow) center/contain no-repeat}
html[dir=rtl] .tcard .btn::after,html[dir=rtl] .cta-row .btn-primary::after{transform:scaleX(-1)}
html[data-theme=light] .btn-ghost{background:rgba(217,135,58,.12);border-color:rgba(168,95,30,.55);color:#1E120C}
html[data-theme=light] .btn-ghost:hover{color:#A85F1E}
html[data-theme=light] .tb{color:#5A4636}
html[data-theme=light] .btn-primary{border-color:rgba(168,95,30,.4)}
@media(max-width:700px){.btn{min-height:48px}}

:root{--ic-bolt:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M13 2L4 14h7l-1 8 9-12h-7z'/></svg>");--ic-x:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 6l12 12M18 6L6 18'/></svg>");--ic-check:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>");--ic-copy:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='9' width='11' height='11' rx='2'/><path d='M5 15V6a2 2 0 0 1 2-2h9'/></svg>");--ic-download:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4v11M7 11l5 5 5-5M5 20h14'/></svg>");--ic-translate:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6h9M8.5 4v2M6 6c.5 3 2.5 5.5 5.5 7M11 6c-.5 3-3 6-6.5 8'/><path d='M12 20l4.5-10L21 20M13.5 17h6'/></svg>");--ic-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='16' rx='2'/><circle cx='9' cy='10' r='2'/><path d='M21 17l-5-5-9 8'/></svg>");--ic-share:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='6' cy='12' r='2.5'/><circle cx='18' cy='6' r='2.5'/><circle cx='18' cy='18' r='2.5'/><path d='M8.2 10.8l7.6-3.6M8.2 13.2l7.6 3.6'/></svg>");--ic-undo:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 14L4 9l5-5'/><path d='M4 9h10a6 6 0 0 1 0 12h-3'/></svg>");--ic-trash:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/></svg>");--ic-external:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/></svg>");--ic-cal:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M3 10h18M8 3v4M16 3v4'/></svg>");--ic-zip:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='5' rx='1'/><path d='M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4'/></svg>");--ic-refresh:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 11a8 8 0 1 0-2.3 6'/><path d='M20 5v6h-6'/></svg>");--ic-phone:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='7' y='2' width='10' height='20' rx='2'/><path d='M11 18h2'/></svg>");--ic-arrow:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>");}
#go::before,#clear::before,#clearAll::before,#logoRm::before,#chkOut::before,#chkSrc::before,#copy::before,#trCopy::before,#w_copy::before,#dl::before,#trDl::before,#dlPng::before,#dlJpg::before,#dlSvg::before,#trBtn::before,#saveImg::before,#share::before,#undo::before,#del::before,#w_open::before,#today::before,#zipall::before,#reset::before,#instBtn::before{content:"";width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
#go{--ic:var(--ic-bolt)}
#clear,#clearAll,#logoRm{--ic:var(--ic-x)}
#chkOut,#chkSrc{--ic:var(--ic-check)}
#copy,#trCopy,#w_copy{--ic:var(--ic-copy)}
#dl,#trDl,#dlPng,#dlJpg,#dlSvg{--ic:var(--ic-download)}
#trBtn{--ic:var(--ic-translate)}
#saveImg{--ic:var(--ic-image)}
#share{--ic:var(--ic-share)}
#undo{--ic:var(--ic-undo)}
#del{--ic:var(--ic-trash)}
#w_open{--ic:var(--ic-external)}
#today{--ic:var(--ic-cal)}
#zipall{--ic:var(--ic-zip)}
#reset{--ic:var(--ic-refresh)}
#instBtn{--ic:var(--ic-phone)}
.preview .dl-row{flex-direction:column;align-items:stretch;width:100%}
.preview .dl-row .btn{width:100%}

/* banner: one big line */
.tagline{container-type:inline-size}
.tagline .tg-text{min-width:0;flex:1}
.tagline .tg-main{white-space:nowrap;font-size:clamp(1rem,2.6vw,2.1rem)}
@supports (font-size:1cqw){.tagline .tg-main{font-size:clamp(11px,calc((100cqw - 150px)/25.5),38px)}}
@media(max-width:700px){
  .tagline{padding:16px 18px;gap:0}
  .tagline .tg-ico{position:absolute;inset-inline-end:-8px;top:50%;transform:translateY(-50%);width:92px;height:92px;opacity:.13;filter:none;pointer-events:none}
  .tagline .tg-main{font-family:var(--body);font-weight:800;letter-spacing:-.015em}
  .tagline .tg-sub{font-size:.88rem;margin-top:6px}
}
@supports (font-size:1cqw){@media(max-width:700px){.tagline .tg-main{font-size:clamp(12px,calc(100cqw / 19.2),26px)}}}
html[lang=ar] .tagline .tg-main{font-family:'Noto Sans Arabic',Tahoma,sans-serif;font-weight:800}

/* ---------- forms v2: roomier, clearer ---------- */
.card{padding:32px}
.card>h2:first-child{margin-bottom:20px;font-size:1.15rem}
.seg{gap:10px;margin-top:4px}
.seg .tb{padding:11px 20px;min-height:46px;font-size:15px}
[data-pane]{margin-top:22px;padding:26px;border:1px solid var(--clay);border-radius:22px;background:rgba(0,0,0,.16)}
html[data-theme=light] [data-pane]{background:rgba(217,135,58,.06)}
.hide{display:none!important}
.form-grid{gap:24px 26px;margin-top:0;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.fld{font-size:.95rem;font-weight:700;color:var(--cream);line-height:1.4}
.fld>input,.fld>select,.fld>textarea,.fld>.range{margin-top:10px}
.fld input[type=text],.fld input[type=number],.fld input[type=email],.fld input[type=tel],.fld input[type=password],.fld input[type=date],.fld input[type=url],.fld select,.fld textarea{padding:13px 16px;font-size:16px;font-weight:600}
.fld input[type=file]{margin-top:10px;width:100%;color:var(--chai);font-size:.9rem}
.fld input[type=file]::file-selector-button{margin-inline-end:12px;padding:9px 16px;border-radius:12px;border:1.5px solid rgba(217,135,58,.55);background:rgba(217,135,58,.12);color:var(--cream);font:700 14px var(--body);cursor:pointer}
.fld small{display:block;font-weight:500;font-size:.86rem;line-height:1.65;margin-top:10px;color:var(--chai)}
.chk{margin-top:22px;width:fit-content;max-width:100%;padding:12px 16px;border:1px solid var(--clay);border-radius:14px;background:rgba(255,255,255,.025);font-size:.95rem;line-height:1.4}
.sub-h{margin:34px 0 18px;padding-top:24px;border-top:1px solid var(--clay);font-size:1.05rem}
.card .row{margin-top:28px}
.status-line,#status{margin-top:16px}
.range{gap:14px}
.flist{margin-top:18px;gap:10px}
.flist li{padding:10px 14px}
.out-list{margin-top:20px;gap:14px}
.res{padding:12px 16px}
.note{line-height:1.7}
#drop{padding:46px 20px}
@media(max-width:700px){
  .card{padding:20px}
  [data-pane]{padding:16px;border-radius:18px;margin-top:18px}
  .form-grid{gap:20px}
  .seg .tb{padding:10px 14px;font-size:14px}
  #drop{padding:34px 14px}
}
.chk+.form-grid,.chk+label.fld,.form-grid+.chk{margin-top:24px}
.split>div>h2:first-child{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-size:1.15rem}
.split>div>h2:first-child::before{content:"";width:6px;height:22px;border-radius:4px;background:linear-gradient(180deg,var(--saffron),var(--amber));flex:none}
.split>div>h2.sub-h{font-size:1.05rem}
.split>div>h2.sub-h::before{display:none}

/* mobile speed: lighter effects, skip painting what is off-screen */
@media(max-width:700px){
  *,*::before,*::after{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .card,.tcard,.tool,.chip,.sugg,.faq details{box-shadow:none!important}
  *{scroll-behavior:auto!important}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.faq,.sugg,footer,.credit{content-visibility:auto;contain-intrinsic-size:auto 500px}
.switch{min-height:58px}.switch a{min-height:44px;box-sizing:border-box}