*{
 box-sizing:border-box
}

body{
 margin:0;
 min-height:100vh;
 font-family:Tahoma,Arial;
 background:
 radial-gradient(circle at top,#123b7a,#06142e 55%,#020817);
 color:white;
}

.layout{
 max-width:520px;
 margin:auto;
 padding:20px;
}

aside{
 text-align:center;
 margin-bottom:20px;
}

aside h2{
 font-size:34px;
 margin:10px 0 0;
 letter-spacing:2px;
}

aside p{
 color:#9bb8df;
 margin:5px;
}

aside a{
 display:none;
}

.topbar{
 background:rgba(255,255,255,.08);
 border:1px solid rgba(255,255,255,.12);
 border-radius:20px;
 padding:15px 20px;
 display:flex;
 justify-content:space-between;
 align-items:center;
 margin-bottom:20px;
}

.topbar h1{
 font-size:20px;
 margin:0;
}

.topbar p{
 display:none;
}

.badge{
 padding:8px 18px;
 border-radius:30px;
 font-weight:bold;
}

.online{
 background:#16c784;
}

.offline{
 background:#64748b;
}

.grid{
 display:block;
}

.card{
 display:none;
}

/* Main profile card */
.plan-card{
 border-radius:28px;
 padding:28px;
 min-height:650px;
 overflow:hidden;
 position:relative;
 box-shadow:0 25px 70px rgba(0,0,0,.45);
}

.plan-card:after{
 content:"";
 position:absolute;
 width:300px;
 height:300px;
 border-radius:50%;
 background:rgba(255,255,255,.10);
 left:-90px;
 bottom:-80px;
}

.plan-icon{
 font-size:60px;
 text-align:center;
}

.plan-card h2{
 text-align:center;
 font-size:36px;
 letter-spacing:3px;
}

.speed{
 text-align:center;
 font-size:52px;
 font-weight:900;
 direction:ltr;
}

.price{
 text-align:center;
 color:#ffd43b;
 font-size:32px;
 font-weight:bold;
 margin-bottom:30px;
 direction:ltr;
}

.plan-card small{
 display:block;
 text-align:center;
 margin-bottom:25px;
}

.info-row{
 display:flex;
 justify-content:space-between;
 border-bottom:1px solid rgba(255,255,255,.12);
 padding:14px 0;
 font-size:16px;
}

/* Package colors */
.light{
 background:linear-gradient(150deg,#0f8a45,#052e22);
}

.economy{
 background:linear-gradient(150deg,#006eff,#001c55);
}

.standard{
 background:linear-gradient(150deg,#8b5cf6,#2e1065);
}

.turbo{
 background:linear-gradient(150deg,#ff8c00,#7c2d12);
}

.games{
 background:linear-gradient(150deg,#ef233c,#5f0f1b);
}

.pro{
 background:linear-gradient(150deg,#111827,#b8860b);
}

.default{
 background:#0f172a;
}

@media(max-width:600px){
 .layout{
  padding:14px;
 }

 .plan-card{
  min-height:auto;
 }

 .speed{
  font-size:46px;
 }
}

/* ===== LOGIN PAGE ===== */

.login-body{
 min-height:100vh;
 display:flex;
 align-items:center;
 justify-content:center;
 padding:20px;
 background:
 radial-gradient(circle at top,#1e6bff,#071b3a 55%,#020817);
}

.login-box{
 width:100%;
 max-width:420px;
 padding:35px;
 border-radius:32px;
 background:rgba(255,255,255,.12);
 border:1px solid rgba(255,255,255,.18);
 backdrop-filter:blur(20px);
 box-shadow:0 25px 70px rgba(0,0,0,.45);
 text-align:center;
 color:white;
}

.login-box h1{
 margin:0;
 font-size:38px;
 font-weight:900;
 letter-spacing:2px;
}

.login-box p{
 margin:10px 0 30px;
 color:#b8d3ff;
}

.login-box input{
 width:100%;
 height:55px;
 margin-bottom:15px;
 padding:0 18px;
 border-radius:18px;
 border:1px solid rgba(255,255,255,.20);
 outline:none;
 background:rgba(255,255,255,.12);
 color:white;
 font-size:16px;
 text-align:center;
}

.login-box input::placeholder{
 color:#cbdcff;
}

.login-box button{
 width:100%;
 height:55px;
 border:0;
 border-radius:18px;
 background:linear-gradient(135deg,#00c6ff,#006eff);
 color:white;
 font-size:18px;
 font-weight:bold;
 cursor:pointer;
 box-shadow:0 12px 30px rgba(0,110,255,.35);
}

.login-box button:hover{
 opacity:.9;
}

.alert{
 background:rgba(239,68,68,.20);
 border:1px solid rgba(239,68,68,.4);
 color:white;
 padding:12px;
 border-radius:15px;
 margin-bottom:15px;
}


.login-logo{
 max-width:190px;
 max-height:90px;
 object-fit:contain;
 margin-bottom:12px;
 filter:drop-shadow(0 8px 18px rgba(0,0,0,.25));
}


.login-body{
 min-height:100vh;
 display:flex;
 align-items:center;
 justify-content:center;
 padding:20px;
 background:
 radial-gradient(circle at top,#0b57d0,#06142e 55%,#020817);
 color:white;
}

.login-card{
 width:100%;
 max-width:460px;
 padding:38px 34px;
 border-radius:34px;
 background:rgba(3,18,45,.78);
 border:1px solid rgba(80,170,255,.45);
 box-shadow:0 0 45px rgba(0,150,255,.25),0 30px 80px rgba(0,0,0,.45);
 text-align:center;
 backdrop-filter:blur(18px);
}

.login-logo{
 max-width:210px;
 max-height:115px;
 object-fit:contain;
 margin-bottom:12px;
 filter:drop-shadow(0 10px 25px rgba(0,180,255,.25));
}

.login-card h1{
 margin:0;
 font-size:36px;
 letter-spacing:2px;
 font-weight:900;
}

.login-card h2{
 margin:10px 0 4px;
 font-size:24px;
}

.login-card p{
 margin:0 0 25px;
 color:#a9c7f5;
}

.input-wrap{
 height:56px;
 display:flex;
 align-items:center;
 gap:12px;
 border:1px solid rgba(120,190,255,.35);
 border-radius:17px;
 background:rgba(255,255,255,.06);
 padding:0 15px;
 margin-bottom:14px;
}

.input-wrap input{
 flex:1;
 height:100%;
 border:0;
 outline:0;
 background:transparent;
 color:white;
 font-size:16px;
 text-align:right;
}

.input-wrap input::placeholder{
 color:#b8c8df;
}

.login-card button{
 width:100%;
 height:56px;
 border:0;
 border-radius:17px;
 background:linear-gradient(135deg,#12c8ff,#006eff);
 color:white;
 font-size:19px;
 font-weight:800;
 cursor:pointer;
 box-shadow:0 12px 30px rgba(0,120,255,.35);
}

.login-help{
 margin:25px 0 15px;
 color:#b8c8df;
 font-size:14px;
}

.login-footer{
 border-top:1px solid rgba(255,255,255,.12);
 padding-top:15px;
 color:#8ea8cf;
 font-size:13px;
}

.alert{
 background:rgba(239,68,68,.22);
 border:1px solid rgba(239,68,68,.55);
 color:white;
 padding:12px;
 border-radius:14px;
 margin-bottom:15px;
}

@media(max-width:600px){
 .login-card{padding:30px 22px;border-radius:28px}
 .login-card h1{font-size:30px}
 .login-logo{max-width:180px}
}


/* ===== FINAL USER PORTAL LOGIN ===== */
.login-body{
 min-height:100vh;
 display:flex;
 align-items:center;
 justify-content:center;
 padding:24px;
 background:
 radial-gradient(circle at center top,#0b4fc1 0%,#061b46 45%,#020817 100%);
 color:white;
 overflow:auto;
}

.login-body:before{
 content:"";
 position:fixed;
 inset:0;
 background:
  radial-gradient(circle at 20% 80%,rgba(0,180,255,.18),transparent 30%),
  radial-gradient(circle at 80% 80%,rgba(0,120,255,.16),transparent 32%);
 pointer-events:none;
}

.login-card{
 width:100%;
 max-width:480px;
 padding:42px 36px 28px;
 border-radius:34px;
 background:linear-gradient(180deg,rgba(5,24,58,.92),rgba(1,12,33,.94));
 border:1px solid rgba(118,190,255,.42);
 box-shadow:
 0 0 0 1px rgba(255,255,255,.04) inset,
 0 0 45px rgba(0,140,255,.25),
 0 35px 90px rgba(0,0,0,.48);
 text-align:center;
 position:relative;
 z-index:2;
}

.login-logo{
 max-width:260px;
 max-height:145px;
 object-fit:contain;
 margin-bottom:18px;
 filter:drop-shadow(0 12px 28px rgba(0,170,255,.22));
}

.login-user-icon{
 width:58px;
 height:58px;
 margin:0 auto 15px;
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 border:1px solid rgba(0,150,255,.55);
 box-shadow:0 0 22px rgba(0,140,255,.30);
 font-size:25px;
}

.login-card h2{
 margin:0;
 font-size:26px;
 font-weight:800;
}

.login-card p{
 margin:8px 0 24px;
 color:#9fb7dc;
}

.input-wrap{
 height:58px;
 display:flex;
 align-items:center;
 gap:13px;
 border:1px solid rgba(135,190,255,.32);
 border-radius:16px;
 background:rgba(255,255,255,.045);
 padding:0 16px;
 margin-bottom:14px;
}

.input-wrap span{
 opacity:.9;
 font-size:20px;
}

.input-wrap input{
 flex:1;
 height:100%;
 border:0;
 outline:0;
 background:transparent;
 color:white;
 font-size:16px;
 text-align:right;
}

.input-wrap input::placeholder{
 color:#aebed4;
}

.login-card button{
 width:100%;
 height:58px;
 border:0;
 border-radius:16px;
 margin-top:8px;
 background:linear-gradient(135deg,#14c8ff,#005fff);
 color:white;
 font-size:19px;
 font-weight:900;
 cursor:pointer;
 box-shadow:0 14px 34px rgba(0,110,255,.35);
}

.login-sep{
 display:flex;
 align-items:center;
 gap:15px;
 margin:23px 0 18px;
 color:#b8c6da;
}

.login-sep:before,
.login-sep:after{
 content:"";
 flex:1;
 height:1px;
 background:rgba(255,255,255,.16);
}

.login-help{
 color:#c4d3e8;
 font-size:14px;
 margin-bottom:17px;
}

.login-secure{
 border-top:1px solid rgba(255,255,255,.12);
 padding-top:16px;
 color:#b9c9df;
 font-size:14px;
}

.login-footer{
 color:#8fa6c5;
 font-size:13px;
 margin-top:10px;
}

.alert{
 background:rgba(239,68,68,.22);
 border:1px solid rgba(239,68,68,.50);
 color:white;
 padding:12px;
 border-radius:14px;
 margin-bottom:16px;
}

@media(max-width:600px){
 .login-body{padding:16px}
 .login-card{padding:32px 22px 24px;border-radius:28px}
 .login-logo{max-width:215px}
 .login-card h2{font-size:23px}
}


/* MAS final logo tuning */

.login-logo{
 max-width:330px !important;
 max-height:180px !important;
 margin-bottom:25px;
 filter:
 drop-shadow(0 0 18px rgba(0,180,255,.55))
 drop-shadow(0 10px 35px rgba(0,0,0,.45));
}

.login-card{
 background:
 linear-gradient(180deg,
 rgba(2,20,55,.96),
 rgba(0,8,28,.98)
 );
}

.login-body{
 background:
 radial-gradient(circle at top,#006bff 0%,#06235b 35%,#010817 100%) !important;
}

.login-footer{
 margin-top:25px;
}


/* Final MAS Logo */
.login-logo{
 width:260px !important;
 max-width:80%;
 height:auto !important;
 margin-bottom:45px !important;
 opacity:1 !important;
 filter:
 drop-shadow(0 0 20px rgba(0,200,255,.45))
 drop-shadow(0 8px 25px rgba(0,0,0,.7));
}

.login-card{
 padding-top:55px !important;
}