/* ============ 共享头部样式 ============ */
@font-face{
	font-family:'Nucleo'; font-style:normal; font-weight:700; font-display:swap;
	src:url(../fonts/Nucleo.ttf) format('truetype');
}
@font-face{
	font-family:'Disorient'; font-style:normal; font-weight:normal; font-display:swap;
	src:url(../fonts/Disorient.ttf) format('truetype');
}
.site-header{
	position:fixed; top:0; left:0; right:0; z-index:100;
	background-color:rgba(255,255,255,0.85);
	background-image:url(../images/bg-global.webp);
	background-repeat:no-repeat;
	background-position:center top;
	background-size:cover;
	background-attachment:fixed;
	backdrop-filter:blur(10px);
	-webkit-backdrop-filter:blur(10px);
	border-bottom:1px solid var(--border);
}
.site-header-spacer{ width:100%; }
.header-top{
	display:flex; align-items:center; gap:10px; flex-wrap:wrap;
	padding:10px 14px;
	padding-top:calc(10px + env(safe-area-inset-top));
}
.brand{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.brand img{ height:30px; width:auto; }
.brand-name{ font-family:'Nucleo','Disorient',Arial,Helvetica,sans-serif; font-size:14px; font-weight:700; color:var(--text-dark); letter-spacing:.5px; white-space:nowrap; display:inline-block; }
.brand-name > span{ display:inline-block; animation:aiWave 5.8s ease-in-out infinite; }
.brand-name > span:nth-child(1){ animation-delay:0s; }
.brand-name > span:nth-child(2){ animation-delay:.15s; }
@keyframes aiWave{
	0%,100%{ transform:translateY(0); }
	6%{ transform:translateY(-3px); }
	14%{ transform:translateY(0); }
}
.header-actions{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.icon-btn{
	width:38px; height:38px; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	background:var(--body-bg); border:1px solid var(--border); cursor:pointer;
	font-size:1.0rem; color:var(--text-dark);
}
.icon-btn.active{ background:var(--primary); color:#fff; border-color:var(--primary); }

/* 顶部信息条（移动端同一行：日期在前 / 天气在后；PC 端日期在左、天气在右） */
.header-info-row{
	display:flex; align-items:center; gap:14px;
	flex:1 1 100%; min-width:0;
}
.header-date, .header-weather{
	display:flex; align-items:center; gap:6px;
	flex:0 0 auto;
	font-size:11px; color:var(--text-gray);
	min-width:0;
}
.header-date .info-item, .header-weather .info-item{ display:flex; align-items:center; gap:6px; white-space:nowrap; }
.header-date .info-item svg, .header-weather .info-item svg{ width:15px; height:15px; flex-shrink:0; }
#hdr-lunar{ opacity:.68; font-size:.92em; margin-left:4px; white-space:nowrap; }
.header-date .info-primary, .header-weather .info-primary{ color:var(--text-gray); font-weight:400; }

/* ============ 移动端抽屉菜单 ============ */
.drawer-mask{
	position:fixed; inset:0; background:rgba(0,0,0,0.45);
	z-index:200; opacity:0; visibility:hidden; transition:all .25s ease;
}
.drawer-mask.show{ opacity:1; visibility:visible; }
.drawer{
	position:fixed; top:0; left:0; bottom:0; width:280px; max-width:82vw;
	background:#fff; z-index:201;
	transform:translateX(-100%); transition:transform .28s cubic-bezier(0.22,1,0.36,1);
	display:flex; flex-direction:column;
	box-shadow:4px 0 24px rgba(0,0,0,0.12);
}
.drawer.show{ transform:translateX(0); }
.drawer-head{
	display:flex; align-items:center; justify-content:space-between;
	padding:16px 16px 12px; border-bottom:1px solid var(--border);
}
.drawer-head .brand{ gap:7px; }
.drawer-head .brand-name{ font-size:13px; }
.drawer-scroll{ flex:1; overflow-y:auto; padding:8px 0 24px; }
.menu-group{ padding:10px 0 4px; }
.menu-group-title{
	padding:4px 20px 8px; font-size:11px; color:var(--text-light);
	text-transform:uppercase; letter-spacing:.5px; font-weight:600;
}
.menu-item{ display:block; }
.menu-item > a{
	display:flex; align-items:center; gap:10px;
	padding:11px 20px; font-size:14px; color:var(--text-dark);
	transition:background .15s;
}
.menu-item > a:active{ background:var(--primary-light); }
.menu-item > a .mi{ width:20px; text-align:center; font-size:15px; flex-shrink:0; }
.menu-item > a .arrow{ margin-left:auto; font-size:12px; color:var(--text-light); transition:transform .2s; }
.menu-item.open > a .arrow{ transform:rotate(90deg); }
.menu-sub{ display:none; background:var(--body-bg); }
.menu-item.open .menu-sub{ display:block; }
.menu-sub a{
	display:block; padding:9px 20px 9px 50px; font-size:13px; color:var(--text-gray);
}
.menu-sub a:active{ color:var(--primary); }

/* 桌面端横向菜单 */
.desktop-nav{
	display:none;
	background:rgba(255,255,255,0.6);
	border-bottom:1px solid var(--border);
	overflow-x:auto; scrollbar-width:none;
}
.desktop-nav::-webkit-scrollbar{ display:none; }
.desktop-nav ul{ display:flex; align-items:center; justify-content:center; gap:4px; padding:6px 14px; white-space:nowrap; list-style:none; }
.desktop-nav li{ position:relative; }
.desktop-nav ul ul{ list-style:none; }
.desktop-nav a{
	display:block; padding:8px 12px; font-size:13px; color:var(--text-gray);
	border-radius:8px; transition:all .15s;
}
.desktop-nav a:hover, .desktop-nav a.current{ color:var(--primary); background:var(--primary-light); }
.nav-ico{ width:16px; height:16px; vertical-align:-3px; flex-shrink:0; color:#ff7b00; }
.desktop-nav .nav-ico{ margin-right:5px; }
.nav-chart{
	display:inline-flex; align-items:flex-end; gap:2px;
	height:12px; margin-right:5px; vertical-align:middle;
}
.nav-chart i{
	display:block; width:3px; border-radius:1px;
	background:var(--primary);
	animation:chartBounce 1s ease-in-out infinite;
}
.nav-chart i:nth-child(1){ height:60%; animation-delay:0s; }
.nav-chart i:nth-child(2){ height:100%; animation-delay:.15s; }
.nav-chart i:nth-child(3){ height:80%; animation-delay:.3s; }
@keyframes chartBounce{
	0%,100%{ transform:scaleY(1); }
	50%{ transform:scaleY(.55); }
}
.nav-hot{
	display:inline-flex; align-items:center; margin-right:5px;
	vertical-align:middle; color:var(--primary);
	font-size:8px; font-weight:400; letter-spacing:0; text-transform:uppercase;
}
.nav-hot b{
	display:inline-block; animation:hotRipple 1s ease-in-out infinite;
}
.nav-hot b:nth-child(1){ animation-delay:0s; }
.nav-hot b:nth-child(2){ animation-delay:.18s; }
.nav-hot b:nth-child(3){ animation-delay:.36s; }
@keyframes hotRipple{
	0%,100%{ transform:translateY(0); }
	50%{ transform:translateY(-1px); }
}
.desktop-nav .has-sub:hover .desktop-sub{ display:block; }
.desktop-sub{
	display:none; position:absolute; top:100%; left:0; min-width:160px;
	background:#fff; border:1px solid var(--border); border-radius:10px;
	box-shadow:0 12px 30px rgba(0,0,0,0.1); padding:6px; z-index:50;
}
.desktop-sub a{ padding:8px 14px; font-size:13px; }
.desktop-sub a:hover{ background:var(--primary-light); color:var(--primary); }

/* ============ 桌面端适配 ============ */
@media (min-width: 768px){
	.header-top{ position:relative; padding:12px 24px; }
	.header-top .brand{ position:absolute; left:50%; transform:translateX(-50%); }
	.header-info-row{ flex:1; min-width:0; }
	.header-date{ flex:0 0 auto; padding:0; border-top:none; font-size:12px; }
	.header-weather{ flex:0 0 auto; margin-left:auto; padding:0; border-top:none; font-size:12px; }
	.icon-btn.menu-toggle{ display:none; }
	.desktop-nav{ display:block; }
}