* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; background:#f5f3f0; color:#2c2c2c; line-height:1.6; }
.container { max-width:1200px; margin:0 auto; padding:0 20px; }

/* 导航栏 */
.navbar { background:#fff; box-shadow:0 2px 10px rgba(0,0,0,0.05); position:sticky; top:0; z-index:100; }
.navbar .container { display:flex; justify-content:space-between; align-items:center; padding:1rem 20px; }
.logo { font-size:1.5rem; font-weight:bold; display:flex; align-items:center; gap:8px; }
.logo-icon { background:#e07a5f; color:#fff; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1rem; }
.nav-links { display:flex; list-style:none; gap:2rem; }
.nav-links a { text-decoration:none; color:#2c2c2c; font-weight:500; transition:color 0.3s; }
.nav-links a:hover, .nav-links a.active { color:#e07a5f; }

/* 轮播图 */
.carousel-container { position:relative; max-width:1200px; margin:20px auto; overflow:hidden; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,0.1); }
.carousel-slides { position:relative; height:400px; }
.slide { position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; transition:opacity 0.5s ease; }
.slide.active { opacity:1; }
.slide img { width:100%; height:100%; object-fit:cover; }
.slide-caption { position:absolute; bottom:40px; left:40px; background:rgba(0,0,0,0.6); padding:1rem 2rem; border-radius:8px; color:#fff; }
.slide-caption h2 { font-size:1.8rem; margin-bottom:0.5rem; }
.carousel-btn { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.7); border:none; width:44px; height:44px; border-radius:50%; font-size:1.5rem; cursor:pointer; z-index:10; }
.carousel-btn:hover { background:#fff; }
.prev { left:20px; } .next { right:20px; }
.carousel-dots { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); display:flex; gap:12px; }
.dot { width:12px; height:12px; background:rgba(255,255,255,0.5); border-radius:50%; cursor:pointer; }
.dot.active { background:#e07a5f; width:24px; border-radius:6px; }

/* 歌单卡片 */
.playlists { padding:60px 0; }
.section-title { text-align:center; font-size:2rem; margin-bottom:0.5rem; }
.section-subtitle { text-align:center; color:#666; margin-bottom:3rem; }
.card-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:30px; }
.card { position:relative; border-radius:16px; overflow:hidden; cursor:pointer; box-shadow:0 5px 20px rgba(0,0,0,0.08); transition:transform 0.3s, box-shadow 0.3s; }
.card:hover { transform:translateY(-8px); box-shadow:0 20px 35px rgba(0,0,0,0.15); }
.card:active { transform:scale(0.98); }
.card-img { width:100%; aspect-ratio:1/1; }
.card-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s; }
.card:hover .card-img img { transform:scale(1.05); }
.card-overlay { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.5), transparent); backdrop-filter:blur(4px); padding:30px 16px 16px 16px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,0.3); }
.card-overlay h3 { font-size:1.2rem; margin-bottom:6px; font-weight:600; }
.card-overlay p { font-size:0.8rem; opacity:0.9; }

