/* ============================================================
   QZG123 智能导航 - 现代视觉风格（渐变 / 玻璃拟态 / 动画）
   ============================================================ */
:root {
  --c-bg: #f5f7fe;
  --c-bg2: #eef1fb;
  --c-white: #ffffff;
  --c-glass: rgba(255,255,255,.65);
  --c-glass-strong: rgba(255,255,255,.92);
  --c-text: #1d2440;
  --c-text2: #5b6385;
  --c-text3: #949ab8;
  --c-primary: #5b6cff;
  --c-primary2: #9b5bff;
  --c-accent: #18c8b5;
  --c-border: rgba(120,130,180,.16);
  --grad-main: linear-gradient(120deg, #6a5cff 0%, #8a5cff 40%, #ff7eb3 100%);
  --grad-soft: linear-gradient(120deg, rgba(106,92,255,.10), rgba(255,126,179,.10));
  --radius: 20px;
  --radius-sm: 14px;
  --shadow: 0 12px 40px rgba(80,90,160,.12);
  --shadow-hover: 0 20px 50px rgba(106,92,255,.22);
  /* 背景光斑与底色（供主题覆盖） */
  --bg-base: linear-gradient(180deg, #f7f9ff 0%, #eef1fb 100%);
  --bg-glow-1: rgba(138,92,255,.16);
  --bg-glow-2: rgba(91,108,255,.16);
  --bg-glow-3: rgba(24,200,181,.10);
  --orb-1: #9b8bff; --orb-2: #ff9ec7; --orb-3: #7fe9da;
  --orb-opacity: .45;
  /* Topbar / 卡片硬性背景（供深色主题覆盖） */
  --c-top: rgba(255,255,255,.72);
  --c-card: #ffffff;
  --c-card2: #ffffff;
  --c-stat: #ffffff;
  --c-input: #ffffff;
  --c-hover-bg: rgba(106,92,255,.08);
  /* Banner 主题渐变 */
  --c-banner-bg: linear-gradient(100deg, #6a5cff, #9b5bff 55%, #ff7eb3);
  --banner-shadow: 0 12px 34px rgba(138,92,255,.30);
  --banner-shadow-hover: 0 18px 44px rgba(138,92,255,.40);
}

/* ============================================================
   主题 1：浅色通透（默认）— 温暖紫蓝
   已在 :root 定义，无需覆盖
   ============================================================ */

/* ============================================================
   主题 2：深海暗夜 — 深色极客风
   ============================================================ */
body.theme-dark {
  --c-bg: #0e1020;
  --c-bg2: #14172b;
  --c-white: #1a1f38;
  --c-glass: rgba(28,33,58,.72);
  --c-glass-strong: rgba(34,40,68,.92);
  --c-text: #eef1ff;
  --c-text2: #b3b9e0;
  --c-text3: #7c83b8;
  --c-primary: #7c8cff;
  --c-primary2: #b06dff;
  --c-accent: #2fe6c8;
  --c-border: rgba(140,150,210,.18);
  --grad-main: linear-gradient(120deg, #7c8cff 0%, #9b5bff 50%, #2fe6c8 100%);
  --grad-soft: linear-gradient(120deg, rgba(124,140,255,.16), rgba(47,230,200,.12));
  --shadow: 0 14px 44px rgba(0,0,0,.45);
  --shadow-hover: 0 22px 54px rgba(124,140,255,.32);
  --bg-base: linear-gradient(180deg, #0c0e1c 0%, #13162a 100%);
  --bg-glow-1: rgba(124,140,255,.22);
  --bg-glow-2: rgba(155,91,255,.20);
  --bg-glow-3: rgba(47,230,200,.12);
  --orb-1: #6a5cff; --orb-2: #b06dff; --orb-3: #2fe6c8;
  --orb-opacity: .32;
  --c-top: rgba(18,22,40,.78);
  --c-card: #181d33;
  --c-card2: #1d2340;
  --c-stat: #181d33;
  --c-input: #1a1f38;
  --c-hover-bg: rgba(124,140,255,.14);
  --c-banner-bg: linear-gradient(100deg, #7c8cff, #b06dff 55%, #2fe6c8);
  --banner-shadow: 0 12px 34px rgba(124,140,255,.28);
  --banner-shadow-hover: 0 18px 44px rgba(47,230,200,.34);
}

/* ============================================================
   主题 3：日落暖橙 — 温暖橙金
   ============================================================ */
body.theme-sunset {
  --c-bg: #fff6ef;
  --c-bg2: #ffe9db;
  --c-white: #ffffff;
  --c-glass: rgba(255,255,255,.7);
  --c-glass-strong: rgba(255,255,255,.94);
  --c-text: #3a2415;
  --c-text2: #8a6547;
  --c-text3: #b29581;
  --c-primary: #ff7a3d;
  --c-primary2: #ff4d8d;
  --c-accent: #ffb03a;
  --c-border: rgba(220,150,110,.20);
  --grad-main: linear-gradient(120deg, #ff9a3d 0%, #ff5e62 50%, #ff4d8d 100%);
  --grad-soft: linear-gradient(120deg, rgba(255,122,61,.12), rgba(255,77,141,.10));
  --shadow: 0 12px 40px rgba(220,130,90,.16);
  --shadow-hover: 0 20px 50px rgba(255,94,98,.26);
  --bg-base: linear-gradient(180deg, #fff7ef 0%, #ffe4d2 100%);
  --bg-glow-1: rgba(255,154,61,.18);
  --bg-glow-2: rgba(255,77,141,.14);
  --bg-glow-3: rgba(255,176,58,.12);
  --orb-1: #ffb56b; --orb-2: #ff7eb3; --orb-3: #ffd27f;
  --orb-opacity: .42;
  --c-top: rgba(255,250,245,.78);
  --c-card: #fffdfb;
  --c-card2: #fff6ee;
  --c-stat: #fffdfb;
  --c-input: #ffffff;
  --c-hover-bg: rgba(255,122,61,.10);
  --c-banner-bg: linear-gradient(100deg, #ff9a3d, #ff5e62 55%, #ff4d8d);
  --banner-shadow: 0 12px 34px rgba(255,94,98,.30);
  --banner-shadow-hover: 0 18px 44px rgba(255,77,141,.40);
}

/* ============================================================
   主题 4：薄荷青绿 — 清新自然
   ============================================================ */
body.theme-mint {
  --c-bg: #eefcf7;
  --c-bg2: #d9f5ec;
  --c-white: #ffffff;
  --c-glass: rgba(255,255,255,.68);
  --c-glass-strong: rgba(255,255,255,.94);
  --c-text: #123a32;
  --c-text2: #3f6f64;
  --c-text3: #7fa89c;
  --c-primary: #12b886;
  --c-primary2: #0ca5b0;
  --c-accent: #38d9a9;
  --c-border: rgba(70,170,150,.18);
  --grad-main: linear-gradient(120deg, #12b886 0%, #0ca5b0 50%, #38d9a9 100%);
  --grad-soft: linear-gradient(120deg, rgba(18,184,134,.12), rgba(56,217,169,.10));
  --shadow: 0 12px 40px rgba(40,150,120,.14);
  --shadow-hover: 0 20px 50px rgba(18,184,134,.24);
  --bg-base: linear-gradient(180deg, #f0fdf8 0%, #d6f4ea 100%);
  --bg-glow-1: rgba(18,184,134,.16);
  --bg-glow-2: rgba(12,165,176,.14);
  --bg-glow-3: rgba(56,217,169,.12);
  --orb-1: #5fe3c0; --orb-2: #6ad1ff; --orb-3: #b5f0d8;
  --orb-opacity: .42;
  --c-top: rgba(255,255,255,.74);
  --c-card: #f6fffb;
  --c-card2: #ecfaf3;
  --c-stat: #f6fffb;
  --c-input: #ffffff;
  --c-hover-bg: rgba(18,184,134,.10);
  --c-banner-bg: linear-gradient(100deg, #12b886, #0ca5b0 55%, #38d9a9);
  --banner-shadow: 0 12px 34px rgba(18,184,134,.26);
  --banner-shadow-hover: 0 18px 44px rgba(12,165,176,.34);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  background:
    radial-gradient(1100px 700px at 85% -8%, var(--bg-glow-1) 0%, transparent 55%),
    radial-gradient(900px 600px at -8% 8%, var(--bg-glow-2) 0%, transparent 55%),
    radial-gradient(700px 500px at 50% 110%, var(--bg-glow-3) 0%, transparent 55%),
    var(--bg-base);
  color:var(--c-text);font-size:14px;line-height:1.6;min-height:100vh;overflow-x:hidden;
  transition:background .4s ease,color .4s ease;
}
a{text-decoration:none;color:var(--c-primary)}

/* ===== 背景动态光斑 ===== */
.bg-orbs{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:var(--orb-opacity);animation:float 18s ease-in-out infinite;transition:background .4s ease,opacity .4s ease}
.orb-1{width:440px;height:440px;background:var(--orb-1);top:-140px;left:-90px}
.orb-2{width:400px;height:400px;background:var(--orb-2);top:28%;right:-130px;animation-delay:-6s}
.orb-3{width:340px;height:340px;background:var(--orb-3);bottom:-130px;left:32%;animation-delay:-12s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-40px) scale(1.1)}}

/* ===== Top Bar ===== */
.top-bar{position:sticky;top:0;z-index:50;background:var(--c-top);backdrop-filter:blur(16px);border-bottom:1px solid var(--c-border);transition:background .4s ease}
.top-inner{max-width:1240px;margin:0 auto;padding:12px 24px;display:flex;justify-content:space-between;align-items:center}
.logo-icon{font-size:22px;margin-right:8px}
.logo-text{font-size:19px;font-weight:800;background:var(--grad-main);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.5px}
.top-right{display:flex;align-items:center;gap:14px}
.site-badge{font-size:12px;padding:5px 12px;border-radius:20px;background:var(--grad-soft);border:1px solid rgba(106,92,255,.25);color:var(--c-primary);font-weight:600}
.site-url{font-size:12px;color:var(--c-text3);letter-spacing:1px}

/* ===== Hero ===== */
.hero{position:relative;z-index:1;padding:54px 24px 24px;text-align:center}
.hero-inner{max-width:920px;margin:0 auto}
.hero-title{font-size:42px;font-weight:900;line-height:1.15;margin-bottom:14px}
.grad-text{background:var(--grad-main);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{font-size:16px;color:var(--c-text2);margin-bottom:30px}
.hero-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:center}
.search-box{display:flex;align-items:center;background:var(--c-input);box-shadow:0 8px 30px rgba(80,90,160,.12);border:1px solid var(--c-border);border-radius:40px;padding:6px 6px 6px 0;backdrop-filter:blur(10px);transition:border .25s,box-shadow .25s,background .4s ease;flex:1;min-width:380px;max-width:620px;margin:0 auto}
.search-box:focus-within{border-color:var(--c-primary);box-shadow:0 0 0 4px rgba(106,92,255,.15),0 8px 30px rgba(80,90,160,.12)}
.search-ic{font-size:17px;padding-left:22px}
.search-inp{flex:1;border:none;background:transparent;padding:14px 14px;font-size:15px;outline:none;color:var(--c-text)}
.search-inp::placeholder{color:var(--c-text3);transition:opacity .25s}
.search-inp:focus::placeholder{opacity:.6}
.search-btn{padding:13px 30px;background:var(--grad-main);color:#fff;border:none;font-size:14px;font-weight:700;border-radius:30px;cursor:pointer;white-space:nowrap;transition:transform .15s,box-shadow .2s;letter-spacing:.5px}
.search-btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(138,92,255,.45)}

/* 外置：搜索框上方的引擎切换 + 提示 */
.search-engine-row{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin:0 auto 14px;max-width:620px;width:100%}
.search-engine-label{font-size:13px;color:var(--c-text2);letter-spacing:.5px}
.engine-tabs{display:inline-flex;align-items:center;gap:0;border-radius:22px;background:var(--c-glass);border:1px solid var(--c-border);padding:4px;backdrop-filter:blur(8px);flex-shrink:0}
.eng{padding:6px 14px;border:none;background:transparent;color:var(--c-text2);font-size:13px;font-weight:600;border-radius:18px;cursor:pointer;transition:all .2s;white-space:nowrap}
.eng.active{background:var(--grad-main);color:#fff;box-shadow:0 4px 12px rgba(138,92,255,.30)}
.eng:not(.active):hover{color:var(--c-primary);background:var(--c-hover-bg)}
.search-engine-tip{font-size:12px;color:var(--c-text3);font-weight:500;letter-spacing:.3px;background:var(--c-glass);border:1px solid var(--c-border);border-radius:18px;padding:5px 12px}
@media(max-width:640px){
  .search-engine-row{gap:8px}
  .search-engine-tip{display:none}
}
@media(max-width:520px){
  .search-inp{font-size:14px;padding:13px 10px}
  .eng{padding:6px 11px;font-size:12px}
}
.quick-row{display:grid;gap:10px;grid-template-columns:repeat(6,minmax(0,1fr));max-width:880px;margin:18px auto 0;width:100%}
.qlink{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--c-text2);padding:11px 14px;border-radius:14px;background:var(--c-input);box-shadow:0 4px 14px rgba(80,90,160,.08);border:1px solid var(--c-border);transition:all .2s,background .4s ease;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.qlink::before{content:'网';display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--grad-main);color:#fff;font-size:12px;font-weight:800;flex-shrink:0}
.qlink:hover{color:#fff;background:var(--grad-main);border-color:transparent;transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.qlink:hover::before{background:rgba(255,255,255,.25);color:#fff}
@media(max-width:960px){.quick-row{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:780px){.quick-row{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:520px){.quick-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:380px){.quick-row{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 统计条 */
.stat-bar{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px}
/* 底部统计条：放在 footer 上方，横向紧凑，跟随主题 */
.bottom-stats{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;max-width:900px;margin:0 auto;padding:0 24px;width:100%;position:relative;z-index:1}
.bottom-stats .stat{padding:14px 24px;min-width:auto;flex:1 1 0;max-width:200px;text-align:center}
@media(max-width:680px){
  .bottom-stats .stat{flex:1 1 40%;min-width:120px}
}
.stat{background:var(--c-stat);box-shadow:0 8px 24px rgba(80,90,160,.10);border:1px solid var(--c-border);border-radius:14px;padding:12px 22px;min-width:120px;transition:background .4s ease}
.stat-num{font-size:24px;font-weight:800;background:var(--grad-main);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-label{font-size:11px;color:var(--c-text3);margin-top:2px}

/* ===== Banner ===== */
.banner{position:relative;z-index:1;max-width:1240px;margin:14px auto 0;padding:0 24px}
.banner-card{display:flex;align-items:center;gap:14px;background:var(--c-banner-bg);border:1px solid transparent;border-radius:var(--radius);padding:16px 24px;cursor:pointer;box-shadow:var(--banner-shadow);transition:transform .2s,box-shadow .2s,background .4s ease;position:relative;overflow:hidden}
.banner-card:hover{transform:translateY(-2px);box-shadow:var(--banner-shadow-hover)}
.banner-ic{font-size:26px;position:relative;z-index:1}
.banner-txt{flex:1;font-size:15px;color:#fff;font-weight:600;position:relative;z-index:1;text-shadow:0 1px 2px rgba(0,0,0,.12)}
.banner-arrow{font-size:18px;color:#fff;position:relative;z-index:1;transition:transform .2s}
.banner-card:hover .banner-arrow{transform:translateX(4px)}

/* ===== AI音乐生成 ===== */
.music-gen{position:relative;z-index:1;max-width:1240px;margin:0 auto 26px;padding:0 24px}
.music-card{display:flex;gap:26px;background:var(--c-glass);box-shadow:var(--shadow);border:1px solid var(--c-border);border-radius:var(--radius);padding:26px;backdrop-filter:blur(12px);transition:background .4s ease}
.music-left{flex:1;min-width:0}
.music-left h3{font-size:20px;margin-bottom:6px;color:var(--c-text)}
.music-sub{font-size:13px;color:var(--c-text3);margin-bottom:18px}
.music-right{width:340px;flex-shrink:0;background:var(--c-card2);border:1px solid var(--c-border);border-radius:var(--radius-sm);padding:22px;display:flex;align-items:center;justify-content:center;min-height:300px;transition:background .4s ease}
.music-placeholder{text-align:center;color:var(--c-text3)}
.music-ph-icon{font-size:50px;display:block;margin-bottom:10px;opacity:.55}
.music-mode-row{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.mode-btn{padding:8px 18px;border-radius:22px;border:1px solid var(--c-border);background:var(--c-input);font-size:13px;cursor:pointer;transition:all .18s,background .4s ease;color:var(--c-text2)}
.mode-btn:hover{border-color:var(--c-primary);color:var(--c-primary)}
.mode-btn.active{background:var(--grad-main);color:#fff;border-color:transparent;font-weight:600}
.music-textarea{width:100%;height:104px;padding:13px;border:1px solid var(--c-border);border-radius:var(--radius-sm);font-size:14px;resize:vertical;outline:none;font-family:inherit;line-height:1.6;background:var(--c-input);color:var(--c-text);transition:background .4s ease}
.music-textarea:focus{border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(106,92,255,.12)}
.music-opts{display:flex;gap:9px;margin-top:10px;flex-wrap:wrap;align-items:center}
.music-opt-inp{padding:8px 12px;border:1px solid var(--c-border);border-radius:8px;font-size:13px;outline:none;background:var(--c-input);color:var(--c-text);min-width:120px;transition:background .4s ease}
.music-opt-inp:focus{border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(106,92,255,.12)}
.music-chk{font-size:12px;color:var(--c-text2);display:flex;align-items:center;gap:5px;cursor:pointer;white-space:nowrap}
.music-btn{margin-top:14px;padding:11px 36px;background:var(--grad-main);color:#fff;border:none;border-radius:26px;font-size:14px;font-weight:700;cursor:pointer;transition:transform .15s,box-shadow .2s}
.music-btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(138,92,255,.45)}
.music-btn:disabled{opacity:.5;cursor:wait;transform:none;box-shadow:none}
.music-hint{font-size:12px;color:var(--c-text3);margin-top:10px;min-height:18px}
.music-track{display:flex;align-items:center;gap:8px;margin-bottom:12px;width:100%}
.track-num{font-size:16px;font-weight:700;color:var(--c-primary);width:24px}
.track-dl{font-size:18px;color:var(--c-text3);flex-shrink:0}
.track-dl:hover{color:var(--c-primary)}

/* ===== Main Layout ===== */
.main-wrap{position:relative;z-index:1;max-width:1240px;margin:24px auto;padding:0 24px;display:flex;gap:22px;align-items:flex-start}
.sidebar{width:236px;flex-shrink:0;position:sticky;top:80px}

/* Sidebar */
.sidebar{background:var(--c-glass);box-shadow:var(--shadow);border:1px solid var(--c-border);border-radius:var(--radius);backdrop-filter:blur(12px);overflow:hidden;transition:background .4s ease}
.side-nav{display:flex;flex-direction:column;padding:10px}
.side-item{display:flex;align-items:center;gap:11px;padding:12px 18px;font-size:14px;color:var(--c-text2);transition:color .18s,background .18s,transform .12s;border-radius:10px;margin:3px 6px;cursor:pointer;position:relative;border-left:3px solid transparent}
.side-item:hover{background:var(--c-hover-bg);color:var(--c-primary);transform:translateX(2px)}
.side-item.active{background:var(--grad-soft);color:var(--c-primary);border-left:3px solid var(--c-primary);font-weight:700}
.side-ic{font-size:17px;width:22px;text-align:center;flex-shrink:0}
.side-lbl{white-space:nowrap}

/* Content Tabs */
.tabs-bar{position:relative;display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;background:var(--c-glass);box-shadow:var(--shadow);border-radius:var(--radius);border:1px solid var(--c-border);margin-bottom:18px;backdrop-filter:blur(12px);padding:8px 14px;transition:background .4s ease}
.tab{position:relative;padding:10px 22px;font-size:13px;color:var(--c-text2);cursor:pointer;border-radius:24px;transition:color .18s,background .18s,transform .12s;white-space:nowrap;border:none;background:transparent;font-family:inherit;letter-spacing:.3px}
.tab:hover{color:var(--c-primary);background:rgba(106,92,255,.08);transform:translateY(-1px)}
.tab:focus{outline:none;color:var(--c-primary)}
.tab.active{color:#fff;background:var(--grad-main);font-weight:700;box-shadow:0 6px 18px rgba(138,92,255,.35)}
.tab.active::after{content:"";position:absolute;left:50%;bottom:-10px;width:24px;height:3px;border-radius:3px;background:var(--grad-main);transform:translateX(-50%);box-shadow:0 2px 8px rgba(138,92,255,.6)}

/* Tab views */
.tab-view{display:none;animation:fade .4s ease}
.tab-view.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* Section */
.sec-block{background:var(--c-glass);box-shadow:var(--shadow);border:1px solid var(--c-border);border-radius:var(--radius);padding:22px;margin-bottom:22px;backdrop-filter:blur(12px);transition:background .4s ease}
.sec-hd{font-size:18px;font-weight:800;color:var(--c-text);margin-bottom:18px;display:flex;align-items:center}
.sec-hd-ic{margin-right:8px;font-size:20px}
.sec-more{margin-left:auto;font-size:12px;font-weight:500;color:var(--c-text3);transition:color .15s}
.sec-more:hover{color:var(--c-primary)}

/* Card Grid */
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1100px){.card-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.card-grid{grid-template-columns:1fr}}

.card{background:var(--c-card);box-shadow:0 6px 20px rgba(80,90,160,.08);border:1px solid var(--c-border);border-radius:var(--radius-sm);padding:16px;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s,background .4s ease;position:relative;overflow:hidden;animation:pop .4s ease backwards}
.card:hover{box-shadow:var(--shadow-hover);transform:translateY(-5px);border-color:var(--c-primary)}
.card::before{content:"";position:absolute;inset:0;background:var(--grad-main);opacity:0;transition:opacity .25s}
.card:hover::before{opacity:.06}
@keyframes pop{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.card-hd{display:flex;align-items:center;gap:11px;margin-bottom:10px;position:relative;z-index:1}
.card-ic{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;color:#fff;box-shadow:0 4px 14px rgba(106,92,255,.30)}
.card-img{width:44px;height:44px;border-radius:11px;object-fit:cover;flex-shrink:0}
.card-info{flex:1;min-width:0}
.card-name{font-size:14.5px;font-weight:700;color:var(--c-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-desc{font-size:12px;color:var(--c-text2);line-height:1.55;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px;position:relative;z-index:1}
.card-tags{display:flex;gap:5px;flex-wrap:wrap;position:relative;z-index:1}
.tag{font-size:10px;padding:3px 8px;border-radius:6px;background:rgba(91,108,255,.12);color:var(--c-primary);font-weight:600}
.tag-paid{background:rgba(255,160,80,.16);color:#f08a2a}
.tag-free{background:rgba(24,200,181,.14);color:#10a596}
.tag-hot{background:rgba(255,126,179,.16);color:#ff5fa0}

/* ===== 躺赚专区 ===== */
.tag-earn{background:rgba(255,193,7,.20);color:#c98a00}
.earn-intro{background:var(--c-glass);border:1px solid var(--c-border);border-radius:var(--radius);padding:20px 24px;margin-bottom:22px;box-shadow:var(--shadow);transition:background .4s ease}
.earn-intro h3{margin:0 0 10px;font-size:18px;color:var(--c-text)}
.earn-intro p{margin:0;line-height:1.85;font-size:13.5px;color:var(--c-text2)}
.earn-intro code{background:rgba(91,108,255,.12);color:var(--c-primary);padding:2px 7px;border-radius:6px;font-size:12px}
.earn-card{display:block;text-decoration:none;color:inherit}
.earn-card:hover{border-color:var(--c-primary)}

/* ===== News ===== */
.news-hd{margin-bottom:16px}
.news-hd h3{font-size:18px;color:var(--c-text)}
.news-list{display:flex;flex-direction:column;background:var(--c-glass);box-shadow:var(--shadow);border:1px solid var(--c-border);border-radius:var(--radius);padding:6px 12px;transition:background .4s ease}
.news-item{display:flex;gap:14px;padding:15px 12px;border-bottom:1px solid var(--c-border);transition:background .15s;text-decoration:none;color:inherit;border-radius:10px}
.news-item:hover{background:var(--c-hover-bg)}
.news-item:last-child{border-bottom:none}
.news-idx{width:34px;height:34px;border-radius:9px;background:var(--grad-soft);color:var(--c-primary);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0}
.news-body{flex:1;min-width:0}
.news-title{font-size:14px;font-weight:700;color:var(--c-text);display:block}
.news-item:hover .news-title{color:var(--c-primary)}
.news-desc{font-size:12px;color:var(--c-text2);margin-top:5px;line-height:1.55}

/* ===== Footer ===== */
.footer{position:relative;z-index:1;background:var(--c-glass);border-top:1px solid var(--c-border);padding:34px 0 26px;text-align:center;font-size:12px;color:var(--c-text3);margin-top:50px;backdrop-filter:blur(10px);transition:background .4s ease}
.footer-logo{font-size:16px;font-weight:800;background:var(--grad-main);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:10px}
.icp{margin-top:6px}

/* ===== 回到顶部 ===== */
.to-top{position:fixed;right:24px;bottom:28px;z-index:60;width:46px;height:46px;border-radius:50%;border:1px solid var(--c-border);background:var(--grad-main);color:#fff;font-size:20px;cursor:pointer;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .3s,transform .2s}
.to-top.show{opacity:1;pointer-events:auto}
.to-top:hover{transform:translateY(-3px)}

/* ===== Empty / Loading ===== */
.empty{text-align:center;padding:60px 20px;color:var(--c-text3)}
.empty-ic{font-size:42px;margin-bottom:10px;opacity:.5}
.loading{text-align:center;padding:40px;color:var(--c-text3)}

/* ===== About ===== */
.about-card{background:var(--c-glass);box-shadow:var(--shadow);border:1px solid var(--c-border);border-radius:var(--radius);padding:32px;backdrop-filter:blur(12px);line-height:1.8;transition:background .4s ease}
.about-card h3{font-size:22px;background:var(--grad-main);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:14px}
.about-card h4{font-size:16px;color:var(--c-text);margin:22px 0 10px;border-left:3px solid var(--c-primary);padding-left:10px}
.about-card p{color:var(--c-text2);margin-bottom:10px}
.about-card ul{list-style:none;padding:0;margin:8px 0 16px}
.about-card li{padding:8px 0;color:var(--c-text2);border-bottom:1px solid var(--c-border)}
.about-card li:last-child{border-bottom:none}
.about-card strong{color:var(--c-text)}

/* ===== Link Grid (教程资源用) ===== */
.link-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1100px){.link-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.link-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.link-grid{grid-template-columns:1fr}}

/* ===== 响应式 ===== */
@media(max-width:860px){
  .main-wrap{flex-direction:column}
  .sidebar{width:100%;position:static}
  .side-nav{flex-direction:row;flex-wrap:nowrap;overflow-x:auto}
  .side-item{margin:2px 4px;white-space:nowrap}
  .side-item.active{border-left:none;border-bottom:3px solid var(--c-primary)}
  .hero-title{font-size:32px}
  .music-card{flex-direction:column}
  .music-right{width:100%;min-height:200px}
  .music-opts{flex-direction:column}
  .music-opt-inp{width:100%}
}

/* ===== 主题切换器（右上角） ===== */
.theme-switch{position:relative;display:flex;align-items:center}
.theme-btn{display:flex;align-items:center;gap:7px;padding:7px 13px;border-radius:20px;background:var(--c-glass);border:1px solid var(--c-border);color:var(--c-text);font-size:13px;font-weight:600;cursor:pointer;backdrop-filter:blur(8px);transition:all .2s;white-space:nowrap}
.theme-btn:hover{border-color:var(--c-primary);color:var(--c-primary)}
.theme-btn .palette{font-size:15px}
.theme-menu{position:absolute;top:calc(100% + 10px);right:0;background:var(--c-glass-strong);backdrop-filter:blur(16px);border:1px solid var(--c-border);border-radius:16px;box-shadow:var(--shadow);padding:12px;z-index:60;display:none;min-width:188px;animation:pop .25s ease}
.theme-menu.show{display:block}
.theme-menu-title{font-size:11px;color:var(--c-text3);padding:2px 6px 9px;letter-spacing:.5px}
.theme-opt{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:11px;cursor:pointer;transition:background .15s}
.theme-opt:hover{background:var(--c-hover-bg)}
.theme-opt.active{background:var(--c-hover-bg)}
.theme-swatch{width:30px;height:30px;border-radius:9px;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.12);border:2px solid transparent}
.theme-opt.active .theme-swatch{border-color:var(--c-primary)}
.theme-opt-name{font-size:13px;color:var(--c-text);font-weight:600}
.theme-opt-desc{font-size:11px;color:var(--c-text3)}
.theme-opt-txt{display:flex;flex-direction:column;line-height:1.35}
@media(max-width:560px){
  .site-url{display:none}
  .theme-btn .t-label{display:none}
}

/* ===== 音乐付款说明 ===== */
.music-pay-note{font-size:12.5px;color:var(--c-text3);margin-top:12px;padding:10px 14px;background:var(--c-glass);border:1px dashed var(--c-border);border-radius:12px;line-height:1.6}

/* ===== 微信付款弹窗 ===== */
.pay-modal-mask{position:fixed;inset:0;z-index:200;background:rgba(20,24,45,.55);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:20px;animation:fade .25s ease}
.pay-modal-mask.show{display:flex}
.pay-modal{position:relative;width:340px;max-width:100%;background:var(--c-glass-strong);border:1px solid var(--c-border);border-radius:22px;box-shadow:var(--shadow);padding:28px 26px 22px;text-align:center;animation:pop .3s ease}
.pay-close{position:absolute;top:12px;right:16px;border:none;background:transparent;font-size:24px;line-height:1;color:var(--c-text3);cursor:pointer}
.pay-close:hover{color:var(--c-text)}
.pay-title{font-size:20px;font-weight:800;color:var(--c-text);margin-bottom:6px}
.pay-sub{font-size:13px;color:var(--c-text2);margin-bottom:18px;line-height:1.5}
.pay-qr-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:18px}
.pay-qr{width:220px;height:220px;border-radius:14px;border:1px solid var(--c-border);background:#fff;padding:8px}
.pay-qr-tip{font-size:12px;color:var(--c-text3);margin:0}
.pay-confirm{width:100%;padding:13px;border:none;border-radius:14px;background:var(--grad-main);color:#fff;font-size:15px;font-weight:700;cursor:pointer;transition:transform .15s,box-shadow .2s}
.pay-confirm:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(138,92,255,.4)}
.pay-foot{font-size:11.5px;color:var(--c-text3);margin-top:14px}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ============================================================
   视觉增强：引流 / 留存 / 微交互
   ============================================================ */

/* 顶部滚动进度条 */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;pointer-events:none}
.scroll-progress span{display:block;height:100%;width:0;background:var(--grad-main);box-shadow:0 0 12px rgba(106,92,255,.55);border-radius:0 3px 3px 0;transition:width .12s linear}

/* 标题渐变流动 */
.grad-text{background-size:200% auto;animation:shine 5s linear infinite}
@keyframes shine{to{background-position:200% center}}

/* Hero 数据背书徽章 */
.hero-badges{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:2px auto 24px}
.hb{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--c-text2);background:var(--c-glass);border:1px solid var(--c-border);border-radius:20px;padding:7px 15px;backdrop-filter:blur(10px);box-shadow:0 4px 16px rgba(80,90,160,.10);transition:all .25s,background .4s ease}
.hb:hover{color:#fff;background:var(--grad-main);border-color:transparent;transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.hb b{font-size:14px;color:var(--c-primary);font-weight:900}
.hb:hover b{color:#fff}

/* 搜索区整体卡片化：tab + 输入框融合为一块，成为视觉中心 */
.search-shell{background:var(--c-glass);border:1px solid var(--c-border);border-radius:26px;padding:12px 14px 14px;max-width:680px;width:100%;margin:0 auto;box-shadow:var(--shadow);backdrop-filter:blur(14px);transition:border .25s,box-shadow .25s,background .4s ease}
.search-shell:focus-within{border-color:var(--c-primary);box-shadow:0 0 0 4px rgba(106,92,255,.14),var(--shadow-hover)}
.ss-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.search-shell .search-box{border:none;background:transparent;box-shadow:none;min-width:0;max-width:100%;flex:none;margin:0;padding:4px 4px 4px 0;border-radius:30px}
.search-shell .search-box:focus-within{box-shadow:none;border-color:transparent}
.hero-sub{margin-bottom:16px}
.hero-badges{margin-bottom:22px}

/* 热门搜索词：轻量化纯文字，避免与徽章抢视觉 */
.hot-words{display:flex;justify-content:center;align-items:center;gap:4px 12px;flex-wrap:wrap;max-width:880px;margin:14px auto 0}
.hw-label{font-size:12px;color:var(--c-text3);font-weight:700;letter-spacing:.5px;margin-right:2px}
.hword{font-size:12.5px;font-weight:600;color:var(--c-text2);background:transparent;border:none;border-radius:14px;padding:5px 11px;cursor:pointer;transition:all .2s}
.hword:hover{color:#fff;background:var(--grad-main);transform:translateY(-2px)}

/* 热门直达榜 */
.hot-strip{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 24px}
.hot-strip-inner{display:flex;align-items:center;gap:14px;background:var(--c-glass);border:1px solid var(--c-border);border-radius:var(--radius);padding:14px 18px;box-shadow:var(--shadow);backdrop-filter:blur(14px);transition:background .4s ease}
.hs-label{font-size:13px;font-weight:800;color:var(--c-primary);white-space:nowrap;flex-shrink:0;min-width:max-content}
.hs-list{display:flex;gap:9px;flex-wrap:wrap;flex:1;min-width:0;max-height:94px;overflow:hidden;padding:8px 6px;margin:-8px -6px}
.hs-item{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--c-text);background:var(--c-card);border:1px solid var(--c-border);border-radius:14px;padding:7px 13px;cursor:pointer;transition:all .22s,background .4s ease;box-shadow:0 3px 10px rgba(80,90,160,.07);white-space:nowrap}
.hs-item:hover{transform:translateY(-3px) scale(1.03);border-color:var(--c-primary);box-shadow:var(--shadow-hover)}
.hs-rank{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;border-radius:6px;background:var(--grad-soft);color:var(--c-primary);font-size:10.5px;font-weight:900}
.hs-item:nth-child(-n+3) .hs-rank{background:var(--grad-main);color:#fff}
.hs-more{font-size:12.5px;font-weight:700;color:var(--c-primary);white-space:nowrap;flex-shrink:0;padding:7px 12px;border-radius:12px;transition:all .2s}
.hs-more:hover{background:var(--c-hover-bg);transform:translateX(2px)}

/* 卡片扫光微交互 */
.card::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);transition:left .6s ease;pointer-events:none;z-index:2}
.card:hover::after{left:135%}
.card-ic{transition:transform .3s ease}
.card:hover .card-ic{transform:rotate(-7deg) scale(1.09)}
.card-name{transition:color .2s}
.card:hover .card-name{color:var(--c-primary)}
body.theme-dark .card::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),transparent)}

/* 滚动入场动画 */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* 悬浮引流按钮（躺赚专区） */
.float-cta{position:fixed;right:24px;bottom:86px;z-index:60;display:flex;align-items:center;gap:7px;background:var(--grad-main);color:#fff;font-size:13px;font-weight:700;padding:11px 17px;border-radius:26px;box-shadow:0 10px 28px rgba(138,92,255,.38);opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .3s,transform .25s}
.float-cta.show{opacity:1;pointer-events:auto;transform:none}
.float-cta:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 14px 34px rgba(138,92,255,.5)}
.float-cta::before{content:"";position:absolute;inset:-4px;border-radius:30px;border:2px solid rgba(138,92,255,.35);animation:ctaPulse 2.2s ease-out infinite;pointer-events:none}
@keyframes ctaPulse{0%{transform:scale(.94);opacity:.85}70%{transform:scale(1.18);opacity:0}100%{opacity:0}}

@media(max-width:780px){
  .hot-strip-inner{flex-direction:column;align-items:flex-start;gap:10px}
  .float-cta{right:14px;bottom:80px;padding:9px 14px;font-size:12px}
}

/* 分类快捷跳转条 */
.cat-jump{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--c-glass);border:1px solid var(--c-border);border-radius:var(--radius);padding:14px 18px;margin-bottom:20px;box-shadow:var(--shadow);backdrop-filter:blur(12px);transition:background .4s ease}
.cj-label{font-size:12.5px;font-weight:800;color:var(--c-primary);white-space:nowrap;flex-shrink:0}
.cj-item{font-size:12.5px;font-weight:600;color:var(--c-text2);background:var(--c-card);border:1px solid var(--c-border);border-radius:14px;padding:6px 12px;transition:all .2s,background .4s ease;white-space:nowrap}
.cj-item:hover{color:#fff;background:var(--grad-main);border-color:transparent;transform:translateY(-2px)}
.cj-item b{color:var(--c-primary);font-weight:800;margin-left:2px}
.cj-item:hover b{color:#fff}

/* 底部常用网站直达 */
.bottom-links{position:relative;z-index:1;max-width:1180px;margin:26px auto 0;padding:0 24px}
.bl-inner{background:var(--c-glass);border:1px solid var(--c-border);border-radius:var(--radius);padding:22px 24px 24px;box-shadow:var(--shadow);backdrop-filter:blur(14px);transition:background .4s ease}
.bl-title{font-size:14px;font-weight:800;color:var(--c-text2);text-align:center;margin-bottom:4px;letter-spacing:1px}

/* ===== AI音乐推广卡（邀请注册） ===== */
.music-promo{position:relative;z-index:1;max-width:1180px;margin:22px auto;padding:0 24px}
.mp-card{display:flex;gap:24px;align-items:center;background:var(--c-banner-bg);border-radius:var(--radius);padding:26px 30px;box-shadow:var(--banner-shadow);color:#fff;transition:box-shadow .3s}
.mp-card:hover{box-shadow:var(--banner-shadow-hover)}
.mp-left{flex:1;min-width:0}
.mp-badge{display:inline-block;font-size:12px;font-weight:800;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.35);padding:5px 13px;border-radius:16px;margin-bottom:10px;letter-spacing:.5px}
.mp-title{font-size:24px;font-weight:900;margin:0 0 8px;color:#fff;line-height:1.25}
.mp-sub{font-size:13.5px;line-height:1.7;margin:0 0 16px;color:rgba(255,255,255,.92)}
.mp-sub b{color:#fff;border-bottom:2px solid rgba(255,255,255,.55);padding-bottom:1px}
.mp-cta-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mp-btn{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#e0356b;font-size:14.5px;font-weight:800;padding:12px 24px;border-radius:26px;box-shadow:0 8px 22px rgba(0,0,0,.18);transition:transform .2s,box-shadow .2s}
.mp-btn:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 12px 28px rgba(0,0,0,.25)}
.mp-note{font-size:12px;color:rgba(255,255,255,.85)}
.mp-right{display:flex;flex-direction:column;gap:10px;flex-shrink:0}
.mp-model{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);border-radius:12px;padding:9px 14px;backdrop-filter:blur(6px)}
.mpm-ic{font-size:20px}
.mp-model b{display:block;font-size:13px;color:#fff;line-height:1.2}
.mp-model i{font-style:normal;font-size:11px;color:rgba(255,255,255,.82)}
@media(max-width:780px){
  .mp-card{flex-direction:column;align-items:flex-start}
  .mp-right{flex-direction:row;flex-wrap:wrap}
  .mp-title{font-size:20px}
}

/* ============================================================
   移动端专属优化
   ============================================================ */

/* 底部导航栏：仅移动端显示 */
.mnav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--c-glass-strong);backdrop-filter:blur(16px);border-top:1px solid var(--c-border);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
  justify-content:space-around;align-items:center;transition:background .4s ease}
.mn-item{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;
  color:var(--c-text3);font-size:11px;padding:4px 2px;border-radius:12px;transition:color .2s}
.mn-item span{font-size:19px;line-height:1}
.mn-item i{font-style:normal;font-weight:600}
.mn-item.active{color:var(--c-primary)}
.mn-item:active{background:var(--c-hover-bg)}

@media(max-width:860px){
  /* ---- 基础与顶栏 ---- */
  .top-inner{padding:10px 14px}
  .site-badge{display:none}
  .logo-text{font-size:16px}
  .hero{padding:28px 16px 14px}
  .hero-title{font-size:25px;line-height:1.24}
  .hero-sub{font-size:13.5px;margin-bottom:14px;padding:0 4px}
  .hero-badges{gap:7px;margin-bottom:16px}
  .hb{font-size:11.5px;padding:6px 11px}
  .hb b{font-size:13px}
  .hero-row{gap:12px;flex-direction:column}

  /* ---- 搜索：字号≥16px 防止 iOS 聚焦自动缩放 ---- */
  .search-shell{max-width:100%;padding:10px 10px 12px;border-radius:22px}
  .search-inp{font-size:16px;padding:12px 8px}
  .search-btn{padding:11px 18px;font-size:14px}
  .search-ic{padding-left:14px;font-size:16px}
  .search-engine-tip{display:none}
  .engine-tabs{width:100%;justify-content:center}

  /* ---- 横向滚动：热词 / 榜单 / 分类跳转 ---- */
  .hot-words{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:2px 0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .hot-words::-webkit-scrollbar{display:none}
  .hw-label,.hword{flex-shrink:0}
  .hot-strip{padding:0 16px}
  .hot-strip-inner{padding:12px 14px}
  .hs-list{flex-wrap:nowrap;overflow-x:auto;max-height:none;padding:0;margin:0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .hs-list::-webkit-scrollbar{display:none}
  .hs-item,.hs-more{flex-shrink:0}
  .cat-jump{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .cat-jump::-webkit-scrollbar{display:none}
  .cj-label,.cj-item{flex-shrink:0}

  /* ---- 侧边栏：吸顶横向 chip 条 ---- */
  .sidebar{position:sticky;top:56px;z-index:40;border-radius:0;margin-bottom:12px}
  .side-nav{padding:8px 10px;gap:6px}
  .side-item{border-radius:16px;padding:7px 12px;font-size:12.5px;background:var(--c-card);border:1px solid var(--c-border)}
  .side-item.active{border-bottom:none;border-left:none;background:var(--grad-soft)}

  /* ---- 二级 tab 横向滚动 ---- */
  .tabs-bar{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:14px;padding:8px 12px;margin-bottom:14px}
  .tabs-bar::-webkit-scrollbar{display:none}
  .tab{flex-shrink:0;font-size:13px}

  /* ---- 内容区 ---- */
  .main-wrap{padding:0 16px}
  .sec-block{padding:16px 14px;border-radius:16px;margin-bottom:16px}
  .sec-hd{font-size:14px}
  .sec-more{display:none}
  .card-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .card{padding:12px}
  .card-ic{width:38px;height:38px;font-size:19px;border-radius:10px}
  .card-name{font-size:13.5px}
  .card-desc{font-size:11.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

  /* ---- 音乐推广卡 ---- */
  .music-promo{padding:0 16px;margin:16px auto}
  .mp-card{padding:20px 18px;gap:16px}
  .mp-title{font-size:19px}
  .mp-sub{font-size:12.5px;margin-bottom:14px}
  .mp-btn{width:100%;justify-content:center;padding:13px 18px}
  .mp-right{flex-direction:row;flex-wrap:wrap;gap:8px}
  .mp-model{padding:7px 11px}

  /* ---- 悬浮元素避开底部导航 + 安全区 ---- */
  .float-cta{right:14px;bottom:calc(78px + env(safe-area-inset-bottom,0px));padding:9px 14px;font-size:12px}
  .to-top{right:14px;bottom:calc(78px + env(safe-area-inset-bottom,0px));width:42px;height:42px}
  .mnav{display:flex}
  footer.footer{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}

  /* ---- 底部区域 ---- */
  .bottom-links{padding:0 16px;margin-top:18px}
  .bl-inner{padding:16px 14px}
  .quick-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .qlink{font-size:12px;padding:9px 6px;border-radius:12px;gap:5px}
  .bottom-stats{padding:0 16px;gap:8px}
  .bottom-stats .stat{flex:1 1 44%;min-width:0;padding:11px 8px}
  .stat-num{font-size:20px}

  /* ---- 触控优化：去掉 hover 位移，避免点击后样式粘滞 ---- */
  .card:hover{transform:none;box-shadow:0 6px 20px rgba(80,90,160,.08)}
  .hs-item:hover,.cj-item:hover,.qlink:hover,.hword:hover{transform:none}
  .card::after{display:none}
}

@media(max-width:560px){
  .hero-title{font-size:22px}
  .side-item{font-size:12px;padding:6px 10px}
  .mp-title{font-size:18px}
  .quick-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:400px){
  .hero-title{font-size:20px}
  .card-grid{grid-template-columns:1fr}
  .hero-badges .hb{font-size:11px;padding:5px 9px}
}

/* 横屏矮屏：隐藏底部导航，避免挤压内容 */
@media(max-height:460px) and (orientation:landscape){
  .mnav{display:none}
  footer.footer{padding-bottom:24px}
  .float-cta,.to-top{bottom:14px}
}

/* ============================================================
   移动端 UI 重设计：统一间距 · 强化层级 · 触控友好
   ============================================================ */
@media(max-width:860px){
  :root{--m-pad:14px;--m-radius:16px;--m-gap:12px}

  /* ---- 全站统一边距：所有区块左右、圆角一致，视觉才整齐 ---- */
  .hero{padding:20px var(--m-pad) 10px}
  .hot-strip,.music-promo,.bottom-links,.bottom-stats{padding-left:var(--m-pad);padding-right:var(--m-pad)}
  .main-wrap{padding:0 var(--m-pad);gap:var(--m-gap)}
  .hot-strip,.music-promo,.bottom-links,.cat-jump,.sec-block,.bl-inner,.hot-strip-inner,.mp-card{border-radius:var(--m-radius)}

  /* ---- 顶栏：更紧凑、有分隔感 ---- */
  .top-inner{padding:9px var(--m-pad)}
  .top-bar{box-shadow:0 2px 12px rgba(80,90,160,.10)}
  .logo-icon{font-size:20px}
  .logo-text{font-size:17px;font-weight:800;letter-spacing:.5px}
  .site-badge,.site-url{display:none}
  .theme-btn{padding:6px 9px;border-radius:18px;gap:0}
  .theme-btn .t-label{display:none}
  .theme-btn .palette{font-size:16px}

  /* ---- Hero：标题更醒目 ---- */
  .hero-title{font-size:24px;line-height:1.28;letter-spacing:-.3px;margin-bottom:10px}
  .hero-sub{font-size:13px;margin-bottom:12px;line-height:1.6}

  /* ---- 徽章：2×2 网格，不再参差换行 ---- */
  .hero-badges{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 auto 15px;max-width:420px}
  .hb{justify-content:center;align-items:center;text-align:center;padding:9px 10px;border-radius:14px;font-size:12px;line-height:1.3}
  .hb b{font-size:13px}

  /* ---- 搜索卡：圆角统一、按钮更大好点 ---- */
  .hero-row{gap:12px;flex-direction:column}
  .search-shell{padding:10px;border-radius:20px}
  .ss-top{justify-content:center;margin-bottom:8px}
  .search-ic{padding-left:12px;font-size:16px}
  .search-inp{font-size:16px;padding:12px 10px}
  .search-btn{padding:12px 22px;border-radius:24px;font-size:14.5px}
  .engine-tabs{width:100%;justify-content:center;background:transparent;border-color:transparent;padding:0;gap:6px}
  .eng{border:1px solid var(--c-border);border-radius:18px;padding:6px 14px;font-size:12.5px;background:var(--c-card)}
  .eng.active{border-color:transparent}

  /* ---- 热词 ---- */
  .hot-words{gap:6px 10px;padding:2px 0}
  .hword{padding:5px 11px;font-size:12.5px}

  /* ---- 榜单：更紧凑 ---- */
  .hot-strip{margin-top:2px}
  .hot-strip-inner{padding:12px;gap:10px}
  .hs-label{font-size:12.5px;min-width:auto}
  .hs-item{padding:6px 11px;font-size:12.5px;border-radius:12px}

  /* ---- 侧栏 chip：选中态填充渐变，一眼看出当前分类 ---- */
  .sidebar{position:sticky;top:52px;z-index:40;border-radius:0;margin-bottom:10px;
           box-shadow:0 4px 14px rgba(80,90,160,.10)}
  .side-nav{padding:8px var(--m-pad);gap:7px}
  .side-item{padding:7px 13px;font-size:12.5px;border-radius:18px;
             background:var(--c-card);border:1px solid var(--c-border);box-shadow:0 2px 6px rgba(80,90,160,.06)}
  .side-item.active{background:var(--grad-main);border-color:transparent;
                    box-shadow:0 6px 16px rgba(138,92,255,.32)}
  .side-item.active .side-lbl,.side-item.active .side-ic{color:#fff;font-weight:800}
  .side-ic{font-size:14px}

  /* ---- 二级 tab：选中态同样填充渐变 ---- */
  .tabs-bar{padding:7px 10px;border-radius:14px;gap:6px;margin-bottom:12px}
  .tab{font-size:13px;padding:8px 14px;border-radius:20px}
  .tab.active{background:var(--grad-main);color:#fff;box-shadow:0 6px 16px rgba(138,92,255,.30)}

  /* ---- 区块与工具卡片：更像 App 列表 ---- */
  .sec-block{padding:14px 12px;margin-bottom:14px}
  .sec-hd{font-size:14.5px;margin-bottom:12px}
  .card-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .card{padding:12px 11px;border-radius:14px}
  .card-hd{gap:9px;margin-bottom:8px}
  .card-ic{width:36px;height:36px;font-size:18px;border-radius:11px}
  .card-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .card-desc{font-size:11px;line-height:1.5;-webkit-line-clamp:2}
  .card-tags{margin-top:8px}
  .card:active{transform:scale(.97)}

  /* 分类跳转条 */
  .cat-jump{padding:12px;margin-bottom:12px}
  .cj-item{padding:6px 11px;font-size:12.5px;border-radius:12px}

  /* ---- 音乐推广卡 ---- */
  .music-promo{margin:14px auto}
  .mp-card{padding:18px 16px;gap:14px}
  .mp-title{font-size:19px}
  .mp-sub{font-size:12.5px;margin-bottom:14px}
  .mp-btn{width:100%;justify-content:center;padding:13px 18px}
  .mp-right{flex-direction:row;gap:8px}
  .mp-model{padding:7px 10px;border-radius:11px}

  /* ---- 底部导航：顶部圆角 + 阴影，选中高亮 ---- */
  .mnav{padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));
        box-shadow:0 -4px 18px rgba(80,90,160,.14);border-radius:18px 18px 0 0}
  .mn-item{gap:3px;font-size:11px;padding:5px 2px;border-radius:12px}
  .mn-item span{font-size:20px;transition:transform .2s}
  .mn-item.active{background:var(--grad-soft)}
  .mn-item.active span{transform:scale(1.14)}

  /* ---- 悬浮元素：底栏已有「领福利」，隐藏重复按钮 ---- */
  .float-cta{display:none}
  .to-top{bottom:calc(78px + env(safe-area-inset-bottom,0px));right:var(--m-pad);width:44px;height:44px}

  /* ---- 底部 ---- */
  footer.footer{padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))}
  .bottom-links{margin-top:14px}
  .bl-inner{padding:14px 12px}
  .bl-title{font-size:13px;margin-bottom:8px}
  .quick-row{grid-template-columns:repeat(3,1fr);gap:8px}
  .qlink{font-size:12px;padding:10px 6px;border-radius:12px;gap:5px}
  .bottom-stats{gap:8px}
  .bottom-stats .stat{flex:1 1 44%;padding:12px 8px;border-radius:14px}
  .stat-num{font-size:19px}

  /* ---- 触控：去掉 hover 位移，保留点击缩放反馈 ---- */
  .card:hover{transform:none;box-shadow:0 4px 14px rgba(80,90,160,.10)}
  .hs-item:hover,.cj-item:hover,.qlink:hover,.hword:hover,.tab:hover,.hb:hover{transform:none}
  .card::after{display:none}
}

/* 小屏（≤400px）：单列 + 卡片横向紧凑排布，类似 App 列表 */
@media(max-width:400px){
  .hero-title{font-size:21px}
  .card-grid{grid-template-columns:1fr;gap:9px}
  .card{display:flex;align-items:center;gap:11px;padding:11px 12px}
  .card-hd{flex:1;min-width:0;margin-bottom:0}
  .card-desc,.card-tags{display:none}
  .card-name{font-size:13.5px}
  .card-ic{width:38px;height:38px;font-size:19px}
}