/* ================= 1. 基础与变量 ================= */
:root {
    --bg-base: #0f172a; 
    --bg-mid: #581c87;
    --p-400: #c084fc; 
    --p-500: #a855f7; 
    --p-600: #9333ea;
    --pi-400: #f472b6; 
    --pi-500: #ec4899; 
    --pi-600: #db2777;
    --b-400: #60a5fa; 
    --c-400: #22d3ee; 
    --g-400: #4ade80;
    --y-400: #facc15; 
    --r-400: #f87171;
    --gray-300: #d1d5db; 
    --gray-400: #9ca3af; 
    --gray-500: #6b7280;
    --glass-bg: rgba(255,255,255,0.05); 
    --glass-border: rgba(255,255,255,0.1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    font-family: system-ui, -apple-system, sans-serif; 
    background: linear-gradient(135deg, var(--bg-base) 0%, var(--bg-mid) 50%, var(--bg-base) 100%); 
    color: var(--gray-300); 
    min-height: 100vh; 
    overflow-x: hidden; 
    line-height: 1.5; 
}
a { text-decoration: none; color: inherit; transition: color 0.3s ease, background 0.3s ease, transform 0.3s ease; }
ul { list-style: none; }
input, button, select { outline: none; border: none; font-family: inherit; background: transparent; }
button, label, select { cursor: pointer; }

/* ================= 2. 通用布局与工具类 ================= */
.max-w-7xl { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
@media(min-width: 640px) { .max-w-7xl { padding: 0 1.5rem; } }
@media(min-width: 1024px) { .max-w-7xl { padding: 0 2rem; } }

.page-wrap { padding: 2.5rem 0; min-height: calc(100vh - 4rem); }

.flex { display: flex; } 
.flex-col { flex-direction: column; } 
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; } 
.justify-center { justify-content: center; } 
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } 
.gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; }
.w-full { width: 100%; } .h-full { height: 100%; } 
.relative { position: relative; } .absolute { position: absolute; }
.text-center { text-align: center; }

/* 响应式显示控制 */
.hidden { display: none !important; }
.hidden-radio { display: none !important; }
@media(max-width: 767px) { .md-hidden { display: none !important; } }
@media(min-width: 768px) { .md-block { display: block !important; } .md-flex { display: flex !important; } }

/* 响应式网格 */
.grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-4 { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media(min-width: 640px) { 
    .sm-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } 
    .sm-flex-row { flex-direction: row; } 
    .grid-4 { grid-template-columns: repeat(2, 1fr); } 
}
@media(min-width: 768px) { .md-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media(min-width: 1024px) { 
    .lg-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } 
    .lg-grid-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } 
    .grid-4 { grid-template-columns: repeat(4, 1fr); } 
}

/* SVG 图标通用大小 */
.w-6 { width: 1.5rem; } .h-6 { height: 1.5rem; }
.w-5 { width: 1.25rem; } .h-5 { height: 1.25rem; }
.w-4 { width: 1rem; } .h-4 { height: 1rem; }
.w-3 { width: 0.75rem; } .h-3 { height: 0.75rem; }

