/* 2026-07-14 Codex OKX-style refresh for /opt/exchange-test only. */
:root {
  --okx-bg: #050607;
  --okx-bg-2: #090b0d;
  --okx-panel: #111316;
  --okx-panel-2: #171a1f;
  --okx-panel-3: #1e2229;
  --okx-line: rgba(255, 255, 255, 0.08);
  --okx-line-strong: rgba(255, 255, 255, 0.14);
  --okx-text: #f3f4f5;
  --okx-muted: #8b929d;
  --okx-soft: #c2c7cf;
  --okx-green: #00c087;
  --okx-green-2: #04a778;
  --okx-red: #f6465d;
  --okx-blue: #3f7eff;
  --okx-amber: #f2b84b;
  --okx-radius: 8px;
  --okx-radius-lg: 12px;
  --okx-shadow: 0 16px 36px rgba(0, 0, 0, 0.34);
}

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

body {
  font-family: Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif !important;
}

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

body #app :is(.home-page, .user-page, .trade-page, .mobile-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) {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.018), transparent 180px),
    var(--okx-bg) !important;
  color: var(--okx-text) !important;
}

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

body #app :is(.top-nav, .header, .trade-header, .deposit-header, .panel-header) {
  background: rgba(5, 6, 7, 0.94) !important;
  border-bottom: 1px solid var(--okx-line) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

body #app :is(.logo-icon, .product-icon, .panel-product-icon, .product-img) {
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 0 0 1px var(--okx-line-strong), 0 8px 18px rgba(0,0,0,.24) !important;
}

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

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

body #app :is(.nav-link.active, .nav-link:hover, .link, .service-link) {
  color: var(--okx-text) !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, .chart-area, .panel-info, .deposit-card, .withdraw-card, .loan-card, .auth-card, .pwd-card, .wallet-card, .detail-card, .record-card, .record-item, .order-card, .message-card, .modal-content, .result-modal, .countdown-modal, .password-panel, .picker-panel, .symbol-panel, .symbol-list-panel, .product-item, .menu-list) {
  background: var(--okx-panel) !important;
  border: 1px solid var(--okx-line) !important;
  border-radius: var(--okx-radius-lg) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body #app :is(.feature-card, .step-card, .level-card, .news-card, .record-item, .order-card, .message-card, .product-item, .menu-item, .lang-item, .table-row, .panel-row) {
  background: var(--okx-panel-2) !important;
  border-color: var(--okx-line) !important;
}

body #app :is(.feature-card, .step-card, .level-card, .news-card, .record-item, .order-card, .message-card, .product-item, .menu-item, .lang-item, .table-row, .panel-row):hover {
  background: var(--okx-panel-3) !important;
  border-color: var(--okx-line-strong) !important;
  transform: none !important;
}

body #app :is(input, textarea, .input, .input-wrap, .amount-input-box, .amount-box, .amount-input, .input-box, .select-box, .address-box, .bank-select, .password-input-box) {
  color: var(--okx-text) !important;
  background: #0b0d10 !important;
  border: 1px solid var(--okx-line-strong) !important;
  border-radius: var(--okx-radius) !important;
  box-shadow: none !important;
}

body #app :is(input, textarea, .input)::placeholder {
  color: rgba(194,199,207,.42) !important;
}

body #app :is(input:focus, textarea:focus, .input:focus, .input-wrap:focus-within, .amount-input-box:focus-within, .amount-box:focus-within) {
  border-color: rgba(255,255,255,.32) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.06) !important;
}

body #app :is(.submit-btn, .login-btn, .login-btn-small, .cta-btn, .hero-btn, .agree-btn, .confirm-btn, .btn-confirm, .record-btn, .max-btn) {
  min-height: 44px !important;
  border-radius: var(--okx-radius) !important;
  background: #f4f4f4 !important;
  color: #050607 !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: none !important;
  font-weight: 750 !important;
}

body #app :is(.cancel-btn, .btn-cancel, .back-btn, .close-btn, .modal-close, .picker-cancel, .picker-confirm, .eye-btn) {
  border-radius: var(--okx-radius) !important;
  background: var(--okx-panel-2) !important;
  color: var(--okx-soft) !important;
  border: 1px solid var(--okx-line) !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, .green) {
  color: var(--okx-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, .red) {
  color: var(--okx-red) !important;
}

body #app :is(.symbol-change.up, .product-change.up, .verified-badge.verified, .profit-tag) {
  background: rgba(0,192,135,.12) !important;
  border: 1px solid rgba(0,192,135,.16) !important;
}

