/* TWZ PREMIUM UI V7 */
body:has(.twz-customer-app){
 background:#f3f6fc;
}
.twz-customer-app{
 max-width:620px;
 padding:12px 13px 32px;
}
.twz-app-head{
 margin-bottom:15px;
}
.twz-brand h2{
 font-size:15px;
 letter-spacing:-.25px;
}
.twz-brand-icon{
 border-radius:13px;
 box-shadow:0 5px 12px #1262ce15;
}
.twz-avatar{
 border:1px solid #e1eaf6;
 box-shadow:0 4px 12px #17385a0b;
}

/* Recharge heading */
.twz-recharge-hero{
 padding:14px 15px;
 border-radius:19px;
 margin:3px 0 12px;
 background:linear-gradient(120deg,#072f83,#075cda 65%,#1384f3);
 box-shadow:0 9px 20px #0758c42a;
}
.twz-recharge-hero h2{
 font-size:18px;
 margin:0 0 4px;
}
.twz-recharge-hero p{
 font-size:11px;
 line-height:1.45;
}
.twz-recharge-tags{
 gap:5px;
 margin-top:9px;
}
.twz-recharge-tags span{
 padding:5px 8px;
 font-size:10px;
}
.twz-recharge-hero:before{
 animation:twzFloat 8s ease-in-out infinite alternate;
}

/* Two packages per row */
.twz-pack-grid{
 display:grid!important;
 grid-template-columns:repeat(2,minmax(0,1fr))!important;
 gap:10px!important;
 align-items:stretch;
}
.twz-plan-premium{
 display:flex;
 flex-direction:column;
 min-width:0;
 padding:13px 11px 11px;
 border-radius:18px;
 border:1px solid #e1e9f5;
 box-shadow:0 5px 18px #173f7709;
 transition:transform .2s,box-shadow .2s;
 animation:twzEnter .4s ease both;
}
.twz-plan-premium:nth-child(2n){
 animation-delay:.07s;
}
.twz-plan-premium:active{
 transform:scale(.98);
}
.twz-plan-premium:before{
 height:3px;
 background:linear-gradient(90deg,#1152c9,#20c4f8);
}
.twz-plan-top{
 display:block;
 margin-bottom:11px;
 min-height:56px;
}
.twz-plan-title{
 font-size:14px;
 line-height:1.3;
 letter-spacing:-.3px;
 overflow-wrap:anywhere;
}
.twz-plan-sub{
 margin-top:4px;
 font-size:10px;
}
.twz-plan-top>.twz-pill{
 display:none;
}

/* Speed + duration compact */
.twz-meta{
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:6px;
 margin-bottom:9px;
}
.twz-meta-box{
 padding:10px 4px;
 border-radius:12px;
 background:#f0f6ff;
}
.twz-meta-box b{
 font-size:13px;
 margin-bottom:3px;
}
.twz-meta-box small{
 font-size:10px;
}
.twz-meta-box:last-child{
 display:none;
}
.twz-price-row{
 margin:auto 0 10px;
 padding-top:6px;
}
.twz-price-wrap small{
 font-size:10px;
 margin-bottom:5px;
}
.twz-big-price{
 font-size:26px;
 color:#075bd7;
 letter-spacing:-.5px;
}
.twz-feature-line{
 margin-bottom:10px;
 gap:5px;
}
.twz-feature-line span{
 padding:5px 6px;
 background:#eff6ff;
 font-size:9px;
}
.twz-plan-premium .twz-primary{
 font-size:12px;
 padding:12px 5px;
 border-radius:12px;
 min-height:43px;
 background:linear-gradient(110deg,#0549be,#096bee);
 box-shadow:0 3px 10px #135ddb23;
}

/* Payment summary */
.twz-back{
 font-size:12px;
 margin:2px 0 9px;
}
.twz-pay-sheet{
 padding:13px;
 border-radius:18px;
 margin-bottom:12px;
 box-shadow:0 7px 17px #0e5ccc1d;
}
.twz-pay-sheet h3{
 font-size:16px;
}
.twz-pay-sheet p{
 font-size:11px;
}
.twz-amount-box{
 margin-top:10px;
 gap:6px;
}
.twz-amount-box .box{
 padding:10px 5px;
 border-radius:11px;
}
.twz-amount-box .box strong{
 font-size:14px;
 overflow-wrap:anywhere;
}

/* Small payment methods */
.twz-form-shell{
 padding:13px;
 border-radius:18px;
}
.twz-form-shell h3{
 font-size:16px;
 margin-bottom:10px;
}
.twz-pay-grid{
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:8px;
 margin-bottom:11px;
}
.twz-pay-channel{
 padding:11px 8px;
 gap:7px;
 border-radius:14px;
 border:1px solid #dbe9fc;
 background:linear-gradient(160deg,#f9fbff,#eaf3ff);
 align-items:stretch;
}
.twz-pay-channel strong{
 font-size:13px;
}
.twz-pay-channel .num{
 display:block;
 font-size:12px;
 font-weight:900;
 color:#0055ca;
 padding:7px 4px;
 background:white;
 border-radius:9px;
 border:1px solid #d9e8ff;
 text-align:center;
 letter-spacing:.1px;
 overflow-wrap:anywhere;
 font-variant-numeric:tabular-nums;
}
.twz-pay-channel button{
 align-self:stretch;
 padding:9px;
 border-radius:10px;
 font-size:12px;
 background:#075fdc;
 box-shadow:0 3px 7px #0b55cb19;
}
.twz-pay-channel button:active,
.twz-primary:active{
 transform:scale(.97);
}

/* Short instructions and form */
.twz-step-list{
 padding:10px 12px;
 margin:9px 0;
 border-radius:12px;
}
.twz-step-list li{
 font-size:11px;
 line-height:1.45;
 margin-bottom:4px;
}
.twz-field{
 margin:10px 0;
}
.twz-field label{
 font-size:12px;
 margin-bottom:6px;
}
.twz-field input,
.twz-field select{
 min-height:45px;
 padding:11px 12px;
 font-size:16px;
 border-radius:12px;
}
.twz-proof-file{
 padding:10px;
}
.twz-or{
 margin:5px 0;
}
.twz-note{
 font-size:11px;
 padding:9px 11px;
}

/* Fixed bottom navigation */
.twz-nav{
 grid-template-columns:repeat(5,minmax(0,1fr));
 padding-top:7px;
 padding-bottom:calc(8px + env(safe-area-inset-bottom));
}
.twz-nav button{
 font-size:10px;
 border-radius:11px;
 gap:3px;
}
.twz-nav button span{
 font-size:19px;
}
.twz-nav button.active{
 background:#e9f2ff;
 color:#075bd7;
}
body:has(.twz-customer-app) main{
 padding-bottom:calc(95px + env(safe-area-inset-bottom));
}

/* Subtle animation */
@keyframes twzEnter{
 from{opacity:0;transform:translateY(10px)}
 to{opacity:1;transform:translateY(0)}
}
@keyframes twzFloat{
 from{transform:translate(0,0)}
 to{transform:translate(-22px,18px)}
}
@media(hover:hover){
 .twz-plan-premium:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 25px #173f7717;
 }
}
@media(max-width:370px){
 .twz-pack-grid{gap:7px!important}
 .twz-plan-premium{padding:11px 8px}
 .twz-plan-title{font-size:12px}
 .twz-meta-box b{font-size:12px}
 .twz-big-price{font-size:22px}
 .twz-pay-channel .num{font-size:11px}
 .twz-plan-premium .twz-primary{font-size:11px}
}
@media(prefers-reduced-motion:reduce){
 .twz-plan-premium,
 .twz-recharge-hero:before{
  animation:none!important;
  transition:none!important;
 }
}