/*
 * ZBaiArt friendly UI foundation v2.
 * Loaded after the legacy and route-specific styles so the current PHP
 * controllers keep their behavior while every route shares one visual system.
 */

:root {
    color-scheme: light;
    --zb-coral-50: #fff7f4;
    --zb-coral-100: #ffede8;
    --zb-coral-200: #ffd8d0;
    --zb-coral-300: #ffb6a9;
    --zb-coral-400: #ff8b7c;
    --zb-coral-500: #ff6f61;
    --zb-coral-600: #e8584e;
    --zb-coral-700: #bd433b;
    --zb-cream: #fffaf7;
    --zb-paper: #fffefd;
    --zb-paper-warm: #fff6f1;
    --zb-sage: #78a58d;
    --zb-sage-soft: #edf7f0;
    --zb-gold: #e8aa4b;
    --zb-gold-soft: #fff5df;
    --zb-ink: #20262e;
    --zb-ink-soft: #3d4650;
    --zb-muted: #6d7883;
    --zb-quiet: #98a0a8;
    --zb-line: #eadfd9;
    --zb-line-strong: #ddcfc8;
    --zb-positive: #3c8d68;
    --zb-danger: #c44c55;
    --zb-info: #487da8;
    --zb-action: #bd433b;
    --zb-action-hover: #a9342d;
    --zb-patreon: #c93a69;
    --zb-label: #775f57;
    --zb-radius-xs: 8px;
    --zb-radius-sm: 11px;
    --zb-radius-md: 15px;
    --zb-radius-lg: 20px;
    --zb-radius-xl: 26px;
    --zb-shadow-xs: 0 2px 8px rgba(82, 58, 49, 0.05);
    --zb-shadow-sm: 0 8px 22px rgba(82, 58, 49, 0.08);
    --zb-shadow-md: 0 18px 46px rgba(82, 58, 49, 0.11);
    --zb-shadow-lift: 0 22px 54px rgba(82, 58, 49, 0.15);
    --zb-rail: 224px;
    --zb-content: 1320px;
    --primary: var(--zb-coral-500);
    --primary-dk: var(--zb-coral-600);
    --primary-lt: var(--zb-coral-100);
    --bg: var(--zb-cream);
    --bg-card: var(--zb-paper);
    --bg-card2: var(--zb-paper-warm);
    --border: var(--zb-line);
    --text: var(--zb-ink);
    --muted: var(--zb-muted);
    --radius: var(--zb-radius-md);
}

html {
    min-width: 0;
    background: var(--zb-cream);
    scroll-padding-top: 88px;
}

