/* ══════════════════════════════════════════════════════════════════════════
   Precision MIDI · 共享样式表（2026-09-24）
   为什么要它：/learn、/games、/song/* 原来是各自内联的简化样式，跟主页**不是一套**，
   站长反馈"有点丑，要跟主页一样的排版和卡片模式"。
   做法：把浏览页（browse.html）里**正在用的设计令牌与卡片样式**抽出来，
   统一放这一份，供所有服务端渲染页 <link> 引用 —— 改一次全站生效，也不再有"两套皮肤"。

   ⚠ 令牌必须与 browse.html 的 :root 保持一致（那边是唯一真源）。
      改色时**两边都要改**（或以后把 browse.html 也切到这份来）。
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#0a0a0a; --card:#171717; --surface:#262626;
  --tx:#fafafa; --tx2:#a1a1a1; --tx3:#737373;
  --ac:#fbbf24; --ac-fg:#030303; --heart:#ff2357;
  --line:#ffffff1a; --line2:#ffffff26;
  --r:10px; --gap:12px;
  --secondary:var(--surface); --accent:#333333; --destructive:#ff6568; --theme:var(--ac);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--tx);
  font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--ac);text-decoration:none}
a:hover{opacity:.92}
img{max-width:100%}

/* ── 版心：与主页 .main / .wrap 同口径 ─────────────────────────────────── */
.page{max-width:1080px;margin:0 auto;padding:18px 22px 56px}
@media(max-width:820px){.page{padding:14px 14px 40px}}

/* ── 品牌行（与主页左侧栏 .logo 同调）─────────────────────────────────── */
.brand{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--tx3);
  letter-spacing:3px;font-weight:600;margin-bottom:16px}
.brand i{width:8px;height:8px;border-radius:50%;background:var(--ac);box-shadow:0 0 12px var(--ac)}

/* ── 标题层级（与主页 h1/h2 视觉一致）───────────────────────────────── */
h1{font-size:24px;line-height:1.28;margin:0 0 10px;font-weight:700;letter-spacing:-.2px}
h2{font-size:16px;margin:26px 0 12px;font-weight:600}
h2.mt{margin-top:34px}
.lead{color:var(--tx2);margin:0 0 6px}
.dim{color:var(--tx3)}
@media(max-width:820px){h1{font-size:20px}h2{font-size:15px}}

