/* ============================================================
   MiniZone Design System — Apps (Layer 6)
   应用页：分区式应用中心——精选大卡 / 最近使用 / 全部应用 / 游戏
   ============================================================ */

/* 小投票 / 排行榜：主题大卡与内容优先的详情，沿用学生端令牌。 */
.vr-page { max-width: 720px; margin-inline: auto; }
.app:has(> .scroll > .vr-page) { overflow: clip; }
.vr-header { display: flex; align-items: center; gap: 6px; padding: calc(4px + var(--safe-top)) 0 14px; }
.vr-nav-title { font: var(--fw-bold) 19px var(--font-ui); }
.vr-header-action { margin-left: auto; }
.vr-feed { display: grid; gap: var(--sp-4); }
.vr-card { display: flex; flex-direction: column; min-height: 208px; padding: var(--sp-5); border-radius: var(--r-md); background: var(--bg-card); color: var(--text-primary); box-shadow: var(--shadow-soft); text-decoration: none; }
.vr-card h2 { margin: 0 0 var(--sp-4); font: var(--fw-semibold) 21px/1.45 var(--font-ui); overflow-wrap: anywhere; }
.vr-card:hover { background: var(--bg-card-soft); }
.vr-card:focus-visible, .vr-vote-option:focus-visible, .vr-rank-vote:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.vr-card-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-5); }
.vr-card-options span { padding: 8px 12px; border-radius: var(--r-md); background: var(--bg-card-soft); font-size: var(--fs-body); overflow-wrap: anywhere; }
.vr-card-meta { display: flex; align-items: center; gap: var(--sp-4); color: var(--text-secondary); font-size: var(--fs-body-small); margin-top: auto; padding-top: var(--sp-3); }
.vr-card-meta > span:nth-child(2) { display: flex; align-items: center; gap: var(--sp-1); margin-left: auto; }
.vr-card-preview { margin-bottom: var(--sp-3); }
.vr-card-preview > div { display: flex; align-items: center; gap: var(--sp-3); min-height: 36px; }
.vr-card-preview > div > span:nth-child(2) { flex: 1; overflow-wrap: anywhere; }
.vr-card-preview > div > span:last-child { font-size: var(--fs-body-small); color: var(--text-secondary); white-space: nowrap; }
.vr-position { width: 24px; flex: 0 0 24px; font: var(--fw-semibold) var(--fs-body)/1.5 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--text-secondary); text-align: center; }
.vr-card-desc { color: var(--text-secondary); font-size: var(--fs-body); margin: 0; overflow-wrap: anywhere; }
.vr-more { display: flex; margin: var(--sp-5) auto; }
.vr-topic { background: var(--bg-card); border-radius: var(--r-md); padding: var(--sp-5); }
.vr-topic h1 { font: var(--fw-bold) var(--fs-title-page)/1.5 var(--font-brand); margin: 0 0 var(--sp-4); overflow-wrap: anywhere; }
.vr-topic-desc { font-size: var(--fs-body); color: var(--text-secondary); margin: 0 0 var(--sp-5); overflow-wrap: anywhere; }
.vr-detail-count { color: var(--text-secondary); font-size: var(--fs-body-small); margin-bottom: var(--sp-3); }
.vr-vote-options { display: grid; gap: var(--sp-3); }
.vr-vote-option { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); width: 100%; min-height: 58px; text-align: left; border: 0; border-radius: var(--r-md); padding: 14px 16px; overflow: hidden; background: var(--bg-card-soft); color: var(--text-primary); }
.vr-vote-fill { position: absolute; inset: 0 auto 0 0; background: var(--accent-soft); pointer-events: none; }
.vr-vote-label, .vr-vote-result, .vr-vote-option > svg { position: relative; }
.vr-vote-label { flex: 1 1 120px; font-size: var(--fs-body); overflow-wrap: anywhere; }
.vr-vote-result { color: var(--text-secondary); font-size: var(--fs-body-small); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vr-vote-option.selected { box-shadow: inset 0 0 0 2px var(--accent); }
.vr-vote-option > svg, .vr-rank-vote.selected { color: var(--accent); }
.vr-vote-option:hover, .vr-rank-vote:hover { background: var(--accent-soft); }
.vr-rank-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); padding-bottom: var(--sp-3); }
.vr-rank-head > span { font-size: var(--fs-body-small); color: var(--text-secondary); }
.vr-rank-head .btn { min-height: 44px; padding: 8px 12px; }
.vr-rank-item { display: flex; align-items: center; gap: var(--sp-2); min-height: 76px; padding-block: var(--sp-3); border-top: 1px solid var(--border); }
.vr-rank-copy { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.vr-rank-copy strong { font: var(--fw-semibold) var(--fs-body)/1.5 var(--font-ui); }
.vr-rank-copy p { margin: 4px 0 0; font-size: var(--fs-body-small); color: var(--text-secondary); }
.vr-rank-vote { display: flex; align-items: center; gap: var(--sp-1); flex: 0 0 auto; min-width: 52px; min-height: 44px; border: 0; border-radius: var(--r-md); background: var(--bg-card-soft); padding: 8px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.vr-rank-item > .icon-button { flex: 0 0 44px; }
.vr-comments { margin-top: 32px; }
.vr-comments h2 { font: var(--fw-bold) var(--fs-title-section)/1.5 var(--font-ui); margin: 0 0 var(--sp-4); }
.vr-comments-list { display: grid; gap: var(--sp-3); }
.vr-empty { padding: var(--sp-5) 0; color: var(--text-secondary); text-align: center; font-size: var(--fs-body); }
.vr-comment-form { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); padding-bottom: var(--sp-5); }
.vr-comment-form .btn { justify-self: end; min-width: 96px; }
.vr-comment-form .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.vr-compose { display: grid; gap: var(--sp-4); }
.vr-compose .form-label { display: grid; gap: var(--sp-2); }
.vr-compose-options { display: grid; gap: var(--sp-3); }
.vr-compose-option { display: flex; align-items: center; gap: var(--sp-2); }
.vr-compose-option input { flex: 1; min-width: 0; }
.vr-compose-option > button { flex: 0 0 44px; }
.vr-form-error { margin: 0; color: var(--danger); font-size: var(--fs-body); }
.vr-compose :is(input,textarea), .vr-comment-form textarea { caret-color: var(--accent); }
.vr-page button:disabled { opacity: .55; cursor: default; }
@media (max-width: 360px) {
  .vr-topic { padding: var(--sp-4); }
  .vr-rank-item { gap: var(--sp-1); }
  .vr-rank-item > .icon-button { flex-basis: 36px; }
}

/* ===== 分类 chips（横滑基类；消息页等跨页复用，应用中心首页已不再使用） ===== */
/* 找搭子：跨校区主题浏览、单列大卡与独立发布页。 */
.bd-page { max-width: 920px; margin-inline: auto; }
.bd-header { display: flex; align-items: center; gap: 6px; padding: calc(4px + var(--safe-top)) 0 14px; }
.bd-header h1 { margin: 0; font: var(--fw-bold) 19px/1.5 var(--font-ui); }
.bd-header-action { margin-left: auto; }
.bd-home { padding-bottom: calc(100px + var(--safe-bottom)); }
.bd-topic-rail { display: flex; gap: 10px; overflow-x: auto; padding: 3px 3px 12px; margin: 0 -3px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.bd-topic-tile { flex: 0 0 78px; width: 78px; height: 78px; aspect-ratio: 1; padding: 8px 6px; border-radius: var(--r-md); background: var(--bg-card); color: var(--text-primary); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font: var(--fw-medium) 12px/1.2 var(--font-ui); text-align: center; overflow-wrap: anywhere; }
.bd-topic-tile > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bd-topic-tile > svg { width: 22px; height: 22px; }
.bd-topic-tile > .bd-game-mark { width: 40px; height: 26px; }
.bd-topic-tile > svg { flex-shrink: 0; color: var(--accent-deep); }
.bd-topic-tile[aria-pressed='true'] { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.bd-topic-tile:hover { background: var(--accent-soft); }
.bd-topic-more { color: var(--text-secondary); }
.bd-controls { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0 16px; }
.bd-selection { font: var(--fw-semibold) var(--fs-body)/1.5 var(--font-ui); overflow-wrap: anywhere; }
.bd-filter { flex-shrink: 0; min-height: 44px; padding: 10px 16px; border-radius: var(--r-sm); background: var(--bg-card); color: var(--text-primary); font: var(--fw-medium) var(--fs-body-small)/1.5 var(--font-ui); }
.bd-filter[aria-pressed='true'] { background: var(--accent-soft); color: var(--accent-deep); }
.bd-topic-picker { display: grid; gap: var(--sp-4); }
.bd-filter-sheet .sheet { background: var(--bg-card); backdrop-filter: none; -webkit-backdrop-filter: none; }
.bd-filter-sheet .sheet-header { padding-inline: var(--sp-5); padding-bottom: var(--sp-5); }
.bd-filter-sheet .sheet-title { font: var(--fw-bold) 19px/1.5 var(--font-ui); }
.bd-filter-sheet .sheet-body { display: flex; min-height: 0; overflow: hidden; padding: 0 var(--sp-5) calc(var(--sp-5) + var(--safe-bottom)); }
.bd-filter-form { display: flex; flex: 1; min-height: 0; flex-direction: column; gap: var(--sp-5); }
.bd-filter-form fieldset { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.bd-filter-form legend { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); width: 100%; margin-bottom: var(--sp-3); font: var(--fw-semibold) var(--fs-body)/1.5 var(--font-ui); color: var(--text-primary); }
.bd-gender-field { flex-shrink: 0; }
.bd-filter-form .bd-campus-field { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; }
.bd-campus-current { max-width: 75%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); font: var(--fw-regular) var(--fs-body-small)/1.5 var(--font-ui); }
.bd-gender-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-1); padding: var(--sp-1); background: var(--bg-card-soft); border-radius: var(--r-md); }
.bd-gender-option, .bd-campus-option { position: relative; cursor: pointer; }
.bd-filter-form input[type='radio'] { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); }
.bd-gender-option > span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--sp-2) var(--sp-1); border-radius: var(--r-sm); color: var(--text-secondary); font: var(--fw-medium) var(--fs-body)/1.5 var(--font-ui); }
.bd-gender-option input:checked + span { background: var(--bg-card); color: var(--accent-deep); font-weight: var(--fw-semibold); }
.bd-gender-option:hover > span { color: var(--text-primary); }
.bd-filter-form input[type='radio']:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }
.bd-campus-search { position: relative; display: flex; flex-shrink: 0; align-items: center; }
.bd-campus-search > svg { position: absolute; left: var(--sp-3); color: var(--text-secondary); pointer-events: none; }
.bd-campus-search .form-input { min-height: 46px; width: 100%; min-width: 0; padding-left: 40px; background: var(--bg-card-soft); caret-color: var(--accent); }
.bd-campus-search .form-input::placeholder { color: var(--text-secondary); opacity: 1; }
.bd-campus-list { flex: 1 1 auto; max-height: min(32dvh, 260px); min-height: 96px; margin-top: var(--sp-3); padding-inline: 2px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.bd-campus-list::-webkit-scrollbar { width: 4px; }
.bd-campus-list::-webkit-scrollbar-thumb { border-radius: var(--r-sm); background: var(--border); }
.bd-campus-option { display: block; }
.bd-campus-choice { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 48px; padding: var(--sp-3); border-radius: var(--r-sm); font: var(--fw-regular) var(--fs-body)/1.5 var(--font-ui); color: var(--text-primary); }
.bd-campus-choice > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.bd-campus-option:hover .bd-campus-choice { background: var(--bg-card-soft); }
.bd-campus-option input:checked + .bd-campus-choice { background: var(--accent-soft); font-weight: var(--fw-semibold); }
.bd-campus-check { display: grid; place-items: center; flex: 0 0 20px; width: 20px; height: 20px; border: 1px solid var(--text-secondary); border-radius: 50%; color: var(--text-on-accent); }
.bd-campus-check svg { visibility: hidden; }
.bd-campus-option input:checked + span .bd-campus-check { border-color: var(--accent); background: var(--accent); }
.bd-campus-option input:checked + span .bd-campus-check svg { visibility: visible; }
html[data-theme='dark'] .bd-campus-check { color: var(--bg-page); }
.bd-campus-county { margin: var(--sp-4) var(--sp-3) var(--sp-1); color: var(--text-secondary); font: var(--fw-medium) var(--fs-body-small)/1.5 var(--font-ui); }
.bd-campus-empty { margin: var(--sp-6) var(--sp-3); color: var(--text-secondary); text-align: center; font-size: var(--fs-body); }
.bd-topic-picker-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(78px,1fr)); gap: 10px; }
.bd-topic-picker-grid .bd-topic-tile { width: 100%; height: auto; }
.bd-filter-actions { display: grid; flex-shrink: 0; grid-template-columns: auto 1fr; gap: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.bd-filter-actions .btn { min-height: 48px; border-radius: var(--r-sm); }
.bd-filter-actions .btn-secondary { background: transparent; padding-inline: var(--sp-3); box-shadow: none; }
.bd-filter-form .btn-primary { color: var(--text-on-accent); }
html[data-theme='dark'] .bd-filter-form .btn-primary { color: var(--bg-page); }
@media (min-width: 760px) {
  .sheet-backdrop.bd-filter-sheet { align-items: center; padding: var(--sp-6); }
  .bd-filter-sheet .sheet { width: 100%; max-width: 520px; border-radius: var(--r-lg); }
  .bd-filter-sheet .sheet-handle { display: none; }
  .bd-filter-sheet .sheet-header { padding: var(--sp-6) var(--sp-6) var(--sp-5); }
  .bd-filter-sheet .sheet-body { padding-inline: var(--sp-6); padding-bottom: var(--sp-6); }
}
@media (max-height: 600px) {
  .bd-filter-sheet .sheet-body { display: block; overflow-y: auto; }
  .bd-campus-list { max-height: 140px; }
}
.bd-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.bd-card { min-width: 0; min-height: 228px; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); background: var(--bg-card); border-radius: var(--r-md); text-decoration: none; color: var(--text-primary); }
.bd-card:hover { background: var(--bg-card-soft); }
.bd-card > h2 { margin: 0; font: var(--fw-semibold) 19px/1.55 var(--font-ui); overflow-wrap: anywhere; }
.bd-card-topic { display: inline-flex; align-items: center; gap: 7px; color: var(--accent-deep); font: var(--fw-medium) var(--fs-body-small)/1.5 var(--font-ui); }
.bd-card-open { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: auto; font-size: var(--fs-body-small); color: var(--text-secondary); }
.bd-card .bd-cover { border-radius: var(--r-sm); aspect-ratio: 16 / 9; }
.bd-cover { position: relative; overflow: hidden; aspect-ratio: 1 / 1; width: 100%; background: var(--accent-soft); }
.bd-cover-hobby { background: var(--mint-soft); }
.bd-cover-life { background: var(--peach-soft); }
.bd-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bd-cover-fallback { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4); color: var(--text-primary); }
.bd-cover-fallback > svg { color: var(--accent-deep); flex-shrink: 0; }
.bd-cover-fallback > strong { font: var(--fw-bold) 23px/1.35 var(--font-ui); letter-spacing: var(--ls-tight); overflow-wrap: anywhere; }
.bd-cover-title { position: absolute; left: var(--sp-2); bottom: var(--sp-2); max-width: calc(100% - 16px); padding: 5px 9px; border-radius: var(--r-sm); background: var(--bg-card); color: var(--text-primary); font: var(--fw-semibold) var(--fs-body-small)/1.4 var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-card-info { font-size: var(--fs-body-small); color: var(--text-secondary); line-height: 1.6; overflow-wrap: anywhere; }
.bd-card-author { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.bd-card-author .avatar { flex-shrink: 0; }
.bd-card-author > div { min-width: 0; display: grid; gap: 3px; }
.bd-card-author strong { font: var(--fw-semibold) var(--fs-body)/1.5 var(--font-ui); overflow-wrap: anywhere; }
.bd-card-author > div > span { color: var(--text-secondary); font-size: var(--fs-body-small); line-height: 1.5; overflow-wrap: anywhere; }
.bd-fab { position: fixed; z-index: 30; right: var(--page-h); bottom: calc(24px + var(--safe-bottom)); display: flex; align-items: center; gap: var(--sp-2); min-height: 54px; padding: 12px 17px; border-radius: 27px; background: var(--accent); color: var(--text-on-accent); font: var(--fw-semibold) var(--fs-body-small)/1.5 var(--font-ui); box-shadow: var(--shadow-card-hover); }
.bd-fab:hover { background: var(--accent-deep); }
html[data-theme='dark'] .bd-fab { color: var(--bg-page); }
html[data-theme='dark'] .bd-page .btn-primary { color: var(--bg-page); }
.bd-more, .bd-empty-action { display: block; min-height: 44px; margin: var(--sp-5) auto; padding: 10px 16px; border-radius: var(--r-md); background: transparent; color: var(--accent-deep); font: var(--fw-medium) var(--fs-body)/1.5 var(--font-ui); }
.bd-more:hover, .bd-empty-action:hover { background: var(--accent-soft); }
.bd-detail, .bd-create-page { max-width: 640px; margin-inline: auto; }
.bd-detail { overflow: hidden; border-radius: var(--r-md); background: var(--bg-card); }
.bd-cover-detail { aspect-ratio: 4 / 3; }
.bd-cover-detail img { object-fit: contain; }
.bd-cover-detail.bd-cover-fallback { aspect-ratio: 3 / 2; align-items: center; }
.bd-cover-detail.bd-cover-fallback > strong { font-size: var(--fs-title-page); }
.bd-detail-copy { padding: var(--sp-5); }
.bd-detail-copy h2 { margin: 0 0 var(--sp-3); font: var(--fw-bold) var(--fs-title-page)/1.4 var(--font-ui); overflow-wrap: anywhere; }
.bd-declaration { margin: 0 0 var(--sp-5); font-size: var(--fs-body); line-height: var(--lh-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.bd-facts { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3) var(--sp-5); margin: 0 0 var(--sp-6); font-size: var(--fs-body); line-height: 1.5; }
.bd-facts dt { color: var(--text-secondary); }
.bd-facts dd { margin: 0; overflow-wrap: anywhere; }
.bd-detail-author { display: flex; align-items: center; gap: var(--sp-3); color: var(--text-primary); text-decoration: none; padding-block: var(--sp-4); border-top: 1px solid var(--border); }
.bd-detail-author > .avatar { flex-shrink: 0; }
.bd-detail-author > span { min-width: 0; display: grid; gap: var(--sp-1); }
.bd-detail-author strong { font: var(--fw-semibold) var(--fs-body)/1.5 var(--font-ui); overflow-wrap: anywhere; }
.bd-detail-author > span > span { font-size: var(--fs-body-small); color: var(--text-secondary); overflow-wrap: anywhere; }
.bd-contact { width: 100%; margin-top: var(--sp-3); }
.bd-form { display: grid; gap: var(--sp-5); padding-bottom: var(--sp-6); }
.bd-game-fields { display: grid; gap: var(--sp-4); }
.bd-game-fields > .form-label { margin-bottom: -8px; }
.bd-game-fields .mz-select-trigger { min-height: 48px; }
.bd-field { display: grid; gap: var(--sp-2); margin: 0; }
.bd-field > :is(input,textarea) { width: 100%; min-width: 0; caret-color: var(--accent); }
.bd-field > :is(input,textarea)::placeholder { color: var(--text-secondary); opacity: 1; }
.bd-field textarea { resize: vertical; min-height: 104px; }
.bd-optional { display: grid; gap: var(--sp-5); }
.bd-image-field { display: grid; justify-items: start; gap: var(--sp-2); }
.bd-image-picker { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); width: 100%; min-height: 136px; border-radius: var(--r-md); overflow: hidden; background: var(--bg-card); color: var(--text-secondary); font-size: var(--fs-body); }
.bd-image-picker:hover { background: var(--accent-soft); color: var(--accent-deep); }
.bd-image-picker > img { display: block; width: 100%; max-height: 260px; object-fit: contain; }
.bd-image-remove { min-height: 44px; padding: 8px 0; background: transparent; color: var(--text-secondary); font-size: var(--fs-body-small); }
.bd-submit { width: 100%; min-height: 48px; }
.bd-form-error { margin: 0; color: var(--danger); font-size: var(--fs-body); line-height: var(--lh-body); overflow-wrap: anywhere; }
.bd-error { padding: var(--sp-6) 0; text-align: center; }
.bd-error h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-title-section); }
.bd-error p { margin: 0 0 var(--sp-4); font-size: var(--fs-body); color: var(--text-secondary); }
.bd-page :is(button,a):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.bd-page button:disabled { opacity: .55; cursor: default; }
@media (max-width: 360px) { .bd-card { padding: var(--sp-4); } .bd-detail-copy { padding: var(--sp-4); } }
@media (min-width: 760px) { .bd-page { max-width: 720px; } .bd-optional { grid-template-columns: repeat(2,minmax(0,1fr)); } }