body.zb-friendly-ui {
    min-width: 0;
    margin: 0;
    overflow-x: clip;
    background:
        radial-gradient(circle at 91% -4%, rgba(255, 185, 165, 0.16), transparent 31rem),
        radial-gradient(circle at 17% 32%, rgba(232, 170, 75, 0.055), transparent 24rem),
        linear-gradient(180deg, #fffefd 0, var(--zb-cream) 32rem, #fff7f2 100%);
    color: var(--zb-ink);
    font-family: "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body.zb-friendly-ui::before {
    position: fixed;
    z-index: -1;
    inset: 0;
    background-image: radial-gradient(rgba(125, 97, 86, 0.09) 0.7px, transparent 0.7px);
    background-size: 15px 15px;
    content: "";
    opacity: 0.25;
    pointer-events: none;
}

body.zb-friendly-ui ::selection {
    background: var(--zb-coral-200);
    color: #49231f;
}

body.zb-friendly-ui :where(img, video, iframe, canvas, svg) {
    max-width: 100%;
}

body.zb-friendly-ui :where(h1, h2, h3, h4) {
    color: var(--zb-ink);
    font-family: "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

body.zb-friendly-ui :where(p, li, dd) {
    text-wrap: pretty;
}

body.zb-friendly-ui :where(a) {
    color: var(--zb-coral-700);
    text-underline-offset: 0.18em;
}

body.zb-friendly-ui :where(a:hover) {
    color: var(--zb-coral-600);
}

body.zb-friendly-ui :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid rgba(255, 111, 97, 0.32);
    outline-offset: 3px;
}

body.zb-friendly-ui :where(button, input, select, textarea) {
    font: inherit;
}

body.zb-friendly-ui :where(button, [role="button"], input[type="submit"], input[type="button"]) {
    touch-action: manipulation;
}

/* Shared shell and navigation */
body.zb-friendly-ui .navbar {
    z-index: 1000;
    border-color: var(--zb-line);
    background: rgba(255, 254, 253, 0.94);
    box-shadow: 0 9px 34px rgba(82, 58, 49, 0.08);
    backdrop-filter: blur(20px) saturate(125%);
}

body.zb-friendly-ui .nav-inner {
    max-width: 1720px;
}

body.zb-friendly-ui .nav-logo {
    position: relative;
    color: var(--zb-ink);
    font-size: 1.55rem;
    font-weight: 900;
    letter-spacing: -0.065em;
    text-decoration: none;
}

body.zb-friendly-ui .nav-logo span {
    color: var(--zb-coral-500);
}

body.zb-friendly-ui .nav-logo:hover {
    color: var(--zb-ink);
}

body.zb-friendly-ui .nav-links {
    scrollbar-color: var(--zb-coral-200) transparent;
    scrollbar-width: thin;
}

body.zb-friendly-ui .nav-section-label {
    color: var(--zb-label);
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

body.zb-friendly-ui .nav-links a:not(.btn-patreon):not(.btn-patreon-login) {
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: var(--zb-radius-sm);
    color: #58626c;
    font-size: 0.8rem;
    font-weight: 750;
    text-decoration: none;
    transition: transform 150ms ease, background 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

body.zb-friendly-ui .nav-links a:not(.btn-patreon):not(.btn-patreon-login):hover,
body.zb-friendly-ui .nav-links a:not(.btn-patreon):not(.btn-patreon-login):focus-visible {
    border-color: var(--zb-coral-200);
    background: var(--zb-coral-50);
    box-shadow: var(--zb-shadow-xs);
    color: var(--zb-coral-700);
    transform: translateX(2px);
}

body.zb-friendly-ui .nav-links a.is-active:not(.btn-patreon):not(.btn-patreon-login),
body.zb-friendly-ui .nav-links a[aria-current="page"]:not(.btn-patreon):not(.btn-patreon-login) {
    border-color: #f3d6ce;
    background: linear-gradient(135deg, #fff0eb, #fff8f5);
    box-shadow: 0 6px 18px rgba(213, 80, 67, 0.08);
    color: var(--zb-action);
}

body.zb-friendly-ui .nav-item-mark {
    display: inline-grid;
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    place-items: center;
    border: 1px solid #ead9d2;
    border-radius: 8px;
    background: #fff;
    color: #8c7c74;
    font-size: 0.82rem;
    line-height: 1;
}

body.zb-friendly-ui .nav-links a:hover .nav-item-mark,
body.zb-friendly-ui .nav-links a.is-active .nav-item-mark,
body.zb-friendly-ui .nav-links a[aria-current="page"] .nav-item-mark {
    border-color: var(--zb-action);
    background: var(--zb-action);
    color: #fff;
}

body.zb-friendly-ui .nav-support-label {
    margin-top: 13px;
}

body.zb-friendly-ui :where(.btn-patreon, .btn-patreon-login, .btn-patreon-cta, .btn-unlock-patreon, .public-compact-cta) {
    min-height: 44px;
    border: 1px solid var(--zb-patreon);
    border-radius: var(--zb-radius-sm);
    background: var(--zb-patreon);
    box-shadow: 0 10px 22px rgba(217, 78, 66, 0.18);
    color: #fff !important;
    font-weight: 800;
    text-decoration: none;
}

body.zb-friendly-ui :where(.btn-patreon, .btn-patreon-login, .btn-patreon-cta, .btn-unlock-patreon, .public-compact-cta):hover {
    border-color: var(--zb-coral-700);
    background: #ad2f5b;
    box-shadow: 0 13px 26px rgba(197, 64, 53, 0.22);
    color: #fff !important;
    transform: translateY(-1px);
}

body.zb-friendly-ui .nav-account-group {
    border-color: var(--zb-line);
}

body.zb-friendly-ui .nav-account-group a {
    gap: 8px;
}

body.zb-friendly-ui .nav-user {
    border: 1px solid var(--zb-line);
    border-radius: var(--zb-radius-sm);
    background: var(--zb-paper-warm);
}

body.zb-friendly-ui .nav-username {
    color: var(--zb-ink-soft);
}

body.zb-friendly-ui .patron-badge,
body.zb-friendly-ui .nav-alert-pill {
    border-color: #f4c3b9;
    background: var(--zb-coral-100);
    color: var(--zb-coral-700);
}

body.zb-friendly-ui .nav-scroll-cue {
    display: none !important;
}

body.zb-friendly-ui .main-content {
    min-width: 0;
    min-height: 72vh;
}

body.zb-friendly-ui :where(.container, .chars-page, .profile-wrap, .blog-shell, .public-feed-shell, .official-shell, .lb-wrap, .rc-wrap, .rp-wrap, .ch-wrap, .sh-wrap) {
    width: min(100%, var(--zb-content));
    max-width: var(--zb-content);
}

/* Common interactive surfaces */
body.zb-friendly-ui :where(
    .btn-primary, .btn-secondary, .btn-coming-soon, .btn-logout, .btn-vote,
    .btn-boost, .btn-boost-lb, .btn-lb-vote, .btn-load-more, .choice-btn,
    .public-lane-btn, .shop-open-btn, .cn-vote-btn, .tier-pricing-cta,
    .btn-how-voting, .btn-reset, .filter-chip-link, .top-tab, .subtab,
    .profile-tab-btn, .myvotes-action, .ch-button, .sh-button, .rc-button,
    .rp-action, .blog-action, .public-feed-action, .official-action
) {
    min-height: 44px;
    border-radius: var(--zb-radius-sm);
    font-weight: 780;
    transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease, border-color 150ms ease, color 150ms ease;
}

body.zb-friendly-ui :where(button, .btn-primary, .btn-secondary, .top-tab, .filter-chip-link, .subtab, .profile-tab-btn):not(:disabled):hover {
    transform: translateY(-1px);
}

body.zb-friendly-ui :where(.search-input-main, .form-input, .char-modal-input, input[type="search"], input[type="text"], input[type="email"], input[type="url"], textarea, select) {
    min-height: 44px;
    border: 1px solid var(--zb-line);
    border-radius: var(--zb-radius-sm);
    background: #fff;
    box-shadow: var(--zb-shadow-xs);
    color: var(--zb-ink);
}

body.zb-friendly-ui :where(.search-input-main, .form-input, .char-modal-input, input[type="search"], input[type="text"], input[type="email"], input[type="url"], textarea, select):focus {
    border-color: var(--zb-coral-400);
    box-shadow: 0 0 0 4px rgba(255, 111, 97, 0.11), var(--zb-shadow-xs);
}

body.zb-friendly-ui :where(input, textarea)::placeholder {
    color: #98a0a8;
}

body.zb-friendly-ui :where(.top-tab-bar, .subtab-bar, .filter-chip-row, .ci-sort-row, .ci-actions, .rc-links, .rp-actions, .blog-actions, .public-feed-actions, .official-actions) {
    scrollbar-color: var(--zb-coral-200) transparent;
    scrollbar-width: thin;
}

body.zb-friendly-ui :where(.top-tab, .subtab, .filter-chip-link, .ci-action, .rc-link, .rp-action, .blog-action, .public-feed-action, .official-action) {
    border-color: var(--zb-line);
    background: #fff;
    color: #5e6872;
    text-decoration: none;
}

body.zb-friendly-ui :where(.top-tab, .subtab, .filter-chip-link, .ci-action, .rc-link, .rp-action, .blog-action, .public-feed-action, .official-action):hover,
body.zb-friendly-ui :where(.top-tab.active, .top-tab.is-active, .subtab.active, .subtab.is-active, .filter-chip-link.active, .filter-chip-link.is-active, .ci-action.is-active) {
    border-color: var(--zb-coral-300);
    background: var(--zb-coral-100);
    color: var(--zb-coral-700);
}

body.zb-friendly-ui :where(
    .support-card, .patreon-gate-banner, .character-card, .upcoming-card,
    .myvotes-card, .hof-card, .recap-card, .series-card, .character-index-card,
    .series-index-card, .suggestion-card, .queue-card, .profile-card,
    .community-card, .public-compact-join, .site-not-found-panel,
    .lb-panel, .blog-feature, .blog-card, .public-feed-feature, .public-feed-card,
    .official-panel, .campaign-teaser, .western-lane-block
) {
    border-color: var(--zb-line);
    border-radius: var(--zb-radius-md);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--zb-shadow-sm);
}

body.zb-friendly-ui :where(
    .support-card, .character-card, .upcoming-card, .myvotes-card, .hof-card,
    .recap-card, .series-card, .character-index-card, .series-index-card,
    .suggestion-card, .blog-card, .public-feed-card
):hover {
    border-color: var(--zb-coral-300);
    box-shadow: var(--zb-shadow-lift);
    transform: translateY(-2px);
}

body.zb-friendly-ui :where(.tag, .badge, .status-chip, .tier-badge, .pill, .chip) {
    border-color: var(--zb-line);
    background: var(--zb-paper-warm);
    color: #6f625c;
}

body.zb-friendly-ui :where(.vote-progress-bar, .char-vote-track, .cn-progress-track, .track, .profile-make-meter) {
    background: #f0e7e2;
}

body.zb-friendly-ui :where(.vote-progress-fill, .char-vote-fill, .cn-progress-fill, .fill, .profile-make-meter span) {
    background: linear-gradient(90deg, var(--zb-coral-500), #f1ad59);
}

body.zb-friendly-ui :where(.page-header, .chars-header, .ci-head, .rc-head, .rp-head-copy, .blog-head, .public-feed-head, .official-head, .lb-head) {
    border-color: var(--zb-line);
}

body.zb-friendly-ui :where(.page-header h1, .chars-header h1, .ci-head h1, .rc-head h1, .rp-head h1, .blog-head h1, .public-feed-head h1, .official-head h1, .lb-head h1) {
    color: var(--zb-ink);
    font-size: clamp(2rem, 4.4vw, 3.65rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

/* Home */
body.zb-route-index .choice-hero {
    padding-top: clamp(30px, 5vw, 72px);
}

body.zb-route-index .choice-hero-inner {
    width: min(100%, 1360px);
}

body.zb-route-index .home-landing-copy {
    align-self: center;
}

body.zb-route-index .home-eyebrow,
body.zb-route-index .home-mini-kicker,
body.zb-route-index .home-crawl-kicker {
    color: var(--zb-coral-600);
    font-weight: 850;
    letter-spacing: 0.12em;
}

body.zb-route-index .home-landing-copy h1 {
    max-width: 10ch;
    font-size: clamp(2.7rem, 5.6vw, 5.25rem);
    line-height: 0.92;
    letter-spacing: -0.07em;
}

body.zb-route-index .home-pull-line {
    color: var(--zb-ink-soft);
}

body.zb-route-index .home-pull-accent {
    color: var(--zb-action);
}

body.zb-route-index .home-quality-strip {
    border-color: var(--zb-line);
    border-radius: var(--zb-radius-lg);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--zb-shadow-sm);
}

body.zb-route-index .choice-card {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.68);
    border-radius: var(--zb-radius-lg);
    box-shadow: var(--zb-shadow-md);
}

body.zb-route-index .choice-card:hover {
    box-shadow: var(--zb-shadow-lift);
    transform: translateY(-3px);
}

body.zb-route-index :where(.home-discovery-primer, .home-crawl-strip, .home-discovery-band, .public-conversion, .home-zb3d-shell) {
    border-color: var(--zb-line);
    border-radius: var(--zb-radius-lg);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: var(--zb-shadow-sm);
}

/* Works, Hall, activity, voting */
body.zb-route-zbaiart .zb-page-header {
    background: transparent;
}

body.zb-route-zbaiart .chars-page {
    padding-bottom: 72px;
}

body.zb-route-zbaiart :where(.public-quality-proof, .public-discovery-guide, .tier-pricing-bar, .vote-starter-strip, .coming-next-strip, .cycle-countdown-banner, .act-next-card, .act-rank-card, .act-today-chase) {
    border-color: var(--zb-line);
    border-radius: var(--zb-radius-md);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: var(--zb-shadow-sm);
}

body.zb-route-zbaiart .card-grid {
    gap: clamp(12px, 1.6vw, 20px);
}

body.zb-route-zbaiart .character-card {
    overflow: hidden;
}

body.zb-route-zbaiart .character-card :where(.card-body, .card-info) {
    background: #fff;
}

body.zb-route-halloffame .hof-card,
body.zb-route-zbaiart .hof-card {
    border-left: 4px solid var(--zb-gold);
}

/* Character and series discovery */
body.zb-friendly-ui :where(.ci-wrap, .ch-wrap, .si-wrap, .sh-wrap, .rc-wrap, .rp-wrap, .myvotes-page, .lb-wrap, .blog-shell, .public-feed-shell, .official-shell) {
    margin-inline: auto;
    padding-inline: clamp(16px, 3.2vw, 42px);
}

body.zb-friendly-ui :where(.character-index-card, .series-index-card, .ci-card, .si-card) {
    overflow: hidden;
}

body.zb-friendly-ui :where(.ci-card img, .si-card img, .sh-card img, .ch-rel-card img) {
    background: #f1e9e4;
}

body.zb-route-character-hub :where(.ch-intro, .ch-side, .ch-snapshot, .ch-rel),
body.zb-route-series-hub :where(.sh-head, .sh-card, .sh-paths, .sh-mini),
body.zb-route-recaps :where(.rc-hero, .rc-list, .rc-next),
body.zb-route-recap :where(.rp-head, .rp-section, .rp-panel) {
    border-color: var(--zb-line);
    border-radius: var(--zb-radius-lg);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: var(--zb-shadow-sm);
}

body.zb-route-character-hub .ch-intro h1,
body.zb-route-series-hub .sh-head h1 {
    font-size: clamp(2.15rem, 4.6vw, 4rem);
    line-height: 0.96;
}

body.zb-route-character-hub .ch-progress span,
body.zb-route-series-hub .sh-progress span {
    background: linear-gradient(90deg, var(--zb-coral-500), var(--zb-gold));
}

/* Community, Suggestions, My Votes */
body.zb-route-community .chars-page,
body.zb-route-myvotes .myvotes-page {
    margin-inline: auto;
    padding-bottom: 72px;
}

body.zb-route-community :where(.suggestions-return-banner, .how-it-works, .creator-spotlight-banner, .my-suggestion-banner, .community-hero, .community-feed-card, .suggestion-vote-card, .suggestion-queue-card),
body.zb-route-myvotes :where(.myvotes-hero, .myvotes-stat, .myvotes-section, .myvotes-rollover, .myvotes-empty) {
    border-color: var(--zb-line);
    border-radius: var(--zb-radius-md);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--zb-shadow-sm);
}

body.zb-route-community .suggestions-simplified-tabs,
body.zb-route-community .suggestions-status-subtabs {
    border-color: var(--zb-line);
    background: rgba(255, 255, 255, 0.88);
}

body.zb-route-community :where(.suggestion-card, .queue-card, .community-feed-card) {
    overflow: hidden;
}

body.zb-route-myvotes .myvotes-hero-mark,
body.zb-route-myvotes .myvotes-empty-mark {
    color: var(--zb-coral-500);
    filter: none;
}

/* Profile: friendly frame, while member-selected cosmetics stay intact. */
body.zb-route-profile .profile-wrap {
    margin-inline: auto;
    padding-inline: clamp(12px, 2.8vw, 36px);
    padding-bottom: 76px;
}

body.zb-route-profile .profile-layout-root {
    color: var(--zb-ink);
}

body.zb-route-profile :where(.profile-make-actions, .profile-focus-tabs, .profile-make-card, .profile-section, .profile-panel, .profile-drawer, .showcase-drawer) {
    border-color: var(--zb-line);
}

body.zb-route-profile :where(.profile-make-card, .profile-section, .profile-panel) {
    border-radius: var(--zb-radius-md);
    box-shadow: var(--zb-shadow-sm);
}

body.zb-route-profile .profile-focus-tabs {
    border-radius: var(--zb-radius-md);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--zb-shadow-xs);
}

body.zb-route-profile .profile-focus-tab {
    min-height: 44px;
    border-radius: var(--zb-radius-sm);
}

/* Public editorial/supporting routes */
body.zb-friendly-ui :where(.blog-shell, .public-feed-shell, .official-shell, .lb-wrap) {
    padding-top: clamp(32px, 5vw, 72px);
    padding-bottom: 80px;
}

body.zb-route-leaderboard .lb-grid,
body.zb-route-official .official-grid,
body.zb-route-blog .blog-list,
body.zb-route-feed .public-feed-grid,
body.zb-route-feed .public-feed-list {
    gap: clamp(12px, 2vw, 22px);
}

body.zb-route-leaderboard .lb-row {
    border-color: var(--zb-line);
    background: #fff;
}

body.zb-route-leaderboard .lb-rank {
    color: var(--zb-coral-600);
}

body.zb-route-blog :where(.blog-topic-row, .blog-feature, .blog-card),
body.zb-route-feed :where(.public-feed-hero, .public-feed-section, .public-feed-feature, .public-feed-card),
body.zb-route-official :where(.official-panel, .official-card) {
    border-color: var(--zb-line);
    border-radius: var(--zb-radius-lg);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: var(--zb-shadow-sm);
}

body.zb-route-privacy .container,
body.zb-route-terms .container {
    margin-block: 40px 80px;
    padding: clamp(26px, 5vw, 58px) !important;
    border: 1px solid var(--zb-line);
    border-radius: var(--zb-radius-xl);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--zb-shadow-md);
}

body.zb-route-privacy .container h1,
body.zb-route-terms .container h1 {
    font-size: clamp(2.2rem, 5vw, 3.8rem);
}

body.zb-route-campaign :where(.campaign-hero, .campaign-teaser, .campaign-final),
body.zb-route-zbwestern :where(.western-lane-hero, .western-lane-gallery, .western-lane-feed, .western-lane-block, .western-lane-final) {
    border-color: var(--zb-line);
    border-radius: var(--zb-radius-lg);
    box-shadow: var(--zb-shadow-sm);
}

body.zb-route-campaign .campaign-shell,
body.zb-route-zbwestern .western-lane-shell {
    background: transparent;
}

/* Route-completion pass: keep late inline legacy themes inside the friendly system. */
body.zb-route-index .choice-btn {
    border: 1px solid rgba(255, 255, 255, 0.62);
    background: rgba(255, 255, 255, 0.92);
    color: #3d474f !important;
    box-shadow: var(--zb-shadow-xs);
}

body.zb-route-index .public-lane-btn.is-primary {
    border-color: var(--zb-action);
    background: linear-gradient(180deg, var(--zb-action), var(--zb-action-hover));
    color: #fff;
}

body.zb-route-index .public-lane-btn.is-primary:hover {
    border-color: var(--zb-action-hover);
    background: var(--zb-action-hover);
    color: #fff;
}

body.zb-route-index .home-quality-link,
body.zb-route-index .home-discovery-link strong {
    color: var(--zb-coral-700);
}

body.zb-route-index .home-discovery-link {
    border-color: var(--zb-line);
    background: #fffaf7;
}

body.zb-route-index .home-discovery-link em {
    color: var(--zb-muted);
}

body.zb-route-zbaiart .daily-votes-remaining,
body.zb-route-zbaiart .cycle-countdown-banner,
body.zb-route-zbaiart .cycle-countdown-banner > div,
body.zb-route-zbaiart .btn-vote,
body.zb-route-character .btn-vote,
body.zb-route-character .zb-watch-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

body.zb-route-zbaiart .daily-votes-remaining {
    flex-wrap: wrap;
    justify-content: flex-end;
}

body.zb-route-zbaiart .daily-votes-remaining strong {
    color: var(--zb-coral-600);
    font-size: 1.35rem;
}

body.zb-route-zbaiart .cycle-countdown-banner {
    justify-content: center;
    border-color: var(--zb-line);
    background: linear-gradient(135deg, #fff, var(--zb-gold-soft));
    color: var(--zb-muted);
}

body.zb-route-zbaiart .cycle-countdown-banner strong {
    color: #b77a22;
}

body.zb-route-zbaiart :where(.card-source, .vote-count-wrap) {
    color: var(--zb-muted);
}

body.zb-route-zbaiart .btn-vote,
body.zb-route-character .btn-vote {
    justify-content: center;
}

body.zb-route-series .si-head,
body.zb-route-series .si-card {
    border-color: var(--zb-line);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--zb-shadow-sm);
}

body.zb-route-series .si-head {
    border-left-color: var(--zb-coral-500);
}

body.zb-route-series :where(.si-head h1, .si-title) {
    color: var(--zb-ink);
}

body.zb-route-series :where(.si-sub, .si-summary, .si-count, .si-summary-note) {
    color: var(--zb-muted);
}

body.zb-route-series .si-card .si-title {
    font-size: clamp(1.08rem, 2vw, 1.35rem);
    line-height: 1.12;
    letter-spacing: -0.025em;
    overflow-wrap: anywhere;
}

body.zb-route-character .container {
    max-width: 1180px;
    padding-top: clamp(24px, 4vw, 54px);
    padding-bottom: 80px;
}

body.zb-route-character .char-page-layout {
    align-items: start;
    gap: clamp(24px, 4vw, 48px);
}

body.zb-route-character .char-page-img {
    border: 1px solid var(--zb-line);
    border-radius: var(--zb-radius-lg);
    box-shadow: var(--zb-shadow-md);
}

body.zb-route-character :where(.char-page-name, .char-rally-title, .char-related-title, .char-share-card-title) {
    color: var(--zb-ink);
}

body.zb-route-character :where(.char-page-source, .char-page-clarity, .char-rally-meta, .char-related-meta, .char-share-card-meta) {
    color: var(--zb-muted);
}

body.zb-route-character :where(.char-page-tier, .char-page-stat, .char-support-card, .char-rally-panel, .char-related-panel, .char-share-card) {
    border-color: var(--zb-line);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--zb-shadow-sm);
}

