/* ═══════════════════════════════════════════════════
   ENC EXECUTOR — Telegram Mini App
   Cyberpunk / Hacker / Terminal Theme
   Based on wa-theme-reference
═══════════════════════════════════════════════════ */

:root{
  --bg:#050505;--s1:#0a0a0a;--s2:#101010;--s3:#181818;
  --br:#1e1e1e;--br2:#2a2a2a;
  --t1:#ffffff;--t2:#999;--t3:#555;--t4:#333;
  --g:#00e5ff;--g2:#00b8d4;--gg:rgba(0,229,255,.06);--gb:rgba(0,229,255,.2);
  --ok:#00ff88;--okg:rgba(0,255,136,.06);--okb:rgba(0,255,136,.2);
  --r:#ff0040;--rg:rgba(255,0,64,.06);--rb:rgba(255,0,64,.2);
  --y:#ffe600;--yg:rgba(255,230,0,.06);--yb:rgba(255,230,0,.2);
  --f:'IBM Plex Mono',monospace;
  --fh:'Orbitron',sans-serif;
  --fc:'Chakra Petch',sans-serif;
  --nh:58px;--sab:env(safe-area-inset-bottom,0px);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow-x:hidden;background:var(--bg)}
body{color:var(--t1);font-family:var(--f);font-size:11px;-webkit-font-smoothing:antialiased;line-height:1.7}
::selection{background:var(--g);color:#000}
::-webkit-scrollbar{width:2px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--br2)}

/* ═══ CRT Overlay ═══ */
.crt{position:fixed;inset:0;pointer-events:none;z-index:9999}
.crt::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0px,rgba(0,0,0,.12) 1px,transparent 1px,transparent 3px);opacity:.35;animation:scanMove 8s linear infinite}
.crt::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.45) 100%)}
@keyframes scanMove{from{transform:translateY(0)}to{transform:translateY(3px)}}

/* ═══ Animations ═══ */
@keyframes fadeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes panelIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes statIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
@keyframes numPop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@keyframes tIn{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
@keyframes tOut{to{opacity:0;transform:translateX(8px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes uploadPulse{0%,100%{border-color:var(--gb)}50%{border-color:var(--g)}}

/* ═══ App Shell ═══ */
.app{display:flex;flex-direction:column;height:100dvh;overflow:hidden}

/* ═══ Header ═══ */
.header{height:46px;min-height:46px;background:var(--s1);border-bottom:1px solid var(--br);display:flex;align-items:center;padding:0 14px;gap:8px;z-index:100}
.header-logo{font-family:var(--fh);font-size:11px;font-weight:700;color:var(--g);letter-spacing:3px;text-shadow:0 0 15px rgba(0,229,255,.25)}
.header-sub{font-size:7px;color:var(--t3);letter-spacing:2px;margin-left:4px}
.header-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.header-credits{font-family:var(--fc);font-size:10px;color:var(--ok);font-weight:600;letter-spacing:1px}
.header-badge{font-size:7px;padding:2px 6px;border:1px solid;letter-spacing:1px;text-transform:uppercase;font-weight:600}
.badge-admin{color:var(--r);border-color:var(--rb);background:var(--rg)}
.badge-paid{color:var(--ok);border-color:var(--okb);background:var(--okg)}
.badge-free{color:var(--t2);border-color:var(--br)}

/* ═══ Main Content ═══ */
.main{flex:1;overflow-y:auto;padding:12px;padding-bottom:calc(var(--nh) + var(--sab) + 12px)}

/* ═══ Bottom Nav ═══ */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:calc(var(--nh) + var(--sab));padding-bottom:var(--sab);background:var(--s1);border-top:1px solid var(--br);z-index:100}
.bn-row{display:flex;height:var(--nh);width:100%}
.bn-i{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:none;background:none;color:var(--t3);cursor:pointer;font-family:var(--f);font-size:7px;letter-spacing:.5px;text-transform:uppercase;padding:0;min-width:0;transition:color .1s}
.bn-i.on{color:var(--g)}
.bn-i em{font-style:normal;font-size:16px;display:block}
.bn-i.on em{text-shadow:0 0 8px rgba(0,229,255,.4)}

/* ═══ Page (hidden by default) ═══ */
.page{display:none;animation:fadeIn .25s ease}
.page.active{display:block}

/* ═══ Stat Cards ═══ */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:14px}
.stat{background:var(--s1);border:1px solid var(--br);padding:12px 12px 10px;position:relative;overflow:hidden;transition:border-color .2s}
.stat:hover{border-color:var(--gb);background:var(--s2)}
.stat::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--g);opacity:.15;transition:opacity .2s}
.stat:hover::before{opacity:.6;box-shadow:0 0 8px rgba(0,229,255,.3)}
.stat::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--g),var(--g2),transparent);opacity:.4}
.stat:nth-child(1){animation:statIn .4s ease both}.stat:nth-child(2){animation:statIn .4s .08s ease both}
.stat:nth-child(3){animation:statIn .4s .16s ease both}.stat:nth-child(4){animation:statIn .4s .24s ease both}
.stat-v{font-family:var(--fc);font-size:22px;font-weight:700;color:var(--t1);line-height:1;letter-spacing:2px;animation:numPop .5s cubic-bezier(.2,.8,.3,1) both}
.stat:hover .stat-v{color:var(--g);text-shadow:0 0 15px rgba(0,229,255,.25)}
.stat-l{font-size:7px;color:var(--t2);letter-spacing:2px;text-transform:uppercase;margin-top:4px}
.stat-tag{font-size:6px;color:var(--g);letter-spacing:2px;position:absolute;top:6px;right:8px;opacity:.2}

