*{
  box-sizing:border-box;
}

body{
  margin:0;
  background:#0d0f14;
  color:#f4f5f7;
  font-family:-apple-system,BlinkMacSystemFont,
    "Segoe UI",sans-serif;
}

.wrap{
  width:min(520px,calc(100% - 32px));
  margin:60px auto;
}

.card{
  background:#171a21;
  border:1px solid #292d37;
  border-radius:18px;
  padding:24px;
}

h1{
  margin:0 0 8px;
}

.muted{
  color:#979daa;
}

input{
  width:100%;
  padding:14px;
  margin:7px 0;
  background:#0f1218;
  color:white;
  border:1px solid #343947;
  border-radius:11px;
}

button,.button{
  display:block;
  width:100%;
  padding:14px;
  margin-top:12px;
  border:0;
  border-radius:11px;
  background:white;
  color:#111;
  font-weight:700;
  text-align:center;
  text-decoration:none;
}

.error{
  padding:12px;
  margin-bottom:12px;
  background:#38191d;
  border-radius:10px;
}

a{
  color:#bccbff;
}

.section,.notice,.details{
  margin-top:18px;
  padding:16px;
  background:#10131a;
  border:1px solid #292d37;
  border-radius:14px;
}

.details p{
  display:flex;
  justify-content:space-between;
  gap:20px;
}

.details span{
  color:#979daa;
}

.label{
  display:block;
  margin-top:16px;
  color:#979daa;
}

.plan,.payment-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-top:10px;
  padding:18px;
  background:#10131a;
  border:1px solid #292d37;
  border-radius:14px;
  color:#fff;
  text-decoration:none;
}

.plan:hover,.payment-row:hover{
  background:#191d26;
}

.back{
  display:block;
  margin-top:22px;
  text-decoration:none;
}

.secondary{
  background:#292d37;
  color:#fff;
}

.danger{
  background:#72232b;
  color:#fff;
}

.file{
  background:#10131a;
  padding:12px;
}

.status{
  font-weight:700;
}

.stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:20px 0;
}

.stats div{
  padding:18px;
  background:#10131a;
  border:1px solid #292d37;
  border-radius:14px;
}

.stats strong{
  display:block;
  font-size:28px;
}

.stats span{
  color:#979daa;
}

.wide{
  width:min(760px,calc(100% - 32px));
}

.compare{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:20px 0;
}

.compare>div{
  padding:18px;
  background:#10131a;
  border:1px solid #292d37;
  border-radius:14px;
}

.history{
  padding:12px 0;
  border-bottom:1px solid #292d37;
}

@media(max-width:600px){
  .compare{
    grid-template-columns:1fr;
  }

  .stats{
    grid-template-columns:1fr 1fr;
  }
}

.vpn-card{
  margin-top:20px;
  padding:20px;
  background:#10131a;
  border:1px solid #292d37;
  border-radius:18px;
}

.vpn-status{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.vpn-status h2{
  margin:4px 0 0;
}

.days-badge{
  padding:8px 12px;
  background:#242936;
  border-radius:999px;
  font-weight:700;
}

.vpn-info{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:18px 0;
}

.vpn-info div{
  padding:12px;
  background:#171a21;
  border-radius:12px;
}

.vpn-info span{
  display:block;
  margin-bottom:5px;
  color:#979daa;
  font-size:13px;
}

.sub-link label{
  display:block;
  margin-bottom:6px;
  color:#979daa;
}

.copy-row{
  display:flex;
  gap:8px;
}

.copy-row input{
  min-width:0;
  margin:0;
}

.copy-button{
  width:auto;
  margin:0;
  white-space:nowrap;
}

.qr-box{
  margin-top:16px;
}

.qr-box summary{
  cursor:pointer;
  font-weight:700;
}

.qr-wrap{
  margin-top:12px;
  text-align:center;
}

.qr-wrap img{
  width:min(260px,100%);
  background:white;
  padding:12px;
  border-radius:16px;
}

.mini-card{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:14px;
  padding:14px;
  background:#10131a;
  border-radius:12px;
}

.sale-row{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:12px 0;
  border-bottom:1px solid #292d37;
}

.sale-row:last-child{
  border-bottom:0;
}

.sale-price{
  font-weight:700;
  white-space:nowrap;
}

@media(max-width:600px){
  .vpn-info{
    grid-template-columns:1fr;
  }

  .copy-row{
    flex-direction:column;
  }

  .copy-button{
    width:100%;
  }
}