/*
 * 我的花园世界 visual layer
 *
 * This file is intentionally loaded after the legacy S33/ZXR styles.  The
 * business UI keeps its existing component contracts while the visual system
 * follows the official garden site: olive leaves, flower pink, warm paper,
 * terracotta accents and the game's own illustrations.
 */
:root {
    --garden-ink: #3f4724;
    --garden-ink-soft: #68713b;
    --garden-olive: #6c7830;
    --garden-leaf: #849525;
    --garden-leaf-dark: #4e6329;
    --garden-pink: #e8758f;
    --garden-pink-soft: #f8d8dc;
    --garden-coral: #e56226;
    --garden-gold: #e5b34f;
    --garden-paper: #fffdf4;
    --garden-paper-deep: #f5edd5;
    --garden-sky: #dff3ef;
    --garden-line: rgba(108, 120, 48, .22);
    --garden-shadow: 0 16px 36px rgba(85, 71, 35, .14);
    --garden-radius: 8px;
    --garden-font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
    color-scheme: light;
}

html.fi body.fi-body *,
body.zxr-hub-page *,
body.s33-register-page *,
body.qt-login-page *,
body.qt-app *,
body.wdhysj-return-invite * {
    letter-spacing: 0 !important;
}

html.fi,
html.fi.dark {
    background: var(--garden-paper) !important;
}

html.fi body.fi-body {
    --primary-50: 249 252 232;
    --primary-100: 235 243 194;
    --primary-200: 216 229 139;
    --primary-300: 185 205 76;
    --primary-400: 144 167 41;
    --primary-500: 108 120 48;
    --primary-600: 86 103 40;
    --primary-700: 70 84 34;
    --primary-800: 55 65 29;
    --primary-900: 43 50 24;
    min-height: 100vh;
    color: var(--garden-ink) !important;
    background:
        linear-gradient(180deg, rgba(255, 253, 244, .92), rgba(239, 247, 224, .88)),
        url('/images/wdhysj/news-background.png') center top / cover fixed !important;
    font-family: var(--garden-font) !important;
}

html.fi body.fi-body::before {
    content: '';
    position: fixed;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background: url('/images/wdhysj/topwhiteimg.png') center top / auto 80px repeat-x;
    opacity: .65;
}

html.fi.dark body.fi-body,
html.fi.dark body.fi-body * {
    color-scheme: light;
}

/* Filament chrome */
html.fi .fi-sidebar {
    border-inline-end: 1px solid var(--garden-line) !important;
    background:
        linear-gradient(180deg, rgba(255, 253, 244, .95), rgba(235, 244, 218, .97)),
        url('/images/wdhysj/client/garden-bg.png') center / cover !important;
    box-shadow: 8px 0 28px rgba(81, 91, 43, .12) !important;
}

html.fi .fi-sidebar-header,
html.fi .fi-topbar {
    border-color: var(--garden-line) !important;
    background: rgba(255, 253, 244, .94) !important;
    color: var(--garden-ink) !important;
    box-shadow: 0 4px 18px rgba(83, 75, 35, .08) !important;
    backdrop-filter: blur(14px);
}

html.fi .fi-sidebar-nav-groups {
    padding-block: 12px !important;
}

html.fi .fi-sidebar-item-button {
    margin: 3px 10px !important;
    border: 1px solid transparent !important;
    border-radius: var(--garden-radius) !important;
    color: var(--garden-ink-soft) !important;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

html.fi .fi-sidebar-item-button:hover {
    color: var(--garden-leaf-dark) !important;
    background: rgba(232, 117, 143, .12) !important;
    transform: translateX(2px);
}

html.fi .fi-sidebar-item-active > .fi-sidebar-item-button,
html.fi .fi-sidebar-item-button[aria-current="page"] {
    color: #fffdf4 !important;
    background: linear-gradient(90deg, var(--garden-olive), var(--garden-leaf)) !important;
    border-color: rgba(78, 99, 41, .25) !important;
    box-shadow: 0 7px 16px rgba(89, 106, 45, .22) !important;
}

html.fi .fi-sidebar-group-label {
    color: var(--garden-coral) !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
}

html.fi .fi-topbar-item .fi-icon-btn,
html.fi .fi-sidebar-close-btn,
html.fi .fi-sidebar-open-btn {
    color: var(--garden-olive) !important;
}

html.fi .fi-main {
    background: transparent !important;
}

html.fi .fi-page-header-heading,
html.fi .fi-header-heading {
    color: var(--garden-ink) !important;
    font-family: "Noto Serif SC", "Songti SC", var(--garden-font) !important;
    letter-spacing: 0 !important;
}

html.fi .fi-breadcrumbs-item-label,
html.fi .fi-section-header-description,
html.fi .fi-fo-field-label-content,
html.fi .fi-ta-header-cell {
    color: var(--garden-ink-soft) !important;
}

html.fi .fi-section,
html.fi .fi-ta-ctn,
html.fi .fi-wi-stats-overview-stat,
html.fi .fi-wi-chart,
html.fi .fi-fo-component-ctn {
    border: 1px solid var(--garden-line) !important;
    border-radius: var(--garden-radius) !important;
    background: rgba(255, 253, 244, .92) !important;
    box-shadow: var(--garden-shadow) !important;
}

html.fi .fi-section-header,
html.fi .fi-ta-header {
    border-color: var(--garden-line) !important;
    background: rgba(245, 237, 213, .5) !important;
}

html.fi .fi-ta-row {
    border-color: rgba(108, 120, 48, .12) !important;
}

html.fi .fi-ta-row:hover {
    background: rgba(232, 117, 143, .06) !important;
}

html.fi .fi-input-wrp {
    border-color: rgba(108, 120, 48, .3) !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 252, .9) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8) !important;
}

