/* 在原型样式之上的少量补充：桌面端居中壳、骨架屏、通用工具类。 */
html, body, #root { height: 100%; }
#root { width: 100%; }
@media (min-width: 521px) {
  .device { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}
.skeleton { background: linear-gradient(90deg, #1b1c20 25%, #24252a 37%, #1b1c20 63%); background-size: 400% 100%; animation: skeleton 1.4s ease infinite; border-radius: 8px; }
@keyframes skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.screen-center { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--muted); text-align: center; padding: 24px; }

/* ---- catalog / player（fe-catalog）---- */
.player-root { position: absolute; inset: 0; background: #000; }
.player-root > video.player-image { display: block; background: #000; }
.player-time { position: absolute; right: 0; top: -22px; font-size: 10px; color: #fffc; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px #0008; pointer-events: none; }
.scrubber { touch-action: none; }
.scrubber:before { content: ''; position: absolute; inset: -10px 0; }
.locked-play { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #0007; border: 1px solid #ffffff2a; }
.locked-play svg { width: 26px !important; height: 26px !important; fill: none !important; stroke: #fff !important; stroke-width: 1.7 !important; }
.episodes-grid .ep-cell { position: relative; }
.episodes-grid .ep-cell.locked { color: #9a9ba3; }
.episodes-grid .ep-tag { position: absolute; top: 2px; right: 3px; font-size: 7px; line-height: 1; font-weight: 600; }
.episodes-grid .ep-tag.free { color: #7fd6a4; }
.episodes-grid .ep-tag.price { color: #e7c897; }
.episodes-grid .ep-tag.owned { color: #ff8b95; }
.episodes-grid .active .ep-tag { color: #fff; }
.episodes-grid .ep-lock { position: absolute; left: 3px; top: 2px; }
.episodes-grid .ep-lock svg { width: 9px; height: 9px; stroke-width: 2; }
.unlock-dialog .clip-end-primary:disabled { opacity: .6; }
.unlock-dialog .clip-end-topup > svg:first-child { width: 14px; height: 14px; }
.unlock-dialog .clip-end-primary + .clip-end-primary { margin-top: 10px; }
.unlock-dialog .clip-end-primary.unlock-secondary { background: transparent; color: #ebc38a; border-color: #ebc38a; }
.unlock-dialog .unlock-quota-out { color: #e7c897; font-size: 11px; margin: -4px 0 12px; }
.episodes-grid .ep-tag.vip { color: #ffcf7a; }
.episodes-grid .ep-vip { position: absolute; left: 3px; bottom: 2px; font-size: 6px; line-height: 1; font-weight: 700; color: #ffcf7a; }
.player-top .quota-left { font-size: 10px; font-weight: 600; color: #3a2817; background: #ebc38a; border-radius: 9px; padding: 2px 7px; line-height: 14px; }
/* 账号页补充（fe-account）：铃铛红点按未读显示；已登录时身份区右侧显示脱敏邮箱；工单会话。 */
.message-entry.is-read:after { display: none; }
.profile-signin-entry.profile-email { color: #b9bbc4; font-weight: 500; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.ticket-thread { padding: 0 16px 96px; }
.ticket-thread .support-message { margin-top: 14px; }
.ticket-meta { font-size: 10px; color: #6f727c; margin-top: 6px; }
.ticket-composer { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 25; padding: 10px 16px; background: linear-gradient(#101114ed, #101114 25%); border-top: 1px solid #ffffff09; }
.settings-danger { color: #ff7a85; }

/* 商城 / 结算（fe-commerce）：去掉原型状态栏留出的 48px；USDT 收款二维码与复制按钮；会员到期提示。 */
.vip-mode #screen { top: env(safe-area-inset-top, 0); }
.usdt-pay .usdt-copy-value { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.usdt-pay .usdt-copy-value button { flex-shrink: 0; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; border: 1px solid #b5894240; color: #e7c58a; }
.usdt-pay .usdt-copy-value button svg { width: 13px; height: 13px; stroke-width: 1.7; }
.usdt-pay .usdt-address-row > span { flex-shrink: 0; }
.usdt-pay .usdt-address { font-family: ui-monospace, Menlo, monospace; font-size: 9px; word-break: break-all; text-align: right; }
.usdt-pay .usdt-countdown { font-variant-numeric: tabular-nums; color: #ffdf98; }
.usdt-qr { display: grid; place-items: center; margin: 14px 0 0; }
.usdt-qr img { width: 150px; height: 150px; border-radius: 10px; border: 1px solid #b5894240; display: block; }
.checkout-status-message { font-size: 10px; color: #b09872; text-align: center; margin: 10px 0 0; }
.checkout-sheet .checkout-support { display: flex; justify-content: center; width: 100%; margin-top: 12px; }
.membership-vip-until { color: #e7c58a; }
/* 底栏已改为 60px + 安全区，feed 播放区跟随，避免与底栏之间留黑边。 */
.player-mode.feed-mode #screen { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }

/* ---- 消息中心（fe-inbox）---- */
.inbox-tabs { margin: 4px 16px 6px; gap: 14px; font-size: 12.5px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.inbox-tabs button { flex-shrink: 0; }
.inbox-tabs button { display: inline-flex; align-items: center; gap: 5px; }
.inbox-badge { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.inbox-toolbar { display: flex; justify-content: flex-end; padding: 8px 16px 0; }
.inbox-toolbar button { font-size: 11px; color: #a4a6af; }
.inbox-toolbar button:disabled { opacity: .5; }
.inbox-card .inbox-body { font-size: 12px; color: #b4b5bd; margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; }
.inbox-card.inbox-ended { opacity: .6; }
.inbox-icon img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.primary.inbox-secondary { background: #26272c; margin-top: 10px; }

/* ---- 评论弹层（fe-inbox）---- */
.comments-sheet { display: flex; flex-direction: column; max-height: 82%; }
.comments-sheet .comment-sort { margin-bottom: 6px; }
.comment-main { flex: 1; min-width: 0; }
.comment .comment-avatar img { width: 31px; height: 31px; border-radius: 50%; object-fit: cover; }
.comment-reply { margin: 12px 0 0; }
.comment-reply .comment-avatar { width: 24px; height: 24px; font-size: 10px; }
.comment-reply .comment-avatar img { width: 24px; height: 24px; }
.comment-replies { margin-top: 8px; padding-left: 4px; border-left: 1px solid var(--line); }
.comment-pending p { color: #b4b5bd; }
.comment-tag { margin-left: 6px; font-size: 9px; font-weight: 600; padding: 1px 5px; border-radius: 3px; vertical-align: middle; }
.comment-tag-pinned { background: #e5091422; color: #ff6a73; }
.comment-tag-pending { background: #3a3122; color: #e7c897; }
.comment-at { color: #7fa8ff; font-weight: 500; }
.comment small button { color: #999ca6; font-size: 10px; }
.comment-more { display: block; margin-top: 6px; font-size: 11px; color: #7fa8ff; }
.comment-like { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; color: #999ca6; align-self: flex-start; padding-top: 2px; }
.comment-like svg { width: 16px; height: 16px; }
.comment-like.active { color: #ff3042; }
.comment-like.active svg { fill: #ff3042; stroke: #ff3042; }
.comments-sheet .comment-form { flex-direction: column; gap: 6px; margin-top: auto; }
.comment-form-row { display: flex; gap: 9px; align-items: center; }
.comment-count { font-size: 10px; color: #797c86; font-variant-numeric: tabular-nums; }
.comment-count.over { color: #ff6a73; }
.comment-reply-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #c9cbd3; background: #292a30; border-radius: 12px; padding: 3px 8px; }
.comment-reply-chip svg { width: 12px; height: 12px; }
.player-side .comments svg { fill: #fff; }
.comments-sheet .comment-sort { position: sticky; top: -10px; z-index: 1; background: #18191d; padding-top: 4px; margin-top: -4px; }

/* emoji 选择器（客服会话、评论、反馈共用） */
.emoji-toggle { width: 30px; height: 30px; display: grid; place-items: center; font-size: 18px; line-height: 1; border-radius: 50%; flex-shrink: 0; }
.emoji-toggle.active { background: #292a30; }
.emoji-panel { background: #1f2025; border: 1px solid var(--line); border-radius: 12px; margin-top: 8px; padding: 8px; }
.emoji-tabs { display: flex; gap: 4px; margin-bottom: 6px; align-items: center; }
.emoji-tabs button { width: 32px; height: 28px; display: grid; place-items: center; font-size: 16px; line-height: 1; border-radius: 6px; color: #c9cbd3; }
.emoji-tabs button.active { background: #35363d; }
.emoji-tabs .emoji-close { margin-left: auto; font-size: 18px; color: #8c8f99; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-height: 168px; overflow-y: auto; scrollbar-width: none; }
.emoji-grid button { height: 36px; font-size: 22px; line-height: 1; border-radius: 6px; display: grid; place-items: center; }
.emoji-grid button:active { background: #35363d; }
@media (max-width: 360px) { .emoji-grid { grid-template-columns: repeat(7, 1fr); } }
.comment-form input, .support-user-bubble, .support-answer-bubble p, .comment p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Helvetica Neue", Arial, sans-serif; }
.feedback-message-box .emoji-toggle { position: absolute; right: 10px; bottom: 6px; }
.comment-form { flex-direction: column; }
.comment-form > .comment-form-row { width: 100%; }
#feedback-character-count { right: 48px; }