:root{color-scheme:dark;--bg:#07070f;--s:#0f0f1a;--c:#15151f;--a:#e8c547;--a2:#ff6b35;--t:#f0f0f0;--m:#9595b5;--b:#2a2a3a;--r:14px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Cairo',sans-serif;background:var(--bg);color:var(--t);min-height:100vh;overflow-x:hidden}
body.en{font-family:'Inter',sans-serif}
.topnav{position:fixed;top:0;left:0;right:0;z-index:200;height:56px;background:rgba(7,7,15,.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--b);display:flex;align-items:center;justify-content:space-between;padding:0 14px;gap:8px}
.logo{display:flex;align-items:center;gap:8px;cursor:pointer}
.logo-svg{width:34px;height:34px;flex-shrink:0}
.logo-text{font-size:17px;font-weight:900;background:linear-gradient(135deg,var(--a),var(--a2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.3px}
.nav-r{display:flex;align-items:center;gap:6px}
.lang-box{display:flex;background:var(--s);border:1px solid var(--b);border-radius:18px;padding:2px;gap:2px}
.lb{padding:4px 10px;border-radius:14px;border:none;background:none;color:var(--m);font-size:11px;font-weight:800;cursor:pointer;font-family:inherit;transition:all .15s}
.lb.on{background:var(--a);color:#000}
.share-btn{display:flex;align-items:center;gap:5px;background:var(--s);border:1px solid var(--b);color:var(--t);border-radius:18px;padding:6px 12px;font-size:11px;font-weight:800;cursor:pointer;font-family:inherit}
.share-btn svg{width:13px;height:13px;flex-shrink:0}
.share-btn:hover{border-color:var(--a);color:var(--a)}
.pg{display:none;padding-top:56px;padding-bottom:72px;min-height:100vh}
/* v3.8: the fade-in plays only for moves inside the app — on the first load the page paints at once
   (a fading page is invisible to the browser's largest-paint measure until it ends) */
.gs-moved .pg{animation:fi .22s ease}
.pg.on{display:block}
@keyframes fi{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.dash{padding:20px 16px 8px;max-width:480px;margin:0 auto}
.dash-head{text-align:center;padding:18px 0 22px}
.badge{display:inline-flex;align-items:center;gap:6px;background:rgba(232,197,71,.1);border:1px solid rgba(232,197,71,.28);border-radius:40px;padding:4px 12px;font-size:11px;color:var(--a);font-weight:700;margin-bottom:11px}
.dash-title{font-size:23px;font-weight:900;line-height:1.25;margin-bottom:7px}
.hl{background:linear-gradient(135deg,var(--a),var(--a2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.dash-sub{font-size:12px;color:var(--m);line-height:1.65}
.tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:20px}
.tools-grid .tool-card:last-child:nth-child(odd){grid-column:1/-1}
.tool-card{background:var(--c);border:1px solid var(--b);border-radius:16px;padding:18px 12px 14px;text-align:center;cursor:pointer;transition:all .2s;position:relative}
.tool-card:hover{border-color:var(--a);transform:translateY(-2px);box-shadow:0 8px 28px rgba(232,197,71,.12)}
.tool-card:active{transform:scale(.97)}
.tool-svg{width:36px;height:36px;margin:0 auto 10px;display:block;transition:transform .2s}
.tool-card:hover .tool-svg{transform:scale(1.1)}
.tool-name{font-size:13px;font-weight:900;margin-bottom:3px}
.tool-desc{font-size:10px;color:var(--m);line-height:1.5}
.tool-badge{display:inline-block;background:rgba(232,197,71,.12);border:1px solid rgba(232,197,71,.28);border-radius:20px;padding:2px 8px;font-size:9px;color:var(--a);font-weight:700;margin-top:5px}
.tool-badge-new{background:rgba(255,107,53,.12);border-color:rgba(255,107,53,.3);color:var(--a2)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}
.stat{background:var(--c);border:1px solid var(--b);border-radius:var(--r);padding:11px 8px;text-align:center}
.sn{font-size:17px;font-weight:900;background:linear-gradient(135deg,var(--a),var(--a2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sl{font-size:10px;color:var(--m);margin-top:2px}
.sec{padding:0 0 18px}
.stitle{font-size:15px;font-weight:900;margin-bottom:11px}
.stitle em{color:var(--a);font-style:normal}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fcard{background:var(--c);border:1px solid var(--b);border-radius:var(--r);padding:11px;transition:border-color .15s}
.fcard:hover{border-color:var(--a)}
.ficon-wrap{width:28px;height:28px;margin-bottom:6px}
.ftitle{font-size:11px;font-weight:700;margin-bottom:2px}
.fdesc{font-size:10px;color:var(--m);line-height:1.45}
.tcon{padding:16px;max-width:480px;margin:0 auto}
.back-btn{display:flex;align-items:center;gap:5px;color:var(--a);font-size:12px;font-weight:700;cursor:pointer;margin-bottom:14px;background:none;border:none;font-family:inherit;padding:0}
.ttitle{font-size:17px;font-weight:900;margin-bottom:3px}
.tsub{font-size:11px;color:var(--m);margin-bottom:13px}
.upzone{border:2px dashed var(--b);border-radius:16px;padding:26px 16px;text-align:center;cursor:pointer;transition:all .25s;background:var(--s);position:relative;overflow:hidden}
.upzone:hover,.upzone.drag{border-color:var(--a);background:rgba(232,197,71,.04)}
.upzone input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.upsvg{width:38px;height:38px;margin:0 auto 8px;display:block}
.uptitle{font-size:13px;font-weight:700;margin-bottom:2px}
.upsub{font-size:10px;color:var(--m)}
.ctrls{margin-top:11px;display:none;flex-direction:column;gap:9px}
.ctrls.on{display:flex}
.cg{background:var(--c);border-radius:var(--r);padding:11px;border:1px solid var(--b)}
.clabel{font-size:10px;font-weight:700;color:var(--m);margin-bottom:7px;text-transform:uppercase;letter-spacing:.7px}
.ttabs{display:flex;gap:4px;margin-bottom:8px;flex-wrap:wrap}
.ttab{background:var(--s);border:1px solid var(--b);border-radius:7px;padding:5px 9px;color:var(--m);font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;transition:all .15s}
.ttab.on{background:var(--a);color:#000;border-color:var(--a)}
.gopts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.gbtn{background:var(--s);border:1px solid var(--b);border-radius:8px;padding:7px 4px;color:var(--t);font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;transition:all .15s;text-align:center}
.gbtn:hover{border-color:var(--a);color:var(--a)}
.gbtn.on{background:var(--a);color:#000;border-color:var(--a)}
.gmini{display:grid;gap:2px;width:22px;height:22px;margin:0 auto 4px}
.gmini span{background:currentColor;border-radius:1px;opacity:.7}
.pgrid{display:grid;gap:2px;border-radius:8px;overflow:hidden;border:1px solid var(--b);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.pgrid canvas{display:block;width:100%;pointer-events:none}
.pgrid.panning{cursor:grabbing}
.zoom-ctrls{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px}
.zbtn{width:32px;height:32px;border-radius:50%;background:var(--s);border:1px solid var(--b);color:var(--t);font-size:17px;font-weight:900;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit;transition:all .15s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;padding:0}
.zbtn:hover{border-color:var(--a);color:var(--a)}
.zbtn:active{transform:scale(.92)}
.zbtn:disabled{opacity:.35;cursor:not-allowed;transform:none}
.zlevel{min-width:42px;text-align:center;font-size:11px;font-weight:800;color:var(--m)}
.pan-hint{display:flex;align-items:center;justify-content:center;gap:5px;font-size:10px;color:var(--m);margin-top:6px;opacity:.85}
.pan-hint svg{width:12px;height:12px;flex-shrink:0}
.onote{background:rgba(232,197,71,.07);border:1px solid rgba(232,197,71,.2);border-radius:7px;padding:7px;font-size:10px;color:var(--a);text-align:center;margin-top:5px}
.dbtn{width:100%;padding:12px;border-radius:11px;background:linear-gradient(135deg,var(--a),var(--a2));color:#000;font-family:inherit;font-size:13px;font-weight:900;border:none;cursor:pointer;transition:transform .15s;display:flex;align-items:center;justify-content:center;gap:6px}
.dbtn:active{transform:scale(.98)}
.rbtn{width:100%;padding:9px;border-radius:11px;background:transparent;color:var(--m);font-family:inherit;font-size:12px;font-weight:600;border:1px solid var(--b);cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:6px}
.rbtn:hover{border-color:var(--a2);color:var(--a2)}
.hsteps{display:flex;flex-direction:column;gap:7px}
.hstep{display:flex;gap:9px;align-items:flex-start;background:var(--c);border:1px solid var(--b);border-radius:var(--r);padding:11px}
.hnum{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--a),var(--a2));color:#000;font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.htext h3,.htext h4{font-size:12px;font-weight:700;margin-bottom:2px}
.htext p{font-size:10px;color:var(--m);line-height:1.5}
.usage-hint{background:rgba(232,197,71,.05);border:1px solid rgba(232,197,71,.15);border-radius:10px;padding:10px 12px;margin-bottom:12px;font-size:10px;color:var(--m);line-height:1.65;direction:rtl}
.usage-hint strong{color:var(--a);font-weight:700}
.dot-text-input{width:100%;background:var(--s);border:1px solid var(--b);border-radius:9px;padding:11px;color:var(--t);font-family:'Cairo',sans-serif;font-size:16px;font-weight:700;text-align:center;direction:rtl;resize:none;min-height:64px;transition:border-color .15s;margin-bottom:10px}
.dot-text-input:focus{outline:none;border-color:var(--a2)}
.dot-opts{background:var(--c);border:1px solid var(--b);border-radius:var(--r);padding:11px;margin-bottom:11px}
.dsz{padding:8px 4px;background:var(--s);border:1px solid var(--b);border-radius:7px;color:var(--m);font-family:inherit;font-size:10px;font-weight:700;cursor:pointer;text-align:center;transition:all .15s}
.dsz small{display:block;font-size:9px;opacity:.65}
.dsz.on{background:var(--a2);color:#fff;border-color:var(--a2)}
.clbl{font-size:10px;color:var(--m);font-weight:700;white-space:nowrap}
input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:4px;background:var(--b);border-radius:2px;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--a2);cursor:pointer}
.spinner{width:17px;height:17px;border-radius:50%;border:2px solid var(--b);border-top-color:var(--a2);animation:spin .7s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
.dot-result{background:var(--s);border:1px solid var(--b);border-radius:var(--r);padding:13px;display:none}
.dot-result.show{display:block}
.dot-preview{font-family:'Courier New',Courier,monospace;font-size:7px;line-height:1.0;white-space:pre;overflow:auto;background:#000;border-radius:7px;padding:10px;color:#fff;max-height:270px;border:1px solid var(--b);user-select:all;letter-spacing:0;word-break:break-all}
.dot-note{background:rgba(255,107,53,.07);border:1px solid rgba(255,107,53,.2);border-radius:7px;padding:7px;font-size:10px;color:var(--a2);text-align:center;margin:8px 0}
.dot-actions{display:flex;gap:7px;margin-top:8px}
.dot-copy-btn{flex:1;padding:11px;border-radius:10px;background:linear-gradient(135deg,var(--a2),var(--a));color:#000;font-family:inherit;font-size:13px;font-weight:900;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;transition:transform .15s}
.dot-copy-btn:active{transform:scale(.98)}
.dot-reset-btn{padding:11px 13px;border-radius:10px;background:var(--c);border:1px solid var(--b);color:var(--m);font-family:inherit;font-size:15px;cursor:pointer;transition:all .15s}
.dot-reset-btn:hover{border-color:var(--a2);color:var(--a2)}
.bcon{padding:16px;max-width:480px;margin:0 auto}
.bhero{background:linear-gradient(135deg,rgba(232,197,71,.09),rgba(255,107,53,.09));border:1px solid var(--b);border-radius:16px;padding:16px;margin-bottom:14px}
.bhero h2{font-size:17px;font-weight:900;margin-bottom:3px}
.bhero p{font-size:11px;color:var(--m)}
.bcard{background:var(--c);border:1px solid var(--b);border-radius:var(--r);padding:12px;cursor:pointer;transition:all .15s;margin-bottom:7px}
.bcard:hover{border-color:var(--a);transform:translateY(-1px)}
.btag{display:inline-block;background:rgba(232,197,71,.1);color:var(--a);font-size:9px;font-weight:700;padding:2px 7px;border-radius:40px;margin-bottom:4px}
.bcard h3{font-size:12px;font-weight:700;margin-bottom:3px;line-height:1.4}
.bcard p{font-size:10px;color:var(--m);line-height:1.5}
.bmeta{font-size:10px;color:var(--m);margin-top:6px}
.aback{display:flex;align-items:center;gap:5px;color:var(--a);font-size:12px;font-weight:700;cursor:pointer;margin-bottom:13px;background:none;border:none;font-family:inherit}
.atitle{font-size:17px;font-weight:900;margin-bottom:7px;line-height:1.3}
.ameta{font-size:10px;color:var(--m);margin-bottom:13px}
.acontent h3{font-size:13px;font-weight:700;margin:13px 0 5px;color:var(--a)}
.acontent p{font-size:11px;color:var(--m);line-height:1.75;margin-bottom:7px}
.acontent ul{padding-right:13px;margin-bottom:7px}
.acontent li{font-size:11px;color:var(--m);line-height:1.75;margin-bottom:3px}
.atip{background:rgba(232,197,71,.07);border-right:3px solid var(--a);border-radius:6px;padding:8px;margin:9px 0;font-size:11px;color:var(--t)}
.scon{padding:16px;max-width:480px;margin:0 auto}
.shero{text-align:center;padding:22px 0 16px}
.shero h1,.shero .shero-h{font-size:20px;font-weight:900;margin-bottom:4px}
.shero p{font-size:11px;color:var(--m)}
.ssec{background:var(--c);border:1px solid var(--b);border-radius:var(--r);padding:13px;margin-bottom:7px}
.ssec h3{font-size:12px;font-weight:700;margin-bottom:6px;color:var(--a)}
.ssec p{font-size:11px;color:var(--m);line-height:1.65;margin-bottom:4px}
.ssec ul{padding-right:13px}
.ssec li{font-size:11px;color:var(--m);line-height:1.65;margin-bottom:2px}
.cform{display:flex;flex-direction:column;gap:8px}
.fg{display:flex;flex-direction:column;gap:3px}
.flabel{font-size:11px;font-weight:700;color:var(--m)}
.finput,.ftarea{background:var(--s);border:1px solid var(--b);border-radius:7px;padding:9px;color:var(--t);font-family:inherit;font-size:12px;transition:border-color .15s}
.finput:focus,.ftarea:focus{outline:none;border-color:var(--a)}
.ftarea{min-height:88px;resize:vertical}
.fbtn{background:linear-gradient(135deg,var(--a),var(--a2));color:#000;font-family:inherit;font-size:13px;font-weight:900;border:none;border-radius:9px;padding:10px;cursor:pointer}
.tcard{background:var(--c);border:1px solid var(--b);border-radius:var(--r);padding:14px;text-align:center;margin-top:7px}
.tavatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--a),var(--a2));margin:0 auto 7px;display:flex;align-items:center;justify-content:center}
.tname{font-size:13px;font-weight:700;margin-bottom:2px}
.trole{font-size:10px;color:var(--a);font-weight:600}
.tbio{font-size:11px;color:var(--m);margin-top:5px;line-height:1.55}
footer{background:var(--s);border-top:1px solid var(--b);padding:20px 16px;text-align:center;margin-top:20px}
.flogo{font-size:16px;font-weight:900;background:linear-gradient(135deg,var(--a),var(--a2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:5px}
.fdesc{font-size:10px;color:var(--m);margin-bottom:10px}
.flinks{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.flink{color:var(--m);font-size:10px;cursor:pointer;transition:color .15s}
.flink:hover{color:var(--a)}
.fcopy{font-size:9px;color:var(--m)}
.toast{position:fixed;top:-60px;left:50%;transform:translateX(-50%);background:var(--a);color:#000;padding:7px 16px;border-radius:40px;font-weight:700;font-size:12px;transition:top .22s cubic-bezier(.34,1.56,.64,1);z-index:1000;white-space:nowrap;pointer-events:none;font-family:'Cairo',sans-serif;display:flex;align-items:center;gap:6px;box-shadow:0 4px 16px rgba(232,197,71,.35)}
.toast.show{top:68px}
.toast.toast--warning{background:var(--a2);color:#fff;box-shadow:0 4px 16px rgba(255,107,53,.35)}
.toast.toast--error{background:#ff4d4f;color:#fff;box-shadow:0 4px 16px rgba(255,77,79,.35)}
.toast.toast--info{background:#4ecdc4;color:#04302d;box-shadow:0 4px 16px rgba(78,205,196,.35)}
.bnav{position:fixed;bottom:0;left:0;right:0;background:rgba(7,7,15,.97);backdrop-filter:blur(16px);border-top:1px solid var(--b);display:grid;grid-template-columns:repeat(4,1fr);z-index:100;padding:5px 7px 7px;gap:4px}
.bni{display:flex;flex-direction:column;align-items:center;padding:6px 2px;cursor:pointer;color:var(--m);font-size:9px;font-weight:700;gap:2px;border:none;background:var(--s);font-family:inherit;transition:all .15s;border-radius:10px;border:1px solid var(--b)}
.bni:hover{transform:translateY(-1px)}
.bni svg{width:18px;height:18px;transition:transform .15s;stroke:currentColor}
.bni:hover svg{transform:scale(1.12)}
#bn-home.on{background:rgba(232,197,71,.1);border-color:var(--a);color:var(--a)}
#bn-blog.on{background:rgba(78,205,196,.1);border-color:#4ecdc4;color:#4ecdc4}
#bn-how.on{background:rgba(167,139,250,.1);border-color:#a78bfa;color:#a78bfa}
#bn-tools.on{background:rgba(255,107,53,.1);border-color:var(--a2);color:var(--a2)}
.btn1{background:linear-gradient(135deg,var(--a),var(--a2));color:#000;border:none;border-radius:10px;padding:10px 18px;font-size:13px;font-weight:900;cursor:pointer;font-family:inherit;transition:transform .15s}
.btn1:active{transform:scale(.97)}
.vl-overlay{position:fixed;inset:0;background:rgba(7,7,15,.93);backdrop-filter:blur(10px);z-index:900;display:none;align-items:center;justify-content:center;padding:16px}
.vl-overlay.open{display:flex}
.vl-box{background:var(--s);border:1px solid var(--b);border-radius:20px;max-width:370px;width:100%;padding:26px 20px;text-align:center;position:relative;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.vl-icon{font-size:46px;margin-bottom:11px;display:block}
.vl-title{font-size:19px;font-weight:900;margin-bottom:7px;line-height:1.3}
.vl-title span{background:linear-gradient(135deg,var(--a),var(--a2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.vl-desc{font-size:12px;color:var(--m);line-height:1.75;margin-bottom:16px}
.vl-counter{background:rgba(232,197,71,.08);border:1px solid rgba(232,197,71,.18);border-radius:9px;padding:9px;margin-bottom:14px;font-size:11px;color:var(--a);font-weight:700}
.vl-progress{display:flex;gap:5px;justify-content:center;margin-bottom:14px;flex-wrap:wrap}
.vl-dot{width:9px;height:9px;border-radius:50%;background:var(--b);transition:background .2s}
.vl-dot.used{background:var(--a2)}
.vl-dot.free{background:var(--a)}
.vl-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.vl-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:12px 8px;border-radius:12px;border:none;font-family:inherit;font-size:11px;font-weight:800;cursor:pointer;transition:all .18s;color:#fff;min-height:64px}
.vl-btn:active{transform:scale(.96)}
.vl-btn svg{width:22px;height:22px}
.vl-wa{background:#25d366}
.vl-fb{background:#1877f2}
.vl-ig{background:linear-gradient(135deg,#405de6,#833ab4,#c13584,#e1306c,#fd1d1d)}
.vl-tt{background:#010101;border:1px solid #333}
.vl-verify{display:none;background:rgba(37,211,102,.07);border:1px solid rgba(37,211,102,.25);border-radius:11px;padding:12px;margin-bottom:10px;font-size:12px;color:#4ecdc4;text-align:center}
.vl-verify.show{display:block}
.vl-success{background:rgba(37,211,102,.1);border:1px solid rgba(37,211,102,.28);border-radius:11px;padding:12px;color:#25d366;font-size:13px;font-weight:700;display:none;margin-bottom:10px}
.vl-close{position:absolute;top:11px;left:11px;background:none;border:none;color:var(--m);cursor:pointer;padding:6px;line-height:1;display:flex;align-items:center;justify-content:center;border-radius:8px}
.vl-close:hover{color:var(--a2);background:rgba(255,107,53,.1)}
.en-mode .atip{border-right:none;border-left:3px solid var(--a)}
.en-mode .ssec ul,.en-mode .acontent ul{padding-right:0;padding-left:13px}
.en-mode .vl-close{left:auto;right:11px}
.en-mode .dot-text-input{direction:ltr;font-family:'Inter',sans-serif}
.deco-mode-tabs{display:flex;gap:5px;margin-bottom:10px}
.deco-mode-btn{flex:1;padding:8px 6px;border-radius:9px;border:1px solid var(--b);background:var(--s);color:var(--m);font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;transition:all .15s;text-align:center}
.deco-mode-btn.on{background:linear-gradient(135deg,var(--a),var(--a2));color:#000;border-color:transparent}
/* ── LEGAL MODALS ── */
.lm-overlay{position:fixed;inset:0;background:rgba(7,7,15,.92);backdrop-filter:blur(12px);z-index:800;display:none;align-items:flex-end;justify-content:center;padding:0}
.lm-overlay.open{display:flex;animation:lmIn .25s ease}
@keyframes lmIn{from{opacity:0}to{opacity:1}}
.lm-sheet{background:var(--s);border:1px solid var(--b);border-top-left-radius:22px;border-top-right-radius:22px;width:100%;max-width:520px;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 -8px 40px rgba(0,0,0,.55);animation:sheetUp .28s cubic-bezier(.34,1.22,.64,1)}
@keyframes sheetUp{from{transform:translateY(60px);opacity:0}to{transform:translateY(0);opacity:1}}
.lm-handle{width:36px;height:4px;background:var(--b);border-radius:2px;margin:10px auto 0;flex-shrink:0}
.lm-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 12px;border-bottom:1px solid var(--b);flex-shrink:0}
.lm-icon{width:32px;height:32px;background:linear-gradient(135deg,rgba(232,197,71,.15),rgba(255,107,53,.1));border:1px solid rgba(232,197,71,.25);border-radius:9px;display:flex;align-items:center;justify-content:center}
.lm-title{font-size:14px;font-weight:900;flex:1;margin:0 10px}
.lm-close{background:none;border:1px solid var(--b);border-radius:8px;color:var(--m);font-size:15px;cursor:pointer;padding:5px 9px;line-height:1;transition:all .15s;font-family:inherit}
.lm-close:hover{border-color:var(--a2);color:var(--a2)}
.lm-body{overflow-y:auto;padding:16px 18px 28px;flex:1}
.lm-body::-webkit-scrollbar{width:3px}
.lm-body::-webkit-scrollbar-thumb{background:var(--b);border-radius:3px}
.lm-sec{margin-bottom:18px}
.lm-sec:last-child{margin-bottom:0}
.lm-sec h3{font-size:12px;font-weight:800;color:var(--a);margin-bottom:7px;display:flex;align-items:center;gap:6px}
.lm-sec p{font-size:11px;color:var(--m);line-height:1.75;margin-bottom:5px}
.lm-sec ul{padding-right:16px;margin:4px 0}
.lm-sec li{font-size:11px;color:var(--m);line-height:1.75;margin-bottom:3px}
.lm-chip{display:inline-flex;align-items:center;gap:5px;background:rgba(232,197,71,.08);border:1px solid rgba(232,197,71,.18);border-radius:20px;padding:3px 10px;font-size:10px;color:var(--a);font-weight:700;margin:3px 3px 0 0}
.lm-badge-ok{display:inline-flex;align-items:center;gap:5px;background:rgba(37,211,102,.08);border:1px solid rgba(37,211,102,.2);border-radius:8px;padding:7px 11px;font-size:10px;color:#25d366;font-weight:700;margin-top:8px;width:100%}
.lm-form{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.lm-field{display:flex;flex-direction:column;gap:4px}
.lm-label{font-size:11px;font-weight:700;color:var(--m)}
.lm-input,.lm-textarea{background:var(--bg);border:1px solid var(--b);border-radius:8px;padding:10px 12px;color:var(--t);font-family:inherit;font-size:12px;transition:border-color .15s;direction:rtl}
.lm-input:focus,.lm-textarea:focus{outline:none;border-color:var(--a)}
.lm-textarea{min-height:90px;resize:vertical}
.lm-submit{background:linear-gradient(135deg,var(--a),var(--a2));color:#000;font-family:inherit;font-size:13px;font-weight:900;border:none;border-radius:10px;padding:11px;cursor:pointer;transition:transform .15s;display:flex;align-items:center;justify-content:center;gap:7px}
.lm-submit:active{transform:scale(.97)}
.lm-submit:disabled{opacity:.55;cursor:not-allowed}
.lm-sent{background:rgba(37,211,102,.08);border:1px solid rgba(37,211,102,.2);border-radius:10px;padding:14px;text-align:center;font-size:13px;color:#25d366;font-weight:700;display:none}
.lm-sent.show{display:block}
.flinks{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.flink{color:var(--m);font-size:10px;cursor:pointer;transition:color .15s;padding:2px 0;position:relative}
.flink:hover{color:var(--a)}
.flink::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--a);transform:scaleX(0);transition:transform .2s}
.flink:hover::after{transform:scaleX(1)}
.en-mode .lm-sec ul{padding-right:0;padding-left:16px}
.en-mode .lm-input,.en-mode .lm-textarea{direction:ltr}
/* ── WELCOME NOTIFICATION BANNER ── */
/* ── UX SPEED & SMOOTHNESS: Full button transition system ── */
/* Base transitions on all interactive elements */
.dbtn,.dot-copy-btn,.dot-reset-btn,.back-btn,.tool-card,.btn1,.bni,.lb,.ttab,.gbtn,.dsz,.lm-close,.lm-submit,.fbtn,.rbtn,.share-btn,.deco-mode-btn,.lm-dismiss-btn,.dot-copy-btn,.aback,.sr-share-btn,.sr-close,.pib-install-btn,.pib-close,button,[onclick]{transition: all 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: pointer;}
/* Active press feedback — snappy and satisfying */
.dbtn{touch-action:manipulation}
.dbtn:active{transform:scale(.96);background:linear-gradient(135deg,#d4b03c,#e85e2a)}
.dot-copy-btn:active{transform:scale(.96)}
.back-btn:active{opacity:.65;transform:translateX(2px)}
.tool-card:active{transform:scale(.95)!important;border-color:var(--a)!important}
.btn1:active{transform:scale(.96)!important}
.bni:active{transform:scale(.94)}
.lb:active{transform:scale(.9)}
.lm-close:active{transform:scale(.88)}
.lm-submit:active{transform:scale(.97)}
.fbtn:active{transform:scale(.97)}
.rbtn:active{transform:scale(.97)}
.share-btn:active{transform:scale(.95)}
.ttab:active{transform:scale(.94)}
.gbtn:active{transform:scale(.94)}
.dsz:active{transform:scale(.92)}
.deco-mode-btn:active{transform:scale(.95)}
/* Hover improvements for non-touch devices */
@media (hover: hover){
.tool-card:hover{transform:translateY(-3px);box-shadow:0 10px 32px rgba(232,197,71,.15)}
.btn1:hover{box-shadow:0 6px 20px rgba(232,197,71,.25);transform:translateY(-1px)}
.lm-close:hover{background:rgba(255,107,53,.1);border-color:var(--a2);color:var(--a2)}
.bni:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.3)}
.dot-copy-btn:hover{box-shadow:0 4px 14px rgba(232,197,71,.25);transform:translateY(-1px)}
}
/* Smooth focus rings for accessibility */
button:focus-visible{outline:2px solid var(--a);outline-offset:2px}
/* ── PWA INSTALL BANNER ── */
/* ── SMOOTH MODAL UX ENHANCEMENTS ── */
.lm-overlay{transition:opacity .18s ease;}
.lm-overlay.open{opacity:1;}
.lm-sheet{transition:transform .25s cubic-bezier(.34,1.18,.64,1),opacity .2s ease;}
.lm-overlay:not(.open) .lm-sheet{transform:translateY(100%);opacity:0;}
.lm-close{transition:all .15s;min-width:34px;min-height:34px;display:flex;align-items:center;justify-content:center;}
.lm-close:hover{background:rgba(255,107,53,.15);border-color:var(--a2)!important;color:var(--a2)!important;}
.lm-close:active{transform:scale(.88);}
.lm-submit:active{transform:scale(.96);}
.lm-handle{cursor:grab;}
@keyframes lmSheetIn{from{transform:translateY(80px);opacity:0}to{transform:translateY(0);opacity:1}}
.lm-overlay.open .lm-sheet{animation:lmSheetIn .28s cubic-bezier(.34,1.22,.64,1) forwards;}
.lm-close,.lm-submit,.lm-dismiss{touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
/* ── UTILITY CLASSES (replaces inline style= attributes) ── */
.u-w100{width: 100%;}
.u-mb4{margin-bottom: 4px;}
.u-mt6{margin-top: 6px;}
.u-mt14{margin-top: 14px;}
.u-mb7{margin-bottom: 7px;}
.u-hidden{display: none !important;}
.u-clr-t{color: var(--t);}
.u-clr-a{color: var(--a);}
.u-clr-a2{color: var(--a2);}
.u-fs10-muted{font-size: 10px; margin-top: 8px; color: #555;}
.u-sent-note{font-size: 11px; font-weight: 400; opacity: .75;}
.u-spinner-center{margin: 0 auto 8px;}
.u-lm-icon-svg{margin: 0 auto 8px; display: block;}
.u-btn-fullw-mt6{width: 100%; margin-top: 6px;}
.u-btn-fullw-mb4{width: 100%; margin-bottom: 4px;}
.u-mt10{margin-top: 10px;}
.flt-rep-output{width: 100%; font-family: 'Cairo', sans-serif; font-size: 14px; color: var(--t); line-height: 1.9; direction: rtl; text-align: center; resize: vertical; white-space: pre;}
.en-mode .flt-rep-output{direction: ltr; font-family: 'Inter', sans-serif;}
/* ── TEXT REPEATER TOOL ─────────────────────────────────────── */
.rep-counts{display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 11px;}
.rep-custom-row{display: flex; align-items: center; gap: 8px;}
.rep-custom-row input[type=number]{flex: 1; min-width: 0; background: var(--s); border: 1px solid var(--b); border-radius: 8px; padding: 8px 10px; color: var(--t); font-family: inherit; font-size: 12px; transition: border-color .15s; -webkit-appearance: none; appearance: none; -moz-appearance: textfield;}
.rep-custom-row input[type=number]:focus{outline: none; border-color: var(--a); background: var(--s);}
.rep-custom-row input[type=number]::placeholder{color: var(--m); opacity: 1;}
.rep-custom-row input[type=number]::-webkit-outer-spin-button,
.rep-custom-row input[type=number]::-webkit-inner-spin-button{-webkit-appearance: none; margin: 0;}
.rep-dir-btn{display: inline-flex; align-items: center; justify-content: center; gap: 6px;}
/* ── SHARE REMINDER (top notification banner) ─────────────────── */
.share-reminder{position:fixed;top:-120px;left:50%;transform:translateX(-50%);width:calc(100% - 24px);max-width:440px;background:linear-gradient(135deg,rgba(15,15,26,.98),rgba(21,21,31,.98));border:1px solid rgba(232,197,71,.35);border-radius:14px;padding:11px 12px 11px 14px;z-index:800;display:flex;align-items:center;gap:10px;box-shadow:0 8px 28px rgba(0,0,0,.5),0 0 0 1px rgba(232,197,71,.1);transition:top .4s cubic-bezier(.34,1.22,.64,1);overflow:hidden}
.share-reminder.show{top:64px}
.sr-body{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.sr-emoji{font-size:18px;flex-shrink:0;line-height:1}
.sr-text{font-size:11.5px;font-weight:700;color:var(--t);line-height:1.4}
.sr-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.sr-share-btn{display:flex;align-items:center;gap:5px;background:linear-gradient(135deg,var(--a),var(--a2));color:#000;border:none;border-radius:20px;padding:7px 12px;font-size:11px;font-weight:900;cursor:pointer;font-family:inherit;white-space:nowrap}
.sr-close{background:none;border:none;color:var(--m);cursor:pointer;padding:4px;line-height:1;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sr-close:hover{color:var(--a2)}
.sr-progress{position:absolute;bottom:0;left:0;height:2px;background:linear-gradient(135deg,var(--a),var(--a2));width:100%;transform-origin:left;animation:srShrink 10s linear forwards}
.share-reminder.no-anim .sr-progress{animation:none}
@keyframes srShrink{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.en-mode .share-reminder{direction:ltr}
/* ── END SHARE REMINDER ───────────────────────────────────────── */
/* ── PWA INSTALL BANNER (bottom notification banner) ──────────── */
.pwa-install-banner{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(30px);width:calc(100% - 28px);max-width:440px;background:linear-gradient(135deg,rgba(15,15,26,.98),rgba(21,21,31,.98));border:1px solid rgba(232,197,71,.35);border-radius:16px;padding:12px 14px;z-index:500;display:flex;align-items:center;gap:11px;box-shadow:0 8px 32px rgba(0,0,0,.5),0 0 0 1px rgba(232,197,71,.1);opacity:0;transition:opacity .4s ease,transform .4s cubic-bezier(.34,1.22,.64,1);pointer-events:none;overflow:hidden}
.pwa-install-banner.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.pwa-install-banner.hide{opacity:0;transform:translateX(-50%) translateY(20px)}
.pib-icon{width:36px;height:36px;background:linear-gradient(135deg,var(--a),var(--a2));border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:4px;overflow:hidden}
.pib-icon img{width:100%;height:100%;object-fit:contain;border-radius:6px;display:block}
.pib-body{flex:1;min-width:0}
.pib-title{font-size:12px;font-weight:900;color:var(--t);margin-bottom:2px;line-height:1.3}
.pib-desc{font-size:10px;color:var(--m);line-height:1.45}
.pib-ios-steps{display:flex;align-items:flex-start;gap:5px;font-size:10px;color:var(--m);line-height:1.45}
.pib-ios-steps svg{flex-shrink:0;margin-top:1px;color:var(--a)}
.pib-install-btn{background:linear-gradient(135deg,var(--a),var(--a2));color:#000;border:none;border-radius:10px;padding:8px 14px;font-size:11px;font-weight:900;cursor:pointer;font-family:inherit;flex-shrink:0;white-space:nowrap}
.pib-close{background:none;border:none;color:var(--m);cursor:pointer;padding:4px;line-height:1;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.pib-close:hover{color:var(--a2)}
.pib-progress{position:absolute;bottom:0;left:0;height:2px;background:linear-gradient(135deg,var(--a),var(--a2));width:100%;transform-origin:left;animation:pibShrink 10s linear forwards}
.en-mode .pwa-install-banner{direction:ltr}
@keyframes pibShrink{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.pwa-install-banner.ios-mode .pib-install-btn{display:none}
/* ── END PWA INSTALL BANNER ───────────────────────────────────── */
/* ── SEO / GEO CONTENT BLOCK (bilingual, always visible — see the
   "at a glance / how it works / FAQ / about" section on the home page) ── */
.seo-sec{padding:0 0 18px}
.seo-block{background:var(--c);border:1px solid var(--b);border-radius:var(--r);padding:13px;margin-bottom:9px}
.seo-block p{font-size:11px;color:var(--m);line-height:1.75;margin-bottom:8px}
.seo-block p:last-child{margin-bottom:0}
.seo-en{direction:ltr;text-align:left;border-top:1px dashed var(--b);padding-top:8px;margin-top:8px}
.seo-en:first-child{border-top:none;padding-top:0;margin-top:0}
.seo-en-inline{unicode-bidi:isolate;direction:ltr;color:var(--m);font-weight:700;font-size:.82em}
.seo-glance{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;font-size:11px;margin-top:2px}
.seo-glance dt{color:var(--a);font-weight:700}
.seo-glance dd{color:var(--m)}
.seo-list{padding-right:15px;margin-top:2px}
.seo-list li{font-size:11px;color:var(--m);line-height:1.7;margin-bottom:4px}
.en-mode .seo-list{padding-right:0;padding-left:15px}
.seo-list.seo-en{padding-right:0;padding-left:15px}
/* ── LOCALIZED SEO DISPLAY ─────────────────────────────────────
   The .seo-en / .seo-en-inline nodes stay in the HTML source at all
   times (never removed, never display:none for everyone) so crawlers
   — Google, Bing, and AI/LLM answer engines that read raw HTML —
   always see the full bilingual content. They are only *visually*
   toggled by the same .en-mode class the rest of the UI already uses
   for language switching, exactly like the existing Arabic-only
   sections are implicitly "hidden" from an English reader by being
   in Arabic. This is standard language-toggle UI (same mechanism as
   an accordion/tab), not cloaking: every visitor — human or bot —
   receives identical markup, and any user can see the English text
   simply by tapping the EN switch already in the nav bar. ── */
.seo-en,.seo-en-inline{display:none}
.en-mode .seo-en{display:block}
.en-mode .seo-en-inline{display:inline}
.en-mode .seo-glance.seo-en{display:grid}
.en-mode .seo-list.seo-en{display:block}
.seo-how{margin-top:2px}
.seo-how .htext p.seo-en{border-top:none;padding-top:0;margin-top:2px;font-size:10px}
.faq-item{background:var(--c);border:1px solid var(--b);border-radius:var(--r);padding:0 13px;margin-bottom:7px}
.faq-item summary{padding:11px 0;font-size:12px;font-weight:700;color:var(--t);cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';color:var(--a);font-size:16px;font-weight:900;flex-shrink:0;transition:transform .2s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{font-size:11px;color:var(--m);line-height:1.7;padding-bottom:11px;margin-bottom:0}
.faq-item p.seo-en{padding-bottom:11px}
/* ── END SEO / GEO CONTENT BLOCK ──────────────────────────────── */
/* ── TOOL #6: CHATGPT COMMANDS DIRECTORY ──────────────────────── */
.cmd-search-wrap{position:relative;margin-bottom:10px}
.cmd-search-icon{position:absolute;top:50%;transform:translateY(-50%);inset-inline-start:12px;color:var(--m);pointer-events:none}
.cmd-search-input{width:100%;background:var(--c);border:1px solid var(--b);border-radius:11px;padding:11px 14px 11px 14px;padding-inline-start:36px;color:var(--t);font-family:inherit;font-size:13px;transition:border-color .15s}
.cmd-search-input:focus{outline:none;border-color:var(--a)}
.cmd-search-input::placeholder{color:var(--m)}
.cmd-cat-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;margin-bottom:8px;scrollbar-width:none}
.cmd-cat-tabs::-webkit-scrollbar{display:none}
.cmd-cat-tab{flex:0 0 auto;background:var(--s);border:1px solid var(--b);border-radius:20px;padding:7px 13px;font-size:11px;font-weight:700;color:var(--m);cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s}
.cmd-cat-tab.on{background:var(--a);color:#000;border-color:var(--a)}
.cmd-count{font-size:10px;color:var(--m);margin-bottom:7px;padding:0 2px}
.cmd-list{display:flex;flex-direction:column;gap:7px;max-height:520px;overflow-y:auto;padding-inline-end:2px}
.cmd-list::-webkit-scrollbar{width:3px}
.cmd-list::-webkit-scrollbar-thumb{background:var(--b);border-radius:3px}
.cmd-item{background:var(--c);border:1px solid var(--b);border-radius:12px;padding:11px 12px;transition:border-color .15s}
.cmd-item:hover{border-color:var(--a)}
.cmd-item-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px}
.cmd-slug{font-family:'Courier New',Courier,monospace;font-size:12px;font-weight:700;color:var(--a);direction:ltr;text-align:left;unicode-bidi:plaintext}
.cmd-cat-chip{font-size:8px;font-weight:700;color:var(--m);background:var(--s);border:1px solid var(--b);border-radius:20px;padding:2px 7px;flex-shrink:0;white-space:nowrap}
.cmd-desc{font-size:11px;color:var(--t);line-height:1.55;margin-bottom:8px}
.cmd-actions{display:flex;gap:6px}
.cmd-copy-btn,.cmd-preview-btn{flex:1;background:none;border:1px solid var(--b);border-radius:8px;padding:7px 8px;font-size:10.5px;font-weight:700;color:var(--m);cursor:pointer;font-family:inherit;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:4px}
.cmd-copy-btn{background:linear-gradient(135deg,rgba(232,197,71,.12),rgba(255,107,53,.1));border-color:rgba(232,197,71,.28);color:var(--a)}
.cmd-copy-btn:hover{border-color:var(--a)}
.cmd-preview-btn:hover{border-color:var(--a2);color:var(--a2)}
.cmd-copy-btn.copied{background:var(--a);color:#000;border-color:var(--a)}
.cmd-empty{text-align:center;padding:30px 10px;color:var(--m);font-size:12px;display:flex;flex-direction:column;align-items:center;gap:8px}
.cmd-empty svg{opacity:.4}
.cmd-preview-desc{font-size:11px;color:var(--m);line-height:1.6;margin-bottom:8px}
.cmd-preview-text{font-family:'Courier New',Courier,monospace;font-size:11px;line-height:1.7;color:var(--t);background:var(--bg);border:1px solid var(--b);border-radius:9px;padding:11px;direction:ltr;text-align:left;unicode-bidi:plaintext;white-space:pre-wrap;word-break:break-word;max-height:220px;overflow-y:auto;user-select:all}
.en-mode .cmd-slug,.en-mode .cmd-preview-text{text-align:left}
/* ── TOOL #7: CINEMATIC LIGHTING PROMPT GENERATOR ─────────────── */

/* ── preview drawer bits (ChatGPT Commands) ── */

.lang-tag{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(232,197,71,.12);border:1px solid rgba(232,197,71,.3);color:var(--a);font-size:9px;font-weight:900;letter-spacing:.5px;border-radius:20px;padding:2px 9px;font-family:'Courier New',Courier,monospace;direction:ltr}

.translate-btn{flex:1;background:none;border:1px solid var(--b);border-radius:10px;padding:11px;font-family:inherit;font-size:12px;font-weight:800;color:var(--m);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .15s}
.translate-btn:hover{border-color:var(--a);color:var(--a)}
.translate-btn:active{transform:scale(.96)}
/* ── PAWA DOWNLOAD TOAST ─────────────────────────────────────── */
.pawa-toast{position:fixed;top:calc(66px + env(safe-area-inset-top,0px));left:50%;transform:translate(-50%,-14px);width:calc(100% - 28px);max-width:440px;display:flex;align-items:center;gap:10px;padding:10px 12px;background:linear-gradient(135deg,rgba(15,15,26,.98),rgba(21,21,31,.98));border:1px solid rgba(255,107,53,.4);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.5),0 0 18px rgba(255,107,53,.12);z-index:600;direction:rtl;font-family:'Cairo',sans-serif;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s ease,transform .45s cubic-bezier(.22,1,.36,1),visibility 0s linear .45s}
.pawa-toast.show{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition:opacity .45s ease,transform .45s cubic-bezier(.22,1,.36,1),visibility 0s}
.pawa-logo{width:36px;height:36px;flex-shrink:0;border-radius:10px;background:linear-gradient(135deg,var(--a2),#ff8a5c);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;font-size:18px;font-weight:900;overflow:hidden}
.pawa-logo img{width:100%;height:100%;object-fit:cover;display:block}
.pawa-text{flex:1;min-width:0;margin:0;font-size:12px;font-weight:700;line-height:1.5;color:var(--t)}
.pawa-btn{flex-shrink:0;background:var(--a2);color:#fff;border-radius:20px;padding:7px 14px;font-size:12px;font-weight:800;text-decoration:none;white-space:nowrap;cursor:pointer;transition:filter .15s}
.pawa-btn:hover{filter:brightness(1.12)}
.pawa-close{flex-shrink:0;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:rgba(255,255,255,.06);color:var(--m);font-family:inherit;font-size:18px;line-height:1;cursor:pointer;transition:color .15s,background .15s}
.pawa-close:hover{color:var(--a2);background:rgba(255,107,53,.12)}
@media (prefers-reduced-motion:reduce){
.pawa-toast,.pawa-toast.show{transition:opacity .2s ease,visibility 0s}
}
/* ══ v13 additions: credits chip, result bar, share modal (3 platforms), install banner ══ */
.gs-credit-chip{display:flex;align-items:center;gap:4px;background:var(--s);border:1px solid rgba(232,197,71,.35);color:var(--a);border-radius:18px;padding:6px 10px;font-size:12px;font-weight:900;cursor:pointer;font-family:inherit;line-height:1}
.gs-credit-chip:active{transform:scale(.95)}
.gs-credit-chip.empty{color:var(--a2);border-color:rgba(255,107,53,.45)}
.gs-credit-chip.bump{animation:gsBump .5s ease}
@keyframes gsBump{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}
.nav-r{gap:6px}
.vl-grid3{grid-template-columns:repeat(3,1fr)}
.vl-grid3 .vl-btn{min-height:70px;font-size:10.5px;padding:10px 4px;text-align:center;line-height:1.3}
.vl-grid3 .vl-btn svg{width:22px;height:22px}
.vl-note{font-size:10.5px;color:var(--m);line-height:1.7;margin-top:4px}
.vl-verify{align-items:center;justify-content:center;gap:8px}
.vl-verify.show{display:flex}
.vl-overlay.open{display:flex}
.gs-result{position:fixed;left:50%;bottom:calc(76px + env(safe-area-inset-bottom,0px));transform:translate(-50%,24px);width:calc(100% - 28px);max-width:440px;background:linear-gradient(135deg,rgba(15,15,26,.98),rgba(21,21,31,.98));border:1px solid rgba(232,197,71,.35);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.55);padding:12px 14px 12px;z-index:150;direction:rtl;font-family:'Cairo',sans-serif;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,transform .3s cubic-bezier(.22,1,.36,1),visibility 0s linear .3s}
.gs-result.show{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition:opacity .3s ease,transform .3s cubic-bezier(.22,1,.36,1),visibility 0s}
.en-mode .gs-result{direction:ltr}
.gs-result-msg{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:800;color:var(--t);margin-bottom:10px;padding-inline-end:22px}
.gs-result-msg svg{color:#25d366;flex-shrink:0}
.gs-result-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gs-btn{display:flex;align-items:center;justify-content:center;gap:6px;border-radius:11px;padding:10px 8px;font-family:inherit;font-size:12px;font-weight:800;cursor:pointer;border:1px solid var(--b);transition:transform .15s,filter .15s}
.gs-btn:active{transform:scale(.97)}
.gs-btn-retry{background:var(--c);color:var(--t)}
.gs-btn-new{background:linear-gradient(135deg,var(--a),var(--a2));color:#000;border-color:transparent}
.gs-result-x{position:absolute;top:6px;inset-inline-end:8px;width:22px;height:22px;border:none;border-radius:50%;background:none;color:var(--m);font-size:18px;line-height:1;cursor:pointer}
.gs-result-x:hover{color:var(--a2)}
#gsInstallBanner .pawa-logo{background:none;padding:0;overflow:hidden}
#gsInstallBanner .pawa-logo img{width:100%;height:100%;object-fit:cover;display:block;border-radius:10px}
button.pawa-btn{border:none;cursor:pointer;font-family:inherit}
.en-mode .pawa-toast{direction:ltr}
.gs-busy{opacity:.6;pointer-events:none}
@media (prefers-reduced-motion:reduce){
.gs-result,.gs-result.show{transition:opacity .2s ease,visibility 0s}
.gs-credit-chip.bump{animation:none}
}
.dot-preview:not(textarea){font-family:"DejaVu Sans Mono","Noto Sans Symbols 2","Segoe UI Symbol","Apple Braille","Courier New",monospace;
  font-size:8px;line-height:1.15;letter-spacing:0;white-space:pre;word-break:normal;overflow-wrap:normal;
  font-variant-ligatures:none;direction:ltr;text-align:left;unicode-bidi:plaintext;}

@keyframes lbIn{from{opacity:0}to{opacity:1}}

/* ═══ v15: native share button in the credits modal ═══ */
.vl-native-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:0 0 10px;padding:13px 10px;border:none;border-radius:12px;background:linear-gradient(135deg,var(--a),var(--a2));color:#000;font-family:inherit;font-size:13px;font-weight:900;cursor:pointer;transition:transform .15s,filter .15s}
.vl-native-btn:hover{filter:brightness(1.06)}
.vl-native-btn:active{transform:scale(.97)}
.vl-native-btn[hidden]{display:none}
/* ═══ v15: long-form blog articles ═══ */
.atitle-long{font-size:19px;line-height:1.6;font-weight:900;direction:rtl;text-align:right}
.acontent-long{direction:rtl;text-align:right}
.acontent-long h2{font-size:16px;font-weight:900;color:var(--a);margin:24px 0 8px;padding-top:14px;border-top:1px solid var(--b);line-height:1.5}
.acontent-long h2:first-child{border-top:none;padding-top:0;margin-top:8px}
.acontent-long h3{font-size:13.5px;font-weight:800;color:var(--t);margin:16px 0 5px;line-height:1.5}
.acontent-long p{font-size:13.5px;color:#c9c9d6;line-height:2;margin-bottom:11px}
.acontent-long ul,.acontent-long ol{padding:0 20px 0 0;margin:0 0 12px}
.acontent-long li{font-size:13.5px;color:#c9c9d6;line-height:1.95;margin-bottom:6px}
.acontent-long li strong,.acontent-long p strong{color:var(--t)}
.acontent-long .atip{font-size:13px;line-height:1.9;border-left:none;border-right:3px solid var(--a);margin:14px 0;padding:11px 12px;direction:rtl;unicode-bidi:plaintext}
.acontent-long .atip[lang],.acontent-long .atip{overflow-wrap:anywhere}
.btn-ghost-art{display:block;width:100%;margin-top:8px;padding:12px;border-radius:12px;border:1px solid var(--b);background:none;color:var(--m);font-family:inherit;font-size:12.5px;font-weight:800;cursor:pointer;transition:all .15s}
.btn-ghost-art:hover{border-color:var(--a);color:var(--a)}
.bcard .bmeta{margin-top:8px}
/* Preview card */
/* Primary button: disabled + loading states, spinner re-coloured for the gold gradient */
/* Inline error */
/* Result card */

/* ── AI TOOLS: BIO AI + AI Post Creator ── */
.nt-box{background:var(--c);border:1px solid var(--b);border-radius:var(--r);padding:11px;margin-bottom:11px}
.nt-row{display:flex;align-items:center;gap:6px}
.nt-field{width:100%;min-width:0;background:var(--s);border:1px solid var(--b);border-radius:9px;padding:10px;color:var(--t);font-family:inherit;font-size:14px;resize:vertical}
.nt-field:focus{outline:none;border-color:var(--a)}
.nt-chips{display:flex;flex-wrap:wrap;gap:6px}
.nt-chip,.nt-sm{background:var(--s);border:1px solid var(--b);border-radius:20px;padding:7px 13px;font-size:11px;font-weight:700;color:var(--m);cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s}
.nt-sm{padding:6px 11px;color:var(--t)}
.nt-chip.on{background:var(--a);color:#000;border-color:var(--a)}
.nt-sm:hover{border-color:var(--a);color:var(--a)}
.nt-note{font-size:10px;color:var(--m);line-height:1.6;margin-top:7px}
.nt-go{width:100%;margin:4px 0 8px}
.nt-go:disabled{opacity:.6;cursor:wait}
.nt-err{display:none;background:rgba(255,77,79,.1);border:1px solid rgba(255,77,79,.4);color:#ff6b6d;border-radius:10px;padding:9px 11px;font-size:12px;margin-bottom:10px}
.nt-out{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.nt-card{background:var(--c);border:1px solid var(--b);border-radius:var(--r);padding:12px}
.nt-bio{font-size:14px;line-height:1.7;white-space:pre-wrap;word-break:break-word;margin-bottom:8px}
.nt-foot{justify-content:space-between}
.nt-cnt{font-size:10px;color:var(--m)}
.nt-cnt.over{color:#ff4d4f;font-weight:700}
.nt-num{background:linear-gradient(135deg,var(--a),var(--a2));color:#000;border-radius:50%;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;flex-shrink:0}
.nt-ttl{font-size:13px}
.nt-desc{font-size:11px;color:var(--m);line-height:1.6;margin:7px 0}
.nt-prompt{direction:ltr;text-align:left;font-family:'Courier New',monospace;font-size:11px;line-height:1.55;background:var(--s);border:1px solid var(--b);border-radius:8px;padding:8px;margin-bottom:8px;word-break:break-word}
/* ── AI Post Creator + BIO AI additions ── */
.nt-sugs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:9px}
.nt-sug-l{font-size:10px;color:var(--m)}
.nt-sug{background:transparent;border:1px dashed var(--b);border-radius:20px;padding:4px 10px;font-size:11px;color:var(--m);cursor:pointer;font-family:inherit}
.nt-sug:hover{border-color:var(--a);color:var(--a)}
.nt-secure{text-align:center;margin:0 0 10px}
.nt-go{display:flex;align-items:center;justify-content:center;gap:8px}
.nt-go .spinner{border-color:rgba(0,0,0,.25);border-top-color:#000}
.pc-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pc-drop{border:2px dashed var(--b);border-radius:12px;padding:24px 14px;text-align:center;cursor:pointer;color:var(--m);transition:all .15s;display:flex;flex-direction:column;align-items:center;gap:6px}
.pc-drop:hover,.pc-drop.drag,.pc-drop:focus-visible{border-color:var(--a);color:var(--a);outline:none;background:rgba(232,197,71,.05)}
.pc-drop-t{font-size:13px;font-weight:700;color:var(--t)}
.pc-drop-s{font-size:10px}
.pc-prev{display:flex;gap:12px;align-items:center}
.pc-prev img{width:96px;height:96px;object-fit:cover;border-radius:10px;border:1px solid var(--b);flex-shrink:0;background:#000}
.pc-meta{display:flex;flex-direction:column;gap:7px;min-width:0}
.pc-name{font-size:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr;text-align:start}
.pc-dim{font-size:11px;color:var(--m);direction:ltr}
.pc-badge{font-size:10px;font-weight:800;color:#000;background:var(--a);border-radius:20px;padding:2px 9px;direction:ltr}
.pc-steps{display:flex;flex-direction:column;gap:9px}
.pc-step{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--m)}
.pc-step.active,.pc-step.done{color:var(--t)}
.pc-step.err{color:#ff6b6d}
.pc-ico{width:22px;height:22px;border-radius:50%;border:1px solid var(--b);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0}
.pc-step.done .pc-ico{background:var(--a);color:#000;border-color:var(--a)}
.pc-step.err .pc-ico{border-color:#ff4d4f;color:#ff4d4f}
.pc-step.active .pc-ico{border:2px solid var(--b);border-top-color:var(--a2);animation:spin .7s linear infinite}
.pc-rep summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:800;gap:8px}
.pc-sw{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.pc-swatch{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-family:'Courier New',monospace;direction:ltr;background:var(--s);border:1px solid var(--b);border-radius:20px;padding:3px 9px 3px 4px}
.pc-swatch i{width:16px;height:16px;border-radius:50%;border:1px solid rgba(128,128,128,.5);display:inline-block}
.pc-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.pc-tag{font-size:10px;font-weight:700;color:var(--a);border:1px solid var(--b);border-radius:20px;padding:2px 8px}
.pc-kv{font-size:11px;line-height:1.7;color:var(--m);margin-top:3px}
.pc-kv b{color:var(--t)}
.pc-fact{font-size:12px;line-height:1.7;margin:8px 0 2px}
.pc-more{margin-top:12px}
.pc-hist{display:flex;align-items:center;justify-content:center;gap:8px;font-size:10px;color:var(--m);margin-top:10px;flex-wrap:wrap}
/* (light-mode panel override removed — the glass theme is dark by design, see theme-glass.css) */
/* v3.6: one language at a time — Arabic SEO/FAQ text hides in English mode (crawlers read both) */
.en-mode .seo-ar{display:none}
/* v3.6: English long-form articles */
.en-mode .atitle-long{direction:ltr;text-align:left}
.acontent-long[dir="ltr"]{direction:ltr;text-align:left}
.acontent-long[dir="ltr"] ul,.acontent-long[dir="ltr"] ol{padding:0 0 0 20px}
.acontent-long[dir="ltr"] .atip{border-right:none;border-left:3px solid var(--a);direction:ltr}
.acontent-long[dir="ltr"] p,.acontent-long[dir="ltr"] li{line-height:1.85}
/* v3.8 — Content Capsules: the direct 20–25 word answer right under each question heading,
   the experience box (.aexp), the sources (.asrc) and links inside articles. */
.acontent-long .capsule{font-size:14px;font-weight:700;color:var(--t);line-height:1.95;background:rgba(var(--arg,232,197,71),.06);border:1px solid rgba(var(--arg,232,197,71),.22);border-radius:12px;padding:10px 13px;margin:2px 0 12px}
.acontent-long .aexp{background:rgba(52,211,153,.06);border-right-color:#34d399}
.acontent-long[dir="ltr"] .aexp{border-left-color:#34d399}
.acontent-long .aexp strong{color:#6ee7b7}
.acontent-long a{color:var(--a);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;overflow-wrap:anywhere}
.acontent-long a:hover{text-decoration-thickness:2px}
.acontent-long a:focus-visible{outline:2px solid var(--a);outline-offset:2px;border-radius:3px}
.acontent-long .asrc{margin:22px 0 6px;padding:12px 14px;border:1px solid var(--b);border-radius:12px;background:rgba(255,255,255,.02)}
.acontent-long .asrc>strong{display:block;font-size:13px;margin-bottom:6px;color:var(--t)}
.acontent-long .asrc ul{margin:0}
.acontent-long .asrc li{font-size:12px;line-height:1.8;margin-bottom:4px}
.acontent-long .asrc a{direction:ltr;unicode-bidi:isolate}
.bmeta-upd{opacity:.85}
/* v3.8 — related guides under each tool + the guide's capsule answer */
.tguides{margin:16px 0 4px}
.tg-h{font-size:13px;font-weight:900;margin:0 0 8px;color:var(--t)}
.tg-list{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.tg-a{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--b);border-radius:12px;background:rgba(255,255,255,.03);color:var(--t);font-size:12.5px;font-weight:700;line-height:1.6;text-decoration:none}
.tg-a::before{content:"";flex-shrink:0;width:7px;height:7px;border-radius:50%;background:var(--a)}
.tg-a:hover,.tg-a:focus-visible{border-color:var(--a);outline:none}
.ssec p.capsule{color:var(--t);font-weight:700;font-size:12px;line-height:1.8}
.guide-faq .capsule{color:var(--t);font-weight:700}
/* v3.8 (performance): a list drawn by script keeps the content below it out of view until it arrives,
   so nothing visible jumps when the cards appear (CLS) */
#cmd-list:empty:not(.gs-drawn){min-height:110vh}
/* v3.8 (performance): cards far below the screen skip layout and paint until scrolled near */
.cmd-item{content-visibility:auto;contain-intrinsic-size:auto 168px}

/* v3.8: buttons that are links (crawlable CTAs on the generated pages) look like the app's buttons */
a.btn1,a.btn-ghost-art,a.thero-cta{text-decoration:none}
.guide-faq .gd-cta{display:flex;justify-content:center;margin-top:14px}
a.btn1.acta{display:flex;justify-content:center;align-items:center}
.seo-more{font-size:12px;color:var(--m);line-height:1.8;margin:8px 0 4px}
/* v3.8: the AI tools and the temp inbox are drawn by script — keep their usual height free meanwhile */
#bioai-root:empty{min-height:540px}
#postai-root:empty{min-height:460px}
#tempmail-root:empty{min-height:520px}
@media (min-width:768px){#tempmail-root:empty{min-height:300px}#bioai-root:empty{min-height:500px}#postai-root:empty{min-height:450px}}