/* 音转本地版 · 页面样式（页面同学维护）
   约定：类名一律 pg- 前缀，只消费 base.css 里的设计令牌（--lp-*）。
   禁止引用任何外链图片/字体，封面全部用 CSS 渐变生成。 */

/* ================================================================ 通用块 */
.pg-sec { margin: 0 0 40px; }
.pg-sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.pg-sec-title {
  font-family: var(--lp-serif); font-size: 21px; font-weight: 700; margin: 0;
  display: flex; align-items: center; gap: 8px;
}
.pg-sec-sub { color: var(--lp-muted-fg); font-size: 13px; }
.pg-hr { height: 1px; background: var(--lp-border); border: 0; margin: 34px 0; }

.pg-note {
  background: var(--lp-primary-soft); color: var(--lp-primary-dark);
  border-radius: var(--lp-radius-sm); padding: 9px 12px; font-size: 12.5px;
}
.pg-note-warn { background: #f6ecd4; color: var(--lp-warn); }
.pg-note-danger { background: #f3e0dd; color: var(--lp-danger); }

.pg-inline-error {
  color: var(--lp-danger); font-size: 12.5px; margin-top: 8px; min-height: 0;
}
.pg-loading { padding: 42px 0; text-align: center; color: var(--lp-muted-fg); }
.pg-loading .spinner { vertical-align: -3px; margin-right: 8px; }

/* ================================================================ 封面（渐变块） */
.pg-cover {
  position: relative; aspect-ratio: 1 / 1; border-radius: var(--lp-radius-sm);
  display: grid; place-items: center; overflow: hidden;
  font-family: var(--lp-serif); font-size: 30px; font-weight: 700; color: rgba(255, 255, 255, .92);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .18); letter-spacing: .04em;
  user-select: none;
}
.pg-cover::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 78% 12%, rgba(255, 255, 255, .34), transparent 62%);
}
.pg-cover-wide { aspect-ratio: 16 / 9; font-size: 24px; }
.pg-cover-sm { aspect-ratio: 1 / 1; font-size: 15px; }
.pg-cover-lg { aspect-ratio: 16 / 10; font-size: 44px; border-radius: var(--lp-radius); }

/* ================================================================ 卡片壳 */
.pg-card { background: var(--lp-card); border: 1px solid var(--lp-border); border-radius: var(--lp-radius); padding: 16px; }
.pg-card-flat { padding: 0; overflow: hidden; }
.pg-card-body { padding: 11px 12px 13px; }
.pg-card-title {
  font-size: 13.5px; font-weight: 600; margin: 0 0 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pg-card-meta { color: var(--lp-muted-fg); font-size: 11.5px; display: flex; gap: 8px; flex-wrap: wrap; }
.pg-card-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.pg-card-acts .btn { height: 26px; padding: 0 9px; font-size: 12px; }

.pg-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); }
.pg-grid-lg { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
.pg-grid-sq { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

/* ================================================================ 首页 */
.pg-hero { padding: 54px 0 34px; text-align: center; }
.pg-hero h1 {
  font-family: var(--lp-serif); font-size: 46px; line-height: 1.16; font-weight: 700;
  margin: 0 0 16px; letter-spacing: -.02em;
}
.pg-hero h1 em {
  font-style: normal; color: var(--lp-primary);
  background: linear-gradient(180deg, transparent 68%, var(--lp-primary-soft) 68%);
}
.pg-hero-sub {
  font-size: 16px; color: var(--lp-muted-fg); max-width: 640px;
  margin: 0 auto 26px; line-height: 1.75;
}
.pg-hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.pg-hero-tip { margin-top: 16px; font-size: 12.5px; color: var(--lp-muted-fg); }

.pg-steps {
  display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin: 8px 0 12px;
}
.pg-step {
  background: var(--lp-card); border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius); padding: 18px; position: relative;
}
.pg-step-no {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: var(--lp-primary); color: #fff; font-weight: 700; font-size: 13px; margin-bottom: 10px;
}
.pg-step h3 { font-size: 14.5px; margin: 0 0 6px; }
.pg-step p { font-size: 12.5px; color: var(--lp-muted-fg); margin: 0; line-height: 1.7; }

.pg-feat {
  background: var(--lp-card); border: 1px solid var(--lp-border); border-radius: var(--lp-radius);
  padding: 16px; transition: .18s;
}
.pg-feat:hover { border-color: #cfcabf; box-shadow: var(--lp-shadow); transform: translateY(-2px); }
.pg-feat-icon {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--lp-primary-soft); color: var(--lp-primary-dark);
  font-size: 15px; margin-bottom: 10px;
}
.pg-feat h3 { font-size: 14px; margin: 0 0 6px; }
.pg-feat p { font-size: 12.5px; color: var(--lp-muted-fg); margin: 0; line-height: 1.7; }

.pg-announce {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--lp-card); border: 1px solid var(--lp-border);
  border-left: 3px solid var(--lp-primary);
  border-radius: var(--lp-radius-sm); padding: 12px 14px; font-size: 13px;
}
.pg-announce strong { color: var(--lp-primary-dark); }
.pg-announce-body { flex: 1; color: var(--lp-fg); line-height: 1.7; }

/* ================================================================ 功能页 */
.pg-block { margin-bottom: 26px; }
.pg-block-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pg-block-head h2 { font-family: var(--lp-serif); font-size: 19px; margin: 0; }
.pg-cap-list { display: grid; gap: 9px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.pg-cap {
  display: flex; gap: 9px; align-items: flex-start;
  background: var(--lp-card); border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius-sm); padding: 11px 13px;
}
.pg-cap-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--lp-primary);
  margin-top: 8px; flex: none;
}
.pg-cap b { font-weight: 600; }
.pg-cap span { display: block; color: var(--lp-muted-fg); font-size: 12.5px; line-height: 1.65; }

/* ================================================================ 登录 / 注册 */
.pg-auth-wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  max-width: 880px; margin: 24px auto 0;
  border: 1px solid var(--lp-border); border-radius: 14px; overflow: hidden;
  background: var(--lp-card);
}
.pg-auth-side {
  padding: 40px 34px; background: linear-gradient(160deg, #2b2f45, var(--lp-primary) 120%);
  color: #fff; display: flex; flex-direction: column; justify-content: center;
}
.pg-auth-side h2 {
  font-family: var(--lp-serif); font-size: 24px; color: #fff; margin: 0 0 12px; line-height: 1.35;
}
.pg-auth-side ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 2; opacity: .92; }
.pg-auth-main { padding: 38px 34px; }
.pg-auth-title { font-family: var(--lp-serif); font-size: 22px; margin: 0 0 6px; }
.pg-auth-sub { color: var(--lp-muted-fg); font-size: 12.5px; margin: 0 0 20px; }
.pg-auth-foot { font-size: 12.5px; color: var(--lp-muted-fg); margin-top: 16px; }
.pg-auth-demo { margin-top: 12px; }

/* ================================================================ 表单行 */
.pg-form-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.pg-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.pg-toolbar .input, .pg-toolbar .select { width: auto; min-width: 130px; }
.pg-toolbar-search { min-width: 200px; flex: 1; max-width: 320px; }
.pg-grow { flex: 1; }

/* ================================================================ 转录上传 */
.pg-drop {
  border: 2px dashed var(--lp-border); border-radius: 14px;
  background: var(--lp-card); padding: 44px 20px; text-align: center;
  cursor: pointer; transition: .18s;
}
.pg-drop:hover { border-color: var(--lp-primary); background: #f8f7fd; }
.pg-drop-on {
  border-color: var(--lp-primary); background: var(--lp-primary-soft);
  box-shadow: 0 0 0 4px rgba(112, 123, 185, .18);
}
.pg-drop-icon {
  width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 13px;
  display: grid; place-items: center; font-size: 21px;
  background: var(--lp-primary-soft); color: var(--lp-primary-dark);
}
.pg-drop-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.pg-drop-hint { font-size: 12.5px; color: var(--lp-muted-fg); line-height: 1.7; }

.pg-modes { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.pg-mode {
  border: 1px solid var(--lp-border); border-radius: var(--lp-radius);
  padding: 12px 14px; cursor: pointer; background: var(--lp-card-2); transition: .15s;
}
.pg-mode:hover { border-color: #cfcabf; }
.pg-mode-on { border-color: var(--lp-primary); background: var(--lp-primary-soft); }
.pg-mode b { font-size: 13.5px; display: block; margin-bottom: 3px; }
.pg-mode span { font-size: 12px; color: var(--lp-muted-fg); line-height: 1.6; }

.pg-prog-block { margin-top: 18px; }
.pg-prog-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12.5px; margin-bottom: 6px; color: var(--lp-muted-fg);
}
.pg-prog-row b { color: var(--lp-fg); font-weight: 600; }
.pg-prog-stages { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.pg-stage-chip {
  font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
  background: var(--lp-secondary); color: var(--lp-muted-fg);
}
.pg-stage-chip.done { background: #dcefe3; color: var(--lp-ok); }
.pg-stage-chip.now { background: var(--lp-primary); color: #fff; }

.pg-track-ov { display: grid; gap: 9px; }
.pg-track-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--lp-card-2); border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius-sm); padding: 9px 12px;
}
.pg-track-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.pg-track-name { font-size: 13px; font-weight: 600; flex: 1; }
.pg-track-count { font-size: 12px; color: var(--lp-muted-fg); font-family: var(--lp-mono); }

/* ================================================================ AI 生成 */
.pg-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.pg-chip {
  padding: 4px 11px; border-radius: 999px; font-size: 12px; cursor: pointer;
  background: var(--lp-secondary); color: var(--lp-muted-fg);
  border: 1px solid transparent; transition: .15s; font-family: inherit;
}
.pg-chip:hover { background: var(--lp-primary-soft); color: var(--lp-primary-dark); }
.pg-prompt { min-height: 108px; }

/* ================================================================ 广场 */
.pg-cats { display: flex; gap: 7px; flex-wrap: wrap; }
.pg-cat {
  padding: 5px 13px; border-radius: 999px; font-size: 12.5px; cursor: pointer;
  background: var(--lp-secondary); color: var(--lp-muted-fg); border: 0; font-family: inherit;
  transition: .15s;
}
.pg-cat:hover { background: var(--lp-border); }
.pg-cat.on { background: var(--lp-primary); color: #fff; }
.pg-loadmore { display: flex; justify-content: center; margin-top: 20px; }

/* ================================================================ 作品详情 */
.pg-song-head {
  display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start;
  margin-bottom: 28px;
}
.pg-song-title { font-family: var(--lp-serif); font-size: 30px; margin: 0 0 8px; line-height: 1.25; }
.pg-song-owner { color: var(--lp-muted-fg); font-size: 13px; margin-bottom: 14px; }
.pg-song-kv { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 16px; }
.pg-kv-item { font-size: 12px; color: var(--lp-muted-fg); }
.pg-kv-item b {
  display: block; font-size: 16px; color: var(--lp-fg); font-weight: 600;
  font-family: var(--lp-mono); margin-top: 2px;
}
.pg-song-acts { display: flex; gap: 9px; flex-wrap: wrap; }

.pg-play {
  display: inline-flex; align-items: center; gap: 8px;
}
.pg-play-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--lp-ok);
  animation: pg-pulse 1s infinite alternate;
}
@keyframes pg-pulse { from { opacity: .35; } to { opacity: 1; } }

.pg-tracklist { display: grid; gap: 8px; }
.pg-trackline {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--lp-border); border-radius: var(--lp-radius-sm);
  background: var(--lp-card); padding: 9px 12px;
}
.pg-mini-notes {
  flex: 1; height: 22px; display: flex; align-items: flex-end; gap: 1px; overflow: hidden;
}
.pg-mini-note { flex: 1; min-width: 2px; border-radius: 1px; opacity: .8; }

/* ================================================================ 评论 */
.pg-comments { display: grid; gap: 10px; }
.pg-comment {
  background: var(--lp-card); border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius-sm); padding: 11px 13px;
}
.pg-comment-head {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12px; color: var(--lp-muted-fg); margin-bottom: 5px;
}
.pg-comment-head b { color: var(--lp-fg); font-weight: 600; font-size: 12.5px; }
.pg-comment-body { font-size: 13px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }

/* ================================================================ 账户 */
.pg-acc-head {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--lp-card); border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius); padding: 20px; margin-bottom: 22px;
}
.pg-avatar {
  width: 62px; height: 62px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff;
  font-family: var(--lp-serif); font-size: 24px; font-weight: 700;
  background: linear-gradient(135deg, var(--lp-primary), #9aa3d8);
}
.pg-acc-name { font-family: var(--lp-serif); font-size: 21px; font-weight: 700; }
.pg-acc-id { font-size: 12px; color: var(--lp-muted-fg); display: flex; align-items: center; gap: 7px; margin-top: 3px; }
.pg-acc-stats { display: flex; gap: 26px; margin-left: auto; flex-wrap: wrap; }
.pg-stat { text-align: right; }
.pg-stat b { display: block; font-size: 20px; font-weight: 700; font-family: var(--lp-mono); }
.pg-stat span { font-size: 11.5px; color: var(--lp-muted-fg); }

.pg-link-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.pg-link-card {
  display: block; background: var(--lp-card); border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius); padding: 15px; transition: .18s; color: inherit;
}
.pg-link-card:hover { text-decoration: none; border-color: var(--lp-primary); transform: translateY(-2px); box-shadow: var(--lp-shadow); }
.pg-link-card b { display: block; font-size: 14px; margin-bottom: 4px; }
.pg-link-card span { font-size: 12px; color: var(--lp-muted-fg); line-height: 1.6; }

/* ================================================================ 钱包 */
.pg-wallet-top {
  display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: 26px;
}
.pg-bignum { font-family: var(--lp-mono); font-size: 30px; font-weight: 700; line-height: 1.2; }
.pg-bignum small { font-size: 13px; font-family: var(--lp-font); color: var(--lp-muted-fg); font-weight: 400; margin-left: 4px; }