.cat-chips {
  display: flex; gap: 8px;
  overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-1 * var(--page-h));
  padding: 2px var(--page-h) 4px;
}
.cat-chips::-webkit-scrollbar { display: none; }
.cat-chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 17px;
  border-radius: var(--r-pill);
  background: var(--bg-card);
  box-shadow: var(--shadow-soft);
  color: var(--text-primary);
  font-size: 13.5px; font-weight: var(--fw-bold); letter-spacing: -.01em;
  transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast), color var(--dur-fast);
}
.cat-chip:active { transform: scale(.93); }
.cat-chip .cat-ic { display: grid; place-items: center; }
.cat-chip.active {
  background: var(--accent-soft);
  color: var(--accent-deep);
}

/* ===== 分区头（大标题 + 「查看全部 ›」） ===== */
.store-head { display: flex; align-items: center; gap: 5px; padding: 0 2px; margin-bottom: 5px; }
.store-head h2 { font-size: 22px; font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); margin: 0; }
.store-head .sh-more {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 2px;
  border: 0; background: none; padding: 6px 2px 6px 8px;
  color: var(--text-tertiary);
  font-size: 13px; font-weight: var(--fw-semibold); letter-spacing: -.01em;
  transition: color var(--dur-fast) ease;
}
.store-head .sh-more:active { color: var(--accent-deep); }

