/* ============================================================
   E小调吉他谱 · 全局设计系统（site.css）
   深墨导航 · 暖白底 · 琥珀金强调 —— 高端音乐感
   ============================================================ */
:root{
    --ink:        #16130f;   /* 近黑墨色（导航/标题） */
    --ink-2:      #221d16;
    --gold:       #c8a25a;   /* 琥珀金（强调） */
    --gold-2:     #e0bd6f;   /* 亮金 */
    --gold-3:     #a17f3d;   /* 深金 */
    --paper:      #f6f3ee;   /* 暖白底 */
    --card:       #ffffff;
    --line:       #ebe5dc;
    --line-2:     #ddd5c8;
    --text:       #23201a;
    --text-2:     #7d7468;
    --text-3:     #a79e91;
    --shadow:     0 10px 30px rgba(40,30,15,.08);
    --shadow-sm:  0 2px 10px rgba(40,30,15,.06);
    --radius:     16px;
}

*{ box-sizing:border-box; }
html, body{ margin:0; padding:0; }
body{
    font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
    color:var(--text);
    background:
        radial-gradient(1200px 500px at 20% -10%, rgba(200,162,90,.10), transparent 60%),
        radial-gradient(900px 420px at 90% -20%, rgba(255,255,255,.6), transparent 60%),
        var(--paper);
    background-attachment:fixed;
    -webkit-font-smoothing:antialiased;
}