.pg-pkgs { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.pg-pkg {
  background: var(--lp-card); border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius); padding: 18px; display: flex; flex-direction: column;
}
.pg-pkg-hot { border-color: var(--lp-primary); box-shadow: 0 0 0 3px var(--lp-primary-soft); }
.pg-pkg-name { font-size: 13.5px; font-weight: 600; margin-bottom: 4px; }
.pg-pkg-price { font-family: var(--lp-mono); font-size: 24px; font-weight: 700; margin: 8px 0 2px; }
.pg-pkg-price small { font-size: 12px; font-weight: 400; color: var(--lp-muted-fg); font-family: var(--lp-font); }
.pg-pkg-desc { font-size: 12px; color: var(--lp-muted-fg); margin-bottom: 14px; line-height: 1.6; flex: 1; }

/* ================================================================ 兑换 / 邀请 */
.pg-redeem {
  max-width: 520px; margin: 0 auto; text-align: center;
  background: var(--lp-card); border: 1px solid var(--lp-border);
  border-radius: 14px; padding: 30px 26px;
}
.pg-redeem-code {
  font-family: var(--lp-mono); font-size: 22px; letter-spacing: .16em;
  text-align: center; text-transform: uppercase;
}
.pg-invite-code {
  font-family: var(--lp-mono); font-size: 26px; font-weight: 700; letter-spacing: .12em;
  color: var(--lp-primary-dark); background: var(--lp-card-2);
  border: 1px dashed var(--lp-border); border-radius: var(--lp-radius-sm);
  padding: 14px; text-align: center; word-break: break-all;
}

/* ================================================================ 站内信 */
.pg-msgs { display: grid; gap: 10px; }
.pg-msg {
  background: var(--lp-card); border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius); padding: 14px 16px; cursor: pointer; transition: .15s;
}
.pg-msg:hover { border-color: #cfcabf; }
.pg-msg-unread { border-left: 3px solid var(--lp-primary); background: var(--lp-card-2); }
.pg-msg-unread .pg-msg-title { font-weight: 700; }
.pg-msg-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.pg-msg-title { font-size: 13.5px; font-weight: 500; }
.pg-msg-time { font-size: 11.5px; color: var(--lp-muted-fg); flex: none; }
.pg-msg-body {
  font-size: 13px; color: var(--lp-muted-fg); line-height: 1.75;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.pg-msg-open { display: block; }
.pg-msg-open .pg-msg-body { -webkit-line-clamp: unset; display: block; color: var(--lp-fg); }

/* ================================================================ 反馈 */
.pg-thumbs { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 10px; }
.pg-thumb {
  width: 74px; height: 74px; border-radius: var(--lp-radius-sm); overflow: hidden;
  position: relative; border: 1px solid var(--lp-border); background: var(--lp-secondary);
}
.pg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-thumb-x {
  position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%;
  border: 0; background: rgba(17, 19, 24, .66); color: #fff; font-size: 11px;
  cursor: pointer; line-height: 1; display: grid; place-items: center;
}
.pg-reply {
  margin-top: 9px; padding: 9px 12px; border-radius: var(--lp-radius-sm);
  background: var(--lp-primary-soft); color: var(--lp-primary-dark);
  font-size: 12.5px; line-height: 1.7;
}
.pg-fb-item {
  background: var(--lp-card); border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius); padding: 13px 15px; margin-bottom: 10px;
}

/* ================================================================ 条款（折叠） */
.pg-acc { border: 1px solid var(--lp-border); border-radius: var(--lp-radius); overflow: hidden; margin-bottom: 12px; background: var(--lp-card); }
.pg-acc-head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 13px 16px; cursor: pointer; font-size: 14px; font-weight: 600;
  user-select: none; background: var(--lp-card);
}
.pg-acc-head:hover { background: var(--lp-secondary); }
.pg-acc-arrow { color: var(--lp-muted-fg); font-size: 12px; transition: .18s; }
.pg-acc-body { padding: 4px 16px 16px; font-size: 13px; line-height: 1.85; color: #33373f; }
.pg-acc-body h4 { font-size: 13.5px; margin: 12px 0 4px; }
.pg-acc-body p, .pg-acc-body li { color: #45494f; }
.pg-acc-body ul, .pg-acc-body ol { padding-left: 20px; }
.pg-acc-closed .pg-acc-body { display: none; }
.pg-acc-closed .pg-acc-arrow { transform: rotate(-90deg); }

.pg-keys { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pg-keys td { padding: 7px 6px; border-bottom: 1px solid var(--lp-border); }
.pg-keys td:first-child { width: 190px; }
.pg-kbd {
  display: inline-block; font-family: var(--lp-mono); font-size: 11.5px;
  background: var(--lp-card-2); border: 1px solid var(--lp-border);
  border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; margin-right: 3px;
}

/* ================================================================ 后台 */
.pg-admin { display: grid; grid-template-columns: 176px 1fr; gap: 20px; align-items: start; }
.pg-admin-nav {
  background: var(--lp-card); border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius); padding: 8px; position: sticky; top: 72px;
}
.pg-admin-tab {
  display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0;
  border-radius: var(--lp-radius-sm); background: transparent; color: var(--lp-muted-fg);
  font: inherit; font-size: 13px; cursor: pointer; transition: .15s; margin-bottom: 2px;
}
.pg-admin-tab:hover { background: var(--lp-secondary); color: var(--lp-fg); }
.pg-admin-tab.on { background: var(--lp-primary); color: #fff; }
.pg-admin-body { min-width: 0; }
.pg-admin-panel { display: none; }
.pg-admin-panel.on { display: block; }

.pg-stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 20px; }
.pg-stat-card {
  background: var(--lp-card); border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius); padding: 15px 16px;
}
.pg-stat-card b { display: block; font-family: var(--lp-mono); font-size: 25px; font-weight: 700; line-height: 1.25; }
.pg-stat-card span { font-size: 12px; color: var(--lp-muted-fg); }

.pg-table-wrap {
  background: var(--lp-card); border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius); overflow: auto;
}
.pg-table-wrap .table th { background: var(--lp-card-2); position: sticky; top: 0; z-index: 1; }
.pg-td-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.pg-td-acts .btn { height: 24px; padding: 0 8px; font-size: 11.5px; }
.pg-code {
  font-family: var(--lp-mono); font-size: 12px; background: var(--lp-card-2);
  border: 1px solid var(--lp-border); border-radius: 4px; padding: 2px 6px;
}
.pg-monos { font-family: var(--lp-mono); font-size: 12px; color: var(--lp-muted-fg); }

/* ================================================================ 响应式 */
@media (max-width: 860px) {
  .pg-song-head { grid-template-columns: 1fr; }
  .pg-admin { grid-template-columns: 1fr; }
  .pg-admin-nav { position: static; display: flex; gap: 4px; overflow-x: auto; }
  .pg-admin-tab { white-space: nowrap; width: auto; margin-bottom: 0; }
}
@media (max-width: 760px) {
  .pg-auth-wrap { grid-template-columns: 1fr; }
  .pg-auth-side { display: none; }
  .pg-auth-main { padding: 26px 20px; }
  .pg-hero h1 { font-size: 32px; }
  .pg-hero { padding: 32px 0 24px; }
  .pg-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 11px; }
  .pg-acc-stats { width: 100%; margin-left: 0; gap: 18px; }
  .pg-stat { text-align: left; }
}

/* ---------------------------------------------------------------- 曲谱页（/notation/:id）
   简谱是服务端出的 SVG 长条，前端只叠播放头 + 音符热区；五线谱只给 MusicXML 源码视图。 */
.pg-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 18px;
  border-bottom: 1px solid var(--lp-border);
}
.pg-tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 8px 16px;
  font: inherit;
  font-size: 13.5px;
  color: var(--lp-muted-fg);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.pg-tab:hover { color: var(--lp-fg); }
.pg-tab.on { color: var(--lp-primary-dark); border-bottom-color: var(--lp-primary); font-weight: 600; }

.pg-nt-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.pg-nt-pos { font-family: var(--lp-mono); min-width: 150px; }

.pg-nt-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--lp-card-2);
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius);
  padding: 8px 0;
}
.pg-nt-scroll::-webkit-scrollbar { height: 10px; }
.pg-nt-scroll::-webkit-scrollbar-thumb { background: #cfcabf; border-radius: 999px; }

.pg-nt-sheet {
  position: relative;
  margin: 0 8px;
  /* 用内联 width/height 跟 SVG 的 px 对齐：热区与播放头都按同一套坐标摆放 */
}
.pg-nt-img { display: block; max-width: none; user-select: none; }
.pg-nt-heads { position: absolute; inset: 0; }
.pg-nt-head {
  position: absolute;
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
}
.pg-nt-head:hover { background: rgba(112, 123, 185, .22); outline: 1px solid var(--lp-primary); }

.pg-nt-playhead {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background: var(--lp-danger);
  box-shadow: 0 0 6px rgba(192, 57, 43, .5);
  pointer-events: none;
  will-change: transform;
}
.pg-nt-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.pg-nt-xml {
  margin: 12px 0 0;
  max-height: 440px;
  overflow: auto;
  padding: 12px 14px;
  background: #14161b;
  color: #d5d9e3;
  border-radius: var(--lp-radius);
  font-size: 11.5px;
  line-height: 1.65;
  white-space: pre;
}

/* ---- 弹唱谱工具条（移调 / 和弦显示 / 唱名 / 显示开关） */
.pg-nt-controls {
  display: flex;
  align-items: center;
  gap: 8px 18px;
  flex-wrap: wrap;
  margin: -4px 0 12px;
  padding: 10px 12px;
  background: var(--lp-card-2);
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius);
}
.pg-nt-ctrl { display: flex; align-items: center; gap: 7px; }
.pg-nt-label {
  font-size: 12px;
  color: var(--lp-muted-fg);
  letter-spacing: .02em;
}
.pg-nt-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius-sm);
  overflow: hidden;
  background: var(--lp-card);
}
.pg-nt-stepper > button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--lp-fg);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  padding: 5px 10px;
  cursor: pointer;
  min-width: 28px;
}
.pg-nt-stepper > button:hover { background: var(--lp-hover); }
.pg-nt-stepper > button.pg-nt-tr {
  font-family: var(--lp-mono);
  font-size: 12.5px;
  min-width: 42px;
  border-left: 1px solid var(--lp-border);
  border-right: 1px solid var(--lp-border);
  color: var(--lp-muted-fg);
}
.pg-nt-stepper > button.pg-nt-tr.on {
  color: var(--lp-primary-dark);
  font-weight: 700;
  background: var(--lp-primary-soft);
}

.pg-nt-seg {
  display: inline-flex;
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius-sm);
  overflow: hidden;
  background: var(--lp-card);
}
.pg-nt-seg > button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--lp-muted-fg);
  font: inherit;
  font-size: 12.5px;
  padding: 5px 11px;
  cursor: pointer;
  line-height: 1.25;
}
.pg-nt-seg > button + button { border-left: 1px solid var(--lp-border); }
.pg-nt-seg > button:hover { background: var(--lp-hover); color: var(--lp-fg); }
.pg-nt-seg > button.on {
  background: var(--lp-primary-soft);
  color: var(--lp-primary-dark);
  font-weight: 600;
}

.pg-nt-chip {
  appearance: none;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.25;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px dashed var(--lp-border);
  background: transparent;
  color: var(--lp-muted-fg);
  cursor: pointer;
}
.pg-nt-chip::before { content: "☐ "; }
.pg-nt-chip.on {
  border-style: solid;
  border-color: var(--lp-primary);
  background: var(--lp-primary-soft);
  color: var(--lp-primary-dark);
  font-weight: 600;
}
.pg-nt-chip.on::before { content: "☑ "; }
.pg-nt-chip-static {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--lp-hover-soft);
  color: var(--lp-muted-fg);
}
.pg-nt-key {
  margin-left: auto;
  font-family: var(--lp-mono);
  font-size: 12.5px;
  padding: 4px 10px;
  border-radius: var(--lp-radius-sm);
  background: var(--lp-primary-soft);
  color: var(--lp-primary-dark);
  white-space: nowrap;
}
.pg-nt-chordline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.pg-nt-chordline b { color: var(--lp-fg); font-weight: 600; }
.pg-nt-chordline > span:nth-child(2) { font-family: var(--lp-mono); letter-spacing: .04em; }
.pg-nt-mod { color: var(--lp-warn-fg); }

.pg-nt-export {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--lp-border);
}
.pg-nt-notice {
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: var(--lp-radius-sm);
  font-size: 12.5px;
  line-height: 1.7;
}
.pg-nt-notice.info {
  background: var(--lp-primary-soft);
  color: var(--lp-primary-text);
  border: 1px solid var(--lp-border);
}
.pg-nt-notice.warn {
  background: var(--lp-warn-soft);
  color: var(--lp-warn-fg);
  border: 1px solid var(--lp-warn);
}

.pg-nt-pickcard { display: block; color: inherit; }
.pg-nt-pickcard:hover { text-decoration: none; box-shadow: var(--lp-shadow); transform: translateY(-2px); }

/* 转录结果里的 ✅ / ⚠️ 轨列表 */
.pg-kinds { display: flex; gap: 6px; flex-wrap: wrap; }

/* ================================================================ 首页（/ 与 /welcome）
   1:1 对齐 lingpu.cn 的真实结构：公告条 → 内测横幅 → Hero 三行 → 上传区 → 搜索/链接导入
   → SQUARE 最热作品 → 页脚。整页深色自持（--h-* 局部变量），不看 base.css 的脸色，
   base 换成深色主题也不会与这里打架。*/