html.fi .fi-input-wrp:focus-within {
    border-color: var(--garden-pink) !important;
    box-shadow: 0 0 0 3px rgba(232, 117, 143, .16) !important;
}

html.fi .fi-input,
html.fi .fi-select,
html.fi textarea {
    color: var(--garden-ink) !important;
    background: transparent !important;
}

html.fi .fi-btn {
    border-radius: 6px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    box-shadow: 0 7px 16px rgba(82, 95, 43, .14) !important;
}

html.fi .fi-btn.fi-color-primary {
    color: #fffdf4 !important;
    background: linear-gradient(135deg, var(--garden-olive), var(--garden-leaf)) !important;
}

html.fi .fi-btn.fi-color-primary:hover {
    background: linear-gradient(135deg, var(--garden-leaf-dark), var(--garden-olive)) !important;
}

html.fi .fi-badge {
    border-radius: 999px !important;
    border: 1px solid rgba(108, 120, 48, .2) !important;
}

/* Shared dashboard hero */
html.fi .s33-panel-page {
    position: relative;
    isolation: isolate;
    color: var(--garden-ink) !important;
}

html.fi .s33-panel-page::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -20px -24px auto;
    height: 230px;
    border-bottom: 1px solid rgba(108, 120, 48, .16);
    background:
        linear-gradient(90deg, rgba(255, 253, 244, .98) 8%, rgba(255, 253, 244, .68) 52%, rgba(255, 253, 244, .12)),
        url('/images/wdhysj/gardenbg2.png') center 23% / cover;
    opacity: .92;
}

html.fi .s33-panel-hero {
    min-height: 245px !important;
    overflow: hidden;
    border: 1px solid rgba(108, 120, 48, .22) !important;
    border-radius: var(--garden-radius) !important;
    background:
        linear-gradient(90deg, rgba(255, 253, 244, .96) 0%, rgba(255, 253, 244, .82) 42%, rgba(255, 253, 244, .14) 100%),
        url('/images/wdhysj/gardenbg2.png') center 39% / cover !important;
    box-shadow: 0 18px 42px rgba(80, 74, 35, .18) !important;
}

html.fi .s33-panel-hero__content {
    max-width: 610px !important;
    padding: 30px 34px !important;
}

html.fi .s33-panel-hero__brand {
    color: var(--garden-olive) !important;
    font-weight: 800 !important;
}

html.fi .s33-panel-hero__brand img {
    width: 166px !important;
    height: 72px !important;
    object-fit: contain !important;
    object-position: left center !important;
    filter: drop-shadow(0 5px 9px rgba(71, 74, 35, .18));
}

html.fi .s33-panel-hero h2 {
    margin: 12px 0 8px !important;
    color: var(--garden-ink) !important;
    font-family: "Noto Serif SC", "Songti SC", var(--garden-font) !important;
    font-size: 40px !important;
    letter-spacing: 0 !important;
}

html.fi .s33-panel-hero p {
    max-width: 520px;
    color: #5f673d !important;
    font-size: 14px !important;
}

html.fi .s33-panel-hero__chips span {
    border: 1px solid rgba(108, 120, 48, .3) !important;
    border-radius: 999px !important;
    color: var(--garden-olive) !important;
    background: rgba(255, 253, 244, .72) !important;
}

html.fi .s33-panel-hero__art {
    mix-blend-mode: multiply;
    opacity: .26 !important;
    filter: saturate(1.1) contrast(.96);
}

html.fi .s33-panel-cards {
    gap: 12px !important;
    margin-top: 18px !important;
}

html.fi .s33-panel-card {
    border: 1px solid rgba(108, 120, 48, .2) !important;
    border-radius: var(--garden-radius) !important;
    background: rgba(255, 253, 244, .93) !important;
    box-shadow: 0 11px 26px rgba(82, 75, 36, .1) !important;
}

html.fi .s33-panel-card b {
    color: var(--garden-coral) !important;
}

html.fi .s33-panel-card span {
    color: var(--garden-ink-soft) !important;
}

html.fi .s33-task-grid {
    gap: 12px !important;
}

html.fi .s33-task,
html.fi a.s33-task {
    border: 1px solid rgba(108, 120, 48, .19) !important;
    border-radius: var(--garden-radius) !important;
    color: var(--garden-ink) !important;
    background: rgba(255, 253, 244, .88) !important;
    box-shadow: 0 9px 24px rgba(82, 75, 36, .09) !important;
}

html.fi .s33-task:hover {
    border-color: rgba(232, 117, 143, .46) !important;
    background: #fff8f1 !important;
    transform: translateY(-2px);
}

html.fi .s33-task strong {
    color: var(--garden-olive) !important;
}

html.fi .s33-task small {
    color: #74784d !important;
}

/* Login: static official hero, no unrelated legacy video */
html.fi body.s33-guest-body {
    min-height: 100svh !important;
    background:
        linear-gradient(90deg, rgba(42, 66, 47, .52), rgba(255, 253, 244, .12) 65%),
        url('/images/wdhysj/gardenbg2.png') center / cover fixed !important;
    font-family: var(--garden-font) !important;
}

