:root {
  color-scheme: light;
  --accent: #1f4fd1; /* replaced by the theme colour set in the admin */
  --accent-text: #ffffff;
  --bg: #ffffff;
  --card: #f6f7f9;
  --sheet: #ffffff;       /* cards that float: pop-ups, the selected Real/Demo button */
  --nav-bg: #ffffff;
  --surface-2: #eef0f3;   /* chips, grey buttons */
  --text: #1a1c1f;
  --text-2: #3b3e44;
  --muted: #6b7079;
  --faint: #a2a7ae;
  --line: #e7e9ec;
  --line-strong: #c9cdd3;
  --search-bg: #edf2fa;
  --info-bg: #e9f4fb;
  --info-icon: #2b7bb9;
  --warn-bg: #fff3d1;
  --warn-text: #8a6200;
  --toast-bg: #1a1c1f;
  --skel-1: #f3f4f6;
  --skel-2: #e9ebee;
  --spinner-track: #fbe3e0;
  --danger: #d93025;
  --error-bg: #fdecec;
  --error-text: #a12020;
  --ok-bg: #e7f6ed;
  --ok-text: #157a41;
  --nav-height: 58px;
}
/* Dark mode: follows the phone's setting ("Auto"), or the choice made in Profile (html data-theme) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #121418;
    --card: #1c1f24;
    --sheet: #23272e;
    --nav-bg: #16191d;
    --surface-2: #2a2e35;
    --text: #eceef1;
    --text-2: #c9cdd3;
    --muted: #9aa1ab;
    --faint: #6c737d;
    --line: #2c3038;
    --line-strong: #474d57;
    --search-bg: #23272e;
    --info-bg: #15283a;
    --info-icon: #6fb1ee;
    --warn-bg: #3a2f12;
    --warn-text: #f3d27a;
    --toast-bg: #3a3f47;
    --skel-1: #1f2329;
    --skel-2: #2a2f36;
    --spinner-track: #3a2522;
    --danger: #ff8a80;
    --error-bg: #3a1c1e;
    --error-text: #ffb4b4;
    --ok-bg: #173225;
    --ok-text: #8fdcae;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121418;
  --card: #1c1f24;
  --sheet: #23272e;
  --nav-bg: #16191d;
  --surface-2: #2a2e35;
  --text: #eceef1;
  --text-2: #c9cdd3;
  --muted: #9aa1ab;
  --faint: #6c737d;
  --line: #2c3038;
  --line-strong: #474d57;
  --search-bg: #23272e;
  --info-bg: #15283a;
  --info-icon: #6fb1ee;
  --warn-bg: #3a2f12;
  --warn-text: #f3d27a;
  --toast-bg: #3a3f47;
  --skel-1: #1f2329;
  --skel-2: #2a2f36;
  --spinner-track: #3a2522;
  --danger: #ff8a80;
  --error-bg: #3a1c1e;
  --error-text: #ffb4b4;
  --ok-bg: #173225;
  --ok-text: #8fdcae;
}
* { box-sizing: border-box; }
html { font-size: 11.2px; } /* 30% smaller than the usual 16px; every rem below follows it */
html, body { margin: 0; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 1rem/1.45 "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; text-decoration: none; }
.icon { display: block; flex: none; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; letter-spacing: .02em; }

/* ---- Signed out (sign-in page) ---- */
.site-header { display: flex; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.site-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.15rem; }
.site-brand img { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; }
.site-main { flex: 1; width: 100%; max-width: 960px; margin: 0 auto; padding: 32px 16px; }
.site-footer { padding: 18px 20px; text-align: center; color: var(--muted); font-size: .85rem; border-top: 1px solid var(--line); }
.site-footer p { margin: 0; }
.card { background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 28px 24px; }
.login-card { max-width: 400px; margin: 24px auto; }
.card h1 { margin: 0 0 6px; font-size: 1.4rem; }
.card .hint { margin: 0 0 22px; color: var(--muted); }
.form { display: grid; gap: 16px; }
.form label { display: grid; gap: 6px; font-size: .9rem; font-weight: 600; }
.form input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 16px; /* phones zoom in on smaller fields */
  font-weight: 400;
}
.form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.button {
  padding: 12px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.notice { margin: 0 0 18px; padding: 10px 14px; border-radius: 10px; font-size: .92rem; }
.notice-error { background: var(--error-bg); color: var(--error-text); }

/* ---- Signed in: app shell ---- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  padding-top: max(10px, env(safe-area-inset-top));
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.app-logo { display: grid; place-items: center; width: 32px; height: 32px; }
.app-logo img { width: 30px; height: 30px; border-radius: 10px; object-fit: cover; }
.brand-initial {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1;
}
.mode-switch { display: flex; margin: 0 0 0 auto; padding: 4px; border-radius: 12px; background: var(--surface-2); }
.mode-switch button {
  min-width: 60px;
  padding: 6px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
}
.mode-switch button.is-on { background: var(--sheet); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgb(0 0 0 / 0.1); }
.app-profile {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-left: 12px;
  border-radius: 50%;
  background: var(--surface-2);
}
.app-profile.is-active { background: color-mix(in srgb, var(--accent) 14%, var(--bg)); color: var(--accent); }
.app-main {
  flex: 1;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 20px calc(var(--nav-height) + 28px + env(safe-area-inset-bottom));
}
.page-title { margin: 4px 0 8px; font-size: 1.5rem; }
.section-title { margin: 26px 0 12px; font-size: 1.3rem; font-weight: 600; }
.demo-banner { margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; background: var(--warn-bg); color: var(--warn-text); font-size: .9rem; }

.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: calc(var(--nav-height) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--nav-bg);
  border-top: 1px solid var(--line);
}
.bottom-nav a { display: grid; place-items: center; align-content: center; gap: 3px; color: var(--muted); font-size: .85rem; }
.bottom-nav a.is-active { color: var(--accent); font-weight: 500; }

/* ---- Home ---- */
.add-money {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px 10px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
  font-size: 1.05rem;
}
.wallet-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.wallet-card {
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--card);
}
.currency-badge { flex: none; border-radius: 50%; object-fit: cover; }
.wallet-card .currency-badge { width: 38px; height: 38px; }
.wallet-amount { margin-top: 15px; font-size: 1.2rem; font-weight: 700; }
.wallet-label { color: var(--muted); }
.wallet-more { align-items: center; justify-content: center; gap: 10px; background: var(--bg); border: 1.5px dashed var(--line-strong); }
.wallet-more-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #5f646b; color: #fff; }