.pg-home {
  --h-fg: #f1f0eb;
  --h-fg-92: rgba(241, 240, 235, .92);
  --h-mut: rgba(241, 240, 235, .58);
  --h-line: rgba(255, 255, 255, .10);
  --h-primary: #707bb9;
  --h-link: #a9b4e8;
  --h-serif: "Songti SC", "STSong", "Noto Serif SC", "Georgia", serif;
  --h-sans: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;
  --h-w: 1080px;

  position: relative;
  background: #111318;
  color: var(--h-fg-92);
  font-family: var(--h-sans);
  /* 盖掉 .lp-main 的 padding，让深底钺到边；数值对不上也只会留一条细边，不破版 */
  margin: -26px -20px -64px;
  padding: 0 0 1px;
}
/* 视口级兜底深底：宽屏两侧与页脚区不露白（z-index:-1 会画在 body 背景之上） */
.pg-home::before {
  content: "";
  position: fixed;
  inset: 0;
  background: #111318;
  z-index: -1;
  pointer-events: none;
}
.pg-home a { color: var(--h-link); }
.pg-home a:hover { color: #cdd4f4; }
.pg-home .pg-loading { color: var(--h-mut); padding: 30px 0; text-align: left; }

/* ---- 顶部公告条（深底 + 白字 92% + 底边 white/10） */
.pg-home-notice { background: #111318; border-bottom: 1px solid var(--h-line); }
.pg-home-notice-in {
  max-width: var(--h-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  font-size: 12.5px;
  line-height: 1.6;
}
.pg-home-notice-badge {
  flex: none;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(112, 123, 185, .22);
  color: #b9c2ee;
  font-size: 11px;
  letter-spacing: .04em;
}
.pg-home-notice-text {
  margin: 0;
  flex: 1;
  min-width: 0;
  color: var(--h-fg-92);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}
.pg-home-notice-in.is-open .pg-home-notice-text {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  display: block;
  overflow: visible;
}
.pg-home-notice-tg {
  flex: none;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--h-link);
  font: inherit;
  font-size: 12.5px;
  padding: 2px 4px;
  cursor: pointer;
}
.pg-home-notice-tg:hover { text-decoration: underline; }

/* ---- 内测（本地版）横幅：主色 #707bb9 实心 + 白字 */
.pg-home-beta { background: #707bb9; color: #fff; }
.pg-home-beta-in {
  max-width: var(--h-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 20px;
  font-size: 13px;
  line-height: 1.6;
}
.pg-home-beta-tag { flex: none; font-weight: 700; letter-spacing: .02em; }
.pg-home-beta-text { flex: 1; min-width: 220px; color: rgba(255, 255, 255, .96); }
.pg-home-beta-qq { flex: none; font-size: 12.5px; color: rgba(255, 255, 255, .84); }
.pg-home-beta-link {
  flex: none;
  height: 28px;
  padding: 0 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .30);
  color: #fff;
  font-size: 12.5px;
}
.pg-home-beta-link:hover { background: rgba(255, 255, 255, .26); color: #fff; text-decoration: none; }

/* ---- Hero（宋体三行，第二行渐变强调） */
.pg-home-hero { max-width: var(--h-w); margin: 0 auto; padding: 86px 20px 10px; text-align: center; }
.pg-home-hero-title {
  margin: 0;
  font-family: var(--h-serif);
  font-weight: 700;
  font-size: clamp(40px, 6.2vw, 76px);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: #f1f0eb;
}
.pg-home-hero-title em {
  font-style: normal;
  background: linear-gradient(96deg, #a9b4e8 0%, #e6e9fc 44%, #8b97d8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.pg-home-hero-sub {
  margin: 26px auto 0;
  max-width: 640px;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--h-mut);
}

/* ---- 上传区（内嵌，不跳转） */
.pg-home-up { max-width: var(--h-w); margin: 0 auto; padding: 38px 20px 0; }
.pg-home-up-zone {
  border: 1px dashed rgba(255, 255, 255, .14);
  border-radius: 24px;
  background: rgba(255, 255, 255, .015);
  padding: 40px 24px 34px;
  text-align: center;
  transition: border-color .18s, background .18s;
}
.pg-home-up-zone.is-over { border-color: var(--h-primary); background: rgba(112, 123, 185, .14); }
.pg-home-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 0 40px;
  border-radius: 999px;
  background: var(--h-primary);
  color: #fff;
  font: inherit;
  font-family: var(--h-sans);
  font-size: 16.5px;
  box-shadow: 0 10px 30px rgba(112, 123, 185, .28);
  transition: transform .16s, background .16s;
}
.pg-home-btn:hover { background: #7d88c6; transform: translateY(-1px); }
.pg-home-btn:active { transform: translateY(0); }
.pg-home-up-hint { margin-top: 16px; font-size: 13.5px; color: var(--h-mut); }
.pg-home-up-hint b { color: var(--h-fg-92); font-weight: 600; }
.pg-home-up-fmt { margin-top: 8px; font-size: 11.5px; line-height: 1.85; color: rgba(241, 240, 235, .38); }
.pg-home-up-prog { margin: 18px auto 0; max-width: 420px; display: flex; align-items: center; gap: 10px; }
.pg-home-up-bar {
  flex: 1;
  display: block;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  overflow: hidden;
}
.pg-home-up-bar > i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #707bb9, #a9b4e8);
  transition: width .2s;
}
.pg-home-up-pct { font-size: 11.5px; color: var(--h-mut); font-variant-numeric: tabular-nums; }
.pg-home-up-note {
  margin: 16px auto 0;
  max-width: 660px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12.5px;
  line-height: 1.75;
  color: rgba(241, 240, 235, .72);
}
.pg-home-up-err { color: #f0b7ad; }
.pg-home-up-go {
  flex: none;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid rgba(169, 180, 232, .42);
  font-size: 12.5px;
}

/* ---- 搜索 / 链接导入 */
.pg-home-search { max-width: var(--h-w); margin: 0 auto; padding: 30px 20px 0; text-align: center; }
.pg-home-search-form { display: flex; gap: 10px; max-width: 600px; margin: 0 auto; }
.pg-home-search-input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid var(--h-line);
  background: rgba(255, 255, 255, .04);
  color: #f1f0eb;
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color .16s, background .16s;
}
.pg-home-search-input::placeholder { color: rgba(241, 240, 235, .34); }
.pg-home-search-input:focus { border-color: var(--h-primary); background: rgba(112, 123, 185, .12); }
.pg-home-search-btn {
  flex: none;
  appearance: none;
  cursor: pointer;
  height: 48px;
  padding: 0 26px;
  border-radius: 999px;
  border: 1px solid rgba(169, 180, 232, .44);
  background: transparent;
  color: #cdd4f4;
  font: inherit;
  font-size: 14px;
  transition: background .16s;
}
.pg-home-search-btn:hover { background: rgba(169, 180, 232, .14); }
.pg-home-search-hint { margin-top: 12px; font-size: 11.5px; line-height: 1.85; color: rgba(241, 240, 235, .36); }
.pg-home-search-out { margin-top: 18px; text-align: left; }
.pg-home-sr-head { padding: 0 6px 6px; font-size: 12.5px; color: var(--h-mut); }
.pg-home-sr-note {
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid var(--h-line);
  background: rgba(255, 255, 255, .03);
  font-size: 13px;
  line-height: 1.8;
  color: var(--h-mut);
  text-align: left;
}

/* ---- SQUARE · 最热作品 */
.pg-home-square { max-width: var(--h-w); margin: 0 auto; padding: 76px 20px 0; }
.pg-home-square-title {
  margin: 0;
  font-family: var(--h-serif);
  font-weight: 700;
  font-size: clamp(21px, 2.4vw, 28px);
  letter-spacing: -.01em;
  color: #f1f0eb;
}
.pg-home-square-title span {
  font-family: var(--h-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--h-mut);
  margin-left: 10px;
}
.pg-home-rank { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--h-line); }
.pg-home-rank > li { border-bottom: 1px solid var(--h-line); }
.pg-home-rank-row {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 17px 12px;
  border-radius: 14px;
  color: inherit;
  transition: background .16s;
}
.pg-home-rank-row:hover { background: rgba(255, 255, 255, .035); color: inherit; text-decoration: none; }
.pg-home-rank-no {
  font-family: var(--h-serif);
  font-size: 21px;
  line-height: 1;
  color: rgba(241, 240, 235, .34);
  font-variant-numeric: tabular-nums;
}
.pg-home-rank-main { display: block; min-width: 0; }
.pg-home-rank-name { display: block; font-size: 16px; font-weight: 600; color: #f1f0eb; }
.pg-home-rank-ins { display: block; margin-top: 5px; font-size: 12px; line-height: 1.7; color: var(--h-mut); }
.pg-home-rank-tr {
  flex: none;
  padding: 3px 11px;
  border-radius: 999px;
  border: 1px solid rgba(169, 180, 232, .32);
  color: var(--h-link);
  font-size: 12px;
  white-space: nowrap;
}
.pg-home-rank-sm .pg-home-rank-row { grid-template-columns: 40px 1fr auto; gap: 12px; padding: 12px 10px; }
.pg-home-rank-sm .pg-home-rank-no { font-size: 16px; }
.pg-home-rank-sm .pg-home-rank-name { font-size: 14.5px; }
.pg-home-rank-sm .pg-home-rank-ins { font-size: 11.5px; }

/* ---- 页脚 */
.pg-home-foot {
  margin-top: 78px;
  border-top: 1px solid var(--h-line);
  padding: 26px 20px 46px;
  text-align: center;
  font-size: 12.5px;
  line-height: 2;
  color: rgba(241, 240, 235, .46);
}
.pg-home-foot-main { color: var(--h-mut); }
.pg-home-foot-links { margin-top: 2px; }
.pg-home-foot-dot { margin: 0 8px; color: rgba(241, 240, 235, .26); }
.pg-home-foot-ver {
  margin-top: 6px;
  font-family: var(--h-serif);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: rgba(241, 240, 235, .30);
}

/* 首页响应式：<760px 单列（本来单列）+ Hero 降档 + 内测横幅换行 */
@media (max-width: 760px) {
  .pg-home { margin: -18px -14px -48px; }
  .pg-home-hero { padding: 56px 16px 6px; }
  .pg-home-hero-title { font-size: clamp(30px, 9.4vw, 44px); }
  .pg-home-hero-sub { margin-top: 18px; font-size: 14px; }
  .pg-home-up { padding: 30px 14px 0; }
  .pg-home-up-zone { padding: 30px 16px 26px; border-radius: 18px; }
  .pg-home-btn { height: 48px; padding: 0 30px; font-size: 15.5px; }
  .pg-home-search { padding: 24px 14px 0; }
  .pg-home-search-form { flex-direction: column; }
  .pg-home-search-btn { width: 100%; }
  .pg-home-beta-in { padding: 10px 14px; gap: 8px; }
  .pg-home-beta-text { flex: 1 1 100%; min-width: 100%; order: 3; font-size: 12.5px; }
  .pg-home-beta-qq { order: 2; }
  .pg-home-beta-link { order: 4; margin-left: auto; }
  .pg-home-square { padding: 52px 14px 0; }
  .pg-home-square-title span { display: block; margin: 6px 0 0; }
  .pg-home-rank-row { grid-template-columns: 40px 1fr auto; gap: 10px; padding: 14px 6px; }
  .pg-home-rank-name { font-size: 15px; }
  .pg-home-rank-no { font-size: 18px; }
  .pg-home-rank-tr { font-size: 11px; padding: 2px 9px; }
  .pg-home-foot { margin-top: 52px; padding: 22px 16px 36px; }
}


/* ---- 本轮（子任务 AJ）新增：眉标 / 副标 / 正文 / 入口 / 拖拽遮罩 ---- */
.pg-home-eyebrow {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 14px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(241, 240, 235, .40);
}
.pg-home-brand {
  font-family: var(--h-serif); font-size: 13px; font-weight: 600;
  letter-spacing: .22em; text-transform: none; color: var(--h-fg);
}
.pg-home-eyebrow > span::before { content: "·"; margin: 0 8px 0 0; opacity: .5; }
.pg-home-eyebrow-2 { color: rgba(241, 240, 235, .28); }
.pg-home-hero-sub {
  margin: 20px auto 0; max-width: 620px; font-size: 15px;
  letter-spacing: .04em; color: var(--h-fg-92);
}
.pg-home-hero-lead {
  margin: 12px auto 0; max-width: 660px; font-size: 14px; line-height: 2.05;
  color: var(--h-mut);
}
.pg-home-hero-cta {
  margin-top: 30px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.pg-home-btn-ghost {
  background: transparent; border: 1px solid var(--h-line); color: var(--h-fg-92);
}
.pg-home-btn-ghost:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .22); }
.pg-home-auth {
  margin-top: 14px; display: flex; gap: 18px; justify-content: center; flex-wrap: wrap;
  font-size: 12.5px;
}
.pg-home-linkbtn {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--h-link); border-bottom: 1px solid transparent;
}
.pg-home-linkbtn:hover { border-bottom-color: var(--h-link); }
.pg-home-linkbtn-2 { color: var(--h-mut); }
.pg-home-prompt {
  margin: 34px auto 0; max-width: 620px; display: flex; gap: 10px;
}
.pg-home-prompt-input {
  flex: 1; height: 46px; padding: 0 16px; border-radius: 12px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--h-line);
  color: var(--h-fg); font: inherit; font-size: 13.5px;
}
.pg-home-prompt-input::placeholder { color: rgba(241, 240, 235, .34); }
.pg-home-prompt-input:focus { outline: none; border-color: var(--h-primary); background: rgba(112, 123, 185, .12); }
.pg-home-prompt-btn {
  flex: none; height: 46px; padding: 0 22px; border-radius: 12px;
  background: rgba(169, 180, 232, .12); border: 1px solid var(--h-line);
  color: var(--h-fg-92); font: inherit; font-size: 13.5px; cursor: pointer;
}
.pg-home-prompt-btn:hover { background: rgba(169, 180, 232, .2); }
.pg-home-hero-quota { margin-top: 22px; font-size: 12.5px; color: var(--h-link); }
.pg-home-hero-note { margin-top: 8px; font-size: 12.5px; color: rgba(241, 240, 235, .42); }
.pg-home-about { display: inline-block; margin-top: 22px; font-size: 12.5px; }

