/* ===========================
   Base & Variables
=========================== */
:root{
  --bg:#060816; 
  --panel:rgba(255,255,255,.075); 
  --stroke:rgba(255,255,255,.16);
  --text:#f4f8ff; 
  --muted:#9aa8c7; 
  --blue:#38bdf8; 
  --indigo:#6366f1; 
  --purple:#a855f7; 
  --pink:#ec4899;
  --green:#22c55e; 
  --red:#ef4444; 
  --gold:#f59e0b;
}

/* ===========================
   Reset & Base Styles
=========================== */
*{box-sizing:border-box;}
body{margin:0;min-height:100vh;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Arial;background:
radial-gradient(circle at 12% 4%,rgba(56,189,248,.35),transparent 30%),
radial-gradient(circle at 82% 0%,rgba(168,85,247,.32),transparent 34%),
radial-gradient(circle at 50% 100%,rgba(236,72,153,.18),transparent 30%),
linear-gradient(135deg,#050711 0%,#0b1026 55%,#04050b 100%);overflow-x:hidden;}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.44;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:42px 42px;mask-image:radial-gradient(circle at center,black,transparent 80%);}
a{text-decoration:none;color:inherit;}

/* ===========================
   Wrap & Layout
=========================== */
.wrap{max-width:1240px;margin:auto;padding:24px;position:relative;z-index:1;}

/* ===========================
   Navbar
=========================== */
.nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  margin-bottom:28px;
  padding:14px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.055);
  border-radius:28px;
  backdrop-filter:blur(20px);
  box-shadow:0 24px 80px rgba(0,0,0,.25);
  overflow:visible !important;
}

.brand{display:flex;align-items:center;gap:13px;font-weight:950;letter-spacing:-.4px;font-size:23px;}
.logo{width:52px;height:52px;border-radius:19px;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--indigo),var(--purple));box-shadow:0 0 35px rgba(99,102,241,.45), inset 0 1px 0 rgba(255,255,255,.35);animation:logoFloat 3.5s ease-in-out infinite;}
@keyframes logoFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(3deg)}}

/* ===========================
   Menu Left & Right (User Dropdown)
=========================== */
.menu{display:flex;gap:10px;flex-wrap:wrap;align-items:center;overflow:visible !important;}
.menu-left{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.menu-right{margin-left:auto;display:flex;align-items:center;}

/* ===========================
   Buttons & Links
=========================== */
.menu a,.btn{
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.08);
  color:var(--text);
  padding:11px 15px;
  border-radius:16px;
  font-weight:850;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:.25s;
  cursor:pointer;
}
.menu a:hover,.btn:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.14);
  box-shadow:0 16px 35px rgba(0,0,0,.22);
}
.btn.primary{border:0;background:linear-gradient(135deg,var(--blue),var(--indigo),var(--purple));box-shadow:0 18px 40px rgba(99,102,241,.28);}
.btn.buy{border:0;background:linear-gradient(135deg,#f59e0b,#ec4899,#8b5cf6);box-shadow:0 18px 50px rgba(236,72,153,.28);font-size:16px;padding:14px 20px;}
.btn.danger{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.4);}

/* ===========================
   User Dropdown
=========================== */
.user-dropdown{position:relative;display:inline-block;overflow:visible !important;}
.user-btn{
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.08);
  color:var(--text);
  padding:11px 15px;
  border-radius:16px;
  font-weight:850;
  cursor:pointer;
  transition:.25s;
  white-space:nowrap;
}
.user-btn:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.14);
}
.user-menu{
  display:none;
  position:absolute;
  top:58px;
  right:0;
  width:230px;
  background:#0f172a;
  border:1px solid var(--stroke);
  border-radius:18px;
  overflow:hidden;
  z-index:999999;
  box-shadow:0 25px 70px rgba(0,0,0,.45);
}
.user-menu.show{display:block;}
.user-menu a{
  display:block;
  padding:14px 16px;
  color:#fff;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.user-menu a:last-child{border-bottom:none;}
.user-menu a:hover{background:rgba(255,255,255,.08);}

/* ===========================
   Grid & Cards
=========================== */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;}
.card{grid-column:span 12;position:relative;overflow:hidden;border:1px solid var(--stroke);background:linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.055));border-radius:30px;padding:24px;backdrop-filter:blur(22px);box-shadow:0 30px 90px rgba(0,0,0,.28);}
.card:before{content:"";position:absolute;inset:-1px;pointer-events:none;border-radius:30px;background:linear-gradient(135deg,rgba(56,189,248,.25),transparent 25%,transparent 70%,rgba(168,85,247,.18));opacity:.65;}
.card>*{position:relative;z-index:1;}
.half{grid-column:span 6;}
.third{grid-column:span 4;}
.two{grid-column:span 8;}
.quarter{grid-column:span 3;}
.hero-title{font-size:44px;line-height:1;font-weight:950;letter-spacing:-1.4px;margin:0 0 12px;}
h1,h2,h3{margin:0 0 14px;letter-spacing:-.5px;}
.muted{color:var(--muted);line-height:1.7;}
.big{font-size:46px;font-weight:950;letter-spacing:-1px;}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.09);border:1px solid var(--stroke);color:#dce9ff;font-size:12px;font-weight:800;}
label{display:block;margin:13px 0 8px;color:#dce8ff;font-weight:850;}
input,textarea,select{width:100%;padding:14px 15px;border-radius:18px;border:1px solid var(--stroke);background:rgba(3,7,18,.48);color:var(--text);outline:none;font-size:15px;transition:.25s;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}
input:focus,textarea:focus,select:focus{border-color:rgba(56,189,248,.65);box-shadow:0 0 0 4px rgba(56,189,248,.12);}
textarea{min-height:150px;resize:vertical;}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}