body.zb-route-character .char-rally-panel {
    padding: clamp(16px, 2.5vw, 24px);
    border-radius: var(--zb-radius-md);
}

body.zb-route-character .char-rally-kicker,
body.zb-route-character .char-share-card-kicker {
    color: var(--zb-coral-600);
}

body.zb-route-character .char-rally-track {
    background: #efe5df;
}

body.zb-route-character .char-rally-track > span {
    background: linear-gradient(90deg, var(--zb-coral-500), var(--zb-gold));
}

body.zb-route-character .zb-watch-btn {
    min-height: 44px;
    padding: 0 15px;
    border: 1px solid var(--zb-line);
    border-radius: var(--zb-radius-sm);
    background: #fff;
    color: var(--zb-ink);
}

body.zb-route-community .community-action-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.32fr);
    gap: clamp(18px, 3vw, 38px);
    align-items: center;
    padding: clamp(22px, 4vw, 42px);
    border-color: var(--zb-line);
    background: linear-gradient(135deg, #fff, var(--zb-coral-50));
}

body.zb-route-community .community-action-title {
    margin: 4px 0 8px;
    color: var(--zb-ink) !important;
    font-size: clamp(2rem, 5vw, 3.7rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

body.zb-route-community .community-action-meta,
body.zb-route-community :where(.community-callout-meta, .community-feed-meta, .community-activity-copy) {
    color: var(--zb-muted);
}

body.zb-route-community .community-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 18px;
}

body.zb-route-community .community-action-btn {
    min-height: 44px;
    padding: 0 16px;
    border-color: var(--zb-line);
    background: #fff;
    color: var(--zb-coral-700);
}

body.zb-route-community .community-action-btn.is-primary {
    border-color: var(--zb-action);
    background: var(--zb-action);
    color: #fff;
}

body.zb-route-community .community-activity-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body.zb-route-community .community-activity-stat {
    min-width: 0;
    padding: 15px;
    border: 1px solid var(--zb-line);
    border-radius: var(--zb-radius-sm);
    background: rgba(255, 255, 255, 0.86);
}

body.zb-route-community .community-activity-stat strong {
    display: block;
    color: var(--zb-action);
    font-size: 1.45rem;
}

body.zb-route-community .community-activity-stat span {
    color: var(--zb-muted);
    font-size: 0.76rem;
    font-weight: 800;
}

body.zb-route-community .community-callout-grid {
    gap: 12px;
}

body.zb-route-community .community-callout-card {
    min-width: 0;
    border-color: var(--zb-line);
    background: #fff;
    color: var(--zb-ink);
    box-shadow: var(--zb-shadow-xs);
}

body.zb-route-community .community-callout-label,
body.zb-route-community .community-chase-label,
body.zb-route-community .community-feed-streak {
    color: #875817;
}

body.zb-route-community .community-callout-meta strong {
    color: #7e5214;
}

body.zb-route-community .community-action-pill {
    border-color: var(--zb-line);
    background: var(--zb-paper-warm);
    color: var(--zb-ink-soft);
}

body.zb-route-community .community-action-pill strong {
    color: #7e5214;
}

body.zb-route-community .community-callout-name,
body.zb-route-community .community-feed-main strong,
body.zb-route-community .community-feed-mini-name {
    color: var(--zb-ink);
}

body.zb-route-community .community-activity-panel {
    padding: clamp(16px, 2.6vw, 26px);
    border-color: var(--zb-line);
    background: #fff;
}

body.zb-route-community .community-feed-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

body.zb-route-community .community-feed-chip {
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--zb-line);
    border-radius: 999px;
    background: #fffaf7;
    color: var(--zb-ink-soft);
}

body.zb-route-community .community-feed-chip.active {
    border-color: var(--zb-coral-300);
    background: var(--zb-coral-100);
    color: var(--zb-coral-700);
}

body.zb-route-community .community-feed-line {
    display: block;
    padding: 0;
    border: 0;
    color: var(--zb-ink-soft);
}

body.zb-route-community .community-feed-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

body.zb-route-myvotes .myvotes-stat-num {
    color: var(--zb-coral-600);
    font-size: clamp(1.45rem, 3vw, 2rem);
}

body.zb-route-myvotes .myvotes-stat-label,
body.zb-route-myvotes :where(.myvotes-card-source, .myvotes-card-tier, .myvotes-card-date, .myvotes-support-meta) {
    color: var(--zb-muted);
}

body.zb-route-myvotes .myvotes-card-status {
    color: #347152;
}

body.zb-route-myvotes .myvotes-support-chip.active {
    border-color: var(--zb-coral-300);
    background: var(--zb-coral-100);
    color: var(--zb-coral-700);
}

body.zb-route-profile .profile-make-topbar {
    border-color: var(--zb-line);
    border-radius: var(--zb-radius-md);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--zb-shadow-sm);
}

body.zb-route-profile :where(.profile-make-brand, .profile-make-action, .profile-make-coin) {
    color: var(--zb-ink);
}

body.zb-route-profile .profile-make-action {
    min-height: 44px;
    border-color: var(--zb-line);
    background: #fffaf7;
}

body.zb-route-profile .profile-make-action:hover {
    border-color: var(--zb-coral-300);
    background: var(--zb-coral-50);
    color: var(--zb-coral-700);
}

body.zb-route-profile .profile-make-coin {
    border-color: #ecd39b;
    background: var(--zb-gold-soft);
}

