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

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:Arial, Helvetica, sans-serif;
background:#0f172a;
color:#e5e7eb;
line-height:1.6;
}

/* ======================
CONTAINER
====================== */

.container{
max-width:1200px;
margin:auto;
padding:0 20px;
}

/* ======================
HEADER (56rfb style)
====================== */

.header{
background:#020617;
border-bottom:1px solid #1e293b;
position:sticky;
top:0;
z-index:9999;
}

.header-container{
display:flex;
align-items:center;
justify-content:space-between;
height:72px;
}

/* LOGO */

.logo{
display:flex;
align-items:center;
}

.logo img{
height:48px;
width:auto;
object-fit:contain;
}

/* HEADER BUTTONS */

.header-actions{
display:flex;
gap:12px;
}

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

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 18px;
border-radius:6px;
font-size:14px;
text-decoration:none;
transition:.25s;
}

.btn-primary{
background:#22c55e;
color:#fff;
}

.btn-primary:hover{
background:#16a34a;
}

.btn-outline{
border:1px solid #22c55e;
color:#22c55e;
}

.btn-outline:hover{
background:#22c55e;
color:#fff;
}

.btn-secondary{
background:#6366f1;
color:white;
}

.btn-large{
padding:14px 30px;
font-size:16px;
}

/* ======================
HAMBURGER MENU
====================== */

/* ======================
HAMBURGER MENU
====================== */

.hamburger-menu{
position:relative;
}

/* 中间导航按钮 */

.hamburger-btn{
min-width:300px;          /* 最小宽度 */
padding:10px 60px;        /* 控制左右空间 */
height:44px;
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
background:#1e293b;
border:none;
border-radius:24px;
cursor:pointer;
color:#ffffff;
font-size:15px;
font-weight:500;
transition:0.3s;
}

/* hover效果 */

.hamburger-btn:hover{
background:#22c55e;
}

/* 左右线条 */

.hamburger-btn span:first-child,
.hamburger-btn span:last-child{
position:absolute;
width:18px;
height:2px;
background:#ffffff;
top:50%;
transform:translateY(-50%);
}

.hamburger-btn span:first-child{
left:20px;
}

.hamburger-btn span:last-child{
right:20px;
}

/* 中间文字 */

.hamburger-btn span:nth-child(2){
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
background:none;
height:auto;
font-size:15px;
white-space:nowrap;   /* 防止换行 */
}

/* ======================
MOBILE CENTER FIX
====================== */

@media(max-width:900px){

.header-container{
display:flex;
justify-content:space-between;
align-items:center;
}

/* 让菜单区域占满并居中 */

.hamburger-menu{
flex:1;
display:flex;
justify-content:center;
}

/* 按钮自适应 */

.hamburger-btn{
min-width:220px;
padding:8px 40px;
height:40px;
font-size:14px;
}

}

/* DROPDOWN */

.hamburger-dropdown{
position:absolute;
top:60px;
left:0;
width:300px;
background:#020617;
border:1px solid #1e293b;
border-radius:10px;
padding:20px;
display:none;
z-index:999;
}

.hamburger-dropdown.show{
display:block;
}

.menu-category{
margin-bottom:20px;
}

.menu-category-title{
font-weight:bold;
font-size:15px;
margin-bottom:10px;
color:#22c55e;
}

.menu-item{
display:block;
padding:6px 0;
color:#cbd5f5;
text-decoration:none;
font-size:14px;
}

.menu-item:hover{
color:#fff;
}

/* ======================
HERO
====================== */

.hero{
padding:80px 0;
background:linear-gradient(135deg,#020617,#0f172a);
}

.hero-content{
display:flex;
align-items:center;
justify-content:space-between;
gap:40px;
}

.hero-text{
flex:1;
}

.hero-text h1{
font-size:36px;
margin-bottom:20px;
color:#fff;
}

.hero-text p{
color:#cbd5f5;
font-size:16px;
}

.hero-image img{
max-width:100%;
}

/* ======================
SECTION
====================== */

.section{
padding:60px 0;
}

.section-header{
text-align:center;
margin-bottom:40px;
}

.section-title{
font-size:30px;
margin-bottom:10px;
}

.section-subtitle{
color:#94a3b8;
}

/* ======================
BANNER
====================== */

.banner{
background:#1e293b;
padding:14px;
border-radius:8px;
margin:30px 0;
text-align:center;
}

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

.grid{
display:grid;
gap:24px;
}

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

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

.card{
background:#020617;
border:1px solid #1e293b;
border-radius:12px;
padding:24px;
transition:.3s;
}

.card:hover{
transform:translateY(-5px);
border-color:#22c55e;
}

.card-header{
display:flex;
align-items:center;
gap:12px;
margin-bottom:10px;
}

.card-title{
font-size:18px;
color:#fff;
}

.card-subtitle{
font-size:13px;
color:#94a3b8;
}

.card-status{
width:10px;
height:10px;
background:#22c55e;
border-radius:50%;
}

.card-actions{
display:flex;
gap:10px;
margin-top:14px;
}

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

.h-layout{
display:flex;
gap:40px;
}

.h-column{
flex:1;
display:flex;
flex-direction:column;
gap:24px;
}

.h-divider{
width:120px;
display:flex;
flex-direction:column;
align-items:center;
}

.divider-line{
width:2px;
height:90px;
background:#1e293b;
}

.divider-content{
margin:10px 0;
text-align:center;
}


/* ======================
NAVIGATION FIX
====================== */

/* ====================== NAVIGATION ====================== */ 
.navigation{ 
    text-align:center; 
} 

.nav-content{ 
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px; 
} 

.nav-chip{
    background:#1e293b;
    padding:8px 16px;
    border-radius:20px;
    }


/* ======================
FOOTER
====================== */

.footer{
background:#020617;
border-top:1px solid #1e293b;
padding:40px 0;
text-align:center;
}

.footer-text{
color:#64748b;
}

/* ======================
BOTTOM NAV
====================== */

.bottom-nav{
position:fixed;
bottom:0;
left:0;
right:0;
background:#020617;
border-top:1px solid #1e293b;
padding:10px 0;
z-index:999;
}

.bottom-nav-content{
display:flex;
justify-content:space-between;
align-items:center;
}

/* ======================
UTIL
====================== */

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

.d-flex{
display:flex;
}

.justify-center{
justify-content:center;
}

.gap-2{
gap:12px;
}

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

@media(max-width:900px){

.hero-content{
flex-direction:column;
text-align:center;
}

.grid-2{
grid-template-columns:1fr;
}

.h-layout{
flex-direction:column;
}

.h-divider{
display:none;
}

.header-actions{
display:none;
}

.hamburger-dropdown{
left:auto;
right:0;
}

/* ======================
FORCE NAV BUTTON FIX
====================== */

.hamburger-menu{
display:flex !important;
justify-content:center !important;
}

.hamburger-btn{
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;

min-width:320px !important;
padding:10px 40px !important;
height:44px !important;

background:#1e293b !important;
border-radius:24px !important;
color:#ffffff !important;
font-size:15px !important;
font-weight:500 !important;
}

/* 线条 */

.hamburger-btn span:first-child,
.hamburger-btn span:last-child{
width:18px !important;
height:2px !important;
background:#ffffff !important;
display:block !important;
}








/* 文字 */

.hamburger-btn span:nth-child(2){
white-space:nowrap !important;
}

/* ======================
MOBILE FIX
====================== */

@media(max-width:900px){

.hamburger-btn{
min-width:200px !important;
padding:8px 24px !important;
height:40px !important;
font-size:14px !important;
}

}

}