/* 内测横幅里的复制群号 / 二维码 */
.pg-home-beta-btn {
  flex: none; appearance: none; cursor: pointer; font: inherit; font-size: 12px;
  padding: 3px 10px; border-radius: 999px; color: #fff;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3);
}
.pg-home-beta-btn:hover { background: rgba(255, 255, 255, .28); }
.pg-home-qr {
  padding: 14px 20px 20px; border-top: 1px solid rgba(255, 255, 255, .18);
  color: #fff; text-align: center;
}
.pg-home-qr-title { font-size: 13.5px; font-weight: 600; }
.pg-home-qr-desc { margin-top: 6px; font-size: 12.5px; color: rgba(255, 255, 255, .88); }
.pg-home-qr-img {
  margin: 12px auto 0; width: 132px; height: 132px; border-radius: 12px;
  background: #fff; color: #22252e; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  font-size: 11px; letter-spacing: .04em;
}
.pg-home-qr-img b { font-size: 20px; }

/* ---- 上传区新增（眉标 / 标题 / 拖拽行 / 已选文件 / 提示） */
.pg-home-up-eyebrow {
  margin-bottom: 10px; text-align: center; font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(241, 240, 235, .38);
}
.pg-home-up-title {
  margin: 0 0 22px; text-align: center; font-family: var(--h-serif);
  font-size: clamp(19px, 3.2vw, 25px); font-weight: 600; color: var(--h-fg);
}
.pg-home-up-line { margin-top: 14px; font-size: 13px; color: var(--h-mut); }
.pg-home-up-pick {
  appearance: none; background: none; border: 0; padding: 0 0 1px; cursor: pointer;
  font: inherit; color: var(--h-link); border-bottom: 1px solid currentColor;
}
.pg-home-up-line-one { display: none; }
.pg-home-up-drop-hint {
  margin-top: 10px; font-size: 11.5px; line-height: 1.9; color: rgba(241, 240, 235, .34);
}
.pg-home-sel {
  margin: 14px auto 0; display: inline-flex; align-items: center; gap: 10px;
  padding: 5px 10px; border-radius: 999px; font-size: 12px;
  background: rgba(112, 123, 185, .16); border: 1px solid rgba(112, 123, 185, .4);
  color: var(--h-fg-92);
}
.pg-home-sel-x {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 11.5px; color: var(--h-mut); text-decoration: underline;
}
.pg-home-up-tips {
  margin: 14px auto 0; display: flex; flex-wrap: wrap; gap: 6px 18px;
  justify-content: center; font-size: 11.5px; color: rgba(241, 240, 235, .34);
}

/* ---- 搜索 / 链接导入 ---- */
.pg-home-search-label {
  display: block; width: 100%; margin-bottom: 10px; font-size: 11.5px;
  letter-spacing: .04em; color: rgba(241, 240, 235, .42); text-align: left;
  max-width: 600px; margin: 0 auto 10px;
}
.pg-home-search-btn-2 { background: transparent; }

/* ---- 功能两块 + manifesto ---- */
.pg-home-feats {
  max-width: var(--h-w); margin: 0 auto; padding: 66px 20px 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
}
.pg-home-feat {
  background: rgba(255, 255, 255, .03); border: 1px solid var(--h-line);
  border-radius: 16px; padding: 26px 24px 22px;
}
.pg-home-feat h3 {
  margin: 0; font-family: var(--h-serif); font-size: 19px; font-weight: 600; color: var(--h-fg);
}
.pg-home-feat p {
  margin: 12px 0 0; font-size: 13px; line-height: 2; color: var(--h-mut);
}
.pg-home-feat-enter {
  display: inline-block; margin-top: 16px; font-size: 12.5px; letter-spacing: .02em;
}
.pg-home-manifesto {
  max-width: var(--h-w); margin: 0 auto; padding: 66px 20px 0; text-align: center;
}
.pg-home-label {
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(241, 240, 235, .34);
}
.pg-home-manifesto p {
  margin: 16px auto 0; max-width: 720px; font-family: var(--h-serif);
  font-size: clamp(15px, 2.4vw, 19px); line-height: 2.1; color: var(--h-fg-92);
}

/* ---- 列表行新增：推荐标 / 播放数 ---- */
.pg-home-tag {
  margin-left: 8px; padding: 1px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 500; vertical-align: 2px;
  background: rgba(112, 123, 185, .24); color: var(--h-link);
}
.pg-home-views { display: block; margin-top: 4px; font-size: 11.5px; color: rgba(241, 240, 235, .34); }
.pg-home-notice-tel { margin-left: 6px; color: var(--h-link); }

/* ---- 全页拖拽遮罩 ---- */
.pg-home-drop-ov {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background: rgba(17, 19, 24, .82);
  display: flex; align-items: center; justify-content: center;
}
.pg-home-drop-ov-in {
  padding: 34px 46px; border-radius: 20px; text-align: center;
  border: 2px dashed rgba(169, 180, 232, .55); background: rgba(112, 123, 185, .12);
}
.pg-home-drop-ov-in b {
  display: block; font-family: var(--h-serif); font-size: clamp(20px, 3.4vw, 28px); color: var(--h-fg);
}
.pg-home-drop-ov-in span { display: block; margin-top: 10px; font-size: 13px; color: var(--h-mut); }

/* 首页新增块响应式 */
@media (max-width: 760px) {
  .pg-home-hero-lead { font-size: 13px; }
  .pg-home-prompt { flex-direction: column; max-width: 100%; padding: 0 4px; }
  .pg-home-prompt-btn { width: 100%; }
  .pg-home-feats { grid-template-columns: minmax(0, 1fr); padding: 48px 14px 0; }
  .pg-home-manifesto { padding: 48px 16px 0; }
  .pg-home-up-line-split { display: none; }
  .pg-home-up-line-one { display: inline; }
  .pg-home-search-label { max-width: 100%; }
  .pg-home-drop-ov-in { padding: 26px 24px; }
}

/* ==========================================================================
   设置体系（/settings）· 浅色主题令牌 + .pg-set-* 组件
   --------------------------------------------------------------------------
   两块内容：
     ① html.light:root —— 浅色主题的令牌组（base.css 一行未动）
     ② .pg-set-*      —— 设置页专用样式（左栏 5 分区 + 主题卡 + 色块 + 键位框）
   说明：base.css 的深色令牌写在 `:root, html.dark:root` 上，优先级 (0,2,1)；
        `html.light:root` 同为 (0,2,1) 且 pages.css 在 index.html 里后加载，
        因此只要 <html> 上只有 light 没有 dark，浅色就一定生效（theme.js 保证互斥）。
   ========================================================================== */

/* ---------------------------------------------------------------- ① 浅色令牌 */