/* ═══ Terminal Panel ═══ */
.tp{border:1px solid var(--br);background:var(--s1);margin-bottom:10px;overflow:hidden;animation:panelIn .4s ease both}
.tp-h{display:flex;align-items:center;padding:7px 12px;border-bottom:1px solid var(--br);background:rgba(0,0,0,.3);gap:6px}
.tp-dots{display:flex;gap:4px}.tp-dot{width:7px;height:7px;border-radius:50%}.tp-dot.r{background:var(--r)}.tp-dot.y{background:var(--y)}.tp-dot.g{background:var(--ok)}
.tp-title{font-size:8px;color:var(--g);letter-spacing:1.5px;margin-left:4px;opacity:.7}
.tp-bd{padding:12px}

/* ═══ Form Elements ═══ */
.row{display:flex;gap:6px;margin-bottom:8px;align-items:flex-end;flex-wrap:wrap}
.col{flex:1;min-width:80px}
label.f{font-size:7px;color:var(--t3);letter-spacing:2px;margin-bottom:3px;display:block;text-transform:uppercase}
.inp{width:100%;background:var(--s2);border:1px solid var(--br);color:var(--t1);font-family:var(--f);font-size:11px;padding:8px 10px;outline:none;transition:border-color .15s;caret-color:var(--g)}
.inp:focus{border-color:var(--g);box-shadow:0 0 12px rgba(0,229,255,.08)}
.inp::placeholder{color:var(--t4)}
textarea.inp{min-height:50px;resize:vertical}
select.inp{appearance:none;cursor:pointer}

/* ═══ Buttons ═══ */
.btn{font-family:var(--f);font-size:9px;padding:7px 14px;border:1px solid;cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:all .1s;letter-spacing:.5px;background:none;white-space:nowrap}
.b-g{border-color:var(--gb);color:var(--g)}.b-g:hover:not(:disabled){background:var(--gg);text-shadow:0 0 6px rgba(0,229,255,.3)}
.b-r{border-color:var(--rb);color:var(--r)}.b-r:hover:not(:disabled){background:var(--rg)}
.b-ok{border-color:var(--okb);color:var(--ok)}.b-ok:hover:not(:disabled){background:var(--okg)}
.b-y{border-color:var(--yb);color:var(--y)}
.btn:disabled{opacity:.2;cursor:not-allowed}
.btn-full{width:100%;justify-content:center;padding:10px 14px;font-size:10px}
.bsm{font-size:8px;padding:3px 8px;border:1px solid var(--br);background:none;color:var(--t2);cursor:pointer;font-family:var(--f);transition:all .1s}
.bsm:hover{color:var(--g);border-color:var(--gb)}
.bsm.on,.log-tab.on{color:var(--g);border-color:var(--gb);background:var(--gg)}

/* ═══ Tags ═══ */
.tag{display:inline-flex;font-size:7px;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:2px 7px;border:1px solid}
.tg{color:var(--ok);border-color:var(--okb);background:var(--okg)}
.tr{color:var(--r);border-color:var(--rb);background:var(--rg)}
.tc{color:var(--g);border-color:var(--gb);background:var(--gg)}
.ty{color:var(--y);border-color:var(--yb);background:var(--yg)}
.tx{color:var(--t2);border-color:var(--br)}
.ta{color:var(--g);border-color:var(--gb);background:var(--gg);animation:blink 1s infinite}

/* ═══ Table ═══ */
.tbl-w{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:10px}
th{text-align:left;padding:7px 10px;color:var(--t3);font-size:7px;letter-spacing:2px;text-transform:uppercase;border-bottom:1px solid var(--br)}
td{padding:7px 10px;border-bottom:1px solid var(--br)}
tr:hover td{background:rgba(0,229,255,.01)}

/* ═══ Progress Bar ═══ */
.prog{height:2px;background:var(--br);margin:4px 0}
.prog-f{height:100%;background:var(--g);box-shadow:0 0 6px rgba(0,229,255,.3);transition:width .3s}

/* ═══ Drop Zone ═══ */
.drop{border:1px dashed var(--br2);padding:24px 14px;text-align:center;cursor:pointer;position:relative;background:var(--s2);transition:all .15s}
.drop:hover,.drop.ov{border-color:var(--g);background:var(--gg)}
.drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop-icon{font-size:28px;color:var(--g);margin-bottom:8px;opacity:.6}
.drop-text{font-size:9px;color:var(--t3);letter-spacing:1px}
.drop-hint{font-size:7px;color:var(--t4);margin-top:4px;letter-spacing:1px}
.drop.active{border-color:var(--g);animation:uploadPulse 1.5s infinite;background:var(--gg)}
.drop.active .drop-text{color:var(--g)}