html.fi .s33-guest-shell {
    min-height: 100svh !important;
    background: transparent !important;
}

html.fi .zxr-auth-motion {
    display: none !important;
}

html.fi .zxr-login-scene {
    border: 1px solid rgba(255, 253, 244, .34) !important;
    background:
        linear-gradient(180deg, rgba(46, 72, 48, .12), rgba(46, 72, 48, .68)),
        url('/images/wdhysj/client/garden-bg.png') center / cover !important;
    box-shadow: 0 18px 50px rgba(42, 63, 39, .22) !important;
}

html.fi .zxr-login-scene__logo {
    width: min(280px, 76%) !important;
    height: auto !important;
    object-fit: contain !important;
}

html.fi .zxr-login-scene__copy span,
html.fi .zxr-login-scene__copy small {
    color: rgba(255, 253, 244, .8) !important;
}

html.fi .zxr-login-scene__copy strong {
    color: #fffdf4 !important;
    text-shadow: 0 5px 18px rgba(35, 59, 40, .44);
}

html.fi .zxr-login-scene__seal {
    color: rgba(255, 253, 244, .82) !important;
    border-color: rgba(255, 253, 244, .5) !important;
}

html.fi .s33-login-card {
    border: 1px solid rgba(108, 120, 48, .26) !important;
    border-radius: 8px !important;
    background: rgba(255, 253, 244, .96) !important;
    box-shadow: 0 26px 70px rgba(49, 68, 42, .28) !important;
}

html.fi .s33-login-logo-frame {
    width: 112px !important;
    height: 58px !important;
    border: 0 !important;
    background: transparent !important;
}

html.fi .s33-login-logo-frame img {
    object-fit: contain !important;
    filter: drop-shadow(0 5px 8px rgba(75, 71, 35, .16));
}

html.fi .s33-login-kicker {
    color: var(--garden-coral) !important;
    letter-spacing: 0 !important;
}

html.fi .s33-login-title-block h2 {
    color: var(--garden-ink) !important;
    font-family: "Noto Serif SC", "Songti SC", var(--garden-font) !important;
}

html.fi .s33-login-card .fi-btn,
html.fi .s33-native-login + .fi-sc-form .fi-btn {
    background: linear-gradient(135deg, var(--garden-olive), var(--garden-leaf)) !important;
}

html.fi .s33-login-footer,
html.fi .s33-login-footer a {
    color: var(--garden-ink-soft) !important;
}

/* Player centre: garden ledger + game scenes */
html.fi .zxr-player-home {
    color: var(--garden-ink) !important;
    background: transparent !important;
}

html.fi .zxr-player-home-hero {
    border: 1px solid rgba(108, 120, 48, .2) !important;
    border-radius: var(--garden-radius) !important;
    background:
        linear-gradient(90deg, rgba(255, 253, 244, .95) 0%, rgba(255, 253, 244, .72) 44%, rgba(255, 253, 244, .08) 100%),
        url('/images/wdhysj/gardenbg2.png') center 52% / cover !important;
    box-shadow: 0 18px 42px rgba(80, 74, 35, .16) !important;
}

html.fi .zxr-player-home-hero__logo {
    width: min(230px, 75%) !important;
    height: auto !important;
    object-fit: contain !important;
}

html.fi .zxr-player-home-hero__copy > span {
    color: var(--garden-coral) !important;
    letter-spacing: 0 !important;
}

html.fi .zxr-player-home-hero h1,
html.fi .zxr-player-services h2,
html.fi .zxr-player-home-recharge h2,
html.fi .zxr-player-home-reward h2 {
    color: var(--garden-ink) !important;
    font-family: "Noto Serif SC", "Songti SC", var(--garden-font) !important;
}

html.fi .zxr-player-home-hero__identity span,
html.fi .zxr-player-balance > div,
html.fi .zxr-player-home-recharge,
html.fi .zxr-player-home-reward,
html.fi .zxr-player-home-data-card,
html.fi .zxr-player-service,
html.fi .zxr-player-account-bar {
    border-color: rgba(108, 120, 48, .2) !important;
    background: rgba(255, 253, 244, .9) !important;
    box-shadow: 0 10px 26px rgba(82, 75, 36, .1) !important;
}

html.fi .zxr-player-balance strong,
html.fi .zxr-player-service strong {
    color: var(--garden-olive) !important;
}

html.fi .zxr-player-service:hover {
    border-color: rgba(232, 117, 143, .46) !important;
    background: #fff8f1 !important;
}

html.fi .zxr-player-service__icon {
    color: var(--garden-coral) !important;
    background: rgba(232, 117, 143, .13) !important;
}

html.fi .zxr-player-account-bar button,
html.fi .zxr-player-home-recharge button[type="submit"] {
    border-radius: 6px !important;
    color: #fffdf4 !important;
    background: linear-gradient(135deg, var(--garden-olive), var(--garden-leaf)) !important;
}

html.fi .zxr-player-home-pay-methods label.is-selected,
html.fi .s33-player-amount-presets button.is-selected {
    border-color: var(--garden-pink) !important;
    background: rgba(232, 117, 143, .1) !important;
}

html.fi .zxr-player-home-reward-bar i {
    background: linear-gradient(90deg, var(--garden-olive), var(--garden-pink)) !important;
}

