/* =========================================================
   XSELLER V3.2 — CINEMATIC MAIN WEB UI
   Do not affect /admin
   ========================================================= */

:root{
  --xs-red:#ff1738;
  --xs-red2:#bd001f;
  --xs-redsoft:rgba(255,23,56,.13);
  --xs-bg:#050506;
  --xs-card:rgba(15,15,19,.78);
  --xs-card2:rgba(20,20,25,.70);
  --xs-line:rgba(255,255,255,.085);
  --xs-text:#f7f7fa;
  --xs-muted:#8d8d9a;
  --xs-green:#46e982;
}

/* ---------- GLOBAL CINEMATIC BACKGROUND ---------- */

body.dash,
body.auth{
  background:
    radial-gradient(circle at 72% -8%, rgba(255,20,52,.16), transparent 31%),
    radial-gradient(circle at 28% 115%, rgba(110,0,20,.16), transparent 36%),
    #050506 !important;
  color:var(--xs-text);
  min-height:100vh;
  overflow-x:hidden;
}

body.dash::before,
body.auth::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.017) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.017) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.72),transparent 92%);
}

body.dash::after,
body.auth::after{
  content:"";
  position:fixed;
  z-index:-2;
  width:600px;
  height:600px;
  border-radius:50%;
  top:-330px;
  right:-180px;
  background:rgba(255,20,51,.18);
  filter:blur(125px);
  pointer-events:none;
  animation:xsAmbient 9s ease-in-out infinite alternate;
}

@keyframes xsAmbient{
  from{transform:translate3d(-25px,0,0) scale(.92);opacity:.58}
  to{transform:translate3d(30px,45px,0) scale(1.12);opacity:.9}
}

body.dash .workspace{
  animation:xsPageIn .55s cubic-bezier(.2,.75,.25,1) both;
}

@keyframes xsPageIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}

/* ---------- SIDEBAR ---------- */

body.dash #sidebar{
  background:
    linear-gradient(180deg,rgba(12,12,15,.97),rgba(5,5,7,.98)) !important;
  border-right:1px solid rgba(255,255,255,.07) !important;
  box-shadow:18px 0 70px rgba(0,0,0,.30);
  backdrop-filter:blur(20px);
}

body.dash #sidebar::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:180px;
  pointer-events:none;
  background:
    radial-gradient(circle at 40% 0,rgba(255,25,56,.16),transparent 68%);
}

body.dash #sidebar .logo{
  position:relative;
  display:inline-block;
  font-size:20px;
  font-weight:950;
  letter-spacing:-1px;
  text-shadow:0 0 30px rgba(255,35,67,.18);
}

body.dash #sidebar .logo span{
  color:var(--xs-red);
  text-shadow:0 0 18px rgba(255,23,56,.5);
}

body.dash #sidebar>.muted{
  position:relative;
  font-size:9px;
  letter-spacing:.13em;
  opacity:.72;
  margin-top:12px;
  margin-bottom:20px;
}

/* menu tools */

body.dash #sidebar .tool,
body.dash #sidebar .sideLink,
body.dash #sidebar .adminlink{
  position:relative;
  overflow:hidden;
  border-radius:10px !important;
  transition:
    background .22s ease,
    transform .22s ease,
    border-color .22s ease,
    color .22s ease !important;
}

body.dash #sidebar .tool::after,
body.dash #sidebar .sideLink::after{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:75%;
  height:100%;
  transform:skewX(-22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.045),transparent);
  transition:left .5s ease;
}

body.dash #sidebar .tool:hover::after,
body.dash #sidebar .sideLink:hover::after{
  left:130%;
}

body.dash #sidebar .tool:hover,
body.dash #sidebar .sideLink:hover{
  transform:translateX(3px);
  color:#fff !important;
  background:rgba(255,255,255,.045) !important;
}

body.dash #sidebar .tool.active,
body.dash #sidebar .activeLink{
  background:
    linear-gradient(100deg,rgba(255,25,57,.16),rgba(255,25,57,.035)) !important;
  border-color:rgba(255,40,72,.20) !important;
  color:#fff !important;
  box-shadow:
    inset 3px 0 0 var(--xs-red),
    0 8px 30px rgba(120,0,20,.08);
}

body.dash #sidebar .tool small{
  color:#888894;
  font-size:9px;
}

body.dash #sidebar .tool.active small{
  color:#ff8c9d;
}

body.dash #sidebar .adminlink{
  border:1px solid rgba(255,37,67,.20) !important;
  color:#ff536b !important;
  background:rgba(255,24,55,.035);
}