/* 精选区域 */
.featured { background:#fff; padding:60px 0; }
.featured-grid { display:flex; flex-direction:column; gap:20px; max-width:800px; margin:0 auto; }
.featured-item { display:flex; gap:20px; padding:15px; border-radius:12px; cursor:pointer; transition:background 0.3s; }
.featured-item:hover { background:#f9f7f5; }
.featured-item img { width:80px; height:80px; border-radius:12px; object-fit:cover; }
.featured-info h4 { margin-bottom:8px; font-size:1.1rem; }
.featured-info p { color:#666; font-size:0.9rem; }

/* 全局播放器 */
#global-player { position:fixed; bottom:0; left:0; width:100%; background:#fff; box-shadow:0 -2px 10px rgba(0,0,0,0.1); padding:12px 20px; display:flex; align-items:center; gap:15px; z-index:300; flex-wrap:wrap; }
#gp-now-playing { font-weight:600; min-width:150px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#global-player button { background:#e07a5f; border:none; color:white; padding:8px 16px; border-radius:20px; cursor:pointer; }
#global-player button:hover { background:#c06a4b; }
#gp-progress { flex:1; margin:0 10px; }
#gp-time { font-size:0.85rem; color:#666; min-width:80px; text-align:right; }

/* 隐藏页脚 */
.footer-reveal { height:0; overflow:hidden; transition:height 0.3s ease; }
.footer-reveal.open { height:120px; }
.footer { background:#2c2c2c; color:#ccc; text-align:center; padding:40px 0; }

/* 汉堡菜单 */
.hamburger { display:none; background:none; border:none; font-size:1.8rem; cursor:pointer; }
.nav-search { margin-left:auto; }
.search-input { padding:6px 12px; border:1px solid #ddd; border-radius:20px; font-size:0.9rem; outline:none; width:150px; transition:border-color 0.3s; }
.search-input:focus { border-color:#e07a5f; }

/* 响应式 */
@media (max-width:900px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:768px) {
    .hamburger { display:block; position:absolute; right:20px; top:1rem; }
    .navbar .container { flex-wrap:wrap; position:relative; }
    .nav-links { display:none; flex-direction:column; width:100%; background:#fff; padding:1rem 0; }
    .nav-links.open { display:flex; }
    .nav-search { margin-left:0; padding:0.5rem 1rem; }
    .search-input { width:100%; }
}
@media (max-width:560px) {
    .card-grid { grid-template-columns: 1fr; }
    .carousel-slides { height:250px; }
    .slide-caption h2 { font-size:1rem; }
    #global-player { flex-direction:column; align-items:flex-start; }
    #gp-progress { width:100%; }
}
/* ========== 主题系统支持 ========== */
body {
    background: var(--body-bg, #f5f3f0);
    color: var(--text-color, #2c2c2c);
    transition: background 0.5s ease, color 0.3s ease;
}
.navbar {
    background: var(--nav-bg, #fff);
    transition: background 0.3s ease;
}
.nav-links a {
    color: var(--nav-text, #2c2c2c);
    transition: color 0.3s ease;
}
.nav-links a.active {
    color: var(--nav-active, #e07a5f);
}
.card, .featured, .track-list, .review-item, .shop-story, .member-card, .tech-stack, .recommend-hero, .theme-section {
    background: var(--card-bg, #fff);
    transition: background 0.3s ease;
}
#global-player {
    background: var(--player-bg, #fff);
    transition: background 0.3s ease;
}
.section-subtitle {
    color: var(--subtitle-color, #666);
}
.footer {
    background: var(--footer-bg, #2c2c2c);
    color: var(--footer-text, #ccc);
}
/* ========== 增强播放器控件 ========== */
.gp-btn {
    background: #e07a5f;
    border: none;
    color: white;
    padding: 6px 10px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    transition: background 0.2s;
    margin: 0 2px;
}
.gp-btn:hover {
    background: #c06a4b;
}
#gp-btn-mode, #gp-btn-playlist {
    font-size: 1.2rem;
    padding: 4px 8px;
}

/* 播放列表面板 */
#gp-playlist-panel {
    position: fixed;
    bottom: 60px;  /* 放在播放器上方 */
    right: 20px;
    width: 280px;
    max-height: 300px;
    background: var(--card-bg, #fff);
    border-radius: 12px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
    overflow-y: auto;
    z-index: 400;
    padding: 10px;
    font-size: 0.9rem;
    color: var(--text-color, #2c2c2c);
}
.gp-playlist-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-weight: 600;
}
.gp-playlist-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.gp-playlist-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background 0.2s;
}
.gp-playlist-item:hover {
    background: var(--hover-bg, #f5f3f0);
}
.gp-playlist-item.active {
    background: #fce4e4;
    font-weight: 600;
}
.gp-playlist-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gp-playlist-del {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 0 4px;
}
/* 移动端适配 */
@media (max-width: 560px) {
    #gp-playlist-panel {
        width: calc(100% - 40px);
        right: 20px;
    }
}
/* ========== 搜索面板 ========== */
.nav-search {
    position: relative;  /* 让搜索面板相对于这里定位 */
}
.search-panel {
    position: absolute;
    top: 100%;
    left: 0;
    width: 320px;
    max-width: 90vw;
    max-height: 360px;
    background: var(--card-bg, #fff);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    z-index: 500;
    overflow-y: auto;
    display: none;
    margin-top: 6px;
}
.search-panel.show {
    display: block;
}
.search-section-title {
    padding: 12px 16px 6px;
    font-size: 0.8rem;
    color: #999;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.search-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid #f5f5f5;
}
.search-item:last-child {
    border-bottom: none;
}
.search-item:hover {
    background: var(--hover-bg, #faf8f6);
}
.search-item-num {
    width: 28px;
    font-size: 0.85rem;
    color: #bbb;
    font-weight: 600;
    flex-shrink: 0;
}
.search-item-info {
    flex: 1;
    min-width: 0;
}
.search-item-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-color, #2c2c2c);
}
.search-item-artist {
    font-size: 0.8rem;
    color: #999;
    margin-top: 2px;
}
.search-item-tag {
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 6px;
    font-weight: normal;
    background: #e07a5f;
    color: #fff;
}
.search-highlight {
    color: #e07a5f;
    font-weight: 700;
}
.search-empty {
    text-align: center;
    padding: 30px;
    color: #aaa;
    font-size: 0.9rem;
}
/* 移动端调整宽度 */
@media (max-width: 560px) {
    .search-panel {
        width: calc(100vw - 40px);
        left: -20px;
    }
}
/* 搜索遮罩层 */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    display: none;
}
.search-overlay.show {
    display: block;
}