/* TripAdvisor-inspired white and green theme */
:root,
:host {
  --brand-green: #00aa6c;
  --brand-green-dark: #007a4d;
  --brand-green-bright: #34e0a1;
  --brand-green-soft: #e9f9f2;
  --brand-page: #f3fbf7;
  --brand-surface: #ffffff;
  --brand-border: #d7eee4;
  --brand-text: #17352b;
  --brand-muted: #71837b;
  --van-primary-color: #00aa6c !important;
  --van-success-color: #00aa6c !important;
  --van-background: #f3fbf7 !important;
  --van-background-2: #ffffff !important;
  --van-background-3: #e9f9f2 !important;
  --van-text-color: #17352b !important;
  --van-text-color-2: #526960 !important;
  --van-text-color-3: #8a9a93 !important;
  --van-border-color: #d7eee4 !important;
}

html,
body {
  background: #eaf7f1 !important;
  color: var(--brand-text) !important;
}

#app {
  background: var(--brand-page) !important;
  border-color: #d7eee4 !important;
  box-shadow: 0 0 34px rgba(0, 122, 77, 0.1) !important;
}

/* Shared navigation and controls */
.van-nav-bar {
  --van-nav-bar-background: #ffffff !important;
  --van-nav-bar-icon-color: #00aa6c !important;
  --van-nav-bar-title-text-color: #17352b !important;
  border-bottom: 1px solid var(--brand-border) !important;
  box-shadow: 0 3px 14px rgba(0, 122, 77, 0.06) !important;
}

.topbar-back-icon {
  color: #008a58 !important;
  background: #e5f7ef !important;
  box-shadow: inset 0 0 0 1px #cceade !important;
}

.boty {
  background: rgba(255, 255, 255, 0.98) !important;
  border-top: 1px solid var(--brand-border) !important;
  box-shadow: 0 -6px 22px rgba(0, 122, 77, 0.1) !important;
}

.boty .xiank .tgh .tgh-box .webc {
  color: #789188 !important;
}

.boty .xiank .tgh .tgh-box .active {
  color: #008a58 !important;
}

