/* 账户中心（/profile /library /settings /inbox）与个人类页面（auth / support / feedback / vip / rewards / account-card / recovery*）补充。
   视觉来自 design.css 的 .account-* / .panel / .crumb / .page-title；这里只补 SSR 版独有的结构（左侧导航图标、钱包卡、设置列表）
   和 H5 组件（proto.css 的 .inbox-card / .auth-page / .support-page …）放进桌面面板后的修正。 */

/* ---- 账户壳：左侧导航 + 内容 ---- */
.pc-account-layout { align-items: start; }
.account-nav { position: sticky; top: calc(var(--site-header-height, 76px) + 16px); padding: 12px; }
.account-nav a { display: flex; align-items: center; gap: 11px; color: #c4c6ce; }
.account-nav a:hover { background: #ffffff0d; color: #fff; }
.account-nav a.active, .account-nav a.active:hover { background: #e50914; color: #fff; }
.account-nav a svg { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.account-nav a[data-unread-dot] { position: relative; }
.account-nav a.unread::after { content: ''; width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: #ff3b4b; }
.account-nav a.active.unread::after { background: #fff; }
.pc-account-content { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.pc-account-content > * { min-width: 0; }
.pc-account-overview, .pc-account-settings { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
@media (max-width: 1000px) { .pc-account-layout { grid-template-columns: minmax(0, 1fr); } .account-nav { min-width: 0; max-width: 100%; } .account-nav { position: static; flex-direction: row; overflow: auto; white-space: nowrap; } .account-nav a { flex-shrink: 0; } }

/* ---- 概览：身份区 ---- */
.pc-avatar-btn { position: relative; padding: 0; cursor: pointer; }
.pc-avatar-btn > img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.pc-avatar-btn > i { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #1f2025; border: 1px solid #ffffff26; }
.pc-avatar-btn > i svg, .pc-inline-edit svg, .pc-copy-id svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.account-reference-name h1 { display: flex; align-items: center; gap: 10px; }
.pc-inline-edit { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 1px solid #ffffff1a; background: transparent; color: #a8aab2; }
.pc-inline-edit:hover { color: #fff; background: #ffffff10; }
.account-reference-name p { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pc-copy-id { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: inherit; font-size: inherit; }
.pc-copy-id:hover { color: #fff; }
.pc-account-email { color: #c4c6ce; }

/* ---- 概览：钱包与 VIP ---- */
.pc-account-wallet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.pc-wallet-card { display: flex; align-items: center; gap: 16px; padding: 20px; min-height: 104px; border: 1px solid #ffffff12; border-radius: 11px; background: #151518; }
.pc-wallet-card:hover { border-color: #e5091466; }
.pc-wallet-card .account-feature-copy { gap: 5px; color: #a8aab2; }
.pc-wallet-card .account-feature-copy > span:first-child { font-size: 12px; }
.pc-wallet-num { color: #fff !important; font-size: 24px !important; line-height: 1.2; font-weight: 750; }
.pc-wallet-card .btn { flex-shrink: 0; font-size: 12px; min-height: 36px; padding: 7px 18px; }
.pc-wallet-vip .account-feature-icon { background: #d6a64b1f; color: #f1c97a; }
.pc-wallet-vip.is-active { border-color: #d6a64b55; background: linear-gradient(120deg, #1d1912, #151518 60%); }
.pc-wallet-vip.is-active .pc-wallet-num { color: #f6d58d !important; }
.account-feature-copy b { font-weight: 650; color: #e7e8ec; }
@media (max-width: 767px) { .pc-account-wallet { grid-template-columns: 1fr; } .pc-wallet-num { font-size: 19px !important; } }

/* ---- 概览：最近购买 ---- */
.pc-purchases { padding: 6px 20px; border-radius: 11px; background: #151518; border-color: #ffffff12; }
.pc-purchases > .muted { padding: 14px 0; }
.pc-purchase-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid #ffffff0d; }
.pc-purchase-row:last-child { border-bottom: 0; }
.pc-purchase-row strong { display: block; font-size: 14px; font-weight: 600; }
.pc-purchase-row small { display: block; margin-top: 4px; font-size: 11px; color: #85878f; }
.pc-purchase-amount { font-size: 14px; font-weight: 650; color: #ff5362; }

/* ---- 片库 ---- */
.account-empty-art path { stroke: none; }
.library-load-more { align-self: center; min-width: 160px; }
.library-read-error { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 60px 20px; color: #c3c4cb; text-align: center; }
.account-library-manage-toggle { margin-left: auto; min-height: 36px; padding: 7px 16px; border: 1px solid #ffffff16; border-radius: 4px; }
.account-library-manage-toggle[aria-pressed="true"] { color: #fff; border-color: #e50914; }
.account-library-bulk button { min-height: 34px; padding: 6px 14px; border: 1px solid #ffffff1c; border-radius: 4px; background: #ffffff0a; }
.account-library-bulk .text-btn { border: 0; background: none; color: #ff7b86; }
.account-library-episode { right: 8px; bottom: 10px; }
.account-library-time { margin-top: -6px; }

/* ---- 设置 ---- */
.account-setting-panel > button { min-height: 36px; border: 1px solid #ffffff1c; border-radius: 4px; background: #ffffff0a; flex-shrink: 0; }
.account-setting-panel > button:hover { background: #ffffff14; }
.settings-avatar > img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.account-nickname-value { flex: 1; }
.pc-settings-list { display: flex; flex-direction: column; padding: 8px 20px; }
.pc-settings-list > h2 { font-size: 16px; line-height: 1.5; padding: 12px 0 6px; }
.pc-settings-row, .pc-settings-list > button.pc-settings-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 52px; padding: 0; border: 0; border-top: 1px solid #ffffff0d; border-radius: 0; background: none; color: #e7e8ec; font-size: 14px; text-align: left; }
.pc-settings-row:hover, .pc-settings-list > button.pc-settings-row:hover { background: none; color: #fff; }
.pc-settings-row > span:last-child { color: #868892; font-size: 18px; }
.pc-settings-row .settings-danger { color: #ff6d7a; }
.pc-settings-auth .btn { min-width: 160px; }

/* ---- 消息：H5 的 .inbox-card 按设计稿 .system-message 呈现 ---- */
.pc-inbox-tabs { border-bottom: 1px solid #ffffff10; padding-bottom: 12px; }
.pc-inbox-tabs a { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 8px 16px; border: 1px solid transparent; border-radius: 4px; font-size: 13px; color: #c4c6ce; }
.pc-inbox-tabs a:hover { background: #292a30; color: #fff; }
.pc-inbox-tabs a.active { background: #e50914; border-color: #e50914; color: #fff; }
.pc-inbox-tabs .inbox-badge { position: static; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #fff; color: #e50914; font-size: 10px; font-weight: 700; display: inline-grid; place-items: center; }
.pc-inbox-tabs a:not(.active) .inbox-badge { background: #e50914; color: #fff; }
.account-system-page .inbox-toolbar { padding: 0; margin: 0; }
.account-system-page .inbox-toolbar button { min-height: 34px; padding: 6px 14px; border: 1px solid #ffffff1c; border-radius: 4px; background: #ffffff0a; font-size: 12px; color: #e7e8ec; }
.pc-inbox-list { margin-top: 0; }
.pc-inbox-list .inbox-card { display: flex; align-items: center; gap: 20px; width: 100%; margin: 0; padding: 20px 24px; text-align: left; background: #15161a; border: 1px solid #ffffff14; border-radius: 10px; color: #eee; box-shadow: none; }
.pc-inbox-list .inbox-card:hover { border-color: #e5091466; background: #18191e; }
.pc-inbox-list .inbox-card > div:nth-child(2) { flex: 1; min-width: 0; }
.pc-inbox-list .inbox-card h2 { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 650; line-height: 1.5; }
.pc-inbox-list .inbox-card p { margin-top: 4px; font-size: 12px; color: #8c8e97; line-height: 1.6; }
.pc-inbox-list .inbox-card p.inbox-body { color: #b9bbc3; font-size: 13px; }
.pc-inbox-list .inbox-card > svg { width: 16px; height: 16px; flex-shrink: 0; color: #868892; fill: none; stroke: currentColor; stroke-width: 2; }
.pc-inbox-list .inbox-icon { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: #ffffff0d; color: #c4c6ce; }
.pc-inbox-list .inbox-icon.red { background: #e5091417; color: #ff4656; }
.pc-inbox-list .inbox-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pc-inbox-list .inbox-ended { opacity: .7; }
.pc-inbox-list .skeleton { margin: 0 !important; border-radius: 10px; }
.account-system-page .inbox-note { font-size: 12px; }

/* ---- 个人类页面：设计稿 pageTitle() + 居中 .panel；面板里放原 H5 页面（皮肤与 JS 挂点不动） ---- */
.pc-personal { display: flex; flex-direction: column; gap: 24px; width: 100%; margin: 0 auto; }
.pc-narrow { max-width: 760px; }
.pc-auth-wrap { max-width: 540px; }
.pc-page-title-row { align-items: flex-start; }
.pc-page-title-row .btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pc-panel-host { padding: 0; overflow: hidden; border-radius: 11px; }
.pc-panel-host > div { min-height: 0; height: auto; }
.pc-panel-host > div:not(.rewards-page):not(.membership-page):not(.coins-page):not(.account-card-page):not(.ticket-view) { padding: 24px 28px; }
/* 标题已在 pageTitle：隐藏 H5 页头里重复的返回和标题（保留元素，JS 挂点仍在） */
.pc-panel-host .recovery-header, .pc-panel-host .account-card-header, .pc-panel-host .rewards-toolbar { display: none; }
.pc-panel-host .feedback-header > a, .pc-panel-host .feedback-header > h1 { display: none !important; }
.pc-panel-host .feedback-header { display: flex; justify-content: flex-end; position: static; background: none; }
.pc-panel-host .rewards-heading.royal-hero .icon-btn { left: auto; right: 16px; top: 12px; }
.pc-panel-host .coin-back { visibility: hidden; }
/* design.css 的裸 button 规则（边框 / 底色 / 内边距）会盖到 H5 组件里没写这些属性的按钮；:where 保持 0,0,1 特异性，proto.css 的类规则照常生效 */
:where(.pc-panel-host) button { border: 0; background: none; padding: 0; border-radius: 0; }
/* 页面底部操作区（客服 / 反馈 / 收银）：H5 钉在手机底部，桌面改为跟随面板宽度、贴底吸附 */
.pc-main.support-mode #commerce-footer, .pc-main.feedback-mode #commerce-footer, .pc-main.vip-mode #commerce-footer { position: sticky; left: auto; right: auto; bottom: 0; max-width: 760px; margin: 0 auto 32px; border-radius: 11px; border: 1px solid #ffffff10; padding: 12px 16px; }

/* ---- 会员套餐：H5 是居中吸附的横滑轮播（两侧留半屏空白、第三张被裁），760 宽面板放得下全部套餐，改为一排平铺；点卡片照常选中，圆点无用隐藏 ---- */
.pc-panel-host .membership-carousel { justify-content: center; overflow: visible; scroll-snap-type: none; padding: 8px 16px 14px; }
.pc-panel-host .membership-dots { display: none; }
/* 收银 / 客服 / 反馈底栏吸底时压在内容上方，加一道阴影与内容分层 */
.pc-main:is(.vip-mode, .support-mode, .feedback-mode) #commerce-footer { box-shadow: 0 -10px 30px #0008; }
/* proto.css 把客服 / 反馈页底色给了 #screen，底栏在 #screen 外，页面中段出现一条色带：底色挪到 main 上 */
.pc-main:is(.support-mode, .feedback-mode) { background: #101114; }
.pc-main:is(.support-mode, .feedback-mode) #screen { background: transparent; }

/* ---- 签到：30 天周期（2026-11-10 起同 H5），两条轨道横向滚动、联动，鼠标可按住拖；格子比 H5 的 49px 宽，一屏露出 8 天左右；里程碑按面板宽度均分 ---- */
.pc-panel-host .reward-schedule-grid { grid-template-columns: 42px; grid-auto-flow: column; grid-auto-columns: 78px; width: max-content; }
.pc-panel-host .reward-schedule { cursor: grab; }
.pc-panel-host .reward-schedule.is-dragging { cursor: grabbing; user-select: none; }
.pc-panel-host .reward-schedule .reward-tier-label { position: sticky; left: 0; z-index: 2; }
.pc-panel-host .checkin-progress .streak-track { gap: 3px; }
.pc-panel-host .milestone-card { flex: 1 1 0; min-width: 99px; }
/* 头图礼盒 149px 高于 128px 的头图区，顶部被面板裁掉 */
.pc-panel-host .rewards-page .rewards-heading.checkin-hero { height: 160px; }
/* 规则说明「?」按钮挪到右上角后压在礼盒丝带上：礼盒左移让出位置 */
.pc-panel-host .rewards-page .checkin-hero .rewards-gift-scene { right: 40px; }
/* 底栏 margin-bottom 穿出 main，main 底色与页脚之间露出一条 32px 的深色缝 */
.cm-site main.pc-main:is(.support-mode, .feedback-mode, .vip-mode) { display: flow-root; }
/* 反馈页头的返回与标题在桌面已隐藏，只剩 Q&A：收矮，不留 50px 空条 */
.pc-panel-host .feedback-header { min-height: 0; padding: 0 16px; margin-bottom: -8px; }
/* 账户卡头图暗层在 H5 窄卡上不明显，桌面宽卡上底边成了一条硬线：底部渐隐 */
.pc-panel-host .account-card-artwork:after { -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }

/* ---- 邀请页（/invite）：金色强调与账号卡同色系；面板沿用 .account-setting-panel ---- */
.pc-invite-hero { padding: 22px 24px; border-radius: 12px; background: linear-gradient(135deg, #3a2614, #17120f 70%); border: 1px solid #c9a5763d; }
.pc-invite-hero small { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #dfbd8e; }
.pc-invite-hero h2 { margin: 8px 0; font-size: 26px; color: #f9efdd; }
.pc-invite-hero p { margin: 0; max-width: 760px; font-size: 13px; line-height: 1.7; color: #c9b59b; }
.pc-invite-notice { margin: 0; padding: 12px 14px; border-radius: 10px; font-size: 13px; line-height: 1.6; background: #1f2026; color: #c2c4cc; }
.pc-invite-notice.warn { background: #3a1d12; color: #f3c79a; border: 1px solid #e0874a40; }
.sheet .pc-invite-notice { margin-bottom: 12px; }
.pc-invite-loading { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pc-invite-loading .skeleton, .pc-invite-list-skel { display: block; height: 160px; border-radius: 12px; }
.pc-invite-guest { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 36px 24px; }
.pc-invite-guest > svg { width: 40px; height: 40px; fill: none; stroke: #dfbd8e; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pc-invite-guest h2 { margin: 0; font-size: 18px; }
.pc-invite-guest p { margin: 0 0 8px; max-width: 460px; color: #9ea1ab; line-height: 1.7; font-size: 13px; }
.pc-invite-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.pc-invite-grid > .account-setting-panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pc-invite-share-main { display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; }
.pc-invite-share-main > div:first-child { min-width: 0; flex: 1; }
.pc-invite-share-main small, .pc-invite-rule small { display: block; font-size: 12px; color: #9ea1ab; margin-bottom: 6px; }
.pc-invite-code { display: block; font: 700 30px/1.2 ui-monospace, Menlo, monospace; letter-spacing: 4px; color: #f1d2a3; }
.pc-invite-link { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 14px; padding: 10px 12px; border: 0; border-radius: 8px; background: #101114; color: #a9acb6; font-size: 12px; text-align: left; cursor: pointer; }
.pc-invite-link span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-invite-link svg, .pc-invite-actions .btn svg, .pc-invite-lists .btn svg, [data-rules] svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pc-invite-qr { flex-shrink: 0; width: 132px; padding: 8px; border-radius: 10px; background: #fff; }
.pc-invite-qr svg { display: block; width: 100%; height: auto; }
.pc-invite-qr.big { width: 240px; margin: 0 auto; }
.pc-invite-qr-hint { margin: 0; font-size: 12px; }
.pc-invite-qr-code { text-align: center; font: 20px ui-monospace, Menlo, monospace; letter-spacing: 3px; color: #f1d2a3; margin: 14px 0 0; }
.pc-invite-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-invite-actions .btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; min-height: 34px; padding: 6px 14px; }
.pc-invite-actions .pc-share-facebook { background: #1877f2; border-color: #1877f2; color: #fff; }
.pc-invite-actions .pc-share-x { background: #000; color: #fff; }
.pc-invite-amount.pos { color: #7fd8a4; }
.pc-invite-rule-list { display: grid; gap: 14px; }
.pc-invite-rule { display: flex; align-items: center; gap: 12px; }
.pc-invite-rule > svg { flex-shrink: 0; width: 38px; height: 38px; padding: 9px; box-sizing: border-box; border-radius: 50%; background: #c9a57626; fill: none; stroke: #f1d2a3; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pc-invite-rule > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pc-invite-rule strong { font-size: 15px; color: #f1f1f4; }
.pc-invite-rule small { margin: 0; }
.pc-invite-tiers { display: flex; flex-direction: column; gap: 10px; }
.pc-invite-tiers > .row strong { font-size: 16px; color: #f9efdd; }
.pc-invite-tiers > .row small { font-size: 13px; color: #dfbd8e; }
.pc-invite-progress { height: 6px; border-radius: 3px; background: #2a2b31; overflow: hidden; }
.pc-invite-progress span { display: block; width: 0; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #d89c34, #ffe6a1); }
.pc-invite-tier-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.pc-invite-tier-list li { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 14px; border-radius: 10px; background: #1d1e23; border: 1px solid #ffffff0a; font-size: 12px; color: #a5a7b1; }
.pc-invite-tier-list li.granted { border-color: #deb76b55; }
.pc-invite-tier-list strong { font-size: 14px; color: #e3e4ea; }
.pc-invite-tier-list li.granted strong { color: #f1d2a3; }
.pc-invite-affiliate { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; border-top: 1px solid #ffffff0d; }
.pc-invite-affiliate p { margin: 0; font-size: 13px; color: #c9b59b; }
.pc-invite-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0; padding-top: 12px; border-top: 1px solid #ffffff0d; }
.pc-invite-stats dt { font-size: 11px; color: #8c8f99; }
.pc-invite-stats div { display: flex; flex-direction: column; gap: 3px; }
.pc-invite-stats dd { margin: 0; font-size: 18px; font-weight: 700; color: #f6f6f7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-invite-tabs { display: flex; gap: 26px; }
.pc-invite-tabs button { position: relative; padding: 8px 0 11px; border: 0; background: none; color: #82838b; font-size: 15px; cursor: pointer; }
.pc-invite-tabs button.active { color: #fff; font-weight: 650; }
.pc-invite-tabs button.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #deb76b; }
[data-rules] { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.pc-invite-list { padding: 4px 20px; }
.pc-invite-rows { list-style: none; margin: 0; padding: 0; }
.pc-invite-rows li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid #ffffff0a; }
.pc-invite-rows li:last-child { border-bottom: 0; }
.pc-invite-rows li > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pc-invite-rows li > div.end { align-items: flex-end; text-align: right; flex-shrink: 0; }
.pc-invite-rows strong { font-size: 14px; color: #e3e4ea; }
.pc-invite-rows small { font-size: 12px; color: #8c8f99; }
.pc-invite-badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: #2a2b31; color: #b4b6bf; white-space: nowrap; }
.pc-invite-badge.ok { background: #17392a; color: #7fd8a4; }
.pc-invite-badge.wait { background: #3a2f14; color: #f1d2a3; }
.pc-invite-badge.bad { background: #3a1719; color: #ff8a91; }
.pc-invite-amount { font-size: 15px; font-weight: 650; }
.pc-invite-more { display: block; margin: 12px auto; }
.pc-invite-empty { text-align: center; color: #85868f; font-size: 13px; padding: 36px 10px; margin: 0; }
.pc-invite-rules { margin: 0; padding-left: 18px; display: grid; gap: 10px; font-size: 13px; line-height: 1.7; color: #c2c4cc; }
.pc-invite-code-input { text-transform: uppercase; letter-spacing: 3px; font-family: ui-monospace, Menlo, monospace; font-size: 16px; }
.pc-invite-error { margin: 6px 0 0; font-size: 12px; color: #ff6a73; }
.sheet form > .primary:disabled { opacity: .4; cursor: not-allowed; }
@media (max-width: 1100px) { .pc-invite-grid { grid-template-columns: minmax(0, 1fr); } }
[data-bind-entry] .pc-settings-row > .muted { margin-left: auto; margin-right: 12px; }

/* 登录 / 注册卡片（2026-11-10 owner：不要整页往下滑）：页签 + 输入框在最上面，Google 收在最下面；.auth-label-gap 是设置密码页多个输入框之间的间距。 */
.auth-form .auth-label-gap { margin-top: 16px; }
.pc-auth-card { padding-top: 22px; padding-bottom: 22px; min-height: 0; }
.pc-auth-card .auth-mode-tabs { margin-bottom: 18px; }
.pc-auth-card .auth-mode-tabs button { font-size: 16px; font-weight: 700; }
.pc-auth-card .auth-form input + input { margin-top: 10px; }
.pc-auth-card .auth-submit { margin-top: 14px; }
.auth-sheet-status { font-size: 12px; line-height: 1.5; color: #ff8a96; margin: 10px 0 0; }
a.auth-change-email { display: block; width: fit-content; margin: 14px auto 2px; font-size: 12px; }
.pc-auth-card .auth-divider { margin: 16px 0 12px; }
.auth-google { color: #202124; background: #f8f7f8; }
.auth-google:hover { background: #e8e7ea; }

/* 箭头一律用 SVG 图标并居中：设计稿用的文字「›」随字体基线偏下偏右，圆标里看着不居中（owner 2026-11-10）。 */
.account-entry-arrow svg { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pc-settings-row > .pc-row-arrow { display: inline-flex; align-items: center; gap: 8px; color: #868892; font-size: 13px; }
.pc-row-arrow svg { display: block; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ===== 会员页新版通行证（2026-11-09 设计稿，2026-11-10 从 H5 移植）：以下两段取自 web/src/styles/proto.css 与 app.css，类名不改；H5 改了要同步过来 ===== */
.coin-topbar{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:6px;padding:9px 0 12px;position:sticky;top:0;z-index:8;background:linear-gradient(#170c0bf5,#170c0bc9 48%,#170c0b00);margin:0 -16px;padding-left:16px;padding-right:16px}
.coin-topbar .shop-transactions{display:grid;place-items:center;width:34px;height:34px;justify-self:end;border-radius:50%}
.shop-transactions svg{width:18px;height:18px;stroke-width:1.7}
:is(.coin-segment .active,.coin-topbar .shop-transactions){color:#442810;background:linear-gradient(110deg,#d89d3e,#ffedaa);box-shadow:inset 0 1px #fff6d0}
.membership-member p{font-size:11px;line-height:1.35;color:#bba58f;margin-top:4px}
.membership-avatar-frame{position:relative;display:grid;place-items:center;flex:0 0 72px;width:72px;height:72px;
 --frame-metal-light:#effaff;--frame-metal:#9ebbd5;--frame-metal-dark:#456487;
 --frame-crystal:#6ab8fa;--frame-crystal-deep:#1e4a9f;}
:is(.membership-member,.profile-avatar):is([data-tone="jade"],[data-tone="emerald"]) .membership-avatar-frame{--frame-metal-light:#f4ffec;--frame-metal:#a2cbb6;--frame-metal-dark:#487c65;
 --frame-crystal:#54d8aa;--frame-crystal-deep:#176651;}
:is(.membership-member,.profile-avatar):is([data-tone="amber"],[data-tone="ruby"]) .membership-avatar-frame{--frame-metal-light:#fff5cc;--frame-metal:#e8b460;--frame-metal-dark:#8f572d;
 --frame-crystal:#ffbd55;--frame-crystal-deep:#9e430d;}
:is(.membership-member,.profile-avatar):is([data-tone="violet"],[data-tone="amethyst"]) .membership-avatar-frame{--frame-metal-light:#fff2ce;--frame-metal:#d8b47d;--frame-metal-dark:#715268;
 --frame-crystal:#bd8cfd;--frame-crystal-deep:#4f2588;}
:is(.membership-member,.profile-avatar)[data-tone="ruby"] .membership-avatar-frame{--frame-crystal:#ff838d;--frame-crystal-deep:#8d2336}
.membership-avatar-frame>img{display:block;width:65%;height:65%;min-width:0;min-height:0;object-fit:cover;border-radius:50%}
.membership-frame-art{position:absolute;inset:0;width:100%;height:100%;stroke:none;overflow:visible;
 filter:drop-shadow(0 2px 2px #000a) drop-shadow(0 0 4px var(--mist));}
.membership-frame-art .frame-metal-light{stop-color:var(--frame-metal-light)}
.membership-frame-art .frame-metal-mid{stop-color:var(--frame-metal)}
.membership-frame-art .frame-metal-dark{stop-color:var(--frame-metal-dark)}
.membership-frame-art .frame-crystal-light{stop-color:var(--ink)}
.membership-frame-art .frame-crystal-core{stop-color:var(--frame-crystal)}
.membership-frame-art .frame-crystal-dark{stop-color:var(--frame-crystal-deep)}
.membership-frame-art .frame-ring-shadow{stroke:var(--base);stroke-width:9}
.membership-frame-art .frame-ring-metal{stroke-width:7}
.membership-frame-art .frame-ring-inlay{stroke-width:2.5}
.membership-frame-art .frame-rim-glint{stroke:var(--frame-metal-light);stroke-width:.8;opacity:.85}
.membership-frame-art :is(.frame-feather,.frame-crown,.frame-finial,.frame-gem-setting){stroke:var(--frame-metal-dark);stroke-width:.75;}
.membership-frame-art .frame-feather-glint{stroke:var(--frame-metal-light);stroke-width:1;opacity:.9}
.membership-frame-art .frame-gem-flash{fill:var(--ink);opacity:.85}
.membership-frame-art .frame-gem-shadow{fill:var(--frame-crystal-deep);opacity:.7}
:is(.membership-member,.profile-avatar)[data-tone="sapphire"] :is(.frame-wing-peak,.frame-wing-tip,.frame-crown),
:is(.membership-member,.profile-avatar)[data-tone="jade"] .frame-crown,
:is(.membership-member,.profile-avatar):not(:is([data-tone="violet"],[data-tone="amethyst"],[data-tone="emerald"])) .frame-extra-stones{display:none}
@media(max-width:350px){
.membership-avatar-frame{flex-basis:60px;width:60px;height:60px}
}
.vip-pass-page{background:radial-gradient(ellipse at 8% 8%,#a7825130,transparent 52%),
    radial-gradient(ellipse at 94% 28%,#65509c29,transparent 52%),#121115;}
.vip-pass-page .coin-topbar{padding-bottom:5px}
.vip-pass-page .membership-member{padding-block:5px 1px}
.vip-pass-page .membership-frame-art,.profile-avatar .membership-frame-art{filter:none}
.vip-pass-section{position:relative;isolation:isolate;margin:-17px -16px 0}
.vip-pass-carousel{--member-card-width:min(232px,67vw);
  height:auto;gap:10px;padding-block:14px 9px;
  touch-action:pan-x pan-y;user-select:none;cursor:grab;}
.vip-pass-carousel.dragging{scroll-snap-type:none;cursor:grabbing}
.vip-pass-carousel.dragging .vip-pass-card{cursor:grabbing}
@media(max-width:350px){
.vip-pass-section{margin-inline:-12px}
}
:is(.membership-member,.profile-avatar,#membership-benefits){--accent:#bad2ff;--edge:#7a92bf;--mist:#849edb65;--tint:#26344a;--base:#12151f;--ink:#f1f5ff;}
:is(.membership-member,.profile-avatar)[data-tone="jade"]{--accent:#b8e3d8;--edge:#739c92;--mist:#70ba9e55;--tint:#253a3b;--base:#121d20;--ink:#effaf7}
:is(.membership-member,.profile-avatar,#membership-benefits)[data-tone="amber"]{--accent:#f5d5a6;--edge:#a99173;--mist:#c599685e;--tint:#463a31;--base:#201a19;--ink:#fff5e8}
:is(.membership-member,.profile-avatar,#membership-benefits)[data-tone="violet"],.membership-member[data-tone="amethyst"]{--accent:#dec6ff;--edge:#9584b7;--mist:#a283e065;--tint:#383047;--base:#1c1827;--ink:#faf3ff}
.membership-member[data-tone="emerald"]{--accent:#8ee9b4;--edge:#529578;--mist:#52cb805c;--tint:#1e4137;--base:#14241d;--ink:#ecfff3}
.membership-member[data-tone="ruby"]{--accent:#ffb2b4;--edge:#b76065;--mist:#d6597366;--tint:#4b2631;--base:#2b141c;--ink:#fff1eb}
.vip-pass-card{position:relative;display:block;flex:0 0 var(--member-card-width);width:var(--member-card-width);
  aspect-ratio:3/4;min-width:0;overflow:hidden;border-radius:8% / 6%;padding:0;
  scroll-snap-align:center;scroll-snap-stop:always;
  transform:scale(.965);filter:brightness(.72);transition:transform .2s,filter .2s;}
.vip-pass-card.selected{transform:none;filter:none}
.vip-pass-card:focus-visible,.vip-offer-switch:focus-visible{outline:2px solid #fff0c4;outline-offset:2px}
.vip-pass-art{position:absolute;left:-.4301%;top:-2.4194%;width:101.0753%;height:104.8387%;
  max-width:none;display:block;pointer-events:none;}
.vip-pass-benefit-display{display:block;padding:4px 0;color:var(--accent);}
.vip-pass-benefit-display .member-benefit-heading h2{color:#fff}
.vip-pass-benefit-display .member-benefit-heading>span{background:linear-gradient(90deg,transparent,var(--edge));}
.vip-pass-benefit-display .member-benefit-heading>span::after{background:var(--accent)}
.vip-pass-benefit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 8px;
  padding:3px 0 0;
  background:radial-gradient(ellipse at 50% 35%,color-mix(in srgb,var(--mist) 34%,transparent),transparent 74%);}
.vip-pass-benefit{display:grid;justify-items:center;align-content:start;gap:7px;min-width:0;
  text-align:center;text-wrap:balance;font-size:11px;font-weight:650;line-height:1.25;}
.vip-benefit-crystal{position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  color:color-mix(in srgb,var(--accent) 70%,white);
  background:radial-gradient(circle at 32% 20%,#fff1,transparent 74%);}
.vip-benefit-crystal::before{content:'';position:absolute;inset:0;padding:1px;border-radius:inherit;
  background:conic-gradient(from 0deg,#fff1,#07091066 48deg,var(--edge) 127deg,var(--mist) 158deg,#05060c70 221deg,var(--accent) 304deg,#fff1);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;}
.vip-benefit-crystal>svg{width:22px;height:22px;stroke-width:1.65}
.wish-benefit-gradient{position:absolute;width:0;height:0;pointer-events:none}
.wish-card-benefits .vip-benefit-crystal{background:radial-gradient(circle at 32% 20%,#b5d6ff1a,transparent 74%),
    linear-gradient(145deg,#233b6266,#51316d66);}
.wish-card-benefits .vip-benefit-crystal::before{background:conic-gradient(from 0deg,#81b9ffb3,#18223f8c 48deg,#ae82ed 127deg,#754a9d99 158deg,#17152d70 221deg,#9bcfff 304deg,#81b9ffb3);}
.wish-card-benefits .vip-benefit-crystal>svg{stroke:url(#wish-benefit-stroke)}
.vip-pass-section>.membership-dots{margin-top:2px}
.vip-pass-section>.membership-dots button::after{background:#8d82916b}
.vip-pass-section>.membership-dots .active::after{background:linear-gradient(90deg,#ad91bd,#ffe6bc);box-shadow:none}
.vip-offer-switch{margin:10px auto 12px;min-height:32px;display:flex;align-items:center;justify-content:center;gap:6px;
  color:#e6c0ab;font-size:10px;text-decoration:underline;text-underline-offset:3px;}
.vip-offer-switch svg{width:12px;height:12px}
@media(prefers-reduced-motion:reduce){
.vip-pass-card{transition:none}
}
.membership-avatar-frame.frame-none>img{width:100%;height:100%}
/* 通行证卡面：左上金币角标用无字底图（414×244，含外缘阴影）盖住切图里原来的金标，三行字前端排；底部分隔线下填价格（按原型：大号米白字、不带 USD）。
   角标在 940×1300 卡面上定位 x=0、y=18、宽 414，再换算成卡的百分比（art 放大 101.0753% / 104.8387%、左移 .4301%、上移 2.4194%）；
   角标内字号、字距、描边按底图宽度用 cqw 走，位置是各行可见字形的中心点。 */
.vip-pass-card{container-type:inline-size}
.vip-pass-badge{position:absolute;left:-.4301%;top:-.9678%;width:44.5161%;aspect-ratio:414/244;display:block;
  container-type:inline-size;color:#422306;font-family:system-ui,sans-serif;font-weight:950;line-height:1;pointer-events:none;}
.vip-pass-badge img{display:block;width:100%;height:100%;max-width:none}
.vip-pass-badge span{position:absolute;transform:translate(-50%,-50%);white-space:nowrap}
.vip-pass-badge-top,.vip-pass-badge-bottom{font-size:8.213cqw;letter-spacing:.309cqw;-webkit-text-stroke:.193cqw currentColor}
.vip-pass-badge-top{left:41.79%;top:25.2%}
.vip-pass-badge-amount{left:42.63%;top:49.39%;font-size:25.121cqw;font-style:italic;font-variant-numeric:tabular-nums;
  letter-spacing:-.0269em;-webkit-text-stroke:.0211em currentColor}
.vip-pass-badge .vip-pass-badge-bottom{left:39.13%;top:75.2%;transform:translate(-50%,-50%) scaleX(.9)}
.vip-pass-price{position:absolute;left:15.4%;top:82.4%;
  font-size:16cqw;font-weight:800;line-height:1;letter-spacing:-.02em;color:#fff4dc;
  font-variant-numeric:tabular-nums;white-space:nowrap;
  -webkit-text-stroke:2px #170f1c;paint-order:stroke fill;
  text-shadow:0 2px 4px #000,0 4px 12px #000b;pointer-events:none;}
.vip-pass-card[data-kind="wish_card"] .vip-pass-price{left:8.3%;top:83%}

/* PC 面板里的修正：H5 的通行证区用负外边距顶到手机屏边，卡宽按 vw 算；桌面面板里不出血、卡宽固定，底部结算条不吸底。 */
.pc-panel-host .vip-pass-page { border-radius: inherit; }
.pc-panel-host .vip-pass-section { margin: -6px 0 0; }
/* 桌面面板够宽：通行证与心愿卡一屏排开、居中，不用横向滚动；选中的那张按 H5 的规则放大提亮。 */
.pc-panel-host .vip-pass-carousel { --member-card-width: 168px; justify-content: safe center; cursor: default; padding-inline: 16px; }
/* 卡多了（四档通行证 + 心愿卡）就等比缩窄，始终一排放下：面板里轮播 overflow 可见、不能滚，放不下的卡会被面板裁掉。 */
.pc-panel-host .vip-pass-card { cursor: pointer; flex: 0 1 var(--member-card-width); width: auto; }
.pc-panel-host :is(.vip-pass-benefit-grid, .membership-wish-copy) { max-width: 520px; margin-inline: auto; }
.pc-panel-host .coin-topbar .shop-transactions { border: 0; cursor: pointer; }

/* 工单会话（2026-11-11）：整块是一张定高卡片，消息在卡片内滚动，发送框钉在卡片底部（H5 版是绝对定位到页面底，桌面会落到页脚下、被右下浮动按钮挡住）。 */
.pc-main.support-mode #commerce-footer:empty { display: none; }
.pc-ticket-host { display: flex; flex-direction: column; height: clamp(480px, calc(100vh - 250px), 820px); margin-bottom: 32px; }
.pc-panel-host > .ticket-view { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 0; }
.ticket-view .ticket-thread { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 28px 24px; scrollbar-width: thin; scrollbar-color: #ffffff1f transparent; }
.ticket-view .ticket-composer { position: static; padding: 14px 20px 16px; background: #15161a; border-top: 1px solid #ffffff0d; }
.ticket-view .comment-form { position: static; display: flex; flex-direction: column; gap: 0; padding: 0; background: transparent; }
.ticket-view .comment-form-row { display: flex; align-items: center; gap: 10px; }
.ticket-view .emoji-toggle { width: 44px; height: 44px; display: grid; place-items: center; flex-shrink: 0; border-radius: 50%; background: #23242a; border: 1px solid #ffffff12; font-size: 20px; line-height: 1; transition: background .15s, border-color .15s; }
.ticket-view .emoji-toggle:hover, .ticket-view .emoji-toggle.active { background: #2d2e35; border-color: #ffffff26; }
.ticket-view .comment-form input { height: 44px; flex: 1; min-width: 0; padding: 0 18px; border-radius: 22px; border: 1px solid #ffffff12; background: #23242a; font-size: 14px; transition: border-color .15s; }
.ticket-view .comment-form input:focus { border-color: #e5091480; }
.ticket-view .ticket-send { height: 44px; padding: 0 24px; flex-shrink: 0; border-radius: 22px; background: #e50914; color: #fff; font-size: 14px; font-weight: 650; transition: background .15s, opacity .15s; }
.ticket-view .ticket-send:hover:not(:disabled) { background: #f0202b; }
.ticket-view .ticket-send:disabled { opacity: .4; cursor: default; }
.ticket-view .emoji-panel { margin-top: 10px; }
.ticket-view .emoji-grid { grid-template-columns: repeat(12, 1fr); max-height: 180px; }
.ticket-view .emoji-grid button:hover { background: #35363d; }
@media (max-width: 767px) {
  .pc-ticket-host { height: calc(100dvh - 190px); min-height: 420px; }
  .ticket-view .ticket-thread { padding: 4px 14px 18px; }
  .ticket-view .ticket-composer { padding: 10px 12px 12px; }
  .ticket-view .ticket-send { padding: 0 16px; }
  .ticket-view .emoji-grid { grid-template-columns: repeat(8, 1fr); }
}

/* 主推卡（后管「高亮」= highlight）：金色呼吸光晕 + 周期扫光 + 右上角 BEST VALUE 标签（2026-11-11 测试反馈「主推卡做出推荐卖点的感觉」） */
.vip-pass-card[data-highlight="true"] { animation: vip-featured-glow 2.6s ease-in-out infinite; }
.vip-pass-shine { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(115deg, transparent 35%, #fff4d266 48%, #ffffffa0 50%, #fff4d266 52%, transparent 65%); background-size: 250% 100%; background-position: 130% 0; mix-blend-mode: screen; animation: vip-featured-shine 3.2s ease-in-out .6s infinite; }
.vip-pass-ribbon { position: absolute; z-index: 4; top: 4%; right: 5%; padding: 3px 8px; border-radius: 999px; background: linear-gradient(90deg, #c9973a, #ffe29a 50%, #c9973a); color: #3a2405; font-size: 9px; font-weight: 900; letter-spacing: .8px; white-space: nowrap; box-shadow: 0 2px 8px #0009; pointer-events: none; }
@keyframes vip-featured-glow { 0%, 100% { box-shadow: 0 0 0 1px #ffd98a66, 0 8px 22px #d9a24a33; } 50% { box-shadow: 0 0 0 2px #ffd98acc, 0 10px 34px #f3c56a77; } }
@keyframes vip-featured-shine { 0% { background-position: 130% 0; } 55%, 100% { background-position: -30% 0; } }
@media (prefers-reduced-motion: reduce) { .vip-pass-card[data-highlight="true"], .vip-pass-shine { animation: none; } .vip-pass-card[data-highlight="true"] { box-shadow: 0 0 0 2px #ffd98acc; } }

/* 工单 / 反馈图片附件（components/image-attach.js）与会话里的图片、放大层 */
.attach { margin: 0 0 10px; }
.attach-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.attach-add { width: 44px; height: 44px; display: grid; place-items: center; flex-shrink: 0; border-radius: 12px; background: #23242a; border: 1px dashed #ffffff33; color: #ffffffb3; transition: background .15s, border-color .15s; }
.attach-add:hover:not(:disabled) { background: #2d2e35; border-color: #ffffff59; color: #fff; }
.attach-add:disabled { opacity: .4; cursor: default; }
.attach-tray { display: contents; }
.attach-hint { font-size: 12px; color: #ffffff73; }
.attach-error { margin: 6px 0 0; font-size: 12px; color: #f0b7bf; }
.attach-item { position: relative; width: 56px; height: 56px; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: #23242a; border: 1px solid #ffffff14; }
.attach-item.is-error { border-color: #e5091499; }
.attach-thumb { display: block; width: 100%; height: 100%; padding: 0; }
.attach-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.attach-item.is-uploading .attach-thumb img { opacity: .55; }
.attach-bar { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 4px; border-radius: 2px; background: #00000080; overflow: hidden; }
.attach-bar i { display: block; height: 100%; width: 0; background: #e50914; transition: width .2s; }
.attach-fail { position: absolute; inset: 0; display: grid; place-items: center; background: #000000a6; color: #f0b7bf; font-weight: 800; pointer-events: none; }
.attach-fail button { pointer-events: auto; padding: 3px 8px; border-radius: 999px; background: #e50914; color: #fff; font-size: 11px; font-weight: 700; }
.attach-remove { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: #000000b3; color: #fff; font-size: 15px; line-height: 1; }
.feedback-attach { margin-top: 12px; }
.msg-images { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.msg-image { padding: 0; border-radius: 10px; overflow: hidden; background: #0003; cursor: zoom-in; }
.msg-image img { display: block; width: auto; height: auto; max-width: 180px; max-height: 180px; object-fit: cover; }
.img-zoom { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 32px; background: #000000e6; cursor: zoom-out; }
.img-zoom img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.img-zoom-close { position: absolute; top: 16px; right: 20px; width: 40px; height: 40px; border-radius: 50%; background: #ffffff1f; color: #fff; font-size: 26px; line-height: 1; }

/* 心愿卡只有一项特权，单独居中 */
.vip-pass-benefit-grid[data-wish-grid] { grid-template-columns: minmax(0, 1fr); justify-items: center; }