/* ═══ Toast ═══ */
#toast{position:fixed;top:52px;right:10px;z-index:10000;display:flex;flex-direction:column;gap:4px;pointer-events:none}
.toast{background:var(--s1);border:1px solid var(--br);padding:8px 12px;font-size:10px;display:flex;align-items:center;gap:6px;animation:tIn .12s ease;max-width:260px;pointer-events:auto}
.toast.ok{border-color:var(--okb)}.toast.er{border-color:var(--rb)}.toast.in{border-color:var(--gb)}.toast.wr{border-color:var(--yb)}

/* ═══ Blinking Cursor ═══ */
.cursor::after{content:'\2588';animation:blink .7s step-end infinite;color:var(--g)}

/* ═══ Log Box ═══ */
.logbox{background:#020202;border:1px solid var(--br);font-size:10px;max-height:280px;overflow-y:auto;padding:10px}
.lg{padding:2px 0;border-bottom:1px solid rgba(255,255,255,.02);display:flex;gap:6px}
.lg-t{color:var(--t4);flex-shrink:0;font-size:8px;min-width:52px}
.lg-l{flex-shrink:0;min-width:52px;font-weight:600;font-size:8px}
.lg-m{color:var(--t2);word-break:break-all}

/* ═══ Empty State ═══ */
.empty{text-align:center;padding:30px 20px;color:var(--t3)}
.empty-icon{font-size:32px;opacity:.2;margin-bottom:8px}
.empty-text{font-size:9px;letter-spacing:1px}

/* ═══ Loading Spinner ═══ */
.spinner{width:18px;height:18px;border:2px solid var(--br);border-top-color:var(--g);border-radius:50%;animation:spin .6s linear infinite;display:inline-block}
.loading-full{display:flex;align-items:center;justify-content:center;padding:40px;gap:8px;color:var(--t3);font-size:9px;letter-spacing:1px}

/* ═══ Toggle Switch ═══ */
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--br)}
.toggle-label{font-size:9px;color:var(--t2);letter-spacing:.5px}
.toggle-label small{display:block;font-size:7px;color:var(--t4);margin-top:2px;letter-spacing:1px}
.toggle{width:34px;height:18px;background:var(--s3);border:1px solid var(--br);border-radius:9px;cursor:pointer;position:relative;transition:all .15s;flex-shrink:0}
.toggle::after{content:'';width:12px;height:12px;background:var(--t3);border-radius:50%;position:absolute;top:2px;left:2px;transition:all .15s}
.toggle.on{background:var(--gg);border-color:var(--gb)}
.toggle.on::after{background:var(--g);left:18px;box-shadow:0 0 6px rgba(0,229,255,.4)}

/* ═══ Job Card ═══ */
.job-card{background:var(--s1);border:1px solid var(--br);padding:10px 12px;margin-bottom:6px;transition:border-color .1s}
.job-card:hover{border-color:var(--br2)}
.job-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.job-name{font-size:10px;font-weight:600;color:var(--t1);letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.job-id{font-size:7px;color:var(--g);letter-spacing:1px;opacity:.5}
.job-meta{font-size:8px;color:var(--t3);display:flex;gap:8px;flex-wrap:wrap}

/* ═══ Section Label ═══ */
.section-label{font-size:7px;color:var(--t3);letter-spacing:2px;text-transform:uppercase;margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid var(--br)}

/* ═══ Profile Card ═══ */
.profile-card{background:var(--s1);border:1px solid var(--br);padding:16px;text-align:center;margin-bottom:12px}
.profile-avatar{width:48px;height:48px;border-radius:50%;border:2px solid var(--gb);display:flex;align-items:center;justify-content:center;margin:0 auto 10px;font-family:var(--fh);font-size:18px;color:var(--g);background:var(--gg)}
.profile-name{font-family:var(--fh);font-size:13px;font-weight:700;color:var(--t1);letter-spacing:2px}
.profile-username{font-size:8px;color:var(--t3);letter-spacing:1px;margin-top:2px}
.profile-stats{display:flex;justify-content:center;gap:16px;margin-top:12px}
.profile-stat{text-align:center}
.profile-stat-v{font-family:var(--fc);font-size:16px;font-weight:700;color:var(--g)}
.profile-stat-l{font-size:7px;color:var(--t3);letter-spacing:1px;text-transform:uppercase;margin-top:2px}

/* ═══ Maintenance Banner ═══ */
.maint-banner{background:var(--rg);border:1px solid var(--rb);padding:10px 12px;margin-bottom:12px;display:flex;align-items:center;gap:8px;font-size:9px;color:var(--r);letter-spacing:.5px}

/* ═══ Responsive ═══ */
@media(max-width:360px){
  .stats{gap:5px}
  .stat-v{font-size:18px}
  .tp-bd{padding:10px}
  .header-logo{font-size:9px;letter-spacing:2px}
}