body.dash #sidebar .logout{
  transition:.2s ease;
}

body.dash #sidebar .logout:hover{
  color:#ff4963;
}

/* ---------- HEADER ---------- */

body.dash .workspace>header{
  position:sticky;
  top:0;
  z-index:40;
  min-height:70px;
  background:rgba(6,6,8,.68) !important;
  border-bottom:1px solid rgba(255,255,255,.07) !important;
  backdrop-filter:blur(22px) saturate(140%);
}

body.dash .workspace>header b{
  font-weight:850;
  letter-spacing:-.25px;
}

body.dash .credit{
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(255,40,70,.26) !important;
  background:
    linear-gradient(135deg,rgba(255,25,55,.11),rgba(30,9,14,.58)) !important;
  color:#fff !important;
  border-radius:999px !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.04),
    0 0 28px rgba(255,20,50,.055);
  transition:.22s ease;
}

body.dash .credit:hover{
  border-color:rgba(255,47,76,.55) !important;
  transform:translateY(-1px);
  box-shadow:0 9px 30px rgba(255,20,50,.10);
}

/* ---------- AI GENERATOR ---------- */

body.dash .panel{
  position:relative;
  overflow:hidden;
  border:1px solid var(--xs-line) !important;
  border-radius:18px !important;
  background:
    linear-gradient(145deg,rgba(19,19,23,.90),rgba(10,10,13,.92)) !important;
  box-shadow:
    0 30px 90px rgba(0,0,0,.28),
    inset 0 1px rgba(255,255,255,.025);
}

body.dash .panel::before{
  content:"";
  position:absolute;
  width:320px;
  height:320px;
  right:-180px;
  top:-210px;
  border-radius:50%;
  background:rgba(255,24,55,.17);
  filter:blur(55px);
  pointer-events:none;
}

body.dash .panel::after{
  content:"";
  position:absolute;
  top:0;
  left:18%;
  right:18%;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,54,82,.48),
    transparent
  );
}

body.dash .panelHead{
  position:relative;
}

body.dash .panel h1{
  font-size:30px;
  letter-spacing:-1px;
  margin-top:7px;
}

body.dash .eyebrow{
  color:#ff3653 !important;
  font-weight:850;
  letter-spacing:.1em;
}

body.dash .cost{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);
  padding:8px 11px;
  border-radius:999px;
}

/* inputs */

body.dash textarea,
body.dash input,
body.dash select{
  border:1px solid rgba(255,255,255,.10) !important;
  background:rgba(5,5,8,.72) !important;
  color:#f5f5f7 !important;
  border-radius:11px !important;
  outline:none;
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

body.dash textarea:hover,
body.dash input:hover,
body.dash select:hover{
  border-color:rgba(255,255,255,.16) !important;
}

body.dash textarea:focus,
body.dash input:focus,
body.dash select:focus{
  border-color:rgba(255,39,70,.58) !important;
  background:rgba(8,8,11,.93) !important;
  box-shadow:
    0 0 0 3px rgba(255,23,56,.075),
    0 12px 34px rgba(0,0,0,.16);
}

body.dash textarea{
  min-height:128px;
}

/* primary buttons */

body.dash .btn{
  position:relative;
  overflow:hidden;
  border:none !important;
  background:
    linear-gradient(100deg,#ff1c3d,#d80025) !important;
  color:white !important;
  font-weight:850 !important;
  border-radius:10px !important;
  box-shadow:
    0 10px 30px rgba(214,0,36,.17),
    inset 0 1px rgba(255,255,255,.12);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

body.dash .btn::before{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-120%);
  background:linear-gradient(
    100deg,
    transparent 15%,
    rgba(255,255,255,.18) 50%,
    transparent 85%
  );
  transition:transform .55s ease;
}

body.dash .btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.07);
  box-shadow:0 15px 38px rgba(225,0,37,.25);
}

body.dash .btn:hover::before{
  transform:translateX(120%);
}

body.dash .btn:active{
  transform:translateY(0) scale(.992);
}

/* ---------- RESULT ---------- */

body.dash .result{
  border:1px solid rgba(255,255,255,.075) !important;
  background:rgba(5,5,8,.50) !important;
  border-radius:14px !important;
  overflow:hidden;
}

body.dash .result>div:first-child{
  background:rgba(255,255,255,.018);
  border-bottom:1px solid rgba(255,255,255,.065);
}

body.dash .result button{
  color:#ff5e74 !important;
  transition:.2s;
}

