/* ================= 基础全局 ================= */
:root{
  /* 默认主题（pink） */
  --page-bg:#fff3f8;
  --primary:#ff69b4;
  --site-name-color:#ff69b4;
  --banner-bg:#ff8acb;
  --notice-start:#ff69b4;
  --notice-end:#ffaad4;
  --nav-title-color:#e6007e;
  --top-dot-color:#7a2b55;
  --card-bg:#ffffff;
  --soft-shadow:0 8px 30px rgba(0,0,0,.05);
}

/* 主题：紫色 */
:root[data-theme="lavender"]{
  --page-bg:#f7f1ff;
  --primary:#b38bff;
  --site-name-color:#9b6cff;
  --banner-bg:#c6a8ff;
  --notice-start:#b38bff;
  --notice-end:#ffd1ff;
  --nav-title-color:#6a36ff;
  --top-dot-color:#4b2a7a;
}

/* 主题：薄荷 */
:root[data-theme="mint"]{
  --page-bg:#f1fffb;
  --primary:#2cc9a8;
  --site-name-color:#1fb395;
  --banner-bg:#57e8cf;
  --notice-start:#2cc9a8;
  --notice-end:#bffaf0;
  --nav-title-color:#0f8f77;
  --top-dot-color:#0c5c4d;
}

/* 主题：天空 */
:root[data-theme="sky"]{
  --page-bg:#f1f8ff;
  --primary:#5bbcff;
  --site-name-color:#2799e8;
  --banner-bg:#7fd0ff;
  --notice-start:#5bbcff;
  --notice-end:#d5f1ff;
  --nav-title-color:#0b6fb8;
  --top-dot-color:#0b4a7a;
}

body{background:var(--page-bg,#f9f9f9) !important;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;margin:0;-webkit-overflow-scrolling:touch;transition:background .25s ease;}
*{-webkit-tap-highlight-color:transparent;box-sizing:border-box;}
a{text-decoration:none;color:inherit}

/* ================= 顶部条 ================= */
.top-bar{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;}
.top-actions{display:flex;align-items:center;gap:14px;}
.theme-switch{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:999px;background:rgba(255,255,255,.65);border:1px solid rgba(255,105,180,.22);box-shadow:0 10px 25px rgba(0,0,0,.06);backdrop-filter:blur(10px);}
.theme-switch .dot{width:20px;height:20px;border-radius:50%;border:1px solid rgba(0,0,0,0.05);outline:none;box-shadow:0 8px 15px rgba(0,0,0,.14);cursor:pointer;transition:transform .2s ease;}
.theme-switch .dot:hover{transform:scale(1.1);}
.theme-switch .dot.pink{background:linear-gradient(135deg,#ff69b4,#ffb3d9)}
.theme-switch .dot.lavender{background:linear-gradient(135deg,#b38bff,#ffd1ff)}
.theme-switch .dot.mint{background:linear-gradient(135deg,#4ee6c6,#d7fff6)}
.theme-switch .dot.sky{background:linear-gradient(135deg,#5bbcff,#d5f1ff)}
.theme-switch .dot:active{transform:scale(.94)}
.theme-switch .dot.active{outline:2px solid rgba(255,255,255,.85);outline-offset:2px;box-shadow:0 10px 18px rgba(0,0,0,.12),0 8px 15px rgba(0,0,0,.14);}

.top-left{display:flex;align-items:center;gap:14px;}
.top-left img{width:52px;height:52px;border-radius:50%;}
.site-name{font-size:22px;font-weight:600;color:var(--site-name-color);}
.top-dot{font-size:26px;color:var(--top-dot-color);cursor:pointer;line-height:1;}

/* ================= 主容器 ================= */
.main-box{max-width:1200px;margin:0 auto;padding:10px 15px;}
.card-wrap{display:flex;flex-direction:column;background:var(--card-bg);border-radius:20px;box-shadow:var(--soft-shadow);overflow:hidden;}
@media(min-width:992px){.card-wrap{flex-direction:row;}}

/* 左侧 Banner */
.banner{flex:1 1 60%;background:var(--banner-bg) url('/static/banner-bg.png') center/cover no-repeat;padding:50px 40px;display:flex;flex-direction:column;justify-content:center;text-align:center;}
.banner-title{font-size:40px;font-weight:700;line-height:1.2;color:#fff;}
.banner-sub{font-size:24px;font-weight:500;color:rgba(255,255,255,.85);opacity:.95;}
.banner-desc{font-size:18px;line-height:1.6;background:rgba(0,0,0,.22);padding:25px;border-radius:80px 80px 80px 0;color:#fff;text-align:left;margin-top:25px;}
@media(max-width:575.98px){
  .banner{padding:35px 25px;}
  .banner-title{font-size:30px;}
  .banner-sub{font-size:18px;}
  .banner-desc{font-size:15px;border-radius:60px 60px 60px 0;}
}

/* 右侧白色区 */
.side-box{flex:1 1 40%;padding:40px 30px;position:relative;}
.notice-bar{background:linear-gradient(90deg,var(--notice-start) 0%,var(--notice-end) 100%);color:#fff;border-radius:12px;padding:20px 12px;font-size:15px;margin-bottom:30px;position:relative;overflow:hidden;white-space:nowrap;}
.notice-bar span{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    animation:marqRL 15s linear infinite;
    background:linear-gradient(90deg,#ff4d4f,#ff7a45,#ffa940,#bae637,#40a9ff,#9254de,#ff4d4f);
    -webkit-background-clip:text;
    color:transparent;
    font-weight:600;
}
@keyframes marqRL{0%{left:100%}100%{left:-100%}}

/* 分类 Tabs */
.side-tabs{display:-webkit-box;display:flex;gap:14px;overflow-x:auto;margin-bottom:25px;}
.side-tabs button{background:#f5f7fa;border:none;border-radius:8px;padding:8px 22px;font-size:14px;font-weight:900;color:#333;white-space:nowrap;}
.side-tabs button.active{background:var(--primary);color:#fff;letter-spacing:1px;}

/* 导航网格 */
.nav-grid{display:-webkit-box;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;text-align:center;}
.nav-grid>a{-webkit-box-flex:0;flex:0 0 calc(25% - 26px);} /* desktop 4列 */
@media(max-width:575.98px){.nav-grid>a{flex:0 0 calc(33.333% - 20px);} /* mobile 3列 */ }

.nav-grid img{width:70px;height:70px;border-radius:12px;margin-bottom:6px;}
.nav-grid .title{font-size:17px;font-weight:700;color:var(--nav-title-color);}

/* 右下角音乐按钮（玻璃拟物风） */
.kf-btn{position:fixed;right:20px;bottom:25px;width:72px;height:72px;border-radius:50%;overflow:hidden;
  box-shadow:0 12px 28px rgba(0,0,0,.12);
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.95),rgba(255,255,255,.55) 40%,color-mix(in srgb, var(--primary) 25%, transparent) 70%,color-mix(in srgb, var(--primary) 15%, transparent));
  backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.6);
}
.kf-btn:hover{transform:translateY(-2px);transition:.15s ease;}
.kf-btn svg{width:38px;height:38px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.12));}

html,body{min-height:100%}
/* 音乐按钮状态 */
.kf-btn.music-playing{box-shadow:0 14px 34px rgba(0,0,0,.16)}
.kf-btn.music-playing svg{animation:spin 3.2s linear infinite}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}