body.zb-friendly-ui.zb-route-blog :where(.blog-kicker, .blog-feature-label, .blog-post-kicker),
body.zb-friendly-ui.zb-route-feed .public-feed-kicker,
body.zb-friendly-ui.zb-route-official .official-kicker {
    color: var(--zb-coral-600);
}

body.zb-friendly-ui.zb-route-blog :where(.blog-head h1, .blog-feature h2, .blog-card-title, .blog-list-head h2, .blog-topic-row h2, .blog-post-head h1, .blog-post-body h2, .blog-related h2, .blog-related-card strong),
body.zb-friendly-ui.zb-route-feed :where(.public-feed-head h1, .public-feed-feature h2, .public-feed-panel h2, .public-feed-section h2, .public-feed-card-title),
body.zb-friendly-ui.zb-route-official :where(.official-head h1, .official-panel h2, .official-card strong),
body.zb-friendly-ui.zb-route-leaderboard :where(.lb-head h1, .lb-title, .lb-name, .lb-score) {
    color: var(--zb-ink);
}

body.zb-friendly-ui.zb-route-blog :where(.blog-sub, .blog-feature p, .blog-meta, .blog-list-head p, .blog-card-meta, .blog-card-summary, .blog-empty, .blog-topic-row p, .blog-post-summary, .blog-post-meta, .blog-post-body, .blog-related-card span),
body.zb-friendly-ui.zb-route-feed :where(.public-feed-sub, .public-feed-feature p, .public-feed-panel p, .public-feed-section-top p, .public-feed-card-summary, .public-feed-empty),
body.zb-friendly-ui.zb-route-official :where(.official-sub, .official-panel p, .official-card span),
body.zb-friendly-ui.zb-route-leaderboard .lb-sub {
    color: var(--zb-muted);
}

body.zb-friendly-ui.zb-route-blog :where(.blog-topic-row, .blog-feature, .blog-card, .blog-post-head, .blog-post-body, .blog-related, .blog-related-card),
body.zb-friendly-ui.zb-route-feed :where(.public-feed-feature, .public-feed-panel, .public-feed-card),
body.zb-friendly-ui.zb-route-official :where(.official-panel, .official-card),
body.zb-friendly-ui.zb-route-leaderboard .lb-panel {
    border-color: var(--zb-line);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--zb-shadow-sm);
}

body.zb-friendly-ui.zb-route-blog :where(.blog-chip, .blog-post-topic, .blog-post-chip),
body.zb-friendly-ui.zb-route-feed .public-feed-chip,
body.zb-friendly-ui.zb-route-official .official-chip,
body.zb-friendly-ui.zb-route-leaderboard .lb-toggle {
    min-height: 42px;
    border-color: var(--zb-line);
    border-radius: var(--zb-radius-sm);
    background: #fff;
    color: var(--zb-coral-700);
}

body.zb-friendly-ui.zb-route-blog :where(.blog-primary, .blog-post-primary),
body.zb-friendly-ui.zb-route-feed .public-feed-primary,
body.zb-friendly-ui.zb-route-official .official-primary {
    min-height: 44px;
    border-radius: var(--zb-radius-sm);
    background: var(--zb-coral-500);
    color: #fff;
}

body.zb-friendly-ui.zb-route-blog .blog-post-shell {
    max-width: 920px;
    margin-inline: auto;
    padding: clamp(28px, 5vw, 68px) clamp(16px, 3vw, 34px) 80px;
}

body.zb-friendly-ui.zb-route-blog .blog-post-head,
body.zb-friendly-ui.zb-route-blog .blog-post-body,
body.zb-friendly-ui.zb-route-blog .blog-related {
    border-radius: var(--zb-radius-lg);
}

body.zb-friendly-ui.zb-route-blog .blog-post-body a,
body.zb-friendly-ui.zb-route-blog .blog-post-back,
body.zb-friendly-ui.zb-route-feed .public-feed-card-action,
body.zb-friendly-ui.zb-route-official .official-card em {
    color: var(--zb-coral-700);
}

body.zb-friendly-ui.zb-route-feed .public-feed-card-meta {
    color: #347152;
}

body.zb-friendly-ui.zb-route-feed :where(.public-feed-label, .public-feed-meta),
body.zb-friendly-ui.zb-route-blog .blog-card-read {
    color: var(--zb-coral-700);
}

body.zb-friendly-ui.zb-route-leaderboard .lb-row {
    border-color: var(--zb-line);
}

/* Feedback, gates, empty states, and errors */
body.zb-friendly-ui :where(.notice, .success, .alert-success, .status-success) {
    border-color: #b9dec9;
    background: var(--zb-sage-soft);
    color: #286846;
}

body.zb-friendly-ui :where(.error, .alert-error, .status-error) {
    border-color: #efc4c8;
    background: #fff1f2;
    color: #9c3540;
}

body.zb-friendly-ui :where(.empty, .empty-state, .myvotes-empty, .site-not-found-panel) {
    color: var(--zb-muted);
}

