/* ===================================================================
   光屋谱库 · 学员端「质感层」 finish.css
   -------------------------------------------------------------------
   【它是什么】
   一层**只改外观、不改结构**的样式。加载在 base.css 和 index.html 的
   内联 <style> **之后**,所以它的规则会盖住前两者。

   【为什么单独一个文件、而不是直接改 base.css】
   base.css 是学员端 + 老师端 + 谱面页**共用**的一份(学员端/老师端共用这一份)。
   改它 = 两边外观一起变 ⇒ 老师端得重新验收一遍。
   ⇒ 这一层**只被学员端和谱面页引入**,老师端/控制台一点没变。
   ⇒ 想摘除:把 index.html / sheet.html 里那行
        <link rel="stylesheet" href="finish.css?v=...">
     删掉即可,页面立刻回到现在的样子(没有别的依赖)。

   【这一层动了什么 —— 三句话】
   ① 颜色:换成苹果那套暖白/纸色/墨黑(纸 #FAF8F3 / 纸色 #F1EDE4 / 墨 #202521)
   ② 质感:圆角加大、卡片浮起时有一层**看得见的**投影、按钮改胶囊
   ③ 动效:统一用同一条缓动曲线和时长(200ms 悬停 / 300ms 切换),
      跟住系统「减少动态效果」的开关

   【没动的】布局、字号档位、DOM 结构、功能、适老尺寸(正文≥17px、
   按钮≥52px、可点区≥44px)全部原样 —— 这是一层皮,不是重做。

   【口径来源】@西瓜同学 第20集《UI设计Skill: 让AI学会Apple设计美学的高级审美》
   + 第21集《提升AI审美！两个Skill做出Apple式高级审美网页交互》片中出现的设计参数:
   暖白 #FAF8F3 / 纸色 #F1EDE4 / 正文 #202521 / 圆角 16px / 卡片内距 20-24px /
   悬停位移 6px / 悬停 200ms / 切换 300ms。
   =================================================================== */

/* ---------- 1. 颜色 token(苹果暖白系) ---------- */
:root{
  --bg:#FAF8F3;          /* 原来 #F7F6F3 —— 偏冷,苹果是暖白 */
  --card2:#F1EDE4;       /* 原来 #F1F0EC —— 偏冷 */
  --ink:#202521;         /* 原来 #1A1A1A —— 纯黑太硬,苹果是带绿的墨色 */
  --line:rgba(32,37,33,.10);
  --line2:rgba(32,37,33,.17);
  --r:16px;              /* 原来 10px */
  /* 统一动效口径:一条曲线、一组时长 */
  --ease:cubic-bezier(.32,.72,0,1);
  --t-hover:200ms;
  --t-swap:300ms;
}

/* ---------- 2. 圆角:苹果的圆是"连续曲率",所以统一放大 ---------- */
.card,.entry,.hcard,.newbar,.side .row,.rf input,.rf textarea,.acc .fld input{
  border-radius:16px;
}
.nav button,.hd-btn,.gw-sw-i{border-radius:999px}
.hd-search input{border-radius:22px}
.hero-search .box{border-radius:26px}
.hero-search .go,.big-btn,.pbtn{border-radius:999px}
.gw-sw{border-radius:999px}
.pvw-bar .vbtn{border-radius:12px}

/* ---------- 3. 卡片:明显浮起 + 看得见的投影 ---------- */
/* 原来:hover 是「边框变黑 + 上浮 3px」—— 边框变黑很硬。
   苹果的做法是:靠投影把卡片托起来。
   ⚠ 梁Sir 2026-10-28 02:1x 拍板:「**明显浮起** —— 卡片明显飘在页面上,投影看得清」
   ⇒ 投影从「极淡」提到**看得见**,静止状态也给一层(不然卡片是「贴」在纸上的)。 */
.card,.entry,.hcard{
  border-color:rgba(32,37,33,.10);
  box-shadow:0 1px 2px rgba(32,37,33,.05),0 6px 16px -10px rgba(32,37,33,.22);
  transition:transform var(--t-hover) var(--ease),
             box-shadow var(--t-hover) var(--ease),
             border-color var(--t-hover) var(--ease),
             background var(--t-hover) var(--ease);
}
.card:hover,.entry:hover,.hcard:hover{
  transform:translateY(-6px);
  border-color:rgba(32,37,33,.18);
  box-shadow:0 2px 6px rgba(32,37,33,.07),
             0 26px 48px -16px rgba(32,37,33,.42);
}
/* 列表里的小行、按钮块也托一层,免得整页只有大卡片浮着、小块像贴纸 */
.side .row,.newbar,.pbtn{
  transition:transform var(--t-hover) var(--ease),box-shadow var(--t-hover) var(--ease);
}
.side .row:hover,.newbar:hover{
  transform:translateY(-2px);
  box-shadow:0 1px 3px rgba(32,37,33,.07),0 10px 22px -12px rgba(32,37,33,.30);
}

