*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Poppins",sans-serif;
}

body{
background:#f4f6f9;
color:#222;
display:flex;
min-height:100vh;
overflow-x:hidden;
}

.sidebar{
position:fixed;
left:0;
top:0;
width:260px;
height:100%;
background:#0f172a;
color:#fff;
padding:20px;
overflow-y:auto;
}

.logo{
text-align:center;
padding-bottom:20px;
border-bottom:1px solid rgba(255,255,255,.1);
margin-bottom:20px;
}

.logo h2{
font-size:28px;
font-weight:700;
}

.logo p{
font-size:14px;
opacity:.8;
margin-top:5px;
}

.sidebar ul{
list-style:none;
}

.sidebar li{
display:flex;
align-items:center;
gap:12px;
padding:14px;
margin-bottom:8px;
border-radius:10px;
cursor:pointer;
transition:.3s;
}

.sidebar li:hover{
background:#1e293b;
}

.sidebar li.active{
background:#16a34a;
}

.sidebar li i{
font-size:18px;
width:20px;
text-align:center;
}

.main-content{
margin-left:260px;
width:calc(100% - 260px);
padding:25px;
}

.topbar{
display:flex;
justify-content:space-between;
align-items:center;
background:#fff;
padding:18px 22px;
border-radius:15px;
box-shadow:0 4px 12px rgba(0,0,0,.08);
margin-bottom:25px;
}

#menuBtn{
display:none;
background:none;
border:none;
font-size:22px;
cursor:pointer;
}

.user-box{
font-weight:600;
color:#16a34a;
}

.page{
display:none;
}

.page.active{
display:block;
}

.page-title{
font-size:28px;
font-weight:700;
margin-bottom:20px;
}

.stats-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
}

.stat-card{
background:#fff;
padding:22px;
border-radius:16px;
box-shadow:0 5px 15px rgba(0,0,0,.08);
transition:.3s;
}

.stat-card:hover{
transform:translateY(-5px);
}

.stat-card h3{
font-size:15px;
color:#666;
margin-bottom:8px;
}

.stat-card h1{
font-size:30px;
color:#16a34a;
}
/* ===================================
REFERRAL CARD
=================================== */

.affiliate-card{
background:#fff;
padding:25px;
border-radius:18px;
margin-top:25px;
box-shadow:0 5px 15px rgba(0,0,0,.08);
}

.affiliate-card h3{
margin-bottom:15px;
font-size:22px;
}

.referral-box{
display:flex;
gap:12px;
margin-bottom:12px;
}

.referral-box input{
flex:1;
padding:14px;
border:1px solid #ddd;
border-radius:10px;
font-size:14px;
outline:none;
}

.referral-note{
font-size:14px;
color:#666;
line-height:1.6;
}

/* ===================================
BUTTONS
=================================== */

.primary-btn,
.referral-box button,
.quick-actions button{

background:#16a34a;
color:#fff;
border:none;
padding:13px 20px;
border-radius:10px;
cursor:pointer;
font-size:14px;
font-weight:600;
transition:.3s;

}

.primary-btn:hover,
.referral-box button:hover,
.quick-actions button:hover{

background:#15803d;

}

/* ===================================
QUICK ACTIONS
=================================== */

.quick-actions{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:15px;
margin-top:25px;

}

.quick-actions button{

display:flex;
justify-content:center;
align-items:center;
gap:10px;

}

/* ===================================
TABLE
=================================== */

table{

width:100%;
border-collapse:collapse;
background:#fff;
margin-top:20px;
border-radius:15px;
overflow:hidden;
box-shadow:0 5px 15px rgba(0,0,0,.08);

}

thead{

background:#0f172a;
color:#fff;

}

th{

padding:16px;
text-align:left;
font-size:14px;

}

td{

padding:15px;
border-bottom:1px solid #eee;
font-size:14px;

}

tbody tr:hover{

background:#f9fafb;

}

/* ===================================
WITHDRAW CARD
=================================== */

.withdraw-card{

background:#fff;
padding:25px;
border-radius:18px;
box-shadow:0 5px 15px rgba(0,0,0,.08);
margin-bottom:25px;

}

.form-group{

display:flex;
flex-direction:column;
margin-bottom:18px;

}

.form-group label{

font-weight:600;
margin-bottom:8px;

}

.form-group input{

padding:13px;
border:1px solid #ddd;
border-radius:10px;
font-size:14px;
outline:none;

}

.form-group input:focus{

border-color:#16a34a;
box-shadow:0 0 0 3px rgba(22,163,74,.15);

}

/* ===================================
PROFILE
=================================== */

.profile-card{

background:#fff;
padding:25px;
border-radius:18px;
box-shadow:0 5px 15px rgba(0,0,0,.08);

}
/* ===================================
LOADER
=================================== */

.loader{
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(255,255,255,.9);
display:none;
justify-content:center;
align-items:center;
flex-direction:column;
z-index:9999;
}

.loader.active{
display:flex;
}

.spinner{
width:60px;
height:60px;
border:6px solid #ddd;
border-top:6px solid #16a34a;
border-radius:50%;
animation:spin 1s linear infinite;
margin-bottom:15px;
}

/* ===================================
TOAST
=================================== */

