/* ========================================
   OKX (欧易) Custom Theme
   深色主题 + 青绿色强调色
   ======================================== */

/* CSS 变量 */
:root {
  --okx-primary: #00D7C2;
  --okx-primary-hover: #00E6CF;
  --okx-primary-dark: #00B8A6;
  --okx-bg-dark: #000000;
  --okx-bg-card: #121212;
  --okx-bg-card-hover: #1C1C1C;
  --okx-bg-elevated: #1E1E1E;
  --okx-border: rgba(255, 255, 255, 0.08);
  --okx-border-hover: rgba(255, 255, 255, 0.15);
  --okx-text-primary: #FFFFFF;
  --okx-text-secondary: rgba(255, 255, 255, 0.6);
  --okx-text-muted: rgba(255, 255, 255, 0.4);
  --okx-up: #00D7C2;
  --okx-down: #FF3B30;
  --okx-warning: #F5A623;
}

/* 全局覆盖 */
body {
  background-color: var(--okx-bg-dark) !important;
  color: var(--okx-text-primary) !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--okx-text-primary) !important;
}

p, span, li, a {
  color: var(--okx-text-secondary) !important;
}

/* Preloader */
#preloader {
  background-color: var(--okx-bg-dark) !important;
}
#preloader .double-bounce1,
#preloader .double-bounce2 {
  background-color: var(--okx-primary) !important;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--okx-bg-dark);
}
::-webkit-scrollbar-thumb {
  background: var(--okx-bg-card-hover);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #2a2a2a;
}

/* Header */
.header {
  background-color: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--okx-border);
}
.header nav ul li a {
  color: var(--okx-text-primary) !important;
}
.header nav ul li a:hover,
.header nav ul li a.active {
  color: var(--okx-primary) !important;
}
body.scrolled .header {
  background-color: rgba(0, 0, 0, 0.95) !important;
  box-shadow: 0 0 100px rgba(0, 215, 194, 0.1) !important;
}

/* Offcanvas 移动端菜单 */
.offcanvas-mainnav {
  background-color: var(--okx-bg-dark) !important;
}
.offcanvas-mainnav .offcanvas-header,
.offcanvas-mainnav .offcanvas-body {
  background-color: var(--okx-bg-dark);
}
.offcanvas-mainnav ul > li > a {
  color: var(--okx-text-primary) !important;
}
.offcanvas-mainnav ul > li > a:hover,
.offcanvas-mainnav ul > li > a.active {
  color: var(--okx-primary) !important;
}
.offcanvas-mainnav .dropdown-menu {
  background-color: var(--okx-bg-card) !important;
  border: 1px solid var(--okx-border) !important;
}
.offcanvas-mainnav .dropdown-item {
  color: var(--okx-text-secondary) !important;
}
.offcanvas-mainnav .dropdown-item:hover {
  background-color: var(--okx-bg-card-hover) !important;
  color: var(--okx-primary) !important;
}
.btn-close {
  filter: invert(1);
}

/* Hero Banner */
.hero-banner {
  background-color: var(--okx-bg-dark) !important;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0, 215, 194, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 20% 100%, rgba(0, 215, 194, 0.05) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(255, 59, 48, 0.03) 0%, transparent 60%) !important;
  background-size: auto, auto, auto;
  padding-top: 160px;
  padding-bottom: 80px;
}
.hero-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  z-index: 1;
}
.hero-banner .hero-heading {
  color: var(--okx-text-primary) !important;
}
.hero-banner img[alt="hero_banner_img"] {
  display: none;
}

/* Section Backgrounds */
section.bg-light {
  background-color: var(--okx-bg-dark) !important;
}
section {
  background-color: var(--okx-bg-dark) !important;
}

/* Market Ticker */
.market-ticker {
  background-color: var(--okx-bg-card) !important;
  border: 1px solid var(--okx-border) !important;
  border-radius: 16px !important;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}
.market-ticker:hover {
  border-color: var(--okx-primary);
  transform: translateY(-3px);
}
.market-ticker .border-white-10 {
  border-color: var(--okx-border) !important;
}

/* Primary Color 覆盖 */
.bg-primary {
  background-color: var(--okx-primary) !important;
}
.text-primary {
  color: var(--okx-primary) !important;
}

/* Button 样式 */
.btn-primary {
  background-color: var(--okx-primary) !important;
  color: #000000 !important;
  box-shadow: 0 8px 24px rgba(0, 215, 194, 0.3) !important;
}
.btn-primary:hover {
  background-color: var(--okx-primary-hover) !important;
  box-shadow: 0 12px 32px rgba(0, 215, 194, 0.45) !important;
}

.btn-light {
  background-color: transparent !important;
  color: var(--okx-text-primary) !important;
  border: 1px solid var(--okx-border) !important;
  box-shadow: none !important;
}
.btn-light:hover {
  background-color: var(--okx-bg-card) !important;
  border-color: var(--okx-primary) !important;
  color: var(--okx-primary) !important;
}