:root { --lp-key-accent: #707bb9; }   /* 琴键色兜底（theme.js 会写内联覆盖） */

html.light:root {
  color-scheme: light;

  /* 底色与层次 */
  --lp-bg: #f5f6fa;
  --lp-fg: #1b1e25;
  --lp-card: #ffffff;
  --lp-card-2: #eef1f7;
  --lp-primary: #5b66a8;
  --lp-primary-dark: #414b85;
  --lp-primary-soft: rgba(91, 102, 168, .14);
  --lp-secondary: #e8ecf4;
  --lp-muted: #e2e7f0;
  --lp-muted-fg: #5a606d;
  --lp-border: rgba(20, 26, 44, .13);
  --lp-danger: #c8452f;
  --lp-ok: #2f8a5f;
  --lp-warn: #96701a;

  /* 半径与阴影（浅底阴影要软，重了显脏） */
  --lp-radius: 10px;
  --lp-radius-sm: 6px;
  --lp-shadow: 0 1px 2px rgba(20, 26, 44, .06), 0 8px 20px rgba(20, 26, 44, .07);
  --lp-shadow-lg: 0 12px 36px rgba(20, 26, 44, .14);

  /* 文字 / 描边 / 悬停 / 状态配对 */
  --lp-link: #414b85;
  --lp-primary-text: #3c4680;
  --lp-line-strong: rgba(20, 26, 44, .24);
  --lp-hover: rgba(20, 26, 44, .055);
  --lp-hover-soft: rgba(20, 26, 44, .03);
  --lp-ok-soft: rgba(47, 138, 95, .13);
  --lp-warn-soft: rgba(150, 112, 26, .14);
  --lp-danger-soft: rgba(200, 69, 47, .12);
  --lp-ok-fg: #1f7350;
  --lp-warn-fg: #7d5d13;
  --lp-danger-fg: #a63722;

  --lp-key-accent: #5b66a8;
}

/* base.css 里写死深色值的几处（不在可改清单里，只能在浅色作用域里覆盖） */
html.light { scrollbar-color: rgba(20, 26, 44, .26) transparent; }
html.light .lp-header {
  background: rgba(245, 246, 250, .88);
  border-bottom-color: rgba(20, 26, 44, .10);
}
html.light .lp-footer { border-top-color: rgba(20, 26, 44, .10); }
html.light .table tbody tr:hover td { background: rgba(20, 26, 44, .04); }
html.light .spinner { border-color: rgba(20, 26, 44, .16); border-top-color: var(--lp-primary); }
html.light .modal-mask { background: rgba(20, 26, 44, .38); }
html.light .toast { background: #23262e; color: #f6f7fb; border-color: rgba(20, 26, 44, .32); }
html.light .toast-error { background: #8a2a1b; color: #fff; }
html.light ::selection { background: rgba(91, 102, 168, .22); color: #14161b; }
html.light .btn-solid:hover { background: #35406f; }
html.light .pg-note-warn { background: var(--lp-warn-soft); color: var(--lp-warn-fg); }
html.light .pg-note-danger { background: var(--lp-danger-soft); color: var(--lp-danger-fg); }
html.light body .pg-nt-scroll::-webkit-scrollbar-thumb { background: rgba(20, 26, 44, .22); }

/* 首页（.pg-home）自带 --h-* 一套令牌 + 写死的 #111318 深底，浅色下要一起换 */
html.light .pg-home {
  --h-fg: #1b1e25;
  --h-fg-92: rgba(27, 30, 37, .92);
  --h-mut: rgba(27, 30, 37, .62);
  --h-line: rgba(20, 26, 44, .10);
  --h-link: #3c4680;
  background: var(--lp-bg);
  color: var(--h-fg-92);
}
html.light .pg-home::before { background: #f5f6fa; }
html.light .pg-home-notice { background: #f5f6fa; }
html.light .pg-home a { color: var(--h-link); }
html.light .pg-home a:hover { color: #2c356b; }
html.light .pg-home-rank-name { color: var(--lp-fg); }
html.light .pg-home-rank-row:hover { background: rgba(20, 26, 44, .035); }
html.light .pg-home-feat { background: var(--lp-card); }
html.light .pg-home-prompt-input { background: #fff; }
html.light .pg-home-prompt-btn { color: var(--h-fg-92); }
html.light .pg-home-tag { color: var(--h-link); }
html.light .pg-home-views { color: var(--lp-muted-fg); }
html.light .pg-home-drop-ov { background: rgba(245, 246, 250, .88); }
html.light .pg-home-drop-ov-in { border-color: rgba(60, 70, 128, .45); background: #fff; }
html.light .pg-home-drop-ov-in b { color: var(--lp-fg); }

/* ---------------------------------------------------------------- ② 设置页 */

.pg-set {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.pg-set-nav {
  background: var(--lp-card);
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius);
  padding: 8px;
  position: sticky;
  top: 72px;
  box-shadow: var(--lp-shadow);
}
.pg-set-nav-title {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lp-muted-fg); padding: 6px 12px 8px;
}
.pg-set-tab {
  display: flex; align-items: center; gap: 9px; width: 100%;
  text-align: left; padding: 9px 12px; border: 0; border-radius: var(--lp-radius-sm);
  background: transparent; color: var(--lp-muted-fg);
  font: inherit; font-size: 13px; cursor: pointer; transition: .15s; margin-bottom: 2px;
}
.pg-set-tab:hover { background: var(--lp-secondary); color: var(--lp-fg); }
.pg-set-tab.on { background: var(--lp-primary); color: #fff; font-weight: 500; }
.pg-set-tab i { font-style: normal; width: 18px; text-align: center; opacity: .92; }

.pg-set-body { min-width: 0; }
.pg-set-panel { display: none; }
.pg-set-panel.on { display: block; }

.pg-set-card {
  background: var(--lp-card);
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius);
  padding: 18px 20px 20px;
  box-shadow: var(--lp-shadow);
  margin-bottom: 16px;
}
.pg-set-h { font-family: var(--lp-serif); font-size: 19px; margin: 0 0 5px; }
.pg-set-sub { color: var(--lp-muted-fg); font-size: 12.5px; line-height: 1.75; margin: 0 0 14px; }
.pg-set-sub b { color: var(--lp-fg); }

.pg-set-row {
  display: flex; gap: 16px; align-items: center; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--lp-border);
}
.pg-set-row:last-child { border-bottom: 0; padding-bottom: 0; }
.pg-set-label { min-width: 0; }
.pg-set-label b { display: block; font-size: 13.5px; font-weight: 600; }
.pg-set-label span { display: block; color: var(--lp-muted-fg); font-size: 12px; line-height: 1.65; margin-top: 2px; }
.pg-set-ctl { flex: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pg-set-ctl .input { width: auto; min-width: 160px; }
.pg-set-ctl .select { width: auto; min-width: 210px; }

/* 提示块 */
.pg-set-note,
.pg-set-warn,
.pg-set-ok {
  border-radius: var(--lp-radius-sm);
  padding: 9px 12px;
  font-size: 12px;
  line-height: 1.7;
  margin: 10px 0 0;
  white-space: pre-wrap;
}
.pg-set-note { background: var(--lp-primary-soft); color: var(--lp-primary-text); }
.pg-set-warn { background: var(--lp-warn-soft); color: var(--lp-warn-fg); }
.pg-set-ok { background: var(--lp-ok-soft); color: var(--lp-ok-fg); }
.pg-set-ok:not(.on) { opacity: .55; }

/* 主题三选一 */
.pg-set-themes { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.pg-set-theme {
  text-align: left; padding: 14px 15px; border-radius: var(--lp-radius);
  border: 1px solid var(--lp-border); background: var(--lp-card-2);
  color: var(--lp-fg); font: inherit; cursor: pointer; transition: .16s;
}
.pg-set-theme:hover { border-color: var(--lp-line-strong); transform: translateY(-1px); }
.pg-set-theme.on { border-color: var(--lp-primary); box-shadow: 0 0 0 3px var(--lp-primary-soft); }
.pg-set-theme .ic { display: block; font-size: 18px; line-height: 1; margin-bottom: 7px; }
.pg-set-theme b { display: block; font-size: 13.5px; }
.pg-set-theme span { display: block; font-size: 11.5px; color: var(--lp-muted-fg); line-height: 1.6; margin-top: 3px; }

/* 琴键色块 */
.pg-set-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.pg-set-swatch {
  width: 34px; height: 34px; border-radius: 9px; border: 2px solid transparent;
  padding: 0; cursor: pointer; transition: .15s; position: relative;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.pg-set-swatch:hover { transform: translateY(-2px); }
.pg-set-swatch.on { border-color: var(--lp-fg); box-shadow: 0 0 0 3px var(--lp-primary-soft); }

/* 键盘预览：白键条 + 黑键块，点亮的那个白键就是琴键色 */
.pg-set-keys {
  display: flex; gap: 2px; margin-top: 12px; height: 56px;
  padding: 7px; background: var(--lp-card-2);
  border: 1px solid var(--lp-border); border-radius: 8px; align-items: flex-end;
  position: relative; overflow: hidden;
}
.pg-set-key {
  flex: 1; height: 100%; border-radius: 0 0 4px 4px;
  background: #f3f2ee; border: 1px solid rgba(20, 26, 44, .22);
}
.pg-set-key.on { background: var(--lp-key-accent); border-color: var(--lp-key-accent); }
.pg-set-key.black {
  flex: 0 0 8px; height: 62%; margin: 0 -5px 0 0; z-index: 1;
  background: #23262e; border-color: rgba(0, 0, 0, .55);
}

/* 单选模式卡（乐谱显示用） */
.pg-set-grp-title { font-size: 11.5px; letter-spacing: .08em; color: var(--lp-muted-fg); margin: 16px 0 7px; }
.pg-set-modes { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.pg-set-mode {
  text-align: left; padding: 12px 14px; border-radius: var(--lp-radius);
  border: 1px solid var(--lp-border); background: var(--lp-card-2);
  color: var(--lp-fg); font: inherit; cursor: pointer; transition: .16s;
}
.pg-set-mode:hover { border-color: var(--lp-line-strong); }
.pg-set-mode.on { border-color: var(--lp-primary); background: var(--lp-primary-soft); }
.pg-set-mode b { display: block; font-size: 13.5px; margin-bottom: 3px; }
.pg-set-mode span { display: block; font-size: 11.5px; color: var(--lp-muted-fg); line-height: 1.6; }

/* 语言与区域的样例行 */
.pg-set-sample {
  margin-top: 14px; padding: 10px 14px;
  background: var(--lp-card-2); border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius-sm);
}
.pg-set-sample-row {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 12.5px; padding: 5px 0; border-bottom: 1px dashed var(--lp-border);
}
.pg-set-sample-row:last-child { border-bottom: 0; }
.pg-set-sample-row span { color: var(--lp-muted-fg); flex: none; }
.pg-set-sample-row b { font-family: var(--lp-mono); font-size: 12.5px; text-align: right; }

/* 快捷键列表 */
.pg-set-sc {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px; align-items: center; padding: 9px 0;
  border-bottom: 1px solid var(--lp-border);
}
.pg-set-sc:last-child { border-bottom: 0; }
.pg-set-sc-name { font-size: 13px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pg-set-key-box {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 138px; height: 32px; padding: 0 12px;
  border-radius: 7px; border: 1px dashed var(--lp-line-strong);
  background: var(--lp-card-2); color: var(--lp-fg);
  font-family: var(--lp-mono); font-size: 12px; cursor: pointer; transition: .15s;
}
.pg-set-key-box:hover { border-color: var(--lp-primary); color: var(--lp-primary-text); }
.pg-set-key-box.on {
  border-style: solid; border-color: var(--lp-primary);
  background: var(--lp-primary-soft); color: var(--lp-primary-text);
}
.pg-set-key-box.empty { color: var(--lp-muted-fg); }
.pg-set-key-box.bad { border-color: var(--lp-danger); color: var(--lp-danger-fg); }
.pg-set-badge {
  font-size: 10.5px; padding: 1px 7px; border-radius: 999px;
  background: var(--lp-hover); color: var(--lp-muted-fg); border: 1px solid var(--lp-border);
}
.pg-set-badge.bad { background: var(--lp-danger-soft); color: var(--lp-danger-fg); border-color: transparent; }

.pg-set-foot {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--lp-border);
}

/* ---------------------------------------------------------------- 窄屏 */

@media (max-width: 860px) {
  .pg-set { grid-template-columns: 1fr; gap: 14px; }
  .pg-set-nav {
    position: static; display: flex; gap: 6px; overflow-x: auto; padding: 6px;
  }
  .pg-set-nav-title { display: none; }
  .pg-set-tab { width: auto; white-space: nowrap; margin-bottom: 0; }
  .pg-set-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .pg-set-ctl { justify-content: flex-start; }
  .pg-set-ctl .select { min-width: 0; width: 100%; }
  .pg-set-sc { grid-template-columns: minmax(0, 1fr) auto; }
  .pg-set-key-box { min-width: 108px; }
}

/* ================================================================
   练琴模式（/practice/:id）—— 只追加 `.pg-practice-*` 区块
   ================================================================ */
.pg-practice-bar {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end;
  padding: 14px 16px; margin-bottom: 14px;
  border: 1px solid var(--lp-border); border-radius: var(--lp-radius);
  background: var(--lp-card);
}
.pg-practice-field { display: flex; flex-direction: column; gap: 7px; }
.pg-practice-go { margin-left: auto; }
.pg-practice-label { font-size: 12px; color: var(--lp-muted-fg); display: flex; gap: 7px; align-items: center; }
.pg-practice-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-practice-opt {
  height: 30px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--lp-border); background: var(--lp-card-2);
  color: var(--lp-fg); font-size: 12.5px; cursor: pointer; transition: .15s;
}
.pg-practice-opt:hover { border-color: var(--lp-line-strong); }
.pg-practice-opt.is-on {
  border-color: var(--lp-primary); background: var(--lp-primary-soft);
  color: var(--lp-primary-text); font-weight: 600;
}
.pg-practice-opt.is-off { opacity: .42; cursor: not-allowed; }
.pg-pr-dot { font-style: normal; font-size: 10.5px; opacity: .8; }
.pg-practice-hint { font-size: 11.5px; color: var(--lp-muted-fg); line-height: 1.65; }

/* ---- 进度 ---- */
.pg-practice-prog {
  padding: 12px 14px; margin-bottom: 14px;
  border: 1px solid var(--lp-border); border-radius: var(--lp-radius);
  background: var(--lp-card);
}
.pg-practice-prog-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; font-size: 13px; margin-bottom: 9px;
}
.pg-practice-bar-track {
  height: 6px; border-radius: 999px; background: var(--lp-hover); overflow: hidden;
}
.pg-practice-bar-track > i {
  display: block; height: 100%; width: 0;
  background: var(--lp-primary); transition: width .3s ease;
}
.pg-practice-stages { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pg-practice-chip {
  font-size: 11px; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--lp-border); color: var(--lp-muted-fg);
}
.pg-practice-chip.now { border-color: var(--lp-primary); background: var(--lp-primary-soft); color: var(--lp-primary-text); }
.pg-practice-chip.done { border-color: transparent; background: var(--lp-hover); color: var(--lp-fg); }

/* ---- 主体：左谱右播放器 ---- */
.pg-practice-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); }
.pg-practice-score { min-width: 0; }
.pg-practice-score-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin-bottom: 10px; font-size: 13px;
}
.pg-practice-score-body { min-height: 180px; }
.pg-practice-score-scroll {
  overflow-x: auto; overflow-y: hidden; border-radius: 8px;
  border: 1px solid var(--lp-border); background: #fff;
}
.pg-practice-score-inner { position: relative; }
.pg-practice-score-inner > img { display: block; max-width: none; }
.pg-practice-playhead {
  position: absolute; top: 0; bottom: 0; width: 8px; left: 0;
  background: rgba(110, 92, 214, .18);
  border-left: 2px solid var(--lp-primary);
  border-radius: 3px; pointer-events: none; opacity: 0; transition: left .08s linear;
}

/* ---- 右侧：播放器 + 导出 ---- */
.pg-practice-side { display: flex; flex-direction: column; gap: 12px; }
.pg-practice-side-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 13.5px;
}
.pg-practice-modes { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-practice-transport {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 4px;
}
.pg-practice-clock { font-family: var(--lp-mono); font-size: 12.5px; color: var(--lp-muted-fg); }
.pg-practice-loop { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--lp-muted-fg); }
.pg-practice-slider { display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: center; gap: 8px; }
.pg-practice-slider > label { font-size: 11.5px; color: var(--lp-muted-fg); }
.pg-practice-slider > input[type="range"] { width: 100%; }
.pg-practice-export { padding-top: 10px; border-top: 1px solid var(--lp-border); }
.pg-practice-export .row { margin-top: 8px; }
.pg-practice-warns { padding-top: 8px; border-top: 1px dashed var(--lp-border); }

/* ================================================================
   录音打谱（/record）—— 只追加 `.pg-rec-*` 区块
   ================================================================ */
.pg-rec-tip {
  padding: 11px 14px; margin-bottom: 16px; font-size: 12.5px; line-height: 1.75;
  border: 1px solid var(--lp-border); border-left: 3px solid var(--lp-warn);
  border-radius: 10px; background: var(--lp-card); color: var(--lp-fg);
}
.pg-rec-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.pg-rec-card { display: flex; flex-direction: column; gap: 10px; }
.pg-rec-title { font-size: 14.5px; font-weight: 600; }
.pg-rec-sub { font-size: 12px; color: var(--lp-muted-fg); line-height: 1.7; }
.pg-rec-hint { font-size: 11.5px; color: var(--lp-muted-fg); line-height: 1.65; }
.pg-rec-meter {
  height: 10px; border-radius: 999px; background: var(--lp-hover); overflow: hidden;
}
.pg-rec-meter > i {
  display: block; height: 100%; width: 2%; border-radius: 999px;
  background: linear-gradient(90deg, var(--lp-ok, #2e7d5b), var(--lp-primary));
  transition: width .08s linear;
}
.pg-rec-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pg-rec-clock { font-family: var(--lp-mono); font-size: 15px; min-width: 54px; }
.pg-rec-unsupported {
  font-size: 12.5px; line-height: 1.7; padding: 10px 12px; border-radius: 9px;
  background: var(--lp-danger-soft); color: var(--lp-danger-fg);
}
.pg-rec-pick {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 26px 16px; border-radius: 12px; cursor: pointer; text-align: center;
  border: 1.5px dashed var(--lp-line-strong); background: var(--lp-card-2); transition: .15s;
}
.pg-rec-pick:hover { border-color: var(--lp-primary); background: var(--lp-primary-soft); }
.pg-rec-pick-icon { font-size: 26px; line-height: 1; color: var(--lp-primary); }
.pg-rec-pick-text { font-size: 13.5px; }
.pg-rec-prog {
  margin-top: 16px; padding: 12px 14px;
  border: 1px solid var(--lp-border); border-radius: var(--lp-radius);
  background: var(--lp-card);
}
.pg-rec-prog-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; font-size: 13px; margin-bottom: 9px;
}
.pg-rec-bar { height: 6px; border-radius: 999px; background: var(--lp-hover); overflow: hidden; }
.pg-rec-bar > i { display: block; height: 100%; width: 0; background: var(--lp-primary); transition: width .3s ease; }

@media (max-width: 860px) {
  .pg-practice-grid { grid-template-columns: 1fr; }
  .pg-practice-go { margin-left: 0; }
  .pg-practice-slider { grid-template-columns: 58px minmax(0, 1fr); }
}

/* ================================================================ 歌词跟唱层
   叠在曲谱图上的透明字层：每个字一个 span，位置由 anchors 的 tick→x 换算。
   播放时给当前字加 .on（主色底 + 白字），字跑到右侧就跟上滚动，点字跳转。 */
.pg-nt-lyr {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.pg-nt-lyr-ch {
  position: absolute;
  bottom: 6px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 12px;
  color: transparent;           /* 默认透明：文字已经由后端画在 SVG 里，这层只负责高亮 */
  border-radius: 4px;
  pointer-events: auto;
  cursor: pointer;
  transition: background-color .08s linear, color .08s linear, transform .08s linear;
}
.pg-nt-lyr-ch:hover {
  background: var(--lp-primary-soft);
  color: var(--lp-primary-text);
}
.pg-nt-lyr-ch.on {
  background: var(--lp-primary);
  color: #fff;
  font-weight: 600;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(112, 123, 185, .45);
}
html.light .pg-nt-lyr-ch.on {
  background: var(--lp-primary);
  color: #fff;
}

/* ---------------------------------------------------------------- 六线谱 */
.pg-nt-tab-body { margin-top: 8px; }
.pg-nt-ignored { margin: 6px 0 0 18px; padding: 0; }
.pg-nt-ignored li { margin: 2px 0; }
.pg-nt-xml-pre {
  max-height: 260px;
  overflow: auto;
  margin: 6px 0 0;
  padding: 10px;
  background: var(--lp-card-2);
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius);
  font-family: var(--lp-font-mono, monospace);
  font-size: 11.5px;
  line-height: 1.5;
  white-space: pre;
}
details.pg-nt-xml > summary { cursor: pointer; }

/* ---------------------------------------------------------------- 乐谱导入 */
.pg-imp-drop {
  margin: 14px 0 18px;
  padding: 30px 20px;
  border: 1.5px dashed var(--lp-border);
  border-radius: var(--lp-radius);
  background: var(--lp-card);
  text-align: center;
  transition: border-color .15s, background .15s;
}
.pg-imp-drop.is-over {
  border-color: var(--lp-primary);
  background: var(--lp-primary-soft);
}
.pg-imp-icon {
  width: 46px; height: 46px; line-height: 46px;
  margin: 0 auto 10px;
  border-radius: 12px;
  background: var(--lp-primary-soft);
  color: var(--lp-primary-text);
  font-family: var(--lp-serif);
  font-size: 22px;
}
.pg-imp-main { font-size: 15px; }
.pg-imp-hint { margin-top: 8px; }
.pg-imp-stage, .pg-imp-err {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: var(--lp-radius);
  border: 1px solid var(--lp-border);
  background: var(--lp-card);
  display: flex; align-items: center; gap: 10px;
}
.pg-imp-err { border-color: rgba(224, 90, 74, .45); background: rgba(224, 90, 74, .08); display: block; }
.pg-imp-cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.pg-imp-card {
  padding: 12px 14px;
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius);
  background: var(--lp-card);
}
.pg-imp-card.is-off { opacity: .72; }
.pg-imp-card-ext { font-size: 13px; font-weight: 600; color: var(--lp-primary-text); }
.pg-imp-card-meta { margin: 6px 0 4px; }
.pg-imp-note { margin-top: 18px; }
.pg-imp-note > summary { cursor: pointer; }

/* ==========================================================================
   曲谱页底部「乐器面板」.pg-inst-*（钢琴 / 吉他 / 贝斯 / 鼓）
   --------------------------------------------------------------------------
   结构：左侧竖排乐器名 + 右侧工具行 + 一块固定的 156px 舞台。
   面板总高 ≈ 178px（10+10 内边距 + 156 舞台 + 2 边框），落在 170–190 的要求内。

   配色一律走令牌，不写死色值：
     · 白键 / 黑键的对比靠 --pg-inst-key-light / --pg-inst-key-dark 这一对，
       深色主题下取「前景色 ↔ 底色」，浅色主题在下方 html.light 里翻过来
       （白键 = 卡片白，黑键 = 深前景），所以两种主题下都看得出琴键。
     · 点亮色 = --lp-key-accent（设置页「琴键颜色」写的那个变量，回退 --lp-primary）。
     · 力度只改**不透明度**（--pg-inst-lvl，由 JS 按 vel/127 写），不改色相。
   ========================================================================== */

.pg-inst {
  /* 琴键对：深色主题下白键=前景色、黑键=底色；浅色主题在 html.light 里翻过来 */
  --pg-inst-key-light: var(--lp-fg);
  --pg-inst-key-dark: var(--lp-bg);
  --pg-inst-glow: var(--lp-key-accent, var(--lp-primary));

  margin-top: 12px;
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius);
  background: var(--lp-card);
  overflow: hidden;
}

html.light .pg-inst {
  --pg-inst-key-light: var(--lp-card);
  --pg-inst-key-dark: var(--lp-fg);
}

.pg-inst-main { display: flex; gap: 10px; padding: 10px 12px; }

/* ---------------------------------------------------------------- 左栏乐器名 */
.pg-inst-rail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 64px;
  min-width: 0;
}
.pg-inst-vtab {
  flex: 1 1 0;
  min-height: 0;
  padding: 0 6px;
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius-sm);
  background: var(--lp-card-2);
  color: var(--lp-muted-fg);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.pg-inst-vtab:hover { background: var(--lp-hover); color: var(--lp-fg); }
.pg-inst-vtab.on {
  background: var(--lp-primary-soft);
  border-color: var(--lp-primary);
  color: var(--lp-primary-text);
  font-weight: 600;
}

/* ---------------------------------------------------------------- 舞台 */
.pg-inst-stage {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 156px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pg-inst-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 22px;
  min-width: 0;
}
.pg-inst-info {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--lp-mono);
  font-size: 12px;
  color: var(--lp-muted-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 移调：和页面顶部那个 stepper 读同一个 state */
.pg-inst-tr {
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius-sm);
  background: var(--lp-card-2);
  overflow: hidden;
}
.pg-inst-tr > button {
  min-width: 26px;
  height: 22px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--lp-fg);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.pg-inst-tr > button:hover { background: var(--lp-hover); }
.pg-inst-tr > button + button { border-left: 1px solid var(--lp-border); }
.pg-inst-trn { font-family: var(--lp-mono); min-width: 34px !important; }
.pg-inst-trn.on { color: var(--lp-primary-text); font-weight: 600; }

.pg-inst-chip,
.pg-inst-fold {
  flex: 0 0 auto;
  height: 22px;
  padding: 0 9px;
  border: 1px solid var(--lp-border);
  border-radius: 999px;
  background: transparent;
  color: var(--lp-muted-fg);
  font: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}
.pg-inst-chip::before { content: "☐ "; }
.pg-inst-chip:hover,
.pg-inst-fold:hover { background: var(--lp-hover); color: var(--lp-fg); }
.pg-inst-chip.on {
  border-color: var(--lp-primary);
  background: var(--lp-primary-soft);
  color: var(--lp-primary-text);
}
.pg-inst-chip.on::before { content: "☑ "; }

.pg-inst-board { flex: 1 1 auto; min-height: 0; }
.pg-inst-board.hidden { display: none; }

.pg-inst-empty {
  position: absolute;
  left: 0;
  right: 0;
  top: 58%;
  transform: translateY(-50%);
  text-align: center;
  font-size: 12px;
  color: var(--lp-muted-fg);
  pointer-events: none;
}
.pg-inst-empty.hidden { display: none; }

/* 所有格子的点亮层：不透明度由 --pg-inst-lvl 决定（力度） */
.pg-inst-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--pg-inst-glow);
  opacity: 0;
  pointer-events: none;
  transition: opacity .06s linear;
}
.pg-inst-key.on .pg-inst-glow,
.pg-inst-fret-cell.on .pg-inst-glow,
.pg-inst-drum.on .pg-inst-glow { opacity: var(--pg-inst-lvl, 1); }

/* ---------------------------------------------------------------- 钢琴 */
.pg-inst-keys {
  position: relative;
  height: 100%;
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius-sm);
  background: var(--lp-card-2);
  overflow: hidden;
}
.pg-inst-key {
  display: block;
  position: absolute;
  top: 0;
  height: 100%;
  box-sizing: border-box;
  background: var(--pg-inst-key-light);
  border: 1px solid var(--lp-border);
  border-radius: 0 0 4px 4px;
  cursor: default;
}
.pg-inst-key .pg-inst-glow { border-radius: 0 0 4px 4px; }
.pg-inst-key.is-black {
  height: 62%;
  z-index: 2;
  background: var(--pg-inst-key-dark);
  border-color: var(--lp-border);
  border-radius: 0 0 3px 3px;
}
.pg-inst-keylab {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  text-align: center;
  font-family: var(--lp-mono);
  font-size: 10px;
  line-height: 1;
  color: var(--lp-muted-fg);
  pointer-events: none;
}

