/* ==========================================================
   DEV RED THEME — lightweight (no blur, no infinite animations)
   Loads after style.css and overrides it.
   ========================================================== */
:root{
  --bg:#0a0305; --bg2:#12060a; --card:#160709; --card2:#1d0a0e;
  --red:#ff1f3d; --red2:#ff4d2e; --deep:#9c0f24; --line:rgba(255,45,70,.28);
  --text:#fff1f3; --muted:#b58a92; --ok:#2dff8f; --warn:#ffb020;
  --font:'Segoe UI',Roboto,'Helvetica Neue',Arial,system-ui,sans-serif;
  --glow:0 0 16px rgba(255,31,61,.55);
}
*{-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body,body.store-body,body.auth-page,body.admin-auth-page,body.login{
  background:radial-gradient(900px 500px at 50% -10%,rgba(255,31,61,.22),transparent 70%),var(--bg)!important;
  color:var(--text);font-family:var(--font);
}
/* kill everything heavy inherited from old CSS */
body:before,body:after,.store-body:before{display:none!important}
*{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.fx-ambient,.fx-monster,.fx-orb,.auth-bg:before,.auth-bg:after{display:none!important;animation:none!important}
a,button{touch-action:manipulation}
::selection{background:var(--red);color:#fff}
::-webkit-scrollbar{width:7px;height:7px}::-webkit-scrollbar-thumb{background:var(--deep);border-radius:6px}

/* ===================== LOGIN / REGISTER / ADMIN ===================== */
.dv-auth{min-height:100vh;display:block}
.dv-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:22px 14px}
.dv-card{
  width:100%;max-width:420px;text-align:center;padding:30px 24px 22px;border-radius:26px;
  background:linear-gradient(160deg,var(--card2),var(--card) 55%);
  border:1px solid var(--line);
  box-shadow:0 0 0 1px rgba(255,31,61,.08),0 18px 50px rgba(0,0,0,.7),0 0 60px rgba(255,31,61,.18);
}
.dv-logo{
  width:78px;height:78px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 30% 25%,#ff5a6e,var(--red) 45%,var(--deep));
  box-shadow:0 0 0 4px rgba(255,31,61,.18),0 0 28px rgba(255,31,61,.7);
}
.dv-logo span{font-size:38px;font-weight:900;color:#fff;font-family:Impact,'Arial Black',sans-serif;text-shadow:0 2px 10px rgba(0,0,0,.45)}
.dv-name{margin:0;font-size:27px;line-height:1.1;font-weight:900;letter-spacing:2px;color:#fff;text-shadow:0 0 18px rgba(255,31,61,.75)}
.dv-name b{color:var(--red)}
.dv-tag{margin:8px 0 12px;color:var(--muted);font-size:13px;letter-spacing:1px}
.dv-badge{display:inline-block;padding:6px 14px;border-radius:999px;font-size:12px;font-weight:700;color:#ffd7dc;background:rgba(255,31,61,.12);border:1px solid var(--line)}
.dv-tabs{display:flex;gap:6px;margin:20px 0 16px;padding:5px;border-radius:14px;background:#0d0407;border:1px solid var(--line)}
.dv-tab{flex:1;padding:10px 0;border-radius:10px;font-weight:800;font-size:14px;text-decoration:none;color:var(--muted);transition:background .15s,color .15s,transform .1s}
.dv-tab.on{background:linear-gradient(135deg,var(--red),var(--deep));color:#fff;box-shadow:var(--glow)}
.dv-tab:active{transform:scale(.95)}
.dv-form{text-align:left}
.dv-label{display:block;margin:12px 2px 6px;font-size:13px;font-weight:700;color:#ffc9d0}
.dv-form input{
  width:100%;padding:13px 14px;font-size:16px;color:var(--text)!important;background:#0d0407!important;
  border:1px solid var(--line)!important;border-radius:12px!important;outline:0;transition:border-color .15s,box-shadow .15s;
}
.dv-form input::placeholder{color:#7a5159}
.dv-form input:focus{border-color:var(--red)!important;box-shadow:0 0 0 3px rgba(255,31,61,.22)}
.dv-pass{position:relative}
.dv-pass input{padding-right:70px}
.dv-eye{position:absolute;right:6px;top:6px;bottom:6px;width:56px;border:0!important;border-radius:9px!important;background:rgba(255,31,61,.16)!important;color:#ffb3bd!important;font-size:11px;font-weight:800;letter-spacing:1px;cursor:pointer;box-shadow:none!important}
.dv-caps{display:none;margin-top:6px;font-size:12px;font-weight:700;color:var(--warn)}
.dv-row{display:flex;justify-content:space-between;margin:12px 2px 4px;font-size:13px}
.dv-row a,.dv-alt a{color:#ff6b7f;text-decoration:none;font-weight:700}
.dv-row a:hover,.dv-alt a:hover{text-decoration:underline}
.dv-go{
  width:100%;margin-top:14px;padding:15px;border:0!important;border-radius:14px!important;cursor:pointer;
  font-size:16px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;color:#fff!important;
  background:linear-gradient(135deg,var(--red),var(--red2) 60%,var(--deep))!important;
  box-shadow:0 8px 22px rgba(255,31,61,.45)!important;
}
.dv-alt{margin:16px 0 4px;font-size:13px;color:var(--muted)}
.dv-ssl{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:11.5px;color:#8f6a72}
.referral-badge{margin:8px 0;padding:8px;border-radius:10px;border:1px solid var(--red);color:#ff8091;font-size:12px;font-weight:700;text-align:center}

/* ===================== PRESS EFFECT (cheap: transform + opacity only) ===================== */
.press,button,.deposit-cta,.auth-btn,.update-group-btn,.dashboard-action,.submit-ticket,.duration-buy,.panel-update-btn,
.small-action,.mini-action,.deposit-help,.icon-btn,.panel-expand-btn,.duration-toggle,.purchase-key-toggle,.round-action,.stat-link,
nav a,.dashboard-stat,.store-product,.panel-group-card,.duration-option,.balance-card,.dv-tab,.telegram-fab{
  transition:transform .12s ease,box-shadow .18s ease,background-color .18s,border-color .18s,filter .18s;
}
button:active,.deposit-cta:active,.auth-btn:active,.update-group-btn:active,.dashboard-action:active,.submit-ticket:active,
.duration-buy:active,.panel-update-btn:active,.icon-btn:active,.deposit-help:active,.round-action:active,.telegram-fab:active,
nav a:active,.dashboard-stat:active,.store-product:active,.panel-group-card:active,.duration-option:active,.balance-card:active,.dv-go:active{
  transform:scale(.94)!important;filter:brightness(1.25);box-shadow:0 0 22px rgba(255,31,61,.85)!important;
}
.fx-ripple{position:absolute;border-radius:50%;pointer-events:none;transform:scale(0);background:rgba(255,255,255,.35);animation:rip .5s ease-out forwards}
@keyframes rip{to{transform:scale(1);opacity:0}}

/* ===================== STORE / DASHBOARD ===================== */
.store-top{background:#0c0407!important;border-bottom:1px solid var(--line)!important;box-shadow:0 4px 18px rgba(0,0,0,.6)}
.store-brand{font-weight:900;letter-spacing:2px;color:#fff;text-shadow:0 0 14px rgba(255,31,61,.7)}
.store-brand small{color:var(--muted);letter-spacing:1px}
.brand-dot{border-color:var(--red)!important;box-shadow:0 0 10px var(--red)!important}
.page-title{color:#fff;font-weight:900;letter-spacing:1.5px;text-shadow:0 0 16px rgba(255,31,61,.6)}
.page-sub{color:var(--muted)}
.section-title,h2{color:var(--red)!important;letter-spacing:2px;font-weight:800;text-shadow:none}

.store-card,.balance-card,.dashboard-stat,.store-product,.panel-group-card,.panel,.product,.card,.tablewrap,
.purchased-key-card,.qr-card,.support-box,.refer-box,.update-group-card,.list-row{
  background:linear-gradient(160deg,var(--card2),var(--card))!important;
  border:1px solid var(--line)!important;border-radius:18px!important;
  box-shadow:0 8px 24px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04)!important;
}
.dashboard-stat:hover,.store-product:hover,.panel-group-card:hover,.card:hover,.balance-card:hover{border-color:var(--red)!important;box-shadow:0 8px 26px rgba(0,0,0,.6),0 0 22px rgba(255,31,61,.35)!important}
.balance-card small,.stat-label{color:var(--muted);letter-spacing:2px;font-weight:700}
.balance-card strong,.stat-number{color:#fff;font-weight:900;text-shadow:0 0 14px rgba(255,31,61,.65)}
.today-card strong{color:var(--ok);text-shadow:0 0 14px rgba(45,255,143,.55)}
.deposit-dot{color:var(--ok)}
.stat-breakdown span{background:rgba(255,31,61,.14);border:1px solid var(--line);border-radius:8px;padding:2px 8px;color:#ffc9d0}
.stat-link{color:#ff6b7f!important}
.user-pill,.badge,.status{color:#fff!important;background:linear-gradient(135deg,var(--red),var(--deep))!important;border:0!important;border-radius:999px!important;font-weight:800;letter-spacing:1.5px;box-shadow:var(--glow)}

button:not(.icon-btn):not(.drawer-close):not(.menu-open):not(.dv-eye),.deposit-cta,.auth-btn,.update-group-btn,.dashboard-action,.submit-ticket,.duration-buy,.panel-update-btn{
  background:linear-gradient(135deg,var(--red),var(--deep))!important;color:#fff!important;border:0!important;border-radius:13px!important;
  font-weight:800;letter-spacing:1px;text-align:center;text-decoration:none;cursor:pointer;
  box-shadow:0 6px 18px rgba(255,31,61,.4)!important;
}
.danger,button.danger{background:linear-gradient(135deg,#7a0010,#c1001f)!important}
.icon-btn,.round-action,.drawer-close{background:rgba(255,31,61,.12)!important;border:1px solid var(--line)!important;color:#ff8091!important;border-radius:12px!important;box-shadow:none!important}
.deposit-help{background:var(--red)!important;border-radius:9px!important;box-shadow:var(--glow)!important}
.telegram-fab{box-shadow:0 6px 20px rgba(255,31,61,.6)!important}

input,select,textarea{background:#0d0407!important;color:var(--text)!important;border:1px solid var(--line)!important;border-radius:12px!important;outline:0}
input:focus,select:focus,textarea:focus{border-color:var(--red)!important;box-shadow:0 0 0 3px rgba(255,31,61,.2)!important}
label{color:#ffc9d0}

.user-drawer,.app>aside{background:#0c0407!important;border-right:1px solid var(--line)!important;box-shadow:10px 0 40px rgba(0,0,0,.7)!important}
.drawer-backdrop{background:rgba(0,0,0,.7)!important}
.drawer-brand,.brand{color:#fff!important;font-weight:900;letter-spacing:2px;text-shadow:0 0 14px rgba(255,31,61,.7)}
nav a{color:#d9b3ba!important;border-radius:12px!important}
nav a .ico{color:var(--red)!important}
nav a:hover,nav a.on{color:#fff!important;background:linear-gradient(90deg,rgba(255,31,61,.35),rgba(255,31,61,.05))!important;box-shadow:inset 3px 0 0 var(--red)!important}
.drawer-section{color:var(--red);letter-spacing:3px}
.logout-link{color:#ff7a8a!important}

th{background:rgba(255,31,61,.14)!important;color:#ff8091!important;letter-spacing:1px;border-bottom:1px solid var(--line)!important}
td{color:#f0d3d8!important;border-bottom:1px solid rgba(255,45,70,.12)!important}
tbody tr:hover{background:rgba(255,31,61,.07)}
.alert{background:rgba(45,255,143,.08)!important;border:1px solid rgba(45,255,143,.5)!important;color:#b8ffd9!important;border-radius:12px!important}
.alert.bad,.bad{background:rgba(255,31,61,.12)!important;border-color:var(--red)!important;color:#ffc2cb!important}
.store-product em,.product em,.price{color:var(--ok)!important}
.panel-arrow{color:var(--red)}
.duration-option:hover{border-color:var(--red)!important}
.purchased-key-value,.code-box,.referral-code,.referral-link-preview{font-family:'Courier New',monospace;color:var(--ok)!important;background:rgba(45,255,143,.07)!important;border:1px dashed rgba(45,255,143,.55)!important;border-radius:10px}
.real-qr{border-radius:16px;box-shadow:0 0 30px rgba(255,31,61,.6),0 0 0 6px #fff}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}

@media(max-width:480px){.dv-card{padding:26px 18px 18px;border-radius:22px}.dv-name{font-size:23px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ==========================================================
   DEV FUTUREFALL UI — 2026 premium frontend layer
   Frontend-only: does not alter PHP/API/database behaviour.
   ========================================================== */
:root{
  --dev-accent:#ff1744;
  --dev-accent-rgb:255,23,68;
  --dev-bg:#05070c;
  --dev-panel:rgba(10,14,24,.86);
  --dev-line:rgba(var(--dev-accent-rgb),.24);
}
html{background:var(--dev-bg)}
body{
  --accent:var(--dev-accent);
  --accent-rgb:var(--dev-accent-rgb);
}
body.auth-page,body.admin-auth-page{
  overflow-x:hidden;
  background:
    radial-gradient(900px 600px at 50% -15%,rgba(var(--dev-accent-rgb),.20),transparent 62%),
    radial-gradient(700px 500px at 5% 100%,rgba(var(--dev-accent-rgb),.11),transparent 65%),
    #05070c!important;
}
body.auth-page:before,body.admin-auth-page:before{
  content:"";position:fixed;inset:-30%;z-index:0;pointer-events:none;opacity:.7;
  background:
    repeating-linear-gradient(104deg,transparent 0 18px,rgba(var(--dev-accent-rgb),.10) 19px 20px,transparent 21px 54px);
  transform:skewX(-12deg);
  animation:devFall 13s linear infinite;
}
body.auth-page:after,body.admin-auth-page:after{
  content:"";position:fixed;inset:-50%;z-index:0;pointer-events:none;
  background:
    repeating-linear-gradient(180deg,transparent 0 7px,rgba(255,255,255,.035) 8px 9px,transparent 10px 28px);
  mask-image:linear-gradient(to bottom,transparent,black 22%,black 75%,transparent);
  animation:devRain 8s linear infinite;
}
@keyframes devFall{from{transform:translate3d(0,-3%,0) skewX(-12deg)}to{transform:translate3d(7%,8%,0) skewX(-12deg)}}
@keyframes devRain{from{transform:translateY(-5%)}to{transform:translateY(8%)}}

.dv-wrap{position:relative;z-index:2;min-height:100vh;display:grid;place-items:center;padding:34px 18px}
.dv-card{
  width:min(480px,100%);position:relative;overflow:hidden;
  border:1px solid rgba(var(--dev-accent-rgb),.28)!important;
  background:linear-gradient(145deg,rgba(13,18,31,.94),rgba(5,8,15,.90))!important;
  box-shadow:0 30px 90px rgba(0,0,0,.60),0 0 55px rgba(var(--dev-accent-rgb),.13)!important;
  border-radius:28px!important;padding:30px!important;
}
.dv-card:before{
  content:"";position:absolute;left:-20%;right:-20%;top:-35%;height:75%;
  background:linear-gradient(180deg,rgba(var(--dev-accent-rgb),.20),transparent);
  filter:blur(28px);pointer-events:none;
}
.dv-logo{position:relative!important;width:64px!important;height:64px!important;border-radius:20px!important;
  display:grid!important;place-items:center!important;margin:0 auto 14px!important;
  background:linear-gradient(135deg,var(--dev-accent),rgba(var(--dev-accent-rgb),.20))!important;
  box-shadow:0 0 35px rgba(var(--dev-accent-rgb),.42)!important;border:1px solid rgba(255,255,255,.16)!important;
}
.dv-name,.dv-tag,.dv-badge,.dv-tabs,.dv-form,.dev-theme-picker{position:relative;z-index:2}
.dv-name{letter-spacing:2px!important;font-size:27px!important}
.dv-name b{color:var(--dev-accent)!important}
.dv-tag{opacity:.72}
.dv-badge{border-color:rgba(var(--dev-accent-rgb),.30)!important;background:rgba(var(--dev-accent-rgb),.06)!important}
.dv-tabs{background:rgba(255,255,255,.035)!important;border:1px solid rgba(255,255,255,.07)!important;border-radius:14px!important;padding:4px!important}
.dv-tab{border-radius:10px!important}
.dv-tab.on{background:var(--dev-accent)!important;color:#fff!important;box-shadow:0 8px 24px rgba(var(--dev-accent-rgb),.25)!important}
.dv-form input{
  background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.09)!important;
  border-radius:13px!important;min-height:48px!important;transition:.2s;
}
.dv-form input:focus{border-color:rgba(var(--dev-accent-rgb),.72)!important;box-shadow:0 0 0 4px rgba(var(--dev-accent-rgb),.09)!important}
.dv-go,.auth-btn,.submit-ticket,.dashboard-action,.duration-buy,.panel-update-btn{
  background:linear-gradient(135deg,var(--dev-accent),rgba(var(--dev-accent-rgb),.72))!important;
  border-color:rgba(255,255,255,.12)!important;box-shadow:0 10px 28px rgba(var(--dev-accent-rgb),.22)!important;
  border-radius:13px!important;
}
.dev-theme-picker{
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  margin:14px auto 12px;padding:9px 11px;border:1px solid rgba(255,255,255,.08);
  border-radius:14px;background:rgba(255,255,255,.025);
}
.dev-theme-picker>span{font-size:9px;font-weight:900;letter-spacing:2px;opacity:.55;margin-right:3px}
.theme-swatch,.theme-custom{
  width:24px;height:24px;border-radius:50%;border:2px solid rgba(255,255,255,.22);
  padding:0;cursor:pointer;display:inline-grid;place-items:center;transition:.2s;
}
.theme-swatch:hover,.theme-custom:hover{transform:scale(1.14);border-color:#fff}
.theme-swatch[data-theme="#ff1744"]{background:#ff1744}.theme-swatch[data-theme="#1683ff"]{background:#1683ff}
.theme-swatch[data-theme="#8b5cf6"]{background:#8b5cf6}.theme-swatch[data-theme="#00d68f"]{background:#00d68f}
.theme-swatch[data-theme="#ff9d00"]{background:#ff9d00}
.theme-custom{background:linear-gradient(135deg,#fff,#777);font-size:16px;color:#111;overflow:hidden}
.theme-custom input{position:absolute;opacity:0;width:1px;height:1px}

body.store-body{
  background:
    radial-gradient(900px 500px at 50% -10%,rgba(var(--dev-accent-rgb),.14),transparent 65%),
    #05070c!important;
}
.store-app{min-height:100vh;position:relative}
.store-app:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.28;
  background:repeating-linear-gradient(112deg,transparent 0 36px,rgba(var(--dev-accent-rgb),.07) 37px 38px,transparent 39px 76px);
  animation:devFall 18s linear infinite;
}
.store-top{position:relative!important;z-index:5!important;background:rgba(5,7,12,.82)!important;border-bottom:1px solid rgba(var(--dev-accent-rgb),.18)!important;backdrop-filter:blur(14px)!important}
.store-brand span:not(.brand-dot){color:#fff!important}
.store-brand small{color:rgba(var(--dev-accent-rgb),.82)!important}
.brand-dot{background:var(--dev-accent)!important;box-shadow:0 0 16px rgba(var(--dev-accent-rgb),.75)!important}
.user-drawer{
  position:fixed!important;z-index:20!important;left:18px!important;right:18px!important;bottom:18px!important;top:auto!important;
  width:auto!important;height:auto!important;max-height:82px!important;
  padding:9px!important;border:1px solid rgba(var(--dev-accent-rgb),.20)!important;
  border-radius:22px!important;background:rgba(7,10,17,.88)!important;
  box-shadow:0 18px 60px rgba(0,0,0,.55),0 0 40px rgba(var(--dev-accent-rgb),.08)!important;
  backdrop-filter:blur(18px)!important;
  transform:none!important;
}
.user-drawer .drawer-brand,.user-drawer .drawer-close,.user-drawer .drawer-section{display:none!important}
.user-drawer nav{display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;overflow-x:auto!important;white-space:nowrap!important}
.user-drawer nav a{
  flex:0 0 auto!important;margin:0!important;padding:10px 13px!important;border-radius:14px!important;
  color:#aeb7c8!important;font-size:11px!important;font-weight:800!important;border:1px solid transparent!important;
}
.user-drawer nav a.on,.user-drawer nav a:hover{
  color:#fff!important;background:rgba(var(--dev-accent-rgb),.13)!important;
  border-color:rgba(var(--dev-accent-rgb),.25)!important;box-shadow:0 0 20px rgba(var(--dev-accent-rgb),.09)!important;
}
.user-drawer nav a svg{width:15px!important;height:15px!important;margin-right:5px}
.store-app>main{position:relative;z-index:1;padding-bottom:125px!important}
.store-top .icon-btn,.store-top .deposit-help{
  border-color:rgba(var(--dev-accent-rgb),.20)!important;background:rgba(var(--dev-accent-rgb),.06)!important;
}
.store-top .deposit-help{color:var(--dev-accent)!important}

/* Admin: turn the old side rail into the same compact bottom navigation. */
body:has(.app > aside) .app{display:block!important}
.app>aside{
  position:fixed!important;z-index:30!important;left:18px!important;right:18px!important;bottom:18px!important;top:auto!important;
  width:auto!important;height:auto!important;max-height:78px!important;padding:9px!important;
  border:1px solid rgba(var(--dev-accent-rgb),.20)!important;border-radius:22px!important;
  background:rgba(7,10,17,.91)!important;box-shadow:0 18px 60px rgba(0,0,0,.55)!important;
  backdrop-filter:blur(18px)!important;overflow:hidden!important;
}
.app>aside .brand{display:none!important}
.app>aside nav{display:flex!important;gap:5px!important;overflow-x:auto!important;white-space:nowrap!important}
.app>aside nav a{display:flex!important;align-items:center!important;gap:6px!important;flex:0 0 auto!important;margin:0!important;padding:10px 13px!important;border-radius:13px!important;font-size:11px!important}
.app>aside nav a.on,.app>aside nav a:hover{background:rgba(var(--dev-accent-rgb),.13)!important;color:#fff!important;border:1px solid rgba(var(--dev-accent-rgb),.24)!important}
.app>main{margin-left:0!important;width:100%!important;padding:24px 22px 125px!important}
.app>main .card,.app>main .panel,.app>main .stat-card{
  border-color:rgba(var(--dev-accent-rgb),.13)!important;
}
@media(max-width:700px){
  .dv-card{padding:24px 18px!important;border-radius:24px!important}
  .dv-name{font-size:23px!important}
  .store-top{padding:12px!important}
  .top-actions .deposit-help{display:none!important}
  .user-drawer{left:9px!important;right:9px!important;bottom:9px!important}
  .app>aside{left:9px!important;right:9px!important;bottom:9px!important}
  .app>main{padding-left:14px!important;padding-right:14px!important}
}
@media(prefers-reduced-motion:reduce){
  body.auth-page:before,body.auth-page:after,body.admin-auth-page:before,body.admin-auth-page:after,.store-app:before{animation:none!important}
}

.app{position:relative;overflow-x:hidden}
.app:before{
  content:"";position:fixed;inset:-20%;pointer-events:none;z-index:0;opacity:.22;
  background:repeating-linear-gradient(112deg,transparent 0 34px,rgba(var(--dev-accent-rgb),.08) 35px 36px,transparent 37px 78px);
  animation:devFall 19s linear infinite;
}
.app>main,.app>aside{z-index:2}
@media(prefers-reduced-motion:reduce){.app:before{animation:none!important}}