body.zb-friendly-ui .site-not-found-panel {
    border-radius: var(--zb-radius-xl);
    background: linear-gradient(145deg, #fff, var(--zb-coral-50));
}

body.zb-friendly-ui .site-toast,
body.zb-friendly-ui .vote-toast {
    border: 1px solid var(--zb-line);
    border-radius: var(--zb-radius-sm);
    background: #fff;
    box-shadow: var(--zb-shadow-md);
    color: var(--zb-ink);
}

/* Footer */
body.zb-friendly-ui .site-footer {
    border-top: 1px solid var(--zb-line);
    background: rgba(255, 254, 253, 0.96);
}

body.zb-friendly-ui .footer-inner {
    width: min(100%, var(--zb-content));
}

body.zb-friendly-ui .footer-brand {
    color: var(--zb-ink);
    letter-spacing: -0.055em;
}

body.zb-friendly-ui .footer-brand span {
    color: var(--zb-coral-500);
}

body.zb-friendly-ui :where(.footer-tagline, .footer-copy) {
    color: var(--zb-muted);
}

body.zb-friendly-ui .footer-col-title {
    color: var(--zb-ink);
}

body.zb-friendly-ui .footer-nav a {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 7px;
    color: #66717b;
    text-decoration: none;
}

body.zb-friendly-ui .footer-nav a:hover {
    color: var(--zb-coral-600);
}

body.zb-friendly-ui .footer-social a {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid var(--zb-line);
    border-radius: 12px;
    background: #fff;
    color: #65707a;
    font-size: 1.05rem;
    box-shadow: var(--zb-shadow-xs);
}

body.zb-friendly-ui .footer-social a:hover {
    border-color: var(--zb-coral-300);
    background: var(--zb-coral-50);
    color: var(--zb-coral-600);
    transform: translateY(-2px);
}

/* Readability and organization hardening: complete each light surface as a unit. */
body.zb-route-index .choice-hero {
    padding-top: clamp(28px, 4vw, 56px);
    padding-bottom: clamp(38px, 5vw, 64px);
}

body.zb-route-index .choice-hero-inner {
    column-gap: clamp(28px, 4vw, 58px);
    row-gap: clamp(22px, 3vw, 36px);
}

body.zb-route-index .home-landing-top {
    padding-top: 6px;
}

body.zb-route-index .home-lane-cards {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(440px, 1fr);
    gap: 0;
}

body.zb-route-index .home-lane-cards .choice-card {
    min-height: clamp(440px, 36vw, 520px);
}

body.zb-route-index .home-lane-cards .choice-card-overlay {
    background:
        linear-gradient(90deg, rgba(18, 21, 25, 0.76) 0%, rgba(18, 21, 25, 0.28) 48%, transparent 76%),
        linear-gradient(180deg, rgba(22, 26, 31, 0.02) 30%, rgba(21, 25, 30, 0.88) 100%);
}

body.zb-route-index .home-lane-cards .choice-card-inner {
    max-width: min(100%, 34rem);
}

body.zb-route-index .home-lane-cards .choice-card-kicker {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 9px;
    padding: 5px 9px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 999px;
    background: rgba(21, 25, 30, 0.5);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.66rem;
    font-weight: 850;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

body.zb-route-index .home-zb3d-spotlight {
    width: 100%;
    margin: 0;
    border: 1px solid var(--zb-line);
    border-radius: var(--zb-radius-lg);
    background: #fff;
    box-shadow: var(--zb-shadow-md);
}

body.zb-route-index .home-zb3d-spotlight::before {
    opacity: 0.12;
}

body.zb-route-index .home-zb3d-shell {
    border: 0;
    background: transparent;
    box-shadow: none;
}

body.zb-route-index .home-zb3d-kicker {
    border-color: var(--zb-coral-200);
    background: var(--zb-coral-50);
    color: var(--zb-action);
}

body.zb-route-index .home-zb3d-title {
    color: var(--zb-ink);
}

body.zb-route-index .home-zb3d-text {
    color: var(--zb-muted);
}

body.zb-route-index .home-zb3d-proof span {
    border-color: var(--zb-line);
    background: var(--zb-paper-warm);
    color: #5e6872;
}

body.zb-route-profile .profile-wrap.profile-layout-root {
    max-width: min(1120px, calc(100vw - 28px));
    gap: 10px;
    padding-top: 10px;
    padding-bottom: 48px;
    background:
        radial-gradient(circle at 88% 0%, rgba(171, 218, 231, 0.16), transparent 25rem),
        radial-gradient(circle at 16% 0%, rgba(255, 193, 175, 0.16), transparent 23rem),
        #fff9f6;
    color: var(--zb-ink);
}

body.zb-route-profile .profile-wrap.profile-layout-root::before {
    background: none;
    opacity: 0;
}

body.zb-route-profile .profile-focus-tab {
    border: 1px solid var(--zb-line);
    background: #fff;
    color: #58636d !important;
}

body.zb-route-profile .profile-focus-tab:hover {
    border-color: var(--zb-coral-300);
    background: var(--zb-coral-50);
    color: var(--zb-action) !important;
}

body.zb-route-profile .profile-focus-tab:is(.is-active, .active),
body.zb-route-profile .profile-focus-tab[aria-selected="true"] {
    border-color: var(--zb-action);
    background: var(--zb-action);
    color: #fff !important;
}

body.zb-route-profile .profile-wrap :where(
    .profile-overview-section,
    .pinned-section,
    .featured-achievements-section,
    .achievements-section,
    .site-rank-section,
    .collection-tracks-section,
    .profile-extras-section,
    .coins-info,
    .shop-section.profile-layout-section,
    .profile-private-card,
    .profile-layout-manager
) {
    border-color: var(--zb-line);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--zb-shadow-sm);
    color: var(--zb-ink);
}

body.zb-route-profile .profile-overview-card {
    border-color: var(--zb-line);
    background: var(--zb-paper-warm);
}

body.zb-route-profile .profile-overview-label {
    color: #9a5c17;
}

body.zb-route-profile .profile-overview-value,
body.zb-route-profile .profile-layout-manager-title {
    color: var(--zb-ink);
}

body.zb-route-profile :where(.profile-overview-meta, .profile-layout-manager-sub, .profile-private-sub) {
    color: var(--zb-muted);
}

body.zb-route-profile .profile-layout-titlebar {
    border-color: var(--zb-line);
    background: linear-gradient(135deg, var(--zb-gold-soft), var(--zb-coral-50));
    box-shadow: none;
}

body.zb-route-profile .profile-layout-toggle,
body.zb-route-profile .profile-layout-heading {
    color: var(--zb-ink);
}

body.zb-route-profile .profile-layout-toggle:hover .profile-layout-heading {
    color: var(--zb-action);
}

body.zb-route-profile .profile-layout-caret {
    border-color: #e6c98e;
    background: #fff;
    color: #8d5c17;
}

body.zb-route-profile :where(.profile-layout-title-meta, .profile-layout-title-featured, .profile-layout-row-pill) {
    border-color: var(--zb-line);
    background: #fff;
    color: #655d58;
}

body.zb-route-profile .profile-layout-manager-btn {
    border-color: var(--zb-line);
    background: #fff;
    color: #4f5963;
}

body.zb-route-profile .profile-layout-manager-btn:hover {
    border-color: var(--zb-coral-300);
    background: var(--zb-coral-50);
    color: var(--zb-action);
}

body.zb-route-profile .profile-layout-manager-btn.is-primary {
    border-color: var(--zb-action);
    background: var(--zb-action);
    color: #fff;
}

body.zb-route-community .community-action-strip {
    gap: clamp(16px, 2vw, 24px);
    padding: clamp(18px, 2.4vw, 28px);
}

body.zb-route-community :where(.community-explore-kicker, .community-action-kicker) {
    color: var(--zb-action);
}

body.zb-route-community .community-explore-tabs .subtab.active {
    border-color: var(--zb-action);
    background: var(--zb-action);
    color: #fff !important;
}

body.zb-route-community .community-activity-panel {
    padding: clamp(14px, 2vw, 20px);
}

body.zb-route-community :where(.community-mini-card, .community-chase-card, .community-callout-card, .community-rail-panel, .community-feed-row.is-rich) {
    border-color: var(--zb-line);
    background: #fff;
    box-shadow: var(--zb-shadow-xs);
    color: var(--zb-ink);
}

body.zb-route-community .community-hot-card {
    border-color: var(--zb-line);
    background: #fff;
    box-shadow: var(--zb-shadow-xs);
    color: var(--zb-ink);
}

body.zb-route-community .community-hot-card:hover {
    border-color: var(--zb-coral-300);
    background: var(--zb-coral-50);
    color: var(--zb-ink);
}

body.zb-route-community .community-hot-name {
    color: var(--zb-ink);
}

body.zb-route-community .community-hot-meta {
    color: var(--zb-muted);
}

body.zb-route-community .community-hot-img {
    border: 1px solid var(--zb-coral-200);
    background: var(--zb-coral-50);
    color: var(--zb-action);
}

body.zb-route-community :where(.community-mini-card, .community-chase-card, .community-callout-card):hover,
body.zb-route-community .community-rail-row:hover {
    border-color: var(--zb-coral-300);
    background: var(--zb-coral-50);
    color: var(--zb-ink);
}

body.zb-route-community :where(
    .community-mini-card strong,
    .community-chase-card strong,
    .community-callout-name,
    .community-section-row h3,
    .community-rail-title,
    .community-rail-name,
    .community-feed-mini-name,
    .community-feed-line,
    .community-feed-line a,
    .community-feed-profile
) {
    color: var(--zb-ink);
}

body.zb-route-community :where(
    .community-mini-card span,
    .community-chase-card span,
    .community-callout-meta,
    .community-rail-meta,
    .community-rail-foot,
    .community-rail-empty,
    .community-feed-meta,
    .community-reaction-cost
) {
    color: var(--zb-muted);
}

body.zb-route-community .community-section-row span {
    color: #32736d;
}

body.zb-route-community .community-ach-spotlight {
    border-color: #ead19a;
    background: var(--zb-gold-soft);
    color: var(--zb-ink);
}

body.zb-route-community .community-ach-spotlight:hover {
    border-color: #d6ad58;
    background: #ffefc7;
    color: var(--zb-ink);
}

body.zb-route-community .community-ach-spotlight strong {
    color: #7e5214;
}

body.zb-route-community .community-ach-spotlight span {
    color: var(--zb-ink-soft);
}

body.zb-route-community .community-rail-head,
body.zb-route-community .community-rail-foot {
    border-color: var(--zb-line);
}

body.zb-route-community .community-rail-row {
    color: var(--zb-ink);
}

body.zb-route-community .community-rail-rank {
    color: #59636e;
}

body.zb-route-community .community-rail-rank.is-medal {
    color: #9a5c17;
}

body.zb-route-community .community-rail-score {
    color: #9f376d;
}

body.zb-route-community .community-feed-row.is-rich::before {
    background: linear-gradient(90deg, rgba(255, 111, 97, 0.04), transparent 32%);
}

body.zb-route-community .community-feed-line strong {
    color: var(--zb-action);
}

body.zb-route-community .community-feed-profile:hover {
    color: var(--zb-action);
}

@media (min-width: 901px) {
    body.zb-route-community .community-feed-row.is-rich {
        grid-template-columns: 5px 44px minmax(0, 1fr) auto;
        align-items: start;
        column-gap: 12px;
        padding-block: 12px;
    }

    body.zb-route-community .community-feed-profile {
        grid-template-columns: 44px;
        justify-items: center;
    }

    body.zb-route-community .community-feed-mini-name {
        display: none;
    }

    body.zb-route-community .community-feed-main {
        padding-top: 1px;
    }

    body.zb-route-community .community-feed-side {
        align-self: start;
    }
}

body.zb-route-community .community-reaction-stamp {
    border-color: var(--zb-line);
    background: var(--zb-paper-warm);
    color: var(--zb-ink);
}

body.zb-route-community .community-reaction-stamp:hover:not(:disabled) {
    border-color: #d6ad58;
    background: var(--zb-gold-soft);
}

@media (min-width: 1180px) {
    body.zb-friendly-ui .navbar {
        position: fixed;
        inset: 0 auto 0 0;
        width: var(--zb-rail);
        min-height: 100dvh;
        border-right: 1px solid var(--zb-line);
        border-bottom: 0;
        box-shadow: 10px 0 34px rgba(82, 58, 49, 0.055);
    }

    body.zb-friendly-ui .nav-inner {
        width: 100%;
        height: 100%;
        min-height: 100dvh;
        padding: 20px 14px 16px;
        align-items: stretch;
        flex-direction: column;
        justify-content: flex-start;
        gap: 18px;
    }

    body.zb-friendly-ui .nav-logo {
        display: flex;
        min-height: 76px;
        align-items: flex-end;
        padding: 0 10px 16px 50px;
        border-bottom: 1px solid var(--zb-line);
    }

    body.zb-friendly-ui .nav-logo::before {
        position: absolute;
        left: 10px;
        top: 8px;
        width: 30px;
        height: 30px;
        border-radius: 9px;
        background: #fff url('/favicon.svg') center / 22px 22px no-repeat;
        box-shadow: var(--zb-shadow-xs);
        content: "";
    }

    body.zb-friendly-ui .nav-logo::after {
        position: absolute;
        left: 50px;
        top: 8px;
        color: #b48e82;
        content: "CURATED ANIME ART";
        font-size: 0.54rem;
        font-weight: 850;
        letter-spacing: 0.13em;
    }

    body.zb-friendly-ui .nav-rail {
        width: 100%;
        min-height: 0;
        flex: 1 1 auto;
        margin: 0;
    }

    body.zb-friendly-ui .nav-links {
        width: 100%;
        height: 100%;
        align-items: stretch;
        flex-direction: column;
        gap: 4px;
        padding: 0 2px 4px 0;
        overflow-x: hidden;
        overflow-y: auto;
    }

    body.zb-friendly-ui .nav-section-label {
        display: block;
        margin: 10px 10px 2px;
    }

    body.zb-friendly-ui .nav-section-label:first-child {
        margin-top: 0;
    }

    body.zb-friendly-ui .nav-links a:not(.btn-patreon):not(.btn-patreon-login),
    body.zb-friendly-ui .nav-links .btn-patreon,
    body.zb-friendly-ui .nav-links .btn-patreon-login {
        width: 100%;
        justify-content: flex-start;
        padding-inline: 10px;
    }

    body.zb-friendly-ui .nav-links :where(.btn-patreon, .btn-patreon-login) {
        justify-content: center;
    }

    body.zb-friendly-ui .nav-account-group {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
        gap: 5px;
        margin-top: 6px;
        padding-top: 11px;
        border-top: 1px solid var(--zb-line);
    }

    body.zb-friendly-ui .main-content,
    body.zb-friendly-ui .site-footer {
        margin-left: var(--zb-rail);
    }
}

@media (max-width: 1179px) {
    body.zb-friendly-ui .navbar {
        position: sticky;
        top: 0;
    }

    body.zb-friendly-ui .main-content,
    body.zb-friendly-ui .site-footer {
        margin-left: 0;
    }

    body.zb-friendly-ui .nav-inner {
        min-height: 66px;
        padding-inline: clamp(14px, 3vw, 28px);
    }

    body.zb-friendly-ui .nav-item-mark {
        display: none;
    }

    body.zb-friendly-ui .nav-links a:not(.btn-patreon):not(.btn-patreon-login):hover {
        transform: translateY(-1px);
    }
}

@media (max-width: 760px) {
    html {
        scroll-padding-top: 72px;
    }

    body.zb-friendly-ui {
        font-size: 15px;
    }

    body.zb-friendly-ui .nav-inner {
        height: auto;
        min-height: 62px;
        padding: 8px 14px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 8px;
    }

    body.zb-friendly-ui .nav-logo {
        min-height: 42px;
        font-size: 1.28rem;
    }

    body.zb-friendly-ui .site-theme-toggle {
        justify-self: end;
    }

    body.zb-friendly-ui .nav-hamburger {
        display: inline-flex;
        justify-self: end;
        margin-left: 0;
        border: 1px solid var(--zb-line);
        background: var(--zb-paper);
        box-shadow: var(--zb-shadow-xs);
        color: var(--zb-ink-soft);
    }

    body.zb-friendly-ui .nav-hamburger span {
        background: currentColor;
    }

    body.zb-friendly-ui .nav-hamburger:focus-visible {
        outline: 3px solid var(--zb-coral-200);
        outline-offset: 2px;
    }

    body.zb-friendly-ui .nav-rail {
        display: none;
        grid-column: 1 / -1;
        width: 100%;
        max-height: calc(100dvh - 72px);
        margin-left: 0;
        padding: 4px 0 8px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    body.zb-friendly-ui.nav-menu-open {
        overflow: hidden;
    }

    body.zb-friendly-ui.nav-menu-open .nav-rail {
        display: block;
    }

    body.zb-friendly-ui .nav-rail .nav-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 6px;
        padding-bottom: 0;
        overflow: visible;
    }

    body.zb-friendly-ui .nav-section-label {
        display: block;
        grid-column: 1 / -1;
        margin: 8px 4px 0;
    }

    body.zb-friendly-ui .nav-section-label:first-child {
        margin-top: 0;
    }

    body.zb-friendly-ui .nav-support-label,
    body.zb-friendly-ui .nav-links .btn-patreon {
        display: none;
    }

    body.zb-friendly-ui .nav-links .nav-account-group {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
        margin-top: 4px;
        padding-top: 10px;
        border-top: 1px solid var(--zb-line);
    }

    body.zb-friendly-ui .nav-account-group .nav-user {
        grid-column: 1 / -1;
        min-height: 44px;
        justify-content: flex-start;
    }

    body.zb-friendly-ui .nav-links a.nav-link-optional:not(.btn-patreon):not(.btn-patreon-login) {
        display: inline-flex;
    }

    body.zb-friendly-ui .nav-links .btn-patreon.nav-link-optional {
        display: none;
    }

    body.zb-friendly-ui .nav-links a:not(.btn-patreon):not(.btn-patreon-login) {
        min-height: 44px;
        width: 100%;
        padding: 0 10px;
        border-color: var(--zb-line);
        background: var(--zb-paper);
        box-shadow: none;
        white-space: normal;
        justify-content: flex-start;
        text-align: left;
        line-height: 1.15;
    }

    body.zb-friendly-ui .nav-links .btn-patreon-login {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }

    body.zb-friendly-ui .nav-scroll-cue {
        display: none !important;
    }

    body.zb-friendly-ui :where(.container, .chars-page, .profile-wrap, .blog-shell, .public-feed-shell, .official-shell, .lb-wrap, .rc-wrap, .rp-wrap, .ch-wrap, .sh-wrap, .ci-wrap, .si-wrap) {
        padding-left: 14px;
        padding-right: 14px;
    }

    body.zb-friendly-ui :where(.page-header h1, .chars-header h1, .ci-head h1, .rc-head h1, .rp-head h1, .blog-head h1, .public-feed-head h1, .official-head h1, .lb-head h1) {
        font-size: clamp(2rem, 10vw, 3rem);
    }

    body.zb-route-index .choice-hero {
        padding-top: 24px;
    }

    body.zb-route-index .home-landing-copy h1 {
        font-size: clamp(2.55rem, 13vw, 3.85rem);
    }

    body.zb-route-index .home-lane-cards {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(320px, 92vw);
        gap: 0;
    }

    body.zb-route-index .home-lane-cards .choice-card {
        min-height: min(92vw, 370px);
    }

    body.zb-route-index .home-lane-cards .choice-card-kicker {
        margin-bottom: 7px;
        padding: 4px 8px;
        font-size: 0.56rem;
    }

    body.zb-route-index :where(.home-quality-strip, .home-discovery-primer, .home-crawl-strip, .home-discovery-band, .public-conversion, .home-zb3d-shell),
    body.zb-route-character-hub :where(.ch-intro, .ch-side, .ch-snapshot, .ch-rel),
    body.zb-route-series-hub :where(.sh-head, .sh-card, .sh-paths, .sh-mini),
    body.zb-route-recaps :where(.rc-hero, .rc-list, .rc-next),
    body.zb-route-recap :where(.rp-head, .rp-section, .rp-panel) {
        border-radius: var(--zb-radius-md);
    }

    body.zb-route-community .community-action-strip {
        grid-template-columns: 1fr;
        padding: 22px 18px;
    }

    body.zb-route-community .community-action-title {
        font-size: clamp(2rem, 11vw, 3rem);
    }

    body.zb-route-community .community-activity-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.zb-route-community .community-feed-streak {
        justify-self: start;
    }

    body.zb-route-character .char-page-layout {
        gap: 20px;
    }

    body.zb-route-profile .profile-make-topbar {
        align-items: stretch;
        gap: 10px;
    }

    body.zb-route-profile .profile-make-actions {
        width: 100%;
        overflow: visible;
        flex-wrap: wrap;
        gap: 8px;
    }

    body.zb-route-profile .profile-cosmetic-loadout .loadout-title {
        color: #50345f;
    }

    body.zb-route-profile .profile-cosmetic-loadout .loadout-title::after {
        border-color: var(--zb-coral-200);
        color: #8d3768;
    }

    body.zb-route-feed .public-feed-hero,
    body.zb-route-official .official-grid,
    body.zb-route-leaderboard .lb-grid {
        grid-template-columns: 1fr;
    }

    body.zb-friendly-ui .footer-grid {
        gap: 28px;
    }

    /* Blog index and post pages share the same compact, horizontally
       scrollable mobile footer. All links remain reachable without stacking. */
    body.zb-friendly-ui.zb-route-blog .site-footer {
        padding: 4px 0 calc(4px + env(safe-area-inset-bottom));
    }

    body.zb-friendly-ui.zb-route-blog .footer-inner {
        display: flex;
        width: 100%;
        max-width: none;
        align-items: center;
        gap: 6px;
        padding: 0 10px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
    }

    body.zb-friendly-ui.zb-route-blog .footer-inner::-webkit-scrollbar {
        height: 3px;
    }

    body.zb-friendly-ui.zb-route-blog .footer-inner::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(241, 91, 135, 0.34);
    }

    body.zb-friendly-ui.zb-route-blog :where(.footer-grid.footer-grid-compact, .footer-bottom),
    body.zb-friendly-ui.zb-route-blog :where(.footer-col-brand, .footer-social, .footer-col-links, .footer-nav) {
        display: contents;
    }

    body.zb-friendly-ui.zb-route-blog :where(.footer-tagline, .footer-col-title) {
        display: none;
    }

    body.zb-friendly-ui.zb-route-blog .footer-brand {
        flex: 0 0 auto;
        margin: 0 2px 0 0;
        font-size: 1rem;
        white-space: nowrap;
    }

    body.zb-friendly-ui.zb-route-blog .footer-grid a {
        flex: 0 0 auto;
        min-height: 44px;
        max-height: 44px;
        scroll-snap-align: start;
    }

    body.zb-friendly-ui.zb-route-blog .footer-social a {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }

    body.zb-friendly-ui.zb-route-blog .footer-col-links .footer-nav a {
        min-height: 44px;
        padding-inline: 10px;
        font-size: 0.7rem;
    }

    body.zb-friendly-ui.zb-route-blog .footer-copy {
        flex: 0 0 auto;
        color: var(--zb-muted);
        font-size: 0.64rem;
        line-height: 1.2;
        white-space: nowrap;
    }
}