body #app :is(.symbol-change.down, .product-change.down) {
  background: rgba(246,70,93,.12) !important;
  border: 1px solid rgba(246,70,93,.16) !important;
}

body #app .hero {
  padding: 48px 32px 34px !important;
  background: #050607 !important;
  border-bottom: 1px solid var(--okx-line) !important;
}

body #app .hero-main {
  max-width: 1180px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr) !important;
  gap: 24px !important;
  align-items: stretch !important;
}

body #app .badge,
body #app .level-tag {
  color: #050607 !important;
  background: #f4f4f4 !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-weight: 750 !important;
}

body #app .hero-title {
  max-width: 760px !important;
  color: var(--okx-text) !important;
  background: none !important;
  -webkit-text-fill-color: var(--okx-text) !important;
  font-size: 54px !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
}

body #app .hero-desc {
  color: var(--okx-muted) !important;
  max-width: 580px !important;
}

body #app .hero-stats {
  gap: 12px !important;
}

body #app .hero-stats > *,
body #app :is(.stat, .feature-card, .step-card, .level-card) {
  background: var(--okx-panel) !important;
  border: 1px solid var(--okx-line) !important;
  border-radius: var(--okx-radius-lg) !important;
}

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

body #app :is(.market-panel, .hot-markets, .levels-section, .steps-section, .features) {
  position: relative !important;
}

body #app :is(.panel-list-header, .table-header) {
  color: var(--okx-muted) !important;
  background: #0b0d10 !important;
  border-bottom: 1px solid var(--okx-line) !important;
}

body #app :is(.panel-row, .table-row) {
  border-bottom: 1px solid var(--okx-line) !important;
  border-radius: 0 !important;
}

body #app :is(.market-tab, .panel-tab, .period-btn, .time-item, .preset-btn, .preset-item, .network-tab, .tab, .category-tab, .type-tab, .settlement-item) {
  border-radius: var(--okx-radius) !important;
  color: var(--okx-soft) !important;
  border: 1px solid var(--okx-line) !important;
  background: var(--okx-panel-2) !important;
  box-shadow: none !important;
}

body #app :is(.market-tab.active, .panel-tab.active, .period-btn.active, .time-item.active, .preset-btn.active, .preset-item.active, .network-tab.active, .tab.active, .category-tab.active, .type-tab.active, .settlement-item.active) {
  color: #050607 !important;
  background: #f4f4f4 !important;
  border-color: #f4f4f4 !important;
  box-shadow: none !important;
}

body #app :is(.trade-header, .symbol-info) {
  min-height: 58px !important;
}

body #app :is(.trade-page .trade-header, .mobile-trade-page .trade-header) {
  border-bottom: 1px solid var(--okx-line) !important;
}

body #app :is(.trade-main) {
  gap: 14px !important;
  padding: 14px 18px !important;
  max-width: 1440px !important;
}

body #app :is(.chart-area, .chart-section) {
  background: var(--okx-bg) !important;
  border-color: var(--okx-line) !important;
  border-radius: var(--okx-radius-lg) !important;
  padding: 10px !important;
}

body #app .chart-container {
  min-height: 330px !important;
  background: #050607 !important;
  border: 1px solid var(--okx-line) !important;
  border-radius: var(--okx-radius) !important;
  box-shadow: none !important;
}

body #app .trade-page .chart-container {
  height: min(62vh, 620px) !important;
  min-height: 500px !important;
}

body #app :is(.trade-panel, .panel-section, .panel-info) {
  background: var(--okx-panel) !important;
}

body #app :is(.panel-actions, .action-btns) {
  gap: 10px !important;
}

body #app :is(.btn, .btn-buy, .btn-sell) {
  border-radius: var(--okx-radius) !important;
  min-height: 48px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

body #app .btn-buy {
  color: #03110d !important;
  background: var(--okx-green) !important;
  border: 1px solid rgba(0,192,135,.38) !important;
}

