/* MoMoSwap official identity: white space, electric violet and fuchsia. */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --panel: #ffffff;
  --panel2: #f7f7fc;
  --border: #e6e5ee;
  --text: #222334;
  --muted: #6d7084;
  --purple: #401dfc;
  --mint: #16977b;
  --brand-pink: #f9037d;
  --brand-purple: #401dfc;
}

body { background: #fff; color: var(--text); }
::selection { background: #eadfff; color: #2b175c; }
.announcement { background: #f5f2ff; color: #5b4696; border-color: #eee8ff; }
.announcement a { color: #401dfc; }
.new-tag { color: #b31160; background: #ffe5f2; }
.site-header { background: #fff; border-bottom: 1px solid #f0eff5; }
.brand { color: #242537; font-weight: 700; letter-spacing: -.9px; }
.brand img { width: 48px; height: 48px; object-fit: contain; }
.brand .word-swap { font-weight: 700; }
.main-nav { color: #626579; }
.main-nav a:hover, .main-nav a.active { color: var(--purple); }
.main-nav a.active::after { background: var(--brand-pink); }
.language-btn { color: #64687a; }
.text-btn { color: #35374e; }
.icon-btn { color: #7b7e90; }
.icon-btn:hover { background: #f3f0ff; color: var(--purple); }
.icon-btn.saved { color: var(--brand-pink); }
.icon-btn.saved svg { fill: #f9037d18; }
.btn { color: #3a3955; background: #f5f3ff; border-color: #e3def6; }
.btn:hover:not(:disabled) { background: #eeebff; border-color: #cfc5ff; }
.btn.primary { background: var(--purple); border-color: var(--purple); color: #fff; box-shadow: 0 6px 18px #401dfc19; }
.btn.primary:hover:not(:disabled) { background: #3214d2; border-color: #3214d2; }
.btn.outline { color: #393650; background: #fff; border-color: #dcd9e9; }
.btn.outline:hover:not(:disabled) { color: var(--purple); background: #faf8ff; border-color: #bfb0ff; }
.btn.mint { background: #eafaf3; color: #157c60; border-color: #bde8d7; }
.btn.danger { background: #fff0f4; color: #b82d59; border-color: #f4cfdb; }

/* The homepage echoes the official account's white / iridescent editorial art. */
.hero { padding: 60px 0 72px; background: linear-gradient(115deg, #fff 48%, #fcfbff 100%); }
.hero-inner { min-height: 450px; }
.hero-copy { width: 52%; }
.eyebrow { color: #654dc0; letter-spacing: 1.8px; font-weight: 600; }
.eyebrow::before { background: var(--brand-pink); box-shadow: none; }
.hero h1 { color: #232432; font-weight: 700; letter-spacing: -3.1px; }
.hero h1 span { color: var(--purple); }
.hero-copy > p { color: #6a6d80; }
.hero-note { color: #76778b; }
.hero-note svg { color: var(--purple); }
.hero-art { width: 59%; right: -5%; top: -4%; bottom: -4%; }
.hero-art::before { background: radial-gradient(ellipse, #eee9ff66, transparent 68%); }
.hero-art img { mix-blend-mode: normal; object-fit: contain; }
.dot-pattern { background-image: radial-gradient(#7761b825 1px, transparent 1px); }
.art-badge { background: #fffffff2; border-color: #e5dff4; box-shadow: 0 10px 30px #57477a0b; color: #333047; }
.art-badge svg { color: var(--purple); }
.art-badge strong { font-weight: 600; }
.art-badge small { color: #767187; }
.status-dot { background: #149b78; }
.chains-band { border-color: #edebf4; background: #fcfbff; }
.chains-label { color: #7d7b8f; }
.chain-item { color: #4b4c61; }
.chain-icon.eth { color: #68738e; }
.chain-icon.sol { color: #168b79; }
.chain-icon.bnb { color: #9d7917; }
.chain-icon.pol { color: #7146cd; }
.overline { color: #8a759f; }
.section-head h2, .how-copy h2, .cta-banner h2, .page-hero h1 { color: #262738; font-weight: 600; }
.section-head p, .how-copy p, .step p { color: #727488; }
.link-arrow, .section-head > .link-arrow, .card-action { color: var(--purple); font-weight: 600; }

/* A restrained financial workspace: clear prices, calm surfaces, precise boundaries. */
.service-card { background: #fff; border-color: #e7e3f0; border-radius: 15px; box-shadow: 0 3px 15px #3e285804; }
.service-card:hover { border-color: #cec0f7; box-shadow: 0 12px 28px #5530950b; }
.service-icon { color: var(--purple); background: #f1edff; border-color: #e4dcff; }
.service-icon.mint { color: #0d8b76; background: #edf9f6; border-color: #d5eee7; }
.service-icon.blue { color: #5172c7; background: #eff3ff; border-color: #dfe7ff; }
.service-card h3 { color: #2c2b42; font-weight: 600; font-size: 20px; }
.service-card .description { color: #767487; }
.badge { color: #b51667; background: #fff0f7; border-color: #ffd9eb; font-weight: 600; }
.badge.green { color: #187f62; background: #effaf4; border-color: #d3eddf; }
.network-pill { background: #f4f2fa; color: #726589; }
.card-bottom { border-color: #eeeaf4; }
.price-label { color: #828091; }
.price { color: #3d28ba; font-size: 21px; font-weight: 600; }
.price small { color: #8b819d; font-weight: 400; }
.service-disclaimer { color: #8b7c98; }
.feature-strip { background: #fcfbff; border-color: #e8e4f2; border-radius: 14px; }
.feature-item { border-color: #e8e4f2; }
.feature-item svg { color: #6d53bb; }
.feature-item h3 { color: #3a344c; }
.feature-item p, .cta-banner p { color: #7b728a; }
.how-section { border-color: #eae7f1; }
.step-num { color: var(--purple); background: #f1edff; border-color: #e4dbff; }
.step h3 { color: #3b344e; font-weight: 600; }
.cta-banner { border-color: #e5dcf5; background: linear-gradient(110deg, #f8f4ff, #fff8fc); border-radius: 16px; }
.site-footer { background: #fbfaff; border-color: #eae6f2; }
.footer-brand .brand { color: #363046; }
.footer-brand img { width: 42px; height: 42px; }
.footer-brand p { color: #80788e; }
.footer-group { color: #80758e; }
.footer-group strong { color: #4d425e; font-weight: 600; }
.footer-bottom { color: #9788a2; border-color: #e9e3f1; }
.footer-status { color: #7a6d89; }

/* Catalog, detail and authentication */
.page-hero { background: #fff; }
.page-hero p, .detail-description { color: #78738c; }
.tab-btn { color: #80758e; }
.tab-btn.active { color: var(--purple); background: #f0ebff; border-color: #e0d6ff; }
.tab-btn:hover { color: var(--purple); background: #f7f4ff; }
.search-box svg { color: #9b8ca9; }
.search-box input, .filter-select { background: #fff; border-color: #e5ddec; color: #4f425f; }
.search-box input::placeholder { color: #9a8aa9; }
.result-count { color: #9483a1; }
.empty-state { color: #8e7a9c; background: #fdfbff; border-color: #ddcee9; }
.empty-state h3 { color: #51405f; }
.breadcrumbs { color: #9685a3; }
.detail-title-row h1 { color: #342441; font-weight: 600; }
.detail-visual { border-color: #e8dcf5; background: radial-gradient(ellipse at center, #e9ddff, #f7f3ff 55%, #fff 90%); }
.detail-visual .service-icon { background: #f2eaff; box-shadow: 0 20px 65px #8c66e314; }
.detail-visual::before, .detail-visual::after { border-color: #b9a1e855; }
.detail-body h2 { color: #4b3759; }
.detail-body p { color: #877592; }
.parameter { border-color: #e8deef; background: #fdfbff; }
.parameter span { color: #9b87a6; }
.parameter strong { color: #654c73; }
.purchase-panel { border-color: #e4d4f0; background: #fff; box-shadow: 0 8px 35px #8751b008; }
.purchase-panel > p { color: #9882a7; }
.purchase-panel .purchase-price { color: var(--purple); }
.purchase-panel .purchase-price span { color: #9b80b0; }
.purchase-meta { border-color: #ebdff2; }
.purchase-meta div { color: #9c80aa; }
.purchase-meta strong { color: #69516f; }
.field label { color: #63516f; }
.field input, .field select, .field textarea { background: #fff; border-color: #e1d4eb; color: #44314f; }
.field input::placeholder, .field textarea::placeholder { color: #a08aae; }
.field small { color: #9b82aa; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #9c7bf5; box-shadow: 0 0 0 3px #401dfc0c; }
.input-icon svg { color: #a486b7; }
.notice { color: #88679c; background: #f8f3ff; border-color: #e8d8f6; }
.notice.warning { color: #8c6d34; background: #fffbf0; border-color: #f0e1bc; }
.notice.green { color: #258566; background: #f0fbf5; border-color: #d2ecdf; }
.auth-visual h1 { color: #342241; font-weight: 600; }
.auth-visual h1 span { color: var(--purple); }
.auth-visual p { color: #9780a4; }
.auth-art { background: radial-gradient(ellipse at 40% 50%, #ede0ff, transparent 65%); }
.auth-art .service-icon { background: linear-gradient(120deg, #f1e7ff, #fff5fc); box-shadow: 25px 15px 80px #875abb0c; }
.auth-panel { background: #fff; border-color: #e9dcee; box-shadow: 0 8px 40px #79509408; border-radius: 16px; }
.auth-panel h2 { color: #4a2c59; font-weight: 600; }
.auth-panel > .subtext, .auth-panel .auth-switch, .checkbox-label { color: #a084af; }
.form-error { color: #bc426b; background: #fff4f7; border-color: #f5d4df; }

/* Personal balance, orders and settings */
.account-nav { border-color: #eadcef; background: #fffcff; }
.account-user { border-color: #eee1f4; }
.avatar { background: #f0e6ff; color: #7646b2; }
.account-user strong { color: #6b447c; }
.account-user small { color: #a281b1; }
.account-nav > a { color: #a07aaa; }
.account-nav > a.active { color: var(--purple); background: #f0e8ff; }
.account-nav > a:hover { background: #f8f2ff; }
.account-nav .logout-row { border-color: #ecdef3; }
.account-content h1 { color: #4e2d5f; font-weight: 600; }
.account-subtitle { color: #a184af; }
.balance-card { background: #fff; border-color: #e6d4ef; box-shadow: 0 4px 18px #854aa307; }
.balance-card > div { color: #a079b1; }
.balance-card strong { color: #5c2f82; font-weight: 600; }
.balance-card small { color: #ad88bb; }
.account-panel { background: #fff; border-color: #e9d4f2; }
.account-panel h2 { color: #603271; font-weight: 600; }
.account-panel > p, .deposit-info p { color: #ad88b8; }
.deposit-info { border-color: #ebd7f4; }
.deposit-info h3 { color: #875394; }
.deposit-step { color: #b18abc; }
.address-display { color: #87529b; background: #fcf7ff; border-color: #e9d6f2; }
.wallet-summary { color: #30886d; background: #f1faf5; border-color: #d2e9dc; }
.data-table th { color: #a684b6; border-color: #ecd9f3; }
.data-table td { color: #8b5b9c; border-color: #f0e1f5; }
.data-table code { color: #ae85ba; }

/* Dialogs and feedback */
.modal-overlay { background: #27213a44; backdrop-filter: blur(5px); }
.modal { background: #fff; border-color: #e3d7ed; box-shadow: 0 25px 100px #31204822; }
.modal h2 { color: #512d65; font-weight: 600; }
.modal > p { color: #a586b5; }
.wallet-option { background: #fefbff; border-color: #ead7f4; color: #6e368a; }
.wallet-option:hover { background: #f9f0ff; }
.wallet-option small { color: #aa7dbb; }
.wallet-emoji { background: #fff0e7; color: #bc7144; }
.wallet-emoji.trust { background: #e9f3ff; color: #4c83bc; }
.wallet-emoji.phantom { background: #efe2ff; color: #8b54b6; }
.wallet-option > svg:last-child { color: #b58cc8; }
.toast { color: #714b8d; background: #fff; border-color: #dbc2ee; box-shadow: 0 8px 35px #55307914; }
.toast.error { color: #be517c; border-color: #edbdd0; }
.load-mark { background: transparent; }
.load-mark img { width: 50px; height: 50px; object-fit: contain; }
.loader { border-color: #e8ddff; border-top-color: var(--purple); }
.loading-view { color: #ae88bf; }
.skeleton { border-color: #eee4f7; background: linear-gradient(100deg, #faf7ff 20%, #f2eafb 50%, #faf7ff 80%); background-size: 200% 100%; }
.legal-copy h1, .legal-copy h2 { color: #663982; }
.legal-copy p { color: #a27fb4; }
.legal-copy a { color: var(--purple); }
.notfound p { color: #9a7caf; }
.mobile-nav.open { background: #fff; border-color: #e2d7ee; box-shadow: 0 20px 50px #3e245c16; }
.mobile-nav a, .mobile-nav button { color: #9a78a8; }
.mobile-nav a:hover { background: #f6edff; }

@media (max-width: 1050px) {
  .hero h1 { letter-spacing: -2.2px; }
  .hero-art { right: -10%; width: 65%; }
}
@media (max-width: 700px) {
  .hero { padding: 34px 0 35px; }
  .hero-inner { min-height: 0; }
  .hero-copy { width: 100%; }
  .hero h1 { font-size: 52px; letter-spacing: -2.4px; }
  .hero-art { position: relative; width: 100%; height: 280px; right: auto; top: auto; margin-top: 12px; }
  .hero-art img { width: 105%; }
  .brand img { width: 42px; height: 42px; }
  .brand { font-size: 22px; }
  .hero-ctas .btn { padding-left: 16px; padding-right: 16px; }
  .feature-item { border-color: #e8e4f2; }
  .footer-brand img { width: 40px; height: 40px; }
  .deposit-info { border-top-color: #ebd7f4; }
}

/* Keep supporting copy genuinely readable on white rather than faint pastel. */
.field small, .parameter span, .purchase-panel > p, .purchase-meta div,
.auth-visual p, .auth-panel > .subtext, .auth-panel .auth-switch, .checkbox-label,
.account-user small, .account-subtitle, .balance-card small,
.account-panel > p, .deposit-info p, .deposit-step,
.modal > p, .wallet-option small, .legal-copy p, .notfound p,
.mobile-nav a, .mobile-nav button, .loading-view {
  color: #776982;
}
.account-nav > a, .balance-card > div, .data-table th,
.data-table td, .data-table code { color: #71617d; }
.search-box input::placeholder, .field input::placeholder, .field textarea::placeholder {
  color: #887892;
}

.footer-bottom, .price-label, .service-disclaimer, .breadcrumbs, .result-count {
  color: #7b6c86;
}
.account-content h1, .auth-panel h2, .account-panel h2,
.detail-title-row h1, .detail-body h2, .modal h2, .legal-copy h1, .legal-copy h2 {
  color: #302b40;
}

.detail-title-row > div:not(.service-icon) { min-width: 0; flex: 1; }
.detail-title-row > .icon-btn { flex-shrink: 0; }
.detail-title-row h1 { overflow-wrap: break-word; }