*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%;background:#000;color:#f5f5f5}
body{font-family:"Arial Narrow","Roboto Condensed",Arial,sans-serif;min-height:100vh;display:flex;justify-content:center;overflow-x:hidden}
.background-grid{position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:54px 54px}
.container{position:relative;z-index:1;width:100%;max-width:660px;padding:70px 14px 28px;margin:auto}
.main-card{padding:8px;border:1px solid #414141;background:#020202;box-shadow:8px 10px 0 rgba(255,255,255,.07)}
.card-inner{border:1px solid #242424;background:#000;text-align:center;padding:30px 28px 24px}
.system-tag{display:inline-block;border:1px solid #5d5d5d;background:#090909;padding:10px 17px;font-size:11px;letter-spacing:3.5px;color:#ddd;margin-bottom:28px}
.logo-placeholder{width:120px;height:120px;margin:0 auto 25px;border:1px solid #222;display:flex;align-items:center;justify-content:center}
.logo-placeholder img{display:none;width:100%;height:100%;object-fit:cover}
.logo-placeholder.has-image img{display:block}
h1{margin:0;font-size:39px;line-height:1;font-weight:900;letter-spacing:.4px}
.subtitle{display:flex;justify-content:center;align-items:center;gap:7px;margin:11px 0 28px;color:#ddd;font-size:18px;letter-spacing:1.4px}
.subtitle span{color:#777;font-size:21px}.subtitle b{font-weight:500}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.stat-box{height:91px;border:1px solid #383838;background:#101010;display:flex;flex-direction:column;justify-content:center;align-items:center}
.stat-box strong{min-height:29px;font-size:25px;font-weight:500;letter-spacing:1px}
.stat-box small{margin-top:7px;color:#777;font-size:10px;letter-spacing:1.5px}
.main-button{width:100%;height:60px;margin:8px 0;border:1px solid #3d3d3d;background:#101010;color:#eee;display:flex;align-items:center;justify-content:center;gap:14px;font-size:15px;font-weight:800;letter-spacing:1.5px;cursor:pointer;transition:.15s}
.main-button:hover{background:#181818}.main-button:active{transform:translateY(1px)}
.main-button.primary{background:#f4f4f4;color:#070707;border-color:#eee;box-shadow:5px 6px 0 #555}
.main-button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.main-button.primary svg path{fill:currentColor;stroke:none}
.footer-note{margin-top:34px;color:#5d5d5d;font-size:12px;letter-spacing:1px}
.copyright{text-align:center;color:#4d4d4d;font-size:11px;margin-top:22px}
.modal-overlay{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.84);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:18px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility .18s ease}
.modal-overlay.open{opacity:1;visibility:visible;pointer-events:auto}
.modal{position:relative;width:100%;max-width:410px;background:#060606;border:1px solid #555;padding:27px 18px 18px;box-shadow:7px 8px 0 rgba(255,255,255,.07)}
.close{position:absolute;right:9px;top:5px;width:34px;height:34px;border:0;background:transparent;color:#aaa;font-size:28px;line-height:1;cursor:pointer}
.modal-label{text-align:center;color:#777;font-size:10px;letter-spacing:3px}
.modal h2{text-align:center;margin:8px 0 6px;font-size:21px;letter-spacing:.4px}
.modal>p{text-align:center;color:#707070;font-size:12px;margin:0 0 20px}
.option{width:100%;min-height:68px;margin:9px 0;padding:10px 12px;border:1px solid #383838;background:#101010;color:#eee;display:flex;align-items:center;gap:13px;text-align:left;cursor:pointer;text-decoration:none;font-family:inherit}
.option:hover{background:#181818}.option-icon{width:38px;flex:0 0 38px;text-align:center;font-size:25px;color:#eee}
.option-info{flex:1;min-width:0}.option-info b{display:block;font-size:14px;letter-spacing:.7px}.option-info small{display:block;color:#707070;font-size:11px;margin-top:4px}
.next{font-size:28px;color:#888}.crown{font-size:29px}.telegram{font-size:25px}.discord{font-size:21px}
.modal-close{width:100%;height:47px;margin-top:12px;border:1px solid #444;background:#090909;color:#eee;font-weight:800;letter-spacing:1.5px;cursor:pointer}
.toast{position:fixed;z-index:200;left:50%;bottom:25px;transform:translate(-50%,15px);opacity:0;pointer-events:none;background:#eee;color:#111;padding:10px 16px;font-size:12px;font-weight:800;transition:.2s}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:560px){
 body{padding:0}
 .container{padding:18px 8px 25px}
 .main-card{padding:7px;box-shadow:6px 8px 0 rgba(255,255,255,.07)}
 .card-inner{padding:27px 18px 23px}
 .system-tag{font-size:10px;letter-spacing:3px;padding:9px 13px;margin-bottom:24px}
 .logo-placeholder{width:112px;height:112px;margin-bottom:22px}
 h1{font-size:35px}
 .subtitle{font-size:17px;margin:10px 0 25px}
 .stats{gap:10px;margin-bottom:19px}
 .stat-box{height:86px}
 .stat-box strong{font-size:24px}
 .main-button{height:58px;font-size:15px}
 .footer-note{margin-top:33px}
}
@media(max-width:370px){h1{font-size:31px}.main-button{font-size:14px}}

/* MOBILE COMPACT OVERRIDE */
html,body{width:100%;max-width:100%;overflow-x:hidden}
body{display:block;padding:0!important}
.container{
  width:100%;
  max-width:430px;
  margin:0 auto;
  padding:18px 10px 25px!important;
}
.main-card{
  width:100%;
}
.card-inner{
  width:100%;
  padding:26px 16px 22px!important;
}
.system-tag{
  max-width:100%;
  white-space:nowrap;
}
.logo-placeholder{
  width:120px!important;
  height:120px!important;
  margin-bottom:22px!important;
}
h1{
  font-size:34px!important;
}
.subtitle{
  font-size:17px!important;
  margin:10px 0 24px!important;
}
.stats{
  grid-template-columns:1fr 1fr!important;
  gap:9px!important;
}
.stat-box{
  height:84px!important;
}
.main-button{
  height:57px!important;
  margin:7px 0!important;
  font-size:14px!important;
}
.footer-note{
  margin-top:30px!important;
}
.copyright{
  margin-top:18px!important;
}

/* popup luôn dọc, không bao giờ xếp ngang */
.modal-overlay{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  padding:16px!important;
}
.modal-overlay:not(.open){
  display:flex!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
.modal{
  width:100%!important;
  max-width:360px!important;
  flex:0 0 auto!important;
}
.option{
  width:100%!important;
  min-height:64px!important;
}
@media(max-width:370px){
  .container{padding-left:7px!important;padding-right:7px!important}
  .card-inner{padding-left:14px!important;padding-right:14px!important}
  h1{font-size:31px!important}
  .main-button{font-size:13px!important}
}

/* STATS: XẾP DỌC, FULL CHIỀU NGANG */
.stats{
  display:flex!important;
  flex-direction:column!important;
  width:100%!important;
  gap:10px!important;
}
.stat-box{
  width:100%!important;
  height:87px!important;
}
@media(max-width:560px){
  .stats{display:flex!important;flex-direction:column!important;gap:9px!important}
  .stat-box{width:100%!important;height:86px!important}
}

/* FINAL SPACING + LOGO CLEANUP */
/* Bỏ khung/viền trắng quanh logo */
.logo-placeholder{
  border:none!important;
  outline:none!important;
  box-shadow:none!important;
  background:transparent!important;
}

/* Khoảng cách thoáng giống ảnh mẫu */
.subtitle{
  margin-bottom:50px!important;
}
.stats{
  gap:10px!important;
}
.main-button.primary{
  margin-top:35px!important;
}
.main-button:not(.primary){
  margin-top:6px!important;
}

@media(max-width:560px){
  .subtitle{
    margin-bottom:48px!important;
  }
  .main-button.primary{
    margin-top:32px!important;
  }
  .option-icon svg {

    width: 30px;

    height: 30px;

    display: block;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

}

.option-icon.discord svg {

    fill: currentColor;

    stroke: none;

}

.option-icon.telegram svg {

    fill: none;

}
.option-icon.telegram,

.option-icon.discord {

    color: #fff;

}

.option-icon.telegram svg,

.option-icon.discord svg {

    color: #fff;

}
.key-icon svg {

  width: 24px !important;

  height: 24px !important;

  max-width: 24px !important;

  max-height: 24px !important;

}
.main-key-icon {

  width: 22px !important;

  height: 22px !important;

  min-width: 22px !important;

  max-width: 22px !important;

  min-height: 22px !important;

  max-height: 22px !important;

  display: block !important;

  flex-shrink: 0 !important;

  color: currentColor !important;

}
/* ĐƯỜNG PHÂN CÁCH SAU KEY FREE */

.subtitle{

  position:relative !important;

  margin-bottom:75px !important;

}

.subtitle::after{

  content:"" !important;

  display:block !important;

  position:absolute !important;

  left:0 !important;

  right:0 !important;

  bottom:-38px !important;

  width:100% !important;

  height:1px !important;

  background:#222 !important;

}
.key-result-box{

  display:flex;

  align-items:center;

  gap:10px;

  margin:20px 0;

  padding:12px;

  border:1px solid rgba(255,255,255,.15);

  border-radius:12px;

  background:rgba(255,255,255,.04);

}

.key-result-box span{

  flex:1;

  min-width:0;

  font-size:16px;

  font-weight:700;

  letter-spacing:1px;

  color:#fff;

  word-break:break-all;

}

#copyKey{

  flex-shrink:0;

  border:1px solid rgba(255,255,255,.2);

  background:#fff;

  color:#000;

  border-radius:8px;

  padding:9px 12px;

  font-size:11px;

  font-weight:800;

  cursor:pointer;

}
}