@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("uploads/fonts/InterVariable.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("uploads/fonts/InterVariable-Italic.woff2") format("woff2");
}

:root {
  --atom-pink: #ec4899;
  --atom-pink-soft: #fce7f3;
  --atom-yellow: #facc15;
  --atom-yellow-soft: #fef9c3;
  --atom-purple: #7c3aed;
  --atom-purple-dark: #4c1d95;
  --atom-purple-soft: #ede9fe;
  --atom-white: #ffffff;
  --atom-ink: #24123f;
  --atom-muted: #6b6380;
  --atom-border: #eee7f7;
  --atom-bg: #fbf9ff;
}

html { background: var(--atom-bg); }
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(236,72,153,.10), transparent 28%),
    radial-gradient(circle at 0% 35%, rgba(124,58,237,.08), transparent 30%),
    linear-gradient(135deg, #fff 0%, var(--atom-bg) 58%, #fef9c3 100%) !important;
  color: var(--atom-ink) !important;
  line-height: 1.5;
  overflow-x: hidden;
}

/* One type family throughout the site; preserve icon glyphs. */
body *:not(i) {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

a { -webkit-tap-highlight-color: transparent; }

.top-brand .brand-txt h1,
.greet-text h2,
.section-head h3,
.plan-name,
.balance-info .amt,
.balance-bottom strong,
.topbar h1,
.form-card h4,
.account-row strong,
.no-account h4,
.lock-notice h4,
.window-notice h4,
.txn-info h4,
.empty-state h3,
.popup-box h2 { color: var(--atom-ink) !important; }

.top-brand .brand-txt p,
.section-head a,
.account-edit,
.input-group span,
.form-card h4 i,
.processing-note i,
.section-head h3 i,
.section-head.gold h3 i,
.back-btn,
.nav-item.active,
.plan-arrow,
.plan-meta i { color: var(--atom-purple) !important; }

.top-brand img { background: #fff; box-shadow: 0 5px 18px rgba(124,58,237,.14); }

.avatar {
  background: linear-gradient(135deg, var(--atom-purple), var(--atom-pink)) !important;
  box-shadow: 0 6px 16px rgba(124,58,237,.25) !important;
}
.bell-btn { color: var(--atom-purple) !important; }

.daily-greet,
.balance-card,
.hero {
  background: linear-gradient(135deg, var(--atom-purple-dark) 0%, var(--atom-purple) 58%, var(--atom-pink) 100%) !important;
  box-shadow: 0 14px 32px rgba(124,58,237,.22) !important;
  color: var(--atom-white) !important;
}
.daily-greet .g-body,
.daily-greet .g-body *,
.balance-card,
.balance-card *,
.hero,
.hero *,
.summary,
.summary *,
.summary-card,
.summary-card *,
.profile-head,
.profile-head *,
.support-hero,
.support-hero * {
  color: var(--atom-white) !important;
}
.balance-card .balance-info .amt,
.balance-card .balance-bottom,
.balance-card .balance-bottom *,
.balance-card .balance-bottom .green,
.balance-card .balance-bottom div,
.balance-card .balance-bottom strong,
.balance-card .balance-bottom strong.green {
  color: var(--atom-white) !important;
}
.balance-card .balance-bottom div { opacity: 1 !important; }
.daily-greet .g-icon {
  background: linear-gradient(135deg, var(--atom-yellow), #facc15) !important;
  color: var(--atom-purple-dark) !important;
}

.action-btn::before,
.plan-row::before,
.nav-item.active::before {
  background: linear-gradient(90deg, var(--atom-purple), var(--atom-pink), var(--atom-yellow)) !important;
}
.action-btn .ic {
  background: linear-gradient(135deg, var(--atom-purple-soft), var(--atom-pink-soft)) !important;
  color: var(--atom-purple) !important;
}

.plan-row.gold::before { background: linear-gradient(180deg, var(--atom-purple), var(--atom-yellow)) !important; }
.plan-row.gold .plan-meta i,
.plan-row.gold .plan-arrow { color: var(--atom-purple) !important; }

.btn-submit,
.lock-notice a,
.empty-state a,
.invest-detail .btn,
.btn,
.tag.primary,
.tab.active,
.announce-btn,
.popup-btn,
.submit {
  background: linear-gradient(135deg, var(--atom-purple), var(--atom-pink)) !important;
  color: var(--atom-white) !important;
  box-shadow: 0 8px 20px rgba(124,58,237,.24) !important;
}

.btn-submit *, .lock-notice a *, .empty-state a *, .invest-detail .btn *, .btn *,
.tab.active *, .announce-btn *, .popup-btn *, .submit * {
  color: var(--atom-white) !important;
}

.time-pill,
.back-btn { background: var(--atom-purple-soft) !important; border-color: #ddd6fe !important; }

.input-group:focus-within { border-color: var(--atom-purple) !important; box-shadow: 0 0 0 3px rgba(124,58,237,.10) !important; }

.tab.active {
  background: linear-gradient(135deg, var(--atom-purple), var(--atom-pink)) !important;
  box-shadow: 0 4px 12px rgba(124,58,237,.22) !important;
}

.bottom-nav { border-top-color: var(--atom-border) !important; }

.announce-btn {
  background: linear-gradient(135deg, var(--atom-purple), var(--atom-pink)) !important;
  box-shadow: 0 8px 20px rgba(124,58,237,.25) !important;
}

.announce-img {
  width: min(100%, 280px) !important;
  max-height: 68px !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 12px !important;
  margin: 0 auto 10px !important;
}

.announce-logo {
  display: block;
  width: 48px !important;
  height: 48px !important;
  object-fit: contain !important;
  margin: 2px auto 8px !important;
}

.popup-box,
.popup-box button,
.popup-box a { font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important; }
.announce-title { font-size: 1.16rem !important; }
.announce-sub { font-size: .9rem !important; }
.announce-row { font-size: .88rem !important; }
.announce-body { font-size: .82rem !important; }
.announce-btn { font-size: .95rem !important; }

.top-brand .brand-txt p { font-size: .68rem !important; }
.action-btn .txt h4 { font-size: .82rem !important; }
.action-btn .txt p { font-size: .72rem !important; }
.plan-meta, .plan-total { font-size: .76rem !important; }
.nav-item { font-size: .72rem !important; }

.company-info-entry {
  display: flex;
  align-items: center;
  gap: 13px;
  max-width: 1064px;
  margin: 0 auto 18px;
  padding: 15px 16px;
  color: var(--atom-ink) !important;
  background: #fff;
  border: 1px solid var(--atom-border);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(76,29,149,.08);
  text-decoration: none;
}
.company-info-entry .company-info-icon {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  color: var(--atom-white) !important;
  background: linear-gradient(135deg,var(--atom-purple),var(--atom-pink));
  border-radius: 13px;
}
.company-info-entry .company-info-copy { flex: 1; min-width: 0; }
.company-info-entry strong { display: block; color: var(--atom-ink) !important; font-size: .95rem; }
.company-info-entry span { display: block; color: var(--atom-muted) !important; font-size: .82rem; margin-top: 3px; line-height: 1.45; }
.company-info-entry > .fa-chevron-right { color: var(--atom-purple) !important; }

/* Keep the existing layout, but make it genuinely usable on small screens. */
img { max-width: 100%; }
button, a, input, select, textarea { max-width: 100%; }

@media (max-width: 700px) {
  .top-brand { padding: 14px 14px 2px !important; }
  .greeting-row { padding: 12px 14px 9px !important; }
  .daily-greet { margin-left: 12px !important; margin-right: 12px !important; }
  .actions-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .action-btn { min-width: 0; }
  .action-btn .txt h4, .action-btn .txt p { overflow-wrap: anywhere; }
  .balance-card { margin-left: 12px !important; margin-right: 12px !important; }
  .balance-top { align-items: flex-start !important; }
  .balance-info .amt { font-size: 1.4rem !important; }
  .view-details { padding: 7px 10px !important; }
  .plan-list { padding-left: 12px !important; padding-right: 12px !important; }
  .plan-row { gap: 10px !important; padding: 12px !important; }
  .plan-ico { width: 50px !important; height: 50px !important; }
  .plan-meta { gap: 8px !important; }
  .section-head { padding-left: 14px !important; padding-right: 14px !important; }
  .popup-overlay { padding: 14px !important; }
  .popup-box { padding: 22px 16px !important; max-height: calc(100dvh - 28px); overflow-y: auto; }
  .popup-box h2 { font-size: 1.15rem !important; }
  .topbar { padding-left: 12px !important; padding-right: 12px !important; }
  .topbar h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hero { margin-left: 12px !important; margin-right: 12px !important; }
  .form-card, .account-box, .no-account, .lock-notice, .window-notice { margin-left: 12px !important; margin-right: 12px !important; }
  .form-card { padding: 16px !important; }
  .wd-list { padding-left: 12px !important; padding-right: 12px !important; }
  .txn-list { margin-left: 12px !important; margin-right: 12px !important; }
  .tabs { overflow-x: auto !important; justify-content: flex-start !important; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
}

@media (max-width: 390px) {
  .top-brand .brand-txt h1 { font-size: .9rem !important; letter-spacing: 1.5px !important; }
  .top-brand .brand-txt p { font-size: .48rem !important; letter-spacing: 1.2px !important; }
  .avatar { width: 46px !important; height: 46px !important; }
  .greet-text h2 { font-size: .96rem !important; }
  .bell-btn { width: 42px !important; height: 42px !important; }
  .daily-greet { padding: 14px !important; gap: 10px !important; }
  .daily-greet .g-icon { width: 44px !important; height: 44px !important; font-size: 1.25rem !important; }
  .daily-greet .g-label { font-size: .9rem !important; }
  .daily-greet .g-msg { font-size: .7rem !important; }
  .balance-top { flex-wrap: wrap !important; }
  .view-details { margin-left: auto; }
  .plan-ico { width: 46px !important; height: 46px !important; }
  .plan-name { font-size: .78rem !important; }
  .plan-meta { font-size: .61rem !important; }
  .plan-total { font-size: .6rem !important; }
  .nav-item { font-size: .58rem !important; }
  .nav-item i { font-size: 1.18rem !important; }
}

/* ATOM full brand palette: pink, yellow, purple, and white */
:root {
  --atom-pink: #ec4899;
  --atom-pink-soft: #fce7f3;
  --atom-yellow: #facc15;
  --atom-yellow-soft: #fef9c3;
  --atom-purple: #7c3aed;
  --atom-purple-dark: #4c1d95;
  --atom-purple-soft: #ede9fe;
  --atom-white: #ffffff;
  --atom-ink: #24123f;
  --atom-muted: #6b6380;
  --atom-border: #eee7f7;
  --atom-bg: #fbf9ff;
}

body { background: radial-gradient(circle at 100% 0%, rgba(236,72,153,.14), transparent 28%), radial-gradient(circle at 0% 35%, rgba(124,58,237,.12), transparent 30%), linear-gradient(135deg, #fff 0%, var(--atom-bg) 58%, var(--atom-yellow-soft) 100%) !important; color: var(--atom-ink) !important; }
.topbar, .bottom-nav, .card, .form-card, .account-box, .no-account, .lock-notice, .window-notice, .txn, .empty-state, .company-info-entry, .company-slides, .company-slide, .company-controls { background-color: var(--atom-white) !important; border-color: var(--atom-border) !important; }
.topbar h1, .card h1, .card h2, .card h3, .card h4, .form-card h1, .form-card h2, .form-card h3, .form-card h4, .txn-info h4, .empty-state h3 { color: var(--atom-ink) !important; }
.muted, .sub, .hint, .empty-state p, .txn-info p, .nav-item { color: var(--atom-muted) !important; }
.back-btn, .time-pill, .company-page-back, .company-slide-count, .action-btn .ic, .status-pill.active { background: var(--atom-purple-soft) !important; color: var(--atom-purple) !important; }
.tag, .status-pill.gold, .company-kicker { background: var(--atom-yellow-soft) !important; color: var(--atom-purple-dark) !important; border-color: #f4df91 !important; }
.btn, .btn-submit, .submit, .popup-btn, .announce-btn, .claim-btn, .tab.active, .invest-detail .btn { background: linear-gradient(135deg, var(--atom-purple), var(--atom-pink)) !important; color: var(--atom-white) !important; }
.progress-bar, .company-dot.active, .nav-item.active::before { background: linear-gradient(90deg, var(--atom-purple), var(--atom-pink), var(--atom-yellow)) !important; }
.flash.success, .flash.error, .status-pill.completed, .timer.ready { background: var(--atom-pink-soft) !important; color: var(--atom-purple-dark) !important; }
.txn.deposit, .txn.withdrawal, .txn.earning, .txn.investment, .txn.referral, .txn.bonus, .txn.adjustment { border-left-color: var(--atom-pink) !important; }
.txn-amt.pos, .txn-amt.neg, .txn-amt.pos small, .txn-amt.neg small { color: var(--atom-purple) !important; }