@media (max-width: 440px) {
    body.zb-friendly-ui .nav-inner {
        padding-inline: 12px;
    }

    body.zb-friendly-ui .nav-links a:not(.btn-patreon):not(.btn-patreon-login) {
        padding-inline: 11px;
    }

    body.zb-friendly-ui :where(.container, .chars-page, .profile-wrap, .blog-shell, .public-feed-shell, .official-shell, .lb-wrap, .rc-wrap, .rp-wrap, .ch-wrap, .sh-wrap, .ci-wrap, .si-wrap) {
        padding-left: 12px;
        padding-right: 12px;
    }

    body.zb-route-privacy .container,
    body.zb-route-terms .container {
        margin-block: 18px 48px;
        padding: 22px 18px !important;
        border-radius: var(--zb-radius-lg);
    }
}

@media (hover: none) {
    body.zb-friendly-ui :where(a, button, [role="button"]) {
        -webkit-tap-highlight-color: rgba(255, 111, 97, 0.14);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.zb-friendly-ui *,
    body.zb-friendly-ui *::before,
    body.zb-friendly-ui *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (prefers-contrast: more) {
    :root {
        --zb-line: #baa9a1;
        --zb-muted: #4f5962;
    }
}

/* Approved Community simplification: stats, aligned feed, one contributor rail. */
body.zb-route-community .community-activity-panel > .community-action-strip,
body.zb-route-community .community-activity-panel > .community-rank-grid,
body.zb-route-community .community-activity-panel > .community-chase-grid,
body.zb-route-community .community-activity-panel .community-ach-spotlight,
body.zb-route-community .community-activity-panel .community-feed-tools {
    display: none;
}

body.zb-route-community .community-activity-panel {
    padding: clamp(16px, 2.2vw, 24px);
    border: 1px solid var(--zb-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--zb-shadow-sm);
}

body.zb-route-community .community-activity-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

body.zb-route-community .community-activity-stat {
    min-height: 78px;
    padding: 13px 14px;
    border: 1px solid var(--zb-line);
    border-radius: 13px;
    background: var(--zb-paper-warm);
    box-shadow: none;
}

body.zb-route-community .community-activity-stat strong {
    color: var(--zb-action);
    font-size: 1.32rem;
}

body.zb-route-community .community-activity-stat span {
    color: var(--zb-muted);
    font-size: 0.74rem;
    font-weight: 700;
}

body.zb-route-community .community-activity-layout {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 280px);
    gap: 16px;
}

body.zb-route-community .community-section-row {
    margin: 0 0 10px;
}

body.zb-route-community .community-section-row h3 {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--zb-ink);
    font-size: 1rem;
    text-transform: none;
    letter-spacing: -0.01em;
}

body.zb-route-community .community-section-row h3 i {
    color: var(--zb-action);
}

body.zb-route-community .community-feed {
    display: grid;
    gap: 9px;
}

body.zb-route-community .community-feed-row.is-rich {
    grid-template-columns: 4px 46px minmax(0, 1fr) 62px;
    gap: 10px;
    min-height: 88px;
    padding: 11px 10px 11px 0;
    border: 1px solid var(--zb-line);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(88, 62, 52, 0.055);
}

body.zb-route-community .community-feed-accent {
    width: 4px;
    min-height: 100%;
    border-radius: 13px 0 0 13px;
}

body.zb-route-community .community-feed-profile {
    grid-template-columns: 46px;
    align-self: center;
}

body.zb-route-community .community-feed-avatar {
    width: 46px;
    height: 46px;
    border: 1px solid var(--zb-line);
    background: #f3edef;
    color: var(--zb-ink);
}

body.zb-route-community .community-feed-mini-name {
    display: none;
}