/* Agent trend/register tools */
html.fi .s33-agent-flow-trend,
html.fi .s33-agent-register-card {
    border-color: rgba(108, 120, 48, .2) !important;
    border-radius: var(--garden-radius) !important;
    background: rgba(255, 253, 244, .9) !important;
    box-shadow: var(--garden-shadow) !important;
}

html.fi .s33-agent-flow-trend__track {
    background: rgba(132, 149, 37, .14) !important;
}

html.fi .s33-agent-flow-trend__track i {
    background: linear-gradient(180deg, var(--garden-pink), var(--garden-coral)) !important;
}

html.fi .s33-agent-register-card__head span,
html.fi .s33-agent-register-field > span {
    color: var(--garden-coral) !important;
}

/* Compact screens */
@media (max-width: 900px) {
    html.fi .s33-panel-page::before {
        inset-inline: -12px;
        height: 180px;
    }

    html.fi .s33-panel-hero {
        min-height: 210px !important;
        background-position: 62% center !important;
    }

    html.fi .s33-panel-hero__content {
        padding: 22px !important;
    }

    html.fi .s33-panel-hero h2 {
        font-size: 30px !important;
    }

    html.fi .s33-panel-hero__art {
        opacity: .16 !important;
    }

    html.fi .fi-main {
        padding-inline: 12px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.fi * {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* Public and utility pages use the same garden palette as the panel. Legacy
 * zxr-* hooks remain in the markup for compatibility, while these scoped
 * rules replace their old imagery and colors after the legacy styles load. */
body.zxr-hub-page {
    color: var(--garden-ink) !important;
    background:
        linear-gradient(90deg, rgba(255, 253, 244, .96), rgba(255, 253, 244, .68) 46%, rgba(223, 243, 239, .28)),
        url('/images/wdhysj/gardenbg2.png') center / cover fixed !important;
    font-family: var(--garden-font) !important;
}

body.zxr-hub-page::after {
    opacity: .35 !important;
    background: url('/images/wdhysj/topwhiteimg.png') center top / auto 76px repeat-x !important;
}

.zxr-hub-page .s33-hub-nav {
    border-color: var(--garden-line) !important;
}

.zxr-hub-page .s33-hub-eyebrow {
    color: var(--garden-coral) !important;
}

.zxr-hub-page .s33-hub-eyebrow::before {
    content: '花' !important;
    color: var(--garden-olive) !important;
    background: var(--garden-pink-soft) !important;
    border-color: rgba(232, 117, 143, .46) !important;
}

.zxr-hub-page .s33-hub-title {
    color: var(--garden-ink) !important;
    text-shadow: 0 12px 26px rgba(85, 71, 35, .18) !important;
}

.zxr-hub-page .s33-hub-title span {
    color: var(--garden-coral) !important;
}

.zxr-hub-page .s33-hub-copy {
    color: var(--garden-ink-soft) !important;
}

.zxr-hub-page .s33-status-pill {
    color: var(--garden-leaf-dark) !important;
    background: rgba(255, 253, 244, .8) !important;
    border-color: var(--garden-line) !important;
}

.zxr-hub-page .zxr-hub-nav-meta,
.zxr-hub-page .zxr-hub-hero__rule,
.zxr-hub-page .zxr-hub-footer {
    color: var(--garden-ink-soft) !important;
}

.zxr-hub-page .zxr-hub-hero__rule i {
    background: linear-gradient(90deg, var(--garden-pink), rgba(108, 120, 48, .2)) !important;
}

.zxr-hub-page .zxr-hub-hero__seal {
    color: var(--garden-coral) !important;
    border-color: rgba(232, 117, 143, .62) !important;
}

.zxr-hub-page .s33-entry-card {
    color: var(--garden-ink) !important;
    background: rgba(255, 253, 244, .9) !important;
    border-color: var(--garden-line) !important;
    box-shadow: var(--garden-shadow) !important;
}

.zxr-hub-page .s33-entry-card:hover,
.zxr-hub-page .s33-entry-card:focus-visible {
    background: #fff8f1 !important;
    border-color: rgba(232, 117, 143, .48) !important;
}

.zxr-hub-page .s33-entry-card__content strong {
    color: var(--garden-ink) !important;
}

.zxr-hub-page .s33-entry-card__content small,
.zxr-hub-page .s33-entry-card__cta {
    color: var(--garden-ink-soft) !important;
}

.zxr-hub-page .zxr-hub-hero__art img,
.zxr-hub-page .s33-entry-card__hero {
    border-radius: 8px;
    object-fit: cover !important;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%);
    mask-image: linear-gradient(90deg, transparent, #000 24%);
}

body.s33-register-page {
    color: var(--garden-ink) !important;
    background:
        linear-gradient(90deg, rgba(255, 253, 244, .9), rgba(223, 243, 239, .52)),
        url('/images/wdhysj/gardenbg2.png') center / cover fixed !important;
    font-family: var(--garden-font) !important;
}

body.s33-register-page::before {
    background: url('/images/wdhysj/topwhiteimg.png') center top / auto 76px repeat-x !important;
    opacity: .38 !important;
}

.s33-register-page .s33-register-hero,
.s33-register-page .s33-register-card {
    color: var(--garden-ink) !important;
    background: rgba(255, 253, 244, .92) !important;
    border-color: var(--garden-line) !important;
    box-shadow: var(--garden-shadow) !important;
}

.s33-register-page .s33-register-hero img,
.s33-register-page .s33-success-hero img {
    border-radius: 8px;
    filter: drop-shadow(0 14px 24px rgba(85, 71, 35, .18)) !important;
}

.s33-register-page .s33-register-hero span,
.s33-register-page .s33-register-card__head em {
    color: var(--garden-coral) !important;
}

.s33-register-page .s33-register-hero h1,
.s33-register-page .s33-register-card__head strong {
    color: var(--garden-ink) !important;
}

.s33-register-page .s33-register-hero p,
.s33-register-page .s33-register-download {
    color: var(--garden-ink-soft) !important;
}

.s33-register-page .s33-register-nav a {
    color: var(--garden-leaf-dark) !important;
    background: rgba(255, 253, 244, .86) !important;
    border-color: var(--garden-line) !important;
}

.s33-register-page .s33-register-nav a.is-download,
.s33-register-page .s33-register-form button,
.s33-register-page .s33-success-actions .is-primary {
    color: #fffdf4 !important;
    background: linear-gradient(135deg, var(--garden-olive), var(--garden-leaf)) !important;
    border-color: var(--garden-leaf-dark) !important;
}

.s33-register-page .s33-register-form span {
    color: var(--garden-ink-soft) !important;
}

.s33-register-page .s33-register-form input,
.s33-register-page .s33-register-form select {
    color: var(--garden-ink) !important;
    background: rgba(255, 255, 252, .92) !important;
    border-color: var(--garden-line) !important;
}

.s33-register-page .s33-register-form input:focus,
.s33-register-page .s33-register-form select:focus {
    border-color: var(--garden-pink) !important;
    box-shadow: 0 0 0 3px rgba(232, 117, 143, .16) !important;
}

.s33-register-page .s33-success-modal,
.s33-register-page .s33-success-modal::before {
    color: var(--garden-ink) !important;
    background: rgba(255, 253, 244, .94) !important;
    border-color: var(--garden-line) !important;
}

.s33-register-page .s33-success-modal h1,
.s33-register-page .s33-success-account span {
    color: var(--garden-ink) !important;
}

.s33-register-page .s33-success-modal p {
    color: var(--garden-ink-soft) !important;
}

body.qt-login-page,
body.qt-app {
    --qt-ink: var(--garden-ink);
    --qt-muted: var(--garden-ink-soft);
    --qt-paper: var(--garden-paper);
    --qt-line: rgba(108, 120, 48, .22);
    --qt-jade: var(--garden-olive);
    --qt-jade-dark: var(--garden-leaf-dark);
    --qt-gold: var(--garden-gold);
    --qt-night: #4e6329;
    --qt-night-soft: #68713b;
    --qt-night-line: rgba(108, 120, 48, .22);
    --qt-shadow: var(--garden-shadow);
    font-family: var(--garden-font) !important;
}

body.qt-login-page {
    background:
        linear-gradient(90deg, rgba(255, 253, 244, .86), rgba(223, 243, 239, .38)),
        url('/images/wdhysj/gardenbg2.png') center / cover fixed !important;
}

.qt-login-page .qt-login-shell {
    background: rgba(255, 253, 244, .95) !important;
    border-color: var(--garden-line) !important;
    box-shadow: var(--garden-shadow) !important;
}

.qt-login-page .qt-login-art {
    color: #fffdf4 !important;
    background:
        linear-gradient(180deg, rgba(78, 99, 41, .2), rgba(63, 71, 36, .72)),
        url('/images/wdhysj/client/share-0.png') center / cover !important;
}

.qt-login-page .qt-login-art p {
    color: rgba(255, 253, 244, .82) !important;
}

.qt-login-page .qt-login-foot {
    color: var(--garden-ink-soft) !important;
}

body.qt-app {
    color: var(--garden-ink) !important;
    background:
        linear-gradient(180deg, rgba(255, 253, 244, .78), rgba(223, 243, 239, .88)),
        url('/images/wdhysj/news-background.png') center / cover fixed !important;
}

body.qt-app::before {
    background: url('/images/wdhysj/topwhiteimg.png') center top / auto 76px repeat-x !important;
    opacity: .42 !important;
}

body.qt-app .qt-header,
body.qt-app .qt-sidebar,
body.qt-app .qt-context,
body.qt-app .qt-grid-form {
    color: var(--garden-ink) !important;
    background: rgba(255, 253, 244, .92) !important;
    border-color: var(--garden-line) !important;
}

body.qt-app .qt-brand,
body.qt-app .qt-side-title strong,
body.qt-app .qt-tool h1 {
    color: var(--garden-ink) !important;
}

body.qt-app .qt-side-title span,
body.qt-app .qt-kicker {
    color: var(--garden-coral) !important;
}

body.qt-app .qt-content {
    background: transparent !important;
}

body.qt-app .qt-tabs button,
body.qt-app .qt-status {
    color: var(--garden-ink-soft) !important;
}

body.qt-app .qt-tabs button:hover,
body.qt-app .qt-tabs button.is-active {
    color: var(--garden-leaf-dark) !important;
    background: rgba(132, 149, 37, .12) !important;
}

body.wdhysj-return-invite {
    color: var(--garden-ink) !important;
    background:
        linear-gradient(145deg, rgba(255, 253, 244, .72), rgba(223, 243, 239, .72)),
        url('/images/wdhysj/client/garden-bg.png') center / cover fixed !important;
    font-family: var(--garden-font) !important;
}

body.wdhysj-return-invite::before {
    background: rgba(255, 253, 244, .18) !important;
}

body.wdhysj-return-invite .hero,
body.wdhysj-return-invite .card {
    color: var(--garden-ink) !important;
    background: rgba(255, 253, 244, .92) !important;
    border-color: var(--garden-line) !important;
    box-shadow: var(--garden-shadow) !important;
}

body.wdhysj-return-invite .brand,
body.wdhysj-return-invite label,
body.wdhysj-return-invite .card > span,
body.wdhysj-return-invite .kicker {
    color: var(--garden-coral) !important;
}

body.wdhysj-return-invite .brand img {
    width: min(150px, 46vw) !important;
    height: auto !important;
}

body.wdhysj-return-invite h1,
body.wdhysj-return-invite .card h2,
body.wdhysj-return-invite .returnee strong,
body.wdhysj-return-invite .reward strong,
body.wdhysj-return-invite .progress-head strong {
    color: var(--garden-ink) !important;
}

body.wdhysj-return-invite p,
body.wdhysj-return-invite .empty,
body.wdhysj-return-invite .returnee span,
body.wdhysj-return-invite .returnee small {
    color: var(--garden-ink-soft) !important;
}

body.wdhysj-return-invite .tags b {
    color: var(--garden-leaf-dark) !important;
    background: rgba(132, 149, 37, .1) !important;
    border-color: var(--garden-line) !important;
}

body.wdhysj-return-invite .reward,
body.wdhysj-return-invite .returnee,
body.wdhysj-return-invite .progress,
body.wdhysj-return-invite .empty {
    background: rgba(245, 237, 213, .58) !important;
    border-color: var(--garden-line) !important;
}

body.wdhysj-return-invite .reward small {
    color: var(--garden-coral) !important;
}

body.wdhysj-return-invite select,
body.wdhysj-return-invite input {
    color: var(--garden-ink) !important;
    background: rgba(255, 255, 252, .92) !important;
    border-color: var(--garden-line) !important;
}

body.wdhysj-return-invite button {
    color: #fffdf4 !important;
    background: linear-gradient(135deg, var(--garden-olive), var(--garden-leaf)) !important;
}

/* Immersive auth layout: one continuous garden scene with a full-height form rail. */
html.fi body.s33-guest-body,
html.fi body.s33-guest-body .fi-simple-layout,
html.fi body.s33-guest-body .fi-simple-main-ctn,
html.fi body.s33-guest-body .fi-simple-main,
html.fi body.s33-guest-body .fi-simple-main > div[wire\:id] {
    width: 100% !important;
    max-width: none !important;
    min-height: 100svh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
}

html.fi body.s33-guest-body {
    color: var(--garden-ink) !important;
    background: #edf3dc !important;
}

html.fi body.s33-guest-body .fi-simple-main::before,
html.fi body.s33-guest-body .fi-simple-main::after {
    display: none !important;
}

html.fi body.s33-guest-body .s33-guest-shell {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 100svh !important;
    padding: 0 !important;
    overflow: hidden !important;
    background:
        linear-gradient(90deg, rgba(255, 253, 244, .08) 0%, rgba(255, 253, 244, .02) 48%, rgba(255, 253, 244, .7) 77%, rgba(255, 253, 244, .96) 100%),
        url('/images/wdhysj/gardenbg2.png') center / cover no-repeat fixed !important;
}

html.fi body.s33-guest-body .s33-guest-shell::before {
    display: none !important;
}

html.fi body.s33-guest-body .s33-login-layout,
html.fi body.s33-guest-body .s33-login-layout--single {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    width: 100% !important;
    min-height: 100svh !important;
    grid-template-columns: minmax(0, 1fr) minmax(480px, clamp(480px, 32vw, 620px)) !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin: 0 !important;
}

html.fi body.s33-guest-body .zxr-login-scene {
    position: relative !important;
    min-width: 0 !important;
    min-height: 100svh !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html.fi body.s33-guest-body .zxr-login-scene::before {
    display: none !important;
}

html.fi body.s33-guest-body .zxr-login-scene__logo {
    position: absolute !important;
    z-index: 4 !important;
    top: 42px !important;
    left: 54px !important;
    width: 230px !important;
    height: auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 9px 14px rgba(74, 70, 33, .24)) !important;
}

html.fi body.s33-guest-body .zxr-login-scene__hero {
    position: absolute !important;
    z-index: 2 !important;
    right: 3% !important;
    bottom: -2% !important;
    display: block !important;
    width: min(34vw, 470px) !important;
    height: min(72vh, 720px) !important;
    background-image: var(--garden-login-art) !important;
    background-repeat: no-repeat !important;
    background-position: right bottom !important;
    background-size: contain !important;
    filter: drop-shadow(0 22px 24px rgba(67, 75, 37, .2)) !important;
}

html.fi body.s33-guest-body .s33-guest-shell--agent .zxr-login-scene__hero {
    right: 1% !important;
    width: min(43vw, 640px) !important;
    height: min(68vh, 650px) !important;
}

html.fi body.s33-guest-body .zxr-login-scene__copy {
    position: absolute !important;
    z-index: 5 !important;
    bottom: 50px !important;
    left: 54px !important;
    display: grid !important;
    gap: 5px !important;
    max-width: 430px !important;
    padding: 0 0 0 17px !important;
    border: 0 !important;
    border-left: 4px solid var(--garden-coral) !important;
    color: var(--garden-ink) !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

html.fi body.s33-guest-body .zxr-login-scene__copy span {
    color: var(--garden-coral) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

html.fi body.s33-guest-body .zxr-login-scene__copy strong {
    color: var(--garden-ink) !important;
    font-family: "Noto Serif SC", "Songti SC", var(--garden-font) !important;
    font-size: 34px !important;
    line-height: 1.18 !important;
    text-shadow: 0 2px 12px rgba(255, 253, 244, .86) !important;
}

html.fi body.s33-guest-body .zxr-login-scene__copy small {
    color: #5f673d !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
    text-shadow: 0 1px 8px rgba(255, 253, 244, .9) !important;
}

html.fi body.s33-guest-body .zxr-login-scene__seal,
html.fi body.s33-guest-body .zxr-auth-motion {
    display: none !important;
}

html.fi body.s33-guest-body .s33-login-card {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    min-height: 100svh !important;
    align-self: stretch !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 54px clamp(42px, 4vw, 68px) !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-left: 1px solid rgba(108, 120, 48, .24) !important;
    border-radius: 0 !important;
    color: var(--garden-ink) !important;
    background:
        linear-gradient(rgba(255, 253, 244, .94), rgba(255, 253, 244, .94)),
        url('/images/wdhysj/features-background.png') center / cover !important;
    box-shadow: -22px 0 58px rgba(52, 70, 35, .18) !important;
    backdrop-filter: blur(18px) !important;
    animation: none !important;
}

html.fi body.s33-guest-body .s33-login-card::before,
html.fi body.s33-guest-body .s33-login-card::after {
    display: none !important;
}

html.fi body.s33-guest-body .s33-login-card > :not(script) {
    width: 100% !important;
    max-width: 410px !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

html.fi body.s33-guest-body .s33-login-card__head {
    display: block !important;
    margin-bottom: 30px !important;
}

html.fi body.s33-guest-body .s33-login-logo-frame {
    display: none !important;
}

html.fi body.s33-guest-body .s33-login-title-block {
    display: grid !important;
    gap: 8px !important;
}

html.fi body.s33-guest-body .s33-login-kicker {
    color: var(--garden-coral) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

html.fi body.s33-guest-body .s33-login-title-block h2,
html.fi body.s33-guest-body .s33-login-card h2 {
    margin: 0 !important;
    color: var(--garden-ink) !important;
    font-family: "Noto Serif SC", "Songti SC", var(--garden-font) !important;
    font-size: 34px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
}

html.fi body.s33-guest-body .s33-login-card form#form,
html.fi body.s33-guest-body .s33-login-card .fi-sc-form,
html.fi body.s33-guest-body .s33-login-card .fi-form {
    display: grid !important;
    gap: 17px !important;
}

html.fi body.s33-guest-body .s33-login-card :where(label, .fi-fo-field-label, .fi-fo-field-label-content) {
    color: #4f5930 !important;
    font-size: 13px !important;
    font-weight: 750 !important;
}

html.fi body.s33-guest-body .s33-login-card :where(.fi-input-wrp, .fi-select-input) {
    min-height: 50px !important;
    border: 1px solid rgba(108, 120, 48, .28) !important;
    border-radius: 6px !important;
    color: var(--garden-ink) !important;
    background: rgba(255, 255, 252, .92) !important;
    box-shadow: 0 5px 16px rgba(77, 83, 38, .05) !important;
}

html.fi body.s33-guest-body .s33-login-card :where(.fi-input-wrp, .fi-select-input):focus-within {
    border-color: var(--garden-olive) !important;
    box-shadow: 0 0 0 3px rgba(108, 120, 48, .12) !important;
}

html.fi body.s33-guest-body .s33-login-card :where(input:not([type='checkbox']):not([type='radio']):not([type='hidden']), select) {
    min-height: 48px !important;
    color: var(--garden-ink) !important;
    caret-color: var(--garden-olive) !important;
    background: transparent !important;
    -webkit-text-fill-color: var(--garden-ink) !important;
}

html.fi body.s33-guest-body .s33-login-card input::placeholder {
    color: #89906b !important;
    -webkit-text-fill-color: #89906b !important;
}

html.fi body.s33-guest-body .s33-login-card .fi-icon-btn {
    color: #77804d !important;
}

html.fi body.s33-guest-body button.s33-captcha-code span {
    min-height: 50px !important;
    border: 1px solid rgba(229, 179, 79, .36) !important;
    border-radius: 6px !important;
    color: #b67822 !important;
    background: rgba(255, 248, 222, .9) !important;
    box-shadow: none !important;
}

html.fi body.s33-guest-body .s33-login-card input[type='checkbox'] {
    accent-color: var(--garden-olive) !important;
}

html.fi body.s33-guest-body .s33-login-card :where(button[type='submit'], .fi-btn-color-primary, .s33-login-button) {
    min-height: 50px !important;
    border: 0 !important;
    border-radius: 6px !important;
    color: #fffdf4 !important;
    background: var(--garden-olive) !important;
    box-shadow: 0 12px 24px rgba(88, 103, 39, .2) !important;
}

html.fi body.s33-guest-body .s33-login-card :where(button[type='submit'], .fi-btn-color-primary, .s33-login-button):hover {
    background: var(--garden-leaf-dark) !important;
}

html.fi body.s33-guest-body .s33-login-footer,
html.fi body.s33-guest-body .s33-login-footer--single {
    display: flex !important;
    justify-content: space-between !important;
    margin-top: 24px !important;
    padding-top: 18px !important;
    border-top: 1px solid rgba(108, 120, 48, .16) !important;
    color: #7b8259 !important;
    font-size: 11px !important;
}

html.fi body.s33-guest-body .s33-login-footer--single {
    justify-content: flex-end !important;
}

html.fi body.s33-guest-body .s33-login-footer a {
    color: var(--garden-olive) !important;
}

@media (max-width: 900px) {
    html.fi body.s33-guest-body .s33-guest-shell {
        overflow: visible !important;
        background:
            linear-gradient(180deg, rgba(255, 253, 244, .02) 0%, rgba(255, 253, 244, .08) 48%, #fffdf4 100%),
            url('/images/wdhysj/client/login-mobile-bg.png') center top / 100% auto no-repeat !important;
    }

    html.fi body.s33-guest-body .s33-login-layout,
    html.fi body.s33-guest-body .s33-login-layout--single {
        display: block !important;
        min-height: 100svh !important;
    }

    html.fi body.s33-guest-body .zxr-login-scene {
        min-height: 290px !important;
        height: 290px !important;
        border: 0 !important;
    }

    html.fi body.s33-guest-body .zxr-login-scene__logo {
        top: 20px !important;
        left: 22px !important;
        width: 176px !important;
    }

    html.fi body.s33-guest-body .zxr-login-scene__hero {
        display: none !important;
    }

    html.fi body.s33-guest-body .zxr-login-scene__copy {
        bottom: 24px !important;
        left: 22px !important;
        max-width: calc(100% - 44px) !important;
        padding-left: 13px !important;
    }

    html.fi body.s33-guest-body .zxr-login-scene__copy strong {
        font-size: 28px !important;
    }

    html.fi body.s33-guest-body .zxr-login-scene__copy small {
        color: #4f5930 !important;
    }

    html.fi body.s33-guest-body .s33-login-card {
        width: 100% !important;
        min-height: calc(100svh - 290px) !important;
        justify-content: flex-start !important;
        padding: 34px 24px 38px !important;
        overflow: visible !important;
        border: 0 !important;
        border-top: 1px solid rgba(108, 120, 48, .2) !important;
        border-radius: 0 !important;
        background: #fffdf4 !important;
        box-shadow: 0 -16px 36px rgba(68, 79, 36, .1) !important;
        backdrop-filter: none !important;
    }

    html.fi body.s33-guest-body .s33-login-card__head {
        margin-bottom: 26px !important;
    }

    html.fi body.s33-guest-body .s33-login-title-block h2,
    html.fi body.s33-guest-body .s33-login-card h2 {
        font-size: 29px !important;
    }
}

@media (max-width: 560px) {
    html.fi body.s33-guest-body .zxr-login-scene {
        min-height: 250px !important;
        height: 250px !important;
    }

    html.fi body.s33-guest-body .s33-login-card {
        min-height: calc(100svh - 250px) !important;
        padding: 30px 20px 34px !important;
    }

    html.fi body.s33-guest-body .zxr-login-scene__logo {
        width: 154px !important;
    }

    html.fi body.s33-guest-body .zxr-login-scene__copy {
        bottom: 18px !important;
    }

    html.fi body.s33-guest-body .zxr-login-scene__copy span,
    html.fi body.s33-guest-body .zxr-login-scene__copy small {
        font-size: 11px !important;
    }

    html.fi body.s33-guest-body .zxr-login-scene__copy strong {
        font-size: 24px !important;
    }
}

@media (min-width: 901px) and (max-height: 760px) {
    html.fi body.s33-guest-body .s33-login-card {
        justify-content: flex-start !important;
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }

    html.fi body.s33-guest-body .s33-login-card__head {
        margin-bottom: 22px !important;
    }

    html.fi body.s33-guest-body .zxr-login-scene__logo {
        top: 24px !important;
        width: 190px !important;
    }

    html.fi body.s33-guest-body .zxr-login-scene__copy {
        bottom: 28px !important;
    }
}

@media (max-width: 800px) {
    body.zxr-hub-page {
        overflow-x: hidden !important;
    }

    .zxr-hub-page .zxr-hub-hero__art {
        inset-inline-end: 4px !important;
    }

    .zxr-hub-page .s33-hub-title {
        max-width: min(100%, 520px) !important;
        font-size: 46px !important;
    }

    .zxr-hub-page .s33-hub-copy {
        max-width: 82% !important;
    }

    .qt-login-page .qt-login-foot,
    .zxr-hub-page .zxr-hub-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    body.qt-app .qt-header {
        padding-inline: 14px !important;
    }

    body.qt-app .qt-brand {
        min-width: 0;
    }

    body.qt-app .qt-brand img {
        width: 84px;
    }

    body.wdhysj-return-invite .hero,
    body.wdhysj-return-invite .card {
        border-radius: 8px !important;
    }
}

@media (max-width: 480px) {
    .zxr-hub-page .s33-hub-copy {
        max-width: 100% !important;
    }

    .zxr-hub-page .s33-hub-title {
        font-size: 38px !important;
    }

    body.qt-app .qt-brand span {
        padding-left: 10px;
        font-size: 13px;
    }

    body.wdhysj-return-invite .brand {
        align-items: flex-start;
        flex-direction: column;
        letter-spacing: 0;
    }
}