/* ===========================
   Auth & Forms
=========================== */
.auth-shell{max-width:560px;margin:38px auto;position:relative;}
.auth-card{text-align:left;padding:30px;}
.auth-card .hero-title{text-align:center;font-size:38px;}
.auth-sub{text-align:center;margin-top:-5px;margin-bottom:20px;}

/* ===========================
   Flash Messages
=========================== */
.flash-stack{max-width:560px;margin:0 auto 16px;}
.alert{display:flex;align-items:center;justify-content:center;gap:10px;text-align:center;padding:14px 16px;border-radius:20px;margin-bottom:14px;font-weight:900;border:1px solid var(--stroke);box-shadow:0 18px 40px rgba(0,0,0,.18);}
.alert-icon{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:950;}
.alert-success{background:rgba(34,197,94,.15);border-color:rgba(34,197,94,.45);color:#d9ffe4;}
.alert-success .alert-icon{background:var(--green);color:#03130a;}
.alert-error{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.45);color:#ffe2e2;}
.alert-error .alert-icon{background:var(--red);color:#fff;}
.alert-info{background:rgba(56,189,248,.14);border-color:rgba(56,189,248,.38);}

/* ===========================
   Tables
=========================== */
table{width:100%;border-collapse:separate;border-spacing:0 10px;}
th{color:#bdd0f6;font-size:13px;text-align:left;padding:0 12px;}
td{background:rgba(255,255,255,.07);border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke);padding:13px 12px;}
td:first-child{border-left:1px solid var(--stroke);border-radius:15px 0 0 15px;}
td:last-child{border-right:1px solid var(--stroke);border-radius:0 15px 15px 0;}

/* ===========================
   Packages / Badges
=========================== */
.package{min-height:240px;display:flex;flex-direction:column;justify-content:space-between;}
.price{font-size:34px;font-weight:950;}
.credits-badge{font-size:30px;font-weight:950;background:linear-gradient(135deg,#fff,#9fd7ff);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* ===========================
   Telegram Float
=========================== */
.telegram-float{
    position:fixed;right:25px;bottom:25px;
    z-index:999;display:flex;align-items:center;gap:10px;
    padding:16px 22px;border-radius:999px;color:white;font-weight:950;letter-spacing:.2px;
    background:linear-gradient(135deg,#1da1f2,#6366f1,#a855f7);
    box-shadow:0 0 22px rgba(29,161,242,.55),0 0 70px rgba(168,85,247,.35);
    border:1px solid rgba(255,255,255,.25);
    animation:telegramPulse 2.2s infinite;
}
.telegram-float:hover{transform:translateY(-5px) scale(1.04);}
.telegram-dot{width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 18px #fff;}
@keyframes telegramPulse{0%,100%{box-shadow:0 0 22px rgba(29,161,242,.55),0 0 70px rgba(168,85,247,.35)}50%{box-shadow:0 0 38px rgba(29,161,242,.9),0 0 100px rgba(168,85,247,.7)}}

/* ===========================
   Responsive
=========================== */
@media(max-width:850px){
    .wrap{padding:14px;}
    .nav{align-items:flex-start;flex-direction:column;}
    .menu{width:100%;}
    .half,.third,.two,.quarter{grid-column:span 12;}
    .hero-title{font-size:34px;}
    .telegram-float{right:14px;bottom:14px;padding:13px 16px;}
}
/* FIX USER DROPDOWN OVER CARDS */

.nav{
    position:relative !important;
    z-index:9999999 !important;
    overflow:visible !important;
}

.menu,
.menu-left,
.menu-right,
.user-dropdown{
    position:relative !important;
    z-index:9999999 !important;
    overflow:visible !important;
}

.user-menu{
    display:none;
    position:absolute !important;
    top:52px !important;
    right:0 !important;
    width:230px !important;
    background:#0f172a !important;
    border:1px solid rgba(255,255,255,.18) !important;
    border-radius:18px !important;
    overflow:hidden !important;
    z-index:99999999 !important;
    box-shadow:0 25px 80px rgba(0,0,0,.75) !important;
}

.user-menu.show{
    display:block !important;
}

.user-menu a{
    display:block !important;
    padding:14px 16px !important;
    color:#fff !important;
    background:#0f172a !important;
    text-decoration:none !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
}

.user-menu a:hover{
    background:#1e293b !important;
}

.card{
    z-index:1 !important;
}
.send-dropdown{
    position:relative;
    display:inline-block;
    overflow:visible !important;
}

.send-btn{
    border:1px solid var(--stroke);
    background:rgba(255,255,255,.08);
    color:var(--text);
    padding:11px 15px;
    border-radius:16px;
    font-weight:850;
    cursor:pointer;
}

.send-menu{
    display:none;
    position:absolute;
    top:58px;
    left:0;
    width:220px;
    background:#0f172a;
    border:1px solid var(--stroke);
    border-radius:18px;
    overflow:hidden;
    z-index:99999999;
    box-shadow:0 25px 80px rgba(0,0,0,.65);
}

.send-menu.show{
    display:block !important;
}

.send-menu a{
    display:block;
    padding:14px 16px;
    color:#fff;
    text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,.07);
}

.send-menu a:hover{
    background:#1e293b;
}
.package{
    position:relative;
}

.best-seller-badge{
    position:absolute;
    top:14px;
    right:14px;

    padding:7px 12px;

    border-radius:999px;

    background:linear-gradient(135deg,#f59e0b,#ef4444);

    color:#fff;
    font-size:11px;
    font-weight:900;
    letter-spacing:.5px;

    box-shadow:0 8px 20px rgba(239,68,68,.25);

    z-index:5;
}
.package h2{
    margin-top:35px;
}

/* ==============================
   GLOBAL MOBILE FIX
   ============================== */

@media (max-width: 850px){

  html, body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  .wrap{
    width:100% !important;
    max-width:100% !important;
    padding:12px !important;
    box-sizing:border-box !important;
  }

  .grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
    width:100% !important;
  }

  .card,
  .card.two,
  .card.third,
  .auth-card,
  .quick-card,
  .welcome-card{
    grid-column:1 / -1 !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    padding:16px !important;
  }

  .nav{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:12px !important;
  }

  .brand{
    width:100% !important;
    justify-content:center !important;
  }

  .menu,
  .menu-left,
  .menu-right{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin-left:0 !important;
  }

  .menu a,
  .user-btn{
    width:100% !important;
    text-align:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
  }

  .user-menu{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    width:100% !important;
    margin-top:8px !important;
  }

  .hero-title,
  .dash-title,
  .welcome-title{
    font-size:28px !important;
    line-height:1.15 !important;
    word-break:break-word !important;
  }

  .big{
    font-size:42px !important;
  }

  .row,
  .guide-row,
  .analytics-pills{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .btn,
  button,
  input,
  select,
  textarea{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    font-size:16px !important;
  }

  input,
  select,
  textarea{
    min-height:46px !important;
  }

  textarea{
    min-height:150px !important;
  }

  .smtp-two-col,
  .compact-form,
  .message-mini-grid,
  .send-choice-grid,
  .control-row{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    padding:0 !important;
  }

  .smtp-left,
  .smtp-right{
    height:auto !important;
    min-height:auto !important;
    max-height:none !important;
    position:relative !important;
    top:auto !important;
    overflow:visible !important;
  }

  .live-stat-grid{
    grid-template-columns:repeat(2,1fr) !important;
  }

  .live-log{
    height:300px !important;
    min-height:300px !important;
    max-height:300px !important;
  }

  .credit-mini,
  .credit-glow,
  .free-box{
    width:100% !important;
    min-width:0 !important;
  }

  table{
    display:block !important;
    width:100% !important;
    overflow-x:auto !important;
    white-space:nowrap !important;
  }
}
.payment-address-box{
    position:relative;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.18) !important;
}

.payment-address-box::before{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:26px;
    padding:2px;
    background:linear-gradient(120deg,#38bdf8,#6366f1,#a855f7,#f59e0b,#38bdf8);
    background-size:300% 300%;
    animation:borderSpin 4s linear infinite;
    z-index:0;
    pointer-events:none;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
}

.payment-address-box > *{
    position:relative;
    z-index:2;
}

@keyframes borderSpin{
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.copy-btn{
    background:linear-gradient(135deg,#22c55e,#38bdf8) !important;
    color:#fff !important;
    border:none !important;
    font-weight:900 !important;
    font-size:13px !important;
    padding:10px 16px !important;
    border-radius:14px !important;
    box-shadow:0 10px 25px rgba(56,189,248,.25);
}

.copy-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 35px rgba(34,197,94,.30);
}