.btn-dark {
  background-color: var(--okx-bg-card) !important;
  color: var(--okx-text-primary) !important;
}

.btn-success {
  background-color: var(--okx-up) !important;
  color: #000 !important;
}
.btn-danger {
  background-color: var(--okx-down) !important;
}
.btn-warning {
  background-color: var(--okx-warning) !important;
  color: #000 !important;
}

/* Scroll Up Button */
.btn-scroll-up {
  background-color: var(--okx-primary) !important;
  color: #000 !important;
}

/* Card Feature */
.card-feature {
  background-color: var(--okx-bg-card) !important;
  box-shadow: none !important;
  border: 1px solid var(--okx-border);
  transition: all 0.35s ease-in-out;
}
.card-feature:hover {
  background-color: var(--okx-bg-card-hover) !important;
  border-color: var(--okx-primary);
  transform: translateY(-5px);
}
.card-feature h4 {
  color: var(--okx-text-primary) !important;
}
.card-feature p {
  color: var(--okx-text-secondary) !important;
}
.card-feature > .icon {
  background-color: var(--okx-bg-elevated) !important;
  color: var(--okx-primary) !important;
}
.card-feature > .icon.bg-primary,
.card-feature > .icon.bg-info,
.card-feature > .icon.bg-success,
.card-feature > .icon.bg-warning,
.card-feature > .icon.bg-danger {
  box-shadow: none !important;
  background-color: var(--okx-primary) !important;
  color: #000 !important;
}

/* Accordion */
#benefitAccordion .accordion-item,
#faqAccordion .accordion-item {
  background-color: var(--okx-bg-card) !important;
  border: 1px solid var(--okx-border) !important;
  box-shadow: none !important;
}
#benefitAccordion .accordion-button,
#faqAccordion .accordion-button {
  background-color: var(--okx-bg-card) !important;
  color: var(--okx-text-primary) !important;
}
#benefitAccordion .accordion-button:not(.collapsed),
#faqAccordion .accordion-button:not(.collapsed) {
  background-color: var(--okx-bg-card-hover) !important;
  color: var(--okx-primary) !important;
}
#benefitAccordion .accordion-body,
#faqAccordion .accordion-body {
  color: var(--okx-text-secondary) !important;
}
#benefitAccordion .accordion-button .accordion-icon {
  background-color: var(--okx-primary) !important;
  color: #000 !important;
  box-shadow: none !important;
}

/* 集成 Logo */
.list-logo > li > a {
  background-color: var(--okx-bg-card) !important;
  border: 1px solid var(--okx-border);
  box-shadow: none !important;
}
.list-logo > li > a:hover {
  border-color: var(--okx-primary);
}

/* Testimonials */
#sliderTestimonials .swiper-slide {
  background-color: var(--okx-bg-card) !important;
  border: 1px solid var(--okx-border);
}
#sliderTestimonials .swiper-slide p {
  color: var(--okx-text-secondary) !important;
}
#sliderTestimonials .swiper-slide .fw-bold,
#sliderTestimonials .swiper-slide .text-dark {
  color: var(--okx-text-primary) !important;
}
#sliderTestimonials .swiper-slide .fi {
  color: var(--okx-warning) !important;
}

/* Achievement Card */
.card-achievement {
  background-color: var(--okx-bg-card) !important;
  padding: 60px 40px;
  border: 1px solid var(--okx-border);
}
.card-achievement::before {
  background-image: none !important;
  background: linear-gradient(135deg, rgba(0, 215, 194, 0.05), rgba(0, 0, 0, 0));
}
.card-achievement h2,
.card-achievement span,
.card-achievement .counter {
  color: var(--okx-text-primary) !important;
}
.card-achievement .text-dark {
  color: var(--okx-text-secondary) !important;
}

/* Pricing */
.pricing-card {
  background-color: var(--okx-bg-card) !important;
  border: 1px solid var(--okx-border);
  box-shadow: none !important;
}
.pricing-card.recomended {
  background-color: var(--okx-primary) !important;
  color: #000 !important;
}
.pricing-card.recomended h3,
.pricing-card.recomended h2,
.pricing-card.recomended span,
.pricing-card.recomended li,
.pricing-card.recomended .text-white {
  color: #000 !important;
}
.pricing-card .text-primary {
  color: var(--okx-primary) !important;
}
.pricing-card .text-dark {
  color: var(--okx-text-primary) !important;
}
.pricing-card span:not(.badge) {
  color: var(--okx-text-secondary) !important;
}
.pricing-card.recomended::before {
  background-image: none !important;
}
.pricing-card .badge.text-bg-warning {
  background-color: #000 !important;
  color: var(--okx-primary) !important;
}

/* Nav Pills Pricing */
.nav-pills-pricing {
  background-color: var(--okx-bg-card) !important;
  box-shadow: none !important;
  border: 1px solid var(--okx-border);
}
.nav-pills-pricing .nav-link {
  color: var(--okx-text-secondary) !important;
}
.nav-pills-pricing .nav-link.active {
  background-color: var(--okx-primary) !important;
  color: #000 !important;
}