/* ================= 3. 视觉特效与通用组件 ================= */
.glass, .glass-panel { 
    background: var(--glass-bg); 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px); 
    border: 1px solid var(--glass-border); 
    border-radius: 0.75rem; 
}
.text-gradient { background: linear-gradient(to right, var(--b-400), var(--p-400), var(--pi-400)); -webkit-background-clip: text; color: transparent; }
.bg-gradient { background: linear-gradient(to right, var(--p-500), var(--pi-500)); color: white; transition: 0.2s; }
.bg-gradient:hover { background: linear-gradient(to right, var(--p-600), var(--pi-600)); }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 发光背景 (首页) */
.bg-effects { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.glow-1 { position: absolute; top: 25%; left: 25%; width: 16rem; height: 16rem; background: rgba(168,85,247,0.1); border-radius: 50%; filter: blur(60px); animation: pulse 4s infinite alternate; }
.glow-2 { position: absolute; top: 75%; right: 25%; width: 24rem; height: 24rem; background: rgba(59,130,246,0.1); border-radius: 50%; filter: blur(60px); animation: bounce 3s infinite alternate; }
.glow-3 { position: absolute; top: 50%; left: 50%; width: 12rem; height: 12rem; background: rgba(236,72,153,0.1); border-radius: 50%; filter: blur(40px); animation: ping 4s infinite alternate; }
.glow-4 { position: absolute; bottom: 25%; left: 33%; width: 18rem; height: 18rem; background: rgba(99,102,241,0.1); border-radius: 50%; filter: blur(60px); animation: pulse 4s infinite alternate; animation-delay: 1s; }
.glow-5 { position: absolute; top: 33%; right: 33%; width: 14rem; height: 14rem; background: rgba(6,182,212,0.1); border-radius: 50%; filter: blur(40px); animation: bounce 2.5s infinite alternate; animation-delay: 0.5s; }
.noise-bg { position: absolute; inset: 0; background: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%239C92AC" fill-opacity="0.05"%3E%3Ccircle cx="30" cy="30" r="1"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E'); }
@keyframes pulse { to { transform: scale(1.1); } } 
@keyframes bounce { to { transform: translateY(-20px); } } 
@keyframes ping { to { transform: scale(1.2); opacity: 0.8; } }

/* ================= 4. 导航栏与页脚 ================= */
header { position: sticky; top: 0; z-index: 50; background: rgba(0,0,0,0.2); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--glass-border); display: flex; align-items: center;}
.nav-top { display: flex; align-items: center; justify-content: space-between; height: 4rem; width: 100%; }

.logo { display: flex; align-items: center; gap: 0.5rem; transition: transform 0.2s; }
.logo:hover .logo-icon { transform: scale(1.1); }
.logo-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; }

/* 电脑端搜索与链接 */
.desktop-search { flex: 1; max-width: 42rem; margin: 0 2rem; position: relative; }
.search-input { width: 100%; padding: 0.5rem 1rem 0.5rem 2.5rem; border-radius: 9999px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: white; transition: 0.2s; }
.search-input:focus { border-color: var(--p-500); box-shadow: 0 0 0 2px rgba(168,85,247,0.3); }
.search-btn { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); padding: 0.25rem 1rem; border-radius: 9999px; font-size: 0.875rem; color: white; }

.desktop-nav-bottom { display: flex; align-items: center; gap: 2rem; padding: 1rem 0; border-top: 1px solid var(--glass-border); overflow-x: auto; white-space: nowrap; }
.desktop-nav-bottom a { color: var(--gray-300); transition: 0.2s; display: flex; align-items: center; gap: 0.25rem; }
.desktop-nav-bottom a:hover { color: white; }

/* 手机菜单 Hack */
.icon-close { display: none; }
.mobile-toggle-btn { color: white; transition: color 0.2s; display: flex; align-items: center; justify-content: center; }
.mobile-toggle-btn:hover { color: var(--p-400); }
#mobile-menu-toggle:checked ~ .max-w-7xl .mobile-toggle-btn .icon-menu { display: none; }
#mobile-menu-toggle:checked ~ .max-w-7xl .mobile-toggle-btn .icon-close { display: block; }
.mobile-menu-wrapper { display: none; background: rgba(0,0,0,0.3); backdrop-filter: blur(12px); border-top: 1px solid var(--glass-border); width: 100%; }
#mobile-menu-toggle:checked ~ .mobile-menu-wrapper { display: block; }
@media(min-width: 768px) {
    .mobile-toggle-btn, .mobile-menu-wrapper { display: none !important; }
}
.mobile-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0; color: var(--gray-300); transition: 0.2s; }
.mobile-link:hover { color: white; }

/* 页脚 */
footer { border-top: 1px solid var(--glass-border); background: rgba(0,0,0,0.3); padding: 3rem 0; margin-top: 5rem; position: relative; z-index: 10; }
.footer-title { font-size: 1.125rem; font-weight: 600; color: white; margin-bottom: 1rem; }
.footer-links li { margin-bottom: 0.5rem; font-size: 0.875rem; color: var(--gray-400); }
.footer-links a:hover { color: var(--p-500); }

/* ================= 5. 视频卡片 (通用) ================= */
.video-card { background: var(--glass-bg); border-radius: 0.75rem; overflow: hidden; display: block; border: 1px solid var(--glass-border); transition: 0.3s; position: relative; }
.video-card:hover { transform: scale(1.04); border-color: rgba(168,85,247,0.5); box-shadow: 0 15px 30px -5px rgba(168,85,247,0.2); }