/* ── 卡片：直接对齐主页 .card（同背景/同描边/同圆角/同 hover）────────── */
.card{
  display:block;padding:16px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .15s,background .15s;
}
a.card{color:var(--tx)}
a.card:hover{opacity:1;border-color:var(--line2);background:var(--surface)}
.card+.card{margin-top:var(--gap)}
/* 主页卡片是「左封面 + 右内容」横排，这里保留能力 */
.card.row{display:flex;gap:16px;align-items:flex-start}
.card .cov{width:64px;height:64px;flex:0 0 64px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:700}
.card .bd{flex:1;min-width:0}
.card h3{margin:0 0 4px;font-size:15px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .sub{margin:0;color:var(--tx2);font-size:12.5px;display:flex;gap:12px;flex-wrap:wrap}

/* ── 列表（曲目列表 / 索引列表）───────────────────────────────────────── */
.list{display:grid;gap:var(--gap);margin:0;padding:0;list-style:none}
@media(min-width:760px){.list.two{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}}

/* ── 按钮：对齐主页 .btn / .btn.gh / .pri ────────────────────────────── */
.btn{height:36px;padding:0 14px;border-radius:var(--r);border:1px solid var(--line);
  background:var(--card);color:var(--tx);font-size:13.5px;font-weight:500;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  cursor:pointer;transition:border-color .15s,background .15s;white-space:nowrap}
.btn:hover{border-color:var(--line2);background:var(--surface);opacity:1}
.btn.pri{background:var(--ac);color:var(--ac-fg);border-color:var(--ac);font-weight:600}
.btn.pri:hover{background:#fcd34d;border-color:#fcd34d}
.btn.lg{height:42px;padding:0 20px;font-size:14.5px}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 4px}

/* ── 徽章 / 标签：对齐主页 .tag 与游戏页 .badge ─────────────────────── */
.tag{display:inline-block;padding:0 7px;border:1px solid var(--line);border-radius:9px;
  font-size:11.5px;line-height:17px;color:var(--tx3);white-space:nowrap}
.badge{font-size:12px;padding:3px 10px;border-radius:999px;border:1px solid;font-weight:600;white-space:nowrap}
.b1{color:#3ddc84;border-color:rgba(61,220,132,.35)}
.b2{color:#60a8dc;border-color:rgba(96,168,220,.35)}
.b3{color:#fbbf24;border-color:rgba(251,191,36,.35)}
.b4{color:#ff6568;border-color:rgba(255,101,104,.35)}

/* ── chips（游戏标签那种小胶囊，对齐主页 .gchip/.chip）───────────────── */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.chip{display:inline-block;font-size:13px;padding:6px 12px;border:1px solid var(--line);
  border-radius:999px;background:var(--card);color:var(--tx2);
  transition:border-color .15s,color .15s,background .15s}
.chip:hover{border-color:var(--ac);color:var(--ac);opacity:1}
.chip.on{background:var(--ac);color:var(--ac-fg);border-color:var(--ac);font-weight:600}

/* ── 数据条（统计小卡，视觉同卡片但更紧凑）────────────────────────────── */
.stats{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 0}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:10px 15px;min-width:92px}
.stat b{display:block;font-size:18px;font-variant-numeric:tabular-nums;line-height:1.3}
.stat s{text-decoration:none;color:var(--tx3);font-size:11.5px}

/* ── 说明块 / 提示块 ─────────────────────────────────────────────────── */
.note{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 19px;color:var(--tx2);font-size:13.5px;line-height:1.85}
.note b{color:var(--tx)}
.note+.note{margin-top:var(--gap)}
.tip{background:rgba(251,191,36,.07);border:1px solid rgba(251,191,36,.28);
  border-radius:var(--r);padding:13px 18px;color:var(--tx2);font-size:13.5px;margin:16px 0 0}
.tip b{color:var(--tx)}

/* ── 步骤（/learn 用）：与卡片同一套观感 ─────────────────────────────── */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--gap);counter-reset:s}
.steps li{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 19px 15px 56px;position:relative}
.steps li:before{counter-increment:s;content:counter(s);position:absolute;left:17px;top:15px;
  width:25px;height:25px;border-radius:50%;background:var(--ac);color:var(--ac-fg);
  font-weight:800;font-size:13.5px;display:flex;align-items:center;justify-content:center}
.steps b{display:block;font-size:14.5px;margin-bottom:3px;color:var(--tx)}
.steps span{color:var(--tx2);font-size:13px}

/* ── 页脚 ────────────────────────────────────────────────────────────── */
.foot{margin-top:40px;padding-top:16px;border-top:1px solid var(--line);
  color:var(--tx3);font-size:13px;line-height:2.1}
.foot a{color:var(--tx2)}
.foot a:hover{color:var(--ac)}

/* ── 面包屑 ──────────────────────────────────────────────────────────── */
.crumb{font-size:12.5px;color:var(--tx3);margin:-6px 0 12px}
.crumb a{color:var(--tx3)}
.crumb a:hover{color:var(--ac)}

/* ── 顶部导航条：显眼的「← 回曲库首页」（2026-09-24 站长要求 A 方案）────
   为什么不做自动跳转：跳转页搜索引擎不收录（当软 404），319 个页会全废。
   所以改成"给一个一眼能看见的返回入口"，用户想回随手就能回。 */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin:0 0 18px}
.back{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 18px;
  border-radius:999px;background:var(--ac);color:var(--ac-fg);
  font-size:14px;font-weight:700;border:1px solid var(--ac);
  transition:background .15s,transform .12s}
.back:hover{background:#fcd34d;border-color:#fcd34d;transform:translateX(-2px);opacity:1}
.back .arw{font-size:15px;line-height:1}
@media(max-width:560px){.back{height:34px;padding:0 14px;font-size:13px}}

/* 底部再给一个（长页面滚到底也能回） */
.backfoot{margin:30px 0 0;text-align:center}
.backfoot .btn{height:40px;padding:0 22px;font-size:14px}

/* ── 曲目行（游戏页/索引页的列表项，视觉同主页卡片）──────────────────── */
.row{display:flex;align-items:center;gap:12px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;
  /* ★ 2026-10-17 修横向溢出：flex 容器自身也要 min-width:0，
     否则长 nowrap 标题会把卡片顶宽、把整页撑出横向滚动条
     （实测 /qa/index 在 390 宽下「横向滚动：有」；游戏页/标签页共用本类，一并修好）。 */
  min-width:0;box-sizing:border-box;
  transition:border-color .15s,background .15s}
.row:hover{border-color:var(--line2);background:var(--surface)}
.row .no{color:var(--tx3);font-size:12px;min-width:22px;text-align:right;
  font-variant-numeric:tabular-nums;flex-shrink:0}
.row .t{flex:1;min-width:0;color:var(--tx);font-size:14.5px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
a.row:hover .t{color:var(--ac)}
.row .u{color:var(--tx3);font-size:12px}
.row .m{color:var(--tx3);font-size:12px;flex-shrink:0;display:flex;gap:10px;align-items:center}
@media(max-width:560px){.row .m{flex-direction:column;align-items:flex-end;gap:2px}}