/* CTA Section */
section.cta {
  background-color: var(--okx-bg-card) !important;
  border-top: 1px solid var(--okx-border);
  border-bottom: 1px solid var(--okx-border);
}
section.cta::before,
section.cta::after {
  background-image: none !important;
  background: radial-gradient(ellipse at center, rgba(0, 215, 194, 0.15) 0%, transparent 70%);
  filter: blur(60px);
}

/* Footer */
.footer {
  background-color: var(--okx-bg-dark) !important;
  border-top: 1px solid var(--okx-border);
}
.footer h5 {
  color: var(--okx-text-primary) !important;
}
.footer .text-warning {
  color: var(--okx-primary) !important;
}
.footer .footer-content {
  padding-top: 80px;
  padding-bottom: 60px;
}
.footer .copyright {
  border-top: 1px solid var(--okx-border);
}
.footer a.text-white {
  color: var(--okx-text-secondary) !important;
}
.footer a.text-white:hover {
  color: var(--okx-primary) !important;
  opacity: 1 !important;
}
.footer .form-newsletter .input-group-text {
  background-color: var(--okx-bg-card) !important;
  color: var(--okx-primary) !important;
  border: 1px solid var(--okx-border) !important;
}
.footer .form-newsletter .form-control {
  background-color: var(--okx-bg-card) !important;
  color: var(--okx-text-primary) !important;
  border: 1px solid var(--okx-border) !important;
}
.footer .form-newsletter .form-control::placeholder {
  color: var(--okx-text-muted) !important;
}
.footer .form-newsletter .btn {
  background-color: var(--okx-primary) !important;
  color: #000 !important;
}

/* Modal */
.modal-content {
  background-color: var(--okx-bg-card) !important;
  border: 1px solid var(--okx-border) !important;
  color: var(--okx-text-primary) !important;
}
.modal-content h3,
.modal-content h2 {
  color: var(--okx-text-primary) !important;
}
.modal-content p {
  color: var(--okx-text-secondary) !important;
}
.modal-content .form-label {
  color: var(--okx-text-primary) !important;
}
.modal-content .form-control {
  background-color: var(--okx-bg-elevated) !important;
  border: 1px solid var(--okx-border) !important;
  color: var(--okx-text-primary) !important;
}
.modal-content .form-control::placeholder {
  color: var(--okx-text-muted) !important;
}
.modal-content .text-muted {
  color: var(--okx-text-muted) !important;
}
.modal-content .text-primary {
  color: var(--okx-primary) !important;
}
.modal-content .form-check-label {
  color: var(--okx-text-secondary) !important;
}

/* Dropdown Menu */
.dropdown-menu {
  background-color: var(--okx-bg-card) !important;
  border: 1px solid var(--okx-border) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
}
.dropdown-item {
  color: var(--okx-text-secondary) !important;
}
.dropdown-item:hover,
.dropdown-item.active {
  background-color: var(--okx-bg-card-hover) !important;
  color: var(--okx-primary) !important;
}

/* Badge */
.badge.text-bg-warning {
  background-color: var(--okx-primary) !important;
  color: #000 !important;
}

/* Custom Cursor */
.custom-cursor {
  background-color: rgba(0, 215, 194, 0.2) !important;
  border: 1px solid var(--okx-primary);
}
.cursor-text {
  color: var(--okx-primary) !important;
}

/* Text Colors */
.text-dark {
  color: var(--okx-text-primary) !important;
}
.text-white {
  color: #FFFFFF !important;
}

/* 通用链接颜色 */
a.text-dark,
a.text-white {
  transition: color 0.3s ease;
}

/* Section Breadcrumb */
section.sc-breadcrumb {
  background-color: var(--okx-bg-dark) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--okx-border);
}

/* List Group */
.list-group-item.active {
  background-color: var(--okx-primary) !important;
  color: #000 !important;
  border-color: var(--okx-primary) !important;
}
.list-group-cst {
  box-shadow: none !important;
  border: 1px solid var(--okx-border);
}

/* Card Team/News/Contact */
.card-team,
.card-news,
.card-contact {
  background-color: var(--okx-bg-card) !important;
  box-shadow: none !important;
  border: 1px solid var(--okx-border);
}
.card-team .card-body .text-link:hover,
.card-news .card-body .text-link:hover,
.card-contact .card-body .text-link:hover {
  color: var(--okx-primary) !important;
}

/* Page Link */
.page-link {
  color: var(--okx-primary) !important;
}

/* Accordion Button 基础 */
.accordion-button:not(.collapsed) {
  background-color: var(--okx-bg-card-hover) !important;
  color: var(--okx-primary) !important;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .header {
    background-color: rgba(0, 0, 0, 0.95) !important;
  }
  .card-achievement {
    padding: 40px 20px;
  }
}