/* ===== 精选大卡（横滑，首张最大） ===== */
.feat-row {
  display: flex; gap: 14px;
  overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-1 * var(--page-h));
  padding: 4px var(--page-h) 8px;
  scroll-snap-type: x mandatory;
  /* mandatory 吸附会强拉首卡贴边：基准内缩到留白处，初始/回切停在 20px */
  scroll-padding-inline: var(--page-h);
}
.feat-row::-webkit-scrollbar { display: none; }
.feat-card {
  position: relative;
  scroll-snap-align: start;
  flex: 0 0 82%;
  min-width: 0;
  height: 248px;
  border: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  padding: 0;
  text-align: left;
  color: #fff;
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: transform var(--dur-fast) var(--ease);
}
.feat-card:first-child { flex-basis: 88%; }
.feat-card:active { transform: scale(.975); }
.feat-art {
  position: absolute; inset: 0;
  display: grid; place-items: center;
}
.feat-art::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.1), transparent 34%);
}
.feat-glyph {
  position: relative;
  opacity: .3;
  transform: translateY(-14px) rotate(-6deg);
}
.feat-orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.3), transparent 65%);
}
.feat-foot {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 16px;
  background: linear-gradient(180deg, transparent, rgba(10, 14, 24, .5) 58%);
}
.feat-icon {
  width: 54px; height: 54px;
  border-radius: 16px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .22);
  border: 1px solid rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff;
  flex: 0 0 auto;
  box-shadow: 0 8px 20px rgba(10, 14, 24, .25);
}
.feat-info { flex: 1; min-width: 0; }
.feat-name { font-size: 17px; font-weight: var(--fw-bold); letter-spacing: -.02em; line-height: 1.2; }
.feat-tag {
  margin-top: 3px;
  font-size: 12px; line-height: 1.35; color: rgba(255, 255, 255, .78);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.feat-open {
  flex: 0 0 auto;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .24);
  border: 1px solid rgba(255, 255, 255, .32);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff;
  font-size: 13.5px; font-weight: var(--fw-bold); letter-spacing: .02em;
  transition: transform var(--dur-fast) var(--ease-spring);
}
.feat-open:active { transform: scale(.9); }

/* ===== App Store 式横向分页列表：每页纵向 3 个完整宽度应用行，整页左右滑动切换 ===== */
.pg-row {
  position: relative;
  display: flex; gap: 12px;
  overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-1 * var(--page-h));
  padding: 2px var(--page-h) 10px;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--page-h);
}
.pg-row::-webkit-scrollbar { display: none; }
.pg-page {
  flex: 0 0 100%; min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;   /* 一次滑动只切一组，不飞页 */
  display: flex; flex-direction: column; gap: 10px;
  padding: 2px 0 6px;
}
/* 单个应用 = 一张独立小卡片：大图标 + 名称/简介左对齐 + 右侧进入指示 */
.pg-app {
  display: flex; align-items: center; gap: 13px;
  width: 100%; min-width: 0;
  padding: 10px 12px;
  border: 0; border-radius: var(--r-md);
  background: var(--bg-card);
  box-shadow: var(--shadow-soft);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast) var(--ease-spring);
}
.pg-app:active { transform: scale(.97); }
.pg-app-icon {
  width: 54px; height: 54px;
  border-radius: 14px;
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.pg-app-text { flex: 1; min-width: 0; }
.pg-app-name {
  display: block;
  font-size: 15.5px; font-weight: var(--fw-bold); letter-spacing: -.015em;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pg-app-desc {
  display: block; margin-top: 3px;
  font-size: 12.5px; line-height: 1.35; color: var(--text-tertiary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pg-app-go { color: var(--faint); flex: 0 0 auto; display: grid; place-items: center; }

/* 分页指示器：随滑动点亮对应页，点按可直达 */
.pg-dots { display: flex; justify-content: center; gap: 7px; padding: 0 0 4px; }
.pg-dot {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px;
  background: var(--text-tertiary); opacity: .3;
  transition: width var(--dur-fast) ease, opacity var(--dur-fast) ease;
}
.pg-dot.active { width: 20px; opacity: .7; }

/* 最近使用空态：如实提示，不虚构填充 */
.recent-note {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 14px;
  border-radius: var(--r-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-soft);
  color: var(--text-tertiary);
  font-size: 12.5px; line-height: 1.5;
  text-align: left;
}
.recent-note .rn-ic {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: var(--accent-soft);
  color: var(--accent-deep);
}

/* ===== 全部应用：App Store 式列表行 ===== */
.app-list { display: flex; flex-direction: column; }
.app-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 2px;
  border: 0; border-top: 1px solid var(--border);
  background: transparent;
  text-align: left; color: var(--text-primary);
  min-width: 0;
  transition: background var(--dur-fast), opacity var(--dur-fast);
}
.app-row:first-child { border-top: 0; }
.app-row:active { background: rgba(24, 32, 48, .035); }
.app-row.hide { display: none; }
.app-row-icon {
  width: 56px; height: 56px;
  border-radius: 15px;
  display: grid; place-items: center;
  flex: 0 0 auto;
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.app-row-text { flex: 1; min-width: 0; }
.app-row-name { display: block; font-size: 15.5px; font-weight: var(--fw-bold); letter-spacing: -.015em; }
.app-row-desc {
  display: block;
  margin-top: 3px;
  font-size: 12.5px; line-height: 1.4; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-row-chevron { color: var(--faint); flex: 0 0 auto; display: grid; place-items: center; }

/* ============================================================
   表白墙（樱粉波浪主题）——令牌见 variables.css --wall-*
   波浪集中在顶部且整体向下 mask 渐淡，长列表阅读区保持安静；
   内容卡乳白实色 + 深玫瑰灰正文；互动选中玫瑰粉。
   动画只用 transform（轻量合成）；wall-live 在页面上才播放，
   keep-alive 摘除即暂停；reduced-motion 直接静态背景。
   ============================================================ */
.wall-page {
  position: relative;
  min-height: 100%;
  background: var(--wall-bg);
}
.wall-page > * { position: relative; z-index: 1; }

/* —— 浅色模式适配：①整页继承墙的主题墨色（默认纯黑页头压在樱粉渐变上过重，
      深色下两侧都近白所以从未暴露）；②樱粉底延伸进滚动留白区（左右 page-h /
      上 page-top+safe-top / 下 subpage-pad-b），消除浅色下页面四周的冷灰拼缝 —— */
.wall-page { color: var(--wall-ink); }
.wall-page::before {
  content: ""; position: absolute; z-index: 0;
  top: calc(-1 * (var(--page-top) + var(--safe-top)));
  bottom: calc(-1 * var(--subpage-pad-b));
  left: calc(-1 * var(--page-h));
  right: calc(-1 * var(--page-h));
  background: var(--wall-bg);
  pointer-events: none;
}
.wall-page .empty-body, .wall-page .error-body { color: var(--wall-ink-2); }

/* —— 顶部波浪舞台：负边距铺满视口宽，向上补出滚动 padding 区 —— */
.wall-page .wall-hero {
  position: absolute; z-index: 0;
  top: calc(-1 * (var(--page-top) + var(--safe-top)));
  left: calc(-1 * var(--page-h));
  right: calc(-1 * var(--page-h));
  height: calc(clamp(250px, 46vw, 350px) + var(--page-top) + var(--safe-top));
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 28%, rgba(0,0,0,.55) 60%, rgba(0,0,0,0) 94%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,1) 28%, rgba(0,0,0,.55) 60%, rgba(0,0,0,0) 94%);
}
/* 背景大渐变：超绘一层缓慢漂移，读作“渐变随波形轻微流动” */
.wall-page .wall-grad {
  position: absolute; inset: -14% -18%;
  background: linear-gradient(112deg, var(--wall-grad-a) 6%, var(--wall-grad-b) 38%, var(--wall-grad-c) 74%, var(--wall-grad-a) 96%);
  animation: wallGradDrift 30s ease-in-out infinite alternate;
}
/* 波层：两张同形 SVG 各占 50% 首尾相接，整体横移 -50% 无缝循环；
   内层 svg 再做缓慢呼吸（上下起伏），层间速度/方向错开 */
.wall-page .wall-wave {
  position: absolute; left: 0; bottom: 0;
  width: 200%; display: flex;
}
.wall-page .wall-wave svg {
  width: 50%; height: 100%; flex: 0 0 50%; display: block;
  animation: wallWaveBob 12s ease-in-out infinite alternate;
}
.wall-page .wall-wave--a { color: var(--wall-wave-1); height: 56%; animation: wallSlideL 26s linear infinite; }
.wall-page .wall-wave--b { color: var(--wall-wave-2); height: 66%; bottom: 6%; animation: wallSlideR 34s linear infinite; }
.wall-page .wall-wave--c { color: var(--wall-wave-3); height: 74%; bottom: 12%; animation: wallSlideL 46s linear infinite; }
.wall-page .wall-wave--a svg { animation-duration: 9s; }
.wall-page .wall-wave--b svg { animation-duration: 13s; animation-direction: alternate-reverse; }
.wall-page .wall-wave--c svg { animation-duration: 17s; }

@keyframes wallSlideL { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes wallSlideR { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes wallWaveBob { from { transform: translate3d(0, -5px, 0); } to { transform: translate3d(0, 5px, 0); } }
@keyframes wallGradDrift { from { transform: translate3d(-2.2%, -1.4%, 0); } to { transform: translate3d(2.2%, 1.4%, 0); } }

/* 页面离场（keep-alive 摘除）：wall-live 被移除即冻结全部波层动画 */
.wall-page:not(.wall-live) .wall-hero * { animation-play-state: paused !important; }

/* —— 分类切换：沿用 .cat-chip 形态，墙内换樱粉装束 —— */
.wall-page .wall-chips { margin-bottom: 12px; }
.wall-page .cat-chip { background: var(--wall-card); color: var(--wall-ink-2); }
.wall-page .cat-chip.active { background: var(--wall-rose-soft); color: var(--wall-rose-deep); }

/* —— 内容卡：乳白实色 + 深玫瑰灰文字（正文清晰优先） —— */
.wall-page .post { background: var(--wall-card); }
.wall-page .post .author strong { color: var(--wall-ink); }
.wall-page .post .author span { color: var(--wall-faint); }
.wall-page .post > p { color: var(--wall-ink); font-size: var(--fs-body); }
.wall-page .wall-meta button { color: var(--wall-faint); }
.wall-page .wall-meta button.liked { color: var(--wall-rose); }
.wall-page .comment-card { background: var(--wall-card); }
.wall-page .cc-like { color: var(--wall-faint); }
.wall-page .cc-like.liked { color: var(--wall-rose); }
.wall-page .wall-comments h3 { color: var(--wall-ink); }
.wall-page .cc-name { color: var(--wall-ink); }
.wall-page .cc-text { color: var(--wall-ink); }
.wall-page .cc-time { color: var(--wall-faint); }

/* 分页反馈沿用墙内令牌；末尾留白避开右下发布按钮。 */
.wall-page .wall-pagination { padding: 16px 0 80px; text-align: center; }
.wall-page .wall-more { width: 100%; background: var(--wall-card); color: var(--wall-ink-2); }
.wall-page .wall-pagination p { margin: 0; color: var(--wall-ink-2); font-size: var(--fs-meta); }

/* —— 详情页：延续配色，仅静态顶部渐染，不加动画 —— */
.wall-page .detail-page {
  background: linear-gradient(180deg, var(--wall-wave-1), rgba(0,0,0,0) 320px), var(--wall-bg);
}
/* 墙内主操作键（详情输入条发送键）：品牌蓝换玫瑰粉（互动色统一） */
.wall-page .detail-input-bar .btn-primary {
  background: var(--wall-rose);
  box-shadow: 0 8px 20px rgba(224, 90, 133, .28), inset 0 1px 0 rgba(255, 255, 255, .25);
}

/* —— 悬浮发布按钮：仅表白墙主页（页面视图内，随 keep-alive 离场自动消失） —— */
.wall-page .wall-fab {
  position: fixed; z-index: 30;
  right: calc(var(--page-h) + 4px);
  bottom: calc(24px + var(--safe-bottom));   /* 子页面 Dock 隐藏，只需避开安全区 */
  width: 54px; height: 54px;
  border: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--wall-rose), var(--wall-rose-deep));
  color: var(--text-on-accent);
  box-shadow: 0 10px 24px rgba(224, 90, 133, .35), inset 0 1px 0 rgba(255, 255, 255, .28);
  transition: transform var(--dur-fast) var(--ease-spring);
}
.wall-page .wall-fab:active { transform: scale(.9); }

/* —— 写表白弹窗（复用发帖 openSheet 容器；sheet 挂在 body 下，不做 .wall-page 作用域） —— */
.wall-compose-privacy {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--border);
}
.wall-compose-privacy strong { display: block; font-size: 14px; color: var(--text-primary); }
.wall-compose-privacy span { display: block; margin-top: 2px; font-size: var(--fs-meta); color: var(--text-tertiary); }
.wall-publish-btn {
  background: var(--wall-rose);
  box-shadow: 0 8px 20px rgba(224, 90, 133, .28), inset 0 1px 0 rgba(255, 255, 255, .25);
}
/* iOS 式匿名开关：轨道收玫瑰粉，旋钮弹簧位移 */
.wall-switch {
  position: relative; flex: 0 0 auto;
  width: 51px; height: 31px;
  border: 0; border-radius: var(--r-pill); padding: 0;
  background: var(--wall-track);
  transition: background var(--dur-normal) var(--ease);
}
.wall-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 27px; height: 27px; border-radius: 50%;
  background: var(--text-on-accent);
  box-shadow: 0 2px 6px rgba(18, 26, 40, .18);
  transition: transform var(--dur-normal) var(--ease-spring);
}
.wall-switch.on { background: var(--wall-rose); }
.wall-switch.on::after { transform: translateX(20px); }

/* —— 详情评论条匿名/实名切换胶囊：匿名玫瑰粉软底（--peach-soft 明暗两套），实名中性描边 —— */
.wall-cmt-mode {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex: 0 0 auto;
  min-height: 44px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--bg-card); color: var(--text-secondary);
  font-size: 13px; font-weight: var(--fw-semibold); letter-spacing: .01em;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.wall-cmt-mode.on { background: var(--peach-soft); border-color: transparent; color: var(--wall-rose); }
.wall-cmt-mode:disabled { opacity: .45; pointer-events: none; }

/* —— 减少动态：波层全部静止（与 variables.css 全局规则双保险） —— */
@media (prefers-reduced-motion: reduce) {
  .wall-page .wall-grad, .wall-page .wall-wave, .wall-page .wall-wave svg { animation: none !important; }
}
/* ============================================================
   人物志（Mos 2.0）：TOP3 玻璃舞台 + 完整排行榜 + 沉浸式详情
   —— .pp-page 作用域主题：晴空青/雾紫/暖杏；轻玻璃卡 + 柔和动态渐变；
      内容文字用 --pp-ink 保证可读性，玻璃材质仅用于舞台/浮层/操作区
   ============================================================ */
.pp-page {
  position: relative;
  min-height: 100%;
  background: var(--pp-bg);
}
.pp-page > * { position: relative; z-index: 1; }

/* —— 顶部渐变光晕：负边距铺满视口宽，超绘一层缓慢漂移（可滚动离开，不占内容空间） —— */
.pp-page .pp-aurora {
  position: absolute; z-index: 0;
  top: calc(-1 * (var(--page-top) + var(--safe-top)));
  left: calc(-1 * var(--page-h));
  right: calc(-1 * var(--page-h));
  height: clamp(240px, 52vw, 360px);
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 96%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 96%);
}
.pp-page .pp-aurora::before {
  content: ""; position: absolute; inset: -18% -22%;
  background: linear-gradient(118deg, var(--pp-grad-a) 4%, var(--pp-grad-b) 40%, var(--pp-grad-c) 76%, var(--pp-grad-a) 98%);
  animation: ppGradDrift 26s ease-in-out infinite alternate;
}
.pp-page .pp-aurora::after {
  content: ""; position: absolute;
  top: -30%; right: -12%;
  width: 62%; height: 92%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.5), rgba(255,255,255,0));
  animation: ppGlowBreath 11s ease-in-out infinite alternate;
}
@keyframes ppGradDrift { from { transform: translate3d(-2.4%, -1.6%, 0); } to { transform: translate3d(2.4%, 1.6%, 0); } }
@keyframes ppGlowBreath { from { transform: scale(.94); opacity: .6; } to { transform: scale(1.08); opacity: .92; } }