/* ---------------------------------------------------------------- 指板 */
.pg-inst-fret {
  display: grid;
  height: 100%;
  gap: 2px;
  align-content: stretch;
}
.pg-inst-fret-corner { display: block; }
.pg-inst-fret-num,
.pg-inst-fret-name {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--lp-mono);
  font-size: 10px;
  line-height: 1;
  color: var(--lp-muted-fg);
}
.pg-inst-fret-name { color: var(--lp-fg); font-size: 11px; }
.pg-inst-fret-cell {
  display: block;
  position: relative;
  min-height: 0;
  border: 1px solid var(--lp-border);
  border-radius: 3px;
  background: var(--lp-card-2);
}
.pg-inst-fret-cell.is-open { border-left: 2px solid var(--lp-line-strong); }
.pg-inst-fret-cell.on { border-color: var(--lp-primary); }

/* ---------------------------------------------------------------- 鼓 */
.pg-inst-drums {
  display: grid;
  height: 100%;
  gap: 6px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
}
.pg-inst-drum {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius-sm);
  background: var(--lp-card-2);
}
.pg-inst-drum.on { border-color: var(--lp-primary); }
.pg-inst-drum-ico { font-size: 15px; line-height: 1; color: var(--lp-muted-fg); }
.pg-inst-drum-nm { font-size: 11px; line-height: 1.1; color: var(--lp-fg); }
.pg-inst-drum-key {
  font-family: var(--lp-mono);
  font-size: 9px;
  line-height: 1;
  color: var(--lp-muted-fg);
}

/* ---------------------------------------------------------------- 折叠态 */
.pg-inst.is-folded .pg-inst-main { align-items: center; padding: 6px 10px; }
.pg-inst.is-folded .pg-inst-rail { flex: 0 0 auto; flex-direction: row; gap: 6px; }
.pg-inst.is-folded .pg-inst-vtab { flex: 0 0 auto; height: 26px; padding: 0 12px; font-size: 12px; }
.pg-inst.is-folded .pg-inst-stage { height: auto; flex: 1 1 auto; }
.pg-inst.is-folded .pg-inst-tools { flex: 0 0 26px; }
.pg-inst.is-folded .pg-inst-board,
.pg-inst.is-folded .pg-inst-empty { display: none; }
.pg-inst.is-folded .pg-inst-info { font-size: 11px; }

/* 窄屏：左栏改横排、工具行换行，别把 170px 的舞台撑破 */
@media (max-width: 620px) {
  .pg-inst-main { flex-direction: column; gap: 8px; }
  .pg-inst-rail { flex: 0 0 auto; flex-direction: row; }
  .pg-inst-vtab { flex: 1 1 0; height: 26px; padding: 0 4px; }
  .pg-inst-tools { flex-wrap: wrap; flex-basis: auto; }
  .pg-inst-info { flex-basis: 100%; order: 9; }
  .pg-inst-stage { height: 180px; }
}

/* ================================================================ 多套后台（ops）
   /admin 总览 · /backstage 内容运营 · /bi 数据看板 · /console 系统控制台 · /internal 内部工具
   四个新页面共用同一段顶部切换条；全部只用 --lp-* 令牌，
   深色（base.css :root）与浅色（本文件 html.light:root）自动跟着切。 */
.pg-ops-bar {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  width: fit-content; max-width: 100%;
  padding: 4px; margin: 0 0 18px;
  background: var(--lp-card); border: 1px solid var(--lp-border);
  border-radius: 999px;
}
.pg-ops-bar-item {
  padding: 6px 14px; border-radius: 999px;
  font-size: 13px; color: var(--lp-muted-fg); white-space: nowrap;
  text-decoration: none; transition: background .16s, color .16s;
}
.pg-ops-bar-item:hover { background: var(--lp-hover); color: var(--lp-fg); text-decoration: none; }
.pg-ops-bar-item.is-on {
  background: var(--lp-primary); color: #fff; font-weight: 600;
}

/* ---------------------------------------------------------- 权限兜底 */
.pg-ops-guard {
  background: var(--lp-card); border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius); padding: 44px 24px; text-align: center;
}
.pg-ops-guard-title {
  font-family: var(--lp-serif); font-size: 20px; font-weight: 700; margin-bottom: 8px;
}
.pg-ops-guard p { color: var(--lp-muted-fg); font-size: 13px; margin: 0; }
.pg-ops-guard .row { justify-content: center; }

/* ---------------------------------------------------------- KPI 卡 */
.pg-ops-kpis {
  display: grid; gap: 12px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
}
.pg-ops-kpi {
  background: var(--lp-card); border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius); padding: 14px 14px 12px;
}
.pg-ops-kpi-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 10px;
}
.pg-ops-kpi-title { font-size: 13px; font-weight: 600; }
.pg-ops-kpi-badge {
  font-size: 11px; color: var(--lp-muted-fg);
  background: var(--lp-secondary); border-radius: 999px; padding: 1px 8px;
}
.pg-ops-kpi-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.pg-ops-kpi-item b {
  display: block; font-family: var(--lp-mono); font-size: 19px; font-weight: 700;
  line-height: 1.25; overflow: hidden; text-overflow: ellipsis;
}
.pg-ops-kpi-item b.small { font-size: 12.5px; font-weight: 500; }
.pg-ops-kpi-item span { font-size: 11.5px; color: var(--lp-muted-fg); }

