/* Auto-extracted from web/src/app/globals.css for front pages - 20260903 */

.page-content,
.page-content--flush {
  padding: 0;
  box-sizing: border-box;
}

.member-msg-title-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 3px;
  background: #dc2626;
  color: #fff;
  line-height: 1.3;
  vertical-align: middle;
}

.member-reject-alert {
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid #f5c2c7;
  background: #fff5f5;
}

.member-notify-panel {
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
}

.member-notify-panel-title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--foreground);
}

.member-notify-panel-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.member-notify-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 3px;
  border: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.5;
}

.member-notify-item strong {
  font-size: 13px;
}

.member-notify-item.is-ok {
  background: #ecfdf5;
  border-color: #a7f3d0;
}

.member-notify-item.is-ok strong { color: #047857; }

.member-notify-item.is-bad {
  background: #fef2f2;
  border-color: #fecaca;
}

.member-notify-item.is-bad strong { color: #b91c1c; }

.member-notify-item.is-warn {
  background: #fffbeb;
  border-color: #fde68a;
}

.member-notify-item.is-warn strong { color: #b45309; }

.member-notify-item.is-info {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.member-notify-item.is-info strong { color: #1d4ed8; }

.member-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 3px;
  background: #e53935;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  vertical-align: middle;
}

.member-msg-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.member-msg-item {
  border-radius: 3px;
  border: 1px solid var(--border);
  padding: 12px 14px;
  background: var(--background);
}

.member-msg-item.is-unread {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}

.member-msg-item.is-ok.is-unread { border-color: #6ee7b7; background: #ecfdf5; }

.member-msg-item.is-bad.is-unread { border-color: #fca5a5; background: #fef2f2; }

.member-msg-item.is-warn.is-unread { border-color: #fcd34d; background: #fffbeb; }

.member-msg-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.member-msg-title {
  margin: 0;
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.member-msg-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e53935;
  flex-shrink: 0;
}

.member-msg-time {
  font-size: 12px;
  color: var(--muted);
}

.member-msg-body {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  white-space: pre-wrap;
}

.member-msg-reason {
  color: var(--primary);
  font-weight: 700;
}

.member-reject-alert-title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: #b42318;
}

.member-reject-alert-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: #7a271a;
  line-height: 1.55;
}

.member-reject-alert-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  color: var(--primary);
  font-weight: 600;
}

.member-publish-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.member-publish-item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
}

.member-publish-main {
  min-width: 0;
  flex: 1;
}

.member-publish-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--foreground);
}

.member-publish-title:hover {
  color: var(--primary);
}

.member-publish-meta {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.member-publish-reject {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 3px;
  background: #fff5f5;
  border: 1px solid #f5c2c7;
  font-size: 13px;
  color: #b42318;
  line-height: 1.45;
}

.member-publish-side {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.member-publish-status {
  font-size: 12px;
  font-weight: 700;
}

.member-publish-status.is-ok {
  color: var(--primary);
}

.member-publish-status.is-reject {
  color: #b42318;
}

.member-publish-status.is-pending {
  color: var(--muted);
}

.page-title { font-size: 1.5rem; font-weight: 800; color: var(--foreground); }

.page-desc { color: var(--muted); font-size: 0.875rem; margin-top: 0.35rem; }

.section-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--foreground);
}

.section-head::before {
  content: "";
  display: block;
  width: 4px;
  height: 1.1rem;
  background: var(--primary);
  border-radius: 0;
  flex-shrink: 0;
}

.resource-list-grid {
  gap: var(--resource-list-gap, 16px);
}

.help-sidebar {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  position: sticky;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.help-sidebar-head {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, var(--primary-light) 0%, var(--card) 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  padding: 14px 14px 12px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--primary-dark);
}

.help-sidebar-head-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  background: var(--primary);
  color: #fff;
  flex-shrink: 0;
}

.help-sidebar-section-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 12px 14px 4px;
  background: var(--card);
}

.help-sidebar-section-title-text {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--foreground);
  line-height: 1.3;
}

.help-sidebar-section-title-line {
  display: block;
  width: 36px;
  height: 3px;
  border-radius: 3px;
  background: var(--primary);
}

.help-sidebar-block {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.help-sidebar-faq {
  padding: 0 0 8px;
  background: var(--card);
}

.help-sidebar-resources {
  padding: 0 0 8px;
  background: var(--card);
}

.help-sidebar-tips-block {
  background: var(--card);
}

.help-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 10px 0;
  margin: 0;
}

.help-sidebar-list a {
  display: block;
  min-width: 0;
  padding: 7px 10px;
  border-radius: var(--radius);
  font-size: 0.875rem;
  color: var(--foreground);
  border: 1px solid transparent;
  transition: all 0.15s;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.help-sidebar-list a:hover {
  background: var(--primary-light);
  border-color: color-mix(in srgb, var(--primary) 22%, transparent);
  color: var(--primary-dark);
}

.help-sidebar-list-arrow {
  color: var(--primary);
  font-size: 1rem;
  line-height: 1;
  opacity: 0.7;
}

.help-sidebar-empty {
  margin: 0;
  padding: 8px 6px;
  font-size: 0.8125rem;
  color: var(--muted);
}

.karaoke-sidebar-tips {
  padding: 4px 12px 12px;
  border-bottom: none;
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.karaoke-sidebar-tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--foreground);
  line-height: 1.55;
  padding: 0;
  position: static;
  opacity: 0.85;
}

.karaoke-sidebar-tip-text {
  color: inherit;
}

.karaoke-sidebar-tip::before {
  content: none;
}

.karaoke-sidebar-tip-num {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin-top: 1px;
}

.dark .help-sidebar {
  background: transparent;
  border: none;
}

.dark .help-sidebar-block {
  background: var(--card);
  border-color: var(--border);
}

.dark .help-sidebar-head {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, var(--card) 100%);
  color: var(--primary-dark);
}

.dark .karaoke-sidebar-tips,
.dark .help-sidebar-faq,
.dark .help-sidebar-resources,
.dark .help-sidebar-tips-block {
  background: var(--card);
}

.dark .help-sidebar-section-title {
  background: var(--card);
}

.dark .help-sidebar-section-title-text {
  color: var(--foreground);
}

.dark .karaoke-sidebar-tip,
.dark .karaoke-sidebar-tip-text {
  color: var(--muted);
  opacity: 1;
}

.dark .help-sidebar-list a {
  color: var(--foreground);
}

.dark .help-sidebar-list a:hover {
  color: var(--primary-dark);
  background: var(--primary-light);
}

.dark .karaoke-back-list {
  background: var(--card);
  color: var(--foreground);
  border-color: var(--border);
}

.dark .karaoke-back-list:hover {
  background: var(--primary-light);
  color: var(--primary-dark);
  border-color: var(--primary);
}

.dark .dl-bundle-unlocked {
  background: #141414;
  border-color: var(--border);
}

.dark .dl-bundle-admin-locked {
  background: #1a1010;
  border-color: #5c3030;
}

.dark .dl-link-card {
  background: #0a0a0a;
  border-color: var(--border);
}

.dark .dl-link-card-title,
.dark .dl-bundle-head-title,
.dark .dl-bundle-price {
  color: var(--foreground);
}

.dark .dl-bundle-hint,
.dark .dl-link-card-desc {
  color: var(--muted);
}

.dark .dl-link-card-code {
  color: var(--primary-dark);
}

.dark .dl-head-lock-btn {
  background: var(--card);
  color: var(--foreground);
  border-color: var(--border);
}

.dark .dl-guest-tip {
  color: var(--foreground);
}

.dark .dl-version-0 {
  color: #6ee7b7;
  background: rgba(0, 187, 97, 0.16);
}

.dark .dl-version-1 {
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.16);
}

.dark .dl-version-2 {
  color: #fdba74;
  background: rgba(234, 88, 12, 0.16);
}

.dark .dl-version-3 {
  color: #5eead4;
  background: rgba(15, 118, 110, 0.2);
}

.dark .dl-guest-points {
  color: #fb923c;
}

.karaoke-download-page {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: start;
  background: transparent;
  width: 100%;
  max-width: none;
  padding: 0 0 28px;
  box-sizing: border-box;
  font-size: 14px;
}

.karaoke-download-page .section-head,
.karaoke-download-page .karaoke-title,
.karaoke-download-page .karaoke-info-list-title,
.karaoke-download-page .help-sidebar-head,
.karaoke-download-page .changelog-section-head .section-head {
  font-size: var(--dl-section-title-size, 16px);
}

.karaoke-download-page .dl-bundle-head-title {
  font-size: var(--dl-bundle-title-size, 16px);
}

.karaoke-download-page .dl-link-card-title {
  font-size: var(--dl-link-title-size, 16px);
}

.karaoke-download-page .dl-bundle-price {
  font-size: var(--dl-bundle-price-size, 14px);
}

.karaoke-download-page .karaoke-sidebar-tip,
.karaoke-download-page .help-sidebar-list a,
.karaoke-download-page .karaoke-info-row,
.karaoke-download-page .karaoke-download-hint,
.karaoke-download-page .karaoke-admin-meta,
.karaoke-download-page .karaoke-meta-footer,
.karaoke-download-page .karaoke-notice-list,
.karaoke-download-page .karaoke-notice-list p,
.karaoke-download-page .dl-guest-tip,
.karaoke-download-page .dl-now-btn,
.karaoke-download-page .dl-version-badge,
.karaoke-download-page .dl-head-lock-btn,
.karaoke-download-page .dl-bundle-hint,
.karaoke-download-page .dl-link-card-code,
.karaoke-download-page .dl-copy-link-btn,
.karaoke-download-page .dl-download-btn,
.karaoke-download-page .karaoke-title-edit,
.karaoke-download-page .karaoke-video-notice,
.karaoke-download-page .btn {
  font-size: var(--dl-hint-font-size, 14px);
}

.karaoke-download-page .dl-link-card-desc {
  font-size: var(--dl-link-desc-size, 14px);
}

.karaoke-download-page .dl-download-btn,
.karaoke-download-page .dl-now-btn {
  font-size: var(--dl-btn-font-size, 14px);
}

.karaoke-download-page.sidebar-right {
  grid-template-columns: 1fr 240px;
}

.karaoke-download-page.sidebar-right .karaoke-download-sidebar { order: 2; }

.karaoke-download-sidebar {
  padding: 0;
}

.karaoke-download-page.sidebar-right .karaoke-download-sidebar {
  padding: 0;
}

.karaoke-download-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  min-width: 0;
}

.karaoke-download-page.sidebar-right .karaoke-download-main {
  padding: 0;
}

.karaoke-info-card {
  background: var(--card);
  border: none;
  border-radius: var(--radius);
  box-shadow: none;
  overflow: hidden;
}

.karaoke-video-block {
  width: var(--video-preview-width, 100%);
  max-width: 100%;
  margin-inline: auto;
}

.karaoke-video-top {
  width: 100%;
  background: #000;
}

.karaoke-video-responsive {
  position: relative;
  width: 100%;
  height: var(--video-preview-fixed-height, auto);
  aspect-ratio: var(--video-preview-aspect-ratio, 16 / 9);
  background: #000;
}

.karaoke-video-responsive iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.karaoke-video-empty {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #1a2e24, #0a1210);
  color: var(--muted);
  font-size: 0.875rem;
  text-align: center;
  padding: 20px;
}

.resource-media-placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: var(--cover-aspect-ratio, 16 / 9);
  overflow: hidden;
  border-radius: 0;
  background: #0a1210;
}

.resource-media-placeholder--emerald { background: #0a1210; }
.resource-media-placeholder--neon { background: #050714; }
.resource-media-placeholder--amber_vinyl { background: #2a160c; }
.resource-media-placeholder--stage_mic { background: #0c0b0a; }
.resource-media-placeholder--vinyl_screen { background: #0a0807; }
.resource-media-placeholder--karaoke_hud { background: #06120e; }

.resource-media-placeholder-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.resource-media-placeholder-label {
  position: absolute;
  left: 50%;
  bottom: 14%;
  transform: translateX(-50%);
  margin: 0;
  padding: 6px 14px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  backdrop-filter: blur(6px);
  white-space: nowrap;
}

.karaoke-video-notice {
  width: 100%;
  margin: 0;
  padding: 10px 14px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #e53935;
  text-align: center;
  background: #fff5f5;
  border-top: 1px solid #ffcdd2;
  box-sizing: border-box;
  white-space: pre-wrap;
  word-break: break-word;
}

.karaoke-video-fallback {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  background: var(--background);
  padding: 16px;
}

.karaoke-title-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}

.karaoke-title-toolbar .resource-group-back-btn {
  margin-left: 0;
}

.karaoke-title-block {
  display: block;
  padding: 8px 0 14px;
  border-bottom: none;
  background: transparent;
}

.karaoke-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
}

.karaoke-title-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.karaoke-back-list {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--foreground);
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  white-space: nowrap;
}

.karaoke-back-list:hover {
  border-color: var(--primary);
  color: var(--primary-dark);
  background: var(--primary-light);
}

.karaoke-title-edit {
  flex-shrink: 0;
  border-color: var(--primary) !important;
  color: var(--primary-dark) !important;
}

.karaoke-title-edit:hover {
  background: var(--primary-light) !important;
  color: var(--primary-dark) !important;
}

.karaoke-title {
  margin: 0;
  padding: 2px 0 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
  word-break: break-word;
  overflow-wrap: anywhere;
  color: var(--foreground);
}

.karaoke-title-underline {
  display: block;
  width: 100%;
  height: 1px;
  margin: 10px 0 10px;
  background: color-mix(in srgb, var(--border) 88%, transparent);
}

.karaoke-title-admin {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 0;
  font-size: 12px;
  line-height: 1.4;
  min-width: 0;
  overflow-x: auto;
}

.karaoke-title-admin .karaoke-admin-meta,
.karaoke-title-admin .resource-item-admin-btn,
.karaoke-title-admin .resource-item-admin-msg,
.karaoke-title-admin .resource-item-admin-move select {
  font-size: 12px;
}

.karaoke-download-page .karaoke-title-admin,
.karaoke-download-page .karaoke-title-admin .karaoke-admin-meta,
.karaoke-download-page .karaoke-title-admin .resource-item-admin-btn,
.karaoke-download-page .karaoke-title-admin .resource-item-admin-msg,
.karaoke-download-page .karaoke-title-admin .resource-item-admin-move select {
  font-size: 12px;
}

.karaoke-title-admin .karaoke-admin-meta {
  flex: 0 0 auto;
  white-space: nowrap;
}

.karaoke-title-admin .resource-item-admin {
  flex: 0 1 auto;
  min-width: 0;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px 12px;
}

.karaoke-title-admin .resource-item-admin-ops {
  flex-wrap: nowrap;
  gap: 4px 12px;
  white-space: nowrap;
}

.karaoke-title-admin .resource-item-admin-move {
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: 6px;
}

.karaoke-title-admin .resource-item-admin-move[hidden] {
  display: none !important;
}

.karaoke-title-admin .resource-item-admin-move select {
  min-width: 110px;
  max-width: 160px;
}

.karaoke-title-admin .resource-item-admin-msg {
  white-space: nowrap;
}

.karaoke-title-admin-line {
  display: none;
}

.karaoke-cover-image {
  aspect-ratio: var(--cover-aspect-ratio, 16 / 9);
  background: #000;
  overflow: hidden;
}

.karaoke-cover-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.karaoke-admin-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 20px;
  padding: 0;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: 0;
}

.changelog-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.changelog-section-head .section-head {
  margin-bottom: 0;
}

.changelog-modal {
  max-width: 480px;
}

.changelog-modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.changelog-modal-time {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--foreground);
}

.changelog-modal-time:focus,
.changelog-modal-text:focus {
  outline: none;
  border-color: var(--primary);
}

.changelog-modal-text {
  width: 100%;
  min-height: 140px;
  padding: 12px;
  font-size: 14px;
  line-height: 1.6;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--foreground);
  resize: vertical;
}