/* —— TOP3 舞台：液态玻璃面板，第一名居中突出、二三名左右 —— */
.pp-page .pp-stage {
  /* 左右留白由 .scroll 的 --page-h 统一提供，与表白墙内容外缘对齐。 */
  margin: 2px 0 18px;
  padding: 22px 14px 18px;
  border-radius: var(--r-2xl);
  background: var(--glass-bg);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
}
.pp-page .pp-stage-grid {
  display: grid;
  grid-template-columns: 1fr 1.16fr 1fr;
  align-items: end;
  gap: 6px;
}
.pp-page .pp-stage-col {
  display: flex; flex-direction: column; align-items: center;
  min-width: 0;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pp-page .pp-stage-col:active .pp-stage-ava { transform: scale(.94); }

/* 头像 + 光环底座 */
.pp-page .pp-stage-ava {
  position: relative;
  border-radius: 50%;
  padding: 0;
  transition: transform var(--dur-fast) var(--ease-spring);
}
.pp-page .pp-stage-ava .avatar { box-shadow: 0 6px 18px rgba(18, 26, 40, .16), 0 0 0 3px var(--surface-strong); }
.pp-page .pp-stage-col--first .pp-stage-ava::before {
  content: ""; position: absolute; inset: -9px;
  border-radius: 50%;
  background: conic-gradient(from 210deg, var(--pp-gold), rgba(255,255,255,0) 38%, var(--pp-grad-b) 62%, rgba(255,255,255,0) 82%, var(--pp-gold));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px));
  animation: ppRingSpin 7s linear infinite;
}
@keyframes ppRingSpin { to { transform: rotate(1turn); } }