/* ============ 顶部导航（深墨） ============ */
.site-head{
    position:sticky; top:0; z-index:900;
    background:linear-gradient(160deg, #14110d 0%, #1d1812 60%, #201a13 100%);
    box-shadow:0 4px 24px rgba(20,15,8,.18);
    border-bottom:1px solid rgba(200,162,90,.16);
}
/* 滚动锚定区块：让内容停在 sticky 头部下方完整显示，不被头部压住 */
.cards, .art-cards, .col-side, .sec-title, .sc-grid, .home-grid, .rec-grid, section[id], .hb-inner{ scroll-margin-top:72px; }
@media (max-width:640px){ .cards, .art-cards, .col-side, .sec-title, .sc-grid, .rec-grid{ scroll-margin-top:96px; } }
.head-inner{
    max-width:1100px; margin:0 auto; padding:0 16px;
    display:flex; align-items:center; gap:18px; height:58px;
}
.logo{
    display:flex; align-items:center; gap:9px;
    font-size:19px; font-weight:700; letter-spacing:.5px;
    color:#f2e6cd; text-decoration:none; white-space:nowrap;
}
.logo svg{ width:24px; height:24px; flex:none; }
.logo b{ color:var(--gold-2); font-weight:700; }
.logo:hover{ color:#fff; }
.head-nav{ display:flex; gap:2px; font-size:14px; }
.head-nav a{
    color:rgba(255,255,255,.66); text-decoration:none;
    padding:7px 14px; border-radius:8px; transition:all .18s;
}
.head-nav a:hover{ color:#fff; background:rgba(255,255,255,.07); }
.head-nav a.on{ color:var(--gold-2); background:rgba(200,162,90,.12); }
/* 看谱器：电脑端专属入口，颜色与其他导航区分 */
.head-nav a.nav-viewer{
    color:#ffd98a; font-weight:600;
    background:linear-gradient(135deg, rgba(224,189,111,.20), rgba(200,162,90,.08));
    border:1px solid rgba(224,189,111,.48);
    margin-left:4px;
}
.head-nav a.nav-viewer::before{
    content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
    background:var(--gold-2); margin-right:7px; vertical-align:2px;
    box-shadow:0 0 7px rgba(224,189,111,.85);
}
.head-nav a.nav-viewer:hover{
    color:#241a08; border-color:transparent;
    background:linear-gradient(135deg, var(--gold-2), var(--gold));
    box-shadow:0 3px 12px rgba(200,162,90,.35);
}
.head-nav a.nav-viewer:hover::before{ background:#241a08; box-shadow:none; }
.head-nav a.nav-viewer.on{ color:#241a08; border-color:transparent; background:linear-gradient(135deg, var(--gold-2), var(--gold)); }
.head-nav a.nav-viewer.on::before{ background:#241a08; box-shadow:none; }
/* 看谱器仅电脑端可用：窄屏直接隐藏入口 */
@media (max-width:1000px){ .head-nav a.nav-viewer{ display:none !important; } }
.user{ display:flex; align-items:center; gap:8px; margin-left:auto; white-space:nowrap; }
.ub-btn{
    display:inline-block; padding:7px 14px; border-radius:8px; font-size:13px;
    background:rgba(255,255,255,.05); border:1px solid rgba(200,162,90,.35);
    color:#e8d9b5; text-decoration:none; cursor:pointer; line-height:1.4;
    transition:all .18s;
}
.ub-btn:hover{ background:rgba(200,162,90,.16); color:#fff; border-color:var(--gold-2); }
.ub-btn.gold{
    background:linear-gradient(135deg, var(--gold-2), var(--gold));
    border:none; color:#241a08; font-weight:600;
}
.ub-btn.gold:hover{ background:linear-gradient(135deg, #eccb7d, #c8a25a); color:#241a08; }

/* ============ 通用按钮 ============ */
.btn{
    display:inline-block; padding:9px 18px; border-radius:10px; font-size:14px;
    border:1px solid var(--line-2); background:var(--card); color:var(--text);
    text-decoration:none; cursor:pointer; transition:all .18s;
}
.btn:hover{ border-color:var(--gold); color:var(--gold-3); box-shadow:var(--shadow-sm); }
.btn.primary{
    background:linear-gradient(135deg, var(--gold-2), var(--gold));
    border:none; color:#241a08; font-weight:600;
}
.btn.primary:hover{ box-shadow:0 6px 20px rgba(200,162,90,.4); }

/* ============ 卡片 ============ */
.card{
    background:var(--card); border-radius:var(--radius);
    border:1px solid var(--line);
    box-shadow:var(--shadow-sm);
    padding:20px 22px;
}
.card h2{
    font-size:16px; margin:0 0 14px; color:var(--text);
    display:flex; align-items:center; gap:8px;
}
.card h2::before{
    content:""; width:3px; height:16px; border-radius:2px;
    background:linear-gradient(180deg, var(--gold-2), var(--gold));
}

/* ============ 徽章 ============ */
.badge{
    display:inline-block; font-size:12px; color:#6d6250;
    background:linear-gradient(180deg, #faf6ec, #f3ecdc);
    border:1px solid #e4d9bd; border-radius:999px; padding:4px 12px;
    letter-spacing:.3px;
}
.badge.gold{
    color:#7c5f22; background:linear-gradient(135deg, #f7e7bd, #eed9a4);
    border-color:#e3c47f; font-weight:600;
}

/* ============ 输入框 ============ */
.inp{
    width:100%; padding:11px 14px; border:1px solid var(--line-2);
    border-radius:10px; font-size:14px; background:#fdfcf9; outline:none;
    transition:border-color .18s, box-shadow .18s;
}
.inp:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(200,162,90,.15); }

/* ============ 登录弹层 ============ */
#authMask{
    position:fixed; inset:0; z-index:10000; background:rgba(18,14,8,.52);
    backdrop-filter:blur(4px);
    display:flex; align-items:center; justify-content:center;
}
#authBox{
    width:340px; background:#fff; border-radius:18px; padding:26px 28px 30px;
    box-shadow:0 24px 60px rgba(10,6,2,.35);
    border:1px solid var(--line);
}
.auth-tabs{ display:flex; align-items:center; gap:20px; font-size:16px; }
.auth-tabs span{ cursor:pointer; color:var(--text-3); padding-bottom:5px; transition:color .15s; }
.auth-tabs span.on{ color:var(--gold-3); border-bottom:2px solid var(--gold); font-weight:600; }
.auth-tabs #authClose{ margin-left:auto; color:var(--text-3); font-size:24px; line-height:1; }
.auth-tabs #authClose:hover{ color:var(--ink); }
.auth-form{ margin-top:20px; }
.auth-form input{
    width:100%; box-sizing:border-box; padding:11px 14px; margin-bottom:13px;
    border:1px solid var(--line-2); border-radius:10px; font-size:14px;
    background:#fdfcf9; outline:none; transition:all .18s;
}
.auth-form input:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(200,162,90,.15); }
#authMsg{ min-height:18px; font-size:12px; color:#c0392b; margin-bottom:9px; }
.auth-btn{
    width:100%; padding:12px; border:none; border-radius:10px; cursor:pointer;
    background:linear-gradient(135deg, var(--gold-2), var(--gold)); color:#241a08;
    font-size:15px; font-weight:600; letter-spacing:4px;
    transition:box-shadow .2s;
}
.auth-btn:hover{ box-shadow:0 8px 24px rgba(200,162,90,.45); }

/* ============ 页脚（深墨） ============ */
.site-foot{
    margin-top:34px; border-top:1px solid rgba(200,162,90,.14);
    background:linear-gradient(160deg, #14110d, #1d1812);
}
.foot-in{
    max-width:1100px; margin:0 auto; padding:22px 16px;
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.foot-in .copy{ font-size:12px; color:rgba(255,255,255,.4); }
.foot-nav{ display:flex; gap:18px; }
.foot-nav a{ font-size:12px; color:rgba(255,255,255,.55); text-decoration:none; }
.foot-nav a:hover{ color:var(--gold-2); }

/* ============ 通用分页 ============ */
.pages{ display:flex; justify-content:center; gap:8px; margin-top:24px; flex-wrap:wrap; }
.pages a, .pages span{
    padding:7px 14px; border-radius:8px; background:var(--card);
    border:1px solid var(--line-2); color:var(--text-2);
    text-decoration:none; font-size:13px; transition:all .15s;
}
.pages .cur{ background:linear-gradient(135deg, var(--gold-2), var(--gold)); color:#241a08; border-color:transparent; font-weight:600; }
.pages a:hover{ color:var(--gold-3); border-color:var(--gold); }

/* ============ 移动端头部适配 ============ */
@media (max-width:860px){
  .head-inner{ gap:10px; padding:0 10px; }
  .logo{ font-size:16px; gap:7px; }
  .logo svg{ width:20px; height:20px; }
  .head-nav a{ padding:6px 9px; font-size:13px; }
  .ub-btn{ padding:6px 9px; font-size:12px; }
  .user{ gap:6px; }
}
@media (max-width:640px){
  /* 窄屏：导航换行到第二行，登录区不溢出 */
  .head-inner{ flex-wrap:wrap; height:auto; padding:8px 10px; row-gap:6px; }
  .head-nav{ order:3; width:100%; justify-content:center; }
  .user{ margin-left:auto; gap:4px; }
  /* 已登录用户收敛为「昵称(进收藏) + 退出」两个紧凑按钮 */
  .user .ub-btn{ padding:5px 9px; font-size:11px; border-radius:7px; line-height:1.3; }
  #userInfo .mine{ display:none; }               /* 隐藏“我的制谱”（与昵称入口职责重复） */
  #userInfo .nick .nick-suf{ display:none; }     /* 移动端只显示用户名，去掉“· 我的收藏”尾巴，避免截断出省略号 */
  #userInfo .nick{ max-width:150px; overflow:hidden; text-overflow:ellipsis; }
  #userInfo .out{ padding:5px 7px; }
}
@media (max-width:420px){
  #userInfo .nick{ max-width:110px; }
  .head-nav{ gap:0; }
  .head-nav a{ padding:5px 7px; font-size:12px; }
}