body.zb-route-community .community-feed-main {
    align-self: center;
    padding-top: 0;
}

body.zb-route-community .community-feed-line {
    color: var(--zb-ink-soft);
    font-size: 0.86rem;
    line-height: 1.45;
}

body.zb-route-community .community-feed-line > a {
    color: var(--zb-ink);
    font-weight: 900;
}

body.zb-route-community .community-feed-line > i {
    margin-inline: 3px 1px;
    color: var(--zb-action);
}

body.zb-route-community .community-feed-line strong {
    color: #c54e45;
}

body.zb-route-community .community-feed-streak {
    min-height: 22px;
    border: 1px solid #f0d4a4;
    background: var(--zb-gold-soft);
    color: #81531a;
}

body.zb-route-community .community-reactions {
    gap: 5px;
    margin-top: 7px;
}

body.zb-route-community .community-reaction-stamp {
    min-width: 38px;
    min-height: 30px;
}

body.zb-route-community .community-reaction-stamp:nth-of-type(n + 3),
body.zb-route-community .community-reaction-cost {
    display: none;
}

body.zb-route-community .community-feed-side {
    align-self: center;
    align-items: flex-end;
    flex-direction: column;
    gap: 6px;
}

body.zb-route-community .community-feed-meta {
    color: var(--zb-muted);
    font-size: 0.68rem;
    white-space: nowrap;
}

body.zb-route-community .community-feed-thumb,
body.zb-route-community .community-feed-row.is-rich .community-feed-thumb {
    width: 50px;
    height: 58px;
    padding: 0;
    border: 1px solid var(--zb-line);
    border-radius: 9px;
    background: var(--zb-paper-warm);
}

body.zb-route-community .community-feed-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.zb-route-community .community-activity-rail {
    display: block;
}

