/* 2026-07-13 Codex UI refresh for the new exchange frontend only. */
:root {
  --ui-bg: #080a0d;
  --ui-bg-2: #0e1116;
  --ui-surface: #141922;
  --ui-surface-2: #1a202a;
  --ui-surface-3: #202833;
  --ui-line: rgba(232, 238, 242, 0.1);
  --ui-line-strong: rgba(232, 238, 242, 0.18);
  --ui-text: #f3f6f8;
  --ui-muted: #93a1ad;
  --ui-soft: #c7d0d7;
  --ui-green: #11b981;
  --ui-green-dark: #087760;
  --ui-gold: #d8ad5f;
  --ui-blue: #4db8ff;
  --ui-red: #ff5a66;
  --ui-shadow: 0 18px 46px rgba(0, 0, 0, 0.32);
  --ui-shadow-soft: 0 10px 26px rgba(0, 0, 0, 0.22);
}

html,
body,
#app {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
}

body {
  font-family: Inter, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif !important;
  letter-spacing: 0 !important;
}

body #app * {
  letter-spacing: 0 !important;
}

body #app :is(.home-page, .user-page, .mobile-trade-page, .trade-page, .login-page, .register-page, .deposit-page, .withdraw-page, .balance-records-page, .orders-page, .mobile-orders-page, .message-page, .message-detail-page, .language-page, .auth-page, .loan-page, .loan-record-page, .mobile-loan-record-page, .about-page, .news-detail-page, .pwd-page) {
  color: var(--ui-text) !important;
  background:
    linear-gradient(180deg, rgba(17, 185, 129, 0.08), rgba(8, 10, 13, 0) 230px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 72px),
    var(--ui-bg) !important;
}

body #app .home-page::before,
body #app .home-page::after {
  display: none !important;
}

body #app :is(.top-nav, .header, .trade-header, .deposit-header) {
  min-height: 60px !important;
  background: rgba(10, 13, 17, 0.88) !important;
  border-bottom: 1px solid var(--ui-line) !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
}

body #app :is(.logo-icon, .product-icon, .panel-product-icon, .q-icon, .menu-icon, .user-avatar) {
  background: linear-gradient(135deg, rgba(17, 185, 129, 0.95), rgba(216, 173, 95, 0.9)) !important;
  color: #07100d !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 24px rgba(17, 185, 129, 0.18) !important;
}

body #app :is(.logo-text, .page-title, .title, .header-title, .section-title, .records-title, .symbol-name, .user-email) {
  color: var(--ui-text) !important;
  font-weight: 750 !important;
}

body #app :is(.nav-link, .nav-email, .text-muted, .balance-label, .record-date, .time-rate, .panel-label, .section-label, .label, .faq-a, .message-date, .empty-state, .records-loading, .empty-records) {
  color: var(--ui-muted) !important;
}

body #app :is(.nav-link.active, .nav-link:hover, .market-tab.active, .panel-tab.active, .tab.active, .category-tab.active, .record-btn, .link, .service-link) {
  color: var(--ui-green) !important;
}

body #app :is(.login-btn-small, .login-btn, .submit-btn, .cta-btn, .hero-btn, .agree-btn, .confirm-btn, .btn-confirm, .record-btn, .max-btn) {
  min-height: 44px !important;
  border-radius: 8px !important;
  color: #06110d !important;
  background: linear-gradient(180deg, #28d59b, #0aa77c) !important;
  box-shadow: 0 12px 24px rgba(17, 185, 129, 0.22) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  font-weight: 700 !important;
}

body #app :is(.cancel-btn, .btn-cancel, .back-btn, .close-btn, .modal-close, .picker-cancel, .picker-confirm, .eye-btn) {
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--ui-soft) !important;
  border: 1px solid var(--ui-line) !important;
}

body #app :is(.login-card, .register-card, .user-left, .user-right, .user-card, .market-panel, .feature-card, .step-card, .level-card, .news-card, .panel-section, .trade-panel, .deposit-card, .withdraw-card, .loan-card, .auth-card, .pwd-card, .wallet-card, .detail-card, .record-card, .order-card, .message-card, .modal-content, .result-modal, .countdown-modal, .password-panel, .picker-panel, .symbol-panel) {
  border-radius: 8px !important;
  border: 1px solid var(--ui-line) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)) !important;
  box-shadow: var(--ui-shadow-soft) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

body #app :is(input, textarea, .input, .input-wrap, .amount-input-box, .input-box, .select-box, .address-box, .bank-select, .password-input-box) {
  color: var(--ui-text) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 8px !important;
}