body #app .btn-sell {
  color: #fff !important;
  background: var(--okx-red) !important;
  border: 1px solid rgba(246,70,93,.38) !important;
}

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

body #app .modal-content {
  background: var(--okx-panel) !important;
  border: 1px solid var(--okx-line-strong) !important;
}

body #app .bottom-nav {
  height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  background: rgba(5, 6, 7, .96) !important;
  border-top: 1px solid var(--okx-line) !important;
  box-shadow: 0 -10px 24px rgba(0,0,0,.34) !important;
}

body #app .bottom-nav .nav-item {
  color: var(--okx-muted) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}

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

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

body #app .user-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.025)),
    #111316 !important;
}

body #app .user-card::before {
  display: none !important;
}

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

body #app .q-btn {
  background: rgba(255,255,255,.035) !important;
  border: 1px solid var(--okx-line) !important;
  border-radius: var(--okx-radius) !important;
  padding: 10px 6px !important;
}

body #app .q-icon,
body #app .menu-icon,
body #app .user-avatar {
  background: var(--okx-panel-3) !important;
  color: var(--okx-soft) !important;
  border: 1px solid var(--okx-line) !important;
  box-shadow: none !important;
}

body #app .menu-list {
  padding: 0 !important;
  gap: 8px !important;
  background: transparent !important;
  border: 0 !important;
}

body #app .menu-item {
  min-height: 54px !important;
  border-radius: var(--okx-radius-lg) !important;
  background: var(--okx-panel) !important;
  border: 1px solid var(--okx-line) !important;
}

body #app .logout-btn {
  border-radius: var(--okx-radius-lg) !important;
  background: var(--okx-panel) !important;
  border: 1px solid var(--okx-line) !important;
}

body #app .wallet-card {
  background:
    linear-gradient(145deg, rgba(63,126,255,.12), rgba(255,255,255,.035)),
    var(--okx-panel) !important;
  border-color: rgba(63,126,255,.22) !important;
}

body #app .upload-box,
body #app .qr-box {
  border-radius: var(--okx-radius-lg) !important;
}

body #app .upload-box {
  background: #0b0d10 !important;
  border-color: var(--okx-line-strong) !important;
}

@media (min-width: 901px) {
  body #app .trade-page .trade-panel {
    width: 360px !important;
  }

  body #app .trade-page .period-btn {
    min-width: 62px !important;
    text-align: center !important;
  }
}

@media (max-width: 900px) {
  body #app .hero {
    padding: 22px 14px 16px !important;
  }

  body #app .hero-main {
    display: block !important;
  }

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

  body #app .hero-desc {
    font-size: 14px !important;
  }

  body #app .hero-right {
    width: 100% !important;
    margin-top: 18px !important;
  }

  body #app :is(.features, .steps-grid, .levels-grid, .news-grid) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

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

  body #app .mobile-trade-page .trade-header {
    padding: 10px 12px !important;
    min-height: 58px !important;
  }

  body #app .mobile-trade-page .symbol-price {
    font-size: 18px !important;
  }

  body #app .mobile-trade-page .period-bar {
    padding: 9px 12px !important;
    background: #050607 !important;
    border-bottom: 1px solid var(--okx-line) !important;
  }

  body #app .mobile-trade-page .chart-section {
    padding: 0 !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  body #app .mobile-trade-page .chart-container {
    height: clamp(330px, 52vh, 440px) !important;
    min-height: 330px !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  body #app .mobile-trade-page .trade-panel {
    padding: 10px 12px 14px !important;
    background: #050607 !important;
    border: 0 !important;
  }

  body #app .mobile-trade-page .panel-section,
  body #app .mobile-trade-page .panel-info {
    padding: 12px !important;
    margin-bottom: 10px !important;
  }

  body #app .mobile-trade-page .time-item {
    min-width: 88px !important;
  }

  body #app .mobile-trade-page .amount-input-box {
    min-height: 52px !important;
  }

  body #app .mobile-trade-page .action-btns {
    margin-bottom: 6px !important;
  }

  body #app .mobile-trade-page .btn {
    min-height: 52px !important;
  }

  body #app :is(.deposit-main, .withdraw-main, .user-main) {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

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

  body #app .user-left,
  body #app .user-right {
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
}