.thumb-wrap, .video-thumb-lg { width: 100%; aspect-ratio: 16/9; background: #1e293b; position: relative; overflow: hidden; flex-shrink: 0; }
.thumb-wrap img, .video-thumb-lg img { width: 100%; height: 100%; object-fit: cover; transition: 0.3s; }
.video-card:hover .thumb-wrap img, .video-card:hover .video-thumb-lg img { transform: scale(1.1); }

.thumb-mask { position: absolute; inset: 0; background: rgba(0,0,0,0.4); opacity: 0; display: flex; align-items: center; justify-content: center; transition: 0.3s; }
.video-card:hover .thumb-mask { opacity: 1; }
.play-icon { width: 4rem; height: 4rem; background: rgba(255,255,255,0.2); backdrop-filter: blur(4px); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid rgba(255,255,255,0.3); color: white; padding-left: 0.25rem; }

.badge-cat { position: absolute; top: 0.5rem; left: 0.5rem; padding: 0.25rem 0.6rem; border-radius: 9999px; font-size: 0.75rem; color: white; background: linear-gradient(to right, var(--p-500), var(--pi-500)); z-index: 2; }
.badge-dur { position: absolute; bottom: 0.5rem; right: 0.5rem; padding: 0.25rem 0.5rem; border-radius: 0.25rem; background: rgba(0,0,0,0.7); font-size: 0.75rem; color: white; z-index: 2; }

.card-body, .video-info-lg { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.card-title, .video-title { font-size: 0.95rem; font-weight: 600; color: white; margin-bottom: 0.5rem; transition: 0.2s; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.video-card:hover .card-title, .video-card:hover .video-title { color: var(--p-400); }
.card-desc, .video-desc { font-size: 0.8rem; color: var(--gray-400); margin-bottom: 0.75rem; height: 2.4rem; line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.video-meta { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--gray-500); margin-bottom: 0.75rem; align-items: center; }
.video-meta-left { display: flex; gap: 0.75rem; align-items: center; }
.video-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.75rem; }
.video-tag { font-size: 0.7rem; background: rgba(255,255,255,0.1); color: var(--gray-300); padding: 0.25rem 0.6rem; border-radius: 9999px; }

/* ================= 6. 首页专属样式 (index.html) ================= */
.hero { padding: 5rem 0; text-align: center; position: relative; z-index: 10; }
.hero h1 { font-size: 2.25rem; font-weight: bold; margin-bottom: 1.5rem; line-height: 1.2; }
@media(min-width: 768px) { .hero h1 { font-size: 3.75rem; } }
.hero p.subtitle { font-size: 1.25rem; color: var(--gray-300); font-weight: 600; margin-bottom: 1rem; }
@media(min-width: 768px) { .hero p.subtitle { font-size: 1.5rem; } }
.hero p.desc { font-size: 1.125rem; color: var(--gray-400); max-width: 48rem; margin: 0 auto 2rem; }
.hero-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-bottom: 3rem; }
.hero-tag { padding: 0.75rem 1.5rem; border-radius: 9999px; background: rgba(255,255,255,0.1); border: 1px solid var(--glass-border); display: flex; align-items: center; gap: 0.5rem; }
.btn-large { padding: 1rem 2rem; border-radius: 9999px; font-weight: 600; display: inline-block; transition: 0.3s; text-align: center; }
.btn-large:hover { transform: scale(1.05); }

.section-wrap { padding: 3rem 0; position: relative; z-index: 10; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
.section-title { font-size: 1.5rem; font-weight: bold; color: white; display: flex; align-items: center; gap: 0.5rem; }
.see-more { color: var(--p-400); font-size: 0.875rem; display: flex; align-items: center; gap: 0.25rem; }
.see-more:hover { color: var(--p-300); }

.category-card { padding: 1rem; text-align: center; display: block; transition: 0.3s; }
.category-card:hover { transform: scale(1.05); border-color: rgba(168,85,247,0.5); }
.category-icon { width: 3rem; height: 3rem; border-radius: 9999px; margin: 0 auto 0.75rem; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; font-weight: bold; transition: 0.3s; }
.category-card:hover .category-icon { background: linear-gradient(to right, var(--p-600), var(--pi-600)); }

.stat-box { text-align: center; }
.stat-num { font-size: 1.875rem; font-weight: bold; margin-bottom: 0.5rem; }

/* ================= 7. 列表页专属样式 (list.html) ================= */
.page-title { font-size: 2.25rem; font-weight: bold; margin-bottom: 1rem; }
@media(min-width: 768px) { .page-title { font-size: 2.75rem; } }

.tags-wrap { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.tag-pill { padding: 0.5rem 1.25rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 500; transition: 0.2s; display: inline-block; }
.tag-pill.active { background: linear-gradient(to right, var(--p-500), var(--pi-500)); color: white; }
.tag-pill:not(.active) { background: rgba(255,255,255,0.1); color: var(--gray-300); border: 1px solid transparent; }
.tag-pill:not(.active):hover { background: rgba(255,255,255,0.2); color: white; border-color: var(--glass-border); }

.control-panel { padding: 1.5rem; margin-bottom: 2rem; }
.control-bar { display: flex; flex-direction: column; gap: 1rem; }
@media(min-width: 1024px) { .control-bar { flex-direction: row; justify-content: space-between; align-items: center; } }

.control-group { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
select { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 0.5rem; padding: 0.6rem 1rem; color: white; font-size: 0.875rem; transition: 0.3s; }
select:focus { border-color: var(--p-500); box-shadow: 0 0 0 2px rgba(168,85,247,0.3); }
select option { background: #1f2937; color: white; }

.view-btn { padding: 0.6rem 0.8rem; border-radius: 0.5rem; background: rgba(255,255,255,0.1); color: var(--gray-400); border: 1px solid rgba(255,255,255,0.1); cursor: pointer; transition: 0.2s; display: inline-block; text-align: center; }
.view-btn:hover { background: rgba(255,255,255,0.2); color: white; }

.stats-bar { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--glass-border); display: flex; justify-content: space-between; font-size: 0.875rem; color: var(--gray-400); flex-wrap: wrap; gap: 1rem; }

/* 纯 CSS 视图切换 Hacks (list.html) */
#view-grid:checked ~ .content-area .btn-grid { background: var(--p-500); color: white; border-color: var(--p-500); }
#view-grid:checked ~ .content-area .video-layout { display: grid; gap: 1.5rem; grid-template-columns: repeat(1, 1fr); }
@media(min-width: 640px) { #view-grid:checked ~ .content-area .video-layout { grid-template-columns: repeat(2, 1fr); } }
@media(min-width: 1024px) { #view-grid:checked ~ .content-area .video-layout { grid-template-columns: repeat(3, 1fr); } }
@media(min-width: 1280px) { #view-grid:checked ~ .content-area .video-layout { grid-template-columns: repeat(4, 1fr); } }
#view-grid:checked ~ .content-area .video-layout .thumb-wrap { width: 100%; aspect-ratio: 16/9; }

#view-list:checked ~ .content-area .btn-list { background: var(--p-500); color: white; border-color: var(--p-500); }
#view-list:checked ~ .content-area .video-layout { display: flex; flex-direction: column; gap: 1rem; }
#view-list:checked ~ .content-area .video-layout .video-card { display: flex; flex-direction: row; align-items: stretch; }
#view-list:checked ~ .content-area .video-layout .thumb-wrap { width: 320px; aspect-ratio: 16/9; flex-shrink: 0; }
#view-list:checked ~ .content-area .video-layout .card-body { padding: 1.5rem; justify-content: center; }
#view-list:checked ~ .content-area .video-layout .card-title { font-size: 1.125rem; margin-bottom: 0.75rem; }
@media(max-width: 640px) { 
    #view-list:checked ~ .content-area .video-layout .video-card { flex-direction: column; }
    #view-list:checked ~ .content-area .video-layout .thumb-wrap { width: 100%; }
}

/* ================= 8. 详情页专属样式 (html.html) ================= */
.layout-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 3rem; }
@media (min-width: 1024px) { .layout-grid { grid-template-columns: 2fr 1fr; } }

/* 播放器区域 */
.player-wrapper { background: #000; border-radius: 0.75rem; overflow: hidden; aspect-ratio: 16/9; margin-bottom: 1.5rem; border: 1px solid var(--glass-border); }
.player-wrapper video { width: 100%; height: 100%; object-fit: cover; outline: none; }

/* 详情信息卡片 */
.info-card { padding: 1.5rem; margin-bottom: 1.5rem; }
.info-card h1 { font-size: 1.5rem; font-weight: bold; color: white; margin-bottom: 1rem; line-height: 1.3; }
@media (min-width: 768px) { .info-card h1 { font-size: 1.875rem; } }

.meta-row { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: 0.875rem; color: var(--gray-400); margin-bottom: 1.5rem; }
.action-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.btn-action { padding: 0.6rem 1.25rem; border-radius: 9999px; background: rgba(255,255,255,0.1); color: var(--gray-300); font-size: 0.875rem; transition: 0.2s; display: flex; align-items: center; gap: 0.5rem; }
.btn-action:hover { background: rgba(255,255,255,0.2); color: white; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.2); }

.desc-box { border-top: 1px solid var(--glass-border); padding-top: 1.5rem; }
.desc-box h3 { font-size: 1.125rem; font-weight: 600; color: white; margin-bottom: 0.75rem; }
.desc-box p { color: var(--gray-300); line-height: 1.6; margin-bottom: 1rem; }
.tag-pill { display: inline-block; background: rgba(168, 85, 247, 0.15); border: 1px solid rgba(168, 85, 247, 0.3); color: #d8b4fe; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.875rem; margin-right: 0.5rem; margin-bottom: 0.5rem; }

/* 侧边栏推荐 */
.sidebar { padding: 1.5rem; position: sticky; top: 5.5rem; height: fit-content; }
.sidebar h3 { font-size: 1.125rem; font-weight: 600; color: white; margin-bottom: 1.25rem; }

.rec-item { display: flex; gap: 0.75rem; padding: 0.5rem; border-radius: 0.5rem; transition: 0.2s; margin-bottom: 0.5rem; }
.rec-item:hover { background: rgba(255,255,255,0.05); transform: translateX(4px); }
.rec-thumb { width: 7rem; height: 4.5rem; flex-shrink: 0; background: #1e293b; border-radius: 0.5rem; position: relative; overflow: hidden; }
.rec-thumb img { width: 100%; height: 100%; object-fit: cover; transition: 0.3s; }
.rec-item:hover .rec-thumb img { transform: scale(1.1); }
.rec-dur { position: absolute; bottom: 4px; right: 4px; background: rgba(0,0,0,0.7); color: white; font-size: 10px; padding: 2px 4px; border-radius: 2px; }
.rec-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.rec-info h4 { font-size: 0.875rem; color: white; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: 0.2s; line-height: 1.4; }
.rec-item:hover .rec-info h4 { color: var(--p-400); }
.rec-meta { font-size: 0.75rem; color: var(--gray-400); margin-top: 0.4rem; }

.btn-more-sidebar { display: block; width: 100%; text-align: center; padding: 0.6rem 0; border-radius: 9999px; margin-top: 1.5rem; font-size: 0.875rem; transition: 0.3s; }
.btn-more-sidebar:hover { transform: scale(1.02); box-shadow: 0 4px 10px rgba(168,85,247,0.3); }

.bottom-recs { margin-top: 3rem; }
.bottom-recs h2 { font-size: 1.5rem; font-weight: bold; color: white; margin-bottom: 1.5rem; }

@media (max-width: 768px) {
    #mobile-menu-toggle:checked ~ .max-w-7xl {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 60px !important;
        background-color: #11131a !important; 
        z-index: 10001 !important;
    }
    
    #mobile-menu-toggle:checked ~ .max-w-7xl .nav-top {
        height: 100% !important;
        align-items: center !important;
        padding: 0 1rem !important;
    }

    #mobile-menu-toggle:checked ~ .mobile-menu-wrapper {
        display: block !important;
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        height: calc(100vh - 60px) !important;
        background-color: #11131a !important; 
        z-index: 10000 !important;
        transform: translateX(0) !important; 
        padding: 1.5rem 1.5rem !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    #mobile-menu-toggle:checked ~ .max-w-7xl .mobile-toggle-btn .icon-menu {
        display: none !important;
    }
    #mobile-menu-toggle:checked ~ .max-w-7xl .mobile-toggle-btn .icon-close {
        display: block !important;
        color: #d8b4fe !important; 
    }

    body:has(#mobile-menu-toggle:checked) {
        overflow: hidden !important;
    }
}