/* 名次徽章：金/银/铜小胶囊 */
.pp-page .pp-medal {
  position: absolute; z-index: 1;
  left: 50%; bottom: -7px;
  transform: translateX(-50%);
  min-width: 26px; height: 17px;
  padding: 0 7px;
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  font-size: 10.5px; font-weight: var(--fw-black); color: #fff;
  letter-spacing: .02em;
  box-shadow: 0 3px 8px rgba(18, 26, 40, .22), inset 0 1px 0 rgba(255,255,255,.35);
  pointer-events: none;
}
.pp-page .pp-medal--1 { background: linear-gradient(150deg, #f2c063, var(--pp-gold)); }
.pp-page .pp-medal--2 { background: linear-gradient(150deg, #b3c4d6, var(--pp-silver)); }
.pp-page .pp-medal--3 { background: linear-gradient(150deg, #d8a67c, var(--pp-bronze)); }

.pp-page .pp-stage-name {
  margin-top: 13px;
  max-width: 100%;
  font-size: 14px; font-weight: var(--fw-bold); color: var(--pp-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pp-page .pp-stage-col--first .pp-stage-name { font-size: 16px; }
.pp-page .pp-stage-hot {
  display: inline-flex; align-items: center; gap: 3px;
  margin-top: 3px;
  font-size: 11.5px; font-weight: var(--fw-bold); color: var(--pp-accent-deep);
  font-variant-numeric: tabular-nums;
}
.pp-page .pp-stage-hot svg { flex: 0 0 auto; }
.pp-page .pp-stage-desc {
  margin-top: 2px;
  max-width: 100%;
  font-size: 11px; color: var(--pp-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* —— 排行榜（第 4 名起）：轻玻璃行 —— */
.pp-page .pp-board { margin: 0; }
.pp-page .pp-board-title {
  display: flex; align-items: center; gap: 6px;
  margin: 4px 2px 10px;
  font-size: var(--fs-title-section); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight); color: var(--pp-ink);
}
.pp-page .pp-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  margin-bottom: 10px;
  border-radius: var(--r-lg);
  background: var(--pp-card);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
          backdrop-filter: blur(14px) saturate(1.4);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-normal) var(--ease);
}
.pp-page .pp-row:active { transform: scale(.982); }
.pp-page .pp-row-rank {
  flex: 0 0 26px;
  text-align: center;
  font-size: 15px; font-weight: var(--fw-black);
  color: var(--pp-faint);
  font-variant-numeric: tabular-nums;
}
.pp-page .pp-row-rank--1 { color: var(--pp-gold); }
.pp-page .pp-row-rank--2 { color: var(--pp-silver); }
.pp-page .pp-row-rank--3 { color: var(--pp-bronze); }
.pp-page .pp-row .avatar { flex: 0 0 auto; }
.pp-page .pp-row-main { flex: 1 1 auto; min-width: 0; }
.pp-page .pp-row-name {
  font-size: 15px; font-weight: var(--fw-semibold); color: var(--pp-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pp-page .pp-row-desc {
  margin-top: 1px;
  font-size: 12.5px; color: var(--pp-ink-2);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.pp-page .pp-row-hot {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
}
.pp-page .pp-row-hot b {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 14px; font-weight: var(--fw-bold); color: var(--pp-accent-deep);
  font-variant-numeric: tabular-nums;
}
.pp-page .pp-row-hot b svg { flex: 0 0 auto; }
.pp-page .pp-row-hot span { font-size: 10px; color: var(--pp-faint); }

/* —— 悬浮「添加人物」胶囊按钮：液态玻璃，右下角，避开安全区（子页面无 Dock）；
     深色下 --pp-fab-* 为浅灰玻璃，避免深玻璃融入暗底 —— */
.pp-page .pp-fab {
  position: fixed; z-index: 30;
  right: calc(var(--page-h) + 2px);
  bottom: calc(24px + var(--safe-bottom));
  height: 50px;
  padding: 0 20px 0 16px;
  border: var(--pp-fab-border);
  border-radius: var(--r-pill);
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--pp-fab-bg);
  box-shadow: var(--glass-float-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  color: var(--pp-fab-ink);
  font-size: 14.5px; font-weight: var(--fw-bold); letter-spacing: -.01em;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-normal) var(--ease);
}
.pp-page .pp-fab svg { flex: 0 0 auto; }
.pp-page .pp-fab:active { transform: scale(.93); }

/* ============================================================
   人物详情页（#/apps/people-detail?id=）：三段布局（同帖子/墙详情）
   ============================================================ */
.pp-detail { background: var(--pp-bg); }
.pp-detail .detail-page { background: linear-gradient(180deg, var(--pp-grad-a), rgba(0,0,0,0) 300px), var(--pp-bg); }

/* —— 沉浸式封面：柔和动态渐变（高度克制），头像/姓名/标签/简介 —— */
.pp-cover { position: relative; padding: 6px 2px 18px; }
.pp-cover::before {
  content: ""; position: absolute; z-index: 0;
  top: -68px; left: -18px; right: -18px; height: 218px;
  border-radius: 0 0 var(--r-2xl) var(--r-2xl);
  background: linear-gradient(128deg, var(--pp-grad-a) 8%, var(--pp-grad-b) 48%, var(--pp-grad-c) 88%);
  background-size: 160% 160%;
  animation: ppCoverFlow 16s ease-in-out infinite alternate;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 62%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,1) 62%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}
@keyframes ppCoverFlow { from { background-position: 0% 30%; } to { background-position: 100% 70%; } }
.pp-cover > * { position: relative; z-index: 1; }
.pp-cover-head { display: flex; align-items: center; gap: 15px; }
.pp-cover .avatar { flex: 0 0 auto; box-shadow: 0 10px 26px rgba(18, 26, 40, .18), 0 0 0 3px var(--surface-strong); }
.pp-cover-main { flex: 1 1 auto; min-width: 0; }
.pp-cover-name {
  font-size: 24px; font-weight: var(--fw-black); letter-spacing: var(--ls-tighter);
  color: var(--pp-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pp-cover-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.pp-cover-tag {
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 11px; font-weight: var(--fw-bold); color: var(--pp-accent-deep);
  background: var(--pp-accent-soft);
}
.pp-cover-tag--muted { color: var(--pp-ink-2); background: rgba(120, 132, 152, .12); }
.pp-cover-desc {
  margin-top: 13px;
  font-size: 14px; line-height: var(--lh-body); color: var(--pp-ink-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* —— 数据区：三格玻璃卡（热度 / 助力值 / 浏览量） —— */
.pp-stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  margin: 0 0 12px;
  border-radius: var(--r-xl);
  background: var(--glass-bg);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  overflow: hidden;
}
.pp-stat { padding: 14px 6px 12px; text-align: center; position: relative; }
.pp-stat + .pp-stat::before {
  content: ""; position: absolute; left: 0; top: 22%; height: 56%;
  border-left: 1px solid var(--line);
}
.pp-stat b {
  display: block;
  font-size: 21px; font-weight: var(--fw-black); letter-spacing: var(--ls-tight);
  color: var(--pp-ink);
  font-variant-numeric: tabular-nums;
}
.pp-stat--hot b { color: var(--pp-accent-deep); }
.pp-stat span { display: block; margin-top: 2px; font-size: 11px; color: var(--pp-faint); }

/* —— 基本资料卡 —— */
.pp-info {
  padding: 13px 16px;
  border-radius: var(--r-lg);
  background: var(--pp-card-strong);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
          backdrop-filter: blur(14px) saturate(1.4);
}
.pp-info-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 5px 0;
  font-size: 13px;
}
.pp-info-row + .pp-info-row { border-top: 1px solid var(--line); }
.pp-info-row .k { color: var(--pp-faint); flex: 0 0 auto; }
.pp-info-row .v { color: var(--pp-ink-2); font-weight: var(--fw-semibold); text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* —— 匿名事迹墙 —— */
.pp-stories-title {
  display: flex; align-items: center; gap: 6px;
  margin: 20px 2px 10px;
  font-size: var(--fs-title-section); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight); color: var(--pp-ink);
}
.pp-stories-title small { font-size: 12px; font-weight: var(--fw-semibold); color: var(--pp-faint); }
.pp-story {
  padding: 12px 14px;
  margin-bottom: 10px;
  border-radius: var(--r-lg);
  background: var(--pp-card);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
          backdrop-filter: blur(14px) saturate(1.4);
}
.pp-story-text { font-size: 14px; line-height: var(--lh-body); color: var(--pp-ink); overflow-wrap: anywhere; }
.pp-story-ops {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px;
}
.pp-story-time { font-size: 11.5px; color: var(--pp-faint); }
.pp-story-like {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; padding: 4px 6px; margin: -4px -6px;
  border-radius: var(--r-pill);
  background: none;
  font-size: 12.5px; font-weight: var(--fw-bold); color: var(--pp-faint);
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease-spring);
}
.pp-story-like svg { flex: 0 0 auto; }
.pp-story-like.liked { color: var(--pp-accent); }
.pp-story-like:active { transform: scale(.9); }
.pp-story-like.pop { animation: ppLikePop .32s var(--ease-spring); }
@keyframes ppLikePop { 0% { transform: scale(.72); } 60% { transform: scale(1.16); } 100% { transform: scale(1); } }
.pp-story-add {
  width: 100%;
  padding: 13px;
  border: 1.5px dashed rgba(120, 132, 152, .38);
  border-radius: var(--r-lg);
  background: var(--pp-ctrl-bg);   /* 深色为浅灰玻璃底，浅色透明不变 */
  font-size: 13.5px; font-weight: var(--fw-bold); color: var(--pp-accent-deep);
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-normal) var(--ease);
}
.pp-story-add:active { transform: scale(.98); background: var(--pp-accent-soft); }

/* —— 底部悬浮操作区：分享 / 举报 / 打 Call（液态玻璃条） —— */
/* 社群：沿用共用字号、实色内容与控制组件。 */
.cg-page { min-width: 0; }
.cg-nav { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; min-height: 44px; }
.cg-nav h1 { font-size: var(--fs-title-page); margin: 0; }
.cg-tabs { display: flex; width: 100%; margin: 16px 0; }
.cg-tabs button { flex: 1; min-height: 40px; }
.cg-home-controls { margin-bottom: 16px; }
.cg-search { width: 100%; }
.cg-page .form-input { min-height: 44px; }
.cg-form .form-textarea { min-height: 100px; }
.cg-main > .cg-tabs { position: sticky; top: 0; z-index: 2; background: var(--bg); }
.cg-filters, .cg-post-tools { display: flex; gap: 10px; margin: 12px 0 16px; }
.cg-filters select, .cg-post-tools select { flex: 1; min-height: 42px; border: 0; border-radius: var(--r-md); padding: 8px 10px; background: var(--bg-card); color: var(--text-primary); font: inherit; }
.cg-post-tools input { flex: 3; min-width: 0; }
.cg-list { background: var(--bg-card); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 18px; }
.cg-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text-primary); text-align: left; font: inherit; }
.cg-row:last-child { border-bottom: 0; }
.cg-row:active { background: var(--bg-card-soft); }
.cg-thumb { width: 72px; height: 64px; object-fit: cover; border-radius: var(--r-md); flex: 0 0 auto; }
.cg-fallback { display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.cg-row-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cg-row-copy b { font-size: 16px; }
.cg-row-desc { font-size: 13px; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cg-row-copy small, .cg-note { font-size: 12px; color: var(--text-secondary); line-height: 1.6; }
.cg-row-state { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-secondary); }
.cg-empty { padding: 36px 12px; text-align: center; }
.cg-empty b { font-size: 17px; }
.cg-empty p { font-size: 14px; color: var(--text-secondary); line-height: 1.7; }
.cg-loading { min-height: 100px; padding-top: 30px; color: var(--text-secondary); text-align: center; }
.cg-text-button, .cg-post-source { min-height: 44px; padding: 8px; border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 13px; }
.cg-post-source { display: block; padding-left: 4px; }

.cg-scope { padding: 3px 9px; background: var(--accent-soft); color: var(--accent); border-radius: var(--r-pill); font-size: 12px; }
.cg-description { font-size: 14px; color: var(--text-secondary); line-height: 1.75; overflow-wrap: anywhere; }
.cg-topic-row { display: flex; gap: 8px; font-size: 12px; color: var(--text-secondary); }
.cg-members-line { display: flex; gap: 10px; align-items: center; margin: 12px 0; }
.cg-members-line > span { display: flex; }
.cg-members-line > span .avatar + .avatar { margin-left: -5px; }
.cg-members-line > button { border: 0; background: none; color: var(--text-secondary); min-height: 44px; font: inherit; font-size: 13px; }
.cg-join-line { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cg-join-line .cg-note { flex-basis: 100%; }
.cg-rules { padding-left: 24px; margin: 18px 0; line-height: 1.7; }
.cg-rules li { margin-bottom: 16px; }
.cg-rules p { margin: 4px 0 0; color: var(--text-secondary); font-size: 14px; }
.cg-write { width: 100%; margin-bottom: 14px; }
.cg-more { display: block; width: 100%; margin: 14px 0; }
.cg-member { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.cg-member-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 4px; padding: 0; background: none; border: 0; color: var(--text-primary); text-align: left; font: inherit; }
.cg-member-copy small { color: var(--text-secondary); font-size: 12px; }
.cg-menu { display: flex; flex-direction: column; gap: 8px; }
.cg-menu > button { width: 100%; }
.cg-review { padding: 16px 0; border-bottom: 1px solid var(--line); }
.cg-review p { color: var(--text-secondary); font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cg-review > div { display: flex; gap: 10px; margin-top: 10px; }
.cg-form { display: flex; flex-direction: column; gap: 18px; }
.cg-field { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: var(--fw-semibold); }
.cg-field .form-input, .cg-field .form-textarea { width: 100%; font: inherit; font-weight: var(--fw-regular); }
.cg-choices { display: flex; flex-wrap: wrap; gap: 10px; border: 0; padding: 0; margin: 0; }
.cg-choices legend { margin-bottom: 10px; font-size: 14px; font-weight: var(--fw-semibold); }
.cg-choices label { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; background: var(--bg-card); border-radius: var(--r-md); font-size: 14px; }
.cg-choices input { accent-color: var(--accent); }
.cg-scope-choices { flex-direction: column; }
.cg-scope-choices label { padding: 14px; }
.cg-step { color: var(--text-secondary); margin: 0; font-size: 13px; }
.cg-cover-preview { width: 100%; max-height: 180px; object-fit: cover; border-radius: var(--r-md); }
.cg-create-preview { padding: 16px; background: var(--bg-card); border-radius: var(--r-md); overflow-wrap: anywhere; }
.cg-form-actions { display: flex; gap: 10px; }
.cg-form-actions > button { flex: 1; }
.cg-manage-tabs { flex-wrap: wrap; }
.cg-page button:focus-visible, .cg-page select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cg-sidebar { display: none; }
@media(min-width: 900px) { .cg-detail { max-width: 720px; margin: 0 auto; } .cg-page .cg-form { max-width: 680px; margin: 0 auto; } }
@media(min-width: 1000px) {
  body:has(.cg-page) .banner-container { left: 50%; right: auto; width: min(456px, calc(100% - 32px)); transform: translateX(-50%); }
  .app:has(.cg-page) { max-width: 1040px; }
  .cg-detail { display: grid; grid-template-columns: minmax(0, 650px) 260px; align-items: start; gap: 28px; max-width: 100%; }
  .cg-sidebar { display: block; position: sticky; top: 20px; padding: 20px; background: var(--bg-card); border-radius: var(--r-lg); color: var(--text-secondary); font-size: 14px; line-height: 1.75; }
  .cg-sidebar h3 { color: var(--text-primary); font-size: 16px; margin: 0 0 12px; }
  .cg-sidebar h3:not(:first-child) { margin-top: 24px; }
  .cg-sidebar ol { padding-left: 20px; }
}

/* 社群首页：X 式紧凑导航、图像入口与连续时间线。只作用于此页。 */
.app:has(.cg-home) { background: var(--bg-card); }
.app:has(.cg-home)::before { display: none; }
.scroll:has(.cg-home) { padding: var(--safe-top) 0 calc(24px + var(--safe-bottom)); }
.cg-home { background: var(--bg-card); min-height: 100%; }
.cg-home-main { min-width: 0; }
.cg-side-nav, .cg-home-aside { display: none; }
.cg-home-header { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 4px; min-height: 54px; padding: 0 8px; background: var(--bg-card); }
.cg-home-header h1 { flex: 1; margin: 0 8px; font-size: 20px; line-height: 1.3; font-weight: var(--fw-bold); }
.cg-home-header .icon-button { flex: 0 0 40px; width: 40px; height: 44px; }
.cg-home .cg-home-controls { margin: 0; }
.cg-home-tabs { display: flex; border-bottom: 1px solid var(--line); }
.cg-home-tabs button { position: relative; flex: 1; height: 52px; color: var(--text-secondary); font-size: 15px; font-weight: var(--fw-semibold); }
.cg-home-tabs button.active { color: var(--text-primary); font-weight: var(--fw-bold); }
.cg-home-tabs button.active::after { content: ""; position: absolute; bottom: 0; left: calc(50% - 18px); width: 36px; height: 4px; border-radius: 4px; background: var(--accent); }
.cg-discovery-tools { padding: 16px; }
.cg-home .cg-filters { margin-bottom: 0; }
.cg-home .cg-filters select { background: var(--bg-card-soft); }
.cg-home:not(.cg-home-mine) .cg-home-content { padding: 0 16px 16px; }
.cg-home-section-title { margin: 0; padding: 18px 16px 10px; font-size: 14px; font-weight: var(--fw-bold); color: var(--text-primary); }
.cg-rail { display: flex; gap: 10px; overflow-x: auto; padding: 2px 16px 12px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.cg-joined-card { display: block; flex: 0 0 134px; width: 134px; overflow: hidden; border-radius: 12px; border: 1px solid var(--line); text-align: left; background: var(--bg-card); }
.cg-joined-cover { width: 100%; height: 56px; object-fit: cover; font-size: 22px; font-weight: var(--fw-bold); }
.cg-joined-info { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; }
.cg-joined-info b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; line-height: 19px; }
.cg-joined-info small { font-size: 11.5px; color: var(--text-secondary); line-height: 17px; font-variant-numeric: tabular-nums; }
.cg-no-joined { padding: 16px; font-size: 14px; color: var(--text-secondary); text-align: center; }
.cg-no-joined p { margin: 8px 0; }
.cg-rail .cg-more { flex: 0 0 100px; width: 100px; margin: 0; }
.cg-pending-link { display: block; width: 100%; padding: 12px 16px; min-height: 44px; text-align: left; color: var(--accent-deep); font-size: 13px; border-bottom: 1px solid var(--line); }
.cg-directory-sheet .cg-row { padding: 14px 0; }
.cg-featured-feed { padding: 0 var(--page-h) 20px; }
.cg-home .cg-empty { padding: 40px 24px; }
.cg-home .cg-home-content > .btn { display: block; margin: 0 auto 16px; }
@media (hover: hover) {
  .cg-home-tabs button:hover, .cg-side-link:hover { background: var(--bg-card-soft); }
  .cg-joined-card:hover .cg-joined-info b { color: var(--accent-deep); }
}
@media (min-width: 1000px) {
  .app:has(.cg-home) { max-width: 1140px; box-shadow: none; }
  .cg-home-layout { display: grid; grid-template-columns: 180px minmax(0, 600px) minmax(200px, 1fr); min-height: calc(100dvh - var(--safe-top)); }
  .cg-home-main { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
  .cg-side-nav { position: sticky; top: 0; display: flex; flex-direction: column; align-self: start; gap: 4px; padding: 20px 12px; }
  .cg-nav-brand { width: 32px; height: 32px; margin: 0 14px 18px; }
  .cg-side-link { display: flex; gap: 16px; align-items: center; padding: 12px; min-height: 52px; border-radius: var(--r-pill); font-size: 19px; }
  .cg-side-link.selected { font-weight: var(--fw-bold); }
  .cg-side-link svg { flex-shrink: 0; }
  .cg-home-aside { position: sticky; top: 20px; display: block; align-self: start; margin: 20px 16px; padding: 20px; background: var(--bg-card-soft); border-radius: 16px; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
  .cg-home-aside h2 { margin: 0 0 12px; font-size: 19px; color: var(--text-primary); }
  .cg-home-aside h3 { margin: 20px 0 8px; font-size: 15px; }
  .cg-home-aside p { margin: 8px 0; color: var(--text-secondary); }
  .cg-home-aside ol { padding-left: 18px; color: var(--text-secondary); }
}

.pp-actionbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px var(--page-h) calc(10px + var(--safe-bottom));
  background: var(--glass-bg);
  border-top: var(--glass-border);
  box-shadow: 0 -8px 28px rgba(18, 26, 40, .07);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
}
/* 分享/举报图标按钮：深色下用 --pp-ctrl-* 浅灰玻璃与操作条/页底隔离（浅色透明底不变） */
.pp-actionbar .icon-button {
  flex: 0 0 auto;
  border: var(--pp-ctrl-border);
  background: var(--pp-ctrl-bg);
  box-shadow: var(--pp-ctrl-inset);
}
.pp-actionbar .icon-button:active { background: var(--pp-ctrl-bg-active); }
.pp-call {
  position: relative;
  flex: 1 1 auto; min-width: 0;
  height: 46px;
  border: 0; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: linear-gradient(135deg, var(--pp-accent) 0%, var(--pp-accent-deep) 100%);
  color: var(--text-on-accent);
  font-size: 15.5px; font-weight: var(--fw-black); letter-spacing: .01em;
  box-shadow: 0 10px 24px rgba(30, 156, 207, .35), inset 0 1px 0 rgba(255, 255, 255, .28);
  overflow: hidden;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-normal) var(--ease);
}
.pp-call svg { flex: 0 0 auto; }
.pp-call-feedback {
  position: fixed; z-index: 220; inset: 0; pointer-events: none;
  animation: ppHeatAppear 180ms var(--ease-out);
}
.pp-call-heat {
  position: absolute; left: 50%; top: calc(50% - 72px); transform: translate(-50%, -100%);
  padding: 8px 16px; border-radius: var(--r-pill); background: var(--bg-card);
  color: var(--text-primary); box-shadow: var(--shadow-soft); text-align: center;
  display: flex; flex-direction: column; gap: 2px;
}
.pp-call-heat small { font-size: 12px; color: var(--text-secondary); }
.pp-call-heat strong { font-size: 30px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.pp-call-fire { position: absolute; left: calc(50% - 48px); top: calc(50% - 58px); width: 96px; height: 116px; overflow: visible; }
.pp-call-fire .outer { fill: var(--danger); }
.pp-call-fire .inner { fill: var(--peach); }
.pp-call-feedback.charging .pp-call-fire { animation: ppFireBurn 500ms ease-in-out infinite alternate; transform-origin: 50% 90%; }
@keyframes ppHeatAppear { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ppFireBurn { from { transform: scale(.96, 1); } to { transform: scale(1.02, 1.06); } }
@media (prefers-reduced-motion: reduce) { .pp-call-feedback, .pp-call-feedback.charging .pp-call-fire { animation: none; } }
/* 点击反馈：光环扩散 */
.pp-call .pp-pulse {
  position: absolute; left: var(--px, 50%); top: 50%;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  animation: ppPulse .58s var(--ease-out) forwards;
}
@keyframes ppPulse {
  0% { transform: translate(-50%, -50%) scale(0); opacity: .85; }
  100% { transform: translate(-50%, -50%) scale(16); opacity: 0; }
}
/* 点击态短按弹跳 */
.pp-call.pop { animation: ppCallPop .3s var(--ease-spring); }
@keyframes ppCallPop { 0% { transform: scale(1); } 40% { transform: scale(.94); } 100% { transform: scale(1); } }
/* 长按蓄力态：轻微放大 + 光晕增强 */
.pp-call.charging {
  transform: scale(1.045);
  animation: ppChargeGlow 1.1s ease-in-out infinite alternate;
}
@keyframes ppChargeGlow {
  from { box-shadow: 0 10px 24px rgba(30, 156, 207, .35), 0 0 0 0 rgba(255, 255, 255, .28), inset 0 1px 0 rgba(255, 255, 255, .28); }
  to   { box-shadow: 0 14px 34px rgba(30, 156, 207, .5), 0 0 0 7px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .28); }
}
/* 蓄力飘字：+N 沿按钮上浮消散 */
.pp-call .pp-float {
  position: absolute; left: var(--px, 50%); top: 30%;
  transform: translateX(-50%);
  font-size: 13px; font-weight: var(--fw-black); color: #fff;
  text-shadow: 0 1px 6px rgba(18, 80, 120, .4);
  pointer-events: none;
  animation: ppFloat .8s var(--ease-out) forwards;
}
@keyframes ppFloat {
  0% { transform: translate(-50%, 0) scale(.8); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translate(-50%, -34px) scale(1.05); opacity: 0; }
}

/* —— 详情滚动区给悬浮操作条留出呼吸空间 —— */
.pp-detail .detail-scroll { padding-bottom: 20px; }

/* —— 举报 Sheet 理由选项 —— */
.pp-report-opt {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 14px 4px;
  border: 0; border-bottom: 1px solid var(--line);
  background: none;
  font-size: 15px; color: var(--text-primary);
  -webkit-tap-highlight-color: transparent;
}
.pp-report-opt:last-of-type { border-bottom: 0; }
.pp-report-opt:active { background: var(--accent-soft); }
.pp-report-opt svg { color: var(--faint); }

/* —— 减少动态：全部静态化 —— */
@media (prefers-reduced-motion: reduce) {
  .pp-page .pp-aurora::before, .pp-page .pp-aurora::after,
  .pp-page .pp-stage-col--first .pp-stage-ava::before,
  .pp-cover::before,
  .pp-call.charging { animation: none !important; }
  .pp-cover::before { background-position: 50% 50%; }
}

/* —— 添加/编辑人物弹窗：圆形头像选择按钮 —— */
.pp-compose-avatar {
  flex: 0 0 auto;
  width: 64px; height: 64px;
  border: 1.5px dashed rgba(120, 132, 152, .45);
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface);
  color: var(--faint);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast) var(--ease-spring);
}
.pp-compose-avatar:active { transform: scale(.92); }

/* —— 操作条次级胶囊（分享/举报）：打 Call 仍为唯一主按钮，次级钮不抢权重 —— */
.pp-act {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  flex: 0 0 auto; height: 38px; padding: 0 14px;
  border: var(--pp-ctrl-border); border-radius: 12px;
  background: var(--pp-ctrl-bg); box-shadow: var(--pp-ctrl-inset);
  color: var(--pp-ink-2);
  font-size: 13.5px; font-weight: var(--fw-semibold);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
}
.pp-act:active { background: var(--pp-ctrl-bg-active); transform: scale(.96); }
/* 举报胶囊进 pp 操作条：默认表面随 pp 令牌（灰），hover 才转警示色（全局 .report-btn:hover） */
.pp-actionbar .report-btn {
  border: var(--pp-ctrl-border);
  background: var(--pp-ctrl-bg);
  box-shadow: var(--pp-ctrl-inset);
  color: var(--pp-ink-2);
}

/* —— 事迹操作行：右侧动作组（点赞 + 举报行内小按钮） —— */
.pp-story-actions { display: inline-flex; align-items: center; gap: 12px; }
.pp-story-actions .cc-report {
  border: 0; background: none; padding: 4px 0; margin: -4px 0;
  color: var(--pp-faint); font-size: 12px; font-weight: var(--fw-semibold); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pp-story-actions .cc-report:not(.reported):hover { color: var(--danger); }
.cg-filters { flex-wrap: wrap; }
.cg-filters .mz-select { flex: 1 1 120px; min-width: 0; }
.cg-browse-context { margin-top: var(--sp-3); color: var(--text-secondary); font-size: var(--fs-body-small); line-height: var(--lh-body); }
.cg-share { min-height: 44px; height: 44px; padding: 0 18px; border-radius: var(--r-pill); color: var(--text-primary); background: var(--bg-card-soft); box-shadow: none; }
.mz-select-trigger:disabled { opacity: .55; cursor: default; }
.cg-group-post + .cg-group-post { margin-top: 12px; }

.cg-detail-page .cg-nav h1 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-detail-page .cg-nav .icon-button { flex-shrink: 0; }
.cg-cover-area { width: 100%; aspect-ratio: 3 / 1; overflow: hidden; border-radius: var(--r-lg); background: var(--bg-card-soft); }
.cg-cover-area .cg-cover { display: block; width: 100%; height: 100%; object-fit: cover; }
.cg-cover-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 100%; background: var(--accent-soft); color: var(--text-secondary); font-size: 12px; }
.cg-cover-placeholder svg { color: var(--accent); }
.cg-detail-meta { margin-top: 14px; }

/* 跑腿帮：任务、资金与履约共用当前 Mos 2.0 令牌。 */
.er-page { width: 100%; min-width: 0; max-width: 1040px; margin: 0 auto; color: var(--text-primary); }
.er-page :is(button,a,input,textarea) { -webkit-tap-highlight-color: transparent; }
.er-nav { display: flex; align-items: center; justify-content: space-between; min-height: var(--touch); margin-bottom: var(--sp-2); }
.er-nav .icon-button { flex-shrink: 0; min-width: var(--touch); min-height: var(--touch); }
.er-nav .er-text-button { flex-shrink: 0; min-width: 68px; padding-inline: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-card); color: var(--text-primary); }
.er-nav .er-text-button:hover { background: var(--bg-card-soft); }
.er-nav-inline { gap: var(--sp-2); }
.er-nav-inline .page-title-header { flex: 1; min-width: 0; margin: 0; padding: 0; }
.er-nav-inline .page-title-copy { width: 100%; min-width: 0; }
/* 与表白墙 addPageHeader 的返回键旁标题同为 19px。 */
.er-nav-inline .page-title { margin: 0; overflow: hidden; font-size: 19px; font-weight: var(--fw-bold); line-height: var(--lh-body); letter-spacing: normal; white-space: nowrap; text-overflow: ellipsis; }
.er-home-page { max-width: 720px; padding-bottom: calc(96px + var(--safe-bottom)); }
.er-home-page .page-title-copy { display: flex; align-items: baseline; gap: 8px; }
.er-home-page .page-title { flex-shrink: 0; }
.er-campus-label { min-width: 0; overflow: hidden; color: var(--text-secondary); font-size: 12px; font-weight: var(--fw-regular); white-space: nowrap; text-overflow: ellipsis; }
.er-campus-orders { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.er-campus-order { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); min-width: 0; min-height: 144px; padding: 16px; border-radius: var(--r-lg); background: var(--bg-card); color: var(--text-primary); text-align: left; box-shadow: var(--shadow-card); }
.er-campus-order:hover,.er-runner-card:hover,.er-service-option:hover { background: var(--bg-card-soft); }
.er-order-kind { color: var(--text-secondary); font-family: var(--font-ui); font-size: var(--fs-meta); }
.er-campus-order h3 { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-family: var(--font-ui); font-size: var(--fs-card-title); font-weight: var(--fw-semibold); line-height: 1.45; overflow-wrap: anywhere; }
.er-campus-order > strong { margin-top: auto; font-family: var(--font-ui); font-size: var(--fs-card-title); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.er-runners { display: grid; gap: 12px; }
.er-runner-card { display: flex; align-items: center; gap: 16px; width: 100%; min-width: 0; min-height: 112px; padding: 24px; border-radius: var(--r-lg); background: var(--bg-card); color: var(--text-primary); text-align: left; box-shadow: var(--shadow-card); }
.er-runner-card .avatar { flex: 0 0 64px; }
.er-runner-copy { display: grid; min-width: 0; gap: var(--sp-2); }
.er-runner-copy strong { overflow: hidden; font-family: var(--font-ui); font-size: var(--fs-card-title); font-weight: var(--fw-semibold); white-space: nowrap; text-overflow: ellipsis; }
.er-runner-copy > span { color: var(--text-secondary); font-size: var(--fs-body-small); font-variant-numeric: tabular-nums; }
.er-more-feedback:empty { display: none; }
.er-more-feedback { margin-top: var(--sp-3); text-align: center; }
.er-load-sentinel { height: 1px; }
.er-fab { position: fixed; z-index: 30; right: var(--page-h); bottom: calc(24px + var(--safe-bottom)); display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--accent); color: var(--text-on-accent); box-shadow: var(--shadow-card-hover); }
.er-fab:hover { background: var(--accent-deep); }
html[data-theme='dark'] .er-fab { color: var(--bg-page); }
.er-service-picker { display: grid; gap: var(--sp-3); }
.er-service-option { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 64px; padding: var(--sp-4); border-radius: var(--r-md); background: var(--bg-card-soft); font-family: var(--font-ui); text-align: left; }
.er-service-option > span { flex: 1; }
.er-service-option > svg { flex-shrink: 0; color: var(--accent); }
.er-text-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 44px; padding: var(--sp-2) var(--sp-3); border: 0; border-radius: var(--r-md); background: transparent; color: var(--accent-deep); font-family: var(--font-ui); font-size: var(--fs-body-small); font-weight: var(--fw-semibold); cursor: pointer; }
.er-text-button:hover { background: var(--accent-soft); }
.er-page :is(button,a):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.er-page button:disabled { opacity: .55; cursor: default; }
.er-tabs { display: flex; width: 100%; gap: var(--sp-1); margin-bottom: var(--sp-4); }
.er-page .seg.er-tabs { border-radius: var(--r-lg); }
.er-page .seg.er-tabs > button { flex: 1; min-width: 0; min-height: 44px; padding: var(--sp-2); border: 0; border-radius: var(--r-md); background: transparent; box-shadow: none; color: var(--text-secondary); }
.er-page .seg.er-tabs > button.active { background: var(--bg-card); color: var(--text-primary); box-shadow: var(--shadow-card); }
.er-account-icon { display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent); }
.er-section { margin-top: var(--sp-6); min-width: 0; }
.er-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.er-section-head h2 { margin: 0; font-family: var(--font-brand); font-size: var(--fs-title-section); font-weight: var(--fw-bold); line-height: 1.4; }
.er-section-head > button { flex-shrink: 0; }
.er-note { margin: var(--sp-2) 0; color: var(--text-secondary); font-size: var(--fs-body-small); line-height: var(--lh-body); overflow-wrap: anywhere; }
.er-description { color: var(--text-primary); white-space: pre-wrap; }
.er-info,.er-warning { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--bg-card-soft); color: var(--text-primary); }
.er-warning { background: var(--peach-soft); }
.er-empty,.er-error { display: grid; justify-items: center; align-content: center; gap: var(--sp-2); min-height: 150px; padding: var(--sp-6) var(--sp-4); text-align: center; }
.er-empty h3,.er-error h3 { margin: 0; font-size: var(--fs-card-title); font-weight: var(--fw-semibold); }
.er-empty .er-note { max-width: 42ch; margin: 0 0 var(--sp-2); }
.er-order-row { display: flex; align-items: center; gap: var(--sp-3); width: 100%; margin-top: var(--sp-3); padding: var(--card-pad); border: 0; border-radius: var(--r-lg); background: var(--bg-card); color: var(--text-primary); text-align: left; box-shadow: var(--shadow-card); cursor: pointer; }
.er-order-row:hover { background: var(--bg-card-soft); }
.er-order-main { flex: 1; min-width: 0; }
.er-order-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); color: var(--text-secondary); font-size: var(--fs-meta); }
.er-order-row h3 { margin: var(--sp-2) 0 var(--sp-1); font-family: var(--font-ui); font-size: var(--fs-card-title); font-weight: var(--fw-semibold); line-height: 1.45; overflow-wrap: anywhere; }
.er-order-row p { margin: var(--sp-1) 0; color: var(--text-secondary); font-size: var(--fs-body-small); }
.er-order-row small { color: var(--text-secondary); font-size: var(--fs-meta); line-height: 1.5; }
.er-order-fee { display: grid; justify-items: end; flex-shrink: 0; gap: var(--sp-1); font-variant-numeric: tabular-nums; }
.er-order-fee strong { font-family: var(--font-ui); font-size: var(--fs-card-title); font-weight: var(--fw-semibold); }
.er-order-fee > :is(span,svg) { color: var(--text-secondary); font-size: var(--fs-meta); }
.er-state,.er-score { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: var(--r-sm); background: var(--bg-card-soft); color: var(--text-secondary); font-family: var(--font-ui); font-size: var(--fs-meta); font-weight: var(--fw-medium); line-height: 1.4; }
.er-runner-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-lg); background: var(--bg-card); font-size: var(--fs-body-small); }
.er-runner-line > span:first-child { display: flex; align-items: center; gap: var(--sp-2); }
.er-filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--sp-3); margin: var(--sp-4) 0; }
.er-filters > .er-field { flex: 1; min-width: 120px; }
.er-form-layout { display: grid; gap: var(--sp-6); }
.er-form,.er-narrow { width: 100%; min-width: 0; }
.er-form > div { min-width: 0; }
.er-narrow { max-width: 720px; margin: 0 auto; }
.er-form { display: grid; gap: var(--sp-4); padding: var(--card-pad); border-radius: var(--r-lg); background: var(--bg-card); }
.er-field { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-2); min-width: 0; }
.er-field > :is(span,label) { color: var(--text-primary); font-family: var(--font-ui); font-size: var(--fs-body-small); font-weight: var(--fw-semibold); }
.er-field .er-optional { color: var(--text-secondary); font-weight: var(--fw-regular); }
.er-field :is(input,textarea) { width: 100%; min-width: 0; box-sizing: border-box; font-family: var(--font-body); font-size: var(--fs-body); }
.er-field input { min-height: var(--touch); }
.er-field textarea { min-height: 100px; resize: vertical; }
.er-field .er-note { margin: 0; font-size: var(--fs-meta); font-weight: var(--fw-regular); }
.er-field-pair,.er-form-selectors { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--sp-3); }
.er-form-selectors { grid-template-columns: 1fr; gap: var(--sp-4); }
.er-choices { display: flex; flex-wrap: wrap; gap: var(--sp-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.er-choices legend { margin-bottom: var(--sp-2); font-family: var(--font-ui); font-size: var(--fs-body-small); font-weight: var(--fw-semibold); }
.er-choices label { display: flex; flex: 1; align-items: center; gap: var(--sp-2); min-height: 48px; min-width: 110px; padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-card-soft); font-size: var(--fs-body-small); cursor: pointer; }
.er-choices label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.er-choices input,.er-check input { accent-color: var(--accent); flex-shrink: 0; }
.er-check { display: flex; align-items: flex-start; gap: var(--sp-2); min-height: 44px; color: var(--text-secondary); font-size: var(--fs-body-small); line-height: 1.6; cursor: pointer; }
.er-check input { margin-top: 4px; }
.er-payment-summary { display: grid; gap: var(--sp-2); padding: var(--sp-4); border-radius: var(--r-md); background: var(--bg-card-soft); font-size: var(--fs-body-small); }
.er-payment-summary > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.er-payment-summary strong,.er-facts dd { font-variant-numeric: tabular-nums; }
.er-payment-summary .er-note { margin: 0; }
.er-form-status { color: var(--error); min-width: 0; }
.er-form-status:empty { display: none; }
.er-detail { width: 100%; min-width: 0; }
.er-detail-main { min-width: 0; }
.er-order-status h2 { margin: var(--sp-3) 0 var(--sp-2); font-family: var(--font-brand); font-size: var(--fs-title-page); font-weight: var(--fw-bold); line-height: 1.4; overflow-wrap: anywhere; }
.er-order-status p { margin: 0; color: var(--text-secondary); font-size: var(--fs-body-small); line-height: 1.65; }
.er-progress { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: var(--sp-1); margin: var(--sp-5) 0 var(--sp-6); padding: 0; list-style: none; }
.er-progress li { padding: var(--sp-2) 2px; border-bottom: 2px solid var(--border); color: var(--text-secondary); font-size: var(--fs-meta); text-align: center; overflow-wrap: anywhere; }
.er-progress li.current { color: var(--accent-deep); border-color: var(--accent); font-weight: var(--fw-semibold); }
.er-progress li.done { color: var(--text-primary); }
.er-facts { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.25fr); gap: var(--sp-3); margin: 0; padding: var(--card-pad); border-radius: var(--r-lg); background: var(--bg-card); font-size: var(--fs-body-small); line-height: 1.55; }
.er-facts dt { color: var(--text-secondary); }
.er-facts dd { min-width: 0; margin: 0; color: var(--text-primary); text-align: right; overflow-wrap: anywhere; }
.er-facts a { color: var(--accent-deep); text-underline-offset: 3px; }
.er-action-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--sp-3); }
.er-action-grid > button { min-width: 0; width: 100%; min-height: var(--touch); white-space: normal; line-height: 1.45; }
.er-image-previews,.er-proofs { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-2) 0; }
.er-image-preview { position: relative; width: 88px; height: 88px; }
.er-image-preview img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--r-sm); background: var(--bg-card-soft); }
.er-image-preview button { position: absolute; top: -8px; right: -8px; width: 44px; height: 44px; border-radius: var(--r-pill); background: var(--bg-card); }
.er-proofs img { width: min(100%,220px); max-height: 300px; object-fit: contain; border-radius: var(--r-md); background: var(--bg-card-soft); }
.er-history { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.er-history li { display: grid; gap: var(--sp-1); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border); font-size: var(--fs-body-small); }
.er-history small { color: var(--text-secondary); font-size: var(--fs-meta); }
.er-account { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.er-account > div { flex: 1; min-width: 0; }
.er-account h2 { margin: 0; font-size: var(--fs-title-section); font-weight: var(--fw-bold); }
.er-account p { margin: var(--sp-1) 0 0; color: var(--text-secondary); font-size: var(--fs-body-small); }
.er-menu { display: grid; gap: var(--sp-1); margin-top: var(--sp-4); padding: var(--sp-2); border-radius: var(--r-lg); background: var(--bg-card); }
.er-menu-row { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 72px; padding: var(--sp-3); border: 0; border-radius: var(--r-md); background: transparent; color: var(--text-primary); text-align: left; cursor: pointer; }
.er-menu-row:hover { background: var(--bg-card-soft); }
.er-menu-row > span { flex: 1; min-width: 0; }
.er-menu-row strong { display: block; font-family: var(--font-ui); font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.er-menu-row small { display: block; margin-top: var(--sp-1); color: var(--text-secondary); font-size: var(--fs-meta); line-height: 1.5; }
.er-menu-row > svg { flex-shrink: 0; color: var(--text-secondary); }
.er-record { margin-top: var(--sp-3); padding: var(--card-pad); border-radius: var(--r-lg); background: var(--bg-card); font-size: var(--fs-body-small); }
.er-record-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.er-record :is(p,small) { color: var(--text-secondary); line-height: 1.65; overflow-wrap: anywhere; }
.er-reply { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.er-coupon-list { display: grid; gap: var(--sp-3); }
.er-coupon { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--card-pad); border-radius: var(--r-lg); background: var(--bg-card); }
.er-coupon > div { flex: 1; min-width: 180px; }
.er-coupon h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-card-title); font-weight: var(--fw-semibold); }
.er-coupon strong { font-size: var(--fs-title-page); font-family: var(--font-ui); font-variant-numeric: tabular-nums; }
.er-coupon :is(p,small) { margin: var(--sp-2) 0 0; color: var(--text-secondary); font-size: var(--fs-meta); line-height: 1.5; }
.er-sheet { max-width: 720px; padding: 0; }
.er-sheet .er-form { padding: 0; border-radius: 0; }
@media (min-width: 900px) {
  .app:has(.er-page) { max-width: 1080px; }
  .er-form-layout { max-width: 720px; margin-inline: auto; }
  .er-coupon-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 359px) {
  .er-order-row { padding: var(--sp-3); gap: var(--sp-2); }
  .er-order-fee strong { font-size: var(--fs-body); }
  .er-action-grid { grid-template-columns: 1fr; }
}