:root {
    --eco-bg: #eefaf0;
    --eco-bg-soft: #f8fff9;
    --eco-card: rgba(255, 255, 255, 0.94);
    --eco-primary: #20a35b;
    --eco-primary-dark: #08713d;
    --eco-primary-soft: #c8f3d6;
    --eco-border: rgba(32, 163, 91, 0.16);
    --eco-text: #173a27;
    --eco-muted: #6a8874;
    --eco-shadow: 0 18px 45px rgba(18, 105, 55, 0.14);
    --theme-primary: var(--eco-primary);
    --theme-gradient: linear-gradient(135deg, #ffffff 0%, #c9f7d8 42%, #24b562 100%);
    --text-light: #ffffff;
}

html,
body {
    min-height: 100%;
    background: radial-gradient(circle at top, #ffffff 0, var(--eco-bg) 38%, #dff5e4 100%) !important;
    color: var(--eco-text) !important;
}

body {
    font-family: Poppins, Arial, sans-serif !important;
    margin: 0 auto !important;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(203, 242, 215, 0.12)),
        repeating-linear-gradient(115deg, rgba(32, 163, 91, 0.045) 0 1px, transparent 1px 42px);
    z-index: -1;
}

.page-wraper,
.page-wrapper,
.page-content,
.content-body,
.main-content,
.common_body,
.container,
.main,
.wrapper,
.mainbox,
.page,
.app,
.view-main,
.panel-body,
.login-area,
.account-area,
.register-area,
.recharge-content,
.withdraw-content,
.team-container,
.profile-container,
.task-container,
.notice-container,
.faq-container {
    width: min(100% - 24px, 480px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.page-wraper,
.page-wrapper,
.content-body,
.main-content,
.common_body,
.login-area,
.account-area,
.register-area,
.recharge-content,
.withdraw-content,
.profile-container,
.task-container,
.notice-container,
.faq-container {
    background: var(--eco-card) !important;
    border: 1px solid var(--eco-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--eco-shadow) !important;
    padding: 16px !important;
    box-sizing: border-box !important;
}

.page-wraper,
.page-wrapper,
.common_body {
    margin-top: 14px !important;
    margin-bottom: 86px !important;
}

.card,
.box,
.item,
.list-item,
.task-card,
.device-card,
.product-card,
.recharge-card,
.withdraw-card,
.team-card,
.profile-card,
.notice-card,
.faq-item,
.stats-card,
.balance-card,
.form-card,
.bonus-card,
.code-card,
.commission-card,
.record-item,
.member-item,
.bank-card,
.service-card,
.blog-card,
.message-card,
.modal-content {
    background: var(--eco-card) !important;
    border: 1px solid var(--eco-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 28px rgba(18, 105, 55, 0.1) !important;
    color: var(--eco-text) !important;
}

.top,
.top-box,
.header,
.page-header,
.navbar,
.nav-bar,
.center,
.title-bar,
.section-title,
.page-title,
.bonus-title,
.card-title {
    color: var(--eco-text) !important;
}

.top,
.header,
.page-header,
.navbar,
.nav-bar,
.title-bar {
    background: linear-gradient(135deg, #ffffff 0%, #d8f8df 55%, #91dfad 100%) !important;
    border-bottom: 1px solid var(--eco-border) !important;
    box-shadow: 0 8px 24px rgba(18, 105, 55, 0.09) !important;
}

a {
    color: var(--eco-primary-dark) !important;
}

.btn,
button,
input[type="button"],
input[type="submit"],
.submit,
.cta,
.copy-btn,
.rechargeBtn,
.amount-btn,
.ghost,
.layui-layer-btn a,
.nav-btn,
.tab-btn.active,
.active-btn {
    background: linear-gradient(135deg, #ffffff 0%, #bdf2cf 45%, #19a85c 100%) !important;
    border: 1px solid rgba(32, 163, 91, 0.28) !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 24px rgba(32, 163, 91, 0.2) !important;
    color: #064326 !important;
    font-weight: 700 !important;
}

.btn:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.copy-btn:hover,
.cta:hover {
    filter: saturate(1.05) brightness(1.01);
}

.form-control,
input,
select,
textarea,
.input-group,
.search-box {
    background: rgba(255, 255, 255, 0.82) !important;
    border: 1px solid var(--eco-border) !important;
    border-radius: 14px !important;
    color: var(--eco-text) !important;
    box-shadow: none !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--eco-muted) !important;
}

.badge,
.label,
.tag,
.status,
.highlight,
.stat-value,
.commission-value,
.amount,
.price,
.money,
.balance {
    color: var(--eco-primary-dark) !important;
}

.tab-btn,
.tabs a,
.nav-link {
    border-color: var(--eco-border) !important;
    color: var(--eco-muted) !important;
}

.active,
.tab-btn.active,
.tabs a.active,
.nav-link.active {
    color: var(--eco-primary-dark) !important;
}

.menubar-area,
.menubar {
    position: fixed;
    right: 12px;
    bottom: 12px;
    left: 12px;
    max-width: 480px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid var(--eco-border);
    border-radius: 22px;
    box-shadow: 0 -8px 28px rgba(18, 105, 55, 0.14);
    z-index: 1000;
}

.menubar {
    display: flex;
    align-items: center;
    justify-content: space-around;
    min-height: 64px;
}

.menubar a,
.menubar-nav .nav-link {
    color: var(--eco-muted) !important;
    text-decoration: none !important;
}

.menubar a.active,
.menubar-nav .nav-link.active,
.menubar a.active span {
    color: var(--eco-primary-dark) !important;
}

.menubar img {
    filter: hue-rotate(80deg) saturate(0.9) brightness(0.9);
}

.nav-link-income {
    background: #ffffff !important;
    box-shadow: 0 -4px 15px rgba(18, 105, 55, 0.13) !important;
}

.nav-link-income .icon-bg {
    background: var(--theme-gradient) !important;
}

.nav-link-income-label {
    color: var(--eco-primary-dark) !important;
}

table,
.table {
    background: var(--eco-card) !important;
    border-color: var(--eco-border) !important;
    color: var(--eco-text) !important;
}

hr,
.divider {
    border-color: var(--eco-border) !important;
}

@media (min-width: 768px) {
    body {
        padding-top: 18px !important;
        padding-bottom: 18px !important;
    }
}