.boty .xiank .tgh .tgh-ball {
  background: linear-gradient(135deg, #34e0a1, #00aa6c) !important;
  box-shadow: 0 6px 18px rgba(0, 170, 108, 0.34) !important;
}

.van-button--primary,
.submit,
.submit-btn,
.cont_textCon_but,
.add_card,
.detail-btn,
.start-order,
.submit-review,
.review-success button,
.servicelistItemBtn,
.boxBtn-active {
  color: #ffffff !important;
  border-color: #00aa6c !important;
  background: linear-gradient(135deg, #19c98a, #008f5c) !important;
  box-shadow: 0 8px 20px rgba(0, 170, 108, 0.22) !important;
}

.submit-btn.disabled,
.submit-review:disabled {
  background: #a9c8bb !important;
  box-shadow: none !important;
}

.van-cell,
.van-field,
.van-search,
.van-search__content,
.van-popup,
.van-dialog {
  color: var(--brand-text) !important;
  background-color: #ffffff !important;
}

.van-field__control,
.van-cell__title,
.van-cell__value {
  color: var(--brand-text) !important;
}

input,
textarea {
  caret-color: #00aa6c !important;
}

/* Home */
.home {
  min-height: 100dvh;
  background: linear-gradient(180deg, #ffffff 0, #f3fbf7 240px) !important;
}

.home .header {
  background: #00aa6c !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
}

.home .header .title,
.home .header .lang-text,
.home .header .dropdown-arrow {
  color: #ffffff !important;
}

.homeBox {
  background: #ffffff !important;
  border: 1px solid var(--brand-border) !important;
  box-shadow: 0 7px 22px rgba(0, 122, 77, 0.08) !important;
}

.home .van-notice-bar {
  --van-notice-bar-background: #e9f9f2 !important;
  --van-notice-bar-text-color: #007a4d !important;
  border-radius: 10px !important;
}

.quick-actions {
  background: #ffffff !important;
  border-color: var(--brand-border) !important;
  box-shadow: 0 7px 22px rgba(0, 122, 77, 0.09) !important;
}

.quick-action {
  color: var(--brand-text) !important;
}

.quick-action-label {
  color: #245344 !important;
}

.quick-action-icon,
.quick-recharge .quick-action-icon,
.quick-withdraw .quick-action-icon,
.quick-service .quick-action-icon,
.quick-activity .quick-action-icon {
  background: linear-gradient(145deg, #34e0a1, #00aa6c) !important;
  box-shadow: 0 6px 14px rgba(0, 170, 108, 0.26), inset 0 0 0 1px rgba(255, 255, 255, 0.4) !important;
}

.homeAll .homeAll-box .homeAll-item {
  background: #fbfffd !important;
  border-color: var(--brand-border) !important;
  border-radius: 10px !important;
}

.homeAll .homeAll-box .homeAll-item span,
.taskHall .taskHall-title,
.homeList .homeVip-title,
.homeList .homeList-box,
.partnerBox .partner-title {
  color: var(--brand-text) !important;
}

.taskHall .taskHall-container .employee-card,
.taskHall .taskHall-container .employee-card.trial,
.taskHall .taskHall-container .employee-card.regular,
.taskHall .taskHall-container .employee-card.vip {
  background: linear-gradient(135deg, #14bd7e, #007a4d) !important;
  border-color: rgba(0, 122, 77, 0.12) !important;
  box-shadow: 0 7px 18px rgba(0, 122, 77, 0.18) !important;
}

.taskHall .employee-badge,
.taskHall .salary-label,
.taskHall .salary-value {
  color: #ffffff !important;
}

.taskHall .vs-divider {
  background: #34e0a1 !important;
  border-color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(0, 170, 108, 0.28) !important;
}

.partnerBox .partner-grid .partner-item {
  background: #ffffff !important;
  border-color: var(--brand-border) !important;
}

.notice-dialog .notice-banner,
.notice-dialog .notice-btn {
  background-color: #00aa6c !important;
  background-image: linear-gradient(135deg, #34e0a1, #008f5c) !important;
}

/* Mine */
.container {
  background-image: linear-gradient(180deg, #dff7ec 0, #f3fbf7 330px) !important;
  background-color: var(--brand-page) !important;
  color: var(--brand-text) !important;
}

.container[class],
.mine-page {
  border-color: var(--brand-border) !important;
}

.top .lang {
  color: #ffffff !important;
  background: rgba(0, 122, 77, 0.82) !important;
}

.topBox .topBox-top .topBox-head {
  background: #e5f7ef !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 5px 16px rgba(0, 122, 77, 0.16) !important;
}

.topBox .topBox-top .topBox-det .topBox-name {
  color: var(--brand-text) !important;
}

.topBox .topBox-top .topBox-det .topBox-con .topBox-vip {
  color: #007a4d !important;
  background: #dff6ec !important;
}

.topBox .topBox-foot .topBox-item .topBox-item-top {
  color: #ffffff !important;
  background: #007a4d !important;
}

.topBox .topBox-foot .topBox-item .topBox-item-foot {
  color: #ffffff !important;
  background: #19c98a !important;
}

.shortcut,
.menu {
  background: #ffffff !important;
  border: 1px solid var(--brand-border) !important;
  box-shadow: 0 7px 20px rgba(0, 122, 77, 0.07) !important;
}

.shortcut .page-box-btn,
.menu .menu-list {
  color: var(--brand-text) !important;
}

.colorLine,
.colorLine1 {
  color: #006f48 !important;
  background: linear-gradient(135deg, #ffffff, #ddf7eb) !important;
  border: 1px solid #cceade !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 18px rgba(0, 122, 77, 0.08) !important;
}

.out {
  color: #ffffff !important;
  background: linear-gradient(135deg, #00aa6c, #007a4d) !important;
}

/* Login and register */
.loginWrap {
  background-image: linear-gradient(160deg, #34e0a1 0, #00aa6c 34%, #f3fbf7 34%, #ffffff 100%) !important;
  background-color: #f3fbf7 !important;
}

.loginWrap .cont_textCon_item,
.loginWrap_cont_tip {
  color: var(--brand-text) !important;
}

.inputStyle {
  color: var(--brand-text) !important;
  background: #ffffff !important;
  border: 1px solid #cceade !important;
  box-shadow: 0 5px 16px rgba(0, 122, 77, 0.06) !important;
}

.loginWrap_cont_tip span {
  color: #008f5c !important;
}

/* Forms, wallet, records and account pages */
.support-chat-page {
  padding-top: 0 !important;
}

.support-chat-shell {
  margin-top: 0 !important;
}

.form-card,
.quick-amount,
.info-card,
.balance-card,
.record-card,
.msg-card,
.profile-card,
.level-section,
.card-section,
.level-card,
.privilege-card,
.page-content .van-form,
.page-content .form-group,
.list_wrap .list,
.card,
.boxDown,
.boxMiddle .boxMiddle-item,
.boxSelect .boxSelect-item,
.servicelistItem {
  color: var(--brand-text) !important;
  background: #ffffff !important;
  border-color: var(--brand-border) !important;
  box-shadow: 0 7px 22px rgba(0, 122, 77, 0.08) !important;
}

.page-title,
.page-header .page-title,
.form-header,
.card-title,
.msg-title,
.servicelistItemText,
.item-value,
.balance-row strong {
  color: var(--brand-text) !important;
}

.page-header .record-link,
.history-link,
.balance-value,
.info-content a,
.max-btn,
.check-mark,
.highlight,
.highlight-month {
  color: #008f5c !important;
}

.quick-amount .quick-grid .quick-item,
.withdraw-tab,
.servicelistItemBottom,
.bound-status,
.security-cell,
.bank-pop-content .search-box .van-field {
  color: #315c4d !important;
  background: #edf9f3 !important;
  border-color: #cfeadd !important;
}

.withdraw-tab.active,
.tabs .current,
.boxSelect .active,
.music-type-item.active {
  color: #ffffff !important;
  background: #00aa6c !important;
  border-color: #00aa6c !important;
}

.bank-popup .van-popup__content,
.detail-popup,
.iframe-popup,
.iframe-wrap .iframe-header {
  color: var(--brand-text) !important;
  background: #ffffff !important;
  border-color: var(--brand-border) !important;
}

.service-list,
.loading-wrap,
.empty-wrap,
.security-page,
.password-page,
.bind-email-page,
.bind-phone-page,
.paypay-page,
.vip-page {
  color: var(--brand-text) !important;
  background: var(--brand-page) !important;
}

/* Order/review flow */
.review-screen,
.active-review-screen {
  color: var(--brand-text) !important;
  background: #f1faf6 !important;
}

.review-header {
  color: #ffffff !important;
  background: linear-gradient(135deg, #00aa6c, #007a4d) !important;
}

.back-button {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.16) !important;
}

.order-summary,
.balance-panel,
.order-state,
.loading-card,
.hotel-card,
.review-card,
.review-success,
.current-order-strip {
  color: var(--brand-text) !important;
  background: #ffffff !important;
  border-color: var(--brand-border) !important;
  box-shadow: 0 8px 26px rgba(0, 122, 77, 0.08) !important;
}

.state-icon {
  color: #008f5c !important;
  background: #e5f7ef !important;
}

.review-tip {
  color: #24624d !important;
  background: #e8f8f1 !important;
  border-color: #cceade !important;
}

.section-number,
.order-status,
.vip-badge,
.state-icon.complete,
.success-icon {
  color: #ffffff !important;
  background: #00aa6c !important;
}

.hotel-kicker,
.rating-label,
.progress-count {
  color: #008f5c !important;
}

.textarea-wrap textarea {
  color: var(--brand-text) !important;
  background: #fbfffd !important;
  border-color: #cfeadd !important;
}

.textarea-wrap textarea:focus {
  border-color: #00aa6c !important;
  box-shadow: 0 0 0 3px rgba(0, 170, 108, 0.11) !important;
}

.matching-screen {
  color: #ffffff !important;
  background: radial-gradient(circle at 50% 35%, rgba(52, 224, 161, 0.28), transparent 35%), linear-gradient(160deg, #064c37, #021f17) !important;
}

.matching-badge-left,
.matching-badge-right,
.matching-orbit,
.matching-track span {
  background-color: #19c98a !important;
}

.matching-panel {
  background: rgba(0, 71, 50, 0.72) !important;
  border-color: rgba(52, 224, 161, 0.34) !important;
}

.matching-dots i {
  background: #34e0a1 !important;
}

.review-star.active,
.success-rating {
  color: #00aa6c !important;
}

/* Legacy product/order area */
.tabs,
.top,
.boxDown,
.music-select {
  border-color: var(--brand-border) !important;
}

.tabs div,
.music-type-item,
.page-btn {
  color: #315c4d !important;
  background: #ffffff !important;
  border-color: var(--brand-border) !important;
}

@media (max-width: 360px) {
  .quick-actions {
    gap: 5px !important;
    padding-inline: 7px !important;
  }

  .quick-action-label {
    font-size: 11px !important;
  }
}