/* ============================================================
   style-tabs.css · 页面框架 + 电台首页 + 设置页 + 情感模块样式
   ──────────────────────────────────────────────────────────────
   分区自上而下（均以「/* ==== … ==== *​/」注释条分隔，搜关键字直达）：
   1. 三栏 Tab 框架          .tabs / .tab-btn / .tab-panel
   2. 电台（tab-music）      .m-hero / .album-grid / .ltyv-section（听我读）
   3. 相册工具条（tab-album）.album-toolbar / #album-progress
   4. 我的 · 音色仓库（tab-mine）.card-box / .voice-item
   5. 我的 · 外观设置        .bg-presets / .bg-op-row（背景不透明度滑杆）
   6. 阅读页背景同步         #rv-bgimg（照片层，rv-hasimg 时全不透明）
   7. 情感模块 js-heart.js   .greet 问候条 / .letter-card 信笺 /
      #missyou-layer 想你模式 / #bday-overlay 生日覆盖层
   ⚠ 改后必须同步升 index.html 的 ?v= 令牌（immutable 一年缓存）。
   ============================================================ */
/* 三栏 Tab 框架 */
.tabs{display:flex;gap:8px;padding:10px 14px 0;flex-wrap:wrap}
.tab-btn{padding:8px 18px;border:1px solid #cbb892;border-bottom:none;border-radius:10px 10px 0 0;background:#f3ead6;color:#5b4a2a;cursor:pointer;font-size:15px;font-weight:600}
.tab-btn.active{background:#fff;color:#2a2113;box-shadow:0 -2px 0 #b8902f inset}
.tab-panel{display:none;padding:0 0 40px}
.tab-panel.active{display:block}
.mine-wrap{max-width:760px;margin:18px auto;padding:0 14px}
.card-box{border:1px solid #e3d6bd;border-radius:12px;padding:16px;background:#fff;margin-bottom:14px}
.muted{color:#8a7a5a}
.voice-item{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid #eee;border-radius:10px;margin-bottom:8px}
.voice-item.active{border-color:#b8902f;background:#fff8ec}
.vrow{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
input.inp,textarea.inp,select.inp{padding:8px 10px;border:1px solid #cbb892;border-radius:8px;font-size:14px}
.btn{padding:8px 14px;border:0;border-radius:8px;background:#b8902f;color:#fff;cursor:pointer;font-size:14px}
.btn.ghost{background:#eee;color:#5b4a2a}
.btn.danger{background:#c0392b;color:#fff}
.hidden{display:none!important}

  /* ============ 统一亮色主题覆盖（全站） ============ */
  html{ background:var(--bg); }
  body{ background:transparent!important; }
  #bg-layer{ position:fixed; inset:0; z-index:-2; background:var(--bg); opacity:.5;
    background-size:cover!important; background-position:center!important; background-repeat:no-repeat!important; transition:background .3s, opacity .3s; }
  #bg-layer-alt{ background-size:cover!important; background-position:center!important; background-repeat:no-repeat!important; }
  /* 读者页不再叠古风底图（以前 ::before 铺 assets/bg-girl.jpg 让整屏看起来像空白）*/
  /* 音乐栏：去暗渐变，统一亮色 */
  #tab-music{ background:var(--bg)!important; color:var(--fg)!important; }
  #tab-music .sec-head{ color:var(--fg)!important; }
  #tab-music .cat-chips .chip{ background:#fff!important; border-color:var(--line)!important; color:var(--muted)!important; }
  #tab-music .cat-chips .chip.active{ background:var(--accent)!important; color:#fff!important; border-color:var(--accent)!important; }
  .m-hero .m-info h2{ color:var(--fg)!important; }
  .m-hero .m-info p{ color:var(--muted)!important; }
  .album .a-title{ color:var(--fg)!important; }
  .album .a-cover::after{ background:linear-gradient(0deg,rgba(0,0,0,.30),transparent 62%)!important; }
  /* 播放页（含音乐上下文）统一亮色 */
  #player-page.music{ background:linear-gradient(180deg,#f7f3ec,#efe9df)!important; color:var(--fg)!important; }
  #player-page.music .pp-top{ border-bottom:1px solid var(--line)!important; }
  #player-page.music .pp-title{ color:var(--fg)!important; }
  #player-page.music .pp-back,#player-page.music .pp-list-btn{ border-color:var(--line)!important; color:var(--fg)!important; }
  #player-page.music .pp-sub .sent{ color:var(--muted)!important; }
  #player-page.music .pp-sub .sent.active{ background:rgba(184,144,47,.16)!important; color:#2a2113!important; font-weight:700!important; }
  #player-page.music .pp-sub .sent-regen{ color:var(--accent)!important; }
  #player-page.music .pp-controls{ border-top:1px solid var(--line)!important; }
  #player-page.music .pp-btns button{ background:var(--accent)!important; }
  #player-page.music .pp-btns #pp-restart{ background:transparent!important; border:1px solid var(--accent)!important; color:var(--accent)!important; }
  #player-page.music .vinyl{ display:block!important; }
  .pp-sub .sent.active{ background:rgba(184,144,47,.16)!important; color:#2a2113!important; font-weight:700!important; }
  .pp-sub .sent-regen{ color:var(--accent)!important; }
  /* 全局正在播放条：亮色 */
  #np-bar{ background:rgba(255,255,255,.97)!important; color:var(--fg)!important;
    border-top:1px solid var(--line)!important; box-shadow:0 -4px 16px rgba(0,0,0,.08)!important; }
  .np-vinyl{ background:conic-gradient(#5b4a2a 0 50%,#2a2113 0 50%)!important;
    box-shadow:inset 0 0 0 3px var(--accent),0 0 0 2px rgba(0,0,0,.06)!important; }
  .np-sub{ color:var(--muted)!important; }
  .np-btn{ color:var(--fg)!important; }
  /* 续播条亮色 */
  #resume-bar{ background:#fff!important; box-shadow:0 -4px 16px rgba(0,0,0,.12)!important; }
  /* 徽章 / 输入 / 列表亮色 */
  .badge{ background:#efe9df!important; color:var(--fg)!important; }
  .book-cover .badge{ background:rgba(0,0,0,.45)!important; color:#fff!important; }
  .inp{ background:#fff!important; color:var(--fg)!important; }
  .pp-playlist{ background:#fff!important; border:1px solid var(--line)!important; }
  .pp-extra select{ background:#fff!important; color:var(--fg)!important; }
  /* 电子书书架亮色 */
  .ebook-book{ background:#fff!important; }
  .ebook-book .eb-title{ color:var(--fg)!important; }
  /* 背景预设色块 */
  .bg-presets{ display:flex; gap:10px; flex-wrap:wrap; }
  .bg-sw{ width:56px; height:56px; border-radius:12px; border:2px solid var(--line); cursor:pointer;
    font-size:11px; color:#5b4a2a; font-weight:600; box-shadow:0 2px 6px rgba(0,0,0,.08); }
  .bg-sw:hover{ border-color:var(--accent); }
  .bg-sw.active{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(184,144,47,.35); }

  /* 背景不透明度滑杆 */
  .bg-op-row{ margin-top:12px; }
  .bg-op-row label{ display:flex; justify-content:space-between; font-size:13px; color:#5b4a2a; font-weight:600; margin-bottom:6px; }
  .bg-op-row label span{ color:var(--accent); }
  .bg-op-row input[type=range]{ width:100%; height:4px; -webkit-appearance:none; appearance:none;
    background:linear-gradient(90deg,var(--accent),var(--line)); border-radius:2px; outline:none; cursor:pointer; }
  .bg-op-row input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none;
    width:18px; height:18px; border-radius:50%; background:var(--accent); border:2px solid #fff;
    box-shadow:0 1px 4px rgba(0,0,0,.25); }
  .bg-op-row input[type=range]::-moz-range-thumb{ width:16px; height:16px; border-radius:50%;
    background:var(--accent); border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.25); }

  /* ============ 阅读页背景同步（与全站相册轮换一致） ============ */
  /* #rv-bgimg 是 #reader-view 的第一个子图层：铺当前背景照片（全不透明，照片清晰可见）。
     Canvas 有背景图时完全透明、只画文字（js-album.js rvRenderCanvas 按 rv-hasimg 判断）。
     用户选纯色预设 / 无照片时 #rv-hasimg 不加，层自动隐藏，阅读页保持纯色。 */
  #rv-bgimg{ position:absolute; inset:0; z-index:0; pointer-events:none;
    background-size:cover; background-position:center; background-repeat:no-repeat;
    opacity:0; transition:opacity .6s ease; }
  #reader-view.rv-hasimg #rv-bgimg{ opacity:1; }

  /* ============ 情感模块（js-heart.js） ============ */
  /* 问候条：首页 appbar 右侧 + 阅读页顶部 */
  .greet{ margin-left:auto; font-size:13px; color:var(--nc); letter-spacing:.5px; white-space:nowrap;
    opacity:.85; animation:greetIn .8s ease; }
  .rv-greet{ position:absolute; top:52px; left:0; right:0; text-align:center; font-size:12px;
    color:var(--nc); letter-spacing:1px; opacity:.6; pointer-events:none; z-index:5;
    animation:greetIn .8s ease; }
  @keyframes greetIn{ from{ opacity:0; transform:translateY(-4px);} to{ opacity:.85; transform:none;} }

  /* 「给她的话」信笺 */
  .letters-editor{ margin:10px 14px; padding:14px; border:1px solid rgba(184,144,47,.25);
    border-radius:12px; background:rgba(255,255,255,.55); }
  .letter-list{ margin:6px 14px 20px; display:flex; flex-direction:column; gap:10px; }
  .letter-card{ padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.6);
    border:1px solid rgba(184,144,47,.2); box-shadow:0 1px 4px rgba(90,67,38,.06);
    animation:greetIn .5s ease; }
  .letter-text{ font-size:14px; line-height:1.8; color:#4a3f2a; white-space:pre-wrap; }
  .letter-meta{ display:flex; justify-content:space-between; align-items:center; margin-top:8px;
    font-size:11px; color:#9a8a6a; }
  .letter-del{ border:0; background:transparent; cursor:pointer; font-size:13px; opacity:.55; }
  .letter-del:hover{ opacity:1; }

  /* 夜间「想你」模式：全屏氛围层 + 她的名字 */
  body.missyou #bg-layer{ filter:brightness(.55) saturate(.8); }
  #missyou-layer{ position:fixed; inset:0; z-index:60; pointer-events:none; opacity:0;
    transition:opacity 1.2s ease; background:radial-gradient(ellipse at 50% 70%, rgba(30,20,60,.35), rgba(8,6,20,.5)); }
  body.missyou #missyou-layer{ opacity:1; }
  #missyou-layer .my-name{ position:absolute; left:50%; top:38%; transform:translate(-50%,-50%);
    font-size:min(17vw,120px); font-weight:300; letter-spacing:.18em; color:#e8e2ff;
    text-shadow:0 0 18px rgba(167,139,255,.8), 0 0 60px rgba(124,92,255,.5);
    opacity:.14; animation:myFloat 9s ease-in-out infinite; white-space:nowrap; }
  #missyou-layer .my-sub{ position:absolute; left:50%; top:52%; transform:translate(-50%,-50%);
    font-size:14px; letter-spacing:1.2em; text-indent:1.2em; color:#cfc6ff; opacity:.28;
    animation:myFloat 9s ease-in-out infinite reverse; }
  @keyframes myFloat{ 0%,100%{ transform:translate(-50%,-50%) scale(1);} 50%{ transform:translate(-50%,-53%) scale(1.03);} }

  /* 生日（农历 11 月 29 日）覆盖层 */
  #bday-overlay{ position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center;
    background:rgba(12,8,24,.55); backdrop-filter:blur(3px); opacity:0; transition:opacity .8s ease; }
  #bday-overlay.on{ opacity:1; }
  .bday-box{ text-align:center; padding:38px 44px; border-radius:20px;
    background:linear-gradient(160deg, rgba(255,246,230,.96), rgba(255,230,238,.92));
    box-shadow:0 12px 50px rgba(60,20,60,.35); animation:bdayPop .7s cubic-bezier(.2,1.4,.4,1); }
  @keyframes bdayPop{ from{ transform:scale(.7); opacity:0;} to{ transform:scale(1); opacity:1;} }
  .bday-cake{ font-size:84px; line-height:1; cursor:pointer; user-select:none;
    animation:cakeBounce 1.6s ease-in-out infinite; }
  @keyframes cakeBounce{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
  .bday-title{ margin-top:14px; font-size:22px; font-weight:700; color:#7a3b5e; }
  .bday-sub{ margin-top:6px; font-size:13px; color:#9a6a8a; }
  .bday-hint{ margin-top:10px; font-size:12px; color:#b08aa0; }
  .bday-close{ margin-top:18px; border:1px solid #c98aa8; background:transparent; color:#7a3b5e;
    padding:8px 22px; border-radius:20px; cursor:pointer; font-size:13px; }
  .bday-close:hover{ background:#c98aa8; color:#fff; }

  /* 彩蛋：爱心雨 + 悄悄话（js-heart.js bindSmile） */
  .smile-heart{ position:fixed; top:-30px; z-index:400; pointer-events:none;
    animation:smileFall 3.2s ease-in forwards; }
  @keyframes smileFall{ to{ transform:translateY(112vh) rotate(28deg); opacity:.08; } }
  .smile-toast{ position:fixed; left:50%; bottom:12vh; transform:translateX(-50%);
    z-index:400; max-width:80vw; background:rgba(42,33,19,.9); color:#ffe9c2;
    font-size:14px; padding:10px 20px; border-radius:20px; pointer-events:none;
    box-shadow:0 6px 24px rgba(0,0,0,.25); animation:greetIn .4s ease; }