@import url('https://fonts.googleapis.com/css2?family=VT323&family=Vazirmatn:wght@400;700&display=swap');
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{--bg:#0a0a0a;--p:#0f0f0f;--b1:#1e1e1e;--b2:#2a2a2a;--g:#39ff14;--c:#00e5ff;--r:#ff3333;--y:#ffd700;--d:#555;--tx:#ccc;--m:'VT323',monospace;--f:'Vazirmatn',sans-serif}
html,body{background:var(--bg);color:var(--tx);font-family:var(--f);font-size:15px;overflow-x:hidden}
.box{background:var(--p);border:1px solid var(--b2);margin-bottom:8px}
.bh{font-family:var(--m);font-size:15px;color:var(--c);padding:5px 10px;border-bottom:1px solid var(--b1);background:#0c0c0c;letter-spacing:2px;display:flex;align-items:center;justify-content:space-between}
.bh em{font-style:normal;font-size:11px;color:var(--d)}
.bb{padding:8px}
header{padding:10px 10px 0;border-bottom:1px solid var(--b2)}
header h1{font-family:var(--m);font-size:22px;color:var(--g);letter-spacing:3px}
#hdr-sub{font-family:var(--m);font-size:12px;color:var(--g);padding-bottom:7px;letter-spacing:1px;direction:ltr;text-align:right}
#hdr-sub span{display:inline-block}
.tabs{display:flex;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--b2);background:#0c0c0c}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;padding:8px 11px;font-family:var(--f);font-size:12px;color:var(--d);background:none;border:none;border-left:1px solid var(--b1);cursor:pointer;white-space:nowrap}
.tab:first-child{border-left:none}
.tab.on{color:var(--g);background:#0a120a;border-bottom:2px solid var(--g);margin-bottom:-1px}
.sec{display:none;padding:8px}
.sec.on{display:block}
textarea,input.ti,select.ti{width:100%;background:#0c0c0c;border:1px solid var(--b2);color:var(--tx);padding:7px 9px;font-family:var(--m);font-size:14px;resize:none;outline:none}
textarea:focus,input.ti:focus,select.ti:focus{border-color:var(--c)}
textarea{min-height:90px;line-height:1.5}
.ta-sm{min-height:65px}.ta-lg{min-height:120px}
.kr{display:flex;gap:4px;align-items:stretch}
.kr input,.kr select{flex:1;min-width:0}
.btn{padding:6px 10px;border:1px solid var(--b2);background:var(--p);color:var(--d);cursor:pointer;font-family:var(--f);font-size:12px;white-space:nowrap;-webkit-user-select:none;user-select:none}
.btn:active{filter:brightness(1.6)}
.g{border-color:var(--g);color:var(--g)}.c{border-color:var(--c);color:var(--c)}
.r{border-color:var(--r);color:var(--r)}.y{border-color:var(--y);color:var(--y)}
.ar{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.ar .btn{font-size:12px}
.st{font-family:var(--m);font-size:11px;padding:4px 8px;margin-top:5px;display:none;border-right:2px solid;letter-spacing:1px}
.st.ok{border-color:var(--g);color:var(--g);display:block}
.st.er{border-color:var(--r);color:var(--r);display:block}
.inf{font-family:var(--m);font-size:10px;color:var(--d);margin-top:3px}
lbl{display:block;font-family:var(--m);font-size:10px;color:var(--d);letter-spacing:1px;margin-bottom:3px}
.prog{height:3px;background:var(--b1);margin-top:5px;display:none}
.prog.on{display:block}
.pf{height:100%;background:var(--g);transition:width .3s;width:0}
.drop{border:1px dashed var(--b2);padding:18px 10px;text-align:center;cursor:pointer;font-family:var(--f);font-size:13px;color:var(--d)}
.drop.drag,.drop:hover{border-color:var(--c);color:var(--c)}
.sg{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.si{padding:7px 5px;border:1px solid var(--b1);background:#0c0c0c;cursor:pointer;font-family:var(--f);font-size:11px;color:var(--d);text-align:center}
.si.on{border-color:var(--g);color:var(--g);background:#0a120a}
.cs{display:flex;gap:4px;margin-top:6px}
.cv{flex:1;border:1px solid var(--b1);padding:5px;text-align:center}
.cv .v{font-family:var(--m);font-size:16px;color:var(--g)}
.cv .l{font-size:10px;color:var(--d)}
audio,video{width:100%;margin-top:6px;display:none}
img.prev{max-width:100%;max-height:140px;margin-top:6px;display:none;border:1px solid var(--b2)}
.avis{display:none;gap:2px;height:28px;align-items:flex-end;padding:3px;background:#0c0c0c;border:1px solid var(--b1);margin-top:5px}
.avis.on{display:flex}
.ab{width:4px;min-height:2px;background:var(--g)}
/* SLIDER */
input[type=range]{width:100%;accent-color:var(--g);height:20px;cursor:pointer}
.slider-row{display:flex;align-items:center;gap:8px;margin-top:6px}
.slider-row span{font-family:var(--m);font-size:13px;color:var(--g);min-width:36px;text-align:center}
/* FORMAT BUTTONS */
.fmt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.fi{padding:6px 4px;border:1px solid var(--b1);background:#0c0c0c;cursor:pointer;font-size:11px;color:var(--d);text-align:center;font-family:var(--f)}
.fi.on{border-color:var(--g);color:var(--g);background:#0a120a}
#toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%) translateY(60px);background:var(--p);border:1px solid var(--g);color:var(--g);padding:6px 18px;font-family:var(--m);font-size:12px;z-index:9999;transition:transform .25s;pointer-events:none;letter-spacing:1px;max-width:92vw;text-align:center;word-break:break-all}
#toast.on{transform:translateX(-50%) translateY(0)}
.hint{font-family:var(--f);font-size:11px;color:var(--d);padding:6px 8px;border-right:2px solid var(--b2);margin-bottom:8px}
::-webkit-scrollbar{width:3px;height:3px}
::-webkit-scrollbar-thumb{background:var(--b2)}
.preview-wrap{margin-top:8px}
.preview-wrap audio,.preview-wrap video{display:block}
.preview-wrap img{max-width:100%;max-height:180px;border:1px solid var(--b2)}

/* ===== PWA INSTALL POPUP ===== */
#pwa-popup{position:fixed;inset:0;z-index:99998;display:flex;align-items:flex-end;justify-content:center;padding:16px;pointer-events:none;opacity:0}
#pwa-popup.show{pointer-events:all;animation:pwa-fade-in .4s ease forwards}
#pwa-popup.hide{animation:pwa-fade-out .35s ease forwards}
@keyframes pwa-fade-in{from{opacity:0}to{opacity:1}}
@keyframes pwa-fade-out{from{opacity:1}to{opacity:0}}
#pwa-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px)}
#pwa-card{position:relative;width:100%;max-width:420px;background:#0f0f0f;border:1px solid #2a2a2a;border-radius:4px;overflow:hidden;transform:translateY(60px);animation:pwa-slide-up .45s cubic-bezier(.16,1,.3,1) .1s forwards}
@keyframes pwa-slide-up{to{transform:translateY(0)}}
#pwa-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#39ff14,#00e5ff,#39ff14);background-size:200%;animation:pwa-shimmer 2s linear infinite}
@keyframes pwa-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
#pwa-top{display:flex;align-items:center;gap:12px;padding:16px 16px 10px}
#pwa-icon{width:48px;height:48px;background:#0a120a;border:1px solid #39ff14;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;animation:pwa-pulse 2s ease infinite}
@keyframes pwa-pulse{0%,100%{box-shadow:0 0 0 0 rgba(57,255,20,.3)}50%{box-shadow:0 0 0 6px rgba(57,255,20,0)}}
#pwa-texts{flex:1}
#pwa-title{font-family:'VT323',monospace;font-size:18px;color:#39ff14;letter-spacing:2px;line-height:1.2}
#pwa-sub{font-family:'Vazirmatn',sans-serif;font-size:11px;color:#555;margin-top:2px}
#pwa-close{background:none;border:none;color:#444;font-size:18px;cursor:pointer;padding:4px;line-height:1;flex-shrink:0;transition:color .2s}
#pwa-close:hover{color:#ff3333}
#pwa-body{padding:0 16px 14px;font-family:'Vazirmatn',sans-serif;font-size:13px;color:#aaa;line-height:1.7;direction:rtl;text-align:right}
#pwa-body strong{color:#ccc}
#pwa-steps{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
#pwa-steps li{display:flex;align-items:center;gap:8px;font-size:12px;color:#777}
#pwa-steps li::before{content:'';width:5px;height:5px;border-radius:50%;background:#39ff14;flex-shrink:0}
#pwa-steps li span{color:#aaa}
#pwa-footer{padding:12px 16px;border-top:1px solid #1e1e1e;display:flex;gap:8px}
#pwa-btn{flex:1;padding:9px;background:#0a120a;border:1px solid #39ff14;color:#39ff14;font-family:'Vazirmatn',sans-serif;font-size:13px;cursor:pointer;border-radius:2px;transition:all .2s;letter-spacing:.5px}
#pwa-btn:hover{background:#39ff14;color:#000}
#pwa-skip{padding:9px 14px;background:none;border:1px solid #2a2a2a;color:#444;font-family:'Vazirmatn',sans-serif;font-size:12px;cursor:pointer;border-radius:2px;transition:all .2s}
#pwa-skip:hover{border-color:#555;color:#666}
#pwa-counter{position:absolute;top:10px;left:12px;font-family:'VT323',monospace;font-size:11px;color:#2a2a2a;letter-spacing:1px}