body{
margin:0;
font-family:Segoe UI,Roboto,sans-serif;
background:#f4f6fb;
}

/* layout */

.app-layout{
display:flex;
}

/* sidebar */

.sidebar{
width:260px;
height:100vh;
background:#0f172a;
color:white;
position:fixed;
left:0;
top:0;
transition:.3s;
z-index:1000;
}

/* nav */

.nav-list{
list-style:none;
padding:10px;
}

.nav-link-modern{
display:flex;
align-items:center;
gap:14px;
padding:12px 16px;
margin-bottom:6px;
border-radius:10px;
color:#cbd5f5;
text-decoration:none;
}

.nav-link-modern:hover{
background:#1e293b;
}

.nav-link-modern.active{
background:#2563eb;
color:white;
}

/* main */

.main-area{
margin-left:260px;
width:100%;
transition:.3s;
}

/* topbar */

.topbar{
height:65px;
background:white;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 20px;
box-shadow:0 2px 10px rgba(0,0,0,0.08);
}

.mobile-menu-btn{
display:none;
background:none;
border:none;
cursor:pointer;
}

/* right */

.topbar-right{
display:flex;
align-items:center;
gap:15px;
}

.user-profile{
display:flex;
align-items:center;
gap:8px;
}

.content{
padding:25px;
}

/* MOBILE */

@media(max-width:992px){

.main-area{
margin-left:0;
}

.mobile-menu-btn{
display:block;
}

.sidebar{
transform:translateX(-100%);
}

.sidebar.open{
transform:translateX(0);
}

}

/* TABLET */

@media(max-width:768px){

.top-title{
font-size:16px;
}

.username{
display:none;
}

}

/* SMALL PHONES */

@media(max-width:480px){

.content{
padding:15px;
}

.topbar{
padding:0 10px;
}

}

.login-link{
display:flex;
align-items:center;
gap:6px;
text-decoration:none;
color:#333;
font-weight:500;
padding:6px 10px;
border-radius:6px;
transition:.2s;
}

.login-link:hover{
background:#f0f2f5;
color:#1c7ed6;
}

/* DASHBOARD LAYOUT */

.dashboard-layout{
    display:flex;
}

/* SIDEBAR */

.sidebar{
    width:260px;
    height:100vh;
    background:linear-gradient(160deg,#0f172a,#020617);
    box-shadow:8px 0 25px rgba(0,0,0,.45);
    transition:transform .3s ease;
}

.sidebar.closed{
    transform:translateX(-100%);
}

/* MAIN CONTENT */

.main-content{
    flex:1;
    display:flex;
    flex-direction:column;
}

/* TOPBAR */

.topbar{
    height:60px;
    background:white;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 20px;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
}

/* MENU BUTTON */

.menu-btn{
    font-size:22px;
    border:none;
    background:none;
    cursor:pointer;
}

/* RIGHT SIDE */

.topbar-right{
    display:flex;
    align-items:center;
    gap:20px;
}

/* LOGIN BUTTON */

.login-btn{
    background:#2563eb;
    color:white;
    border:none;
    padding:8px 16px;
    border-radius:8px;
    cursor:pointer;
}

/* PAGE CONTENT */

.page-body{
    padding:30px;
    background:#f1f5f9;
    min-height:100vh;
}

.hero-section{
position:relative;
overflow:hidden;
}

.hero-section::before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:url('/images/CombineLogo.png') center 80px no-repeat;
background-size:550px;
opacity:0.08;
pointer-events:none;
}

.pricing-info {
    text-align: center;
    padding: 30px;
}

.price-highlight {
    font-size: 48px;
    font-weight: bold;
    color: red;
    margin-bottom: 10px;
}

.price-subtitle {
    font-size: 18px;
    margin-bottom: 20px;
}

.price-benefits {
    list-style: none;
    padding: 0;
    font-size: 18px;
    margin-bottom: 20px;
}

.price-benefits li {
    margin: 8px 0;
}

.price-note {
    font-size: 14px;
    color: #555;
}