/* CONVERT by PAPZO — Sombre premium */
:root{--bg:#070A12;--bg2:#0B101C;--surface:#101725;--surface2:#151E31;--line:#212C44;--line2:#2B3A5C;
--ink:#E9EDF6;--ink2:#C6CEDF;--muted:#8B96AC;--red:#FF4B38;--glow:rgba(255,75,56,.4);--glow-soft:rgba(255,75,56,.16);
--blue:#4F7CFF;--ok:#3DDC84;--font-d:'Sora',sans-serif;--font-b:'Inter',sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-b);color:var(--ink);background:var(--bg);line-height:1.6}
body.rtl{font-family:'Tajawal',sans-serif}
a{color:var(--red);text-decoration:none}
h1,h2,h3{font-family:var(--font-d);color:#fff;line-height:1.25}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px}
.center{text-align:center}.muted{color:var(--muted)}.small{font-size:.84rem}
::selection{background:var(--red);color:#fff}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--bg2)}::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px}

.topbar{position:sticky;top:0;z-index:50;background:rgba(9,13,22,.78);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;height:62px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-d);font-weight:800;font-size:1.1rem;color:#fff}
.brand img{border-radius:50%;animation:spin 16s linear infinite}
.brand b{color:var(--red);text-shadow:0 0 16px var(--glow)}
@keyframes spin{to{transform:rotate(360deg)}}
.lang-sel{background:var(--surface2);color:#fff;border:1px solid var(--line2);border-radius:8px;padding:7px 10px;font-size:.85rem}

.btn{display:inline-block;font-family:var(--font-d);font-weight:700;padding:11px 24px;border-radius:999px;font-size:.95rem;cursor:pointer;border:1.5px solid var(--line2);background:var(--surface);color:#fff;transition:.2s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.96)}
.btn-red{background:linear-gradient(135deg,var(--red),#FF6A3D);border-color:transparent;box-shadow:0 0 20px var(--glow-soft)}
.btn-red:hover{box-shadow:0 0 32px var(--glow)}
.btn-line:hover{background:var(--surface2)}
.btn-lg{padding:14px 32px;font-size:1.05rem}
.btn-sm{padding:7px 16px;font-size:.85rem}

.hero{position:relative;padding:56px 0 46px;overflow:hidden;background:radial-gradient(760px 420px at 50% -12%,rgba(79,124,255,.12),transparent 60%),var(--bg)}
.hero-tool{padding:38px 0 46px}
.blobs i{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;pointer-events:none}
.blobs .a{width:340px;height:340px;background:var(--glow-soft);top:-110px;left:-80px;animation:blob 11s ease-in-out infinite}
.blobs .b{width:300px;height:300px;background:rgba(79,124,255,.12);bottom:-120px;right:-60px;animation:blob 13s ease-in-out infinite reverse}
@keyframes blob{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(24px,-16px) scale(1.07)}66%{transform:translate(-14px,12px) scale(.94)}}
.hero h1{font-size:clamp(1.5rem,3.8vw,2.5rem);font-weight:800;background:linear-gradient(120deg,#fff 55%,#FFB0A5);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;position:relative;z-index:2}
.hero .lead{color:var(--ink2);max-width:640px;margin:12px auto 16px;position:relative;z-index:2}
.crumb{font-size:.85rem;color:var(--muted);margin-bottom:10px;position:relative;z-index:2}
.badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:14px 0 22px;position:relative;z-index:2}
.badges span{background:var(--surface2);border:1px solid var(--line2);color:var(--ink2);font-size:.8rem;font-weight:600;padding:5px 13px;border-radius:999px}

.tsearch{width:100%;max-width:520px;padding:14px 20px;border-radius:999px;border:1.5px solid var(--line2);background:var(--surface);color:#fff;font-size:1rem;position:relative;z-index:2}
.tsearch:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--glow-soft)}

.drop{max-width:560px;margin:0 auto;border:2px dashed var(--line2);border-radius:18px;padding:44px 24px;cursor:pointer;background:var(--surface);transition:.2s;position:relative;z-index:2}
.drop:hover,.drop.over{border-color:var(--red);background:var(--surface2);box-shadow:0 0 34px var(--glow-soft)}
.drop-ic{font-size:2rem;margin-bottom:6px;animation:bob 2.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.drop p{color:var(--ink2);font-size:.95rem}
.txtarea{width:100%;max-width:640px;min-height:220px;padding:16px;border-radius:14px;border:1.5px solid var(--line2);background:var(--surface);color:#fff;font-size:1rem;resize:vertical;position:relative;z-index:2}
.txtarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--glow-soft)}

.opts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:16px;position:relative;z-index:2}
.opts label{font-size:.85rem;color:var(--ink2);display:flex;align-items:center;gap:7px}
.opts input[type=number],.opts select{background:var(--surface);border:1.5px solid var(--line2);color:#fff;border-radius:9px;padding:8px 10px;width:90px;font-size:.9rem}
.opts select{width:auto}
.opts input[type=range]{accent-color:var(--red)}

.results{max-width:560px;margin:18px auto 0;display:flex;flex-direction:column;gap:10px;position:relative;z-index:2}
.res{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:12px 16px;animation:pop .3s ease}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.res-info{text-align:start;overflow:hidden}
.res-info b{display:block;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}
.spin{width:20px;height:20px;border:3px solid var(--line2);border-top-color:var(--red);border-radius:50%;animation:spin 0.9s linear infinite;flex:0 0 auto}
.actionbar{justify-content:center;margin-top:14px;display:flex;position:relative;z-index:2}

.tools{padding:34px 20px 60px}
.cat-h{font-size:1.15rem;margin:26px 0 12px}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.tcard{display:block;background:linear-gradient(160deg,var(--surface),var(--bg2));border:1px solid var(--line);border-radius:12px;padding:13px 15px;color:var(--ink2);font-size:.86rem;transition:.2s}
.tcard:hover{transform:translateY(-3px);border-color:var(--line2);box-shadow:0 12px 28px rgba(0,0,0,.45),0 0 24px var(--glow-soft);color:#fff}
.tcard b{font-weight:600}

.seo{padding:14px 20px 60px}
.seo h2{font-size:1.2rem;margin:30px 0 12px}
.how{margin:0 0 6px 22px}
.how li{padding:5px 0;color:var(--ink2)}
.why{list-style:none}
.why li{padding:6px 0;color:var(--ink2)}
.why li:before{content:"✓ ";color:var(--ok);font-weight:700}
.seo details{border:1px solid var(--line);border-radius:11px;background:var(--surface);margin-bottom:9px;overflow:hidden}
.seo summary{cursor:pointer;padding:13px 16px;font-weight:600;color:#fff;list-style:none}
.seo summary::-webkit-details-marker{display:none}
.seo details p{padding:0 16px 13px;color:var(--muted);font-size:.92rem}

.footer{background:var(--bg2);border-top:1px solid var(--line);color:var(--muted);padding:22px 0;font-size:.86rem}
.footer-in{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.footer a{color:var(--ink2)}
@media(max-width:640px){.res-info b{max-width:150px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Cartes catégories animées ---------- */
.cats{padding:8px 20px 20px}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.catcard{position:relative;display:block;background:linear-gradient(160deg,var(--surface),var(--bg2));
  border:1px solid var(--line);border-radius:18px;padding:26px 22px 22px;color:var(--ink2);
  transition:transform .25s, box-shadow .28s, border-color .25s;overflow:hidden;
  animation:cardIn .6s cubic-bezier(.2,.7,.3,1) both;animation-delay:var(--d,0s)}
@keyframes cardIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.catcard:before{content:"";position:absolute;inset:-1px;border-radius:18px;padding:1px;
  background:linear-gradient(135deg,var(--glow-soft),transparent 40%,rgba(79,124,255,.15));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .3s}
.catcard:hover{transform:translateY(-6px);border-color:var(--line2);box-shadow:0 20px 48px rgba(0,0,0,.55),0 0 40px var(--glow-soft)}
.catcard:hover:before{opacity:1}
.catcard h2{font-size:1.06rem;margin:12px 0 6px;color:#fff}
.catcard p{font-size:.86rem;color:var(--muted);margin-bottom:14px}
.cat-n{display:inline-block;background:var(--surface2);border:1px solid var(--line2);color:var(--ink2);
  font-size:.75rem;font-weight:700;padding:4px 12px;border-radius:999px}
.cat-go{position:absolute;bottom:20px;right:20px;color:var(--red);font-weight:700;font-size:.86rem;
  opacity:0;transform:translateX(-6px);transition:.25s}
.catcard:hover .cat-go{opacity:1;transform:none}
.cat-ic{display:inline-flex;align-items:center;justify-content:center;width:62px;height:62px;font-size:1.9rem;
  background:var(--surface2);border:1px solid var(--line2);border-radius:16px;
  filter:drop-shadow(0 0 16px var(--glow-soft))}
.cat-ic-big{display:inline-flex;align-items:center;justify-content:center;width:84px;height:84px;font-size:2.6rem;
  background:var(--surface2);border:1px solid var(--line2);border-radius:22px;margin-bottom:14px;
  filter:drop-shadow(0 0 22px var(--glow-soft));position:relative;z-index:2}
.a-float{animation:icFloat 3.4s ease-in-out infinite}
@keyframes icFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}
.a-flip{animation:icFlip 4.2s ease-in-out infinite}
@keyframes icFlip{0%,100%{transform:rotateY(0)}50%{transform:rotateY(180deg)}}
.a-pulse{animation:icPulse 2.6s ease-in-out infinite}
@keyframes icPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.a-bounce{animation:icBounce 2.2s ease-in-out infinite}
@keyframes icBounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-4px)}}
.qres{max-width:640px;margin:14px auto 0;position:relative;z-index:3}
.tgrid-cat{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}