/* =========================
GLOBAL RESET
========================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:system-ui,-apple-system,Segoe UI;
}



/* =========================
BODY
========================= */

body{

background:
radial-gradient(circle at 20% 20%, #0b001a, #000000 70%);

color:white;

line-height:1.5;

}



/* =========================
LAYOUT
========================= */

.main{

margin-left:260px;

padding:40px;

min-height:100vh;

}



/* =========================
SIDEBAR
========================= */

.sidebar{

position:fixed;

width:260px;

height:100%;

background:

linear-gradient(
180deg,
rgba(124,58,237,.35),
rgba(10,0,20,.85)
);

backdrop-filter:blur(20px);

border-right:1px solid rgba(160,120,255,.15);

padding:30px;

}


.sidebar a{

display:block;

color:white;

text-decoration:none;

padding:14px;

margin-bottom:10px;

border-radius:12px;

transition:.25s;

}


.sidebar a:hover{

background:

linear-gradient(
90deg,
rgba(124,58,237,.4),
rgba(60,0,140,.25)
);

transform:translateX(6px);

}



/* =========================
GLOBAL BUTTON SYSTEM
========================= */

button,
input[type="submit"],
input[type="button"]{

background:

linear-gradient(90deg,#7c3aed,#9333ea);

color:white;

border:none;

padding:14px 26px;

border-radius:12px;

font-size:15px;

font-weight:600;

cursor:pointer;

transition:.25s;

}


button:hover{

transform:translateY(-2px);

box-shadow:

0 10px 25px rgba(147,51,234,.45);

}



/* BUTTON TYPES */

.btn-edit{

background:

linear-gradient(90deg,#6366f1,#8b5cf6);

}


.btn-delete{

background:

linear-gradient(90deg,#ef4444,#b91c1c);

}



/* =========================
INPUT SYSTEM
========================= */

form{

display:block;

width:100%;

}


label{

display:block;

margin-top:12px;

margin-bottom:6px;

font-weight:500;

}


input,
select,
textarea{

display:block;

width:100%;

background:rgba(140,80,255,.08);

color:white;

border:1px solid rgba(160,120,255,.18);

padding:14px;

border-radius:12px;

margin-bottom:14px;

outline:none;

backdrop-filter:blur(10px);

}


input::placeholder{

color:#ffffff80;

}



/* =========================
CARD SYSTEM
========================= */

.card{

background:

rgba(140,80,255,.08);

padding:28px;

border-radius:22px;

margin-bottom:25px;

backdrop-filter:blur(18px);

border:1px solid rgba(160,120,255,.12);

box-shadow:

0 12px 40px rgba(120,0,255,.25);

}



/* =========================
DASHBOARD STATS CARD SYSTEM
========================= */

.dashboard-stats{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(220px,1fr));

gap:22px;

margin-top:20px;

}


.stat-card{

background:

rgba(140,80,255,.08);

padding:28px;

border-radius:22px;

backdrop-filter:blur(20px);

border:1px solid rgba(160,120,255,.12);

box-shadow:

0 12px 45px rgba(120,0,255,.25);

transition:.25s;

}


.stat-card strong{

display:block;

margin-top:8px;

font-size:28px;

color:#d8b4fe;

}


.stat-card:hover{

transform:translateY(-6px);

background:

rgba(140,80,255,.18);

}



/* =========================
STEP PROGRESS BAR
========================= */

.step-wrapper{

display:flex;

align-items:center;

justify-content:center;

gap:10px;

margin-bottom:30px;

}


.step-item{

width:44px;

height:44px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:#ffffff15;

font-weight:600;

transition:.25s;

}


.step-item.active{

background:#7c3aed;

}


.step-line{

width:60px;

height:4px;

background:#ffffff15;

}



/* =========================
SERVICE GRID
========================= */

.service-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(260px,1fr));

gap:28px;

margin-top:20px;

}



/* SERVICE CARD */

.service-card-pro{

background:

rgba(140,80,255,.08);

padding:30px;

border-radius:24px;

text-align:center;

transition:.35s;

cursor:pointer;

backdrop-filter:blur(18px);

border:1px solid rgba(160,120,255,.12);

}


.service-card-pro:hover{

transform:translateY(-8px);

background:

rgba(140,80,255,.2);

}



/* =========================
PLAN SELECTION
========================= */

.plan-card-inner{

background:

rgba(140,80,255,.08);

padding:30px;

border-radius:22px;

border:2px solid transparent;

transition:.3s;

}


.plan-card-select input:checked + .plan-card-inner{

border:2px solid #7c3aed;

background:

rgba(140,80,255,.18);

box-shadow:

0 0 0 2px rgba(124,58,237,.3);

}


.plan-price{

font-size:24px;

font-weight:700;

color:#d8b4fe;

}



/* =========================
PAYMENT PANEL
========================= */

.payment-info{

background:

rgba(140,80,255,.08);

padding:24px;

border-radius:18px;

margin-top:20px;

margin-bottom:25px;

line-height:1.8;

}



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

table{

width:100%;

border-collapse:collapse;

}


table tr{

border-bottom:

1px solid rgba(255,255,255,.1);

}


table td{

padding:14px;

}



/* =========================
MOBILE NAVIGATION
========================= */

.mobile-nav{

position:fixed;

bottom:0;

width:100%;

background:

linear-gradient(
90deg,
rgba(124,58,237,.6),
rgba(10,0,20,.9)
);

display:none;

justify-content:space-around;

padding:12px 0;

z-index:999;

backdrop-filter:blur(18px);

}


.mobile-nav a{

color:white;

text-decoration:none;

font-size:13px;

text-align:center;

}



/* =========================
RESPONSIVE FIXES
========================= */

@media(max-width:900px){

.sidebar{

display:none;

}

.main{

margin-left:0;

padding:20px;

padding-bottom:80px;

}

.service-grid{

grid-template-columns:1fr;

}

.plan-grid{

grid-template-columns:1fr;

}

.mobile-nav{

display:flex;

}

}