body.dash .result button:hover{
  color:#fff !important;
}

body.dash .structuredOutput:not(:has(.outputPlaceholder)){
  animation:xsResultIn .4s ease both;
}

@keyframes xsResultIn{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:none}
}

/* ---------- RECENT HISTORY ---------- */

body.dash .history{
  margin-top:30px;
}

body.dash .historyTitle h2{
  letter-spacing:-.5px;
}

body.dash .historyCard{
  position:relative;
  border:1px solid rgba(255,255,255,.075) !important;
  background:
    linear-gradient(110deg,rgba(16,16,20,.88),rgba(10,10,13,.82)) !important;
  border-radius:13px !important;
  overflow:hidden;
  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

body.dash .historyCard::before{
  content:"";
  position:absolute;
  left:0;
  top:20%;
  bottom:20%;
  width:2px;
  border-radius:4px;
  opacity:0;
  background:var(--xs-red);
  transition:.2s;
}

body.dash .historyCard:hover{
  transform:translateY(-2px);
  border-color:rgba(255,46,75,.23) !important;
  background:
    linear-gradient(110deg,rgba(255,24,55,.05),rgba(13,13,17,.95)) !important;
  box-shadow:0 14px 36px rgba(0,0,0,.18);
}

body.dash .historyCard:hover::before{
  opacity:1;
}

body.dash .historyView,
body.dash .historyAll{
  color:#ff536b !important;
}

/* ---------- MODAL ---------- */

body.dash .historyModalBackdrop{
  backdrop-filter:blur(8px);
  background:rgba(0,0,0,.70) !important;
}

body.dash .historyModalBox{
  border:1px solid rgba(255,255,255,.09) !important;
  border-radius:18px !important;
  background:
    radial-gradient(circle at 85% 0,rgba(255,20,51,.08),transparent 28%),
    #0d0d11 !important;
  box-shadow:0 35px 120px rgba(0,0,0,.62);
  animation:xsModalIn .26s ease both;
}

@keyframes xsModalIn{
  from{opacity:0;transform:scale(.97) translateY(10px)}
  to{opacity:1;transform:none}
}

/* =========================================================
   HISTORY PAGE
   ========================================================= */

body.historyPage .historyFilters{
  border:1px solid rgba(255,255,255,.075);
  background:rgba(15,15,19,.72);
  border-radius:14px;
  backdrop-filter:blur(16px);
}

body.historyPage .historyExplorer{
  border:1px solid rgba(255,255,255,.075) !important;
  background:rgba(12,12,15,.80) !important;
  border-radius:18px !important;
  overflow:hidden;
  box-shadow:0 25px 70px rgba(0,0,0,.22);
}

body.historyPage .historyExplorerList{
  background:rgba(6,6,9,.48);
}

body.historyPage .historyRow{
  position:relative;
  transition:.2s ease;
  border-color:rgba(255,255,255,.055) !important;
}

body.historyPage .historyRow:hover,
body.historyPage .historyRow.active{
  background:linear-gradient(
    90deg,
    rgba(255,27,58,.09),
    rgba(255,27,58,.015)
  ) !important;
}

body.historyPage .historyRow.active{
  box-shadow:inset 3px 0 0 var(--xs-red);
}

body.historyPage .historyExplorerDetail{
  background:
    radial-gradient(circle at 100% 0,rgba(255,20,50,.06),transparent 36%);
}

/* =========================================================
   UPGRADE
   ========================================================= */

body.dash .upgradeHero{
  position:relative;
  padding:55px 25px 40px !important;
  text-align:center;
  overflow:hidden;
}

body.dash .upgradeHero::before{
  content:"";
  position:absolute;
  width:700px;
  height:220px;
  left:50%;
  top:-150px;
  transform:translateX(-50%);
  background:rgba(255,18,50,.25);
  border-radius:50%;
  filter:blur(85px);
  pointer-events:none;
}

body.dash .upgradeHero h1{
  position:relative;
  font-size:clamp(34px,4vw,53px) !important;
  letter-spacing:-1.8px !important;
  margin:10px 0 12px !important;
}

body.dash .upgradeHero>p{
  position:relative;
}

body.dash .packageGrid{
  gap:14px !important;
}

body.dash .packageCard{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.085) !important;
  border-radius:17px !important;
  background:
    linear-gradient(155deg,rgba(18,18,23,.93),rgba(9,9,12,.93)) !important;
  transition:
    transform .24s ease,
    border-color .24s ease,
    box-shadow .24s ease;
}