body #app :is(input, textarea, .input)::placeholder {
  color: rgba(199, 208, 215, 0.45) !important;
}

body #app :is(input:focus, textarea:focus, .input:focus) {
  border-color: rgba(17, 185, 129, 0.62) !important;
  box-shadow: 0 0 0 3px rgba(17, 185, 129, 0.14) !important;
}

body #app :is(.up, .profit, .symbol-change.up, .product-change.up, .t-change.up, .p-change.up, .record-amount.up, .balance-change.up, .verified-badge.verified) {
  color: var(--ui-green) !important;
}

body #app :is(.down, .loss, .symbol-change.down, .product-change.down, .t-change.down, .p-change.down, .record-amount.down, .balance-change.down, .amount-error) {
  color: var(--ui-red) !important;
}

body #app :is(.symbol-change.up, .product-change.up, .verified-badge.verified) {
  background: rgba(17, 185, 129, 0.13) !important;
}

body #app :is(.symbol-change.down, .product-change.down) {
  background: rgba(255, 90, 102, 0.12) !important;
}

body #app .hero {
  padding: 56px 32px 38px !important;
  background:
    linear-gradient(135deg, rgba(216, 173, 95, 0.12), transparent 38%),
    linear-gradient(180deg, rgba(20, 25, 34, 0.92), rgba(8, 10, 13, 0.92)) !important;
  border-bottom: 1px solid var(--ui-line) !important;
}

body #app .hero-main {
  max-width: 1180px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.04fr) minmax(320px, 0.96fr) !important;
  gap: 28px !important;
  align-items: center !important;
}

body #app .hero-title {
  max-width: 760px !important;
  color: var(--ui-text) !important;
  font-size: 56px !important;
  line-height: 1.05 !important;
}

body #app .hero-desc {
  max-width: 620px !important;
  color: var(--ui-soft) !important;
  line-height: 1.7 !important;
}

body #app .hero-stats,
body #app .features,
body #app .steps-grid,
body #app .levels-grid,
body #app .news-grid {
  gap: 14px !important;
}

body #app :is(.stat-num, .balance-value, .symbol-price, .product-price, .t-price, .p-price, .value, .result-amount) {
  color: var(--ui-text) !important;
  font-weight: 800 !important;
}

body #app .market-panel {
  overflow: hidden !important;
}

body #app :is(.table-header, .panel-list-header) {
  color: var(--ui-muted) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

body #app :is(.table-row, .panel-row, .record-item, .order-item, .message-item, .lang-item, .product-item, .picker-item, .menu-item) {
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  background: rgba(255, 255, 255, 0.035) !important;
}

body #app :is(.table-row, .panel-row, .record-item, .order-item, .message-item, .lang-item, .product-item, .menu-item):hover {
  border-color: rgba(17, 185, 129, 0.18) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

body #app .mobile-trade-page {
  padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
}

body #app .symbol-info {
  min-width: 0 !important;
}

body #app .period-bar {
  gap: 8px !important;
  padding: 10px 14px !important;
  background: rgba(255, 255, 255, 0.018) !important;
}

body #app .period-btn,
body #app .time-item,
body #app .preset-btn,
body #app .network-tab,
body #app .tab,
body #app .category-tab {
  border-radius: 8px !important;
  color: var(--ui-soft) !important;
  border: 1px solid var(--ui-line) !important;
  background: rgba(255, 255, 255, 0.055) !important;
}

body #app :is(.period-btn.active, .time-item.active, .preset-btn.active, .network-tab.active, .tab.active, .category-tab.active) {
  color: #06110d !important;
  background: linear-gradient(180deg, #d8ad5f, #c7923d) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

body #app .chart-section {
  padding: 12px !important;
}

body #app .chart-container {
  min-height: 300px !important;
  border-radius: 8px !important;
  border: 1px solid var(--ui-line) !important;
  background: #07090d !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

body #app .panel-section {
  margin-bottom: 12px !important;
  padding: 14px !important;
}

body #app .btn-buy {
  color: #06110d !important;
  background: linear-gradient(180deg, #28d59b, #0aa77c) !important;
}

body #app .btn-sell {
  color: #fff !important;
  background: linear-gradient(180deg, #ff6a74, #d93e4c) !important;
}

body #app .modal-overlay,
body #app .password-overlay,
body #app .picker-overlay,
body #app .symbol-overlay {
  background: rgba(0, 0, 0, 0.68) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

body #app :is(.modal-header, .modal-footer, .panel-header, .panel-footer, .picker-header) {
  border-color: var(--ui-line) !important;
}

body #app .user-main {
  max-width: 1180px !important;
  gap: 18px !important;
}