.toast{
position:fixed;
bottom:25px;
right:25px;
background:#16a34a;
color:#fff;
padding:14px 22px;
border-radius:10px;
font-size:15px;
font-weight:600;
box-shadow:0 5px 15px rgba(0,0,0,.15);
transform:translateY(120px);
opacity:0;
transition:.35s;
z-index:99999;
}

.toast.show{
transform:translateY(0);
opacity:1;
}

/* ===================================
ANIMATIONS
=================================== */

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

@keyframes fadeIn{

from{

opacity:0;

}

to{

opacity:1;

}

}

.page{

animation:fadeIn .25s ease;

}

/* ===================================
SCROLLBAR
=================================== */

::-webkit-scrollbar{

width:8px;
height:8px;

}

::-webkit-scrollbar-thumb{

background:#16a34a;
border-radius:20px;

}

::-webkit-scrollbar-track{

background:#ececec;

}

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

@media(max-width:991px){

.sidebar{

left:-270px;
transition:.3s;
z-index:999;

}

.sidebar.show{

left:0;

}

.main-content{

margin-left:0;
width:100%;

}

#menuBtn{

display:block;

}

.topbar{

padding:15px;

}

.stats-grid{

grid-template-columns:repeat(2,1fr);

}

.quick-actions{

grid-template-columns:repeat(2,1fr);

}

.referral-box{

flex-direction:column;

}

table{

display:block;
overflow-x:auto;

}

}

@media(max-width:768px){

.stats-grid{

grid-template-columns:1fr;

}

.quick-actions{

grid-template-columns:1fr;

}

.page-title{

font-size:22px;

}

.topbar h2{

font-size:18px;

}

.primary-btn{

width:100%;

}

.toast{

left:15px;
right:15px;
bottom:15px;
text-align:center;

}

}

@media(max-width:480px){

.logo h2{

font-size:22px;

}

.logo p{

font-size:12px;

}

.stat-card{

text-align:center;

}

.stat-card h1{

font-size:24px;

}

.form-group input{

font-size:13px;

}

th,
td{

font-size:12px;
padding:10px;

}

}

/* ===================================
UTILITY
=================================== */

.hidden{
display:none!important;
}

.text-center{
text-align:center;
}

.mt-20{
margin-top:20px;
}

.mb-20{
margin-bottom:20px;
}

.w-100{
width:100%;
}
/* ===================================
REGISTER PAGE
=================================== */

.register-container{

width:100%;
max-width:700px;
margin:40px auto;

}

.register-box{

background:#fff;
padding:35px;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.register-box h3{

font-size:30px;
text-align:center;
margin-bottom:10px;
color:#222;

}

.subtitle{

text-align:center;
color:#666;
font-size:14px;
line-height:1.7;
margin-bottom:30px;

}

.form-row{

display:grid;
grid-template-columns:1fr 1fr;
gap:18px;

}

.form-group textarea,
.form-group select{

padding:13px;
border:1px solid #ddd;
border-radius:10px;
font-size:14px;
outline:none;
transition:.3s;

}

.form-group textarea{

resize:vertical;
min-height:100px;

}

.form-group textarea:focus,
.form-group select:focus{

border-color:#16a34a;
box-shadow:0 0 0 3px rgba(22,163,74,.15);

}

.terms-box{

margin:20px 0;

}

.terms-box label{

display:flex;
align-items:flex-start;
gap:10px;
cursor:pointer;
font-size:14px;
line-height:1.6;
color:#555;

}

.terms-box input{

margin-top:4px;

}
/* ===================================
REGISTER BUTTON
=================================== */

#createAffiliateBtn{

width:100%;
margin-top:10px;
font-size:16px;
padding:15px;
display:flex;
justify-content:center;
align-items:center;
gap:10px;

}

#createAffiliateBtn i{

font-size:18px;

}

/* ===================================
FORM MESSAGE
=================================== */

.form-message{

margin-top:18px;
text-align:center;
font-size:14px;
font-weight:600;
min-height:22px;

}

.form-message.success{

color:#16a34a;

}

.form-message.error{

color:#dc2626;

}

/* ===================================
LOGIN LINK
=================================== */

.login-link{

margin-top:25px;
text-align:center;
font-size:15px;
color:#555;

}

.login-link a{

color:#16a34a;
font-weight:600;
text-decoration:none;
transition:.3s;

}

.login-link a:hover{

text-decoration:underline;

}

/* ===================================
REGISTER PAGE MOBILE
=================================== */

@media(max-width:768px){

.register-container{

padding:15px;

}

.register-box{

padding:25px;

}

.register-box h3{

font-size:24px;

}

.form-row{

grid-template-columns:1fr;

}

.subtitle{

font-size:13px;

}

.login-link{

font-size:14px;

}

}

@media(max-width:480px){

.register-box{

padding:20px;

}

.register-box h3{

font-size:22px;

}

.terms-box label{

font-size:13px;

}

#createAffiliateBtn{

font-size:15px;

}

}
/* Password Wrapper & Toggle Eye Icon */
.password-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.password-wrapper input {
  width: 100%;
  padding-right: 40px !important;
}

.password-wrapper .toggle-password {
  position: absolute;
  right: 12px;
  cursor: pointer;
  color: #666;
  font-size: 16px;
  user-select: none;
  z-index: 10;
  transition: color 0.2s ease;
}

.password-wrapper .toggle-password:hover {
  color: #0057d8;
}