.karaoke-info-list {
  padding: 12px 2px 8px;
  border-bottom: none;
  background: transparent;
}

.karaoke-info-list-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--foreground);
}

.karaoke-info-list-title::before {
  content: "";
  display: block;
  width: 4px;
  height: 1.1rem;
  background: var(--primary);
  border-radius: 0;
  flex-shrink: 0;
}

.karaoke-info-rows {
  margin: 0;
}

.karaoke-info-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 8px 0;
  border-bottom: none;
  font-size: 0.875rem;
}

.karaoke-info-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.karaoke-info-html {
  font-size: inherit;
  line-height: 1.75;
  color: inherit;
}

.karaoke-info-intro-row dd {
  font-weight: 400;
}

.karaoke-info-html p {
  margin: 0.35em 0;
}

.karaoke-info-html p:first-child {
  margin-top: 0;
}

.karaoke-info-html p:last-child {
  margin-bottom: 0;
}

.karaoke-info-html ol,
.karaoke-info-html ul {
  margin: 0.35em 0;
  padding-left: 1.25em;
}

.karaoke-info-row dt {
  flex: 0 0 88px;
  color: var(--muted);
  font-weight: 500;
}

.karaoke-info-row dd {
  flex: 1;
  margin: 0;
  font-weight: 600;
  color: var(--foreground);
  word-break: break-word;
}

.karaoke-meta-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 12px 22px 16px;
  font-size: 0.8125rem;
  color: var(--muted);
  background: var(--card);
}

.karaoke-panel {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 8px 0 18px;
  box-shadow: none;
}

.karaoke-panel .section-head {
  margin-bottom: 12px;
}

.karaoke-download-hint {
  font-size: 0.8125rem;
  color: var(--muted);
  margin: -6px 0 16px;
  padding-left: 14px;
  border-left: 2px solid var(--primary);
}

.dl-bundle-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.dl-bundle {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}

.dl-bundle-guest {
  padding: 4px 0;
}

.dl-guest-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 16px;
  row-gap: 8px;
}

.dl-guest-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  flex-shrink: 0;
}

.dl-version-badge {
  display: inline-block;
  max-width: 160px;
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: var(--radius);
  border: none;
}

.dl-now-btn {
  min-width: 108px;
  height: 36px;
  padding: 0 18px;
  font-size: 0.875rem;
  font-weight: 700;
  box-shadow: none !important;
}

.dl-guest-tip {
  flex: 1 1 200px;
  margin: 0;
  font-size: 0.875rem;
  color: var(--foreground);
  line-height: 1.5;
  min-width: 0;
}

.dl-guest-points {
  color: #c2410c;
  font-weight: 700;
}

.dl-version-0 {
  color: #087a44;
  background: #e8faf1;
}

.dl-version-1 {
  color: #1d4ed8;
  background: #eff6ff;
}

.dl-version-2 {
  color: #c2410c;
  background: #fff7ed;
}

.dl-version-3 {
  color: #0f766e;
  background: #f0fdfa;
}

.dl-bundle-unlocked {
  background: color-mix(in srgb, var(--primary-light) 55%, var(--card));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px 18px;
}

.dl-bundle-admin-locked {
  background: #fff8f8;
  border-color: #fecaca;
}

.dl-locked-badge {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  padding: 2px 10px;
  border-radius: var(--radius);
  line-height: 1.5;
}

.dl-head-unlock-btn {
  border-color: #ef4444;
  color: #dc2626;
  background: #fef2f2;
}

.dl-head-unlock-btn:hover {
  border-color: #dc2626;
  color: #b91c1c;
  background: #fee2e2;
}

.dl-bundle-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.dl-bundle-head-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

@media (max-width: 720px) {
.resource-float-rail {
  top: auto;
  bottom: 16px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  flex-direction: row;
}

.karaoke-download-page,
  .karaoke-download-page.sidebar-right {
  padding: 8px 0 16px;
}

.dl-bundle-head {
  flex-wrap: wrap;
}

.dl-bundle-head-right {
  width: 100%;
  justify-content: space-between;
}
}

.dl-bundle-head-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.dl-bundle-head-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--foreground);
}

.dl-head-lock-btn {
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  font-size: 13px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: none;
}

.dl-head-lock-btn:hover {
  border-color: var(--primary);
  color: var(--primary-dark);
}

.dl-bundle-price {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--foreground);
  font-weight: 600;
  white-space: nowrap;
}

.dl-bundle-price em {
  font-style: normal;
  color: #ea580c;
  font-weight: 800;
}

.dl-bundle-hint {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.dl-bundle-nolink {
  margin: 0;
  padding: 12px 14px;
  border-radius: 3px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

.dl-link-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dl-link-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.dl-link-card-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 0;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.dl-link-card-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.dl-link-card-icon-svg-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  line-height: 0;
}

.dl-link-card-icon:has(.dl-link-card-icon-svg-wrap) {
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--border, #dde5e1) 80%, transparent);
  color: inherit;
  border-radius: 0;
}

.dl-link-card-icon-svg-wrap svg,
.dl-link-card-icon-svg {
  width: 36px !important;
  height: 36px !important;
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.dl-link-card-body {
  flex: 1;
  min-width: 0;
}

.dl-link-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--foreground);
  line-height: 1.4;
}

.dl-link-card-desc {
  margin-top: 4px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

.dl-link-card-code {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-dark);
}

.dl-link-card-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.dl-download-btn {
  min-width: 108px;
  height: 36px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: none !important;
}

.dl-copy-link-btn {
  border: none;
  background: none;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none;
}

.dl-copy-link-btn:hover {
  text-decoration: underline;
}

.dl-bundle-locked {
  padding: 4px 0;
}

.dl-now-btn-disabled {
  background: #d1d5db !important;
  border-color: #d1d5db !important;
  color: #9ca3af !important;
  cursor: not-allowed;
  box-shadow: none !important;
}

.dl-locked-tip {
  color: var(--foreground);
}

.dl-locked-admin {
  margin-top: 8px;
}

@media (max-width: 640px) {
.dl-guest-row {
  flex-direction: column;
  align-items: flex-start;
}

.dl-guest-tip {
  flex-basis: auto;
  width: 100%;
}
}

.changelog-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.changelog-timeline-item {
  position: relative;
  padding: 0 0 18px 22px;
}

.changelog-timeline-item:last-child {
  padding-bottom: 0;
}

.changelog-timeline-item::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 187, 97, 0.18);
  z-index: 1;
}

.changelog-timeline-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 18px;
  bottom: 0;
  width: 2px;
  background: #d8ebe2;
}

.changelog-timeline-date {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
  margin-bottom: 4px;
}

.changelog-timeline-content {
  font-size: 14px;
  color: var(--foreground);
  line-height: 1.55;
  word-break: break-word;
  padding-right: 36px;
  white-space: pre-wrap;
}

.changelog-content-list {
  margin: 0;
  padding: 0 36px 0 1.35rem;
  list-style: decimal;
  font-size: 14px;
  color: var(--foreground);
  line-height: 1.7;
  white-space: normal;
}

.changelog-content-list li {
  padding: 1px 0;
  word-break: break-word;
}

.changelog-item-actions {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 0.15s;
}

.changelog-timeline-item:hover .changelog-item-actions {
  opacity: 1;
}

.changelog-item-edit,
.changelog-item-delete {
  border: none;
  background: none;
  padding: 0;
  font-size: 12px;
  cursor: pointer;
}

.changelog-item-edit {
  color: var(--primary);
}

.changelog-item-delete {
  color: #dc2626;
}

.changelog-item-delete:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.changelog-empty {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.875rem;
  color: var(--muted);
  position: relative;
}

.changelog-empty::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
}

.karaoke-changelog-item {
  background: transparent;
  border-left: none;
  border-radius: 0;
  font-size: 0.875rem;
}

.karaoke-notice-list p {
  font-size: 0.875rem;
  line-height: 1.85;
  color: var(--muted);
  padding: 4px 0 4px 18px;
  position: relative;
}

.karaoke-notice-list p::before {
  content: "?";
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 700;
}

.karaoke-bundle-card {
  border: 1px solid rgba(0, 187, 97, 0.28) !important;
  border-radius: var(--radius);
  background: linear-gradient(to right, var(--card) 0%, rgba(0, 187, 97, 0.03) 100%);
  padding: 18px 20px !important;
  margin-bottom: 12px !important;
}

.karaoke-bundle-card .bundle-price {
  font-size: 1.625rem;
}

.karaoke-bundle-card .btn-buy {
  min-width: 108px;
  font-weight: 700;
}

.karaoke-download-section .bundle-card:last-child {
  margin-bottom: 0 !important;
}

.help-sidebar .download-ad-slot {
  margin-bottom: 0;
}

.help-sidebar-faq .download-ad-slot {
  margin-top: 0;
  margin-bottom: 0;
}

.karaoke-download-section > .download-ad-slot {
  margin-bottom: 12px;
}

.changelog-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.changelog-box .changelog-item {
  font-size: 0.875rem;
  padding: 2px 0;
  background: transparent;
  border-left: none;
  border-radius: 0;
  word-break: break-word;
}

.dark .karaoke-video-empty {
  background: linear-gradient(145deg, #1a1a1a, #000000);
}

.publish-page {
  max-width: 100%;
  padding: 0 0 8px;
}

.publish-tips-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-bottom: 8px;
  padding: 8px 10px;
  font-size: 0.75rem;
  color: var(--muted);
  background: var(--primary-light);
  border: 1px solid rgba(0, 187, 97, 0.15);
  border-radius: var(--radius);
}

.publish-tips-strip a {
  color: var(--primary-dark);
  font-weight: 600;
}

.publish-tips-sep {
  color: var(--muted);
}

.resource-publish-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  --publish-text-xs: 12px;
  --publish-text-sm: 12px;
  --publish-text-md: 13px;
  --publish-control-h: 30px;
}

.publish-form-topbar,
.publish-form-footbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 12px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.publish-form-footbar {
  justify-content: flex-end;
  padding-top: 16px;
  padding-bottom: 4px;
}

.publish-save-btn {
  padding: 0.5rem 1.35rem;
  font-size: var(--publish-text-sm);
  font-weight: 500;
}

.publish-form-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--foreground);
  line-height: 1.35;
}

.publish-form-subtitle {
  margin: 4px 0 0;
  font-size: var(--publish-text-xs);
  font-weight: 400;
  color: var(--muted);
  line-height: 1.45;
}

.publish-form-actions,
.publish-form-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.publish-form-msg {
  max-width: 280px;
  font-size: 0.8125rem;
  color: #e53935;
  text-align: right;
}

.publish-form-msg.is-ok {
  color: var(--primary-dark, #087a44);
}

.publish-success {
  max-width: 520px;
  margin: 24px auto;
  padding: 28px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  text-align: center;
}

.publish-success-title {
  margin: 0 0 10px;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary-dark, #087a44);
}

.publish-success-desc {
  margin: 0 0 8px;
  font-size: 15px;
  color: var(--foreground);
  line-height: 1.55;
}

.publish-success-desc strong {
  color: #b45309;
}

.publish-success-tip {
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.publish-success-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.publish-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(268px, 0.88fr);
  gap: 12px;
  align-items: start;
}

.publish-form-main {
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.publish-form-aside {
  position: sticky;
  top: 12px;
  min-width: 0;
}

.publish-aside-panel {
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.publish-aside-panel .publish-section-title {
  margin-bottom: 6px;
  font-size: 0.8125rem;
}

.publish-form-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.publish-section {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.publish-form-main .publish-section:last-child {
  border-bottom: none;
}

.publish-field-list {
  display: flex;
  flex-direction: column;
}

.publish-inline-field {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  min-width: 0;
}

.publish-field-list .publish-inline-field:last-child {
  border-bottom: none;
}

.publish-inline-field-full {
  grid-template-columns: 72px minmax(0, 1fr);
}

.publish-inline-field-stack {
  align-items: start;
  padding-top: 10px;
}

.publish-inline-field-stack .publish-inline-label {
  padding-top: 6px;
}

.publish-inline-label {
  font-size: var(--publish-text-xs);
  font-weight: 400;
  color: var(--muted);
  line-height: 1.3;
}

.publish-inline-field input,
.publish-inline-field select,
.publish-inline-field .field-value-input {
  min-width: 0;
}

.publish-inline-field .field-value-input {
  width: 100%;
}

.publish-inline-input {
  font-weight: 500;
}

.dark .publish-aside-panel {
  background: var(--card);
  border-color: var(--border);
}

.publish-section-title {
  margin: 0 0 8px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--foreground);
  display: flex;
  align-items: center;
  gap: 6px;
}

.publish-section-title::before {
  content: "";
  width: 3px;
  height: 12px;
  background: var(--primary);
  border-radius: 3px;
  flex-shrink: 0;
}

.publish-title-field {
  display: block;
  margin-bottom: 8px;
}

.publish-title-label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}

.publish-title-input {
  width: 100%;
  padding: 0.4rem 0.6rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.publish-basic-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 8px;
  align-items: end;
}

.publish-basic-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.publish-basic-item > span {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}

.publish-basic-item > span em {
  margin-left: 6px;
  font-size: 0.75rem;
  font-weight: 400;
  font-style: normal;
  color: var(--muted);
}

.resource-publish-form input,
.resource-publish-form select,
.resource-publish-form textarea {
  border-color: var(--border);
  background: color-mix(in srgb, var(--foreground) 4%, var(--card));
  color: var(--foreground);
  padding: 4px 8px;
  min-height: var(--publish-control-h, 30px);
  height: var(--publish-control-h, 30px);
  line-height: 1.3;
  font-size: var(--publish-text-sm);
  font-weight: 400;
  box-sizing: border-box;
}

.resource-publish-form textarea {
  height: auto;
  min-height: 64px;
  line-height: 1.45;
  padding: 6px 8px;
}

.resource-publish-form input::placeholder,
.resource-publish-form textarea::placeholder {
  color: var(--muted);
  opacity: 0.75;
}

.resource-publish-form input:focus,
.resource-publish-form select:focus,
.resource-publish-form textarea:focus {
  background: var(--card);
  border-color: var(--primary);
  color: var(--foreground);
}

.publish-form-aside .publish-bundle-list {
  gap: 8px;
}

.publish-form-aside .publish-aside-bundle {
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.publish-form-aside .publish-aside-bundle:first-child {
  padding-top: 0;
  border-top: none;
}

.publish-aside-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.publish-aside-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.publish-aside-inline-name {
  flex: 1 1 auto;
  min-width: 0;
}

.publish-aside-inline-sm {
  flex: 0 0 88px;
}

.publish-aside-inline-price {
  flex: 0 0 96px;
}

.publish-aside-inline-points {
  flex: 0 1 148px;
  min-width: 120px;
}

.publish-aside-inline > span {
  font-size: var(--publish-text-xs);
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.publish-form-aside .publish-aside-inline input,
.publish-form-aside .publish-aside-inline select {
  width: 100%;
  min-width: 0;
  padding: 0.3rem 0.45rem;
  font-size: var(--publish-text-sm);
  font-weight: 400;
}

.publish-form-aside .publish-aside-inline-points select {
  min-width: 88px;
}

.publish-form-aside .publish-bundle-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  font-size: var(--publish-text-xs);
  font-weight: 500;
  margin-bottom: 0;
  color: var(--muted);
  background: color-mix(in srgb, var(--foreground) 6%, var(--card));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.publish-form-aside .publish-meta-del {
  flex-shrink: 0;
  margin-left: auto;
  padding: 0.2rem 0.35rem;
  font-size: var(--publish-text-xs);
  font-weight: 400;
  margin-bottom: 0;
  line-height: 1.2;
}

.publish-form-aside .publish-th-code {
  width: 56px;
}

.publish-links-block {
  margin-top: 6px;
}

.publish-links-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: var(--publish-text-xs, 12px);
  color: var(--muted);
}

.publish-links-head > span:first-child {
  font-weight: 600;
  color: var(--foreground, var(--text));
}

.publish-links-hint {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.publish-links-textarea {
  display: block;
  width: 100%;
  min-height: 88px;
  resize: vertical;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  font: inherit;
  font-size: var(--publish-text-sm, 13px);
  line-height: 1.55;
  color: var(--foreground, var(--text));
}

.publish-links-textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.publish-links-textarea::placeholder {
  color: #94a3b8;
}

.publish-form-aside .publish-data-table-wrap {
  border-color: var(--border);
}

.publish-form-aside .publish-data-table th {
  padding: 4px 6px;
  font-size: var(--publish-text-xs);
  font-weight: 400;
}

.publish-form-aside .publish-data-table td {
  padding: 2px 4px;
}

.publish-form-aside .publish-data-table input {
  padding: 0.25rem 0.35rem;
  font-size: var(--publish-text-sm);
  font-weight: 400;
}

.publish-form-aside .publish-mini-btn {
  margin-top: 6px;
}

.publish-mini-btn {
  margin-top: 6px;
  padding: 0.22rem 0.55rem;
  font-size: var(--publish-text-xs);
  font-weight: 400;
  line-height: 1.3;
  border-radius: var(--radius);
  color: #fff;
}

.publish-mini-btn:hover {
  color: #fff;
}

.publish-mini-btn-block {
  display: block;
  width: 100%;
  margin-top: 8px;
  text-align: center;
}

.publish-kv-item {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  min-height: 36px;
}

.publish-kv-item:nth-child(2n) {
  border-right: none;
}

.publish-kv-item:nth-last-child(-n+2) {
  border-bottom: none;
}

.publish-kv-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.3;
}

.publish-kv-item input,
.publish-kv-item select {
  padding: 0.35rem 0.5rem;
  font-size: 0.8125rem;
  border: none;
  background: transparent;
  color: var(--foreground);
  box-shadow: none;
}

.publish-kv-item input:focus,
.publish-kv-item select:focus {
  background: var(--card);
  border: 1px solid var(--primary);
  box-shadow: 0 0 0 2px rgba(0, 187, 97, 0.12);
  color: var(--foreground);
}

.publish-kv-item .field-value-input {
  gap: 4px;
}

.publish-bundle-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.publish-bundle-block {
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.publish-bundle-block:first-child {
  border-top: none;
  padding-top: 0;
}

.publish-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 8px;
}

.publish-bundle-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary-dark);
  background: var(--primary-light);
  border-radius: var(--radius);
  margin-bottom: 1px;
}

.publish-meta-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 120px;
}

.publish-meta-field-sm {
  flex: 0 0 88px;
  min-width: 72px;
}

.publish-meta-field > span {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}

.publish-meta-field input {
  padding: 0.45rem 0.55rem;
  font-size: 0.8125rem;
}

.publish-meta-del {
  flex-shrink: 0;
  padding: 0.45rem 0.5rem;
  font-size: 0.75rem;
  color: #e53935;
  background: none;
  border: none;
  cursor: pointer;
  margin-bottom: 2px;
}

.publish-meta-del:hover {
  text-decoration: underline;
}

.publish-data-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: color-mix(in srgb, var(--foreground) 4%, var(--card));
}

.publish-data-table {
  width: 100%;
  border-collapse: collapse;
}

.publish-data-table th {
  padding: 6px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  text-align: left;
  background: color-mix(in srgb, var(--foreground) 6%, var(--card));
  border-bottom: 1px solid var(--border);
}

.publish-data-table td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
}

.publish-data-table tr:last-child td {
  border-bottom: none;
}

.publish-data-table input {
  width: 100%;
  padding: 0.4rem 0.5rem;
  font-size: 0.8125rem;
  border: none;
  background: transparent;
  color: var(--foreground);
  box-shadow: none;
}

.publish-data-table input::placeholder {
  color: var(--muted);
  opacity: 0.75;
}

.publish-data-table input:focus {
  background: var(--card);
  border: 1px solid var(--primary);
  box-shadow: 0 0 0 2px rgba(0, 187, 97, 0.12);
  color: var(--foreground);
}

.resource-publish-form input:read-only {
  color: var(--muted);
  cursor: default;
}

.resource-publish-form select option {
  background: var(--card);
  color: var(--foreground);
}

.dark .publish-tips-strip {
  border-color: var(--border);
}

.dark .publish-form-msg {
  color: #f87171;
}

.publish-th-code {
  width: 110px;
}

.publish-extra-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.publish-extra-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.publish-extra-row > span:not(.publish-field-hint) {
  font-size: var(--publish-text-xs);
  font-weight: 400;
  color: var(--muted);
}

.resource-publish-form .rich-text-editor {
  border: 1px solid var(--border, #dde5e1);
  border-radius: 3px;
  overflow: visible;
  background: #fff;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.resource-publish-form .rich-text-editor-toolbar {
  padding: 8px 10px;
  gap: 6px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border, #e8eeeb);
  background: #f7faf8;
  border-radius: 3px 3px 0 0;
}

.resource-publish-form .rich-text-toolbar-btn {
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #dce5e0;
  border-radius: 3px;
  background: #fff;
  color: #33403a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}

.resource-publish-form .rich-text-toolbar-btn:hover {
  background: color-mix(in srgb, var(--primary) 10%, #fff);
  border-color: color-mix(in srgb, var(--primary) 35%, #dce5e0);
  color: var(--primary);
}

.resource-publish-form .rich-text-color-wrap { position: relative; display: inline-flex; }
.resource-publish-form .rich-text-color-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 80;
  width: 220px;
  padding: 10px;
  border: 1px solid #dce5e0;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}
.resource-publish-form .rich-text-color-panel.is-open { display: block; }
.resource-publish-form .rich-text-color-title {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  margin: 0 0 8px;
}
.resource-publish-form .rich-text-color-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 5px;
}
.resource-publish-form .rich-text-color-swatch {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 3px;
  padding: 0;
  cursor: pointer;
}
.resource-publish-form .rich-text-color-custom {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #eef2f0;
  font-size: 12px;
  color: #64748b;
}
.resource-publish-form .rich-text-color-custom input[type="color"] {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #d7e0db;
  border-radius: 3px;
  cursor: pointer;
}
.resource-publish-form .rich-text-color-clear {
  margin-left: auto;
  height: 28px;
  padding: 0 10px;
  border: 1px solid #dce5e0;
  border-radius: 3px;
  background: #f8faf9;
  color: #475569;
  font-size: 12px;
  cursor: pointer;
}

.resource-publish-form .rich-text-editor-content {
  padding: 12px 14px;
  font-size: var(--publish-text-sm);
  line-height: 1.55;
  border: 0;
  outline: none;
  box-shadow: none;
}

.publish-cover-inline {
  display: flex;
  gap: 8px;
  align-items: center;
}

.publish-cover-inline > input {
  flex: 1;
  min-width: 0;
}

.publish-cover-upload {
  flex-shrink: 0;
  white-space: nowrap;
  writing-mode: horizontal-tb;
  min-width: 52px;
}

@media (max-width: 768px) {
.publish-form-topbar,
  .publish-form-footbar {
  flex-direction: column;
  align-items: stretch;
}

.publish-form-actions,
  .publish-form-topbar-actions {
  justify-content: space-between;
}

.publish-form-msg {
  max-width: none;
  flex: 1;
  text-align: left;
}

.publish-form-layout {
  grid-template-columns: 1fr;
}

.publish-form-aside {
  position: static;
}

.publish-inline-field,
  .publish-inline-field-full {
  grid-template-columns: 64px minmax(0, 1fr);
}

.publish-aside-meta-row {
  flex-wrap: wrap;
  gap: 6px;
}

.publish-aside-inline-sm {
  flex: 1 1 88px;
  max-width: 120px;
}

.publish-aside-inline-price {
  flex: 0 1 96px;
}

.publish-aside-inline-points {
  flex: 1 1 140px;
  max-width: none;
  min-width: 120px;
}

.publish-aside-meta-row .publish-meta-del {
  margin-left: auto;
}

.publish-basic-row,
  .publish-kv-grid {
  grid-template-columns: 1fr;
}

.publish-kv-item {
  grid-template-columns: 72px minmax(0, 1fr);
  border-right: none;
}

.publish-kv-item:nth-last-child(-n+2) {
  border-bottom: 1px solid #eef1ef;
}

.publish-kv-item:last-child {
  border-bottom: none;
}

.publish-meta-field-sm {
  flex: 1;
}

.publish-th-code {
  width: 90px;
}
}

.member-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
  align-items: start;
}

.member-sidebar {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 12px;
}

.member-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  font-weight: 800;
}

.member-profile-card {
  padding: 20px 22px;
}

.member-profile-title {
  margin: 0 0 16px;
  font-size: 1.05rem;
  font-weight: 700;
}

.member-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
  margin: 0;
}

.member-profile-item dt {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--muted);
}

.member-profile-item dd {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--foreground);
  word-break: break-all;
}

.member-profile-points {
  color: var(--primary-dark);
  font-size: 1.05rem;
}

.member-profile-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.member-profile-msg {
  font-size: 13px;
}

.member-profile-msg.is-ok {
  color: #047857;
}

.member-profile-msg.is-error {
  color: #b91c1c;
}

.member-profile-pwd-form {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--primary-light) 18%, var(--card));
  display: grid;
  gap: 12px;
  max-width: 420px;
}

.member-profile-pwd-field {
  display: grid;
  gap: 6px;
}

.member-profile-pwd-field span {
  font-size: 13px;
  color: var(--muted);
}

.member-profile-pwd-field input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  font-size: 14px;
}

.member-profile-pwd-hint {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}

.member-profile-pwd-foot {
  display: flex;
  justify-content: flex-start;
}

@media (max-width: 640px) {
.member-profile-grid {
  grid-template-columns: 1fr;
}
}

.sidebar-nav a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius);
  font-size: 0.875rem;
  transition: all 0.15s;
}

.sidebar-nav a:hover,
.sidebar-nav a.active,
.sidebar-nav a.member-nav-active {
  background: var(--primary-light);
  color: var(--primary-dark);
  font-weight: 600;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-box {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 480px;
  overflow: hidden;
}

.modal-body { padding: 1.5rem; }

.admin-panel label.block > input,
.admin-panel label.block > textarea,
.admin-panel label.block > select,
.admin-panel .form-field-control > input,
.admin-panel .form-field-control > textarea,
.admin-panel .form-field-control > select,
.admin-panel .form-field-control > .publish-cover-inline,
.admin-panel .rich-text-editor,
.admin-card .rich-text-editor {
  width: 100%;
}

.admin-panel .form-field-control > .publish-cover-inline,
.admin-panel .form-field-control > .theme-color-picker,
.admin-panel .form-field-control > .admin-color-row,
.admin-edit-modal .form-field-control > .rich-text-editor,
.admin-panel .form-field-control > .rich-text-editor {
  width: 100%;
  max-width: var(--admin-form-input-max);
}

.admin-modal-overlay .modal-box.admin-edit-modal,
.admin-modal-overlay .modal-box.admin-edit-modal-wide {
  width: min(1000px, calc(100vw - 48px));
  max-width: min(1000px, calc(100vw - 48px));
}

.prose h1, .prose h2, .prose h3 { font-weight: 700; margin: 1rem 0 0.5rem; }

.prose p { line-height: 1.8; margin: 0.5rem 0; }

.prose ol, .prose ul { margin: 0.5rem 0 0.5rem 1.25rem; line-height: 1.8; }

.prose li { margin: 0.25rem 0; }

.legal-page-body.prose p {
  line-height: 1.85;
  margin: 0.85rem 0;
  color: color-mix(in srgb, var(--foreground) 92%, var(--muted));
}

.legal-page-body.prose p:first-child {
  margin-top: 0;
}

@media (max-width: 900px) {
.karaoke-download-page,
  .karaoke-download-page.sidebar-right {
  grid-template-columns: 1fr;
  padding: 0 0 16px;
}

.karaoke-download-sidebar,
  .karaoke-download-page.sidebar-right .karaoke-download-sidebar {
  padding: 0;
}

.karaoke-download-main,
  .karaoke-download-page.sidebar-right .karaoke-download-main {
  padding: 0;
}

.karaoke-spec-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.karaoke-spec-item:nth-child(3n) {
  border-right: 1px solid var(--border);
}

.karaoke-spec-item:nth-child(2n) {
  border-right: none;
}

.download-page-layout,
  .download-page-layout.sidebar-right {
  grid-template-columns: 1fr;
}

.download-sidebar,
  .download-page-layout.sidebar-right .download-sidebar {
  padding: 8px 2px 0;
}

.download-content,
  .download-page-layout.sidebar-right .download-content {
  padding: 8px 2px 16px;
}

.resource-cover-img {
  height: 160px;
}

.recharge-layout,
  .help-request-layout,
  .invite-grid,
  .member-layout {
  grid-template-columns: 1fr;
}

.package-grid {
  grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 768px) {
:root {
  --site-padding-x: 2px;
  --site-padding-y: 12px;
  --site-padding-bottom: 20px;
}

.site-header-top {
  column-gap: 8px;
  padding: 8px 2px;
  /* ? site-chrome ???logo+???????????? */
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  grid-template-areas:
  "logo actions"
  "search search";
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
}

.header-logo {
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.header-actions {
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

.header-logo-text {
  font-size: 0.875rem;
}

.header-logo {
  min-height: 0;
}

.header-logo-img {
  width: auto !important;
  height: auto !important;
  max-width: min(var(--logo-w, 120px), 50vw) !important;
  max-height: calc(var(--logo-h, 40px) * 0.72) !important;
  object-fit: contain !important;
  object-position: left center !important;
}

.header-logo-icon {
  width: 32px;
  height: 32px;
  font-size: 0.8125rem;
}

.header-actions {
  gap: 2px;
}

.header-user-menu {
  gap: 4px;
}

.header-points,
  .header-msg-link,
  .header-username-text {
  font-size: 12px;
}

.header-username-text {
  max-width: 56px;
}

.header-theme-btn {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.header-search-form {
  height: 36px;
}

.site-header-nav {
  padding: 0 2px;
}

.site-header-nav-measure {
  padding: 0 2px;
}

.nav-more {
  margin-left: 0;
}

.nav-more-dropdown {
  right: 0;
  left: auto;
}

.banner-slide img,
  .banner-carousel-slide img {
  object-fit: cover;
  object-position: center;
}

.admin-review-alert-inner {
  padding: 8px var(--site-padding-x);
}

.package-grid {
  grid-template-columns: 1fr;
}

.resource-detail-banner {
  height: auto;
  aspect-ratio: 1280 / 300;
}

.karaoke-title {
  font-size: 1.2rem;
}

.karaoke-title-block {
  flex-wrap: wrap; gap: 10px;
}

.karaoke-title-row {
  align-items: center;
  gap: 10px;
}

.karaoke-title-toolbar .resource-group-back-btn {
  padding: 4px 10px;
  font-size: 12px;
}

/* ??????? / ??????????? */
  .karaoke-admin-meta,
  .karaoke-admin-meta-author,
  .karaoke-admin-meta-time {
  display: none !important;
}

.karaoke-title-admin .resource-item-admin-ops,
  .resource-item-admin-ops {
  flex-wrap: wrap;
  row-gap: 6px;
  max-width: 100%;
}

.karaoke-title-admin {
  overflow-x: hidden;
  max-width: 100%;
  min-width: 0;
}

.karaoke-spec-grid {
  grid-template-columns: 1fr;
}

.karaoke-spec-item {
  border-right: none !important;
}

.feature-grid {
  grid-template-columns: 1fr;
}

.resource-group-list--columns {
  grid-template-columns: 1fr;
}

.karaoke-download-page,
  .karaoke-download-page.sidebar-right {
  grid-template-columns: 1fr;
  padding: 8px 0 14px;
  gap: 12px;
}

.karaoke-download-sidebar {
  order: 2;
}

.dl-bundle-unlocked {
  padding: 12px 8px;
}

.dl-bundle-head {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.dl-bundle-head-right {
  width: 100%;
  justify-content: space-between;
}

.dl-link-card {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-areas:
  "icon body"
  "actions actions";
  gap: 10px 12px;
  padding: 12px;
  align-items: start;
}

.dl-link-card-icon {
  grid-area: icon;
  width: 36px;
  height: 36px;
  border-radius: 0;
}

.dl-link-card-icon svg {
  width: 20px;
  height: 20px;
}

.dl-link-card-icon-svg-wrap {
  width: 36px;
  height: 36px;
}

.dl-link-card-icon-svg-wrap svg,
.dl-link-card-icon-svg {
  width: 36px !important;
  height: 36px !important;
}

.dl-link-card-body {
  grid-area: body;
  min-width: 0;
}

.dl-link-card-title {
  font-size: 15px;
}

.dl-link-card-code {
  font-size: 13px;
  margin-top: 4px;
}

.dl-link-card-actions {
  grid-area: actions;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.dl-download-btn {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 12px;
  font-size: 13px;
}

.dl-copy-link-btn {
  flex-shrink: 0;
  font-size: 12px;
  padding: 0 2px;
}

.resource-cat-bar {
  flex-direction: column;
  align-items: stretch;
}

.resource-cat-publish-btn {
  width: 100%;
}

.resource-bulk-toolbar {
  padding: 8px 10px;
}

.resource-bulk-toolbar-main {
  gap: 6px;
}

.resource-bulk-delete-btn {
  margin-left: 0;
  width: 100%;
  justify-content: center;
}

.resource-bulk-dropdown-menu {
  left: 0;
  right: auto;
  max-width: calc(100vw - 24px);
}

.resource-bulk-select,
  .resource-bulk-points-input {
  flex: 1;
  min-width: 0;
}

.resource-group-solo-head-top {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.resource-category-solo-actions {
  flex-wrap: wrap;
}

.resource-category-solo-actions-end {
  width: 100%;
  justify-content: flex-end;
  margin-left: 0;
}

.resource-bulk-toolbar.resource-bulk-toolbar--compact {
  flex: 1 1 100%;
}

.resource-bulk-toolbar.resource-bulk-toolbar--compact .resource-bulk-toolbar-main {
  flex-wrap: wrap;
}

.resource-category-solo-actions .resource-group-back-btn {
  margin-left: 0;
}

.resource-list-pagination {
  flex-direction: column;
  align-items: stretch;
}

.resource-list-pagination-links {
  justify-content: center;
}

.resource-bulk-select {
  flex: 1 1 100%;
  min-width: 0;
}

.resource-bulk-move-btn {
  flex: 1 1 auto;
}

.resource-group-item {
  padding: 10px 8px;
}

.resource-group-item--selectable {
  padding-left: 6px;
}

.site-footer-main {
  padding: 22px var(--site-padding-x) 16px;
  gap: 16px;
}

.site-footer-nav {
  width: 100%;
}

.site-footer-bottom {
  padding: 12px var(--site-padding-x) 16px;
}

.page-hero {
  padding: 16px 8px;
}

.search-page {
  gap: 12px;
}

.search-tips-panel {
  padding: 12px 10px;
}

.karaoke-info-row dt {
  flex: 0 0 72px;
}

.download-content,
  .download-page-layout.sidebar-right .download-content,
  .download-sidebar,
  .download-page-layout.sidebar-right .download-sidebar {
  padding-left: 2px;
  padding-right: 2px;
}
}

/* Logo ????????768 ??????? */
@media (max-width: 480px) {
.header-logo-img {
  max-width: min(var(--logo-w, 120px), 46vw) !important;
  max-height: calc(var(--logo-h, 40px) * 0.58) !important;
}

.header-logo-text {
  font-size: 0.8125rem;
}

.header-logo-icon {
  width: 28px;
  height: 28px;
  font-size: 0.75rem;
}
}

@media (max-width: 400px) {
.header-logo-img {
  width: auto !important;
  height: auto !important;
  max-width: min(var(--logo-w, 120px), 42vw) !important;
  max-height: calc(var(--logo-h, 40px) * 0.48) !important;
}
}

.section-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.section-head-row .section-head {
  margin-bottom: 0;
}

.section-head-link {
  font-size: 0.8125rem;
  color: var(--primary-dark);
  font-weight: 600;
}

.resource-group-list {
  display: flex;
  flex-direction: column;
  gap: var(--resource-list-gap, 12px);
}

.resource-group-list--columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 40px;
  align-items: start;
}

.resource-group-list--solo {
  gap: 0;
}

.resource-group {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.resource-group--clean {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.resource-group--clean .resource-group-items {
  flex: 1;
}

.resource-group-clean-head {
  margin-bottom: 12px;
  padding: 0 2px;
}

.resource-group-clean-head--solo {
  display: block;
  margin-bottom: 14px;
}

.resource-group-solo-head {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

.resource-group-solo-head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.resource-category-solo-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
}

.resource-category-solo-actions-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}

.resource-category-publish-btn,
.resource-category-solo-actions .resource-group-back-btn {
  font-size: 14px;
}

.resource-category-publish-btn {
  flex-shrink: 0;
  height: 34px;
  padding: 0 14px;
}

.resource-category-solo-actions .resource-group-back-btn {
  margin-left: 0;
  flex-shrink: 0;
}

.resource-category-solo-foot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

.resource-category-solo-foot .resource-category-solo-actions {
  width: 100%;
  margin-top: 0;
}

.resource-group-back-btn {
  flex-shrink: 0;
  align-self: center;
  height: 34px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
}

.resource-group-desc {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  white-space: pre-wrap;
}

.resource-pin-icon {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  color: #f59e0b;
  vertical-align: -2px;
  flex-shrink: 0;
}

.resource-group-item--highlighted {
  background: color-mix(in srgb, var(--primary-light) 35%, transparent);
}

.resource-list-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

.resource-list-pagination-meta {
  font-size: 13px;
  color: var(--muted);
}

.resource-list-pagination-links {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.resource-list-pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 32px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all 0.15s ease;
}

.resource-list-pagination-btn:hover {
  border-color: var(--primary);
  color: var(--primary-dark);
}

.resource-list-pagination-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.resource-group-clean-title-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-width: 100%;
  color: inherit;
}

.resource-group-clean-title-line {
  display: block;
  width: 36px;
  height: 3px;
  border-radius: 3px;
  background: var(--primary);
  flex-shrink: 0;
}

.resource-group-clean-title,
.resource-group-clean-title-static {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: #111;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-font-smoothing: antialiased;
}

.dark .resource-group-clean-title,
.dark .resource-group-clean-title-static {
  color: var(--foreground);
}

.resource-group-clean-title-wrap:hover .resource-group-clean-title {
  color: var(--primary-dark);
}

.resource-rank {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 16px;
  width: auto;
  height: 16px;
  padding: 0 3px;
  font-size: 12px;
  font-weight: normal;
  line-height: 1;
  color: #fff;
  background: var(--primary);
  border-radius: 2px;
  font-variant-numeric: tabular-nums;
}

.resource-group-item--ranked {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.resource-group-item--ranked .resource-group-item-main {
  min-width: 0;
  flex: 1;
}

.resource-group-item-body {
  min-width: 0;
  flex: 1;
}

.resource-group--clean .resource-group-item {
  gap: 8px;
  padding: 6px 4px;
  border-bottom: none;
  border-radius: 3px;
  transition: background 0.15s ease;
}

.resource-group--clean .resource-group-item-title {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

.resource-group--clean .resource-group-item:hover {
  background: color-mix(in srgb, var(--primary-light) 55%, transparent);
}

.resource-group--clean .resource-group-item-link:hover .resource-group-item-title {
  color: var(--primary-dark);
}

.resource-group-list--solo .resource-group-clean-title-static {
  font-size: 23px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #111;
}

.dark .resource-group-list--solo .resource-group-clean-title-static {
  color: var(--foreground);
}

.resource-group-list--solo .resource-group--clean .resource-group-item {
  gap: 12px;
  padding: 14px 10px;
  border-radius: 3px;
  min-height: 52px;
}

.resource-group-list--solo .resource-group--clean .resource-group-item-title {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.75;
}

.resource-group-list--solo .resource-rank {
  /* 分区详情列表不显示序号；保留选择器以免旧缓存样式异常 */
  display: none;
}

.dark .resource-group--clean .resource-group-item:hover {
  background: rgba(0, 187, 97, 0.08);
}

.resource-group-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(180deg, var(--primary-light), var(--card));
  border-bottom: 1px solid var(--border);
}

.resource-group-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--primary-dark);
}

.resource-group-count {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.resource-group-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.resource-group-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 2px;
  border-bottom: 1px solid var(--border);
  transition: color 0.15s;
}

.resource-group-item-link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.resource-group-item--selectable {
  padding-left: 12px;
}

.resource-group-item-check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.resource-group-item-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--primary);
}

.resource-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.resource-group-items li:last-child .resource-group-item {
  border-bottom: none;
}

.resource-group-item:hover {
  background: transparent;
}

.resource-group-item-title {
  display: flex;
  align-items: center;
  min-width: 0;
  font-size: var(--resource-list-title-size, 14px);
  font-weight: var(--resource-list-title-weight, 600);
  color: var(--foreground);
  line-height: 1.4;
}

.resource-group-item-title-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

.resource-group-more {
  padding: 8px 16px 12px;
  border-top: 1px dashed var(--border);
  font-size: 12px;
}

.resource-group-more a {
  color: var(--primary-dark);
  font-weight: 600;
}

.resource-group-empty {
  padding: 28px;
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted);
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

@media (max-width: 1024px) {
.resource-group-list--columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 768px) {
.resource-group-list--columns {
  grid-template-columns: 1fr;
}
}

.member-account-actions {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.member-account-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  border: none;
  background: none;
  border-radius: var(--radius);
  color: var(--foreground);
  cursor: pointer;
}

.member-account-btn:hover {
  background: var(--primary-light);
  color: var(--primary-dark);
}

.member-account-btn.danger {
  color: #c62828;
}

input, textarea, select, button, .btn, .site-card, .bundle-card, .help-sidebar,
.modal-box, .resource-card, .hero-section,
.download-section, .recharge-panel, .feature-card {
  border-radius: var(--radius) !important;
}

.resource-group-desc--rich {
  white-space: normal;
}

.resource-group-desc--rich p {
  margin: 0.35em 0;
}

.btp-page {
  --btp-accent: var(--primary);
  --btp-accent-hover: var(--primary-hover);
  --btp-accent-light: var(--primary-light);
  --btp-accent-dark: var(--primary-dark);
  --btp-border: #e8ecf0;
  --btp-border-strong: #e2e8f0;
  --btp-text: var(--foreground);
  --btp-text-strong: #0f172a;
  --btp-muted: #475569;
  --btp-surface: #f8fafc;
  --btp-surface-border: #cbd5e1;
  --btp-modal-bg: var(--card);
  --btp-modal-text: var(--foreground);
  --btp-radio-border: #c4c4c4;
  max-width: 1280px;
  margin: 0 auto 48px;
  padding: 12px 14px 32px;
  font-size: 15px;
  color: var(--btp-text);
  line-height: 1.5;
  box-sizing: border-box;
}

.btp-page *,
.btp-page *::before,
.btp-page *::after {
  box-sizing: border-box;
}

.btp-page a,
.btp-page a:hover,
.btp-page a:focus {
  text-decoration: none;
  color: var(--btp-accent-dark);
}

.btp-sheet {
  overflow: hidden;
  margin-bottom: 20px;
}

.btp-sheet-row {
  display: grid;
  grid-template-columns: minmax(7.5em, 9.5em) 1fr;
  gap: 14px 20px;
  align-items: start;
  padding: 22px 24px;
}

.btp-sheet-row--pack {
  align-items: start;
}

.btp-sheet-row--pack .btp-sheet-label {
  padding-top: 6px;
}

.btp-sheet-row--balance {
  align-items: center;
}

.btp-sheet-row--history .btp-sheet-label,
.btp-sheet-row--tips .btp-sheet-label {
  padding-top: 6px;
}

.btp-sheet-label {
  text-align: right;
  color: var(--btp-muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  min-width: 0;
  padding-top: 2px;
}

.btp-sheet-body {
  min-width: 0;
}

.btp-balance-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.btp-balance-num {
  font-size: 14px;
  font-weight: 700;
  color: var(--btp-text-strong);
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.btp-balance-unit {
  font-size: 14px;
  font-weight: 700;
  color: var(--btp-accent);
  line-height: 1.35;
}

.btp-ctype-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.btp-ctype-card {
  display: block;
  margin: 0;
  cursor: default;
  border-radius: 3px;
  border: none;
  background: transparent;
}

.btp-ctype-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.btp-ctype-card__body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 100%;
}

.btp-ctype-card__radio {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  border-radius: 50%;
  border: 1px solid var(--btp-accent);
  background: var(--btp-accent);
  position: relative;
}

.btp-ctype-card__text {
  min-width: 0;
  flex: 1;
}

.btp-ctype-name-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  line-height: 1.45;
}

.btp-ctype-name {
  display: inline;
  font-weight: 700;
  font-size: 15px;
  color: var(--btp-accent);
  line-height: 1.35;
}

.btp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px;
}

.btp-pack {
  position: relative;
  border-radius: 3px;
  border: 1px solid var(--btp-border-strong);
  min-height: 86px;
  padding: 0;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.15s ease;
  background: transparent;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.btp-pack:hover {
  border-color: var(--btp-muted);
  transform: translateY(-1px);
}

.btp-pack-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}

.btp-pack.is-checked,
.btp-pack:has(.btp-pack-radio:checked) {
  border-color: var(--btp-accent);
  box-shadow: none;
  background: transparent;
}

.btp-pack-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
}

.btp-pack-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 8px 8px;
  padding-bottom: 12px;
}

.btp-pack-main {
  font-size: 17px;
  font-weight: 800;
  color: var(--btp-accent);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.btp-pack-ctype {
  color: var(--btp-accent);
  font-weight: 700;
}

.btp-pack-yuan {
  font-size: 12px;
  color: #666;
  margin-top: 8px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.btp-pack-yuan .btp-yen {
  font-size: 0.92em;
  margin-right: 2px;
  opacity: 0.88;
}

.btp-pack-money-unit {
  margin-left: 1px;
}

.btp-pack-giftbar {
  width: 100%;
  margin-top: auto;
  padding: 8px 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--btp-accent);
  line-height: 1.35;
  letter-spacing: 0.02em;
}

.btp-pay-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
}

.btp-pay {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  min-width: 140px;
  padding: 0 22px;
  border-radius: 3px;
  border: 1px solid var(--btp-border-strong);
  cursor: pointer;
  background: transparent;
  transition: border-color 0.2s ease;
  font-size: 15px;
  font-weight: 700;
  color: var(--btp-text-strong);
}

.btp-pay:hover {
  border-color: var(--btp-muted);
}

.btp-pay input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.btp-pay.is-checked,
.btp-pay:has(input:checked) {
  border-color: var(--btp-accent);
  background: transparent;
  box-shadow: none;
}

.btp-pay img.ico {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}

.btp-submit-wrap {
  margin-top: 4px;
  padding: 0 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.btp-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 230px;
  height: 50px;
  max-width: none;
  margin: 0;
  padding: 0 12px;
  border: none;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  background: var(--btp-accent);
  color: #fff;
  transition: filter 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
  box-shadow: none;
}

.btp-submit:hover:not(:disabled) {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.btp-submit:active:not(:disabled) {
  transform: translateY(0);
}

.btp-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

.btp-login-tip,
.btp-msg {
  margin: 0;
  font-size: 13px;
  color: var(--btp-muted);
}

.btp-login-tip a {
  color: var(--btp-accent-dark);
  font-weight: 600;
  text-decoration: underline;
}

.btp-recharge-status {
  margin-bottom: 0;
}

.btp-history-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.btp-history-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.45;
}

.btp-history-table th,
.btp-history-table td {
  padding: 10px 8px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--btp-border);
}

.btp-history-table th {
  color: var(--btp-muted);
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
}

.btp-history-table tr:last-child td {
  border-bottom: none;
}

.btp-history-money {
  font-weight: 700;
  color: var(--btp-text-strong);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.btp-history-note {
  margin-top: 4px;
  font-size: 12px;
  color: #b91c1c;
  line-height: 1.45;
  word-break: break-word;
}

.btp-history-cancel {
  height: 28px;
  padding: 0 10px;
  border: 1px solid #fecaca;
  border-radius: 3px;
  background: #fff;
  color: #dc2626;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.btp-history-cancel:hover:not(:disabled) {
  background: #fef2f2;
}

.btp-history-cancel:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btp-history-op-none {
  color: var(--muted, #94a3b8);
  font-size: 12px;
}

.btp-history-tip {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted, #94a3b8);
}

.btp-unpaid-panel {
  max-width: 440px;
  text-align: left;
}

.btp-unpaid-desc {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.55;
  color: #92400e;
  font-weight: 500;
}

.btp-unpaid-list {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
}

.btp-unpaid-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #fde68a;
  border-radius: 3px;
  background: #fffbeb;
}

.btp-unpaid-item-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
  font-size: 12px;
  color: #78716c;
}

.btp-unpaid-item-main strong {
  font-size: 13px;
  color: #0f172a;
}

.btp-unpaid-empty {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted, #94a3b8);
}

.btp-status-none {
  color: #94a3b8;
  font-size: 14px;
}

.btp-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  color: #fff;
  border: none;
}

.btp-badge-p {
  background: #2563eb;
  color: #fff;
}

.btp-badge-ok {
  background: var(--primary, #00bb61);
  color: #fff;
}

.btp-badge-no {
  background: #dc2626;
  color: #fff;
}

.btp-tips {
  background: var(--btp-surface);
  border-radius: 3px;
  padding: 14px 16px;
  line-height: 1.7;
  border: 1px solid var(--btp-surface-border);
  color: var(--btp-muted);
  font-size: 14px;
  text-align: left;
  width: 100%;
}

.btp-tips p {
  margin: 0 0 10px;
}

.btp-tips p:last-child {
  margin-bottom: 0;
}

.btp-empty {
  text-align: center;
  padding: 36px 16px;
  color: #94a3b8;
  font-size: 14px;
}

.btp-qr {
  max-width: 240px;
  width: 100%;
  height: auto;
  border-radius: 3px;
  border: 1px solid var(--btp-border);
  background: transparent;
}

.btp-qr-hint {
  margin: 14px auto 0;
  max-width: 320px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--btp-muted);
}

.dark .btp-page {
  --btp-border: #3d4450;
  --btp-border-strong: #4a5568;
  --btp-text-strong: #f3f4f6;
  --btp-muted: #9ca3af;
  --btp-surface: #1e2228;
  --btp-surface-border: #4a5568;
  --btp-radio-border: #6b7280;
}

.dark .btp-page .btp-balance-num,
.dark .btp-page .btp-history-money {
  color: var(--foreground);
}

.dark .btp-page .btp-pack-yuan {
  color: var(--muted);
}

.dark .btp-page .btp-history-note {
  color: #fca5a5;
}

@media (max-width: 560px) {
.btp-page {
  padding: 8px 10px 28px;
}

.btp-sheet-row {
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 18px 16px;
}

.btp-sheet-label {
  text-align: left;
  padding-top: 0 !important;
}

.btp-sheet-row--balance {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 6px 10px;
}

.btp-sheet-row--balance .btp-sheet-label {
  flex: 0 0 auto;
  white-space: nowrap;
}

.btp-sheet-row--balance .btp-sheet-body {
  flex: 1 1 auto;
  min-width: 0;
}

.btp-grid {
  grid-template-columns: repeat(2, 1fr);
}

.btp-pay-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: stretch;
}

.btp-pay {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 10px;
  gap: 6px;
  font-size: 13px;
}

.btp-pay img.ico {
  width: 22px;
  height: 22px;
}
}

/* ?????????? */
.btp-audit-page {
  --btp-audit-accent: var(--primary);
  --btp-audit-title: var(--foreground);
  --btp-audit-card-bg: var(--card);
  --btp-audit-card-border: #e5ebe8;
  --btp-audit-label: #7a8680;
  --btp-audit-value: var(--foreground);
  --btp-audit-divider: #eef2f0;
  --btp-audit-select-bg: var(--card);
  --btp-audit-select-border: #d0d8d3;
  --btp-audit-select-text: #334155;
  --btp-audit-empty-bg: #fafafa;
  --btp-audit-empty-border: #ddd;
  --btp-audit-empty-text: #888;
}

.btp-audit-page *,
.btp-audit-page *::before,
.btp-audit-page *::after {
  box-sizing: border-box;
}

.btp-audit-page h1 {
  margin: 0 0 10px;
  font-size: 1.35rem;
  color: var(--btp-audit-title);
}

.btp-audit-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btp-audit-card {
  border: 1px solid var(--btp-audit-card-border);
  border-radius: 3px;
  background: var(--btp-audit-card-bg);
  padding: 10px 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.btp-audit-row {
  display: flex;
  align-items: center;
  gap: 12px 16px;
  min-width: 0;
}

.btp-audit-main {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 2px;
  min-width: 0;
  line-height: 1.45;
}

.btp-audit-item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

.btp-audit-item em {
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  color: var(--btp-audit-label);
  white-space: nowrap;
}

.btp-audit-item strong {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--btp-audit-value);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(360px, 52vw);
}

.btp-audit-item--mono strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  font-weight: 600;
}

.btp-audit-sep {
  color: #c5cec9;
  padding: 0 4px;
  user-select: none;
}

.btp-audit-ops {
  display: flex;
  flex: 0 0 auto;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
  margin-left: auto;
}

.btp-audit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 32px;
  padding: 0 12px;
  border: none;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.btp-audit-btn--ok {
  background: var(--btp-audit-accent);
  color: #fff;
}

.btp-audit-btn--ok:hover:not(:disabled) {
  filter: brightness(1.05);
}

.btp-audit-btn--no {
  background: #fff;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.btp-audit-btn--no:hover:not(:disabled) {
  background: #fef2f2;
}

.btp-audit-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btp-audit-reason-select {
  height: 32px;
  min-width: 148px;
  max-width: 200px;
  padding: 0 8px;
  color: var(--btp-audit-select-text);
  border: 1px solid var(--btp-audit-select-border);
  border-radius: 3px;
  background: var(--btp-audit-select-bg);
  font-size: 12.5px;
}

.btp-audit-no-preset {
  font-size: 12px;
  color: var(--muted);
}

.btp-audit-empty {
  margin: 0;
  padding: 16px;
  text-align: center;
  color: var(--btp-audit-empty-text);
  border: 1px dashed var(--btp-audit-empty-border);
  background: var(--btp-audit-empty-bg);
  border-radius: 3px;
}

@media (max-width: 900px) {
.btp-audit-row {
  flex-direction: column;
  align-items: stretch;
}

.btp-audit-ops {
  margin-left: 0;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--btp-audit-divider);
}

.btp-audit-item strong {
  white-space: normal;
  max-width: none;
}

.btp-audit-reason-select {
  flex: 1 1 140px;
  max-width: none;
}
}

.admin-panel-body.admin-manager-shell > .admin-card,
.admin-panel-body.admin-manager-shell > .admin-stack,
.admin-panel-body.admin-manager-shell > .footer-admin,
.admin-panel-body.admin-manager-shell > .friend-links-admin,
.admin-panel-body.admin-manager-shell > .site-history-admin,
.admin-panel-body.admin-manager-shell > .download-sidebar-admin,
.admin-panel-body.admin-manager-shell > .legal-admin {
  width: 100%;
}

.dark .gaudit-section-head {
  background: #1e2228;
}

.site-history-page {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.site-history-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.site-history-stat-card {
  padding: 22px 18px;
  text-align: center;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: 3px;
  box-shadow: var(--shadow-sm);
}

.site-history-stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--primary);
  letter-spacing: 0.02em;
}

.site-history-stat-label {
  margin-top: 8px;
  font-size: 0.8125rem;
  color: var(--muted);
}

.site-history-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--foreground);
}

.site-history-title::before {
  content: "";
  width: 4px;
  height: 1.1em;
  border-radius: 3px;
  background: var(--primary);
  flex-shrink: 0;
}

.site-history-empty {
  margin: 0;
  padding: 28px;
  text-align: center;
  color: var(--muted);
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: 3px;
}

.site-history-timeline {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.site-history-year-block {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.site-history-year-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 3px;
  background: var(--primary);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
}

.site-history-year-entries {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-history-entry-card {
  padding: 18px 20px;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: 3px;
  box-shadow: var(--shadow-sm);
}

.site-history-entry-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--foreground);
}

.site-history-entry-title::before {
  content: "";
  width: 3px;
  height: 1em;
  border-radius: 3px;
  background: var(--primary);
  flex-shrink: 0;
}

.site-history-entry-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-history-entry-list li {
  position: relative;
  padding-left: 18px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--foreground);
}

.site-history-entry-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
}

.site-history-admin {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.site-history-admin-stats,
.site-history-admin-timeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.site-history-admin-stat-row,
.site-history-admin-item-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) 32px;
  gap: 8px;
  align-items: center;
}

.site-history-admin-item-row {
  grid-template-columns: 12px minmax(0, 1fr) 32px;
}

.site-history-admin-stat-row input,
.site-history-admin-entry-head input,
.site-history-admin-item-row input {
  width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--background);
  font-size: 12px;
}

.site-history-admin-entry {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--background);
}

.site-history-admin-entry-head {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.site-history-admin-entry-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.site-history-admin-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-history-admin-bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  justify-self: center;
}

.site-history-admin-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: #bbb;
  cursor: pointer;
}

.site-history-admin-delete:hover {
  color: #e53935;
  background: #fff5f5;
}

.site-history-admin-add {
  align-self: flex-start;
  margin-top: 4px;
  border: none;
  background: none;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
}

.site-history-admin-add--primary {
  margin-top: 10px;
}

@media (max-width: 900px) {
.site-history-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site-history-year-block {
  grid-template-columns: 1fr;
  gap: 10px;
}

.site-history-year-badge {
  justify-self: start;
}

.site-history-admin-stat-row,
  .site-history-admin-entry-head {
  grid-template-columns: 1fr;
}

.site-history-admin-entry-actions {
  justify-content: flex-end;
}
}

@media (max-width: 560px) {
.site-history-stats {
  grid-template-columns: 1fr;
}
}

.site-history-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 8px 0 4px;
}

.site-history-hero-title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--foreground);
  line-height: 1.3;
}

.site-history-hero-line {
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 3px;
  background: var(--primary);
}

.site-history-hero-intro {
  margin: 0;
  max-width: 640px;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--muted);
}

.site-history-admin-page-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-history-admin-items-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.site-history-admin-items-label > span {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.site-history-admin-items-textarea {
  width: 100%;
  min-height: 110px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--card);
  font-size: 13px;
  line-height: 1.55;
  resize: vertical;
  color: var(--foreground);
}

.site-history-admin-items-textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.help-sidebar-tips-block + .help-sidebar-faq {
  margin-top: 0;
}

.karaoke-admin-meta--under-title {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
}

.resource-group-item-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.resource-item-admin {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.resource-item-admin--compact {
  margin-top: 2px;
}

.resource-item-admin--inline {
  flex-shrink: 0;
  margin: 0;
  align-items: flex-end;
  position: relative;
}

.resource-item-admin--inline .resource-item-admin-ops {
  flex-wrap: nowrap;
  gap: 8px;
}

.resource-item-admin--inline .resource-item-admin-move {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 5;
  min-width: 180px;
  padding: 8px;
  background: var(--card, #fff);
  border: 1px solid var(--border);
  border-radius: 3px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.resource-item-admin--inline .resource-item-admin-msg {
  margin: 0;
  max-width: 120px;
  font-size: 12px;
  line-height: 1.2;
  text-align: right;
}

.resource-item-admin-ops {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
}

.resource-item-admin-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  padding: 0;
  border-radius: 0;
  cursor: pointer;
}

.resource-item-admin-btn:hover:not(:disabled) {
  color: var(--primary-dark);
}

.resource-item-admin-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.resource-item-admin-btn--danger:hover:not(:disabled) {
  color: #b42318;
}

.resource-item-admin-btn--primary {
  color: var(--primary-dark);
  background: transparent;
  border: none;
  font-weight: 600;
}

.resource-item-admin-color {
  appearance: none;
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--muted) 35%, transparent);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  vertical-align: middle;
  box-sizing: border-box;
}

.resource-item-admin-color::-webkit-color-swatch-wrapper {
  padding: 0;
}

.resource-item-admin-color::-webkit-color-swatch {
  border: none;
  border-radius: 3px;
}

.resource-item-admin-color::-moz-color-swatch {
  border: none;
  border-radius: 3px;
}

.resource-item-admin-move {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.resource-item-admin-move select {
  min-width: 140px;
  max-width: 220px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 12px;
  background: var(--card);
}

.resource-item-admin-msg {
  margin: 0;
  font-size: 12px;
  color: #b42318;
}

.resource-login-gate {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 28px 20px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--card);
}

.resource-login-gate-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
}

.resource-login-gate-desc {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted);
}

.admin-app-root :where(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .btn,
  .admin-card,
  .admin-panel,
  .admin-subnav-link,
  .admin-topnav-pill,
  .admin-help-note,
  .admin-save-toast,
  .admin-table-wrap,
  .admin-modal-overlay .modal-box,
  .rich-text-editor,
  .rich-text-color-field,
  .category-editor-fold-trigger,
  .pay-static-panel,
  .pay-settings-tabs button,
  .recharge-packages-panel,
  .recharge-packages-input,
  .friend-links-admin-item,
  .footer-admin-contact-card,
  .footer-admin-input,
  .footer-admin-textarea,
  .download-sidebar-admin-block,
  .nav-manager-item,
  .btp-audit-card,
  .gaudit-section,
  .gaudit-card,
  .bib-audit-card,
  .point-types-table input,
  .point-types-table select
) {
  border-radius: 3px !important;
}

/* ========== PHP layout compatibility overrides ========== */
.page-content,
.page-content--flush {
  padding: 0 !important;
  box-sizing: border-box;
  width: 100%;
}

.site-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px 22px;
  margin-bottom: 16px;
}

.member-sidebar-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.member-sidebar-head--compact {
  display: block;
  gap: 0;
}

.member-sidebar-head--compact .member-sidebar-name {
  font-size: 1rem;
}

.member-sidebar-head--compact .member-sidebar-points {
  margin-top: 4px;
}

.member-sidebar-name {
  margin: 0;
  font-weight: 700;
  font-size: 0.95rem;
}

.member-sidebar-points {
  margin: 2px 0 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--primary);
}

.member-main {
  min-width: 0;
}

.member-publish-panel {
  margin-top: 0;
}

.member-publish-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.member-publish-head .member-profile-title {
  margin: 0;
}

.member-publish-empty {
  margin: 8px 0 0;
}

.page-title-wrap {
  margin-bottom: 18px;
}

.page-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--foreground);
  margin: 0;
}

.page-desc {
  color: var(--muted);
  font-size: 0.875rem;
  margin-top: 0.35rem;
}

/* Neutralize app.css global label rules inside designed forms */
.publish-page label,
.btp-page label,
.member-layout label.member-profile-pwd-field,
.karaoke-download-page label.buy-modal-agree {
  display: revert;
  margin: 0;
  font-size: inherit;
  color: inherit;
}

.publish-inline-field {
  display: grid !important;
  margin: 0 !important;
}

.publish-aside-inline {
  display: flex !important;
  margin: 0 !important;
}

.btp-ctype-card,
.btp-pack,
.btp-pay {
  margin: 0 !important;
}

.publish-form-main input,
.publish-form-main select,
.publish-form-main textarea,
.publish-aside-panel input,
.publish-aside-panel select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 8px;
  min-height: var(--publish-control-h, 30px);
  height: var(--publish-control-h, 30px);
  line-height: 1.3;
  font-size: var(--publish-text-sm, 12px);
  font-weight: 400;
  background: var(--card);
  box-sizing: border-box;
}

.publish-form-main textarea,
.publish-aside-panel textarea {
  height: auto;
  min-height: 64px;
  line-height: 1.45;
  padding: 6px 8px;
}

.buy-modal[hidden] {
  display: none !important;
}

.buy-modal:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.buy-modal-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.buy-modal-card {
  position: relative;
  z-index: 1;
  width: min(420px, 92vw);
  margin: 0;
  padding: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 18px 42px rgba(15, 23, 20, 0.18);
}

.buy-modal-card--v1 {
  display: flex;
  flex-direction: column;
}

.buy-modal-head {
  background: var(--primary, #00bb61);
  color: #fff;
  padding: 15px 20px;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.buy-modal-body {
  padding: 16px 20px 12px;
}

.buy-modal-sec-label {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary-dark, #087a44);
  letter-spacing: 0.04em;
}

.buy-modal-agree-doc {
  max-height: 220px;
  overflow: auto;
  font-size: 14px;
  line-height: 1.7;
  color: var(--foreground, var(--text));
  padding-right: 4px;
  margin: 0;
  background: transparent;
  border: none;
}

.buy-modal-agree-doc--empty {
  font-size: 13px;
  padding: 8px 0;
}

.buy-modal-agree-doc p {
  margin: 0 0 10px;
}

.buy-modal-agree-doc p:last-child {
  margin-bottom: 0;
}

.buy-modal-agree {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0 !important;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}

.buy-modal-agree input {
  width: 15px;
  height: 15px;
  accent-color: var(--primary, #00bb61);
  flex-shrink: 0;
}

.buy-modal-error {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 3px;
  font-size: 13px;
  color: #b91c1c;
  background: #fef2f2;
}

.buy-modal-foot {
  background: var(--primary-light, #e8faf1);
  border-top: 1px solid color-mix(in srgb, var(--primary, #00bb61) 16%, var(--border));
  padding: 12px 16px 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.buy-modal-meta {
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
  min-width: 0;
}

.buy-modal-meta strong {
  font-weight: 700;
  color: var(--primary-dark, #087a44);
  font-variant-numeric: tabular-nums;
}

.buy-modal-meta #buyBalanceWrap.is-short strong {
  color: #c2410c;
}

.buy-modal-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.buy-modal-actions .btn {
  min-width: 96px;
}

.buy-modal-recharge-btn {
  text-decoration: none !important;
}

.buy-modal-recharge-btn[hidden],
#buyConfirm[hidden] {
  display: none !important;
}

#buyConfirm.btn-disabled,
#buyConfirm:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.resource-list-pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 32px;
  color: var(--muted);
  font-weight: 600;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: transparent;
}

.modal-title {
  margin: 0 0 10px;
  font-size: 1.1rem;
}

.modal-body {
  margin-bottom: 14px;
}

.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Soften app.css .card margin inside member */
.member-layout .card {
  margin-bottom: 0;
}

/* ========== Member page layout + tables ========== */
.member-page-head {
  margin-bottom: 24px;
}

.member-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.member-panel-card {
  margin-bottom: 0;
}

.site-card-title {
  margin: 0 0 16px;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--foreground);
}

.member-publish-head .site-card-title {
  margin-bottom: 0;
}

.text-primary {
  color: var(--primary);
  font-weight: 600;
}

.text-danger {
  color: #b42318;
  font-weight: 600;
}

.admin-table-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 1px solid #e6ebe8;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}

.admin-table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.admin-table th,
.admin-table td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid #eef1ef;
}

.admin-table th {
  background: #f7faf8;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.admin-table tbody tr:last-child td {
  border-bottom: none;
}

.admin-table tbody tr:hover {
  background: #fafcfb;
}

.admin-table-compact td,
.admin-table-compact th {
  padding: 6px 10px;
}

.admin-cell-muted {
  color: var(--muted);
  font-size: 12px;
}

.admin-empty-cell {
  color: var(--muted);
  text-align: center;
  padding: 24px 14px !important;
}

.member-download-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.member-download-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background, #fff);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s;
}

.member-download-item:hover {
  border-color: var(--primary);
}

.member-download-main {
  min-width: 0;
  flex: 1;
}

.member-download-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--foreground);
}

.member-download-meta {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.member-download-action {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
}

.member-withdraw-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 420px;
}

.member-withdraw-field {
  display: grid;
  gap: 6px;
  margin: 0;
}

.member-withdraw-field span {
  font-size: 13px;
  color: var(--muted);
}

.member-withdraw-field input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  font-size: 14px;
  box-sizing: border-box;
}

.member-withdraw-field input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

.member-withdraw-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.member-withdraw-hint {
  margin: 0;
  font-size: 13px;
}

.member-withdraw-estimate {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-dark, var(--primary));
}

.member-withdraw-actions {
  display: flex;
  justify-content: flex-start;
}

.member-withdraw-msg {
  margin: 0;
  font-size: 13px;
}

.member-withdraw-msg.is-ok {
  color: #047857;
}

.member-withdraw-msg.is-error {
  color: #b42318;
}

.member-withdraw-form .publish-inline-field {
  border-bottom: none;
}

.member-withdraw-form .publish-inline-field:last-of-type {
  border-bottom: none;
}

/* ?????? */
.member-pwd-modal[hidden] {
  display: none !important;
}

.member-pwd-modal:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  z-index: 120;
}

.member-pwd-modal-mask {
  position: absolute;
  inset: 0;
}

.member-pwd-modal-card {
  position: relative;
  z-index: 1;
  width: min(420px, calc(100vw - 32px));
  max-width: 420px;
  padding: 0;
  overflow: hidden;
}

.member-pwd-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--primary-light) 35%, var(--card));
}

.member-pwd-modal-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.member-pwd-modal-close {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.member-pwd-modal-close:hover {
  background: color-mix(in srgb, var(--border) 50%, transparent);
  color: var(--foreground);
}

.member-pwd-modal-form {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.member-pwd-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

@media (max-width: 900px) {
.member-layout {
  grid-template-columns: 1fr;
}

.member-sidebar {
  position: static;
}
}

/* ========== ???? ========== */
.help-center-page{display:flex;flex-direction:column;gap:24px}
.help-center-head{position:relative;overflow:hidden;border-radius:3px;background:linear-gradient(135deg,#00bb61 0%,#00a356 48%,#008a47 100%);box-shadow:0 10px 32px rgba(0,187,97,.18)}
.help-center-head-inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:132px;padding:28px 32px}
.help-center-head-badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:3px;background:rgba(255,255,255,.18);color:#fff;font-size:12px;font-weight:700;margin-bottom:10px}
.help-center-head-title{margin:0 0 8px;font-size:28px;font-weight:800;color:#fff}
.help-center-head-desc{margin:0;font-size:15px;line-height:1.6;color:rgba(255,255,255,.92);max-width:640px}
.help-center-empty{margin:0;padding:24px;text-align:center;color:var(--muted);background:var(--card);border:1px solid var(--border);border-radius:10px}
.help-center-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:20px;align-items:start}
.help-side-nav{display:flex;flex-direction:column;gap:10px}
.help-side-nav-item{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:12px 14px;border:1px solid var(--border);border-radius:3px;background:var(--card);color:var(--foreground);font-size:14px;font-weight:600;text-align:left;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.help-side-nav-item:hover:not(.is-active){border-color:color-mix(in srgb,var(--primary) 40%,var(--border))}
.help-side-nav-item.is-active{background:var(--primary);border-color:var(--primary);color:#fff}
.help-side-nav-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--primary-light);color:var(--primary-dark);font-size:13px;font-weight:800}
.help-side-nav-icon svg{display:block;width:16px;height:16px}
.help-side-nav-item.is-active .help-side-nav-icon{background:rgba(255,255,255,.2);color:#fff}
.help-faq-panel.hidden{display:none}
.help-faq-accordion{display:flex;flex-direction:column;gap:6px}
.help-faq-item{overflow:hidden;border:1px solid color-mix(in srgb,var(--border) 90%,#d9cdb8);border-radius:3px;background:color-mix(in srgb,var(--card) 88%,#f3efe6)}
.help-faq-item.is-open{border-color:color-mix(in srgb,var(--primary) 28%,var(--border))}
.help-faq-trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:8px 12px;border:none;background:transparent;text-align:left;cursor:pointer;color:var(--foreground)}
.help-faq-question-text{flex:1;min-width:0;font-size:14px;font-weight:600;line-height:1.35}
.help-faq-chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:22px;height:22px;border-radius:50%;background:color-mix(in srgb,var(--border) 40%,var(--card));color:var(--muted);transition:transform .2s ease,background .2s ease,color .2s ease}
.help-faq-chevron-icon{display:block;width:14px;height:14px}
.help-faq-item.is-open .help-faq-chevron{transform:rotate(180deg);background:color-mix(in srgb,var(--primary-light) 80%,var(--card));color:var(--primary-dark)}
.help-faq-item.is-open .help-faq-trigger{border-bottom:1px solid color-mix(in srgb,var(--border) 85%,transparent)}
.help-faq-answer{padding:10px 12px 12px;background:color-mix(in srgb,var(--card) 70%,transparent)}
.help-faq-answer-body{margin:0;font-size:13px;line-height:1.65;color:var(--muted)}
@media (max-width: 900px) {
  .help-center-layout { grid-template-columns: 1fr; }
  .help-center-head-inner { padding: 22px 20px; min-height: auto; }
  .help-center-head-title { font-size: 22px; }
}

/* --- transcript L5822: modal-overlay[hidden] --- */
.modal-overlay[hidden] {
  display: none !important;
}

/* --- transcript L5846: resource-item-admin-move[hidden] --- */
.resource-item-admin-move[hidden] {
  display: none !important;
}

.resource-item-admin--inline .resource-item-admin-move[hidden] {
  display: none !important;
}

/* --- transcript L5860: btp label flex overrides --- */
.btp-page label.btp-pay,
.btp-page label.btp-pack,
.btp-page label.btp-ctype-card {
  display: flex !important;
  margin: 0 !important;
  font-size: inherit !important;
  color: inherit !important;
}

.btp-page label.btp-pay {
  align-items: center;
  justify-content: center;
  min-height: 56px;
  height: auto;
}

.btp-page .btp-pay-row {
  align-items: center;
}

/* --- transcript L5861: btp-audit nav/titles --- */
.btp-audit-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}

.btp-audit-section-title {
  margin: 18px 0 10px;
  font-size: 15px;
  font-weight: 700;
}

/* --- transcript L5886: bib invite --- */

/* ========== ???????? / ?????ib??========== */
.bib-page {
  --bib-accent: var(--primary);
  --bib-radius: 3px;
  --bib-border: #e5ebe8;
  --bib-text: var(--foreground);
  --bib-muted: #64748b;
  --bib-card: var(--card);
  --bib-surface: #f8fafc;
  max-width: 1200px;
  margin: 0 auto 48px;
  padding: 4px 0 24px;
  font-size: 14px;
  color: var(--bib-text);
  line-height: 1.55;
  box-sizing: border-box;
}

.bib-page *,
.bib-page *::before,
.bib-page *::after {
  box-sizing: border-box;
}

.bib-page label.bib-pay-item,
.bib-page label.bib-sheet-label {
  display: block;
  margin: 0 !important;
  font-size: inherit !important;
  color: inherit !important;
}

.bib-page label.bib-pay-item {
  display: inline-flex !important;
  align-items: center;
}

.bib-tabs {
  display: flex;
  margin: 0 0 20px;
  border: 1px solid var(--bib-border);
  border-radius: var(--bib-radius);
  overflow: hidden;
  background: var(--bib-card);
}

.bib-tabs a {
  flex: 1;
  padding: 12px 16px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--bib-text);
  text-decoration: none;
  border-right: 1px solid var(--bib-border);
  transition: background 0.15s, color 0.15s;
}

.bib-tabs a:last-child {
  border-right: none;
}

.bib-tabs a.is-active {
  background: var(--bib-accent);
  color: #fff;
}

.bib-tabs a:not(.is-active):hover {
  background: color-mix(in srgb, var(--bib-accent) 10%, var(--bib-card));
  color: var(--bib-accent);
}

.bib-sheet {
  margin: 0;
}

.bib-sheet-row {
  display: grid;
  grid-template-columns: minmax(6.5em, 8.5em) 1fr;
  gap: 12px 20px;
  align-items: start;
  padding: 18px 0;
}

.bib-sheet-label {
  text-align: right;
  color: var(--bib-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  white-space: nowrap;
  padding-top: 8px;
}

.bib-sheet-field {
  min-width: 0;
}

.bib-price-line {
  margin: 0;
  font-size: 14px;
  color: var(--bib-text);
  line-height: 1.5;
  padding-top: 8px;
}

.bib-price-note {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--bib-muted);
  line-height: 1.5;
}

.bib-input {
  width: 100%;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--bib-border);
  border-radius: var(--bib-radius);
  font-size: 14px;
  color: var(--bib-text);
  background: var(--bib-card);
  outline: none;
}

.bib-input:focus {
  border-color: var(--bib-accent);
}

.bib-email-warn {
  margin: 8px 0 0;
  font-size: 13px;
  color: #e11d48;
  line-height: 1.5;
}

.bib-pay-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 2px;
}

.bib-pay-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
  padding: 8px 14px;
  border: 1px solid var(--bib-border);
  border-radius: var(--bib-radius);
  cursor: pointer;
  background: var(--bib-card);
  transition: border-color 0.15s;
}

.bib-pay-item:hover {
  border-color: var(--bib-accent);
}

.bib-pay-item.is-checked,
.bib-pay-item:has(input:checked) {
  border-color: var(--bib-accent);
  background: color-mix(in srgb, var(--bib-accent) 14%, var(--bib-card));
}

.bib-pay-item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.bib-pay-item .ico {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  object-fit: contain;
}

.bib-pay-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--bib-text);
}

.bib-btn-pay {
  display: block;
  width: 100%;
  max-width: 280px;
  min-height: 42px;
  margin-top: 2px;
  padding: 0 20px;
  border: none;
  border-radius: var(--bib-radius);
  background: var(--bib-accent);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: filter 0.15s;
}

.bib-btn-pay:hover:not(:disabled) {
  filter: brightness(1.06);
}

.bib-btn-pay:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
}

.bib-tips {
  margin: 0;
  font-size: 14px;
  color: var(--bib-text);
  line-height: 1.75;
}

.bib-tips p {
  margin: 0 0 8px;
}

.bib-tips p:last-child {
  margin-bottom: 0;
}

.bib-empty {
  font-size: 14px;
  color: var(--bib-muted);
  padding-top: 6px;
}

.bib-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 20, 0.42);
}

.bib-modal.is-open {
  display: flex;
}

.bib-modal__panel {
  width: 100%;
  max-width: 360px;
}

/* Shared Effect B scan-pay modal (recharge + invite) */
.pay-scan-card {
  position: relative;
  z-index: 1;
  width: min(360px, 92vw);
  margin: 0;
  padding: 0;
  background: var(--card, #fff);
  border: 1px solid var(--border, #dde5e1);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(15, 23, 20, 0.16);
  text-align: center;
}

.buy-modal .pay-scan-card {
  width: min(360px, 92vw);
  border-radius: 12px;
}

.pay-scan-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #94a3b8;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.pay-scan-close:hover {
  color: #1a1f1c;
  background: rgba(0, 0, 0, 0.05);
}

.pay-scan-body {
  padding: 28px 22px 14px;
}

.pay-scan-title {
  margin: 0 0 18px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: #1a1f1c;
  display: inline-block;
}

.pay-scan-title::after {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  margin: 8px auto 0;
  border-radius: 2px;
  background: var(--primary, #00bb61);
}

.pay-scan-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
}

.pay-scan-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary, #00bb61) 14%, #fff);
  color: var(--primary, #00bb61);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

.pay-scan-chip:empty {
  display: none;
}

.pay-scan-amount {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.15;
  color: #1a1f1c;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.pay-scan-qr {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  padding: 12px;
  width: fit-content;
  max-width: 100%;
  background: #fff;
  border: 1px solid var(--border, #dde5e1);
  border-radius: 10px;
  box-sizing: border-box;
}

.pay-scan-qr[hidden] {
  display: none !important;
}

.pay-scan-qr img,
.pay-scan-card .pay-scan-qr img {
  display: block;
  width: 200px;
  max-width: min(200px, 64vw);
  height: auto;
  border: 0;
  border-radius: 0;
  margin: 0;
}

.pay-scan-empty {
  margin: 0;
  padding: 28px 16px;
  font-size: 13px;
  color: #64748b;
}

.pay-scan-caption {
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
}

.pay-scan-tip {
  margin: 0;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.6;
  color: #087a44;
  background: color-mix(in srgb, var(--primary, #00bb61) 10%, #fff);
  border-radius: 8px;
  text-align: left;
}

.pay-scan-foot {
  padding: 4px 20px 20px;
}

.pay-scan-btn {
  appearance: none;
  display: block;
  width: 100%;
  height: 44px;
  border: 0;
  border-radius: 8px;
  background: var(--primary, #00bb61);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  line-height: 44px;
  text-align: center;
}

.pay-scan-btn:hover {
  background: var(--primary-hover, #009a50);
}

html.dark .pay-scan-card {
  background: #141918;
  border-color: #2a3330;
}

html.dark .pay-scan-title,
html.dark .pay-scan-amount {
  color: #e8eeeb;
}

html.dark .pay-scan-chip {
  background: color-mix(in srgb, var(--primary, #00bb61) 22%, #141918);
}

html.dark .pay-scan-qr {
  background: #1a211e;
  border-color: #2a3330;
}

html.dark .pay-scan-tip {
  color: #7ddea8;
  background: color-mix(in srgb, var(--primary, #00bb61) 16%, #141918);
}

html.dark .pay-scan-close:hover {
  color: #e8eeeb;
  background: rgba(255, 255, 255, 0.06);
}

.bib-page-intro {
  margin: 0 0 16px;
  color: var(--bib-muted);
  font-size: 14px;
  line-height: 1.6;
}

.bib-card {
  border: 1px solid var(--bib-border);
  border-radius: var(--bib-radius);
  background: var(--bib-card);
  padding: 18px;
  margin-bottom: 16px;
}

.bib-form-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: stretch;
}

.bib-form-row .bib-input {
  flex: 1 1 220px;
  padding: 10px 12px;
  font-size: 15px;
}

.bib-btn {
  padding: 10px 20px;
  border: none;
  border-radius: var(--bib-radius);
  background: var(--bib-accent);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.bib-btn:hover:not(:disabled) {
  filter: brightness(1.06);
}

.bib-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bib-order-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bib-order-item {
  border: 1px solid var(--bib-border);
  border-radius: var(--bib-radius);
  padding: 14px 16px;
}

.bib-order-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.bib-order-item__time {
  font-size: 13px;
  color: var(--bib-muted);
}

.bib-order-meta {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}

.bib-order-meta dt {
  display: inline;
  color: var(--bib-muted);
  font-weight: 600;
}

.bib-order-meta dd {
  display: inline;
  margin: 0 16px 0 4px;
  color: var(--bib-text);
}

.bib-code-row {
  margin: 10px 0 0;
}

.bib-code {
  font-size: 20px;
  font-weight: 800;
  color: var(--bib-accent);
  letter-spacing: 0.08em;
}

.bib-reject-note {
  margin: 10px 0 0;
  font-size: 14px;
  color: #64748b;
}

.bib-st {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--bib-radius);
  font-size: 13px;
  font-weight: 600;
}

.bib-st--0 {
  background: #fef3c7;
  color: #b45309;
}

.bib-st--1 {
  background: #d1fae5;
  color: #047857;
}

.bib-st--2 {
  background: #fee2e2;
  color: #b91c1c;
}

.bib-copy {
  margin-left: 8px;
  padding: 4px 10px;
  font-size: 12px;
  border: 1px solid var(--bib-accent);
  background: var(--bib-card);
  color: var(--bib-accent);
  border-radius: var(--bib-radius);
  cursor: pointer;
}

.bib-alert {
  padding: 14px;
  border-radius: var(--bib-radius);
  border: 1px dashed var(--bib-border);
  color: var(--bib-muted);
  text-align: center;
  font-size: 14px;
}

@media (max-width: 520px) {
.bib-sheet-row {
  grid-template-columns: 1fr;
  gap: 6px;
}

.bib-sheet-label {
  text-align: left;
  padding-top: 0;
}

.bib-price-line {
  padding-top: 0;
}

.bib-btn-pay {
  max-width: none;
}
}

html.dark .bib-page {
  --bib-border: var(--border, #2a3330);
  --bib-text: var(--text, #e8eeeb);
  --bib-muted: var(--muted, #94a39a);
  --bib-card: var(--card, #141918);
  --bib-surface: #121816;
}

html.dark .bib-pay-item {
  background: var(--bib-card);
  border-color: var(--bib-border);
  color: var(--bib-text) !important;
}

html.dark .bib-pay-item .bib-pay-name {
  color: var(--bib-text) !important;
}

html.dark .bib-pay-item.is-checked,
html.dark .bib-pay-item:has(input:checked) {
  background: color-mix(in srgb, var(--bib-accent) 18%, var(--bib-card));
  border-color: var(--bib-accent);
  color: var(--bib-text) !important;
}

html.dark .bib-tabs a:not(.is-active):hover {
  background: color-mix(in srgb, var(--bib-accent) 14%, var(--bib-card));
}

html.dark .btp-pay,
html.dark .btp-page label.btp-pay {
  background: transparent !important;
  color: var(--text, #e8eeeb) !important;
  border-color: var(--border, #2a3330);
}

html.dark .btp-pay.is-checked,
html.dark .btp-pay:has(input:checked) {
  background: color-mix(in srgb, var(--primary) 16%, transparent) !important;
  border-color: var(--primary);
  color: var(--text, #e8eeeb) !important;
}

/* --- transcript L5894: NEW badge --- */

.resource-news-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  padding: 0 4px;
  min-width: 28px;
  height: 14px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #fff;
  background: #e53935;
  border-radius: 3px;
  flex-shrink: 0;
  vertical-align: 1px;
}

/* --- transcript L5926: resource-dl-log --- */

.resource-dl-log-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: auto;
  background: var(--card);
}

.resource-dl-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.resource-dl-log-table th,
.resource-dl-log-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #eef1ef;
}

.resource-dl-log-table th {
  background: var(--background);
  color: var(--muted);
  font-weight: 700;
}

.resource-dl-log-table tr:last-child td {
  border-bottom: none;
}

/* ========== 资源求助（单栏 1280） ========== */
.help-request-page {
  --help-mw: 1280px;
  max-width: var(--help-mw);
  width: 100%;
  margin: 0 auto;
  padding: 0 16px 32px;
  box-sizing: border-box;
}

.page-hero.mb-6 { margin-bottom: 24px; }
.page-hero-title {
  margin: 0 0 8px;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--foreground);
  line-height: 1.25;
}
.page-hero-desc {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}

.help-request-layout {
  display: block;
  width: 100%;
}

.help-request-form-card {
  margin-bottom: 0;
  padding: 22px 24px;
}

.help-request-card-title {
  margin: 0 0 16px;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--foreground);
}

.help-request-req {
  color: #dc2626;
  font-weight: 700;
}

.help-request-login-tip {
  margin: 0;
  line-height: 1.7;
}

.help-request-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.help-request-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.help-request-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--foreground);
}

.help-request-form input,
.help-request-form textarea,
.help-request-input,
.help-request-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--foreground);
  font: inherit;
}

.help-request-form input,
.help-request-input {
  height: 42px;
  padding: 0 12px;
}

.help-request-form textarea,
.help-request-textarea {
  padding: 10px 12px;
  min-height: 140px;
  resize: vertical;
  line-height: 1.6;
}

.help-request-actions {
  margin-top: 4px;
}

@media (max-width: 640px) {
  .help-request-page { padding: 0 12px 28px; }
  .help-request-form-card { padding: 18px 16px; }
}

/* ========== 搜索页 ========== */
body:has(.search-page) .site-promo { display: none; }
.search-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
}
.search-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 20px 24px;
  align-items: start;
}
.search-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.search-aside {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  position: sticky;
  top: 12px;
}
.search-aside-card {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--card, #fff);
}
.search-aside-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--foreground, var(--text));
}
.search-aside-title-text { flex-shrink: 0; }
.search-aside-title-line {
  display: block;
  width: 20px;
  height: 3px;
  flex: none;
  max-width: none;
  border-radius: 3px;
  background: var(--primary);
  opacity: 1;
}
.search-aside-hot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.search-aside-hot-word {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  background: transparent;
}
.search-aside-hot-word:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: rgba(0, 187, 97, 0.06);
}
.search-aside-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.search-aside-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--foreground, var(--text));
  text-decoration: none;
  border-bottom: 1px dashed var(--border);
}
.search-aside-list li:last-child a { border-bottom: 0; }
.search-aside-list a:hover { color: var(--primary); }
.search-aside-arrow {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
}
.search-aside-list a:hover .search-aside-arrow { color: var(--primary); }

.search-tips-panel {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card, #fff);
}
.search-tips-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.search-tips-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 3px;
  background: var(--primary);
  color: #fff;
  flex-shrink: 0;
}
.search-tips-box h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
}
.search-tips-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--foreground, var(--text));
  word-break: break-word;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.search-tips-body p,
.search-tips-body li {
  margin: 0;
  color: inherit;
}
.search-tips-body > *:not(:last-child),
.search-tips-body li:not(:last-child) {
  margin-bottom: 0;
}
.search-tips-body a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.search-tips-body ul,
.search-tips-body ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: search-tip;
}
.search-tips-body ol > li,
.search-tips-body ul > li {
  position: relative;
  padding-left: 24px;
  counter-increment: search-tip;
}
.search-tips-body ol > li::before,
.search-tips-body ul > li::before {
  content: counter(search-tip);
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: normal;
  line-height: 1;
  background: var(--primary);
  color: #fff;
}
/* ??????????????????????? */
.search-tips-body.search-tips-body--plain,
.search-tips-body:not(:has(ol, ul)) {
  counter-reset: search-tip;
}
.search-tips-body.search-tips-body--plain > p,
.search-tips-body:not(:has(ol, ul)) > p {
  position: relative;
  padding-left: 24px;
  counter-increment: search-tip;
  margin: 0;
}
.search-tips-body.search-tips-body--plain > p::before,
.search-tips-body:not(:has(ol, ul)) > p::before {
  content: counter(search-tip);
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: normal;
  line-height: 1;
  background: var(--primary);
  color: #fff;
}
.search-tips-body img {
  max-width: 100%;
  height: auto;
  border-radius: 3px;
}
.search-tips-body h2,
.search-tips-body h3 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
}
.search-tips-panel .search-action-bar { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.search-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 16px;
  border-radius: var(--radius);
  background: var(--primary);
  color: #fff !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.search-action-btn-outline {
  background: var(--primary);
  color: #fff !important;
  border: 1px solid var(--primary);
}
.search-action-btn-outline:hover {
  background: var(--primary-hover, var(--primary));
  border-color: var(--primary-hover, var(--primary));
  color: #fff !important;
}
.search-guest-notice { margin: 0; font-size: 14px; color: var(--muted); }
.search-result-count { margin: 0 0 4px; font-size: 14px; color: var(--muted); }
.search-result-count strong { color: var(--primary); font-weight: 700; }
.search-result-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}
.search-result-link {
  display: block;
  padding: 16px 8px;
  margin: 0 -8px;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius);
  transition: background .15s, color .15s;
}
.search-result-link:hover { background: rgba(0, 187, 97, 0.06); }
.search-result-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--foreground);
  word-break: break-word;
}
.search-result-link:hover .search-result-title { color: var(--primary); }
.search-result-info {
  margin: 10px 0 0;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.search-result-info-row { display: inline; }
.search-result-info-row + .search-result-info-row::before { content: " · "; color: var(--muted); }
.search-result-info-row dt,
.search-result-info-row dd { display: inline; margin: 0; color: inherit; }
.search-result-info-row dt::after { content: "："; }
.search-result-empty { margin: 0; font-size: 14px; color: var(--muted); }
.search-pagination { margin-top: 8px; }

/* ??????? */
.dl-link-card-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 108px;
}
.dl-copy-link-btn {
  border: none !important;
  background: none !important;
  padding: 0 !important;
  min-width: 0 !important;
  height: auto !important;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none !important;
  line-height: 1.3;
}
.dl-copy-link-btn:hover { text-decoration: underline; }

.changelog-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.changelog-section-head .section-head { margin-bottom: 0; }
.changelog-item-actions { display: flex; gap: 10px; margin-top: 8px; }
.changelog-item-edit,
.changelog-item-delete {
  border: none;
  background: none;
  padding: 0;
  font-size: 13px;
  color: var(--primary);
  cursor: pointer;
}
.changelog-item-delete { color: #b42318; }
.changelog-modal-body { display: flex; flex-direction: column; gap: 10px; }
.changelog-modal-time,
.changelog-modal-text {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  font: inherit;
}

/* --- recovered helpers --- */
.modal-head {
  background: var(--primary);
  color: #fff;
  padding: 1.1rem 1.5rem;
  font-weight: 700;
  font-size: 1rem;
}

.help-center-head-text {
  max-width: 640px;
}

.help-side-nav-label {
  line-height: 1.45;
}

/* ========== Site ads / cover upload ========== */
.site-ad-slot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
  padding: 0;
  background: transparent;
  border: none;
}
.site-ad-slot:last-child { margin-bottom: 0; }
.site-ad-slot > .site-ad-text,
.site-ad-slot > .site-ad-link,
.site-ad-slot > .site-ad-item {
  display: block;
  border: 1px solid var(--border, #e2e8e6);
  border-radius: var(--radius, 3px);
  background: var(--card, #fff);
  overflow: hidden;
  box-sizing: border-box;
}
.site-ad-link {
  line-height: 0;
  text-decoration: none;
}
.site-ad-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
.site-ad-text {
  padding: 10px 14px;
  color: var(--foreground, #1a1f1c);
  font-size: 0.875rem;
  line-height: 1.5;
  text-decoration: none;
}
.site-ad-text p { margin: 0; white-space: pre-wrap; }
.search-ad-slot { margin-bottom: 12px; }
.search-ad-slot-mid { margin: 8px 0; }
.search-ad-mid-li { list-style: none; margin: 0; padding: 0; }
.search-aside-ad { margin: 0; }
.search-aside-ad:empty { display: none; }
.search-aside-ad .site-ad { margin: 0; }
.list-ad-slot { margin-bottom: 16px; }
.list-ad-slot:last-child { margin-top: 16px; margin-bottom: 0; }
.download-ad-slot { margin-bottom: 12px; }
.download-ad-slot:last-child { margin-bottom: 0; }
.help-sidebar > .download-ad-slot {
  margin-bottom: 0;
}
.publish-cover-preview {
  margin-top: 8px;
  max-width: 280px;
  border: 1px solid var(--border, #e2e8e6);
  border-radius: 3px;
  overflow: hidden;
  background: #0a1210;
}
.publish-cover-preview img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--cover-aspect-ratio, 16 / 9);
  object-fit: cover;
}
.admin-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-color-row input[type="color"] {
  width: 40px;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--border, #e2e8e6);
  border-radius: 3px;
  background: #fff;
}
.admin-color-row input[type="text"] { flex: 1; min-width: 0; }
.promo-page-selector-grid { margin-top: 4px; }
.promo-page-selector-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
.promo-page-selector-path {
  color: var(--muted, #64748b);
  font-size: 12px;
}

/* ========== Resource preview (????) ========== */
.resource-preview-block {
  padding: 16px 2px 8px;
  background: transparent;
}
.resource-preview-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.resource-preview-view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  min-width: 220px;
  padding: 0.55rem 1.6rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.resource-preview-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  padding: 0.28rem 0.65rem;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  border-color: var(--primary);
  color: var(--primary-dark);
  background: var(--card);
}
.resource-preview-copy svg {
  width: 12px;
  height: 12px;
}
.resource-preview-copy:hover {
  border-color: var(--primary-hover);
  color: var(--primary-dark);
  background: var(--primary-light);
}
.resource-preview-notice {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Global dark mode surfaces */
html.dark .karaoke-panel,
html.dark .site-card,
html.dark .bundle-card,
html.dark .resource-card,
html.dark .feature-card,
html.dark .recharge-panel,
html.dark .download-section,
html.dark .modal-box,
html.dark .search-tips-panel,
html.dark .search-aside-card {
  background: var(--card);
}
html.dark .help-center-empty,
html.dark .help-side-nav-item,
html.dark .help-faq-item,
html.dark .member-sidebar,
html.dark .publish-aside-panel,
html.dark .resource-group--clean .resource-group-item,
html.dark .admin-table-wrap,
html.dark .rich-text-editor,
html.dark .resource-publish-form .rich-text-editor {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--foreground);
}
html.dark .resource-publish-form .rich-text-editor-toolbar,
html.dark .rich-text-editor-toolbar {
  background: #1a221e !important;
  border-color: var(--border) !important;
}
html.dark .resource-publish-form .rich-text-toolbar-btn,
html.dark .rich-text-toolbar-btn {
  background: #0f1412 !important;
  border-color: var(--border, #2a3330) !important;
  color: var(--foreground, #e8eeeb) !important;
}
html.dark .resource-publish-form .rich-text-toolbar-btn:hover,
html.dark .rich-text-toolbar-btn:hover {
  background: color-mix(in srgb, var(--primary) 18%, #141918) !important;
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border)) !important;
  color: var(--primary) !important;
}
html.dark .rich-text-toolbar-divider {
  background: var(--border, #2a3330) !important;
}
html.dark .resource-publish-form .rich-text-editor-content,
html.dark .rich-text-editor-content {
  color: var(--foreground, #e8eeeb) !important;
  background: var(--card, #141918) !important;
}
html.dark .rich-text-color-panel {
  background: var(--card, #141918) !important;
  border-color: var(--border, #2a3330) !important;
}
html.dark .rich-text-color-title,
html.dark .rich-text-color-custom {
  color: var(--muted, #94a39a) !important;
  border-color: var(--border, #2a3330) !important;
}
html.dark .rich-text-color-clear {
  background: #0f1412 !important;
  border-color: var(--border, #2a3330) !important;
  color: var(--foreground, #e8eeeb) !important;
}
html.dark .help-faq-trigger,
html.dark .help-faq-answer {
  color: var(--foreground);
  background: transparent;
}
html.dark .help-faq-chevron {
  background: color-mix(in srgb, var(--border) 55%, var(--card));
  color: var(--muted);
}
html.dark .karaoke-video-notice {
  background: rgba(229, 57, 53, 0.12);
  border-top-color: rgba(229, 57, 53, 0.35);
  color: #ff8a80;
}
html.dark .resource-group-clean-title,
html.dark .resource-group-clean-title-static,
html.dark .site-footer-col-title,
html.dark .page-hero h1 {
  color: var(--foreground);
}
html.dark input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
html.dark textarea,
html.dark select {
  background: var(--background, #0c0f0e) !important;
  color: var(--foreground) !important;
  border-color: var(--border) !important;
}
html.dark .modal-overlay {
  background: rgba(0, 0, 0, 0.65);
}
html.dark .admin-table,
html.dark .admin-table th,
html.dark .admin-table td {
  background: var(--card) !important;
  color: var(--foreground) !important;
  border-color: var(--border) !important;
}
html.dark .admin-table th {
  background: #1a221e !important;
  color: var(--muted) !important;
}
html.dark .resource-list-pagination-btn,
html.dark .help-center-head,
html.dark .help-side-nav,
html.dark .member-msg-item,
html.dark .publish-tips-strip,
html.dark .search-result-link,
html.dark .dl-link-card {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--foreground);
}
html.dark .help-center-head {
  background: linear-gradient(135deg, #087a44 0%, #00a356 48%, #00bb61 100%) !important;
  color: #fff;
}
html.dark .resource-list-pagination-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}
html.dark .btn-outline {
  background: transparent !important;
}

/* ===== Responsive polish ===== */
@media (max-width: 900px) {
  .search-layout {
    grid-template-columns: 1fr;
  }
  /* 小屏搜索结果：隐藏侧栏「最新资源 / 帮助中心」等 */
  .search-aside {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .admin-table-wrap,
  .search-page,
  .page-section,
  .karaoke-panel,
  .site-card {
    max-width: 100%;
  }
  .admin-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .resource-list-pagination-links {
    flex-wrap: wrap;
    justify-content: center;
  }
  .resource-group-list,
  .resource-group--clean,
  .resource-group-item,
  .resource-group-item-link,
  .resource-group-item-title,
  .resource-group-item-title-text {
    min-width: 0;
    max-width: 100%;
  }
  .resource-group-item-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  .resource-group-item-link,
  .resource-group-item-body {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
  img,
  video,
  iframe {
    max-width: 100%;
  }
  .modal-box {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin: 12px auto;
  }
}

@media (max-width: 480px) {
  .package-grid {
    grid-template-columns: 1fr !important;
  }
  .karaoke-spec-grid {
    grid-template-columns: 1fr !important;
  }
  .dl-link-card-actions {
    flex-wrap: wrap;
  }
  .dl-download-btn {
    flex: 1 1 100%;
  }
}

/* ?????? / ???? */
.member-msg-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}
.header-msg-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--primary);
  color: #fff !important;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
}
.header-user-trigger {
  position: relative;
}
.header-msg-dot--on-trigger {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  font-size: 10px;
  pointer-events: none;
}
.member-msg-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.member-msg-main {
  min-width: 0;
  flex: 1;
}
.sidebar-nav .member-msg-badge {
  margin-left: 4px;
}

/* ===== ???/?????????????????? ===== */
.auth-split {
  display: grid !important;
  grid-template-columns: minmax(300px, 0.95fr) minmax(340px, 1.05fr) !important;
  gap: 0;
  max-width: 1080px;
  margin: 16px auto 40px;
  border: 1px solid var(--border, #dde5e1);
  border-radius: 3px;
  background: #fff;
  overflow: hidden;
  min-height: 580px;
  box-shadow: 0 10px 36px rgba(15, 40, 28, 0.06);
}
.auth-split-aside {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  padding: 44px 36px;
  min-width: 0;
  background:
    radial-gradient(680px 360px at -10% -10%, rgba(0,187,97,.22), transparent 55%),
    radial-gradient(420px 260px at 110% 110%, rgba(8,122,68,.08), transparent 50%),
    linear-gradient(165deg, #e7f8ef 0%, #f4fbf7 55%, #f8fcfa 100%);
  border-right: 1px solid #dceae2;
}
.auth-split-ad { width: 100%; }
.auth-split-ad .site-ad-img { width: 100%; height: auto; display: block; border-radius: 3px; }
.auth-split-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}
.auth-split-logo {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #00bb61;
  border-radius: 3px;
  flex-shrink: 0;
}
.auth-split-brand-name {
  font-size: 16px;
  font-weight: 800;
  color: #1a1f1c;
  letter-spacing: .02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auth-split-headline {
  margin: 0 0 14px;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.25;
  color: #1a1f1c;
}
.auth-split-underline {
  display: block;
  width: 52px;
  height: 4px;
  background: #00bb61;
  border-radius: 2px;
  margin-bottom: 28px;
}
.auth-split-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.auth-split-features li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: flex-start;
}
.auth-split-ico {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #00bb61;
  color: #fff;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
.auth-split-features strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #1a1f1c;
  margin-bottom: 4px;
}
.auth-split-features p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #6b7a72;
}
.auth-split-note {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px dashed #cdeedc;
  font-size: 13px;
  color: #6b7a72;
  line-height: 1.6;
  max-height: 120px;
  overflow: auto;
}
.auth-split-main {
  padding: 42px 48px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  background: #fff;
}
.auth-split-head {
  text-align: center;
  margin-bottom: 22px;
}
.auth-split-head--row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  margin-bottom: 18px;
}
.auth-split-head h1 {
  margin: 0 0 12px;
  font-size: 28px;
  font-weight: 800;
  color: #1a1f1c;
}
.auth-split-head--row h1 {
  margin: 0;
  font-size: 26px;
}
.auth-split-head-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: 1px;
  background: #e5eee9;
  margin: 0 auto 14px;
  max-width: 160px;
  position: relative;
}
.auth-split-head-line span {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00bb61;
}
.auth-split-switch {
  margin: 0;
  font-size: 14px;
  color: #6b7a72;
  flex-shrink: 0;
}
.auth-split-head--row .auth-split-switch {
  text-align: right;
}
.auth-split-switch a {
  color: #00bb61;
  font-weight: 600;
  text-decoration: none;
}
.auth-split-switch a:hover { text-decoration: underline; }
.auth-split-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 18px;
  background: #e8faf1;
  border: 1px solid #b7ebc9;
  border-radius: 3px;
  font-size: 13px;
  color: #087a44;
}
.auth-split-banner a {
  flex-shrink: 0;
  color: #00bb61;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.auth-split-banner a:hover { text-decoration: underline; }
.auth-split-invite-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 42px;
  margin-bottom: 18px;
  background: var(--primary, #00bb61);
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
  border-radius: 3px;
  border: 0;
  box-sizing: border-box;
  transition: background .15s ease;
}
.auth-split-invite-btn:hover {
  background: var(--primary-hover, #00a356);
  color: #fff !important;
}
.auth-split-form { margin: 0; }
.auth-split-field {
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}
.auth-split-field label {
  margin: 0 !important;
  font-size: 14px;
  font-weight: 600;
  color: #1a1f1c;
  text-align: left;
}
.auth-split-input input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #dde5e1;
  border-radius: 6px;
  background: #fff;
  font: inherit;
  color: #1a1f1c;
  box-sizing: border-box;
}
.auth-split-input input:focus {
  outline: none;
  border-color: #00bb61;
  box-shadow: 0 0 0 3px rgba(0,187,97,.14);
}
.auth-split-submit {
  display: block;
  width: 100%;
  height: 46px;
  margin-top: 10px;
  border: 0;
  border-radius: 6px;
  background: #00bb61;
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.auth-split-submit:hover { background: #00a356; }
.auth-split-remember {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin: 2px 0 4px;
}
.auth-split-remember-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  font-size: 13px;
  font-weight: 600;
  color: #1a1f1c;
  cursor: pointer;
  user-select: none;
}
.auth-split-remember-label input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #00bb61;
  cursor: pointer;
}
.auth-split-remember-hint {
  font-size: 12px;
  color: #94a3b8;
}
.auth-split-field--captcha .auth-split-captcha {
  display: flex;
  align-items: stretch;
  gap: 10px;
  min-width: 0;
}
.auth-split-captcha input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #dde5e1;
  border-radius: 6px;
  background: #fff;
  font: inherit;
  color: #1a1f1c;
  box-sizing: border-box;
}
.auth-split-captcha input:focus {
  outline: none;
  border-color: #00bb61;
  box-shadow: 0 0 0 3px rgba(0,187,97,.14);
}
.auth-split-captcha-img {
  flex: 0 0 auto;
  width: 120px;
  height: 44px;
  padding: 0;
  border: 1px solid #dde5e1;
  border-radius: 6px;
  background: #f5f8f6;
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
}
.auth-split-captcha-img img {
  display: block;
  width: 120px;
  height: 40px;
  margin: 2px 0;
  object-fit: contain;
}
.auth-split-captcha-img:hover {
  border-color: #00bb61;
}
.auth-split-agree,
.auth-split-extra {
  margin: 14px 0 0;
  text-align: center;
  font-size: 12px;
  color: #6b7a72;
}
.auth-split-agree a,
.auth-split-extra a {
  color: #00bb61;
  font-weight: 600;
  text-decoration: none;
}
.auth-split-agree a:hover,
.auth-split-extra a:hover { text-decoration: underline; }
.auth-split-main .alert { margin-bottom: 14px; }

@media (max-width: 900px) {
  .auth-split {
    grid-template-columns: 1fr !important;
    min-height: 0;
  }
  .auth-split-aside {
    display: none !important;
  }
  .auth-split-main { padding: 28px 20px 32px; }
  .auth-split-field {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

html.dark .auth-split,
html.dark .auth-split-main {
  background: var(--card, #141918) !important;
  border-color: var(--border, #2a3330);
}
html.dark .auth-split-aside {
  background:
    radial-gradient(680px 360px at -10% -10%, rgba(0,187,97,.16), transparent 55%),
    linear-gradient(165deg, #141918, #121816);
  border-color: var(--border, #2a3330);
}
html.dark .auth-split-brand-name,
html.dark .auth-split-headline,
html.dark .auth-split-head h1,
html.dark .auth-split-features strong,
html.dark .auth-split-captcha input {
  background: #0c0f0e !important;
  color: #e8eeeb !important;
  border-color: #2a3330 !important;
}
html.dark .auth-split-captcha-img {
  background: #141918 !important;
  border-color: #2a3330 !important;
}
html.dark .auth-split-remember-label { color: #e8eeeb !important; }
html.dark .auth-split-remember-hint { color: #7a8780 !important; }
html.dark .auth-split-field label {
  color: var(--text, #e8eeeb);
}
html.dark .auth-split-features p,
html.dark .auth-split-switch,
html.dark .auth-split-agree {
  color: var(--muted, #94a39a);
}
html.dark .auth-split-input input {
  background: #0c0f0e !important;
  color: var(--text, #e8eeeb) !important;
  border-color: var(--border, #2a3330) !important;
}
html.dark .auth-split-banner {
  background: rgba(0,187,97,.12);
  border-color: rgba(0,187,97,.28);
  color: #7ddea8;
}
html.dark .auth-split-invite-btn {
  background: var(--primary, #00bb61);
  color: #fff !important;
}
html.dark .auth-split-invite-btn:hover {
  background: var(--primary-hover, #00a356);
}