/* ---------- 4. 按钮:胶囊 + 轻轻上浮 ---------- */
.big-btn,.hero-search .go,.pbtn{
  transition:transform var(--t-hover) var(--ease),background var(--t-hover) var(--ease);
}
.big-btn:hover,.hero-search .go:hover{transform:translateY(-2px)}
.pbtn:hover{transform:translateY(-1px)}
.hero-search .box{
  transition:border-color var(--t-swap) var(--ease),box-shadow var(--t-swap) var(--ease);
}

/* ---------- 5. 焦点圈:从"黑色实心圈"改成柔和的一层 ---------- */
.hd-search input:focus,
.hero-search .box:focus-within,
.rf input:focus,.rf textarea:focus,
.acc .fld input:focus,
.gate-card .fld input:focus{
  outline:none;border-color:rgba(32,37,33,.32);
  box-shadow:0 0 0 4px rgba(32,37,33,.07);
}
/* 键盘可达性:Tab 走到哪儿要看得见 */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid rgba(32,37,33,.45);outline-offset:2px;border-radius:10px;
}

/* ---------- 6. 三端切换器:做成苹果那种"白胶囊嵌在浅槽里" ---------- */
/* 原来:整个容器白底描边,选中项是**黑底白字** —— 很重,像开关。 */
.gw-sw{background:rgba(32,37,33,.055);border-color:transparent}
.gw-sw-i{height:28px;color:var(--ink2)}
.gw-sw-i:hover{background:rgba(255,255,255,.55);color:var(--ink)}
.gw-sw-i.on{
  background:var(--card);color:var(--ink);font-weight:500;
  box-shadow:0 1px 3px rgba(32,37,33,.14);
}

/* ---------- 7. 谱面工具条:文字按钮 + 视图控制做连体分段控件 ---------- */
/* ⚠ 按钮**永远显示**、不能用就置灰 —— 这条规矩不动(梁Sir 2026-10-27 15:05),
   这里只改质感:去掉描边,悬停才浮起一层浅底。 */
.pvw-bar .vbtn{
  background:transparent;border-color:transparent;
  transition:background var(--t-hover) var(--ease),color var(--t-hover) var(--ease);
}
.pvw-bar .vbtn:hover{background:rgba(32,37,33,.06);border-color:transparent}
.pvw-bar .vbtn:disabled{opacity:.34}

/* 双页 / 放大一点 / 缩小一点 三个是**一组视图控制**,不是一个一个独立的盒子。
   做成苹果那种连体分段控件:浅槽底 + 中间不分开 + 只有两头是圆角。 */
.pvw-bar .vbtn.wide{
  background:rgba(32,37,33,.05);border:1px solid transparent;color:var(--ink2);
  border-radius:0;
}
.pvw-bar .vbtn.wide:hover{background:rgba(32,37,33,.11);color:var(--ink)}
/* 用 data-* 定位两端(这三个按钮各有各的 data 属性),
   不用 :first-of-type —— 那会先命中「上一页」那个普通按钮。 */
.pvw-bar .vbtn[data-dual]{border-radius:12px 0 0 12px}
.pvw-bar .vbtn[data-zi] {border-radius:0 12px 12px 0}
.pvw-bar .vbtn[data-dual] + .vbtn.wide,
.pvw-bar .vbtn[data-zo] + .vbtn.wide{margin-left:-1px}

/* ---------- 8. 背景水印墙:底色变暖 + 字色变深之后,墙比以前抢戏,
   把它压回「底子」的位置(原来 .5,这里压到 .34) ---------- */
.hero-wall-bg .dw-tile{opacity:.34}
.hero-wall-bg .dw-in{border-color:rgba(32,37,33,.06)}

/* ---------- 9. 背景水印墙的左右渐隐要跟着底色换 ---------- */
/* base.css 里写死了 rgba(247,246,243,0)(旧底色),底色一变,左右渐隐会露馅。 */
.dw-fade.l{background:linear-gradient(90deg,var(--bg),rgba(250,248,243,0))}
.dw-fade.r{background:linear-gradient(270deg,var(--bg),rgba(250,248,243,0))}

/* ---------- 10. 滚动条更细更淡 ---------- */
.sheet-bd.tall::-webkit-scrollbar-thumb{background:rgba(32,37,33,.18)}
.side::-webkit-scrollbar-thumb{background:rgba(32,37,33,.16)}

/* ---------- 10. 系统开了「减少动态效果」就全部关掉 ---------- */
@media (prefers-reduced-motion:reduce){
  .card,.entry,.hcard,.big-btn,.hero-search .go,.pbtn,.hero-search .box,
  .gw-sw-i,.pvw-bar .vbtn{transition:none!important}
  .card:hover,.entry:hover,.hcard:hover,
  .big-btn:hover,.hero-search .go:hover,.pbtn:hover{transform:none}
}