/* ---------------------------------------------------------- 折线图（内联 SVG） */
.pg-ops-chart {
  background: var(--lp-card); border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius); padding: 14px; margin-bottom: 16px;
}
.pg-ops-chart-head {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center; justify-content: space-between; margin-bottom: 10px;
}
.pg-ops-seg {
  display: inline-flex; gap: 4px; padding: 3px;
  background: var(--lp-secondary); border-radius: 999px;
}
.pg-ops-seg button {
  border: 0; background: transparent; color: var(--lp-muted-fg);
  font-family: inherit; font-size: 12px; padding: 4px 12px;
  border-radius: 999px; cursor: pointer;
}
.pg-ops-seg button:hover { color: var(--lp-fg); }
.pg-ops-seg button.is-on { background: var(--lp-primary); color: #fff; }
.pg-ops-svg { display: block; width: 100%; height: auto; }
.pg-ops-legend { display: flex; gap: 14px; font-size: 11.5px; color: var(--lp-muted-fg); }

/* ---------------------------------------------------------- 漏斗条形图 */
.pg-ops-funnel { display: flex; flex-direction: column; gap: 10px; }
.pg-ops-funnel-row {
  display: grid; grid-template-columns: 84px 1fr 132px; gap: 10px; align-items: center;
  font-size: 12.5px;
}
.pg-ops-funnel-label { color: var(--lp-fg); }
.pg-ops-funnel-track {
  height: 22px; background: var(--lp-secondary);
  border-radius: var(--lp-radius-sm); overflow: hidden;
}
.pg-ops-funnel-fill {
  height: 100%; border-radius: var(--lp-radius-sm);
  background: linear-gradient(90deg, var(--lp-primary), var(--lp-primary-dark));
}
.pg-ops-funnel-val {
  font-family: var(--lp-mono); font-size: 12px;
  color: var(--lp-muted-fg); text-align: right;
}

/* ---------------------------------------------------------- 控制台 */
.pg-ops-health {
  display: grid; gap: 12px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
}
.pg-ops-health-item { display: flex; gap: 10px; align-items: flex-start; }
.pg-ops-health-k { font-size: 11.5px; color: var(--lp-muted-fg); line-height: 1.7; }
.pg-ops-health-v { font-family: var(--lp-mono); font-size: 13px; }
.pg-ops-dot {
  display: inline-block; width: 8px; height: 8px; margin-right: 6px;
  border-radius: 50%; background: var(--lp-muted-fg); vertical-align: 1px;
}
.pg-ops-dot.ok { background: var(--lp-ok); }
.pg-ops-dot.bad { background: var(--lp-danger); }
.pg-ops-log { max-height: 360px; overflow: auto; }
.pg-ops-log-row {
  display: flex; gap: 10px; padding: 5px 0;
  border-bottom: 1px solid var(--lp-border); font-size: 12px;
}
.pg-ops-log-row:last-child { border-bottom: 0; }
.pg-ops-log-at {
  flex: 0 0 116px; font-family: var(--lp-mono); color: var(--lp-muted-fg);
}
.pg-ops-log-ev {
  flex: 0 0 148px; font-family: var(--lp-mono); color: var(--lp-link);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pg-ops-log-props {
  flex: 1 1 auto; min-width: 0; color: var(--lp-muted-fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------------------------------------------------------- 内部工具 */
.pg-ops-export-row {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--lp-border);
}
.pg-ops-export-row:last-child { border-bottom: 0; }
.pg-ops-export-name { flex: 0 0 92px; font-size: 13px; font-weight: 600; }
.pg-ops-export-note { flex: 1 1 220px; min-width: 160px; }

/* 窄屏：切换条横向滚动、漏斗右侧数值让位 */
@media (max-width: 620px) {
  .pg-ops-bar { border-radius: var(--lp-radius); overflow-x: auto; flex-wrap: nowrap; }
  .pg-ops-bar-item { padding: 6px 11px; font-size: 12.5px; }
  .pg-ops-funnel-row { grid-template-columns: 72px 1fr; }
  .pg-ops-funnel-val { display: none; }
  .pg-ops-export-name { flex-basis: 100%; }
}

/* ---------------------------------------------------------- 设置页 · 本轮新增
   配合 web/js/pages/settings.js 补齐参考设置项：占位标记、表单、弹窗、开关。 */
.pg-set-page-desc {
  margin: 0 0 14px; color: var(--lp-muted-fg); font-size: 12.5px; line-height: 1.7;
}
/* 「占位待接口」小标签 */
.pg-set-wait {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  border-radius: 999px; border: 1px solid var(--lp-border);
  background: var(--lp-secondary); color: var(--lp-muted-fg);
  font-size: 10.5px; line-height: 1.7; vertical-align: 1px; white-space: nowrap;
}
.pg-set-bad { color: var(--lp-danger); }

/* 行内表单（修改密码） */
.pg-set-form {
  display: grid; gap: 10px; margin: 12px 0 4px;
  padding: 14px; border: 1px dashed var(--lp-border); border-radius: var(--lp-radius);
}
.pg-set-field { display: grid; gap: 5px; min-width: 0; }
.pg-set-field > span { font-size: 12px; color: var(--lp-muted-fg); }
.pg-set-field .input { width: 100%; }
.pg-set-field.pg-set-check {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px;
}
.pg-set-field.pg-set-check > span { color: var(--lp-fg); font-size: 12.5px; }

/* 开关 / 颜色盘 */
.pg-set-switch { width: 16px; height: 16px; accent-color: var(--lp-primary); cursor: not-allowed; }
.pg-set-color {
  width: 46px; height: 28px; padding: 0 2px; border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius-sm); background: var(--lp-card);
}
.pg-set-presets { flex-wrap: wrap; max-width: 420px; }

/* 换绑步骤 / 注销清单 */
.pg-set-steps { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 12px; }
.pg-set-steps > span {
  padding: 4px 10px; border-radius: 999px; font-size: 12px;
  border: 1px solid var(--lp-border); color: var(--lp-muted-fg);
}
.pg-set-steps > span.on {
  border-color: var(--lp-primary); color: var(--lp-primary-text);
  background: var(--lp-primary-soft); font-weight: 600;
}
.pg-set-list { margin: 8px 0 12px; padding-left: 20px; font-size: 12.5px; line-height: 1.9; }
.pg-set-list li { color: var(--lp-fg); }

/* 设置页弹窗 */
.pg-set-modal { max-width: 560px; width: calc(100% - 32px); }
.pg-set-modal .modal-title {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.pg-set-modal-x {
  border: 0; background: transparent; color: var(--lp-muted-fg);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 4px;
}
.pg-set-modal-x:hover { color: var(--lp-fg); }
.pg-set-modal-body { max-height: 62vh; overflow: auto; padding-right: 4px; }

/* ==========================================================================
   子任务 AK · 五个小功能域：小灵浮窗 / 命令面板 / 理念页 / 更新日志 / 协作页
   令牌全部走 base.css 的 --lp-*，不新增颜色常量。
   ========================================================================== */

/* ---------------------------------------------------------------- 小灵助手浮窗
   右下角主色胶囊，叠在反馈悬浮球上方（反馈 22/22，小灵 22/78）。
   面板自己绝对定位在胶囊上方，不用 modal 那套，才能“开在旁边”而不是遮全屏。 */
.xl {
  position: fixed; right: 22px; bottom: 78px; z-index: 901;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.xl-fab {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 16px; border-radius: 999px;
  background: var(--lp-primary); border: 1px solid transparent; color: #fff;
  font-size: 13.5px; font-weight: 500; cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .32);
  transition: transform .16s, box-shadow .16s, background .16s;
}
.xl-fab:hover { transform: translateY(-2px); background: var(--lp-primary-dark); }
.xl-fab:focus-visible { outline: 2px solid var(--lp-link); outline-offset: 2px; }
.xl-ico { color: #fff; font-size: 14px; line-height: 1; }
.xl-dot {
  position: absolute; top: 5px; right: 8px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--lp-danger);
  box-shadow: 0 0 0 2px var(--lp-primary);
}
.xl-dot[hidden] { display: none; }
.xl-panel {
  width: min(344px, calc(100vw - 32px)); max-height: min(70vh, 520px); overflow: auto;
  background: var(--lp-card); border: 1px solid var(--lp-line-strong);
  border-radius: 14px; box-shadow: var(--lp-shadow-lg);
}
.xl-panel[hidden] { display: none; }
.xl-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-bottom: 1px solid var(--lp-border); font-size: 13px;
}
.xl-x {
  border: 0; background: transparent; color: var(--lp-muted-fg);
  font-size: 12px; cursor: pointer; padding: 2px 4px;
}
.xl-x:hover { color: var(--lp-fg); }
.xl-body { padding: 8px; }
.xl-menu { display: flex; flex-direction: column; gap: 4px; }
.xl-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 9px 10px; border-radius: var(--lp-radius-sm);
  border: 1px solid transparent; background: transparent;
  color: var(--lp-fg); font-size: 13px; text-align: left; cursor: pointer;
}
.xl-item:hover { background: var(--lp-hover); border-color: var(--lp-border); }
.xl-arrow { color: var(--lp-muted-fg); }
.xl-up-head {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 4px 6px; font-size: 13px;
}
.xl-up-meta { padding: 0 4px 8px; color: var(--lp-muted-fg); font-size: 11.5px; }
.xl-list {
  margin: 0; padding: 0 4px 0 18px; font-size: 12.5px; line-height: 1.85;
  color: var(--lp-fg);
}
.xl-list li { margin-bottom: 2px; }
.xl-list-empty { color: var(--lp-muted-fg); list-style: none; margin-left: -14px; }
.xl-more {
  margin: 6px 4px 0; padding: 0; border: 0; background: transparent;
  color: var(--lp-link); font-size: 12px; cursor: pointer;
}
.xl-more:hover { text-decoration: underline; }
.xl-up-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--lp-border);
}
@media (max-width: 760px) {
  .xl { right: 14px; bottom: 66px; }
  .xl-fab { height: 36px; padding: 0 13px; font-size: 12.5px; }
}

/* ---------------------------------------------------------------- 命令面板
   Ctrl / Cmd + K 弹出，条目只两条（主题 / 我的项目）。 */
.cmdk-mask {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(0, 0, 0, .58);
  display: grid; place-items: start center; padding: 14vh 20px 20px;
}
.cmdk-mask[hidden] { display: none; }
.cmdk {
  width: min(560px, 100%); background: var(--lp-card);
  border: 1px solid var(--lp-line-strong); border-radius: 14px;
  box-shadow: var(--lp-shadow-lg); overflow: hidden;
}
.cmdk-input {
  width: 100%; height: 46px; padding: 0 16px;
  border: 0; border-bottom: 1px solid var(--lp-border);
  background: transparent; color: var(--lp-fg); font-size: 14px; outline: none;
}
.cmdk-input::placeholder { color: var(--lp-muted-fg); }
.cmdk-list { max-height: 44vh; overflow: auto; padding: 6px; }
.cmdk-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 10px 12px; border-radius: 8px;
  border: 1px solid transparent; background: transparent;
  color: var(--lp-fg); font-size: 13.5px; text-align: left; cursor: pointer;
}
.cmdk-item.on, .cmdk-item:hover {
  background: var(--lp-primary-soft); border-color: var(--lp-primary);
}
.cmdk-hint { color: var(--lp-muted-fg); font-size: 12px; }
.cmdk-empty { padding: 18px; text-align: center; color: var(--lp-muted-fg); font-size: 13px; }
.cmdk-foot {
  display: flex; justify-content: space-between; padding: 8px 14px;
  border-top: 1px solid var(--lp-border);
  color: var(--lp-muted-fg); font-size: 11.5px;
}

/* ---------------------------------------------------------------- 理念 / 工作流页 */
.cp-hero { text-align: left; padding: 34px 0 22px; }
.cp-hero h1 { font-size: 36px; line-height: 1.25; }
.cp-hero h1 em { color: var(--lp-link); font-style: normal; }
.cp-account {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-top: 14px;
}
.cp-tutorial { font-family: var(--lp-mono); letter-spacing: .06em; font-size: 12.5px; }
.cp-eyebrow {
  font-family: var(--lp-mono); font-size: 11px; letter-spacing: .16em;
  color: var(--lp-muted-fg); text-transform: uppercase; margin-bottom: 6px;
}
.cp-sec-title { font-size: 20px; margin: 0 0 6px; }
.cp-sec-text {
  margin: 0 0 14px; font-size: 13px; line-height: 1.9;
  color: var(--lp-muted-fg); max-width: 720px;
}
.cp-wf {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.cp-wf-card {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  padding: 14px; text-align: left; cursor: pointer;
  background: var(--lp-card); border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius); color: var(--lp-fg);
  transition: border-color .16s, background .16s, transform .16s;
}
.cp-wf-card:hover { border-color: var(--lp-line-strong); transform: translateY(-1px); }
.cp-wf-card.on {
  border-color: var(--lp-primary); background: var(--lp-primary-soft);
}
.cp-wf-idx { font-family: var(--lp-mono); font-size: 11px; color: var(--lp-muted-fg); }
.cp-wf-card b { font-size: 14.5px; }
.cp-wf-desc { font-size: 12.5px; line-height: 1.8; color: var(--lp-muted-fg); }
.cp-trail {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 16px; font-size: 12.5px; color: var(--lp-muted-fg);
}
.cp-step {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--lp-border); background: var(--lp-card-2);
  color: var(--lp-fg);
}
.cp-step i {
  font-style: normal; font-family: var(--lp-mono); font-size: 10.5px;
  width: 15px; height: 15px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--lp-primary-soft); color: var(--lp-primary-text);
}
.cp-step-arrow { color: var(--lp-muted-fg); }
.cp-trail-cta { margin-top: 12px; }
.cp-work { text-decoration: none; color: inherit; transition: transform .16s; }
.cp-work:hover { transform: translateY(-2px); text-decoration: none; }

/* ---------------------------------------------------------------- 更新日志页 */
.cl-item {
  background: var(--lp-card); border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius); padding: 14px 16px; margin-bottom: 12px;
}
.cl-item-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.cl-ver {
  font-family: var(--lp-mono); font-size: 13px; font-weight: 600;
  color: var(--lp-primary-text);
}
.cl-date { color: var(--lp-muted-fg); font-size: 12px; }
.cl-list {
  margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.9;
}
.cl-list li { margin-bottom: 3px; }
.cl-more {
  margin-top: 6px; padding: 0; border: 0; background: transparent;
  color: var(--lp-link); font-size: 12.5px; cursor: pointer;
}
.cl-more:hover { text-decoration: underline; }
.cl-foot {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin: 18px 0 8px; padding-top: 14px; border-top: 1px solid var(--lp-border);
}

/* ---------------------------------------------------------------- 创作者协作页 */
.cl-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cl-needs { margin: 14px 0 0; padding: 0; list-style: none; }
.cl-need {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; margin-bottom: 8px;
  background: var(--lp-card); border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius);
}
.cl-need-idx {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font-family: var(--lp-mono); font-size: 11px; margin-top: 2px;
  background: var(--lp-primary-soft); color: var(--lp-primary-text);
}
.cl-need-text { flex: 1 1 auto; font-size: 13px; line-height: 1.85; }
.cl-need-tag { flex: 0 0 auto; margin-top: 3px; }

/* 小灵：未登录 / 已登出时隐藏整个浮窗（.xl 自带 display:flex，要显式压回去） */
.xl[hidden] { display: none; }