body.dash .packageCard:hover{
  transform:translateY(-7px);
  border-color:rgba(255,44,74,.30) !important;
  box-shadow:0 25px 55px rgba(0,0,0,.30);
}

body.dash .packageCard.featured{
  border-color:rgba(255,31,62,.52) !important;
  background:
    radial-gradient(circle at 100% 0,rgba(255,25,55,.12),transparent 45%),
    linear-gradient(155deg,#171217,#09090c) !important;
  box-shadow:
    0 20px 60px rgba(160,0,25,.10),
    inset 0 1px rgba(255,255,255,.04);
}

body.dash .packageCard.featured::before{
  content:"PHỔ BIẾN";
  position:absolute;
  right:-28px;
  top:16px;
  width:105px;
  text-align:center;
  transform:rotate(42deg);
  font-size:7px;
  font-weight:900;
  letter-spacing:.08em;
  padding:4px 0;
  color:#fff;
  background:var(--xs-red);
}

body.dash .packageCard>strong{
  font-size:29px !important;
  letter-spacing:-.7px;
}

body.dash .paymentHelp{
  border:1px solid rgba(255,255,255,.075) !important;
  border-radius:17px !important;
  overflow:hidden;
}

body.dash .paymentHelp>div{
  background:
    linear-gradient(150deg,rgba(16,16,20,.86),rgba(10,10,13,.86));
}

/* =========================================================
   ACCOUNT
   ========================================================= */

body.dash .accountCard,
body.dash .statCard,
body.dash .miniStats{
  border-color:rgba(255,255,255,.075) !important;
  background:
    linear-gradient(145deg,rgba(17,17,21,.90),rgba(10,10,13,.91)) !important;
  border-radius:16px !important;
  box-shadow:0 18px 50px rgba(0,0,0,.18);
}

body.dash .statCard{
  position:relative;
  overflow:hidden;
}

body.dash .statCard::after{
  content:"";
  position:absolute;
  width:160px;
  height:160px;
  right:-80px;
  top:-80px;
  border-radius:50%;
  background:rgba(255,23,56,.12);
  filter:blur(35px);
}

body.dash .statCard>b{
  color:#fff;
  font-size:30px !important;
}

body.dash .statCard>a{
  color:#ff546c !important;
}

body.dash .transactionCard{
  margin-top:18px;
}

/* =========================================================
   PAYMENT QR
   ========================================================= */

body.dash .payShell{
  padding-top:30px !important;
}

body.dash .payCard{
  position:relative;
  border:1px solid rgba(255,255,255,.09) !important;
  border-radius:20px !important;
  overflow:hidden;
  background:
    radial-gradient(circle at 90% 0,rgba(255,26,57,.09),transparent 33%),
    linear-gradient(145deg,#111115,#09090c) !important;
  box-shadow:
    0 35px 100px rgba(0,0,0,.37),
    inset 0 1px rgba(255,255,255,.03);
}

body.dash .payCard::before{
  content:"";
  position:absolute;
  height:1px;
  top:0;
  left:15%;
  right:15%;
  background:linear-gradient(90deg,transparent,#ff3855,transparent);
}

body.dash .payAmount{
  font-size:36px !important;
  letter-spacing:-1.2px;
}

body.dash .qrBox{
  border-radius:17px !important;
  background:#fff !important;
  box-shadow:0 18px 60px rgba(0,0,0,.32);
  transition:.25s ease;
}

body.dash .qrBox:hover{
  transform:translateY(-3px) scale(1.01);
}

body.dash .qrBox img{
  border-radius:12px;
}

body.dash .transferBox{
  border:1px solid rgba(255,255,255,.075) !important;
  background:rgba(4,4,7,.48) !important;
  border-radius:15px !important;
}

body.dash .transferRow{
  border-color:rgba(255,255,255,.07) !important;
}

body.dash .paymentWarning{
  border-radius:10px !important;
}

body.dash .paymentState{
  border-radius:11px !important;
  animation:xsPulseState 2.5s ease-in-out infinite;
}

@keyframes xsPulseState{
  0%,100%{box-shadow:0 0 0 rgba(255,190,55,0)}
  50%{box-shadow:0 0 28px rgba(255,190,55,.06)}
}

/* =========================================================
   LOGIN / REGISTER
   ========================================================= */

body.auth{
  display:grid !important;
  place-items:center;
  padding:34px 18px;
}

body.auth::before{
  background:
    radial-gradient(circle at 15% 25%,rgba(255,20,50,.10),transparent 22%),
    radial-gradient(circle at 85% 75%,rgba(255,20,50,.06),transparent 25%),
    linear-gradient(rgba(255,255,255,.016) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.016) 1px,transparent 1px);
  background-size:auto,auto,50px 50px,50px 50px;
}

body.auth .authbox{
  position:relative;
  overflow:hidden;
  width:min(430px,100%);
  padding:38px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:21px !important;
  background:
    radial-gradient(circle at 100% 0,rgba(255,25,56,.12),transparent 38%),
    rgba(12,12,16,.88) !important;
  backdrop-filter:blur(25px);
  box-shadow:
    0 40px 120px rgba(0,0,0,.55),
    inset 0 1px rgba(255,255,255,.04);
  animation:xsAuthIn .55s cubic-bezier(.2,.75,.2,1) both;
}

@keyframes xsAuthIn{
  from{opacity:0;transform:translateY(22px) scale(.98)}
  to{opacity:1;transform:none}
}

body.auth .authbox::before{
  content:"";
  position:absolute;
  top:0;
  left:15%;
  right:15%;
  height:1px;
  background:linear-gradient(90deg,transparent,#ff3653,transparent);
}

body.auth .logo{
  display:inline-block;
  font-size:23px;
  font-weight:950;
  letter-spacing:-1px;
  margin-bottom:25px;
}

body.auth .logo span{
  color:var(--xs-red);
  text-shadow:0 0 22px rgba(255,23,56,.45);
}

body.auth h1{
  font-size:31px;
  letter-spacing:-1px;
  margin-bottom:8px;
}

body.auth .authbox>p{
  color:#858590;
  line-height:1.55;
}

body.auth input{
  width:100%;
  background:rgba(5,5,8,.70) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:11px !important;
  transition:.2s;
}

body.auth input:focus{
  border-color:rgba(255,44,72,.60) !important;
  box-shadow:0 0 0 3px rgba(255,23,56,.075);
}

body.auth .btn{
  width:100%;
  border:0 !important;
  border-radius:11px !important;
  background:linear-gradient(100deg,#ff1d3e,#d60024) !important;
  color:#fff !important;
  box-shadow:0 12px 34px rgba(220,0,35,.18);
  transition:.2s;
}

body.auth .btn:hover{
  transform:translateY(-2px);
  box-shadow:0 17px 42px rgba(220,0,35,.25);
}

body.auth a{
  color:#ff5570;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:900px){
  body.dash .workspace>header{
    padding-left:58px !important;
  }

  body.dash .panel{
    border-radius:15px !important;
  }

  body.dash .packageCard:hover{
    transform:none;
  }
}

@media(max-width:650px){
  body.dash .panel h1{
    font-size:25px;
  }

  body.dash .upgradeHero{
    padding:38px 10px 25px !important;
  }

  body.dash .upgradeHero h1{
    font-size:32px !important;
  }

  body.dash .payAmount{
    font-size:29px !important;
  }

  body.auth .authbox{
    padding:28px 22px !important;
  }
}

/* =========================================================
   ACCESSIBILITY / PERFORMANCE
   ========================================================= */

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

.xsReveal{
  animation:xsReveal .48s cubic-bezier(.2,.7,.2,1) both;
}

@keyframes xsReveal{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:none;
  }
}

#generateBtn.xsGenerating{
  pointer-events:none;
  filter:saturate(.7);
}

#generateBtn.xsGenerating::after{
  content:"";
  display:inline-block;
  width:12px;
  height:12px;
  margin-left:9px;
  vertical-align:-2px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  border-radius:50%;
  animation:xsSpin .75s linear infinite;
}

@keyframes xsSpin{
  to{transform:rotate(360deg)}
}

/* =========================================================
   XSELLER V3.2.2 — REAL LOGO ON MAIN APP
   ========================================================= */

body.dash #sidebar .logo,
body.auth .logo{
  display:inline-flex !important;
  align-items:center;
  width:auto;
  height:auto;
  line-height:0;
}

body.dash #sidebar .logo img.xsRealLogo,
body.auth .logo img.xsRealLogo{
  display:block;
  width:auto;
  object-fit:contain;
}

body.dash #sidebar .logo img.xsRealLogo{
  height:31px;
  max-width:172px;
}

body.auth .logo img.xsRealLogo{
  height:39px;
  max-width:230px;
}

@media(max-width:650px){
  body.dash #sidebar .logo img.xsRealLogo{
    height:27px;
    max-width:150px;
  }

  body.auth .logo img.xsRealLogo{
    height:34px;
    max-width:205px;
  }
}