body.zb-route-community .community-activity-rail .community-rail-panel {
    overflow: hidden;
    border: 1px solid var(--zb-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(88, 62, 52, 0.055);
}

body.zb-route-community .community-activity-rail .community-rail-panel + .community-rail-panel {
    display: none;
}

body.zb-route-community .community-rail-title {
    display: flex;
    align-items: center;
    gap: 7px;
}

body.zb-route-community .community-rail-title i {
    color: var(--zb-action);
}

body.zb-route-community .community-rail-row {
    min-height: 50px;
    padding-inline: 10px;
}

body.zb-route-community .community-feed-more-btn {
    min-height: 44px;
    border-color: var(--zb-line);
    background: #fffaf7;
    color: var(--zb-ink-soft);
}

@media (max-width: 900px) {
    body.zb-route-community .community-activity-layout {
        grid-template-columns: 1fr;
    }

    body.zb-route-community .community-activity-rail {
        margin-top: 4px;
    }
}

@media (max-width: 600px) {
    body.zb-route-community .community-activity-panel {
        padding: 12px;
        border-radius: 15px;
    }

    body.zb-route-community .community-activity-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 14px;
    }

    body.zb-route-community .community-activity-stat {
        min-height: 68px;
        padding: 11px;
    }

    body.zb-route-community .community-section-row span {
        display: none;
    }

    body.zb-route-community .community-feed-row.is-rich {
        grid-template-columns: 4px 42px minmax(0, 1fr);
        gap: 8px;
        min-height: 82px;
        padding: 9px 10px 9px 0;
    }

    body.zb-route-community .community-feed-profile {
        grid-template-columns: 42px;
    }

    body.zb-route-community .community-feed-avatar {
        width: 42px;
        height: 42px;
    }

    body.zb-route-community .community-feed-line {
        font-size: 0.79rem;
        line-height: 1.38;
    }

    body.zb-route-community .community-feed-streak {
        display: none;
    }

    body.zb-route-community .community-reactions {
        min-height: 38px;
    }

    body.zb-route-community .community-reaction-stamp {
        min-width: 44px;
        min-height: 38px;
    }

    body.zb-route-community .community-feed-thumb,
    body.zb-route-community .community-feed-row.is-rich .community-feed-thumb {
        width: 44px;
        height: 44px;
    }

    body.zb-route-community .community-feed-side {
        grid-column: 2 / -1;
        grid-row: 2;
        align-items: center;
        justify-content: flex-end;
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* Light-surface contrast guard: override late legacy dark-theme child colors. */
body.zb-route-zbaiart .public-quality-kicker {
    color: var(--zb-action);
}

body.zb-route-zbaiart .public-quality-title,
body.zb-route-zbaiart .public-discovery-link strong,
body.zb-route-zbaiart .public-compact-copy strong,
body.zb-route-zbaiart .tutorial-login-callout strong {
    color: var(--zb-ink);
}

body.zb-route-zbaiart .public-quality-text,
body.zb-route-zbaiart .public-compact-copy span,
body.zb-route-zbaiart .tutorial-login-callout > span {
    color: #55616c;
}

body.zb-route-community .suggestions-public-link {
    border-color: var(--zb-line);
    background: #fff8f4;
    color: var(--zb-ink-soft);
}

body.zb-route-community .suggestions-public-link:hover,
body.zb-route-community .suggestions-public-link:focus-visible {
    border-color: var(--zb-coral-300);
    background: #fff0ec;
    color: var(--zb-ink);
}

body.zb-route-community .suggestions-public-link strong {
    color: var(--zb-ink);
}

body.zb-route-community .suggestions-public-link span {
    color: #5f6973;
}

body.zb-route-community .suggestions-back-characters {
    border-color: var(--zb-action);
    background: var(--zb-action);
    color: #fff;
}

body.zb-route-community .suggestions-back-characters:hover,
body.zb-route-community .suggestions-back-characters:focus-visible {
    border-color: var(--zb-action-hover);
    background: var(--zb-action-hover);
    color: #fff;
}

/* Readable text on light gallery, voting, moderation, and focus surfaces. */
body.zb-route-series .si-featured {
    color: #5f6973;
}

body.zb-route-series .si-featured > span {
    color: #a53c35;
}

body.zb-route-halloffame .vote-count-wrap span,
body.zb-route-halloffame .hof-inducted,
body.zb-route-halloffame .card-tier {
    color: #765300;
}

body.zb-route-halloffame .hof-hub-link {
    display: inline-flex;
    margin-top: 8px;
    color: #a53c35;
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
}

body.zb-route-halloffame .hof-hub-link:hover,
body.zb-route-halloffame .hof-hub-link:focus-visible {
    color: #7f2e29;
    text-decoration: underline;
}

body.zb-route-community .creator-mod-panel {
    border-color: #efd8d0;
    background: #fffaf7;
    box-shadow: 0 12px 30px rgba(88, 62, 52, 0.07);
}

body.zb-route-community .creator-mod-header {
    color: #a53c35;
}

body.zb-route-community .creator-mod-header:hover {
    background: #fff0ec;
}

body.zb-route-community .creator-mod-body,
body.zb-route-community .creator-mod-body > p,
body.zb-route-community .mod-toggle,
body.zb-route-community .mod-preview-label,
body.zb-route-community .mod-preview-empty {
    color: #5f6973 !important;
}

body.zb-route-community .mod-item {
    border: 1px solid #eee2dc;
    background: #fff;
    color: var(--zb-ink);
}

body.zb-route-community .mod-note-input {
    border-color: #dccfc8;
    background: #fff;
    color: var(--zb-ink);
}

body.zb-route-community .mod-preview-img,
body.zb-route-community .mod-preview-empty {
    border-color: #dccfc8;
    background: #f7f0ec;
}

body.zb-route-zbaiart :where(.focus-panel-title, .focus-stat-value, .focus-target-name) {
    color: var(--zb-ink);
}

body.zb-route-zbaiart :where(.focus-stat-label, .focus-stat-meta, .focus-target-meta, .focus-feed-meta, .focus-sub) {
    color: #5f6973;
}

body.zb-route-zbaiart .focus-panel-note {
    color: #3f6f6b;
}

body.zb-route-zbaiart .focus-target-card {
    color: var(--zb-ink-soft);
}

body.zb-route-zbaiart .vote-action-shelf :where(.vote-shelf-item, .vote-shelf-timer, .vote-shelf-daily, .vote-shelf-boost, .vote-shelf-coins, .cycle-pill) {
    border-color: #ead8cf;
    background: #fff0e9;
    color: #4f5962;
}

body.zb-route-zbaiart .vote-action-shelf :where(.vote-shelf-copy strong, .vote-shelf-value strong, .vote-chip strong) {
    color: #765300;
}

body.zb-route-zbaiart .vote-action-shelf .vote-shelf-label {
    color: #9f3731;
}

body.zb-route-zbaiart .vote-action-shelf :where(.vote-chip-label, .vote-left-copy) {
    color: #4f5962;
}

body.zb-route-zbaiart .vote-action-shelf .vote-shelf-help {
    border-color: #ead8cf;
    background: #fff0e9;
    color: #6a4740;
}

/* Route-local editorial guards that must remain readable in either saved theme. */
body.zb-route-index .home-crawl-link strong {
    color: var(--zb-ink);
}

body.zb-route-index .home-crawl-link span {
    color: var(--zb-muted);
}

body.zb-route-zbaiart .rc-read,
body.zb-route-series .si-hof {
    color: var(--zb-action);
}

body.zb-route-halloffame .hof-card .card-tier,
body.zb-route-halloffame .hof-card .hof-inducted {
    color: #765300 !important;
}

/* Activity's shared structural rules; theme-specific colors are finalized below. */
body.zb-route-zbaiart .zb-tab-activity .public-discovery-guide {
    border-color: var(--act-line);
    background: transparent;
    box-shadow: none;
}

body.zb-route-zbaiart .zb-tab-activity .public-compact-join {
    border-color: var(--act-line);
    background: rgba(30, 23, 29, 0.76);
    box-shadow: none;
}

body.zb-route-zbaiart .zb-tab-activity :where(
    .public-discovery-title, .public-discovery-link strong,
    .public-compact-copy strong, .act-next-title
) {
    color: var(--act-text);
}

body.zb-route-zbaiart .zb-tab-activity :where(
    .public-discovery-text, .public-discovery-context,
    .public-compact-copy span
) {
    color: var(--act-muted);
}

body.zb-route-zbaiart .zb-tab-activity .public-discovery-link span {
    color: #a99ca5;
}

body.zb-route-zbaiart .zb-tab-activity .search-input-main {
    border-color: var(--act-line);
    background: rgba(10, 8, 11, 0.7);
    color: var(--act-text);
}

/* ZBaiArt3D keeps a cinematic hero, while lower cards follow the active shell. */
body.zb-route-zbwestern .western-lane-copy h1 {
    color: #fff !important;
}

body.zb-route-zbwestern .western-lane-copy p {
    color: #ffe8dc !important;
}

body.zb-route-zbwestern .western-lane-block :where(h2, h3, strong) {
    color: var(--zb-ink) !important;
}

body.zb-route-zbwestern .western-lane-block :where(p, li, span) {
    color: var(--zb-muted) !important;
}

/* July 2026 surface consolidation: controls sit on the page; content cards carry surfaces. */
body.zb-route-characters .ci-search-row .ci-sort-row,
body.zb-route-halloffame :where(.hof-sort-row, .hof-tier-row) {
    width: max-content;
    margin: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
}

body.zb-route-series .si-head {
    padding: 22px 0;
    border: 0 !important;
    border-bottom: 1px solid var(--zb-line) !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
}

body.zb-route-series .si-head::after {
    display: none !important;
}

body.zb-route-series .si-head :where(h1, .si-title) {
    color: var(--zb-ink) !important;
}

body.zb-route-series .si-head :where(.si-sub, .si-intro, .si-count) {
    color: var(--zb-muted) !important;
}

body.zb-route-community :where(.suggestions-return-banner, .how-it-works) {
    padding-inline: 0;
    border: 0 !important;
    border-bottom: 1px solid var(--zb-line) !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
}

body.zb-route-community :where(
    .suggestions-simplified-tabs,
    .suggestions-simplified-tabs .tab-group,
    .suggestions-status-subtabs
) {
    border: 0 !important;
    border-bottom: 1px solid var(--zb-line) !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
}

body.zb-route-community .community-activity-panel {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

@media (max-width: 760px) {
    body.zb-route-characters .ci-search-row .ci-sort-row {
        width: 100%;
    }

    body.zb-route-series .si-head {
        padding: 16px 0;
    }
}

/* Launch and Activity share the same compact account shelf in both themes. */
body.zb-route-zbaiart :where(.zb-tab-launch, .zb-tab-activity) > .cycle-countdown-banner.vote-action-shelf {
    min-height: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
}

/* Works navigation keeps one physical footprint in both themes. */
body.zb-route-zbaiart .top-tab-bar.zb-main-tabs {
    border-bottom: 0 !important;
}

body.zb-route-zbaiart .zb-main-tabs .tab-group {
    align-items: stretch;
}

body.zb-route-zbaiart .zb-main-tabs .top-tab {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    border: 1px solid var(--zb-line) !important;
    border-radius: 10px;
}

body.zb-route-zbaiart .zb-main-tabs :where(.top-tab, .tab-group)::after {
    content: none !important;
    display: none !important;
}

/* July 2026 readability closeout: Activity follows the active shell instead of
   keeping dark editorial colors inside light mode. Geometry stays theme-neutral. */
html[data-theme="light"] body.zb-route-zbaiart .zb-tab-activity {
    --act-bg: #fffaf7;
    --act-surface: #fffdfb;
    --act-surface-raised: #fff8f4;
    --act-surface-soft: #fff0ec;
    --act-line: rgba(88, 62, 52, 0.16);
    --act-line-strong: rgba(88, 62, 52, 0.25);
    --act-text: #242b32;
    --act-muted: #596575;
    --act-faint: #66717d;
    --act-pink: #a73750;
    --act-pink-soft: rgba(167, 55, 80, 0.11);
    --act-coral: #9a3f2b;
    --act-gold: #765300;
    --act-mint: #1f6f67;
    --act-violet: #68429a;
    color: var(--act-text);
    background:
        radial-gradient(circle at 92% 8%, rgba(167, 55, 80, 0.07), transparent 25rem),
        linear-gradient(180deg, #fffdfb 0, var(--act-bg) 44rem);
    box-shadow: 0 0 0 100vmax var(--act-bg);
}

html[data-theme="light"] body.zb-route-zbaiart .zb-tab-activity :where(
    .search-input-main,
    .public-compact-join,
    .cycle-countdown-banner.act-cycle-compact,
    .act-feed,
    .act-lb
) {
    border-color: var(--act-line) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    color: var(--act-text) !important;
    box-shadow: none !important;
}

html[data-theme="light"] body.zb-route-zbaiart .zb-tab-activity .act-next-move {
    border-color: var(--act-line-strong);
    background:
        radial-gradient(circle at 88% 20%, rgba(167, 55, 80, 0.09), transparent 21rem),
        linear-gradient(135deg, #fff8f4, #fffdfb 66%);
    box-shadow: 0 18px 44px rgba(88, 62, 52, 0.1);
}

html[data-theme="light"] body.zb-route-zbaiart .zb-tab-activity :where(
    .act-rank-context,
    .act-today-chase,
    .act-boosted-card,
    .act-hot-card,
    .act-callout,
    .act-lb-head
) {
    border-color: var(--act-line) !important;
    background: var(--act-surface-raised) !important;
    color: var(--act-text) !important;
}

html[data-theme="light"] body.zb-route-zbaiart .zb-tab-activity :where(
    .act-today-card:hover,
    .act-today-card:focus-visible,
    .act-item:hover,
    .act-lb-row:hover,
    .act-lb-row:focus-visible,
    .act-ach-item:hover,
    .act-ach-item:focus-visible
) {
    background: var(--act-pink-soft) !important;
}

html[data-theme="light"] body.zb-route-zbaiart .zb-tab-activity :where(
    .act-boosted-img,
    .act-hot-img,
    .act-mini-avatar,
    .act-char-thumb,
    .act-lb-av
) {
    border-color: var(--act-line-strong);
    background: #efe6e1;
    color: var(--act-muted);
}

html[data-theme="light"] body.zb-route-zbaiart .zb-tab-activity :where(
    .public-discovery-context,
    .public-discovery-link span
) {
    color: var(--act-muted) !important;
}

html[data-theme="light"] body.zb-route-zbaiart .zb-tab-activity :where(
    .act-actor:hover,
    .act-actor:focus-visible,
    .act-lb-sub.pink span
) {
    color: var(--act-pink);
}

html[data-theme="light"] body.zb-route-zbaiart .zb-tab-activity .act-action strong {
    color: var(--act-coral);
}

html[data-theme="light"] body.zb-route-zbaiart .zb-tab-activity .act-lb-rank.r2 {
    color: #596575;
}

html[data-theme="light"] body.zb-route-zbaiart .zb-tab-activity .act-lb-rank.r3 {
    color: #875139;
}

/* Profile light mode: recolor dark-native inner components after the shared
   warm cards are applied. These rules intentionally avoid spacing and sizing. */
html[data-theme="light"] body.zb-route-profile .profile-wrap.profile-layout-root :where(
    .featured-achievement-name,
    .ach-name,
    .ach-item.earned .ach-name,
    .shop-item-name,
    .collection-track-value,
    .featured-unlock-value,
    .site-rank-name,
    .site-rank-mini strong,
    .profile-make-featured-title,
    .profile-make-goal-head,
    .profile-make-goal-copy strong,
    .profile-make-goal-reward-copy strong,
    .profile-make-contributor strong
) {
    color: #242b32 !important;
    text-shadow: none !important;
}

html[data-theme="light"] body.zb-route-profile .profile-wrap.profile-layout-root :where(
    .featured-achievement-meta,
    .collection-track-meta,
    .collection-track-next,
    .site-rank-meta,
    .site-rank-mini span,
    .profile-make-featured-meta,
    .profile-make-contributor-detail,
    .profile-make-goal small,
    .profile-make-featured-stats span
) {
    color: #596575 !important;
}

html[data-theme="light"] body.zb-route-profile .profile-wrap.profile-layout-root :where(
    .collection-track-label,
    .collection-track-cost,
    .collection-coin-pill,
    .site-rank-kicker,
    .profile-make-kicker,
    .profile-make-tier-pill,
    .profile-make-badge,
    .profile-make-featured-stats small
) {
    color: #765300 !important;
}

html[data-theme="light"] body.zb-route-profile .profile-wrap.profile-layout-root :where(
    .profile-make-prestige-score,
    .profile-make-progress-total
) {
    color: #7b2f83 !important;
    text-shadow: none !important;
}

html[data-theme="light"] body.zb-route-profile .profile-wrap.profile-layout-root :where(
    .profile-make-card,
    .profile-make-goal,
    .profile-make-contributor,
    .site-rank-card,
    .site-rank-mini,
    .collection-track-card
) {
    border-color: #e7d8d1 !important;
    background: #fff8f4 !important;
    color: #242b32 !important;
    box-shadow: none !important;
}

html[data-theme="light"] body.zb-route-profile .profile-wrap.profile-layout-root .shop-section {
    border-color: #eadfd9 !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 14px 34px rgba(88, 62, 52, 0.075) !important;
}

html[data-theme="light"] body.zb-route-profile .profile-wrap.profile-layout-root :where(
    .collection-track-icon,
    .profile-make-contributor-icon
) {
    color: #242b32 !important;
}

html[data-theme="light"] body.zb-route-profile .profile-wrap.profile-layout-root .featured-achievement-tier {
    color: #3f332e !important;
    background: color-mix(in srgb, var(--ach-accent) 16%, #fff8f4) !important;
}

html[data-theme="light"] body.zb-route-profile .profile-wrap.profile-layout-root .pinned-note {
    border: 1px solid #e7c66d;
    background: #fff4d9;
    color: #765300;
}

html[data-theme="light"] body.zb-route-profile .profile-wrap.profile-layout-root :where(
    .ach-feature-toggle,
    .collection-track-cta
) {
    border-color: #b78a2e !important;
    background: #fff4d9 !important;
    color: #654700 !important;
}

html[data-theme="light"] body.zb-route-profile .profile-wrap.profile-layout-root .ach-feature-toggle.is-active,
html[data-theme="light"] body.zb-route-profile .profile-wrap.profile-layout-root .pin-mode-btn.is-active {
    border-color: #8f2f46 !important;
    background: #a73750 !important;
    color: #fff !important;
}

html[data-theme="light"] body.zb-route-profile .profile-wrap.profile-layout-root .profile-extra-btn.is-active {
    border-color: #2f7a59 !important;
    background: #e5f5ec !important;
    color: #18583e !important;
}

html[data-theme="light"] body.zb-route-profile .profile-wrap.profile-layout-root .ach-item.locked :where(.ach-name, .ach-emoji, .ach-tier-dot) {
    opacity: 0.68;
}

html[data-theme="light"] body.zb-route-profile .profile-wrap.profile-layout-root .ach-item.locked-forever :where(.ach-name, .ach-emoji, .ach-tier-dot) {
    opacity: 0.66;
}

html[data-theme="light"] body.zb-route-profile .profile-wrap.profile-layout-root .ach-feature-toggle:disabled {
    opacity: 0.8;
}