body #app .user-card {
  background:
    linear-gradient(135deg, rgba(17, 185, 129, 0.22), rgba(216, 173, 95, 0.14)),
    var(--ui-surface) !important;
}

body #app .quick-actions {
  gap: 10px !important;
}

body #app .q-btn {
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  border: 1px solid var(--ui-line) !important;
}

body #app .menu-list {
  gap: 10px !important;
}

body #app .menu-item {
  min-height: 56px !important;
  padding: 12px 14px !important;
}

body #app .balance-records-page :is(.record-item, .record-card),
body #app .orders-page :is(.order-item, .order-card),
body #app .mobile-orders-page :is(.order-item, .order-card) {
  margin-bottom: 10px !important;
}

body #app :is(.deposit-main, .content, .orders-container, .detail-container, .records-list) {
  max-width: 980px !important;
}

body #app .qr-box,
body #app .upload-box,
body #app .voucher-preview,
body #app .address-box {
  border-radius: 8px !important;
  border: 1px dashed rgba(216, 173, 95, 0.36) !important;
  background: rgba(255, 255, 255, 0.045) !important;
}

body #app .bottom-nav {
  height: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  background: rgba(8, 10, 13, 0.94) !important;
  border-top: 1px solid var(--ui-line-strong) !important;
  box-shadow: 0 -12px 34px rgba(0, 0, 0, 0.34) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
}

body #app .bottom-nav .nav-item {
  min-width: 58px !important;
  color: rgba(232, 238, 242, 0.62) !important;
  font-size: 11px !important;
}

body #app .bottom-nav .nav-item.active,
body #app .bottom-nav .nav-item:hover {
  color: var(--ui-green) !important;
}

body #app .global-toast {
  border-radius: 8px !important;
  box-shadow: var(--ui-shadow) !important;
}

body #app :is(.login-page, .register-page) .content {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 64px 20px 42px !important;
}

body #app :is(.login-page, .register-page) :is(.login-card, .register-card) {
  width: min(520px, 100%) !important;
  max-width: 520px !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 32px !important;
}

body #app :is(.login-page, .register-page) .title {
  margin-bottom: 28px !important;
}

body #app :is(.login-page, .register-page) .form {
  gap: 16px !important;
}

body #app :is(.login-page, .register-page) .input-wrap {
  height: 54px !important;
  padding: 0 14px !important;
  background: rgba(255, 255, 255, 0.055) !important;
}

body #app :is(.login-page, .register-page) .input-wrap .input {
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body #app :is(.login-page, .register-page) .eye-btn {
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
}

@media (max-width: 820px) {
  body #app :is(.home-page, .user-page, .mobile-trade-page, .trade-page, .deposit-page, .withdraw-page, .balance-records-page, .orders-page, .mobile-orders-page, .message-page, .language-page, .auth-page, .loan-page, .loan-record-page, .about-page) {
    background:
      linear-gradient(180deg, rgba(17, 185, 129, 0.07), rgba(8, 10, 13, 0) 190px),
      var(--ui-bg) !important;
  }

  body #app .hero {
    padding: 28px 16px 18px !important;
  }

  body #app .hero-main {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  body #app .hero-title {
    font-size: 34px !important;
  }

  body #app :is(.top-nav, .header, .trade-header, .deposit-header) {
    min-height: 54px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body #app .user-main {
    display: block !important;
    padding: 14px !important;
  }

  body #app .user-left,
  body #app .user-right {
    width: 100% !important;
    margin-bottom: 14px !important;
    padding: 14px !important;
  }

  body #app :is(.login-card, .register-card, .deposit-card, .withdraw-card, .loan-card, .auth-card, .pwd-card, .wallet-card) {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }

  body #app :is(.login-page, .register-page) .content {
    display: block !important;
    padding: 28px 24px 42px !important;
  }

  body #app :is(.login-page, .register-page) :is(.login-card, .register-card) {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body #app .chart-container {
    min-height: 310px !important;
  }

  body #app .trade-panel,
  body #app .chart-section {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body #app :is(.action-btns, .preset-btns, .time-list, .category-tabs, .network-tabs, .tabs) {
    gap: 8px !important;
  }

  body #app :is(.submit-btn, .btn-buy, .btn-sell, .confirm-btn) {
    min-height: 48px !important;
  }
}

@media (min-width: 821px) {
  body #app .bottom-nav {
    display: none !important;
  }

  body #app :is(.home-page, .user-page, .trade-page, .deposit-page, .orders-page, .message-page) {
    padding-bottom: 0 !important;
  }
}