/* ---------------------------------------------------------------- 我的收藏页 */
/* 正常收藏：沿用 .pg-grid-lg + .pg-card-flat；只补封面点击区与标题截断 */
.pg-fav-card .pg-fav-open { cursor: pointer; }
.pg-fav-card .pg-card-title {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 折叠：超过 8 首时「展开全部 {n} 首 / 收起」按钮居中 */
.pg-fav-fold { display: flex; justify-content: center; margin-top: 14px; }
/* 已不再公开：整段汇总说明 + 清理入口，本身就是一个 .pg-note，这里只调间距 */
.pg-fav-lost { margin-top: 18px; }
.pg-fav-lost-text { font-size: 13px; line-height: 1.85; }
/* 已被作者删除：占位卡（虚线封面，不放渐变，避免像真作品） */
.pg-fav-dead-grid { margin-top: 18px; }
.pg-fav-dead { opacity: .92; }
.pg-fav-dead-cover {
  height: 96px; display: grid; place-items: center;
  font-size: 26px; color: var(--lp-muted-fg);
  background: repeating-linear-gradient(45deg,
    var(--lp-border) 0 8px, transparent 8px 16px);
  border-bottom: 1px solid var(--lp-border);
}
/* 加载失败：错误条 + 居中「重试」 */
.pg-fav-fail { padding: 32px 0; }
.pg-fav-fail .pg-note { max-width: 460px; margin: 0 auto; text-align: center; }

/* 站内信图片（G6）：缩略图横排，点开看大图 */
.pg-msg-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pg-msg-img {
  width: 88px; height: 88px; object-fit: cover; border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, .08); cursor: zoom-in; background: #f5f5f5;
}
.pg-msg-img:hover { border-color: rgba(0, 0, 0, .22); }

/* 评论：回复层与操作（G3） */
.pg-comment-actions { display: flex; gap: 12px; margin-top: 4px; font-size: 12px; }
.pg-comment-actions .linkish { background: none; border: 0; padding: 0; color: var(--muted, #6b7280); cursor: pointer; }
.pg-comment-actions .linkish:hover { color: #111; text-decoration: underline; }
.pg-comment-replies { margin: 8px 0 0 16px; padding-left: 12px; border-left: 2px solid rgba(0,0,0,.06); }
.pg-comment-replies .pg-comment { margin-top: 8px; }

/* ================================================================ 消息与反馈（inbox）
   结构对齐参考（docs/逆向-inbox.md）：页头 / 未读条 / 会话行 / 气泡会话。
   配色统一用本项目的 CSS 变量，未新增 token。 */
.pg-ib { max-width: 720px; margin: 0 auto; }

.pg-ib-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 4px 0 14px; border-bottom: 1px solid var(--lp-border); margin-bottom: 12px;
}
.pg-ib-head-ic {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(139, 92, 246, .12); color: #7c3aed; font-size: 18px;
}
.pg-ib-head-text { flex: 1 1 auto; min-width: 0; }
.pg-ib-head-text .pg-sec-title { line-height: 1.4; }

.pg-ib-unreadbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 12.5px; color: var(--lp-muted-fg); padding: 0 2px 8px;
}

.pg-ib-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 13px; padding: 8px 12px; margin-bottom: 10px; border-radius: 10px;
  background: rgba(139, 92, 246, .10); color: #5b21b6;
}

.pg-ib-list { list-style: none; margin: 0; padding: 0; }
.pg-ib-row {
  display: flex; align-items: flex-start; gap: 12px; width: 100%;
  padding: 12px; border: 0; border-radius: 14px; background: none;
  text-align: left; cursor: pointer; color: inherit; font: inherit;
}
.pg-ib-row:hover { background: rgba(0, 0, 0, .035); }
.pg-ib-row.is-unread { background: rgba(139, 92, 246, .05); }
.pg-ib-ico {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .05); font-size: 16px;
}
.pg-ib-main { flex: 1 1 auto; min-width: 0; display: block; }
.pg-ib-title {
  display: block; font-size: 13.5px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pg-ib-row.is-unread .pg-ib-title { font-weight: 600; }
.pg-ib-preview {
  display: block; margin-top: 3px; font-size: 12px; color: var(--lp-muted-fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pg-ib-side {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.pg-ib-time { font-size: 11px; color: var(--lp-muted-fg); white-space: nowrap; }
.pg-ib-dot {
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: #e05555; color: #fff; font-size: 10px; line-height: 1; font-weight: 500;
}

.pg-ib-alert {
  padding: 40px 0; text-align: center; color: var(--lp-muted-fg); font-size: 13px;
}
.pg-ib-alert p { margin: 0 0 10px; }

.pg-ib-chead {
  display: flex; align-items: center; gap: 8px;
  padding: 0 0 12px; border-bottom: 1px solid var(--lp-border); margin-bottom: 12px;
}
.pg-ib-chead-text { flex: 1 1 auto; min-width: 0; }
.pg-ib-ctitle {
  display: block; font-size: 14.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.pg-ib-cbody { min-height: 200px; }
.pg-ib-bubbles { list-style: none; margin: 0; padding: 0; }
.pg-ib-bubble-row { display: flex; flex-direction: column; margin-bottom: 16px; }
.pg-ib-bubble-row.is-me { align-items: flex-end; }
.pg-ib-bubble-row.is-team { align-items: flex-start; }
.pg-ib-meta { font-size: 11px; color: var(--lp-muted-fg); padding: 0 4px 4px; }
.pg-ib-recall-inline {
  margin-left: 4px; border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--lp-muted-fg); text-decoration: underline; text-underline-offset: 2px;
}
.pg-ib-recall-inline:hover { color: var(--lp-danger); }
.pg-ib-bubble {
  max-width: 85%; border-radius: 14px; padding: 10px 14px;
  font-size: 13.5px; line-height: 1.7;
}
.pg-ib-bubble p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.pg-ib-bubble-row.is-me .pg-ib-bubble {
  background: rgba(139, 92, 246, .10); border-bottom-right-radius: 6px;
}
.pg-ib-bubble-row.is-team .pg-ib-bubble {
  background: var(--lp-surface, #fff); border: 1px solid var(--lp-border);
  border-bottom-left-radius: 6px;
}
.pg-ib-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pg-ib-img { display: block; width: 80px; height: 80px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--lp-border); }
.pg-ib-img img { width: 100%; height: 100%; object-fit: cover; }

.pg-ib-footer { padding-top: 12px; border-top: 1px solid var(--lp-border); }
.pg-ib-input { width: 100%; min-height: 76px; max-height: 160px; }
.pg-ib-footer-row {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 8px;
}
.pg-ib-count { margin-right: auto; font-size: 11px; color: var(--lp-muted-fg); }
.pg-ib-err { margin: 6px 0 0; font-size: 12px; color: var(--lp-danger); }
.pg-ib-footnote {
  margin: 0; padding: 10px 0 2px; text-align: center;
  font-size: 12px; color: var(--lp-muted-fg); border-top: 1px solid var(--lp-border);
}

/* 转录前问答面板（G1）：三组单选 + 练习乐器 */
.pg-tr-qa { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; }
.pg-tr-q-title { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.pg-tr-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-tr-opt {
  text-align: left; padding: 10px 12px; border: 1px solid rgba(0,0,0,.12);
  border-radius: 8px; background: #fff; cursor: pointer; font-size: 13px; line-height: 1.4;
  max-width: 340px;
}
.pg-tr-opt b { display: block; font-size: 13px; }
.pg-tr-opt span { display: block; color: var(--muted, #6b7280); font-size: 12px; margin-top: 2px; }
.pg-tr-opt:hover { border-color: rgba(0,0,0,.28); }
.pg-tr-opt-on { border-color: #111; box-shadow: inset 0 0 0 1px #111; }

/* ================================================================ 案例展厅（/#/showcase）
   子任务 CC，逆向依据见 docs/逆向-showcase.md。
   参考结构：广场页 `lp-square-official` 补位区块 + 首页 `#works` 锚点的 `<Wt compact>` 区块；
   这里合成一页：SEC/01 头部 + 两组（音频转录 / AI 改编）+ 卡片网格 + 空态/失败态。 */

.pg-sc-hero {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; padding-bottom: 18px; margin-bottom: 22px;
  border-bottom: 1px solid var(--lp-border);
}
.pg-sc-eyebrow {
  font-family: var(--lp-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--lp-primary-text, var(--lp-primary)); opacity: .85;
}
.pg-sc-title {
  font-family: var(--lp-serif); font-size: 24px; font-weight: 400; letter-spacing: .06em;
  margin: 6px 0 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.pg-sc-sec {
  font-family: var(--lp-mono); font-size: 10px; letter-spacing: .14em;
  color: var(--lp-muted-fg); border: 1px solid var(--lp-border); border-radius: 999px;
  padding: 2px 8px; transform: translateY(-2px);
}
.pg-sc-desc { margin: 6px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--lp-muted-fg); }
.pg-sc-enter { flex: 0 0 auto; }

.pg-sc-source {
  font-size: 11.5px; line-height: 1.7; color: var(--lp-muted-fg);
  border-left: 2px solid var(--lp-border); padding: 2px 0 2px 10px; margin: 0 0 18px;
}

/* ---- 分组 */
.pg-sc-group { margin: 0 0 34px; }
.pg-sc-group-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-bottom: 12px;
}
.pg-sc-group-code {
  font-family: var(--lp-mono); font-size: 9.5px; letter-spacing: .18em;
  color: var(--lp-primary-text, var(--lp-primary)); opacity: .8;
}
.pg-sc-group-title {
  font-family: var(--lp-serif); font-size: 19px; font-weight: 400; letter-spacing: .04em;
  margin: 4px 0 0;
}
.pg-sc-group-desc { margin: 5px 0 0; font-size: 12px; line-height: 1.7; color: var(--lp-muted-fg); }
.pg-sc-cases {
  font-family: var(--lp-mono); font-size: 9.5px; letter-spacing: .16em;
  color: var(--lp-muted-fg); border: 1px solid var(--lp-border); border-radius: 999px;
  padding: 3px 9px; white-space: nowrap;
}
.pg-sc-fallback {
  font-size: 11.5px; line-height: 1.7; color: var(--lp-muted-fg);
  background: var(--lp-primary-soft); border-radius: var(--lp-radius-sm);
  padding: 7px 10px; margin: 0 0 12px;
}

/* ---- 卡片网格（参考：`grid gap-3 sm:grid-cols-2`，这里用更密的 auto-fill） */
.pg-sc-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(226px, 1fr)); }
.pg-sc-card {
  display: flex; flex-direction: column; gap: 9px; padding: 12px;
  background: var(--lp-card); border: 1px solid var(--lp-border); border-radius: var(--lp-radius);
  color: inherit; text-decoration: none; min-width: 0;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.pg-sc-card:hover {
  transform: translateY(-2px); border-color: var(--lp-line-strong, var(--lp-border));
  background: var(--lp-card-2);
}
.pg-sc-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pg-sc-badge {
  font-size: 9.5px; letter-spacing: .1em; border-radius: 999px; padding: 2px 8px;
  background: var(--lp-primary-soft); color: var(--lp-primary-text, var(--lp-primary));
}
.pg-sc-dur {
  font-family: var(--lp-mono); font-size: 10px; letter-spacing: .06em;
  color: var(--lp-muted-fg); font-variant-numeric: tabular-nums;
}

/* ---- 轨道条（参考 `Lt`/`Se`：每条乐器一行，颜色条 + 名称，最多 8 行） */
.pg-sc-strip {
  display: flex; flex-direction: column; gap: 4px; padding: 8px 10px;
  border: 1px solid var(--lp-border); border-radius: var(--lp-radius-sm);
  background: var(--lp-hover-soft, rgba(0, 0, 0, .03)); min-height: 76px; justify-content: center;
}
.pg-sc-strip-empty { align-items: center; color: var(--lp-muted-fg); font-size: 11px; }
.pg-sc-strip-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.pg-sc-strip-bar {
  flex: 0 1 auto; height: 3px; width: 46%; border-radius: 2px; background: var(--c, #aab3d6);
  opacity: .85;
}
.pg-sc-strip-name {
  font-size: 10px; line-height: 1.2; color: var(--lp-muted-fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.pg-sc-strip-more { font-size: 10px; color: var(--lp-muted-fg); opacity: .8; }

.pg-sc-card-title {
  font-family: var(--lp-serif); font-size: 16px; font-weight: 400; letter-spacing: .02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pg-sc-card-meta {
  display: flex; gap: 5px; flex-wrap: wrap;
  font-size: 10.5px; color: var(--lp-muted-fg); font-variant-numeric: tabular-nums;
}
.pg-sc-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 11px; color: var(--lp-muted-fg); padding-top: 7px;
  border-top: 1px solid var(--lp-border);
}
.pg-sc-card:hover .pg-sc-card-foot { color: var(--lp-primary-text, var(--lp-primary)); }

/* ---- 失败态（showcase.loadFailed） */
.pg-sc-failed {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 40px 16px; text-align: center;
  border: 1px dashed var(--lp-border); border-radius: var(--lp-radius);
}
.pg-sc-failed-msg { font-size: 13.5px; color: var(--lp-fg); }
.pg-sc-failed-sub { font-size: 11.5px; color: var(--lp-muted-fg); max-width: 460px; }

/* ---- 广场页入口区块（对应参考 `lp-square-official`） */
.pg-sq-official {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; padding: 12px 14px; margin: 0 0 16px;
  border: 1px solid var(--lp-border); border-radius: var(--lp-radius);
  background: var(--lp-hover-soft, rgba(0, 0, 0, .02));
  color: inherit; text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}
.pg-sq-official:hover { border-color: var(--lp-line-strong, var(--lp-border)); transform: translateY(-1px); }
.pg-sq-official-left { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pg-sq-official-eyebrow {
  font-family: var(--lp-mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--lp-primary-text, var(--lp-primary)); opacity: .85;
}
.pg-sq-official-title { font-family: var(--lp-serif); font-size: 18px; font-weight: 400; letter-spacing: .05em; }
.pg-sq-official-desc { font-size: 11.5px; line-height: 1.7; color: var(--lp-muted-fg); }
.pg-sq-official-cta {
  flex: 0 0 auto; font-size: 11px; letter-spacing: .06em;
  color: var(--lp-primary-text, var(--lp-primary));
}