.account-list { display: grid; gap: 14px; }
.account-row { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 14px; background: var(--card); }
.account-row > span:last-child { display: grid; gap: 2px; }
.account-row strong { font-weight: 700; }
.tile {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 7px;
  overflow: hidden;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.06);
}
.tile b { font-size: 12.5px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.tile-blue { background: linear-gradient(180deg, #3b7ff0 0%, #1d56c9 100%); padding-bottom: 9px; }
.tile-blue small {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  display: grid;
  place-items: center;
  background: #12306e;
  font-size: 5.5px;
  font-weight: 700;
  letter-spacing: .08em;
}
.tile-gold small { background: linear-gradient(180deg, #f7cf55, #dba52a); color: #3d2b00; }
.tile-coral { background: linear-gradient(160deg, #f47566 0%, #e0493a 100%); }
.tile-coral b { font-size: 12px; }
.tile-options {
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 9px;
  align-content: center;
  background: linear-gradient(115deg, #353a42 0 58%, #4a5059 58% 100%);
}
.tile-options i { width: 9px; height: 9px; border-radius: 2px; }
.tile-options i:nth-child(1) { background: #f0675a; }
.tile-options i:nth-child(2) { background: #78b8f5; }
.tile-options i:nth-child(3) { background: #5d9fe6; }
.tile-options i:nth-child(4) { background: #f3a45c; }

.suggest-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 14px;
  overflow-x: auto;
  margin: 0 -20px;
  padding: 0 20px 6px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.suggest-row::-webkit-scrollbar { display: none; }
.suggest-card { display: grid; gap: 10px; align-content: start; padding: 16px; border-radius: 14px; background: var(--card); scroll-snap-align: start; }
.suggest-card > span:last-child { color: var(--muted); font-size: .92rem; }
.suggest-tag { justify-self: start; padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); font-size: .85rem; font-weight: 600; }

/* ---- Wallets ---- */
.main-wallet { margin-top: 18px; padding: 18px 18px 14px; border-radius: 14px; background: var(--card); }
.main-wallet-head { display: flex; align-items: center; gap: 12px; }
.main-wallet-head .currency-badge { width: 38px; height: 38px; }
.main-wallet-head > span { display: grid; }
.main-wallet-name { font-size: .95rem; }
.main-wallet-amount { font-size: 1.7rem; font-weight: 700; line-height: 1.2; }
.wallet-buttons { display: flex; justify-content: space-between; margin-top: 18px; }
.round-action {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.round-action > span {
  display: grid;
  place-items: center;
  width: 64px;
  height: 46px;
  border: 1.3px solid var(--text);
  border-radius: 999px;
  background: var(--bg);
}
.round-action.is-primary > span { border-color: var(--accent); background: var(--accent); color: var(--accent-text); }
.more-wallets {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 40%;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 0 -20px;
  padding: 0 20px 4px;
  scrollbar-width: none;
}
.more-wallets::-webkit-scrollbar { display: none; }
.mini-wallet {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  text-align: left;
  scroll-snap-align: start;
  cursor: pointer;
}
/* Wallets that cannot be used yet: grey and muted */
.mini-wallet.is-off { color: var(--muted); }
.mini-wallet.is-off .coin-badge { filter: grayscale(1); opacity: .55; }
.mini-wallet.is-off .mini-wallet-add { color: var(--faint); }
.coin-badge { display: block; width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.mini-wallet-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mini-wallet .currency-badge { width: 26px; height: 26px; }
.mini-wallet-add { color: var(--text); }
.mini-wallet-amount { color: var(--muted); font-size: .9rem; }
.method-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.method-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 0;
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.method-card-top { display: flex; align-items: center; justify-content: space-between; }
.method-card strong { font-size: 1.1rem; font-weight: 700; }
.method-badge {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
}
.method-malipay { background: #02318c; }
.method-empawa { background: #13a538; }
.recent-list { display: grid; gap: 10px; }
.recent-tx { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--card); }
.recent-left, .recent-right { display: grid; gap: 2px; align-content: start; }
.recent-right { justify-items: end; text-align: right; }
.recent-time { color: var(--muted); font-size: .85rem; }
.amount-in { color: var(--ok-text); font-weight: 600; white-space: nowrap; }
.amount-out { font-weight: 600; white-space: nowrap; }
.status { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.status-completed { background: var(--ok-bg); color: var(--ok-text); }
.status-pending { background: var(--warn-bg); color: var(--warn-text); }
.status-failed { background: var(--error-bg); color: var(--error-text); }
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-height) + 14px + env(safe-area-inset-bottom));
  z-index: 20;
  margin: 0;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--toast-bg);
  color: #fff;
  font-size: .95rem;
  transform: translateX(-50%);
  white-space: nowrap;
}
.toast[hidden] { display: none; }

/* ---- Profile ---- */
.pill-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.profile-card { display: grid; gap: 16px; justify-items: start; margin: 18px 0 24px; padding: 22px; border-radius: 18px; background: var(--card); }
.profile-avatar {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 1.4rem;
  font-weight: 600;
}
.details { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; }
.details dt { color: var(--muted); }
.details dd { margin: 0; overflow-wrap: anywhere; }
.logout-button { width: 100%; justify-content: center; }

@media (max-width: 380px) {
  .wallet-row { gap: 14px; }
  .mode-switch button { min-width: 60px; padding: 8px 10px; }
}
.tile-img { padding: 0; object-fit: cover; background: var(--surface-2); }

/* ---- Full-screen pages (Withdrawal) ---- */
.bare-main { flex: 1; display: flex; flex-direction: column; width: 100%; max-width: 640px; margin: 0 auto; }
.bare-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  padding-top: max(12px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--line);
}
.skeleton-line { width: 96px; height: 22px; border-radius: 6px; background: linear-gradient(90deg, var(--skel-1), var(--skel-2), var(--skel-1)); background-size: 200% 100%; animation: skeleton 1.4s ease-in-out infinite; }
@keyframes skeleton { to { background-position: -200% 0; } }
.bare-close { display: grid; place-items: center; width: 36px; height: 36px; margin-right: -6px; color: var(--text); }
.bare-body { flex: 1; display: flex; flex-direction: column; padding: 14px 16px 32px; }
.wallet-strip { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--card); font-size: 1.2rem; }
.wallet-strip .currency-badge { width: 28px; height: 28px; }
.wallet-strip-amount { margin-left: auto; }

/* Five grey bars that rise one after another */
.bar-loader { display: flex; align-items: center; justify-content: center; gap: 11px; height: 44px; margin-top: 140px; }
.bar-loader i {
  width: 10px;
  height: 22px;
  border-radius: 5px;
  background: #9aa3ab;
  animation: bar-wave 1s ease-in-out infinite;
}
.bar-loader i:nth-child(2) { animation-delay: .12s; }
.bar-loader i:nth-child(3) { animation-delay: .24s; }
.bar-loader i:nth-child(4) { animation-delay: .36s; }
.bar-loader i:nth-child(5) { animation-delay: .48s; }
@keyframes bar-wave {
  0%, 60%, 100% { height: 22px; }
  25% { height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .bar-loader i, .skeleton-line { animation-duration: 3s; }
}

/* Withdrawal: loader first, then the title, the content and the bottom button */
.withdraw { flex: 1; display: flex; flex-direction: column; min-height: 100vh; }
.bare-title { margin: 0; font-size: 1.6rem; font-weight: 700; }
.withdraw.is-loading .bare-title,
.withdraw.is-loading .withdraw-content,
.withdraw.is-loading .bare-bottom { display: none; }
.withdraw:not(.is-loading) .skeleton-line,
.withdraw:not(.is-loading) .bar-loader { display: none; }
.withdraw-content { padding-top: 18px; }
.verify-panel { display: grid; justify-items: center; text-align: center; padding: 0 8px; }
.verify-art { width: 160px; height: auto; margin-bottom: 18px; }
.verify-panel h2 { margin: 0 0 8px; font-size: 1.6rem; font-weight: 700; }
.verify-panel p { margin: 0; max-width: 340px; font-size: 1.15rem; line-height: 1.5; color: var(--text-2); }
.bare-bottom {
  position: sticky;
  bottom: 0;
  margin: auto 0 0;
  padding: 14px 16px;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.bare-button {
  width: 100%;
  padding: 13px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
  font: inherit;
  font-size: 1.35rem;
  font-weight: 600;
  cursor: pointer;
}
.bare-button:disabled { opacity: .6; cursor: progress; }

/* Withdrawal: "We've sent a verification link" */
.sent-title { max-width: 340px; font-size: 1.75rem !important; line-height: 1.35; }
.sent-title span { display: block; overflow-wrap: anywhere; }
.info-box { margin-top: 24px; padding: 14px 16px 16px; border-radius: 10px; background: var(--info-bg); color: var(--text); font-size: 1.1rem; }
.info-box-head { display: flex; align-items: center; gap: 10px; margin: 0; }
.info-box-head svg { flex: none; color: var(--info-icon); }
.info-box ul { margin: 12px 0 0; padding-left: 56px; line-height: 1.7; }
.bare-button:disabled { background: var(--surface-2); color: var(--faint); opacity: 1; cursor: default; }

/* "Redirecting" after Yes, it's me! */
.redirecting { flex: 1; display: grid; place-items: center; min-height: 100vh; }
.redirecting .bar-loader { margin: 0; }

/* Withdrawal form */
.balance-summary { display: grid; justify-items: center; gap: 2px; margin: 4px 0 18px; text-align: center; }
.balance-summary > span { margin-top: 10px; color: var(--muted); font-size: 1.2rem; }
.balance-summary > span:first-child { margin-top: 0; }
.balance-summary strong { display: inline-flex; align-items: center; gap: 6px; font-size: 1.4rem; font-weight: 700; }
.summary-icon { display: inline-grid; place-items: center; }
.step { display: flex; align-items: center; gap: 12px; margin: 8px 0 10px; font-size: 1.3rem; }
.step span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #ec5c4d; color: #fff; font-size: 1.15rem; }
.amount-input {
  display: block;
  width: 150px;
  margin: 4px 0 4px 40px;
  padding: 6px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: max(16px, 1.4rem); /* same look as the balance figures; 16px+ so phones do not zoom in */
  font-weight: 700;
  text-align: center;
}
.amount-input::placeholder { color: var(--faint); font-weight: 700; }
.amount-input.has-error, .amount-input.has-error:focus { border-bottom-color: var(--danger); }
.amount-error { margin: 2px 0 0 40px; color: var(--danger); font-size: 1.05rem; }
.withdraw-note { margin-top: 18px !important; }
.amount-input:focus { outline: none; border-bottom-color: var(--accent); }
/* The note drops in, rests, slides left until it is gone, then starts again */
.withdraw-note {
  margin: 0 0 18px;
  padding: 10px 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  font-size: 1.25rem;
  white-space: nowrap;
}
.withdraw-note span { display: inline-block; animation: note-ticker 30s linear infinite; }
@keyframes note-ticker {
  0% { transform: translate(0, -140%); opacity: 0; animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); }
  3% { transform: translate(0, 0); opacity: 1; animation-timing-function: linear; }
  12% { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .withdraw-note { white-space: normal; }
  .withdraw-note span { animation: none; }
}
.no-options-card {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 16px;
  align-items: center;
  margin: 8px 0 12px;
  padding: 16px 18px 16px 22px;
  border-radius: 4px;
  background: #2f74d8;
  color: #fff;
  font-size: 1.3rem;
  line-height: 1.45;
}
.no-options-card p { margin: 0 0 14px; }
.no-options-card p:last-child { margin-bottom: 0; }
.method-list { display: grid; margin: 0 -16px; }
.method-option { display: grid; grid-template-columns: 76px 1fr; gap: 10px; padding: 16px; border-top: 1px solid var(--line); cursor: pointer; }
.method-option input { position: absolute; opacity: 0; pointer-events: none; }
.method-option:has(input:checked) { background: color-mix(in srgb, var(--accent) 13%, var(--bg)); box-shadow: inset 3px 0 0 var(--accent); }
.method-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.method-option { transition: opacity 200ms ease; }
.method-option.is-off { opacity: .4; cursor: not-allowed; }
.method-option-art { display: grid; place-items: center start; }
.method-option-art .method-badge { width: 40px; height: 40px; font-size: 1rem; }
.method-art { width: 64px; height: auto; }
.method-option-text { display: grid; gap: 4px; font-size: 1.1rem; line-height: 1.45; }
.method-option-text strong { font-size: 1.35rem; font-weight: 600; }
.method-option-text b { font-weight: 700; }
.method-option-text small { margin-top: 10px; color: var(--faint); font-size: 1rem; line-height: 1.6; }
.bare-button.is-blue { border-radius: 4px; background: #2f74d8; color: #fff; font-weight: 500; }

/* In-app notification (same look as the EMPAWA pop-ups): drops in from the top */
.app-notice {
  position: fixed;
  z-index: 40;
  top: calc(12px + env(safe-area-inset-top));
  left: 50%;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  width: min(520px, calc(100vw - 24px));
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--sheet);
  color: var(--text);
  box-shadow: 0 12px 34px rgb(0 0 0 / 0.28);
  transform: translateX(-50%);
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 260ms ease;
}
.app-notice[hidden] { display: none; }
.app-notice.is-entering { transform: translate(-50%, -130%); opacity: 0; transition: none; }
.app-notice.is-leaving { transform: translate(-50%, -130%); opacity: 0; }
.app-notice-logo { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: var(--accent); }
.app-notice-logo img { width: 100%; height: 100%; object-fit: cover; }
.app-notice-logo span { color: var(--accent-text); font-size: 1.9rem; font-weight: 700; }
.app-notice-content { display: grid; gap: 3px; min-width: 0; }
.app-notice-heading { display: flex; justify-content: space-between; gap: 10px; margin: 0; font-size: 1.1rem; }
.app-notice-heading time { color: var(--muted); font-size: .95rem; }
.app-notice-title { display: block; margin: 0; font-size: 1.25rem; font-weight: 700; }
.app-notice-body { display: block; margin: 0; color: var(--text-2); font-size: 1.12rem; line-height: 1.45; }
.app-notice-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.app-notice-yes {
  padding: 9px 20px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 1.15rem;
  font-weight: 700;
}
.app-notice-later { padding: 9px 12px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 1.1rem; cursor: pointer; }

/* ---- MaliMail (in-app mailbox) ---- */
.mm { display: flex; flex-direction: column; min-height: 100vh; background: var(--bg); }
.mm-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; padding-top: max(10px, env(safe-area-inset-top)); }
.mm-icon-button { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--text-2); }
.mm-search { flex: 1; display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 6px 0 16px; border-radius: 999px; background: var(--search-bg); color: var(--muted); font-size: 1.35rem; }
.mm-search > span:nth-child(2) { flex: 1; }
.mm-me { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--accent-text); font-size: 1.2rem; font-weight: 600; }
.mm-label { margin: 10px 20px 4px; color: var(--muted); font-size: 1.1rem; }
.mm-empty { margin: 40px 20px; color: var(--muted); text-align: center; }
.mm-list { list-style: none; margin: 0; padding: 0; }
.mm-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 22px; gap: 14px; align-items: start; padding: 12px 16px; color: var(--text-2); }
.mm-row:active { background: var(--line); }
.mm-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--card); border: 1px solid var(--surface-2); }
.mm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mm-avatar span { color: var(--accent); font-size: 1.7rem; font-weight: 700; font-style: italic; }
.mm-row-main { display: grid; gap: 1px; min-width: 0; }
.mm-row-top { display: flex; justify-content: space-between; gap: 8px; }
.mm-from { font-size: 1.4rem; color: var(--text); }
.mm-row time { color: var(--muted); font-size: 1.05rem; white-space: nowrap; }
.mm-row-subject, .mm-row-snippet { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-row-subject { font-size: 1.2rem; color: var(--text); }
.mm-row-snippet { font-size: 1.15rem; color: var(--muted); }
.mm-row.is-unread .mm-from, .mm-row.is-unread .mm-row-subject, .mm-row.is-unread time { font-weight: 700; color: var(--text); }
.mm-star { margin-top: 26px; color: var(--muted); }
.mm-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; padding-top: max(8px, env(safe-area-inset-top)); }
.mm-bar-tools { display: flex; gap: 22px; padding-right: 10px; color: var(--text-2); }
.mm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 20px 10px; }
.mm-subject { margin: 0; font-size: 2rem; font-weight: 400; color: var(--text); line-height: 1.3; }
.mm-chip { padding: 1px 8px; border-radius: 4px; background: var(--surface-2); color: var(--text-2); font-size: 1rem; }
.mm-sender { display: flex; gap: 14px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line); }
.mm-sender-main { display: grid; gap: 2px; }
.mm-sender-name { display: flex; align-items: center; gap: 6px; font-size: 1.35rem; font-weight: 600; color: var(--text); }
.mm-sender-name time { margin-left: 4px; color: var(--muted); font-size: 1.05rem; font-weight: 400; }
.mm-to { color: var(--muted); font-size: 1.1rem; }
.mm-body { display: block; width: 100%; height: 640px; border: 0; }
.mm-reply { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: auto; padding: 14px 16px; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
.mm-reply span { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text-2); font-size: 1.25rem; }

/* The withdrawal notification can be tapped to open the email in MaliMail */
.app-notice-open { display: grid; gap: 3px; color: inherit; }

/* Withdrawal step 2: payout details (after choosing a method) */
.details-back { display: inline-grid; place-items: center; width: 40px; height: 40px; margin: 14px 0 0 -6px; color: var(--text); }
.details-logo { display: grid; justify-items: center; gap: 6px; margin: 10px 0 18px; }
.details-logo .method-badge { width: 64px; height: 64px; font-size: 1.6rem; }
.details-logo strong { font-size: 1.5rem; }
.details-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 10px; align-items: center; margin: 0 0 18px; }
.details-figures dt { color: var(--muted); font-size: 1.05rem; text-align: right; line-height: 1.2; }
.details-figures dd { margin: 0; font-size: 1.45rem; }
.details-figures dd strong { font-weight: 700; }
.details-help { color: #c0392b; font-weight: 700; cursor: help; }
.details-info { margin-bottom: 20px; }
.payout-form { display: grid; justify-items: center; gap: 8px; }
.payout-label { color: var(--muted); font-size: 1.1rem; }
.payout-phone { display: flex; align-items: center; gap: 18px; width: min(100%, 320px); }
.payout-phone select {
  flex: 1;
  padding: 8px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 16px;
}
.payout-form textarea {
  width: min(100%, 300px);
  min-height: 150px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  resize: vertical;
}
.payout-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 12px 22px;
  border: 0;
  border-radius: 4px;
  background: #ec5c4d;
  color: #fff;
  font: inherit;
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
}

/* Request Payout: red spinner while processing */
.payout-spinner { display: grid; place-items: center; min-height: 55vh; }
.payout-spinner[hidden] { display: none; }
.payout-spinner span {
  width: 48px;
  height: 48px;
  border: 5px solid var(--spinner-track);
  border-top-color: #ec5c4d;
  border-right-color: #ec5c4d;
  border-radius: 50%;
  animation: payout-spin .9s linear infinite;
}
@keyframes payout-spin { to { transform: rotate(360deg); } }
[hidden].details-back, [hidden].details-logo, [hidden].details-figures, [hidden].details-info, form[hidden] { display: none !important; }

/* Payout Request Confirmation: a green ring draws itself, fills, then the tick draws inside */
.payout-done { display: grid; justify-items: center; gap: 10px; padding-bottom: 24px; }
.done-check { margin-top: 4px; }
.done-ring { fill: transparent; stroke: #8bc34a; stroke-width: 4; stroke-dasharray: 239; stroke-dashoffset: 239; transform: rotate(-90deg); transform-origin: 42px 42px;
  animation: ring-draw .6s ease-out forwards, ring-fill .35s ease-out .6s forwards; }
.done-tick { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48;
  animation: tick-draw .4s ease-out .9s forwards; }
@keyframes ring-draw { to { stroke-dashoffset: 0; } }
@keyframes ring-fill { to { fill: #8bc34a; } }
@keyframes tick-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .done-ring { animation: none; stroke-dashoffset: 0; fill: #8bc34a; }
  .done-tick { animation: none; stroke-dashoffset: 0; }
}
.payout-done h2 { margin: 6px 0 8px; font-size: 2rem; font-weight: 500; text-align: center; }
.payout-thanks { justify-self: stretch; margin: 0; font-size: 1.3rem; line-height: 1.5; }
.done-figures { justify-self: stretch; margin: 4px 0; }
.done-figures dd { font-size: 1.4rem; }
.done-figures dd small { font-size: .85em; }
.done-figures .method-badge { width: 28px; height: 28px; font-size: .75rem; }
.payout-done .payout-button { margin-top: 18px; }

/* Payout Request Confirmation: the values (not the labels) in Arial */
.done-figures dd.arial { font-family: Arial, Helvetica, sans-serif; }
.review-form { display: contents; }

/* BTC / USDT withdrawal methods */
.method-option-art .coin-badge { width: 40px; height: 40px; }
.details-logo .coin-badge { width: 64px; height: 64px; }
.done-method .coin-badge { width: 28px; height: 28px; }
.method-full { margin-top: 2px !important; color: var(--danger) !important; }
.payout-field {
  width: min(100%, 320px);
  padding: 9px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  text-align: center;
}
.payout-field:focus { outline: none; border-bottom-color: var(--accent); }
.notice-ok { background: var(--ok-bg); color: var(--ok-text); }

/* Profile > Appearance */
.theme-picker { margin: 0 0 22px; }
.theme-picker-label { margin: 0 0 8px; font-weight: 600; font-size: 1.15rem; }
.theme-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-2); }
.theme-options button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 6px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 1.15rem;
  cursor: pointer;
}
.theme-options button.is-on { background: var(--sheet); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgb(0 0 0 / 0.12); }
.theme-swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line-strong); }
.theme-swatch-light { background: #ffffff; }
.theme-swatch-dark { background: #121418; }
.theme-swatch-auto { background: linear-gradient(135deg, #ffffff 50%, #121418 50%); }
.theme-picker .small { margin: 8px 0 0; }

/* Settings menu (user icon in the header) */
.user-menu { position: relative; }
.app-profile { border: 0; color: var(--text); cursor: pointer; }
.app-profile[aria-expanded="true"] { background: color-mix(in srgb, var(--accent) 14%, var(--bg)); color: var(--accent); }
.user-menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  width: min(300px, calc(100vw - 24px));
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--sheet);
  box-shadow: 0 14px 36px rgb(0 0 0 / 0.22);
}
.user-menu-panel[hidden] { display: none; }
.user-menu-who { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; }
.user-menu-who:hover { background: var(--surface-2); }
.user-menu-who > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.user-menu-who strong { font-size: 1.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-who > span:nth-child(2) span { color: var(--muted); font-size: 1.05rem; }
.user-menu-who .icon { color: var(--muted); }
.user-menu-avatar { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: var(--accent-text); font-weight: 600; font-size: 1.3rem; }
.user-menu-section { margin: 0; padding: 10px; border-top: 1px solid var(--line); }
.user-menu-label { margin: 0 0 8px; color: var(--muted); font-size: 1.05rem; font-weight: 600; }
.accent-options { display: flex; flex-wrap: wrap; gap: 8px; }
.accent-options button, .accent-custom {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--swatch, var(--surface-2));
  color: #fff;
  font: inherit;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
}
.accent-options button.is-on { box-shadow: 0 0 0 2px var(--sheet), 0 0 0 4px var(--text); }
.accent-custom { overflow: hidden; background: conic-gradient(#ec5c4d, #f08a24, #f2c94c, #13a538, #0f9488, #1f4fd1, #7b3fe4, #d6336c, #ec5c4d); }
.accent-custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.user-menu-logout { width: 100%; padding: 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }

/* ---- Portfolio ---- */
.portfolio-header { display: grid; grid-template-columns: 1fr auto 1fr; border-bottom: 0; background: var(--card); }
.ph-actions { display: flex; justify-content: flex-end; gap: 10px; }
.ask-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  color: var(--text);
  font: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  cursor: pointer;
}
.ask-pill .icon { color: var(--accent); }
.round-icon { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--text); cursor: pointer; }
.bell-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e5332a;
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
}
.portfolio-tabs {
  display: flex;
  gap: 22px;
  margin: -20px -20px 0;
  padding: 6px 20px 0;
  overflow-x: auto;
  background: var(--card);
  scrollbar-width: none;
}
.portfolio-tabs::-webkit-scrollbar { display: none; }
.portfolio-tabs a { position: relative; flex: none; padding: 8px 0 12px; color: var(--muted); font-size: 1.55rem; white-space: nowrap; }
.portfolio-tabs a.is-active { color: var(--text); font-weight: 700; }
.portfolio-tabs a.is-active::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 26px; height: 3px; border-radius: 3px; background: var(--accent); transform: translateX(-50%); }
.pf-top { margin: 0 -20px; padding: 14px 20px 22px; border-radius: 0 0 22px 22px; background: var(--card); }
.pf-label { margin: 0; color: var(--text-2); font-size: 1.2rem; }
.pf-total { margin: 2px 0 0; font-size: 2.3rem; font-weight: 700; }
.pf-buttons { justify-content: space-around; margin-top: 18px; }
.pf-buttons .round-action > span { width: 52px; height: 52px; border-radius: 50%; background: transparent; border-color: var(--text); }
.pf-buttons .round-action.is-primary > span { background: var(--accent); border-color: var(--accent); }
.pf-buttons .round-action { font-size: 1.2rem; }
.pf-deposit { margin: 0 -20px; padding: 22px 20px 26px; border-radius: 0 0 22px 22px; background: color-mix(in srgb, var(--card) 70%, var(--surface-2)); }
.pf-deposit h2 { margin: 0 0 4px; font-size: 1.8rem; }
.pf-deposit > p { margin: 0 0 16px; color: var(--text-2); font-size: 1.3rem; }
.pf-cards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(118px, 1fr); gap: 12px; overflow-x: auto; scrollbar-width: none; }
.pf-cards::-webkit-scrollbar { display: none; }
.pf-card {
  display: grid;
  align-content: space-between;
  justify-items: start;
  gap: 18px;
  min-height: 132px;
  padding: 16px 14px;
  border: 0;
  border-radius: 14px;
  color: #111;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pf-card strong { font-size: 1.45rem; }
.pf-card .coin-badge, .pf-card .method-badge { width: 32px; height: 32px; }
.pf-card-usdt { background: radial-gradient(120% 90% at 0% 0%, #bfe9d6 0%, #ffffff 60%); }
.pf-card-usdc { background: radial-gradient(120% 90% at 0% 0%, #c7d9ff 0%, #ffffff 60%); }
.pf-card-empawa { background: radial-gradient(120% 90% at 0% 0%, #c9efc2 0%, #ffffff 60%); }
.pf-card-empawa strong { margin-bottom: -10px; }
.pf-tag { padding: 2px 10px; border-radius: 4px; background: #e6e7ea; color: #333; font-size: 1.1rem; }
.pf-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pf-quick-card {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  min-height: 78px;
  padding: 10px;
  border: 0;
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 1.1rem;
  cursor: pointer;
}
.pf-quick-card .method-badge { width: 30px; height: 30px; }
.pf-more { display: grid; place-items: center; width: 28px; height: 28px; border: 1.5px solid var(--text); border-radius: 50%; }
.pf-heading { margin: 28px 0 14px; font-size: 1.8rem; }
.pf-methods { display: grid; gap: 12px; }
.pf-method {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 18px;
  align-items: center;
  padding: 20px 18px;
  border: 0;
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pf-method .icon { color: var(--text-2); }
.pf-method > span { display: grid; gap: 3px; }
.pf-method strong { font-size: 1.45rem; font-weight: 500; }
.pf-method > span > span { color: var(--muted); font-size: 1.2rem; line-height: 1.4; }
.pf-trading { display: grid; }
.pf-trading a { display: grid; grid-template-columns: 44px 1fr auto; gap: 18px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.pf-trading a > span:nth-child(2) { font-size: 1.55rem; }
.pf-trading strong { font-size: 1.5rem; font-weight: 500; }
.pf-trading .tile { width: 40px; height: 40px; }
.pf-options-tile { background: #ec5c4d; color: #fff; --nav-bg: #ec5c4d; }
.pf-soon { padding: 40px 0; text-align: center; }
.pf-heading-row { display: flex; align-items: baseline; justify-content: space-between; }
.pf-heading-row a { color: var(--accent); font-weight: 600; font-size: 1.2rem; }
.portfolio-tabs + .page-title, .portfolio-tabs + .notice { margin-top: 20px; }

/* Portfolio > Partners */
.pf-buttons-two { justify-content: space-around; }
.partner-empty { display: grid; justify-items: center; gap: 8px; margin-top: 18vh; text-align: center; }
.partner-art { width: 104px; height: auto; margin-bottom: 14px; }
.partner-empty h2 { margin: 0; font-size: 1.6rem; }
.partner-empty p { margin: 0 0 18px; max-width: 360px; color: var(--text-2); font-size: 1.35rem; line-height: 1.45; }
.partner-button {
  width: 100%;
  padding: 14px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
  font: inherit;
  font-size: 1.55rem;
  font-weight: 700;
  cursor: pointer;
}
.pf-buttons-one { justify-content: center; }
.pf-trading-tab { margin-top: 14px; }

/* Notifications (bell on Portfolio): the page slides left and the panel slides in from the right */
.app-header, .app-main, .bottom-nav { transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.notif-open .app-header, .notif-open .app-main, .notif-open .bottom-nav { transform: translateX(-28%); }
.notif-open body { overflow: hidden; }
.notif-panel {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow-y: auto;
  padding: 0 20px 30px;
  padding-top: env(safe-area-inset-top);
  background: var(--bg);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 320ms;
}
.notif-open .notif-panel { transform: none; visibility: visible; transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1); box-shadow: -12px 0 30px rgb(0 0 0 / 0.18); }
@media (prefers-reduced-motion: reduce) { .notif-panel, .app-header, .app-main, .bottom-nav { transition: none; } }
.notif-bar { display: flex; justify-content: space-between; padding: 14px 0 6px; }
.notif-more { position: relative; }
.notif-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--sheet);
  box-shadow: 0 12px 30px rgb(0 0 0 / 0.2);
}
.notif-menu[hidden] { display: none; }
.notif-menu button, .notif-menu a { padding: 10px 12px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 1.25rem; text-align: left; cursor: pointer; }
.notif-menu button:hover, .notif-menu a:hover { background: var(--surface-2); }
.notif-title { margin: 8px 0 18px; font-size: 2.5rem; font-weight: 700; }
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-item { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.notif-icon { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, #3b82f6 16%, var(--bg)); color: #3b82f6; }
.notif-item.is-new .notif-icon::after { content: ""; position: absolute; top: 1px; right: 1px; width: 9px; height: 9px; border-radius: 50%; background: #e5332a; box-shadow: 0 0 0 2px var(--bg); }
.notif-text { display: grid; gap: 3px; }
.notif-text strong { font-size: 1.5rem; font-weight: 700; }
.notif-text > span { color: var(--text-2); font-size: 1.3rem; line-height: 1.45; }
.notif-text time { color: var(--muted); font-size: 1.15rem; }
.notif-empty { margin-top: 30px; }

/* Portfolio > P2P */
.p2p-heading { margin-top: 26px; }
.p2p-reasons { display: grid; gap: 14px; }
.p2p-reason { display: grid; gap: 6px; padding: 18px 22px 20px; border: 1px solid var(--line); border-radius: 12px; }
.p2p-art { display: block; width: 56px; height: 56px; margin-bottom: 12px; object-fit: contain; }
.p2p-art-wallet svg { display: block; width: 100%; height: 100%; }
.p2p-reason strong { font-size: 1.5rem; }
.p2p-reason span { color: var(--text-2); font-size: 1.3rem; line-height: 1.45; }
.p2p-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.p2p-steps li { position: relative; display: grid; gap: 5px; padding: 0 0 22px 52px; counter-increment: step; }
.p2p-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--text-2);
  color: var(--bg);
  font-weight: 700;
  font-size: 1.3rem;
}
.p2p-steps li:not(:last-child)::after { content: ""; position: absolute; left: 14.5px; top: 34px; bottom: 4px; width: 1.5px; background: var(--line-strong); }
.p2p-steps strong { font-size: 1.5rem; line-height: 30px; }
.p2p-steps span { color: var(--text-2); font-size: 1.3rem; line-height: 1.45; }
.p2p-market { margin-top: 18px; }
.p2p-learn { display: block; margin: 22px auto 10px; border: 0; background: none; color: var(--text); font: inherit; font-size: 1.55rem; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.mode-switch-center { margin: 0; }

/* ---- Options ---- */
.options-top .notice { margin-bottom: 12px; }
.options-updated { margin: 2px 0 0; color: var(--text-2); font-size: 1.2rem; }
.reset-form { display: contents; }
.round-action:disabled { color: var(--faint); cursor: default; }
.round-action:disabled > span { border-color: var(--line-strong); color: var(--faint); }
.market-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.market-card {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  min-height: 150px;
  padding: 16px 14px;
  border: 0;
  border-radius: 14px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.market-icon { width: 40px; height: 31px; }
.market-name { margin-top: 6px; font-size: 1.3rem; }
.market-price { overflow: hidden; text-overflow: ellipsis; font-size: 1.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.market-trend { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 8px; font-size: 1.2rem; white-space: nowrap; }
.sparkline { flex: 1; min-width: 0; height: 26px; }
.market-change { color: #1db584; font-weight: 600; font-variant-numeric: tabular-nums; }
.market-change.is-down { color: #e5334b; }
.market-all { display: grid; place-items: center; align-content: center; gap: 10px; font-size: 1.45rem; }
.featured { position: relative; }
.featured { position: relative; padding-top: 14px; }
/* Featured stack: every card in the same grid cell; the depth decides size and position */
.featured-stack { display: grid; touch-action: pan-y; user-select: none; }
.featured-card {
  grid-area: 1 / 1;
  overflow: hidden;
  border: 6px solid var(--surface-2);
  border-radius: 16px;
  background: var(--surface-2);
  transform-origin: 50% 0; /* cards behind shrink from the top edge, so their top peeks out */
  transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 230ms ease, filter 300ms ease;
  will-change: transform;
}
.featured-card[data-depth="0"] { transform: none; }
.featured-card[data-depth="1"] { transform: translateY(-14px) scale(.9); filter: brightness(.85); }
.featured-card[data-depth="2"] { transform: translateY(-24px) scale(.82); filter: brightness(.75); }
.featured-card.is-dragging { transition: none; cursor: grabbing; }
.featured-card.is-recycling { transition: none; }
@media (prefers-reduced-motion: reduce) { .featured-card { transition: none; } }
.featured-art { display: block; width: 100%; height: 150px; border-radius: 10px 10px 0 0; pointer-events: none; }
.featured-body { display: grid; gap: 4px; padding: 14px 12px; }
.featured-body strong { font-size: 1.6rem; }
.featured-body span { color: var(--text-2); font-size: 1.3rem; line-height: 1.45; }
.featured-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; background: color-mix(in srgb, var(--surface-2) 80%, var(--text) 6%); }
.featured-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.featured-tags span { padding: 3px 8px; border-radius: 4px; background: var(--card); color: var(--text-2); font-size: 1rem; }
.featured-trade { flex: none; white-space: nowrap; padding: 8px 16px; border: 1.5px solid var(--text); border-radius: 999px; background: none; color: var(--text); font: inherit; font-size: 1.3rem; font-weight: 700; cursor: pointer; }
.featured-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.featured-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.featured-dots i.is-on { background: var(--text); }
.trade-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.trade-type { display: grid; place-items: center; align-content: center; gap: 12px; aspect-ratio: 1; border: 0; border-radius: 14px; background: var(--card); color: var(--text); font: inherit; font-size: 1.3rem; cursor: pointer; }
.options-learn { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; margin-top: 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: none; color: var(--text); font: inherit; font-size: 1.4rem; text-align: left; cursor: pointer; }
.featured-stack.is-swapping .featured-card { transition: none; }

/* CFD account tiles with a coloured band, and the copy-trading tile */
.tile-band small { background: var(--band); }
.tile-red { background: linear-gradient(160deg, #f04a3c 0%, #c8281c 100%); }

/* ---- CFDs ---- */
.cfd-mine { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 48%); gap: 12px; overflow-x: auto; scrollbar-width: none; }
.cfd-mine::-webkit-scrollbar { display: none; }
.cfd-mine-card { display: grid; gap: 8px; justify-items: start; padding: 16px 14px 18px; border: 0; border-radius: 14px; background: var(--card); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.cfd-mine-card .tile { width: 38px; height: 38px; }
.cfd-mine-name { font-size: 1.45rem; }
.cfd-mine-amount { font-size: 1.45rem; }
.cfd-mine-amount small { color: var(--text-2); font-size: .85em; }
.cfd-featured { margin: 0 6%; overflow: hidden; border: 8px solid var(--surface-2); border-radius: 16px; background: var(--surface-2); }
.cfd-featured-art { display: block; width: 100%; height: 160px; border-radius: 10px 10px 0 0; object-fit: cover; }
/* the gold line draws itself from 2023 up to 2025, pauses, and starts again */
.cf-rise { stroke-dasharray: 100 100; stroke-dashoffset: 100; animation: cf-rise 4.5s ease-in-out infinite; }
@keyframes cf-rise { 0% { stroke-dashoffset: 100; } 55%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -100; } }
@media (prefers-reduced-motion: reduce) { .cf-rise { animation: none; stroke-dashoffset: 0; } }
.cfd-featured-body { display: grid; gap: 4px; padding: 14px 12px 16px; }
.cfd-featured-body strong { font-size: 1.6rem; }
.cfd-featured-body span { color: var(--text-2); font-size: 1.3rem; line-height: 1.45; }
.cfd-featured-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; background: color-mix(in srgb, var(--surface-2) 80%, var(--text) 6%); }
.cfd-featured-account { display: flex; align-items: center; gap: 12px; font-size: 1.45rem; }
.cfd-featured-account .tile { width: 38px; height: 38px; }
.cfd-available-head { align-items: center; margin-top: 26px; }
.cfd-available-head .pf-heading { margin: 0; }
.cfd-compare { padding: 7px 16px; border: 0; border-radius: 999px; background: var(--card); color: var(--text); font: inherit; font-size: 1.25rem; cursor: pointer; }
.cfd-available { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 12px; margin: 14px -20px 0; padding: 0 20px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.cfd-available::-webkit-scrollbar { display: none; }
.cfd-available-column { display: grid; gap: 12px; scroll-snap-align: start; }
.cfd-account { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; min-height: 130px; padding: 16px; border: 0; border-radius: 14px; background: var(--card); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.cfd-account-text { display: grid; gap: 6px; justify-items: start; }
.cfd-account-text strong { font-size: 1.45rem; }
.cfd-account-text span { color: var(--text-2); font-size: 1.25rem; line-height: 1.4; }
.cfd-account-text em { padding: 2px 7px; border: 1px solid var(--text); border-radius: 4px; font-style: normal; font-size: 1.05rem; }
.cfd-account .tile { width: 44px; height: 44px; }

/* CFDs > Featured: a stack (Demo has two cards) */
.cfd-featured-wrap { margin: 0 6%; }
.featured-card.cfd-featured { margin: 0; border-width: 8px; }
/* price tags appear one after another as the gold line reaches 2023, 2024 and 2025, and go with it */
.cf-tag { opacity: 0; animation: 4.5s ease-in-out infinite; }
.cf-tag-1 { animation-name: cf-tag-1; }
.cf-tag-2 { animation-name: cf-tag-2; }
.cf-tag-3 { animation-name: cf-tag-3; }
@keyframes cf-tag-1 { 0%, 18% { opacity: 0; } 24%, 84% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes cf-tag-2 { 0%, 33% { opacity: 0; } 39%, 84% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes cf-tag-3 { 0%, 49% { opacity: 0; } 55%, 84% { opacity: 1; } 92%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cf-tag { animation: none; opacity: 1; } }
/* the TradingView picture: two tiles joined by a link, rocking back and forth on the x axis */
.charting-art { display: flex; align-items: center; justify-content: center; gap: 4px; background: radial-gradient(70% 90% at 50% 60%, #1d2027, #050506); perspective: 360px; }
.charting-tile {
  display: grid;
  place-items: center;
  align-content: center;
  width: 78px;
  height: 74px;
  border-radius: 14px;
  color: #fff;
  animation: charting-rock 3.2s ease-in-out infinite;
  transform-style: preserve-3d;
}
.charting-brand { background: linear-gradient(160deg, #f25a4b, #b51f14); box-shadow: 0 6px 0 #7d140c, 0 14px 22px rgb(0 0 0 / .6); }
.charting-brand b { font-size: 46px; font-weight: 700; line-height: 1; color: #f4f4f5; text-shadow: 0 2px 0 rgb(0 0 0 / .25); }
.charting-brand img { width: 62%; height: 62%; object-fit: contain; }
.charting-pro { background: linear-gradient(160deg, #2a2c31, #0b0b0d); box-shadow: 0 6px 0 #000, 0 14px 22px rgb(0 0 0 / .6); animation-delay: -1.6s; }
.charting-pro b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.charting-pro small { font-size: 9px; font-weight: 600; color: #cfd2d7; }
.charting-link { flex: none; filter: drop-shadow(0 3px 3px rgb(0 0 0 / .6)); }
@keyframes charting-rock { 0%, 100% { transform: rotateX(18deg) rotateZ(-3deg); } 50% { transform: rotateX(-18deg) rotateZ(3deg); } }
@media (prefers-reduced-motion: reduce) { .charting-tile { animation: none; } }

/* CFDs > Precious metals: a plate with two solid 3D gold bars turning a full circle, again and again */
.cfd-metals { position: relative; overflow: hidden; background: #000; }
.cfd-metals svg { display: block; width: 100%; height: 100%; }
.gold-stage { position: absolute; right: 5%; bottom: 9%; width: 104px; height: 70px; perspective: 460px; }
.gold-plate {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(60% 70% at 50% 35%, #4a4c52, #1d1e22 70%, #0a0a0b);
  box-shadow: 0 6px 0 #0c0c0e, 0 12px 18px rgb(0 0 0 / .8);
}
/* soft shadow the bars cast on the plate */
.gold-plate::after { content: ""; position: absolute; left: 22%; right: 22%; top: 18%; height: 60%; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / .75), transparent); }
.gold-tilt { position: absolute; left: 50%; bottom: 15px; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(-26deg); }
.gold-spin { position: absolute; transform-style: preserve-3d; animation: gold-spin 6s linear infinite; }
@keyframes gold-spin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }

/* An ingot: base 52 x 24, top 40 x 15, 12 high. The bar element is a point at the middle of its base. */
.gold-bar { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
.gold-bar-low { transform: translate3d(-10px, 0, -7px) rotateY(-24deg); }
.gold-bar-high { transform: translate3d(9px, -5px, 9px) rotateY(-14deg) rotateZ(13deg); } /* left end lifted onto the other bar */
.gold-bar i { position: absolute; display: block; overflow: hidden; backface-visibility: hidden; transform-origin: 50% 100%; }
.gold-bar i::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.gold-bar i.gb-front, .gold-bar i.gb-back, .gold-bar i.gb-left, .gold-bar i.gb-right { backface-visibility: visible; }
/* long sides: 52 wide at the base, 40 at the top; they lean in by 4.5px (base depth 24 -> top 15) over 12px */
.gb-front, .gb-back { left: -26px; top: -12.8px; width: 52px; height: 12.8px; clip-path: polygon(6px 0, 46px 0, 100% 100%, 0 100%); }
.gb-front { transform: translateZ(12px) rotateX(20.6deg); }
.gb-back { transform: rotateY(180deg) translateZ(12px) rotateX(20.6deg); }
/* ends: 24 wide at the base, 15 at the top; they lean in by 6px (base width 52 -> top 40) over 12px */
.gb-left, .gb-right { left: -12px; top: -13.4px; width: 24px; height: 13.4px; clip-path: polygon(4.5px 0, 19.5px 0, 100% 100%, 0 100%); }
.gb-right { transform: rotateY(90deg) translateZ(26px) rotateX(26.6deg); }
.gb-left { transform: rotateY(-90deg) translateZ(26px) rotateX(26.6deg); }
.gold-bar .gb-top { left: -20px; top: -7.5px; width: 40px; height: 15px; transform-origin: 50% 50%; transform: translateY(-12px) rotateX(90deg); }
.gold-bar .gb-bottom { left: -26px; top: -12px; width: 52px; height: 24px; transform-origin: 50% 50%; transform: rotateX(-90deg); background: #5a3708; }

/* metal colours */
.gb-front { background: linear-gradient(180deg, #ffe58f 0%, #f0bf45 38%, #c98a1c 100%); }
.gb-back { background: linear-gradient(180deg, #e8b548 0%, #b47a17 60%, #7d4e0c 100%); }
.gb-right { background: linear-gradient(180deg, #f7d16a 0%, #d79a2b 55%, #9c6512 100%); }
.gb-left { background: linear-gradient(180deg, #d9a136 0%, #a46b13 60%, #6e440a 100%); }
.gb-top { background: linear-gradient(120deg, #fff4c8 0%, #ffd96e 30%, #e9b13f 62%, #c78a1e 100%); box-shadow: inset 0 0 0 1px rgb(255 240 190 / .55), inset 0 -2px 3px rgb(140 90 15 / .5); }
/* stamping on the top, pressed into the metal */
.gb-top b, .gb-top em { position: absolute; color: #c18620; text-shadow: 0 .5px 0 rgb(255 245 205 / .9), 0 -.4px 0 rgb(120 76 10 / .6); font-family: Arial, sans-serif; font-weight: 700; line-height: 1; letter-spacing: .02em; transform: rotate(180deg); }
.gb-top b { left: 4px; top: 2.5px; font-size: 3.6px; text-align: center; }
.gb-top em { right: 4px; bottom: 2.5px; font-size: 3.2px; font-style: normal; }

/* shine: a bright streak sweeps across each face as it turns towards us, and the face dims as it turns away */
.gb-front::after, .gb-back::after, .gb-left::after, .gb-right::after {
  background: linear-gradient(105deg, transparent 35%, rgb(255 252 230 / .85) 48%, rgb(255 252 230 / .2) 56%, transparent 66%) no-repeat;
  background-size: 260% 100%;
  animation: gold-glint 6s linear infinite, gold-dim 6s linear infinite;
}
.gb-front::after { animation-delay: 0s; }
.gb-left::after { animation-delay: -1.5s; }
.gb-back::after { animation-delay: -3s; }
.gb-right::after { animation-delay: -4.5s; }
@keyframes gold-glint { 0%, 70% { background-position: 130% 0; } 92%, 100% { background-position: -40% 0; } }
@keyframes gold-dim { 0%, 100% { box-shadow: inset 0 0 0 40px rgb(0 0 0 / 0); } 25%, 45% { box-shadow: inset 0 0 0 40px rgb(0 0 0 / .45); } 70% { box-shadow: inset 0 0 0 40px rgb(0 0 0 / .1); } }
.gb-top::after { background: linear-gradient(120deg, transparent 30%, rgb(255 255 240 / .7) 45%, transparent 60%) no-repeat; background-size: 250% 100%; animation: gold-top-glint 6s ease-in-out infinite; }
@keyframes gold-top-glint { 0%, 100% { background-position: 120% 0; } 50% { background-position: -30% 0; } }
@media (prefers-reduced-motion: reduce) {
  .gold-spin { animation: none; transform: rotateY(-30deg); }
  .gold-bar i::after { animation: none; }
}

/* Options > Featured "Trade on Gold": a silver plate seen from low down, two ingots turning on it */
.gold-scene { position: relative; overflow: hidden; background: radial-gradient(80% 90% at 50% 80%, #14161b, #000 70%); perspective: 520px; }
.silver-plate { position: absolute; left: 50%; bottom: 10%; width: 168px; height: 24px; transform: translateX(-50%); }
.silver-top { position: absolute; left: 0; right: 0; top: -5px; height: 10px; border-radius: 50%; background: radial-gradient(60% 80% at 50% 50%, #f4f5f7, #a9adb4 70%, #6d7178); }
.silver-side {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 0 0 50% 50% / 0 0 6px 6px;
  /* brushed metal: light and dark streaks across the band */
  background:
    linear-gradient(90deg, #5d6168 0%, #e9ebee 18%, #9ea2a9 32%, #f7f8fa 48%, #8c9097 62%, #dfe1e5 78%, #4f5359 100%),
    repeating-linear-gradient(0deg, rgb(255 255 255 / .12) 0 1px, transparent 1px 3px);
  background-blend-mode: overlay;
  box-shadow: 0 10px 18px rgb(0 0 0 / .8);
}
/* camera only a little above the plate */
.gold-camera { position: absolute; left: 50%; bottom: calc(10% + 18px); width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(-9deg) scale(1.55); }
.gold-spin-slow { animation-duration: 8s; }
.gold-bar-flat { transform: translate3d(-7.46px, 0, 0) rotateY(90deg); } /* lies on the plate, long side going away from the camera */
/* Stands on its tapered end: an ingot's end slopes 26.6deg, so it rests flat only when tilted that far,
   and it leans across the lying bar until its top face touches that bar's upper edge (no overlap). */
.gold-bar-stand { transform: translate3d(7.83px, -23.26px, 0) rotateZ(-116.565deg); }
.gold-bar-flat .gb-top b { left: 3px; top: 2.5px; font-size: 3.3px; }
.gold-bar-flat .gb-top em { right: 3px; bottom: 2.5px; font-size: 2.8px; text-align: center; }

/* CFDs > Featured metals: the same bars and camera as Options "Trade on Gold", on a thin black plate */
.gold-stage-low { right: 4%; bottom: 8%; width: 128px; height: 96px; perspective: 520px; }
.gold-stage-low .silver-plate { bottom: 0; width: 128px; height: 9px; }
.gold-stage-low .gold-camera { bottom: 4px; transform: rotateX(-9deg) scale(1.2); }
.black-plate .silver-top { top: -6px; height: 12px; background: radial-gradient(60% 80% at 50% 45%, #3c3e44, #17181b 65%, #050506); box-shadow: inset 0 1px 0 rgb(255 255 255 / .18); }
.black-plate .silver-side {
  border-radius: 0 0 50% 50% / 0 0 4px 4px;
  background: linear-gradient(90deg, #050506 0%, #2a2c31 22%, #111214 40%, #4a4c52 52%, #121315 66%, #26282c 82%, #040405 100%);
  box-shadow: 0 6px 14px rgb(0 0 0 / .9);
}

/* more shine: the bars glow on the plate, and the light streaks are brighter */
.silver-plate::before { content: ""; position: absolute; left: 22%; right: 22%; top: -6px; height: 12px; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 205 90 / .45), transparent); z-index: 1; pointer-events: none; }
.gold-camera .gb-front::after, .gold-camera .gb-back::after, .gold-camera .gb-left::after, .gold-camera .gb-right::after {
  background-image: linear-gradient(105deg, transparent 32%, rgb(255 255 245 / .55) 42%, rgb(255 255 250 / 1) 48%, rgb(255 250 220 / .35) 56%, transparent 68%);
}
.gold-camera .gb-top::after { background-image: linear-gradient(120deg, transparent 28%, rgb(255 255 245 / .95) 45%, transparent 62%); }
.gold-camera .gold-bar i:not(.gb-bottom) { filter: saturate(1.15) brightness(1.06); }
/* keep the light in step with the slower turn on Options */
.gold-spin-slow .gb-front::after, .gold-spin-slow .gb-back::after, .gold-spin-slow .gb-left::after, .gold-spin-slow .gb-right::after { animation-duration: 8s, 8s; }
.gold-spin-slow .gb-left::after { animation-delay: -2s; }
.gold-spin-slow .gb-back::after { animation-delay: -4s; }
.gold-spin-slow .gb-right::after { animation-delay: -6s; }
.gold-spin-slow .gb-top::after { animation-duration: 8s; }

/* ---- Home ---- */
/* "Make your first deposit": edge to edge under the header, two stacked panels with rounded bottoms */
.first-deposit { margin: -20px -20px 0; background: var(--card); border-radius: 0 0 22px 22px; }
.fd-hero { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 20px; border-radius: 0 0 22px 22px; background: var(--card); position: relative; z-index: 1; box-shadow: 0 1px 0 var(--line); }
.fd-hero h1 { margin: 0 0 12px; font-size: 1.75rem; font-weight: 700; }
.fd-steps { display: flex; gap: 8px; margin-bottom: 20px; }
.fd-steps i { width: 56px; height: 3px; border-radius: 2px; background: var(--line-strong); }
.fd-steps i.is-done { background: #13a538; }
.fd-button {
  display: inline-block;
  padding: 11px 22px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 75%, #fff));
  color: var(--accent-text);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.fd-art { display: block; flex: none; width: 112px; }
.fd-art svg, img.fd-art { display: block; width: 100%; height: auto; }
.fd-methods { padding: 26px 20px 20px; margin-top: -10px; border-radius: 0 0 22px 22px; background: color-mix(in srgb, var(--card) 80%, var(--surface-2)); }
.fd-methods h2 { margin: 0 0 6px; font-size: 1.3rem; font-weight: 600; }
.fd-methods p { margin: 0 0 14px; color: var(--muted); font-size: 1.1rem; }
.fd-method-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fd-method { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 52px; padding: 8px; border-radius: 12px; background: var(--surface-2); color: var(--text); font-size: .95rem; font-weight: 700; line-height: 1.05; text-align: left; }
.fd-method .method-badge { width: 24px; height: 24px; }
.fd-method-name span { font-size: 1.3rem; font-weight: 800; background: linear-gradient(90deg, #7b3fe4, var(--accent) 55%, #f2a81d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fd-method-agent .method-badge { filter: grayscale(1); }
.fd-method-more { flex-direction: column; gap: 3px; font-size: 1.05rem; font-weight: 500; }
.fd-more-icon { display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid currentColor; border-radius: 50%; }

/* rows that scroll sideways, with the cards snapping into place */
.h-scroll { display: flex; gap: 10px; margin: 0 -20px; padding: 0 20px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px; scrollbar-width: none; }
.h-scroll::-webkit-scrollbar { display: none; }
.h-scroll > * { scroll-snap-align: start; flex: none; }

.trade-account { display: grid; align-content: start; gap: 6px; width: 42%; min-width: 150px; padding: 14px; border-radius: 14px; background: var(--card); color: var(--text); }
.trade-account .tile { margin-bottom: 4px; }
.trade-account strong { font-size: 1.2rem; font-weight: 500; }
.trade-account [data-money] { font-size: 1.05rem; color: var(--text-2); }
.trade-account-add { place-items: center; align-content: center; gap: 8px; border: 1.5px dashed var(--line-strong); background: transparent; color: var(--text-2); font-size: 1.1rem; text-align: center; }
.add-circle { display: grid; place-items: center; width: 34px; height: 34px; border: 1.5px solid currentColor; border-radius: 50%; }

/* offers: one card at a time, swipe or auto-advance */
.promo { margin: 22px 0 0; }
.promo-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 16px; }
.promo-track::-webkit-scrollbar { display: none; }
.promo-card { position: relative; flex: 0 0 100%; scroll-snap-align: start; }
.promo-link { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 104px; padding: 14px 16px; border: 0; border-radius: 16px; background: var(--card); color: var(--text); font: inherit; text-align: left; cursor: pointer; overflow: hidden; }
.promo-text { display: grid; gap: 4px; flex: 1; min-width: 0; }
.promo-text strong { font-size: 1.3rem; font-weight: 700; }
.promo-text span { color: var(--text-2); font-size: 1.02rem; line-height: 1.35; }
.promo-art { display: block; flex: none; width: 118px; align-self: stretch; }
.promo-art svg, img.promo-art { display: block; width: 100%; height: 100%; object-fit: contain; }
.promo-art-space { align-self: flex-end; margin-bottom: -14px; }
.promo-close { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--text); cursor: pointer; }
.promo-dots { display: flex; justify-content: center; gap: 5px; height: 4px; margin-top: 12px; }
.promo-dots i { width: 5px; height: 4px; border-radius: 2px; background: var(--line-strong); transition: width .25s, background .25s; }
.promo-dots i.is-on { width: 16px; background: var(--text); }

/* Explore: three round icons a row */
.explore-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 8px; }
.explore-item { display: grid; justify-items: center; gap: 8px; color: var(--text); font-size: 1.05rem; text-align: center; }
.explore-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--card); }
.explore-icon .tile { width: 30px; height: 30px; border-radius: 6px; }
.explore-icon .tile b { font-size: 10px; }
.explore-icon .tile small { font-size: 5px; }
.more-grid { display: grid; grid-template-columns: repeat(3, 8px); gap: 2.5px; } /* 3 x 3: corners and centre red, the rest white */
.more-grid i { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
.more-grid i:nth-child(even) { background: #fff; box-shadow: inset 0 0 0 1px var(--line-strong); }

/* Highlights: picture on top, text and tags below */
.highlight { display: flex; flex-direction: column; width: 50%; min-width: 172px; border-radius: 14px; background: var(--card); color: var(--text); overflow: hidden; }
.highlight-art { display: block; aspect-ratio: 2 / 1; background: #050506; }
.highlight-art svg, img.highlight-art { display: block; width: 100%; height: 100%; object-fit: cover; }
.highlight-body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 12px 14px 14px; }
.highlight-body strong { font-size: 1.3rem; font-weight: 700; }
.highlight-body > span:not(.highlight-tags) { color: var(--text-2); font-size: 1.02rem; line-height: 1.35; }
.highlight-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: auto; padding-top: 10px; }
.highlight-tags span { padding: 3px 7px; border-radius: 4px; background: var(--surface-2); font-size: .92rem; font-weight: 500; }
.highlight-tags em { font-style: normal; font-size: .92rem; color: var(--text-2); }

/* the user icon at the left of the Home header opens its menu to the right */
.user-menu-left .user-menu-panel { left: 0; right: auto; }
.portfolio-header .user-menu .app-profile { width: 38px; height: 38px; background: var(--surface-2); }
/* Home: the person has its own ring and a red dot at the top right */
.user-menu-left .app-profile { position: relative; }
.profile-dot { position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%; background: #ff444f; }

/* Home offer "AI market analysis": the sheet, the coin and the bars bob up and down out of step, like on water */
.ai-art .ai-float { animation: ai-bob 3.6s ease-in-out infinite; }
.ai-art .ai-paper { animation-duration: 4.2s; }
.ai-art .ai-silver { animation-delay: -.9s; }
.ai-art .ai-coin { animation-delay: -1.8s; animation-duration: 3.2s; }
.ai-art .ai-gold { animation-delay: -2.7s; }
@keyframes ai-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.ai-art .ai-shadow { transform-box: fill-box; transform-origin: center; animation: ai-shadow 3.6s ease-in-out infinite; }
@keyframes ai-shadow { 0%, 100% { transform: scaleX(1); opacity: .35; } 50% { transform: scaleX(.92); opacity: .25; } }

/* Home offer "Space stocks CFDs": lift-off (7 s loop) - shake, smoke, climb out of sight, logo, reset */
/* the rocket may fly past the picture: the card's own edge is what hides it */
.space-art { overflow: visible; }
.promo-art-space svg { overflow: visible; }
.space-art .sp-rocket { animation: sp-rocket 7s linear infinite; }
@keyframes sp-rocket {
  0% { transform: translate(0, 0); opacity: 1; animation-timing-function: ease-out; }
  9% { transform: translate(0, -6px); animation-timing-function: ease-in-out; }  /* lifts a little */
  17% { transform: translate(0, 2px); }                                            /* sinks back down */
  19%, 23% { transform: translate(-.6px, 2px); }
  21%, 25% { transform: translate(.6px, 2px); }
  26% { transform: translate(0, 2px); animation-timing-function: cubic-bezier(.45, 0, .8, .5); }
  56% { transform: translate(0, -230px); opacity: 1; }                             /* gone past the top edge */
  57%, 92% { transform: translate(0, -230px); opacity: 0; }
  93% { transform: translate(0, 0); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}
.space-art .sp-flame { transform-box: fill-box; transform-origin: 50% 0; animation: sp-flame 7s linear infinite; }
@keyframes sp-flame { 0%, 2% { transform: scaleY(0); } 9% { transform: scaleY(.7); } 17% { transform: scaleY(.4); } 26%, 56% { transform: scaleY(1.3); } 57%, 100% { transform: scaleY(0); } }
.space-art .sp-puff { transform-box: fill-box; transform-origin: center; opacity: 0; animation: sp-puff 7s ease-out infinite; }
@keyframes sp-puff {
  0%, 14% { transform: translate(0, 0) scale(.2); opacity: 0; }
  26% { opacity: .95; }
  45% { transform: translate(0, -10px) scale(1.5); opacity: .75; }
  70% { transform: translate(0, -26px) scale(2.1); opacity: 0; }
  100% { opacity: 0; }
}
.space-art .sp-logo { opacity: 0; animation: sp-logo 7s ease-in-out infinite; }
@keyframes sp-logo { 0%, 56% { opacity: 0; transform: translateY(4px); } 64%, 86% { opacity: 1; transform: translateY(0); } 92%, 100% { opacity: 0; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .ai-art *, .space-art * { animation: none !important; }
  .space-art .sp-logo, .space-art .sp-puff { opacity: 0; }
}
/* TradingView tile: black with a white mark */
.tile-tv { background: linear-gradient(160deg, #26282d, #050506); flex-direction: column; gap: 1px; }
.tile-tv .tv-mark { width: 62%; height: auto; }
.tile-tv small { font-size: 3.6px; color: #d5d8dd; letter-spacing: 0; }
.explore-icon .tile-tv small { font-size: 3px; }
.promo-link { clip-path: inset(0 round 16px); } /* the rocket vanishes exactly at the card edge */
.charting-pro .tv-mark { width: 58%; height: auto; margin-bottom: 4px; }

/* App tiles (MT5, TradingView, Options, More): glossy 3D blocks, tilted back to the right with a visible
   thick edge along the right and bottom, like the app icons in the reference. */
.tile:not(.tile-img) {
  --edge: #0e2a66;
  overflow: visible;
  border-radius: 8px;
  transform: perspective(110px) rotateY(-16deg) rotateX(7deg) rotateZ(-2deg);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .38),
    inset 1px 0 0 rgb(255 255 255 / .18),
    1px 1px 0 var(--edge), 2px 2px 0 var(--edge), 3px 2.5px 0 var(--edge), 3.5px 3.5px 0 var(--edge),
    5px 7px 8px rgb(0 0 0 / .35);
}
.tile:not(.tile-img)::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(155deg, rgb(255 255 255 / .3), rgb(255 255 255 / 0) 42%); pointer-events: none; z-index: 1; }
.tile-blue small { border-radius: 0 0 8px 8px; }
.tile.tile-coral, .tile.tile-red { --edge: #8f2116; }
.tile.tile-tv { --edge: #3a3d43; }
.tile-opt svg { width: 62%; height: auto; }

/* the "More" icon: a 3 x 2 block of 3D squares */
.more-grid { transform: perspective(110px) rotateY(-16deg) rotateX(7deg) rotateZ(-2deg); }
.more-grid i { border-radius: 2.5px; box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 1px 1px 0 color-mix(in srgb, var(--accent) 55%, #000), 1.6px 1.6px 0 color-mix(in srgb, var(--accent) 55%, #000); }
.more-grid i:nth-child(even) { box-shadow: inset 0 0 0 1px var(--line-strong), 1px 1px 0 #9aa0a8, 1.6px 1.6px 0 #9aa0a8; }

/* Home offer "Trade with TradingView charts": the app tile and the TradingView tile as thick tilted blocks */
.promo-tiles { display: flex; align-items: center; justify-content: center; align-self: center; }
.promo-tiles .tile { width: 44px; height: 44px; border-radius: 10px; }
.tile.tile-brand {
  --edge: color-mix(in srgb, var(--accent) 55%, #000);
  background: var(--accent);
  color: #fff;
  transform: perspective(110px) rotateY(16deg) rotateX(8deg) rotateZ(-5deg);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .35),
    -1px 1px 0 var(--edge), -2px 2px 0 var(--edge), -3px 2.5px 0 var(--edge), -3.5px 3.5px 0 var(--edge),
    -4px 7px 8px rgb(0 0 0 / .35);
}
.tile-brand b { font: italic 900 30px/1 "Arial Black", Arial, sans-serif; transform: skewX(-8deg) translateY(-1px); letter-spacing: -.04em; }
.tile-brand img { width: 70%; height: 70%; object-fit: contain; }
.promo-tiles .tile.tile-tv { transform: perspective(110px) rotateY(-16deg) rotateX(8deg) rotateZ(5deg); }
.promo-tiles .tile-tv small { font-size: 4.2px; }
/* its own small size (.promo-art svg would stretch it to the whole art box) */
.promo-tiles .promo-chain { position: relative; z-index: 2; flex: none; overflow: visible; width: 30px; height: 18px; margin: 4px -6px 0; filter: drop-shadow(0 2px 2px rgb(0 0 0 / .45)); }
.promo-tiles { margin: 10px 22px 0 0; } /* clear of the x button */

/* Portfolio > Wallet: USDT and USDC are drawn as 3D coins (smbCoin3d), the same size as before */
.pf-card .coin-3d { width: 40px; height: 40px; border-radius: 0; margin: -4px 0 0 -4px; }

/* ---- Deposit sheet: slides up from the bottom over a dimmed page ---- */
.sheet-lock, .sheet-lock body { overflow: hidden; }
.sheet-backdrop { position: fixed; inset: 0; z-index: 70; background: rgb(0 0 0 / .55); opacity: 0; transition: opacity .3s ease; }
.sheet-backdrop.is-on { opacity: 1; }
.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 71;
  max-width: 640px;
  max-height: 92dvh;
  margin: 0 auto;
  padding: 10px 20px calc(18px + env(safe-area-inset-bottom));
  overflow-y: auto;
  border-radius: 22px 22px 0 0;
  background: var(--card);
  color: var(--text);
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(.2, .8, .2, 1);
}
.sheet.is-on { transform: translateY(0); }
.sheet[hidden], .sheet-backdrop[hidden] { display: none; }
.sheet-handle { display: block; width: 36px; height: 4px; margin: 0 auto 22px; border-radius: 2px; background: var(--line-strong); cursor: grab; touch-action: none; }
.sheet-title { margin: 0 0 18px; font-size: 2rem; font-weight: 700; touch-action: none; }
.sheet-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.sheet-methods { gap: 12px; }
/* the extra methods open by growing their row from 0 to full height, so the sheet rises smoothly */
.sheet-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease, margin .3s ease; }
.sheet-more > * { overflow: hidden; min-height: 0; }
.sheet-more.is-open { grid-template-rows: 1fr; margin-top: 12px; }
.sheet-toggle { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 14px; padding: 12px; border: 0; background: none; color: var(--text); font: inherit; font-size: 1.4rem; font-weight: 700; cursor: pointer; }
.sheet-toggle .icon { transform: rotate(90deg); transition: transform .25s; }
.sheet-toggle[aria-expanded="true"] .icon { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .sheet, .sheet-backdrop, .sheet-more { transition: none; } }
.toast { z-index: 80; } /* above the Deposit sheet */
.sheet { background: color-mix(in srgb, var(--card) 55%, var(--bg)); }
.sheet .pf-method { background: color-mix(in srgb, var(--surface-2) 75%, var(--card)); }

/* ---- Logo spinner: the app's initial in a faint ring with a theme-coloured arc running round ---- */
.brand-spinner { position: relative; display: grid; place-items: center; width: 48px; height: 48px; color: var(--accent); }
.brand-spinner svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: bs-turn 1s linear infinite; }
.bs-track { fill: none; stroke: color-mix(in srgb, var(--accent) 28%, transparent); stroke-width: 3; }
.bs-arc { fill: none; stroke: var(--accent); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 16 84; }
.brand-spinner b { font: italic 900 22px/1 "Arial Black", Arial, sans-serif; transform: skewX(-8deg) translateY(-1px); }
.brand-spinner img { width: 55%; height: 55%; object-fit: contain; }
@keyframes bs-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .brand-spinner svg { animation-duration: 3s; } }

/* Portfolio: tapping EMPAWA dims the page with the spinner before the cashier opens */
.cashier-opening { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgb(0 0 0 / .55); }
.cashier-opening[hidden] { display: none; }
.cashier-opening .brand-spinner { width: 58px; height: 58px; padding: 6px; border-radius: 50%; background: color-mix(in srgb, var(--card) 85%, #000); box-sizing: content-box; }
a.pf-card { text-decoration: none; }

/* ---- Deposit USD: the cashier ---- */
.cashier-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: max(14px, env(safe-area-inset-top)) 16px 4px; }
.cashier-close { justify-self: end; }
.cashier-title { margin: 14px 18px 18px; font-size: 2.1rem; font-weight: 700; }
.cashier-loading { flex: 1; display: grid; place-content: center; justify-items: center; gap: 22px; padding-bottom: 22vh; }
.cashier-loading-text { margin: 0; color: var(--text-2); font-size: 1.35rem; }
.cashier { padding: 0 12px 30px; background: color-mix(in srgb, var(--bg) 60%, #000); }
.cashier-notice { margin: 0 -12px; padding: 14px 0; overflow: hidden; white-space: nowrap; font-weight: 700; font-size: 1.25rem; }
.cashier-notice span { display: inline-block; padding-left: 100%; animation: cashier-ticker 16s linear infinite; }
@keyframes cashier-ticker { to { transform: translateX(-100%); } }
.cashier-tabs { display: flex; gap: 4px; margin: 6px 0 18px; padding: 4px; overflow-x: auto; scrollbar-width: none; border: 1px solid var(--line-strong); border-radius: 10px; }
.cashier-tabs::-webkit-scrollbar { display: none; }
.cashier-tabs button { flex: 1 0 auto; padding: 11px 16px; border: 0; border-radius: 7px; background: none; color: var(--text); font: inherit; font-size: 1.3rem; cursor: pointer; }
.cashier-tabs button[aria-selected="true"] { background: var(--surface-2); }
.cashier-search { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 0 12px; border-bottom: 1.5px solid var(--line-strong); background: color-mix(in srgb, var(--card) 70%, transparent); }
.cashier-search input { flex: 1; min-width: 0; padding: 14px 2px; border: 0; background: none; color: var(--text); font: inherit; font-size: 1.4rem; outline: none; }
.cashier-search svg { flex: none; color: var(--accent); }
.cashier-list { display: grid; }
.cashier-method { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 16px 4px 14px 24px; border: 0; border-bottom: 2px solid var(--line); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.cashier-method[hidden] { display: none; }
.cashier-popular { position: absolute; top: 4px; left: 0; padding: 2px 4px; border-radius: 4px; background: #fff; color: #1b5fd1; font-size: .78rem; font-weight: 700; }
.cashier-logo { display: grid; place-items: center; flex: none; width: 50px; height: 34px; border-radius: 4px; background: color-mix(in srgb, var(--card) 85%, #000); overflow: hidden; }
.cashier-logo .method-badge { width: 28px; height: 28px; }
.cashier-info { display: grid; gap: 3px; min-width: 0; }
.cashier-info strong { font-size: 1.2rem; font-weight: 700; }
.cashier-info em { color: var(--text-2); font-size: 1.05rem; }
.cashier-text { color: var(--text-2); font-size: 1.05rem; line-height: 1.4; }
.cashier-terms { margin-top: 12px; color: var(--muted); font-size: 1rem; }
.cashier-empty { padding: 30px 0; color: var(--muted); text-align: center; }
/* the payment names drawn as simple word marks */
.cm-text { display: inline-flex; align-items: center; gap: 2px; font-family: Arial, sans-serif; font-weight: 800; line-height: .95; text-align: center; }
.cm-astropay { color: #fff; font-size: 9.5px; }
.cm-binance { color: #f3ba2f; font-size: 6px; letter-spacing: .02em; }
.cm-binance i, .cm-bnb i { font-style: normal; font-size: 1.4em; }
.cm-bnb { color: #f3ba2f; font-size: 11px; }
.cm-bitcoin { color: #fff; font-size: 11px; font-style: italic; }
.cm-bitcoin i { display: grid; place-items: center; width: 10px; height: 10px; border-radius: 50%; background: #f7931a; color: #fff; font-size: 8px; font-style: normal; }
.cm-visa { color: #fff; font-size: 17px; font-style: italic; font-weight: 900; letter-spacing: -.02em; }
.cm-icash { color: #fff; font-size: 10px; font-weight: 500; }
.cm-icash small { font-size: 8px; }
.cm-mpesa { padding: 6px 4px; background: #fff; color: #3aa935; font-size: 7.5px; }
.cm-mpesa i { color: #e11b22; font-style: normal; }
.cm-doge { color: #fff; font-size: 5.8px; }
.cm-doge i { display: grid; place-items: center; width: 8px; height: 8px; border-radius: 50%; background: #c2a633; color: #fff; font-size: 6px; font-style: normal; }
.cm-airtel { flex-direction: column; color: #e40000; font-size: 11px; font-weight: 700; }
.cm-airtel small { margin-top: -1px; font-size: 6px; font-weight: 500; }

/* Cashier: methods with several logos show them one after another, fading */
.cashier-logo { position: relative; }
.cashier-logo[data-rotate] .cashier-mark { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .45s ease; }
.cashier-logo[data-rotate] .cashier-mark.is-on { opacity: 1; }
.cashier-countries { display: block; margin-top: 10px; }
.cashier-countries b { color: var(--text); }
.cashier-top { position: fixed; right: max(18px, calc(50% - 300px)); bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 30; display: grid; place-items: center; width: 50px; height: 50px; border: 2px solid var(--text-2); border-radius: 50%; background: color-mix(in srgb, var(--bg) 70%, transparent); color: var(--text); cursor: pointer; }
.cashier-top[hidden] { display: none; }
.cm-empawa { gap: 3px; flex-direction: column; color: #fff; font-size: 6.5px; font-weight: 700; }
.cm-empawa .method-badge { width: 18px; height: 18px; font-size: 6px; }
.cm-mastercard { position: relative; flex-direction: column; gap: 0; color: #fff; font-size: 5.5px; font-weight: 500; }
.cm-mastercard i { position: absolute; top: -12px; width: 15px; height: 15px; border-radius: 50%; }
.cm-mastercard i:nth-child(1) { left: calc(50% - 12px); background: #eb001b; }
.cm-mastercard i:nth-child(2) { left: calc(50% - 3px); background: #f79e1b; mix-blend-mode: screen; }
.cm-mastercard span { margin-top: 10px; }
.cm-equitel { color: #c8102e; font-size: 10px; font-style: italic; }
.cm-vodacom { color: #fff; font-size: 8px; font-weight: 700; }
.cm-vodacom i { width: 10px; height: 10px; border-radius: 50%; background: #e60000; box-shadow: inset 2px -2px 0 2px #fff; }
.cm-mtn { flex-direction: column; justify-content: center; width: 30px; height: 22px; border-radius: 50%; background: #ffcb05; color: #000; font-size: 7px; }
.cm-mtn small { font-size: 3px; font-weight: 600; }
.cm-tigo { flex-direction: column; color: #00a7e1; font-size: 11px; }
.cm-tigo small { margin-top: -2px; color: #fff; font-size: 5px; }
.cm-orange { padding: 10px 3px 3px; background: #ff7900; color: #fff; font-size: 6.5px; }
.cm-eth { color: #aeb4c2; font-size: 6.5px; font-weight: 500; letter-spacing: .08em; }
.cm-eth i { color: #8c95b7; font-size: 13px; font-style: normal; }
.cm-link { color: #fff; font-size: 7px; }
.cm-link i { font-size: 13px; font-style: normal; }
.cm-ltc { color: #345d9d; font-size: 10px; font-style: italic; font-weight: 500; }
.cm-ltc i { display: grid; place-items: center; width: 11px; height: 11px; border-radius: 50%; background: #345d9d; color: #fff; font-size: 7px; font-style: normal; }
.cm-pol { color: #fff; font-size: 7.5px; }
.cm-pol i { color: #8247e5; font-size: 12px; font-style: normal; }
.cm-skrill { color: #fff; font-size: 12px; }
.cm-skrill i { font-size: 7px; font-style: normal; letter-spacing: -2px; margin-right: 2px; }
.cm-sol { color: #fff; font-size: 7px; letter-spacing: .1em; }
.cm-sol i { width: 8px; height: 7px; margin-right: 2px; background: repeating-linear-gradient(180deg, #14f195 0 1.6px, transparent 1.6px 2.8px), linear-gradient(90deg, #9945ff, #14f195); background-blend-mode: multiply; -webkit-mask: repeating-linear-gradient(180deg, #000 0 1.6px, transparent 1.6px 2.8px); mask: repeating-linear-gradient(180deg, #000 0 1.6px, transparent 1.6px 2.8px); }
.cm-trx { color: #fff; font-size: 7.5px; font-weight: 500; letter-spacing: .06em; }
.cm-trx i { font-size: 12px; font-style: normal; }
.cm-usdc { color: #fff; font-size: 6.5px; font-weight: 500; }
.cm-usdc i, .cm-usdt i { display: grid; place-items: center; width: 11px; height: 11px; border-radius: 50%; color: #fff; font-size: 7px; font-style: normal; font-weight: 800; }
.cm-usdc i { background: #2775ca; }
.cm-usdt { color: #9aa1ab; font-size: 9px; font-weight: 500; }
.cm-usdt i { background: #26a17b; }
.cm-xrp { color: #fff; font-size: 17px; font-weight: 300; letter-spacing: .12em; }
.cm-mastercard { padding-top: 14px; } .cm-mastercard i { top: 0; } .cm-mastercard span { margin-top: 1px; }
/* the Popular tag tucks behind the logo box instead of sitting on top of it */
.cashier-popular { z-index: 0; }
.cashier-logo { z-index: 1; }

/* ---- Transfer ---- */
.transfer-form { display: grid; }
.transfer-label { margin: 16px 0 8px; color: var(--text-2); font-size: 1.15rem; font-weight: 600; }
.transfer-pick, .transfer-option { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--card); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.transfer-pick > .icon { margin-left: auto; color: var(--muted); }
.transfer-pick-art { display: grid; place-items: center; flex: none; width: 40px; height: 40px; }
.transfer-pick-art .currency-badge { width: 34px; height: 34px; }
.transfer-pick-text { display: grid; gap: 2px; min-width: 0; }
.transfer-pick-text strong { font-size: 1.35rem; font-weight: 600; }
.transfer-pick-text > span { color: var(--text-2); font-size: 1.15rem; }
.transfer-swap { justify-self: center; display: grid; place-items: center; width: 40px; height: 40px; margin: 10px 0 -6px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface-2); color: var(--text); cursor: pointer; }
.transfer-swap .icon { transform: rotate(90deg); }
.transfer-amount { display: flex; align-items: baseline; gap: 8px; border-bottom: 2px solid var(--line-strong); }
.transfer-amount .amount-input { flex: 1; min-width: 0; border: 0; }
.transfer-amount:focus-within { border-color: var(--text); }
.transfer-currency { color: var(--text-2); font-size: 1.5rem; font-weight: 600; }
.transfer-error { margin: 8px 0 0; color: var(--danger); font-size: 1.1rem; }
.amount-input.has-error { color: var(--danger); }
.transfer-chips { display: flex; gap: 8px; margin-top: 14px; }
.transfer-chips button { padding: 7px 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: none; color: var(--text); font: inherit; font-size: 1.15rem; cursor: pointer; }
.transfer-rate { margin: 16px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); color: var(--text-2); font-size: 1.1rem; }
.transfer-submit { margin-top: 26px; }
.transfer-submit:disabled { opacity: .45; cursor: not-allowed; }
.transfer-submit.is-busy { position: relative; color: transparent; opacity: 1; }
.transfer-submit.is-busy::after { content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border: 2.5px solid rgb(255 255 255 / .35); border-top-color: #fff; border-radius: 50%; animation: bs-turn .8s linear infinite; }
.transfer-options { display: grid; gap: 10px; padding-bottom: 8px; }
.transfer-option[hidden] { display: none; }
.transfer-option.is-on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.transfer-done .payout-button { width: 100%; text-align: center; }
.transfer-again { margin-top: 6px; color: var(--text); font-weight: 600; text-decoration: underline; }
.transfer-amount .amount-input { width: auto; margin: 0; padding: 8px 0; font-size: max(16px, 2.2rem); text-align: left; }
.transfer-done .payout-button { display: block; } .transfer-done a.payout-button { justify-content: center; text-align: center; }

/* Home after the first deposit: total value across wallets and trading accounts, with Deposit */
.home-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -20px -20px 0; padding: 18px 20px 22px; border-radius: 0 0 22px 22px; background: var(--card); }
.home-total p { margin: 0; }
.home-total-label { color: var(--text-2); font-size: 1.2rem; }
.home-total-amount { margin: 8px 0 10px !important; font-size: 2rem; font-weight: 700; }
.home-total-time { color: var(--text-2); font-size: 1.15rem; }
/* under the total: Deposit (a red circle with +) and Transfer (an outlined circle with arrows) */
.home-total { flex-direction: column; align-items: stretch; }
.home-total-actions { display: grid; grid-template-columns: 1fr 1fr; margin-top: 6px; }
.home-total-action { display: grid; justify-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 1.2rem; letter-spacing: .02em; text-decoration: none; cursor: pointer; }
.hta-circle { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; }
.hta-deposit { background: var(--accent); color: var(--accent-text); }
.hta-transfer { box-shadow: inset 0 0 0 1.5px var(--text); color: var(--text); }
.home-total-deposit { flex: none; padding: 12px 22px; border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-text); font: inherit; font-size: 1.45rem; font-weight: 700; letter-spacing: .02em; cursor: pointer; }
.trade-account .trade-account-amount { color: var(--text); font-size: 1.45rem; }
.trade-account-amount small { color: var(--text-2); font-size: .8em; }
/* the amount white, the currency (USD) grey */
.trade-account .trade-account-amount [data-money] { color: var(--text); }
.trade-account .trade-account-amount small { color: var(--muted); }
/* Portfolio > Wallet after the first deposit: the wallets as a plain list */
.pf-wallet-list > div { display: grid; grid-template-columns: 44px 1fr auto; gap: 18px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.pf-wallet-list > div > span { font-size: 1.55rem; }
.pf-wallet-list .currency-badge { width: 40px; height: 40px; }

/* ---- US Dollar wallet ---- */
.wd-top { position: relative; margin: -20px -20px 0; padding: max(14px, env(safe-area-inset-top)) 20px 26px; background: var(--bg); text-align: center; }
.wd-bar { display: flex; justify-content: space-between; }
.wd-flag { display: block; width: 72px; height: 72px; margin: 4px auto 14px; }
.wd-flag .currency-badge { width: 100%; height: 100%; }
.wd-amount { margin: 0; font-size: 1.85rem; font-weight: 700; }
.wd-name { margin: 6px 0 4px; color: var(--text-2); font-size: 1.3rem; }
.wd-top .pf-buttons { justify-content: space-around; }
/* refresh: spinners where the flag and balance are, buttons hidden */
.wd-refreshing { display: none; }
.wd-top.is-refreshing .wd-flag, .wd-top.is-refreshing .wd-amount, .wd-top.is-refreshing .wd-name, .wd-top.is-refreshing .pf-buttons { visibility: hidden; }
.wd-top.is-refreshing .wd-refreshing { position: absolute; left: 0; right: 0; top: 90px; display: grid; justify-items: center; gap: 24px; }
.wd-flag-wait { position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); }
.wd-flag-wait i { position: absolute; inset: 7px; border: 2px solid transparent; border-top-color: var(--accent); border-radius: 50%; animation: bs-turn .9s linear infinite; }
.wd-ring { width: 26px; height: 26px; border: 2.5px solid var(--accent); border-right-color: transparent; border-radius: 50%; animation: bs-turn .9s linear infinite; }

.wd-history { margin: 0 -20px; padding: 26px 20px 30px; min-height: 60vh; background: var(--card); }
.wd-history-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.wd-history-head h2 { margin: 0; font-size: 1.6rem; font-weight: 700; }
.wd-history-head h2 a { color: inherit; }
.wd-refresh { display: grid; place-items: center; width: 36px; height: 36px; border: 0; background: none; color: var(--text); cursor: pointer; }
.wd-refresh.is-spinning svg { animation: bs-turn .8s linear infinite; }
.wd-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.wd-chips button { padding: 8px 18px; border: 1px solid var(--line-strong); border-radius: 999px; background: none; color: var(--text); font: inherit; font-size: 1.2rem; cursor: pointer; }
.wd-chips button[aria-pressed="true"] { border-color: var(--text); background: var(--text); color: var(--bg); }
/* loading: the filters become grey pills */
.wd-history.is-loading .wd-chips button { border-color: transparent; background: var(--skel-2); color: transparent; pointer-events: none; }
.wd-skeleton { display: grid; gap: 4px; }
.sk { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--skel-1), var(--skel-2), var(--skel-1)); background-size: 200% 100%; animation: skeleton 1.4s ease-in-out infinite; }
.sk-day { width: 70px; height: 14px; margin-bottom: 14px; }
.sk-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 18px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.sk-icon { width: 34px; height: 34px; }
.sk-lines { display: grid; gap: 8px; }
.sk-right { justify-items: end; }
.sk-a { width: 90px; height: 16px; } .sk-b { width: 60px; height: 12px; } .sk-c { width: 54px; height: 16px; } .sk-d { width: 36px; height: 12px; }

/* transaction rows (wallet and All transactions) */
.tx-day[hidden], .tx-row[hidden] { display: none; }
.tx-day-label { margin: 0 0 6px; color: var(--text-2); font-size: 1.15rem; }
.tx-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 18px; align-items: center; padding: 14px 0; }
.tx-row + .tx-row { border-top: 1px solid var(--line); }
.tx-icon { fill: none; stroke: var(--text-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tx-main { display: grid; gap: 4px; min-width: 0; }
.tx-main strong { font-size: 1.45rem; font-weight: 500; }
.tx-main span { color: var(--text-2); font-size: 1.15rem; }
.tx-side { display: grid; gap: 4px; justify-items: end; }
.tx-amount { font-size: 1.4rem; white-space: nowrap; }
.tx-amount.is-in { color: #16a34a; }
.tx-status { font-size: 1.15rem; }
.tx-completed { color: #16a34a; } .tx-pending { color: #d4a017; } .tx-failed { color: var(--danger); }
.tx-end { margin: 26px 0 0; color: var(--text-2); font-size: 1.2rem; text-align: center; }
.tx-all { display: block; margin-top: 18px; color: var(--text); font-weight: 600; text-align: center; text-decoration: underline; }
.tx-empty { color: var(--text-2); }
.all-tx { padding: max(14px, env(safe-area-inset-top)) 20px 30px; }
.all-tx h1 { margin: 16px 0 20px; font-size: 2rem; font-weight: 700; }
.all-tx .tx-row { padding: 10px 0; }
.all-tx .tx-main strong, .all-tx .tx-amount { font-size: 1.35rem; }
/* the US Dollar row on Portfolio > Wallet opens the wallet */
.pf-wallet-list > a { display: grid; grid-template-columns: 44px 1fr auto; gap: 18px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--text); }
.pf-wallet-list > a > span { font-size: 1.55rem; }
.wd-skeleton[hidden], .wd-list[hidden] { display: none; }
.wd-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.wd-chips::-webkit-scrollbar { display: none; }
.wd-chips button { flex: none; padding: 8px 15px; }

/* rows are links now */
a.tx-row { color: inherit; text-decoration: none; }
a.tx-row:active { opacity: .7; }

/* ---- One transaction ---- */
.tx-detail { flex: 1; background: var(--card); }
.tx-detail-top { display: grid; justify-items: center; padding: max(14px, env(safe-area-inset-top)) 16px 28px; background: var(--bg); }
.tx-detail-top > .round-icon { justify-self: start; }
.tx-detail-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 14px 0 18px; border-radius: 50%; background: var(--surface-2); }
.tx-detail-amount { margin: 0; font-size: 1.85rem; font-weight: 700; }
.tx-detail-route { margin: 8px 0 0; color: var(--text-2); font-size: 1.2rem; }
.tx-detail-group { display: grid; grid-template-columns: 1fr auto; gap: 18px 12px; margin: 0; padding: 22px 16px; border-bottom: 4px solid var(--line); }
.tx-detail-group dt { color: var(--text-2); font-size: 1.35rem; }
.tx-detail-group dd { margin: 0; font-size: 1.35rem; text-align: right; }
.pf-card-usd { background: radial-gradient(120% 90% at 0% 0%, #d6efc9 0%, #ffffff 60%); text-decoration: none; }
.pf-card-usd .currency-badge { width: 34px; height: 34px; }
.pf-card-usd strong { margin-bottom: -10px; }

/* ---- Choose USDT / USDC network ---- */
.network-page { padding: max(14px, env(safe-area-inset-top)) 18px 30px; }
.network-bar { display: flex; justify-content: space-between; }
.network-amy .icon { color: #c58bff; }
.network-page h1 { margin: 18px 0 20px; font-size: 2rem; font-weight: 700; }
.network-chips { display: flex; gap: 8px; margin-bottom: 18px; }
.network-chips button { padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: none; color: var(--text); font: inherit; font-size: 1.3rem; cursor: pointer; }
.network-chips button[aria-pressed="true"] { border: 2px solid var(--text); }
.network-list { display: grid; gap: 12px; }
.network-card { display: flex; align-items: center; gap: 18px; padding: 22px 18px; border: 0; border-radius: 12px; background: var(--card); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.network-card[hidden] { display: none; }
.network-coin { position: relative; flex: none; width: 42px; height: 42px; }
.network-coin .coin-3d { width: 42px; height: 42px; }
.network-badge { position: absolute; left: -2px; bottom: -2px; width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--card); }
.network-text { display: grid; gap: 4px; }
.network-text strong { font-size: 1.4rem; font-weight: 700; }
.network-text span { color: var(--text-2); font-size: 1.25rem; }
a.pf-card { color: #111; }
.network-loading { display: grid; place-items: center; min-height: 70vh; }
a.pf-method { color: var(--text); text-decoration: none; }

/* ---- Verify your phone number (withdrawal) ---- */
.otp-view { padding: max(14px, env(safe-area-inset-top)) 18px 30px; }
.otp-view h1 { margin: 18px 0 10px; font-size: 2rem; font-weight: 700; }
.otp-lead { margin: 0 0 24px; color: var(--text-2); font-size: 1.3rem; }
.otp-lead strong { color: var(--text); }
.otp-boxes { display: flex; justify-content: center; gap: 12px; }
.otp-boxes input { width: 46px; height: 50px; padding: 0; border: 1px solid var(--line-strong); border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: max(16px, 1.7rem); font-weight: 600; text-align: center; caret-color: var(--text); }
.otp-boxes input:focus { outline: none; border: 1.5px solid var(--text); }
.otp-boxes input.is-wrong { border-color: var(--danger); }
.otp-boxes input.is-right { border-color: #16a34a; }
.otp-error { margin: 12px 0 0; color: var(--danger); font-size: 1.15rem; text-align: center; }
.otp-help { margin: 26px 0 18px; color: var(--text-2); font-size: 1.3rem; text-align: center; }
.otp-button { display: block; width: 100%; padding: 13px; border: 1px solid var(--text); border-radius: 999px; background: none; color: var(--text); font: inherit; font-size: 1.35rem; font-weight: 700; cursor: pointer; }
.otp-button:disabled { border-color: var(--line-strong); color: var(--faint); cursor: default; }
.otp-or { display: flex; align-items: center; gap: 14px; margin: 18px 0; color: var(--text-2); font-size: 1.15rem; }
.otp-or::before, .otp-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* the code "message": a pill that drops in at the top */
.otp-pop { position: fixed; top: max(10px, env(safe-area-inset-top)); left: 50%; z-index: 95; display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: #3a3d44; box-shadow: 0 8px 20px rgb(0 0 0 / .35); transform: translate(-50%, -150%); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.otp-pop.is-on { transform: translate(-50%, 0); }
.otp-pop[hidden] { display: none; }
.otp-pop-code { color: #4ea1ff; font-size: 1.35rem; font-weight: 700; letter-spacing: .12em; text-decoration: underline; text-decoration-color: #4ea1ff; text-underline-offset: 3px; font-family: Arial, sans-serif; }
.otp-pop-more { color: #4ea1ff; }
/* "A new verification code has been sent." */
.otp-toast { position: fixed; top: max(10px, env(safe-area-inset-top)); left: 50%; z-index: 96; display: flex; align-items: center; gap: 12px; width: min(560px, calc(100% - 60px)); padding: 12px 14px; border-radius: 6px; background: #0b8a3b; color: #fff; font-size: 1.2rem; transform: translate(-50%, -160%); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.otp-toast.is-on { transform: translate(-50%, 0); }
.otp-toast[hidden] { display: none; }
.otp-toast span { flex: 1; }
.otp-toast button { display: grid; place-items: center; padding: 2px; border: 0; background: none; color: #fff; cursor: pointer; }
.wd-loading-view { flex: 1; display: flex; flex-direction: column; }
.wd-loading-view[hidden] { display: none; }
.wd-loading-view .cashier-loading { flex: 1; }
/* the code pill grows in from small and shrinks away (instead of sliding) */
.otp-pop { transform: translate(-50%, 0) scale(.2); opacity: 0; transform-origin: 50% 50%; transition: transform .38s cubic-bezier(.2, 1.3, .4, 1), opacity .25s ease; }
.otp-pop.is-on { transform: translate(-50%, 0) scale(1); opacity: 1; }
/* the code message, like the phone's message pill: app icon, app name, copy icon and the code */
.otp-pop { gap: 12px; padding: 7px 16px 7px 7px; background: #36373b; }
.otp-pop-app { flex: none; }
.otp-pop-name { color: #fff; font-size: 1.3rem; font-weight: 600; white-space: nowrap; }
.otp-pop-copy { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: #c9dcf5; cursor: pointer; }
.otp-pop-copy .otp-pop-code { color: #c9dcf5; text-decoration-color: #c9dcf5; letter-spacing: .04em; font-weight: 400; font-size: 1.45rem; }
.otp-pop-more { color: #8b8e94; }
/* withdrawal notices: closable; the help one is light grey-blue */
.no-options-card[data-closable], .help-card { position: relative; padding-right: 40px; }
.notice-close { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.help-card { display: flex; gap: 12px; margin-top: 12px; padding: 14px 40px 14px 14px; border-radius: 6px; background: #e3e8ef; color: #333a45; font-size: 1.1rem; line-height: 1.45; }
.help-card svg { flex: none; color: #5b6574; }
.help-card p { margin: 0; }
.help-card-link { color: var(--accent); font-weight: 600; }
:root[data-theme="dark"] .help-card { background: #2a3039; color: #cfd6e0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .help-card { background: #2a3039; color: #cfd6e0; } }
/* Withdraw USD: the mobile money method's extra advice, and its changing logos */
.method-note { display: block; margin-top: 12px; font-size: .95em; }
.method-option-art .cashier-logo { width: 62px; height: 40px; }
/* mobile money method: the logo box sits at the top left, level with the name, as in the reference */
.method-option:has([data-rotate]) { align-items: start; }
.method-option:has([data-rotate]) .method-option-art { place-items: start; padding-top: 2px; }
.method-option-art .cashier-logo { width: 54px; height: 34px; border-radius: 4px; }
/* the loaders on the withdrawal pages are the logo spinner now (the box keeps the old .bar-loader name) */
/* Portfolio > Overview: "View all transactions" under the trading accounts */
.pf-all-tx { display: flex; align-items: center; justify-content: center; gap: 10px; width: fit-content; margin: 22px auto 10px; padding: 10px 20px; border: 1.5px solid var(--text); border-radius: 999px; color: var(--text); font-size: 1.3rem; font-weight: 700; }

/* ---- Transfer, restyled after the reference ---- */
.transfer-top { padding: max(14px, env(safe-area-inset-top)) 4px 0; }
.transfer-top h1 { margin: 22px 0 6px; font-size: 2rem; font-weight: 700; }
.transfer .bare-body { padding-top: 10px; }
.transfer-form { gap: 0; }
.transfer-pick { position: relative; display: grid; gap: 4px; padding: 14px 54px 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.transfer-pick + .transfer-pick { margin-top: 0; }
.transfer-pick-label { color: var(--text-2); font-size: 1.25rem; }
.transfer-pick-row { display: flex; align-items: center; gap: 14px; min-height: 40px; }
.transfer-pick .transfer-pick-art { width: 36px; height: 36px; }
.transfer-pick .transfer-pick-art:empty { display: none; }
.transfer-pick-text strong { font-size: 1.4rem; font-weight: 700; }
.transfer-pick.is-empty .transfer-pick-text strong { color: var(--faint); font-weight: 400; }
.transfer-pick-down { position: absolute; top: 50%; right: 20px; color: var(--text-2); transform: translateY(-50%); }
.transfer-pick > .icon { display: none; }
.transfer-swap { position: relative; z-index: 1; justify-self: center; width: 40px; height: 40px; margin: -14px 0 -14px; border: 0; border-radius: 50%; background: var(--bg); color: var(--text-2); }
.transfer-swap .icon, .transfer-swap svg { transform: none; }
.transfer-amount { display: flex; align-items: center; gap: 8px; margin-top: 22px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: 10px; }
.transfer-amount:focus-within { border-color: var(--text); }
.transfer-amount.has-error { border-color: var(--danger); }
.transfer-amount .amount-input { padding: 16px 0; font-size: max(16px, 1.4rem); font-weight: 400; }
.transfer-amount .amount-input::placeholder { color: var(--faint); }
.transfer-currency { color: var(--text-2); font-size: 1.3rem; font-weight: 400; }
/* the picker */
.transfer-sheet-title { margin-bottom: 20px; text-align: center; font-size: 1.6rem; }
.transfer-search { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; padding: 0 16px; border: 1px solid var(--line); border-radius: 8px; color: var(--text-2); }
.transfer-search input { flex: 1; min-width: 0; padding: 14px 0; border: 0; background: none; color: var(--text); font: inherit; font-size: max(16px, 1.3rem); outline: none; }
.transfer-group[hidden] { display: none; }
.transfer-group-name { margin: 0 0 10px; color: var(--text-2); font-size: 1.25rem; }
.transfer-group + .transfer-group { margin-top: 20px; }
.transfer-options { gap: 10px; }
.transfer-option { gap: 16px; padding: 14px 18px 14px 20px; border: 1.5px solid transparent; border-radius: 8px; background: var(--surface-2); }
.transfer-option.is-on { border-color: var(--text); box-shadow: none; }
.transfer-option .transfer-pick-art { width: 46px; height: 46px; }
.transfer-option .transfer-pick-text strong { font-weight: 400; }
.transfer-radio { flex: none; margin-left: auto; width: 26px; height: 26px; border: 1.5px solid var(--text-2); border-radius: 50%; }
.transfer-option.is-on .transfer-radio { border: 7px solid var(--text); background: var(--surface-2); }
.transfer-top { padding-left: 16px; padding-right: 16px; }
/* Transfer picker: coin + network badge pictures */
.transfer-option .network-coin { display: block; width: 40px; height: 40px; }
.transfer-option .network-coin > .coin-badge, .transfer-option .network-coin > .method-badge, .transfer-option .network-coin > svg:first-child { width: 40px; height: 40px; }
.transfer-option .network-coin > span.network-badge { position: absolute; left: -2px; bottom: -2px; width: 18px; height: 18px; border-radius: 50%; overflow: hidden; }
.transfer-option .network-coin > span.network-badge .currency-badge { width: 18px; height: 18px; }
/* the picker's title and search stay put; only the list scrolls */
.transfer-sheet:not([hidden]) { display: flex; flex-direction: column; height: 92dvh; overflow: hidden; padding-bottom: 0; }
.transfer-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }

/* ---- Deposit USD > Mobile money (WEZESHA) ---- */
.mm-deposit { padding: 16px 20px 40px; background: color-mix(in srgb, var(--bg) 60%, #000); }
.mm-deposit[hidden] { display: none; }
.mm-back { display: grid; place-items: center; padding: 4px; border: 0; background: none; color: var(--faint); cursor: pointer; }
.mm-methods { display: flex; gap: 6px; margin: 54px -6px 0; overflow-x: auto; scrollbar-width: none; }
.mm-methods::-webkit-scrollbar { display: none; }
.mm-method { flex: none; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 2px solid #3a3d44; border-radius: 50%; background: #121316; color: var(--text-2); overflow: hidden; cursor: pointer; }
.mm-method.is-on { border-color: var(--accent); }
.mm-method .cm-text { transform: scale(.82); }
.mm-method .method-art { width: 34px; }
.mm-method .cm-empawa .method-badge { width: 22px; height: 22px; }
.mm-more { width: 36px; height: 36px; align-self: center; font-size: 1.2rem; letter-spacing: 1px; }
.cm-vodafone { color: #fff; font-size: 7px; }
.cm-vodafone i { width: 9px; height: 9px; border-radius: 50%; background: #e60000; box-shadow: inset 2px -2px 0 1.5px #fff; }
.mm-protect { display: flex; gap: 16px; margin: 62px 0 0; padding: 16px 20px; border-radius: 12px; background: #2a2217; color: #e9e3d8; font-size: 1.2rem; line-height: 1.5; }
.mm-protect svg { flex: none; }
.mm-protect strong { display: block; margin-bottom: 8px; font-size: 1.25rem; }
.mm-protect p { margin: 0 0 6px; }
.mm-logo { display: flex; align-items: center; justify-content: center; gap: 6px; width: 120px; height: 86px; margin: 22px auto 0; border-radius: 2px; background: #fff; color: #111; font-weight: 800; font-size: 1.05rem; flex-direction: column; }
.mm-logo .method-badge { width: 34px; height: 34px; }
.mm-form { display: grid; justify-items: center; }
.mm-label { justify-self: start; margin: 18px 0 0 60px; color: var(--text-2); font-size: 1.05rem; }
.mm-phone { display: flex; align-items: center; gap: 8px; width: min(100%, 300px); margin-top: 6px; border-bottom: 1.5px solid var(--text-2); }
.mm-phone input { flex: 1; min-width: 0; padding: 10px 8px; border: 0; background: none; color: var(--text); font: inherit; font-size: max(16px, 1.3rem); outline: none; }
.mm-phone .currency-badge { width: 18px; height: 18px; border-radius: 2px; }
.mm-amount { display: flex; align-items: center; gap: 12px; margin-top: 40px; }
.mm-currency { padding: 10px 26px 10px 14px; border-bottom: 1.5px solid var(--text-2); font-size: 1.35rem; }
.mm-amount input { width: 110px; padding: 10px; border: 0; border-bottom: 1.5px solid var(--text-2); margin-left: -12px; background: #1e2024; color: var(--text); font: inherit; font-size: max(16px, 1.35rem); outline: none; }
.mm-limits { color: var(--text); font-size: .95rem; line-height: 1.6; }
.mm-limits small { color: var(--faint); font-size: .8rem; margin-right: 4px; }
.mm-error { margin: 12px 0 0; color: var(--danger); font-size: 1.1rem; }
.mm-next { margin-top: 30px; padding: 13px 0; width: 220px; border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-text); font: inherit; font-size: 1.3rem; font-weight: 700; cursor: pointer; }
.cashier-loading[hidden] { display: none; }
/* mobile money deposit: sized like the reference (Next about three quarters down the screen) */
.mm-deposit { padding: 6px 16px 30px; }
.mm-back svg { width: 26px; height: 26px; }
.mm-methods { gap: 4px; margin: 34px -4px 0; justify-content: space-between; }
.mm-method { width: 44px; height: 44px; border-width: 1.5px; }
.mm-method .cashier-logo { width: 44px; height: 44px; background: none; border-radius: 50%; }
.mm-method .cm-text { transform: scale(.7); }
.mm-method .method-art { width: 28px; }
.mm-more { width: 30px; height: 30px; font-size: 1rem; }
.mm-protect { gap: 12px; margin-top: 32px; padding: 12px 16px; border-radius: 10px; font-size: 1rem; line-height: 1.45; }
.mm-protect svg { width: 20px; height: 20px; }
.mm-protect strong { margin-bottom: 6px; font-size: 1.05rem; }
.mm-protect p { margin: 0 0 4px; }
.mm-logo { width: 64px; height: 46px; margin-top: 22px; border-radius: 0; }
.mm-logo .cashier-logo { width: 64px; height: 46px; background: #fff; border-radius: 0; }
.mm-logo .cm-text { transform: scale(.9); }
.mm-logo .cm-vodafone, .mm-logo .cm-empawa { color: #111; }
.mm-label { margin: 14px 0 0 46px; font-size: .85rem; }
.mm-phone { width: min(100%, 215px); margin-top: 4px; border-bottom-width: 1px; }
.mm-phone input { padding: 8px 6px; font-size: max(16px, 1.15rem); }
.mm-phone .currency-badge { width: 14px; height: 14px; }
.mm-amount { gap: 8px; margin-top: 26px; }
.mm-currency { padding: 6px 22px 6px 8px; border-bottom-width: 1px; font-size: 1.15rem; }
.mm-amount input { width: 64px; padding: 6px 8px; margin-left: -8px; border-bottom-width: 1px; font-size: max(16px, 1.15rem); }
.mm-limits { font-size: .78rem; line-height: 1.5; }
.mm-limits small { font-size: .68rem; }
.mm-next { margin-top: 26px; padding: 9px 0; width: 130px; font-size: 1rem; }
/* the cashier's dark panel runs to the bottom of the screen */
.cashier, .mm-deposit { flex: 1; min-height: calc(100dvh - 120px); }
.mm-amount input { width: 84px; }
/* mobile money deposit: everything about 15% bigger */
.mm-back svg { width: 30px; height: 30px; }
.mm-methods { margin-top: 38px; }
.mm-method, .mm-method .cashier-logo { width: 46px; height: 46px; }
.mm-method .cm-text { transform: scale(.8); }
.mm-method .method-art { width: 32px; }
.mm-more { width: 34px; height: 34px; font-size: 1.15rem; }
.mm-protect { gap: 14px; margin-top: 36px; padding: 14px 18px; font-size: 1.15rem; }
.mm-protect svg { width: 23px; height: 23px; }
.mm-protect strong { margin-bottom: 7px; font-size: 1.2rem; }
.mm-logo, .mm-logo .cashier-logo { width: 74px; height: 53px; }
.mm-logo { margin-top: 26px; }
.mm-logo .cm-text { transform: scale(1.03); }
.mm-label { margin: 16px 0 0 40px; font-size: .98rem; }
.mm-phone { width: min(100%, 248px); margin-top: 5px; }
.mm-phone input { padding: 9px 7px; font-size: max(16px, 1.32rem); }
.mm-phone .currency-badge { width: 16px; height: 16px; }
.mm-amount { gap: 9px; margin-top: 30px; }
.mm-currency { padding: 7px 25px 7px 9px; font-size: 1.32rem; }
.mm-amount input { width: 97px; padding: 7px 9px; font-size: max(16px, 1.32rem); }
.mm-limits { font-size: .9rem; }
.mm-limits small { font-size: .78rem; }
.mm-next { margin-top: 30px; padding: 10px 0; width: 150px; font-size: 1.15rem; }
/* the method circles: as big as the row allows, 5px apart */
.mm-methods { gap: 5px; margin-left: -10px; margin-right: -10px; justify-content: flex-start; overflow: visible; }
.mm-method:not(.mm-more) { flex: 1 1 0; width: auto; height: auto; aspect-ratio: 1; min-width: 0; }
.mm-method:not(.mm-more) .cashier-logo { width: 100%; height: 100%; }
.mm-method .cm-text { transform: scale(.88); }
.mm-method .method-art { width: 70%; }
.mm-more { flex: none; width: 40px; height: 40px; }
/* mobile money deposit, second version: logo on its own, provider list, shillings with the USD it makes */
.mm-logo { width: auto; height: 60px; margin-top: 26px; background: none; }
.mm-logo .cashier-logo { width: 150px; height: 60px; background: none; }
.mm-logo .cm-text { transform: scale(2); }
.mm-logo .cm-vodafone, .mm-logo .cm-empawa { color: #fff; }
.mm-select { position: relative; width: min(100%, 272px); margin-top: 6px; border-bottom: 1px solid var(--text-2); background: #1e2024; }
.mm-select select { width: 100%; padding: 10px 40px 10px 10px; border: 0; background: none; color: var(--text); font: inherit; font-size: max(16px, 1.32rem); appearance: none; -webkit-appearance: none; outline: none; }
.mm-select svg { position: absolute; right: 12px; top: 50%; color: var(--text); transform: translateY(-50%); pointer-events: none; }
.mm-label { justify-self: start; margin: 20px 0 0 40px; }
.mm-usd { margin: 32px 0 0; color: var(--text-2); font-size: 1.2rem; }
.mm-usd span { margin-right: 10px; font-size: .95rem; }
.mm-usd b { margin-left: 18px; font-weight: 400; }
.mm-rate { margin: 22px 0 0; color: var(--text-2); font-size: .9rem; }
/* mobile money: logos fit inside their circle / box */
.mm-method .cashier-mark, .mm-logo .cashier-mark { overflow: hidden; }
.mm-method .cm-text { transform: none; max-width: 86%; font-size: 6.5px; }
.mm-method .cm-empawa .method-badge, .mm-method .cm-empawa img { width: 30px; height: 30px; }
.mm-logo .cashier-logo { width: 200px; height: 64px; }
.mm-logo .cm-text { transform: none; font-size: 22px; max-width: 100%; }
.mm-logo .cm-empawa .method-badge, .mm-logo .cm-empawa img { width: 56px; height: 56px; }
.mm-logo .cm-mtn { width: 82px; height: 56px; font-size: 18px; }
.mm-logo .cm-mtn small { font-size: 8px; }
.mm-logo .cm-vodafone i { width: 22px; height: 22px; box-shadow: inset 4px -4px 0 4px #fff; }
.mm-logo .cm-tigo small, .mm-logo .cm-airtel small { font-size: 12px; }
/* required fields */
.mm-form { position: relative; }
.mm-required { position: absolute; z-index: 5; top: -64px; right: -8px; width: min(78%, 250px); padding: 12px 14px; border-top: 4px solid #d6d7da; border-radius: 6px; background: #fff; color: #111; font-size: 1rem; box-shadow: 0 6px 18px rgb(0 0 0 / .4); }
.mm-required[hidden] { display: none; }
.mm-required p { margin: 0 0 6px; }
.mm-required ul { margin: 0; padding-left: 26px; }
.mm-required small { color: #333; font-size: .8em; }
.mm-select.is-invalid, .mm-phone.is-invalid, .mm-amount input.is-invalid { outline: 1.5px solid #e5334b; outline-offset: 0; }
.mm-method .cm-text { font-size: 5.6px; max-width: 80%; }
/* the network logos (images): always inside their box's fixed height, never pushing anything */
.cashier-mark { overflow: hidden; }
.pm-logo { display: block; max-width: 88%; max-height: 80%; width: auto; height: auto; object-fit: contain; }
.cashier-logo .cashier-mark { display: grid; place-items: center; }
.cashier-logo:not([data-rotate]) { display: grid; place-items: center; }
.mm-method .pm-logo { max-width: 74%; max-height: 62%; }
.mm-logo { height: 64px; }
.mm-logo .cashier-logo { width: 200px; height: 64px; }
.mm-logo .pm-logo { max-width: 100%; max-height: 64px; }
/* network logo images: a fixed maximum width as well as height, so wide or tall ones never look bigger */
.cashier-logo .pm-logo { max-width: 40px; max-height: 26px; }
.mm-method .pm-logo { max-width: 32px; max-height: 24px; }
.mm-logo .pm-logo { max-width: 120px; max-height: 56px; }

/* mobile money: Redirecting..., the payment steps page and the PIN prompt */
.mm-deposit.is-redirecting .mm-protect, .mm-deposit.is-redirecting .mm-form { display: none; }
.mm-deposit.is-redirecting .mm-logo { margin-top: 70px; }
.mm-redirecting { order: 1; margin: 34px -10px 0; padding: 16px 14px; border: 1px solid #2a2d33; border-radius: 12px; text-align: center; color: var(--text-2); font-size: 1rem; line-height: 1.6; }
.mm-redirecting[hidden] { display: none; }
.mm-redirecting strong { display: block; color: var(--text); font-size: 1.05rem; font-weight: 600; }
.mm-deposit.is-redirecting { display: flex; flex-direction: column; }
.mm-deposit.is-redirecting .mm-back, .mm-deposit.is-redirecting .mm-methods, .mm-deposit.is-redirecting .mm-logo { order: 0; }
.mm-deposit.is-redirecting .mm-logo { align-self: center; }
.mm-pay { flex: 1; min-height: calc(100dvh - 120px); padding: 18px 16px 40px; background: #fff; color: #333; font-family: Ubuntu, "Segoe UI", Arial, sans-serif; }
.mm-pay[hidden], .mm-pay [hidden] { display: none !important; }
.mm-steps { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; list-style: none; text-align: center; font-size: .82rem; color: #555; }
.mm-steps li span { display: grid; place-items: center; width: 34px; height: 34px; margin: 0 auto 8px; border: 2px solid #6b7480; border-radius: 50%; font-size: .78rem; }
.mm-steps li.is-done { color: #3c9b5c; }
.mm-steps li.is-done span { border-color: #3c9b5c; background: #d9f2df; color: #3c9b5c; }
.mm-steps li.is-now { color: #2f6db5; }
.mm-steps li.is-now span { border-color: #2f6db5; color: #2f6db5; }
.mm-pay-wait { display: grid; place-items: center; min-height: 50vh; }
.mm-pay-spin { display: block; width: 30px; height: 30px; margin: 0 auto; border: 2.5px solid transparent; border-bottom-color: #222; border-left-color: #222; border-radius: 50%; animation: bs-turn .9s linear infinite; }
.mm-pay-spin.is-blue { margin-top: 30px; border-color: transparent; border-right-color: #2f6db5; border-top-color: #2f6db5; }
.mm-pay-card { margin: 70px 14px 0; padding: 50px 14px 40px; border-radius: 4px; box-shadow: 0 4px 14px rgb(0 0 0 / .14); text-align: center; font-size: .95rem; line-height: 1.6; }
.mm-pay-card p { margin: 0; }
.mm-pay-card b { color: #222; }
.mm-pay-note { margin: 18px 0 0; color: #2f6db5; text-align: center; font-size: .95rem; font-weight: 500; }
.mm-pin-backdrop { position: fixed; inset: 0; z-index: 99; display: grid; align-items: center; padding: 0 18px; background: rgb(0 0 0 / .55); }
.mm-pin-backdrop[hidden] { display: none; }
.mm-pin { padding: 22px 22px 8px; border-radius: 22px; background: #2b2c30; color: #f1f1f1; font-family: Roboto, "Segoe UI", Arial, sans-serif; font-size: 1.2rem; line-height: 1.45; }
.mm-pin p { margin: 0 0 18px; }
.mm-pin label { display: block; margin-bottom: 8px; }
.mm-pin input { width: 100%; padding: 8px 4px; border: 0; border-bottom: 2px solid #f1f1f1; background: none; color: #fff; font: inherit; font-size: max(16px, 1.3rem); letter-spacing: .3em; outline: none; caret-color: #4c8dff; }
.mm-pin-actions { display: grid; grid-template-columns: 1fr 1fr; margin-top: 18px; }
.mm-pin-actions button { padding: 16px; border: 0; background: none; color: #f1f1f1; font: inherit; font-size: 1.2rem; font-weight: 600; cursor: pointer; }
.mm-pin-actions button + button { border-left: 1px solid #55575d; }
.mm-deposit.is-redirecting .mm-back { align-self: flex-start; }
/* Redirecting card: narrower and quieter */
.mm-redirecting { margin: 30px 10px 0; padding: 12px 12px; border-radius: 10px; font-size: .88rem; line-height: 1.5; }
.mm-redirecting strong { font-size: .92rem; }
/* the PIN prompt: proportioned like the phone's own dialog (about 83% wide) */
.mm-pin-backdrop { justify-items: center; padding: 0; }
.mm-pin { width: min(84vw, 320px); padding: 18px 18px 4px; border-radius: 18px; font-size: 1rem; }
.mm-pin p { margin-bottom: 14px; }
.mm-pin input { font-size: max(16px, 1.1rem); }
.mm-pin-actions { margin-top: 12px; }
.mm-pin-actions button { padding: 12px; font-size: 1rem; }
/* the result (step 3) */
.mm-steps li.is-failed { color: #e5334b; }
.mm-steps li.is-failed span { border-color: #e5334b; color: #e5334b; }
.mm-pay-result { display: grid; justify-items: center; gap: 8px; margin-top: 50px; text-align: center; }
.mm-pay-result h2 { margin: 10px 0 0; color: #222; font-size: 1.4rem; }
.mm-pay-result p { margin: 0 14px; color: #555; font-size: 1rem; line-height: 1.5; }
.mm-pay-figures { display: grid; grid-template-columns: auto auto; gap: 8px 22px; margin: 16px 0 0; font-size: .98rem; }
.mm-pay-figures dt { color: #777; text-align: left; }
.mm-pay-figures dd { margin: 0; color: #222; font-weight: 600; text-align: right; }
.mm-pay-result .mm-next { display: block; text-align: center; text-decoration: none; }
.mm-pay-retry { border: 0; background: none; color: #2f6db5; font: inherit; font-size: 1rem; text-decoration: underline; cursor: pointer; }
/* "REDIRECTING....." : five dots that appear one after another, then all go and start again */
.mm-dots i { font-style: normal; opacity: 0; animation: 2.2s steps(1) infinite; }
.mm-dots i:nth-child(1) { animation-name: mm-dot1; }
.mm-dots i:nth-child(2) { animation-name: mm-dot2; }
.mm-dots i:nth-child(3) { animation-name: mm-dot3; }
.mm-dots i:nth-child(4) { animation-name: mm-dot4; }
.mm-dots i:nth-child(5) { animation-name: mm-dot5; }
@keyframes mm-dot1 { 0%, 14% { opacity: 0; } 15%, 88% { opacity: 1; } 89%, 100% { opacity: 0; } }
@keyframes mm-dot2 { 0%, 29% { opacity: 0; } 30%, 88% { opacity: 1; } 89%, 100% { opacity: 0; } }
@keyframes mm-dot3 { 0%, 44% { opacity: 0; } 45%, 88% { opacity: 1; } 89%, 100% { opacity: 0; } }
@keyframes mm-dot4 { 0%, 59% { opacity: 0; } 60%, 88% { opacity: 1; } 89%, 100% { opacity: 0; } }
@keyframes mm-dot5 { 0%, 74% { opacity: 0; } 75%, 88% { opacity: 1; } 89%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mm-dots i { animation: none; opacity: 1; } }
/* WEZESHA PIN dialog: text 20% bigger */
.mm-pin { font-size: 1.2rem; }
.mm-pin input { font-size: max(16px, 1.32rem); }
.mm-pin-actions button { font-size: 1.2rem; }

/* Profile (profile.php) and Theme (theme.php): the Deriv-style list */
a.app-profile { display: grid; place-items: center; color: inherit; text-decoration: none; }
.pr-page { padding: 0 20px 28px; }
.pr-top { display: grid; justify-items: center; margin: 0 -20px; padding: 18px 20px 30px; border-radius: 0 0 26px 26px; background: var(--card); }
.pr-bar { display: flex; justify-content: space-between; width: 100%; margin-bottom: 22px; }
.pr-bar .bell-badge { min-width: 24px; height: 20px; padding: 0 6px; font-size: .78rem; top: -8px; right: -10px; }
.pr-avatar { display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%; background: var(--surface-2); color: var(--text); }
.pr-hello { margin: 20px 0 12px; font-size: 1.32rem; font-weight: 700; text-align: center; }
.pr-client { display: inline-flex; align-items: center; gap: 10px; padding: 8px 22px; border: 0; border-radius: 12px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 1.12rem; cursor: pointer; }
.pr-group { margin: 34px 0 12px; font-size: 1.45rem; font-weight: 700; }
.pr-list { list-style: none; margin: 0; padding: 0; }
.pr-list form { margin: 0; }
.pr-row { display: flex; align-items: center; gap: 22px; width: 100%; min-height: 64px; padding: 10px 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.pr-icon { display: grid; place-items: center; width: 34px; flex: none; color: var(--text-2); }
.pr-text { flex: 1; display: grid; gap: 4px; min-height: 44px; align-content: center; padding-right: 8px; font-size: 1.15rem; }
.pr-list li { position: relative; }
.pr-list li::after { content: ""; position: absolute; left: 56px; right: 0; bottom: 0; border-bottom: 1px solid var(--line); }
.pr-text small { color: var(--muted); font-size: .98rem; }
.pr-text small.is-ok { color: #4bb462; }
.pr-text small.is-bad { color: var(--danger); }
.pr-row > svg:last-child { flex: none; color: var(--text-2); }
.pr-row .pr-ext { color: var(--faint); }
.pr-list-end { margin-top: 28px; }
.pr-logout, .pr-logout .pr-icon { color: var(--danger); }
.pr-logout > svg:last-child { color: var(--text-2); }
.pr-version { margin: 36px 0 0; text-align: center; color: var(--muted); font-size: 1.02rem; }
.pr-details dl { display: grid; grid-template-columns: auto 1fr; gap: 14px 18px; margin: 0 0 24px; }
.pr-details dt { color: var(--muted); }
.pr-details dd { margin: 0; text-align: right; word-break: break-word; }
.pr-details-close { display: flex; justify-content: center; width: 100%; }
.th-bar { padding-top: 18px; }
.th-title { margin: 18px 0 0; font-size: 1.9rem; font-weight: 700; }
.th-list { margin: 0; }
.th-row { position: relative; display: flex; align-items: center; gap: 22px; width: 100%; min-height: 68px; padding: 12px 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.th-row + .th-row::before { content: ""; position: absolute; left: 56px; right: 0; top: 0; border-top: 1px solid var(--line); }
.th-row .theme-swatch, .th-dot { width: 26px; height: 26px; margin: 0 4px; flex: none; }
.th-dot { border-radius: 50%; background: var(--swatch); }
.th-dot-custom { background: conic-gradient(#ec5c4d, #f08a24, #13a538, #0f9488, #1f4fd1, #7b3fe4, #d6336c, #ec5c4d); }
.th-radio { width: 22px; height: 22px; flex: none; border: 2px solid var(--line-strong); border-radius: 50%; }
.th-row[aria-pressed="true"] .th-radio { border: 7px solid var(--accent); }
.th-picker { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* Landing (signed out, includes/landing.php): always dark, faint grid, three slides with moving pictures */
.lp { position: relative; display: flex; flex-direction: column; min-height: 100dvh; padding: 18px 20px calc(18px + env(safe-area-inset-bottom)); color: #fff; overflow: hidden;
  background: radial-gradient(60% 40% at 50% 55%, #1d2027 0%, transparent 70%),
    linear-gradient(rgb(255 255 255 / .035) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgb(255 255 255 / .035) 1px, transparent 1px) 0 0 / 22px 22px, #101218; }
body:has(.lp) { background: #101218; }
.lp-top { display: flex; align-items: center; justify-content: space-between; height: 44px; }
.lp-name { display: inline-flex; align-items: center; gap: 8px; font-size: 1.9rem; font-weight: 700; font-style: italic; letter-spacing: -.02em; }
.lp-name img { width: 34px; height: 34px; border-radius: 9px; object-fit: contain; font-style: normal; }
.lp-globe { display: grid; place-items: center; border: 0; background: none; color: #fff; cursor: pointer; padding: 4px; }
.lp-bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 20px 0 22px; }
.lp-bar { height: 3px; border-radius: 2px; background: rgb(255 255 255 / .22); overflow: hidden; }
.lp-bar i { display: block; height: 100%; width: 0; background: #fff; }
.lp-bar.is-done i { width: 100%; }
.lp-bar.is-filling i { width: 100%; transition: width 5s linear; }
.lp-slides { position: relative; flex: 1; display: grid; touch-action: pan-y; user-select: none; }
.lp-slide { grid-area: 1 / 1; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility .45s; }
.lp-slide.is-on { opacity: 1; visibility: visible; }
.lp-title { margin: 0; text-align: center; font-size: clamp(1.7rem, 7.6vw, 2.1rem); line-height: 1.22; font-weight: 700; letter-spacing: -.01em; }
.lp-art { position: relative; flex: 1; display: grid; place-items: center; min-height: 380px; }
.lp-actions { display: grid; gap: 10px; margin-top: 12px; }
.lp-create, .lp-login { display: grid; place-items: center; height: 50px; border-radius: 999px; font: inherit; font-size: 1.12rem; font-weight: 700; letter-spacing: .02em; text-decoration: none; cursor: pointer; }
.lp-create { border: 0; background: var(--accent); color: #fff; }
.lp-login { border: 1.5px solid #fff; color: #fff; }
.lp-toast { position: fixed; left: 50%; bottom: 140px; z-index: 5; transform: translateX(-50%); width: max-content; max-width: calc(100% - 40px); margin: 0; padding: 10px 16px; border-radius: 10px; background: #fff; color: #101218; font-size: .95rem; }
.lp-toast[hidden] { display: none; }

/* 1: the app's letter, silver, with thin rings turning round it */
.lp-ring { position: absolute; width: min(86vw, 340px); aspect-ratio: 1; animation: lp-turn 9s linear infinite; }
.lp-ring-2 { width: min(96vw, 380px); animation-duration: 14s; animation-direction: reverse; opacity: .7; }
.lp-letter { font-size: 170px; line-height: 1; font-weight: 700; font-style: italic; letter-spacing: -.05em; transform: skewX(-6deg);
  background: linear-gradient(160deg, #f4f5f7 10%, #a7abb3 50%, #6c7079 90%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 14px 30px rgb(0 0 0 / .6)); animation: lp-breathe 4s ease-in-out infinite; }
@keyframes lp-turn { to { transform: rotate(360deg); } }
@keyframes lp-breathe { 50% { transform: skewX(-6deg) scale(1.05); } }

/* 2: coins and the wallet floating up and down, each in its own time */
.lp-wallet .lp-art { display: block; }
.lp-float { position: absolute; left: 50%; display: block; animation: lp-bob 3.6s ease-in-out infinite; }
.lp-float svg { display: block; filter: drop-shadow(0 12px 22px rgb(0 0 0 / .55)); }
.lp-f1 { top: 4%; margin-left: -48px; animation-delay: -.4s; }
.lp-f2 { top: 17%; margin-left: -70px; animation-delay: -1.3s; z-index: 2; }
.lp-f3 { top: 40%; margin-left: -128px; animation-delay: -2.1s; z-index: 1; }
.lp-f4 { top: 70%; margin-left: -62px; animation-delay: -2.9s; z-index: 2; }
.lp-f4 svg { filter: drop-shadow(0 12px 22px rgb(0 0 0 / .55)) sepia(.5) saturate(2.4) hue-rotate(-30deg) brightness(1.05); }
@keyframes lp-bob { 50% { transform: translateY(-14px) rotate(-3deg); } }

/* 3: a white band across, two coins on it turning, and the swap button between them */
.lp-ribbon { position: absolute; left: -30%; right: -30%; top: 50%; height: 170px; margin-top: -85px; background: #fff; transform: rotate(-28deg) scaleX(0); transform-origin: left center; }
.lp-swap.is-on .lp-ribbon { animation: lp-ribbon .9s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes lp-ribbon { to { transform: rotate(-28deg) scaleX(1); } }
.lp-swap-coin { position: absolute; top: 50%; animation: lp-spin 4s ease-in-out infinite; }
.lp-swap-coin svg { display: block; filter: drop-shadow(0 10px 18px rgb(0 0 0 / .5)); }
.lp-c1 { left: -12px; margin-top: -40px; }
.lp-c2 { right: -16px; margin-top: -150px; animation-delay: -2s; }
@keyframes lp-spin { 0%, 100% { transform: perspective(500px) rotateY(28deg) rotate(-6deg); } 50% { transform: perspective(500px) rotateY(-14deg) rotate(4deg) translateY(-8px); } }
.lp-swap-btn { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 74px; height: 74px; margin: -42px 0 0 -37px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 60%, #fff), var(--accent) 70%); box-shadow: 0 0 60px color-mix(in srgb, var(--accent) 45%, transparent); animation: lp-flip 2.4s ease-in-out infinite; z-index: 1; }
@keyframes lp-flip { 0%, 40% { transform: rotate(0); } 60%, 100% { transform: rotate(180deg); } }
@media (prefers-reduced-motion: reduce) { .lp *, .lp *::before { animation: none !important; } .lp-swap .lp-ribbon { transform: rotate(-28deg); } }
/* Landing: sizes in px (like the reference), the band behind the coins only, coins apart with the swap between */
.lp-title { font-size: 31px; }
.lp-name { font-size: 30px; }
.lp-create, .lp-login { height: 52px; font-size: 17px; }
.lp-bar.is-done i { transition: none; }
.lp-swap .lp-art { margin: 0 -20px; overflow: hidden; }
.lp-ribbon { left: -20%; right: -20%; height: 150px; margin-top: -75px; transform: rotate(-36deg) scaleX(0); }
@keyframes lp-ribbon { to { transform: rotate(-36deg) scaleX(1); } }
.lp-c1 { left: 6px; margin-top: -42px; }
.lp-c1 svg { width: 124px; height: 124px; }
.lp-c2 { right: 6px; margin-top: -122px; }
.lp-c2 svg { width: 140px; height: 140px; }
.lp-swap-btn { width: 66px; height: 66px; margin: -48px 0 0 -33px; }
.lp-swap-btn svg { width: 38px; height: 38px; }
@media (prefers-reduced-motion: reduce) { .lp-swap .lp-ribbon { transform: rotate(-36deg); } }
.lp-c1 { margin-top: -47px; }
.lp-c2 { margin-top: -95px; }
.lp-swap-btn { margin-top: -33px; }
.lp-ribbon { transform-origin: center; }

/* Hide phone & email (Profile > Preferences): a blurry patch over each phone number and email */
.pv-blur { display: inline-block; filter: blur(4px); background: color-mix(in srgb, var(--muted) 30%, transparent); border-radius: 4px; padding: 0 1px; user-select: none; }
/* phone and email boxes: while not being typed in, their text is hidden and a copy with the middle blurred sits on top */
html[data-privacy] input.pv-masked:not(:focus) { color: transparent !important; }
.pv-overlay { position: absolute; display: flex; align-items: center; overflow: hidden; white-space: pre; pointer-events: none; }
.pv-overlay[hidden] { display: none; }
html[data-privacy] #mm-pin-input { filter: blur(5px); } /* the WEZESHA PIN box */
.pr-switch { position: relative; flex: none; width: 46px; height: 28px; border-radius: 14px; background: var(--line-strong); transition: background .2s; }
.pr-switch i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: transform .2s; }
.pr-row[aria-checked="true"] .pr-switch { background: var(--accent); }
.pr-row[aria-checked="true"] .pr-switch i { transform: translateX(18px); }
svg[hidden] { display: none; }

/* Ask Amy, as in the reference: no border, a soft blue > purple > warm glow behind, the name in a colour fade */
.ask-pill { gap: 7px; padding: 9px 18px; border: 0;
  background: linear-gradient(90deg, #1b2838 0%, #19213a 25%, #1f1b36 50%, #2a1f2a 72%, #2b2a24 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .04); }
.ask-pill > span { background: linear-gradient(90deg, #b3ddf5 0%, #c9c6f3 38%, #fab5e1 62%, #ffe9a8 86%, #ffffc6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.ask-spark { flex: none; }
:root[data-theme="light"] .ask-pill { background: linear-gradient(90deg, #e4f0fb 0%, #e9e8fb 30%, #f3e6f6 58%, #fbf1e1 82%, #fbf6df 100%); box-shadow: none; }
:root[data-theme="light"] .ask-pill > span { background-image: linear-gradient(90deg, #3b8fd0 0%, #6f6ad8 38%, #d0559f 64%, #c98a1c 100%); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .ask-pill { background: linear-gradient(90deg, #e4f0fb 0%, #e9e8fb 30%, #f3e6f6 58%, #fbf1e1 82%, #fbf6df 100%); box-shadow: none; }
  :root:not([data-theme]) .ask-pill > span { background-image: linear-gradient(90deg, #3b8fd0 0%, #6f6ad8 38%, #d0559f 64%, #c98a1c 100%); }
}
:root[data-theme="light"] .ask-spark path[fill="#ffd84d"] { fill: #e3a500; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .ask-spark path[fill="#ffd84d"] { fill: #e3a500; } }



a.cfd-mine-card { text-decoration: none; }

/* A live balance that just changed (includes/footer.php): a short glow */
.money.is-updated { animation: live-update 1.2s ease; border-radius: 4px; }
@keyframes live-update { 0% { background: color-mix(in srgb, var(--accent) 35%, transparent); } 100% { background: transparent; } }

/* One MT5 account (mtaccount.php): the big tilted tile, Transfer / Trade / Details, transactions, the sheets */
.mta-top { padding-bottom: 30px; }
.mta-tile { display: grid; place-items: center; margin: 6px 0 22px; }
.mta-tile .tile { width: 104px; height: 104px; border-radius: 18px; padding-bottom: 26px; }
.mta-tile .tile b { font-size: 30px; font-style: italic; }
.mta-tile .tile small { height: 26px; font-size: 15px; font-style: italic; border-radius: 0 0 18px 18px; }
.mta-history { margin: 0 -20px; padding: 22px 20px 24px; background: var(--card); min-height: 50vh; }
.mta-history h2 { margin: 0 0 14px; font-size: 1.6rem; }
.mta-sheet h2 { margin: 0 0 14px; text-align: center; font-size: 1.75rem; }
.mta-sheet > p { margin: 0 0 22px; text-align: center; color: var(--text-2); font-size: 1.4rem; line-height: 1.45; }
.mta-go { display: grid; place-items: center; height: 52px; margin-bottom: 10px; border: 1.5px solid var(--text); border-radius: 999px; color: var(--text); font-size: 1.45rem; font-weight: 700; text-decoration: none; }
.mta-go.is-primary { border-color: var(--accent); background: var(--accent); color: #fff; }
.mta-detail { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; }
.mta-detail span { display: grid; gap: 4px; }
.mta-detail small { color: var(--muted); font-size: 1.2rem; }
.mta-detail b { font-size: 1.5rem; font-weight: 500; }
.mta-copy { display: grid; place-items: center; width: 46px; height: 46px; border: 1.5px solid var(--text); border-radius: 50%; background: none; color: var(--text); cursor: pointer; }
.mta-forgot { display: block; margin: 10px 0 4px auto; border: 0; background: none; color: var(--text); font: inherit; font-size: 1.35rem; text-decoration: underline; cursor: pointer; }
.mta-top [data-mta-open="details"] svg { transform: rotate(90deg); }

/* Options trade screen (trade.php), like the Deriv Trader screen */
.dt { display: flex; flex-direction: column; min-height: 100dvh; padding-bottom: calc(64px + env(safe-area-inset-bottom)); background: var(--bg); }
.dt-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.dt-logo .tile { width: 40px; height: 40px; }
.dt-account { flex: 1; display: grid; }
.dt-account-name { display: inline-flex; align-items: center; gap: 4px; justify-self: start; padding: 0; border: 0; background: none; color: #2aa8a0; font: inherit; font-size: 1.5rem; font-weight: 600; cursor: pointer; }
.dt-account-name .icon { transform: rotate(90deg); }
.dt-account strong { font-size: 1.6rem; }
.dt-deposit { padding: 9px 18px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; font-size: 1.4rem; text-decoration: none; }
.dt-pick-row { display: flex; gap: 10px; padding: 12px 16px 0; }
.dt-plus { display: grid; place-items: center; width: 64px; height: 64px; flex: none; border: 0; border-radius: 10px; background: var(--card); color: var(--text); cursor: pointer; }
.dt-chip { display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border: 0; border-radius: 10px; background: var(--card); color: var(--text); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.dt-chip strong { display: block; font-size: 1.5rem; }
.dt-chip small { color: var(--muted); font-size: 1.25rem; }
.dt-micon { position: relative; display: grid; width: 34px; }
.dt-micon b { justify-self: start; padding: 0 3px; border-radius: 2px; background: var(--surface-2); font-size: 8px; line-height: 11px; }
.dt-micon i { position: absolute; top: -1px; left: 18px; width: 11px; height: 11px; border-radius: 50%; background: #e5334b; color: #fff; font-size: 5.5px; font-style: normal; font-weight: 700; line-height: 11px; text-align: center; }
.dt-micon svg { width: 30px; height: 18px; }
.dt-chart-wrap { position: relative; flex: 1; min-height: 320px; padding: 6px 0 0; }
.dt-chart { display: block; width: 100%; height: 100%; min-height: 320px; }
.dt-ticklabel { position: absolute; left: 30px; bottom: 54px; padding: 1px 4px; border-radius: 3px; background: var(--surface-2); font-size: 1.05rem; }
.dt-dots { position: absolute; left: 16px; bottom: 16px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--card); color: var(--text); }
.dt-stats { display: flex; align-items: center; gap: 14px; padding: 6px 16px 10px; font-size: 1.35rem; overflow-x: auto; white-space: nowrap; }
.dt-stats[hidden] { display: none; }
.dt-stats-label { text-decoration: underline dashed; text-underline-offset: 3px; }
.dt-stats-list { display: flex; gap: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dt-stats-list .is-now { color: var(--text); font-weight: 700; }
.dt-panel { display: grid; gap: 12px; padding: 12px 12px 14px; border-radius: 16px 16px 0 0; background: var(--card); }
.dt-boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dt-boxes[hidden], .dt-buttons[hidden], .dt-contract[hidden] { display: none; }
.dt-box { display: grid; justify-items: center; gap: 4px; padding: 12px 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--text); font: inherit; cursor: pointer; }
.dt-box span { color: var(--muted); font-size: 1.3rem; }
.dt-box b { font-size: 1.65rem; font-weight: 500; }
.dt-buttons { display: grid; gap: 10px; }
.dt-buttons.is-two { grid-template-columns: 1fr 1fr; }
.dt-buy { height: 60px; border: 0; border-radius: 999px; color: #fff; font: inherit; font-size: 1.8rem; font-weight: 700; cursor: pointer; }
.dt-buy.is-buy { background: #00c390; }
.dt-buy.is-sell { background: #e5334b; }
.dt-buy:disabled { opacity: .6; }
.dt-sell { width: 100%; background: #ff444f; }
.dt-contract { display: grid; gap: 10px; }
.dt-contract-top { display: flex; justify-content: space-between; color: var(--muted); font-size: 1.3rem; }
.dt-contract-top span:first-child { text-transform: capitalize; }
.dt-contract-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dt-contract-nums div { display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border-radius: 10px; background: var(--bg); }
.dt-contract-nums small { color: var(--muted); font-size: 1.15rem; }
.dt-contract-nums b { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.dt .is-up { color: #00c390; }
.dt .is-down { color: #e5334b; }
.dt-wait { margin: 0; text-align: center; color: var(--muted); font-size: 1.3rem; }
.dt-error { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--error-bg); color: var(--error-text); font-size: 1.3rem; }
.dt-error[hidden] { display: none; }
.dt .is-away { display: none !important; }
.dt-positions { padding: 12px 16px; }
.dt-positions[hidden] { display: none; }
.dt-pos-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.dt-pos-tabs button { padding: 12px 0; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font: inherit; font-size: 1.45rem; font-weight: 600; cursor: pointer; }
.dt-pos-tabs button[aria-pressed="true"] { color: var(--text); border-bottom-color: var(--accent); }
.dt-pos { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.dt-pos div { display: grid; gap: 2px; }
.dt-pos small { color: var(--muted); font-size: 1.2rem; text-transform: capitalize; }
.dt-pos strong { font-size: 1.45rem; }
.dt-pos-right { justify-items: end; }
.dt-pos-right b { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.dt-pos-right button { margin-top: 4px; padding: 5px 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: none; color: var(--text); font: inherit; font-size: 1.2rem; cursor: pointer; }
.dt-empty { padding: 30px 0; text-align: center; color: var(--muted); font-size: 1.35rem; }
.dt-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(3, 1fr); max-width: 640px; margin: 0 auto; padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg); }
.dt-nav a, .dt-nav button { display: grid; justify-items: center; gap: 4px; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 1.3rem; text-decoration: none; cursor: pointer; }
.dt-nav .is-on { color: var(--accent); }
.dt-sheet h2 { margin: 0 0 14px; font-size: 1.7rem; text-align: center; }
.dt-list { display: grid; gap: 8px; max-height: 55dvh; overflow-y: auto; }
.dt-list button { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.dt-list button span { font-size: 1.45rem; font-weight: 600; }
.dt-list button small { color: var(--muted); font-size: 1.2rem; }
.dt-list button.is-on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.dt-amount { display: grid; grid-template-columns: 48px 1fr 48px auto; align-items: center; gap: 8px; margin-bottom: 12px; }
.dt-amount button { height: 48px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--text); font: inherit; font-size: 2rem; cursor: pointer; }
.dt-amount input { height: 48px; min-width: 0; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg); color: var(--text); font: inherit; font-size: 1.8rem; text-align: center; }
.dt-amount span { color: var(--muted); }
.dt-ok, .dt-clear { width: 100%; height: 50px; border: 0; border-radius: 999px; font: inherit; font-size: 1.5rem; font-weight: 700; cursor: pointer; }
.dt-ok { background: var(--accent); color: #fff; }
.dt-clear { margin-bottom: 8px; background: var(--surface-2); color: var(--text); }
.dt-toast { bottom: calc(80px + env(safe-area-inset-bottom)); }
a.market-card, a.trade-type, a.featured-trade { color: inherit; text-decoration: none; } a.featured-trade { color: var(--text); }

/* trade.php: Up / Down toggle, the buy pop-up, P/L chip, Positions badge, Open / Closed / Reports */
.dt-boxes { display: grid; grid-template-columns: none; gap: 8px; }
.dt-boxes-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dt-toggle { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 14px; background: var(--bg); }
.dt-toggle button { height: 46px; border: 0; border-radius: 11px; background: none; color: var(--text-2); font: inherit; font-size: 1.6rem; cursor: pointer; }
.dt-toggle button[aria-pressed="true"] { background: var(--surface-2); }
.dt-toggle button.is-up[aria-pressed="true"] { color: #00c390; }
.dt-toggle button.is-down[aria-pressed="true"] { color: #e5334b; }
.dt-buttons { grid-template-columns: none !important; }
.dt-pop { position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 50%; z-index: 90; display: flex; align-items: center; gap: 14px; width: min(94vw, 600px); padding: 14px 18px; border-radius: 16px; background: #fff; color: #111; box-shadow: 0 12px 34px rgb(0 0 0 / .35); transform: translate(-50%, -140%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.dt-pop.is-on { transform: translate(-50%, 0); }
.dt-pop[hidden] { display: none; }
.dt-pop-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; background: #dff4fb; color: #1f9ec7; }
.dt-pop span:last-child { display: grid; gap: 2px; }
.dt-pop b { font-size: 1.6rem; font-weight: 600; }
.dt-pop small { color: #5b6170; font-size: 1.35rem; }
.dt-pl { position: absolute; top: 14px; right: 84px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border: 0; border-radius: 999px; background: var(--card); color: var(--text); font: inherit; font-size: 1.35rem; cursor: pointer; }
.dt-pl[hidden] { display: none; }
.dt-pl span { display: grid; place-items: center; min-width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); font-weight: 600; }
.dt-pl .icon { transform: rotate(90deg); }
.dt-nav-icon { position: relative; display: grid; }
.dt-badge { position: absolute; top: -8px; right: -12px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #e5334b; color: #fff; font-size: 1.1rem; font-style: normal; font-weight: 700; }
.dt-badge[hidden] { display: none; }
.dt-pos-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 0 0 12px; padding: 5px; border: 0; border-radius: 999px; background: var(--card); }
.dt-pos-tabs button { padding: 10px 0; border: 0; border-radius: 999px; }
.dt-pos-tabs button[aria-pressed="true"] { background: var(--surface-2); color: var(--text); border-bottom: 0; }
.dt-pos-filters { display: flex; gap: 8px; margin-bottom: 12px; }
.dt-filter { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: none; color: var(--text); font: inherit; font-size: 1.35rem; cursor: pointer; }
.dt-filter-wide { flex: 1; justify-content: space-between; border-radius: 10px; }
.dt-total { display: flex; justify-content: space-between; margin: 4px 0 12px; font-size: 1.45rem; }
.dt-day { margin: 18px 0 10px; font-size: 1.45rem; font-weight: 500; color: var(--text-2); }
.dt-card { display: grid; gap: 6px; margin-bottom: 10px; padding: 14px 16px; border-radius: 12px; background: var(--card); }
.dt-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.dt-card-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.dt-card-row strong { font-size: 1.5rem; font-weight: 500; }
.dt-card-row span { color: var(--muted); font-size: 1.4rem; }
.dt-card-row small { color: var(--muted); font-size: 1.4rem; }
.dt-card-row b { font-size: 1.45rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.dt-badge-soft { padding: 4px 10px; border-radius: 6px; background: var(--surface-2); color: var(--text-2); font-size: 1.3rem; }
.dt-card-sell { padding: 6px 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: none; color: var(--text); font: inherit; font-size: 1.25rem; cursor: pointer; }
.dt-report { margin-bottom: 10px; padding: 14px 16px; border-radius: 12px; background: var(--card); }
.dt-report-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dt-report-top svg { width: 28px; height: 28px; }
.dt-tag { padding: 3px 10px; border-radius: 6px; background: var(--surface-2); font-weight: 700; font-size: 1.4rem; }
.dt-report dl { display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; margin: 0; }
.dt-report dt { font-weight: 600; font-size: 1.4rem; }
.dt-report dd { margin: 2px 0 0; color: var(--muted); font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.dt-report .r { text-align: right; }
.dt-report-total { display: flex; justify-content: space-between; margin-top: 12px; font-size: 1.5rem; }
.dt-box span { white-space: nowrap; font-size: 1.2rem; }

/* No scrollbars anywhere in the app (it still scrolls, like a phone app) */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }