/* shubazhijia.top: make every non-home page use the homepage red-gold palette. */
:root {
  --site-red: #cc0001;
  --site-red-dark: #7b0000;
  --site-red-bright: #e1251b;
  --site-red-text: #b20b0b;
  --site-gold: #d7b970;
  --site-gold-dark: #b28728;
  --site-cream: #fff3c1;
  --site-cream-soft: #fff9ea;
  --site-page: #f3f3f3;
  --site-ink: #202124;
  --site-muted: #777;
  --site-line: #ececec;
  --kf-lime: #ffd67c;
  --kf-lime-strong: #e1251b;
  --kf-green: #cc0001;
  --kf-green-deep: #b20b0b;
  --kf-green-soft: #fff3c1;
  --kf-ink: #202124;
  --kf-page-green: #f3f3f3;
}

/* Use the same calm light-gray canvas as the homepage, not the legacy pink/green canvas. */
html,
body,
page,
html body #app,
html body #app::before {
  background: var(--site-page) !important;
  background-image: none !important;
  background-attachment: fixed !important;
}

html body #app > :where([class*="-page"]:not(.home-page)),
html body #app :where([class*="-page"].safe-page:not(.home-page)),
html body #app :where(.page-with-tab:not(.home-page)) {
  background-color: var(--site-page) !important;
  background-image: none !important;
  color: var(--site-ink) !important;
}

html body #app > :where([class*="-page"]:not(.home-page))::before,
html body #app :where([class*="-page"].safe-page:not(.home-page))::before {
  background-color: var(--site-page) !important;
  background-image: none !important;
}

/* Shared top bars and primary navigation. */
html body #app .top-red,
html body #app .check-page .check-header {
  background: linear-gradient(90deg, var(--site-red-dark), var(--site-red) 62%, var(--site-red-bright)) !important;
  color: #fff7d3 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html body #app .top-red .top-title,
html body #app .top-red .right,
html body #app .check-page .check-header {
  color: #fff7d3 !important;
}

html body #app .h5-tabbar {
  background: #fff !important;
  border-top: 1px solid #ececec !important;
  box-shadow: 0 -4px 18px rgba(30, 32, 36, .10) !important;
}

html body #app .h5-tabbar button {
  background: #fff !important;
  color: #5d5e61 !important;
}

html body #app .h5-tabbar button.active {
  color: var(--site-red) !important;
}

/* Shared surfaces. */
html body #app > [class*="-page"]:not(.home-page) .card,
html body #app > [class*="-page"]:not(.home-page) .soft-card,
html body #app .authors-page .author-card,
html body #app .record-page .record-card,
html body #app .order-page .order-card,
html body #app .categories-page .category-card {
  background-color: #fff !important;
  border-color: var(--site-line) !important;
  box-shadow: 0 2px 9px rgba(24, 24, 24, .045) !important;
}

html body #app > [class*="-page"]:not(.home-page) .input,
html body #app > [class*="-page"]:not(.home-page) .textarea,
html body #app > [class*="-page"]:not(.home-page) input,
html body #app > [class*="-page"]:not(.home-page) textarea {
  caret-color: var(--site-red) !important;
}

/* Primary actions use the homepage's deep red; secondary actions use its cream/gold. */
html body #app > [class*="-page"]:not(.home-page) .btn:not(.secondary):not(.ghost),
html body #app .apply-page .submit-btn,
html body #app .digital-publish-page .bottom-submit button,
html body #app .publish-list-page .publish-tools button,
html body #app .publish-list-page .pub-actions button:not(.publiced):not(:disabled),
html body #app .check-page .check-submit button,
html body #app .authors-page .add-author,
html body #app .authors-page .modal-actions .save,
html body #app .categories-page .small-btn:not(.danger),
html body #app .login-page .wechat-login-hotspot,
html body #app .login-page .account-login-hotspot,
html body #app .code-btn {
  background: linear-gradient(180deg, var(--site-red-bright), var(--site-red)) !important;
  background-image: linear-gradient(180deg, var(--site-red-bright), var(--site-red)) !important;
  color: #fff !important;
  border-color: var(--site-red) !important;
  box-shadow: 0 8px 18px rgba(91, 0, 0, .18) !important;
}

html body #app > [class*="-page"]:not(.home-page) .btn.secondary,
html body #app .publish-list-page .category-filter button,
html body #app .authors-page .category-tabs button,
html body #app .authors-page .play-tags button,
html body #app .authors-page .count-tags button,
html body #app .check-page .check-category-list button {
  background: var(--site-cream-soft) !important;
  color: #333 !important;
  border-color: rgba(215, 185, 112, .55) !important;
}

html body #app .publish-list-page .category-filter .active,
html body #app .publish-list-page .inline-perm.active,
html body #app .authors-page .category-tabs button.active,
html body #app .authors-page .play-tags button.active,
html body #app .authors-page .count-tags button.active,
html body #app .check-page .check-category-list button.active,
html body #app .digital-publish-page .category-panel button.active,
html body #app .digital-publish-page .play-modal-grid button.active,
html body #app .digital-publish-page .red-black-tabs button.active,
html body #app .digital-publish-page .switch-button.active {
  background: var(--site-red) !important;
  background-image: none !important;
  color: #fff !important;
  border-color: var(--site-red) !important;
  box-shadow: none !important;
}

html body #app .publish-list-page .segment button.active,
html body #app .publish-list-page .segment .active,
html body #app .login-page .forget-hotspot,
html body #app .login-page .register-hotspot,
html body #app .detail-page .unlock-bottom text,
html body #app .digital-publish-page .field-value.red,
html body #app .digital-publish-page .selected-author,
html body #app .digital-publish-page .selected-play-chip,
html body #app .digital-publish-page .selected-play-chip > text {
  color: var(--site-red-text) !important;
}

html body #app .publish-list-page .segment {
  background: #ececec !important;
  border-color: #fff !important;
}

html body #app .publish-list-page .segment button.active {
  background: #fff !important;
  color: var(--site-red) !important;
}

html body #app .check-page .check-open-grid,
html body #app .publish-list-page .quick-pool-card,
html body #app .check-page .check-preview {
  background: var(--site-cream-soft) !important;
  color: var(--site-red-text) !important;
  border-color: rgba(215, 185, 112, .62) !important;
}

/* Login: keep its layout, but replace the pink/green mix with the homepage red-gold system. */
html body #app .login-page,
html body #app .login-page.account,
html body #app .login-page.wechat {
  background: #fff !important;
  background-image: none !important;
  color: var(--site-ink) !important;
}

html body #app .login-page::before,
html body #app .login-page.account::before,
html body #app .login-page.wechat::before {
  display: block !important;
  background:
    radial-gradient(circle at 24% 12%, rgba(255, 241, 172, .20), transparent 32%),
    linear-gradient(180deg, var(--site-red-dark) 0%, var(--site-red) 58%, var(--site-red-bright) 100%) !important;
}

html body #app .login-page::after {
  background: #fff !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html body #app .login-page .login-brand-dynamic,
html body #app .login-page .login-welcome,
html body #app .login-page .login-subtitle,
html body #app .login-page .login-logo-mark {
  color: #fff7d3 !important;
}

html body #app .login-page .login-logo-mark {
  border-color: #ffe9a2 !important;
  text-shadow: 0 2px 6px rgba(91, 0, 0, .35) !important;
}

html body #app .login-page .tab-hotspot {
  background: var(--site-red) !important;
  color: #fff !important;
  border-color: transparent !important;
}

html body #app .login-page.wechat .wechat-tab,
html body #app .login-page.account .account-tab {
  background: #fff !important;
  color: var(--site-red) !important;
  box-shadow: 0 -2px 10px rgba(91, 0, 0, .08) !important;
}

html body #app .login-page.wechat .account-tab,
html body #app .login-page.account .wechat-tab {
  background: var(--site-red) !important;
  color: #fff !important;
}

html body #app .login-page .wechat-login-hotspot,
html body #app .login-page .account-login-hotspot {
  box-shadow: 0 10px 20px rgba(91, 0, 0, .20) !important;
}

html body #app .login-page .exact-input,
html body #app .login-page.account .phone-input,
html body #app .login-page.account .password-input {
  background: #fff !important;
  color: var(--site-ink) !important;
  border-color: rgba(204, 0, 1, .20) !important;
  caret-color: var(--site-red) !important;
}

/* Account/mine page. */
html body #app .mine-page .profile-card,
html body #app .mine-page .mine-head .profile-card {
  background:
    linear-gradient(90deg, rgba(255, 241, 172, .10), transparent 44%),
    linear-gradient(135deg, var(--site-red-dark), var(--site-red) 68%, var(--site-red-bright)) !important;
  color: #fff7d3 !important;
  border: 1px solid rgba(215, 185, 112, .62) !important;
  box-shadow: 0 4px 14px rgba(91, 0, 0, .14) !important;
}

html body #app .mine-page .profile-name,
html body #app .mine-page .mine-name,
html body #app .mine-page .phone-line,
html body #app .mine-page .profile-arrow {
  color: #fff7d3 !important;
}

html body #app .mine-page .mine-head .mine-name {
  color: #7b0000 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .72) !important;
}

html body #app .mine-page .mine-avatar,
html body #app .order-page .order-avatar {
  border-color: #ffe9a2 !important;
  box-shadow: 0 0 0 4px rgba(255, 213, 90, .16) !important;
}

html body #app .mine-page .promoter-badge {
  background: linear-gradient(90deg, #ffe9a2, #d7b970) !important;
  color: #7b0000 !important;
}

html body #app .mine-page .wallet-panel {
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 243, 193, .25), transparent 30%),
    linear-gradient(135deg, #d9362c 0%, #d41116 58%, #b20b0b 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(215, 185, 112, .68) !important;
  box-shadow: 0 8px 20px rgba(123, 0, 0, .18) !important;
}

html body #app .mine-page .wallet-panel .wallet-title,
html body #app .mine-page .wallet-panel .wallet-link,
html body #app .mine-page .wallet-panel .balance,
html body #app .mine-page .wallet-panel .balance text {
  color: #fff !important;
}

html body #app .mine-page .wallet-panel .wallet-income {
  color: rgba(255, 255, 255, .84) !important;
}

html body #app .mine-page .wallet-panel .withdraw {
  background: #fff3c1 !important;
  color: #7b0000 !important;
}

html body #app .mine-page .charge-float,
html body #app .mine-page .commission-strip {
  background: var(--site-red) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(91, 0, 0, .20) !important;
}

/* Author/category management. */
html body #app .authors-page,
html body #app .authors-page.safe-page {
  background: var(--site-page) !important;
  color: var(--site-ink) !important;
}

html body #app .authors-page .edit-btn,
html body #app .authors-page .delete-btn {
  background: var(--site-red) !important;
  color: #fff !important;
}

html body #app .authors-page .copy-btn,
html body #app .authors-page .sort-author-btn,
html body #app .author-sort-input {
  background: var(--site-gold-dark) !important;
  color: #fff !important;
}

html body #app .categories-page {
  --category-select-accent: var(--site-red);
  --category-select-accent-soft: rgba(204, 0, 1, .12);
  --category-select-border: rgba(215, 185, 112, .55);
  --category-select-bg: var(--site-cream-soft);
  --category-select-text: var(--site-ink);
}

/* Publish/check/detail/history. Preserve lottery ball colors because they carry meaning. */
html body #app .digital-publish-page,
html body #app .digital-publish-page .publish-form,
html body #app .publish-list-page,
html body #app .record-page,
html body #app .detail-page {
  background-color: var(--site-page) !important;
  color: var(--site-ink) !important;
}

html body #app .check-page {
  background: linear-gradient(180deg, var(--site-red) 0, var(--site-red) 82px, var(--site-page) 82px, var(--site-page)) !important;
  color: var(--site-ink) !important;
}

html body #app .check-page .check-body {
  background: var(--site-page) !important;
}

html body #app .detail-page .pill-red,
html body #app .detail-page .unlock-card .section-pill.pill-red,
html body #app .detail-page .unlock-bottom button,
html body #app .digital-publish-page .play-picker-btn,
html body #app .digital-publish-page .generate-btn,
html body #app .digital-publish-page .price-apply button {
  background: var(--site-red) !important;
  background-image: none !important;
  color: #fff !important;
  border-color: var(--site-red) !important;
}

html body #app .detail-page .summary-meta .verify-badge.official {
  background: var(--site-cream) !important;
  color: var(--site-red-text) !important;
  border-color: var(--site-gold) !important;
}

html body #app .detail-page .summary-meta .verify-badge.official::before {
  background: var(--site-red-text) !important;
}

html body #app .detail-page .summary-meta .verify-badge.official::after {
  color: var(--site-red-text) !important;
}

html body #app .detail-page .public-ribbon::before,
html body #app .record-page .public-ribbon::before {
  background: linear-gradient(135deg, var(--site-red) 0 50%, transparent 50%) !important;
}

html body #app .record-page .record-paid {
  color: var(--site-gold-dark) !important;
}

/* Application and QR/code pages. */
html body #app .apply-page {
  background: linear-gradient(180deg, #fff3c1 0, var(--site-page) 44%, var(--site-page) 100%) !important;
}

html body #app .apply-page .hero {
  background:
    radial-gradient(circle at 76% 24%, rgba(255, 241, 172, .34) 0, rgba(255, 241, 172, .10) 23%, transparent 24%),
    linear-gradient(145deg, var(--site-red-dark), var(--site-red) 64%, var(--site-red-bright)) !important;
}

html body #app .apply-page .hero-title {
  color: #fff7d3 !important;
  text-shadow: 0 2px 4px rgba(91, 0, 0, .28) !important;
}

html body #app .apply-page .hero-title:first-line {
  color: #ffe9a2 !important;
}

html body #app .apply-page .section-badge,
html body #app .apply-page .hero-pill text:first-child {
  background: linear-gradient(90deg, #fff3c1, #d7b970) !important;
  color: #7b0000 !important;
}

html body #app .code-page,
html body #app .login-page[data-v-53f08f2f] {
  background: linear-gradient(180deg, var(--site-red-dark), var(--site-red) 70%, var(--site-red-bright)) !important;
  color: #fff7d3 !important;
}

html body #app .code-page .desc,
html body #app .code-page .return {
  color: var(--site-red-text) !important;
  border-color: var(--site-gold) !important;
  background: #fff !important;
}

/* Remove the last old green theme artifacts without changing semantic green content. */
html body #app .float-back:not(.codex-home-backtop) {
  color: var(--site-red-text) !important;
  border-color: rgba(204, 0, 1, .48) !important;
  background: #fff !important;
}