/*
 * Profile page (/profile) — redesign on top of the Vite build.
 * Pairs with the kx3 bundle, which renders the .kx-* markup below. Uses the
 * build's theme variables, so the light and dark themes both follow.
 */

/* The build hides horizontal overflow on these two, which also makes them
   scroll containers and stops the tab bar from sticking. `clip` hides the
   overflow the same way without that side effect. */
body, #root { overflow-x: clip; overflow-y: visible; }

/* ---------------------------------------------------------------- hero -- */
.kx-hero {
  position: relative;
  overflow: hidden;
  padding: 1.25rem;
  border-radius: 24px;
  border: 1px solid var(--card-border);
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--gold) 13%, transparent) 0%, transparent 55%),
    radial-gradient(90% 120% at 0% 100%, color-mix(in srgb, var(--gold) 16%, transparent) 0%, transparent 60%),
    linear-gradient(160deg, var(--surface-start), var(--surface-end));
  box-shadow: 0 22px 50px -32px rgba(6, 8, 12, 0.65);
}
.kx-hero::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.55;
}
.kx-hero-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; }
.kx-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  font-size: 1.65rem;
  font-weight: 900;
  color: var(--kx-ink-on-gold, #1a1306);
  background: var(--btn-gold);
  box-shadow: 0 12px 26px -14px var(--gold-deep), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.kx-hero-id { flex: 1; min-width: 0; }
.kx-hero-eyebrow { font-size: 0.72rem; color: var(--text-muted); }
.kx-hero-name {
  margin: 0.1rem 0 0.35rem;
  overflow: hidden;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kx-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.kx-hero-meta span { display: inline-flex; align-items: center; gap: 0.35rem; }
.kx-hero-meta svg { color: var(--gold); }

.kx-verify {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.kx-verify:hover { filter: brightness(1.08); }
.kx-verify:active { transform: scale(0.97); }
.kx-verify-verified {
  color: var(--mint);
  border-color: color-mix(in srgb, var(--mint) 40%, transparent);
  background: color-mix(in srgb, var(--mint) 12%, transparent);
}
.kx-verify-pending {
  color: var(--amber);
  border-color: color-mix(in srgb, var(--amber) 45%, transparent);
  background: color-mix(in srgb, var(--amber) 12%, transparent);
}
.kx-verify-none,
.kx-verify-rejected {
  color: var(--rose);
  border-color: color-mix(in srgb, var(--rose) 45%, transparent);
  background: color-mix(in srgb, var(--rose) 10%, transparent);
}

.kx-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 1.1rem;
}
.kx-stat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 0.55rem;
  row-gap: 0.1rem;
  padding: 0.75rem 0.8rem;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  color: inherit;
  text-align: start;
  background: color-mix(in srgb, var(--bg-primary) 38%, transparent);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.kx-stat:hover { border-color: var(--gold-line); transform: translateY(-1px); }
.kx-stat:focus-visible, .kx-verify:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.kx-stat-icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
}
.kx-stat-label { font-size: 0.72rem; color: var(--text-muted); }
.kx-stat-value {
  overflow: hidden;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kx-stat-value small { margin-inline-start: 0.15rem; font-size: 0.7rem; font-weight: 600; color: var(--text-secondary); }
.kx-stat-mint .kx-stat-icon { color: var(--mint); background: color-mix(in srgb, var(--mint) 14%, transparent); }
.kx-stat-gold .kx-stat-icon { color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, transparent); }
.kx-stat-royal .kx-stat-icon { color: var(--royal); background: color-mix(in srgb, var(--royal) 16%, transparent); }
.kx-stat-amber .kx-stat-icon { color: var(--amber); background: color-mix(in srgb, var(--amber) 16%, transparent); }

@media (max-width: 639.98px) {
  .kx-hero { padding: 1rem; border-radius: 22px; }
  .kx-verify { width: 100%; }
  /* Two figures side by side leave no room for an icon beside a nine-digit
     Toman balance: the icon goes on top, and the unit may wrap under the number. */
  .kx-stat { grid-template-columns: minmax(0, 1fr); row-gap: 0.25rem; padding: 0.7rem; }
  .kx-stat-icon { grid-row: auto; width: 30px; height: 30px; border-radius: 10px; }
  .kx-stat-value { overflow: visible; font-size: 0.98rem; white-space: normal; line-height: 1.35; }
  .kx-stat-value small { display: inline-block; }
}
@media (min-width: 768px) {
  .kx-hero { padding: 1.5rem; }
  .kx-hero-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- tabs -- */
.kx-tabs {
  position: sticky;
  top: max(8px, env(safe-area-inset-top));
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--gold-line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-primary) 84%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 12px 30px -20px rgba(6, 8, 12, 0.6);
}
.kx-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 46px;
  padding: 0.4rem 0.3rem;
  border: 1px solid transparent;
  border-radius: 13px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-secondary);
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.kx-tab:hover { color: var(--text-primary); background: color-mix(in srgb, var(--gold) 9%, transparent); }
.kx-tab:active { transform: scale(0.97); }
.kx-tab:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.kx-tab.is-active {
  color: var(--kx-ink-on-gold, #1a1306);
  background-image: var(--btn-gold);
  box-shadow: 0 8px 18px -10px var(--gold-deep);
}
.kx-tab-icon { display: grid; place-items: center; }

@media (max-width: 639.98px) {
  .kx-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kx-tab { flex-direction: column; gap: 0.2rem; min-height: 56px; font-size: 0.76rem; }
}

/* --------------------------------------------------------------- cards -- */
.kx-profile > article.glass { border-radius: 22px; }
.kx-profile article.glass h3 { font-size: 1.05rem; }
/* Every card title's icon sits in a small tinted chip. */
.kx-profile article.glass h3 > svg:first-child {
  flex: none;
  box-sizing: content-box;
  width: 18px;
  height: 18px;
  padding: 8px;
  border: 1px solid var(--gold-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--gold) 11%, transparent);
}
.kx-profile .tile { border-radius: 16px; }

/* Wallet balances: a coloured edge per currency, larger figures. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .kx-balances { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.kx-balance { position: relative; overflow: hidden; padding: 1rem 1.1rem; }
.kx-balance::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
}
.kx-balance-toman::before { background: var(--mint); }
.kx-balance-usd::before { background: var(--gold); }
.kx-balance .num.text-2xl { font-size: 1.7rem; letter-spacing: -0.01em; }

/* When the site will convert the dollar balance to Toman. */
.kx-usd-note {
  margin-top: 0.6rem;
  padding: 0.55rem 0.7rem;
  border: 1px dashed var(--gold-line);
  border-radius: 10px;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--amber) 9%, transparent);
}

/* The fixed bottom navigation must never cover the last card on a phone. */
@media (max-width: 1023.98px) {
  .kx-profile { padding-bottom: 7.5rem; }
}

/* ------------------------------------------------- wallet withdrawal -- */
.kx-ww {
  margin-top: 0.85rem;
  padding: 0.9rem;
  border: 1px solid var(--gold-line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-primary) 30%, transparent);
}
.kx-ww-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.65rem;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text-primary);
}
.kx-ww-head svg { color: var(--gold); }
.kx-ww-row { display: flex; gap: 0.5rem; margin-bottom: 0.55rem; }
.kx-ww-row .input-box { flex: 1; min-width: 0; }
.kx-ww-all { flex: none; padding-inline: 0.9rem !important; font-size: 0.8rem; }
.kx-ww-note { margin-top: 0.5rem; font-size: 0.76rem; line-height: 1.8; color: var(--text-muted); }
.kx-ww-msg { margin-top: 0.55rem; padding: 0.5rem 0.65rem; border-radius: 10px; font-size: 0.8rem; line-height: 1.8;
  color: var(--mint); background: color-mix(in srgb, var(--mint) 10%, transparent); }
.kx-ww-msg.is-err { color: var(--rose); background: color-mix(in srgb, var(--rose) 10%, transparent); }
.kx-ww-list { display: grid; gap: 0.35rem; margin-top: 0.7rem; }
.kx-ww-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  font-size: 0.76rem;
}
.kx-ww-st { font-weight: 700; color: var(--amber); }
.kx-ww-approved { color: var(--mint); }
.kx-ww-rejected { color: var(--rose); }

/* =====================================================================
 * Redesigned pages (kx5): market desk, channels, about.
 * ===================================================================== */
.is-up { color: var(--mint) !important; }
.is-down { color: var(--rose) !important; }

/* site-wide ease of use: smooth jumps, and a visible focus ring for keyboard users */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
a:focus-visible, button:focus-visible, [role="tab"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--ring); outline-offset: 2px; }

/* reveal on scroll */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .kxm-draw, .kxm-grow, .kxc-progress i, .kxc-story-img { animation: none !important; }
}

/* ------------------------------------------------------------- market -- */
.kxm { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.kxm > *, .kxc > *, .kxa > * { min-width: 0; }
.kxm-hero {
  position: relative; overflow: hidden; padding: 1.3rem 1.3rem 0;
  border: 1px solid var(--card-border); border-radius: 26px;
  background:
    radial-gradient(110% 130% at 100% 0%, color-mix(in srgb, var(--gold) 15%, transparent), transparent 55%),
    radial-gradient(90% 120% at 0% 110%, color-mix(in srgb, var(--gold) 20%, transparent), transparent 60%),
    linear-gradient(160deg, var(--surface-start), var(--surface-end));
  box-shadow: 0 26px 60px -36px rgba(6, 8, 12, .7);
}
.kxm-hero-glow { position: absolute; inset: auto -20% -60% auto; width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--gold) 26%, transparent), transparent 70%); filter: blur(10px); pointer-events: none; }
.kxm-hero-head { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; }
.kxm-live { display: inline-flex; align-items: center; gap: .45rem; font-size: .76rem; color: var(--text-secondary); }
.kxm-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); animation: kxmPulse 2s infinite; }
@keyframes kxmPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mint) 60%, transparent); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.kxm-range { display: inline-flex; gap: 3px; padding: 3px; border-radius: 12px; border: 1px solid var(--gold-line);
  background: color-mix(in srgb, var(--bg-primary) 50%, transparent); }
.kxm-range button { padding: .38rem .8rem; border-radius: 9px; font-size: .78rem; font-weight: 700; color: var(--text-secondary); transition: background .15s, color .15s; }
.kxm-range button.is-on { background-image: var(--btn-gold); color: var(--kx-ink-on-gold, #1a1306); }
.kxm-hero-body { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.kxm-hero-label { font-size: .8rem; color: var(--text-muted); }
.kxm-hero-value { display: flex; align-items: center; gap: .5rem; margin-top: .2rem; font-size: clamp(2.2rem, 7vw, 3.4rem); font-weight: 900; line-height: 1.1; letter-spacing: -.02em; }
.kxm-hero-sub { margin-top: .35rem; font-size: .9rem; color: var(--text-secondary); direction: ltr; text-align: right; }
.kxm-hero-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.kxm-pill { display: grid; gap: .1rem; padding: .55rem .8rem; min-width: 96px; border-radius: 14px; border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--bg-primary) 40%, transparent); }
.kxm-pill span { font-size: .7rem; color: var(--text-muted); }
.kxm-pill b { font-size: .98rem; }
.kxm-spark { position: relative; margin: .8rem -1.3rem 0; height: 70px; }

.kxm-kpis { display: grid; gap: .7rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .kxm-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kxm-kpi { position: relative; overflow: hidden; display: grid; align-content: start; gap: .25rem; padding: 1rem; border-radius: 20px;
  border: 1px solid var(--card-border); background: linear-gradient(160deg, var(--surface-start), var(--surface-end)); }
.kxm-kpi::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--tone); opacity: .85; }
.kxm-kpi-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: var(--tone);
  background: color-mix(in srgb, var(--tone) 15%, transparent); }
.kxm-kpi-title { margin-top: .35rem; font-size: .76rem; color: var(--text-muted); }
.kxm-kpi-value { font-size: 1.55rem; font-weight: 900; color: var(--text-primary); line-height: 1.2; }
.kxm-kpi-value small { margin-inline-start: .15rem; font-size: .85rem; color: var(--tone); }
.kxm-kpi-hint { font-size: .72rem; color: var(--text-secondary); }

.kxm-card { padding: 1.15rem; border-radius: 22px; }
.kxm-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.kxm-card-head h3 { display: flex; align-items: center; gap: .55rem; font-size: 1.05rem; font-weight: 800; }
.kxm-card-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: var(--gold);
  border: 1px solid var(--gold-line); background: color-mix(in srgb, var(--gold) 11%, transparent); }
.kxm-note { font-size: .72rem; color: var(--text-muted); }
.kxm-chart { position: relative; width: 100%; user-select: none; touch-action: pan-y; }
.kxm-chart svg { display: block; overflow: visible; }
.kxm-grid { stroke: var(--hairline); stroke-dasharray: 3 5; }
.kxm-zero { stroke: var(--text-muted); stroke-opacity: .45; }
.kxm-axis { fill: var(--text-muted); font-size: 11px; font-family: inherit; }
.kxm-dot { fill: var(--bg-primary); stroke: var(--gold); stroke-width: 2; transition: r .15s; }
.kxm-dot.is-on { fill: var(--gold); }
.kxm-cursor { stroke: var(--gold); stroke-opacity: .5; stroke-dasharray: 4 4; }
.kxm-draw { stroke-dasharray: 3000; stroke-dashoffset: 3000; animation: kxmDraw 1.6s cubic-bezier(.3,.6,.2,1) forwards; }
@keyframes kxmDraw { to { stroke-dashoffset: 0; } }
.kxm-tip { position: absolute; transform: translateX(-50%); display: grid; gap: .1rem; padding: .5rem .7rem; border-radius: 12px; pointer-events: none;
  min-width: 150px; direction: rtl; text-align: right; font-size: .76rem; color: var(--text-secondary);
  background: color-mix(in srgb, var(--bg-primary) 92%, transparent); border: 1px solid var(--gold-line); box-shadow: 0 12px 30px -16px rgba(0,0,0,.6); }
.kxm-tip b { color: var(--text-primary); }
.kxm-bar { cursor: pointer; }
.kxm-grow { animation: kxmGrow .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes kxmGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.kxm-bar.is-on .kxm-grow { filter: brightness(1.15) drop-shadow(0 6px 10px rgba(0,0,0,.25)); }
.kxm-barval { font-size: 10.5px; font-weight: 700; font-family: inherit; }
.kxm-barval.is-up { fill: var(--mint); } .kxm-barval.is-down { fill: var(--rose); }
.kxm-barnote { margin-top: .4rem; direction: rtl; font-size: .8rem; color: var(--text-secondary); text-align: center; }

.kxm-split { display: grid; gap: 1rem; }
@media (min-width: 900px) { .kxm-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kxm-donut { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.2rem; }
.kxm-donut-ring { position: relative; }
.kxm-donut-track { stroke: var(--hairline); }
.kxm-donut-seg { cursor: pointer; transition: stroke-width .2s; }
.kxm-donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.kxm-donut-center b { font-size: 1.5rem; font-weight: 900; }
.kxm-donut-center span { font-size: .72rem; color: var(--text-muted); }
.kxm-legend { display: grid; gap: .4rem; min-width: 170px; }
.kxm-legend li { display: flex; align-items: center; gap: .55rem; padding: .4rem .6rem; border-radius: 10px; font-size: .82rem; transition: background .15s; }
.kxm-legend li.is-on { background: color-mix(in srgb, var(--gold) 9%, transparent); }
.kxm-legend i { width: 11px; height: 11px; border-radius: 4px; flex: none; }
.kxm-legend span { flex: 1; color: var(--text-secondary); }
.kxm-timeline { position: relative; display: grid; gap: .9rem; padding-inline-start: 1.1rem; }
.kxm-timeline::before { content: ""; position: absolute; inset-block: .3rem; inset-inline-start: .3rem; width: 2px; border-radius: 2px;
  background: linear-gradient(var(--gold-line), transparent); }
.kxm-timeline li { position: relative; display: grid; gap: .15rem; }
.kxm-tl-dot { position: absolute; inset-inline-start: -1.05rem; top: .3rem; width: 12px; height: 12px; border-radius: 50%;
  background: var(--tone); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tone) 20%, transparent); }
.kxm-tl-date { font-size: .72rem; color: var(--tone); font-weight: 700; }
.kxm-timeline b { font-size: .92rem; }
.kxm-timeline p { font-size: .8rem; line-height: 1.8; color: var(--text-secondary); }
.kxm-table-wrap { overflow-x: auto; margin-inline: -.3rem; }
.kxm-table { width: 100%; border-collapse: separate; border-spacing: 0 .3rem; font-size: .82rem; }
.kxm-table th { padding: .35rem .6rem; font-size: .72rem; font-weight: 700; color: var(--text-muted); text-align: start; white-space: nowrap; }
.kxm-table td { padding: .55rem .6rem; white-space: nowrap; background: color-mix(in srgb, var(--bg-primary) 30%, transparent); }
.kxm-table td:first-child { border-start-start-radius: 10px; border-end-start-radius: 10px; }
.kxm-table td:last-child { border-start-end-radius: 10px; border-end-end-radius: 10px; }
.kxm-table td small { display: block; font-size: .68rem; color: var(--text-muted); white-space: normal; }
.kxm-more { display: block; margin: .6rem auto 0; padding: .45rem 1rem; border-radius: 10px; font-size: .8rem; font-weight: 700; color: var(--gold);
  border: 1px solid var(--gold-line); }
.kxm-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; padding: .3rem .2rem; }
.kxm-foot p { display: flex; align-items: flex-start; gap: .4rem; max-width: 560px; font-size: .74rem; line-height: 1.8; color: var(--text-muted); }
.kxm-foot p svg { flex: none; margin-top: .2rem; }
.kxm-cta { display: inline-flex; align-items: center; gap: .45rem; }
.kxm-empty { display: grid; place-items: center; gap: .5rem; padding: 2.5rem 1rem; text-align: center; color: var(--text-secondary); border-radius: 22px; }
.kxm-empty svg { color: var(--gold); }
.kxm-skeleton { display: grid; gap: .8rem; }
.kxm-sk-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
@media (min-width: 900px) { .kxm-sk-row { grid-template-columns: repeat(4, 1fr); } }
.kxm-sk { border-radius: 20px; background: linear-gradient(90deg, var(--hairline), color-mix(in srgb, var(--gold) 8%, transparent), var(--hairline));
  background-size: 200% 100%; animation: kxmShimmer 1.4s linear infinite; }
.kxm-sk-hero { height: 220px; } .kxm-sk-kpi { height: 120px; } .kxm-sk-chart { height: 280px; }
@keyframes kxmShimmer { to { background-position: -200% 0; } }

/* ----------------------------------------------------------- channels -- */
.kxc { display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 1fr); }
.kxc-stories { position: relative; }
.kxc-progress { position: absolute; z-index: 3; inset: .7rem .9rem auto; display: flex; gap: 4px; direction: ltr; }
.kxc-progress span { flex: 1; height: 3px; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,.28); }
.kxc-progress span.is-done i { transform: scaleX(1); }
.kxc-progress i { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
.kxc-progress span.is-now i { animation: kxcFill linear forwards; }
@keyframes kxcFill { to { transform: scaleX(1); } }
.kxc-story { position: relative; overflow: hidden; width: 100%; aspect-ratio: 5 / 2; border-radius: 24px;
  border: 1px solid var(--card-border); box-shadow: 0 30px 70px -40px rgba(6, 8, 12,.8); background: #0d1016; }
.kxc-story-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: kxcIn .7s ease-out both; }
@keyframes kxcIn { from { transform: scale(1.04); opacity: .3; } to { transform: none; opacity: 1; } }
.kxc-story-fallback { position: absolute; inset: 0; display: grid; align-content: end; justify-items: start; gap: .5rem; padding: 1.2rem; color: #fff;
  background: radial-gradient(80% 120% at 100% 0%, color-mix(in srgb, var(--gold) 27%, transparent), transparent 60%),
  radial-gradient(70% 100% at 0% 100%, color-mix(in srgb, var(--gold) 45%, transparent), transparent 60%), #121620; }
.kxc-story-fallback h2 { font-size: clamp(1.1rem, 4vw, 1.8rem); font-weight: 900; }
.kxc-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 700;
  background: rgba(255,255,255,.16); backdrop-filter: blur(6px); }
.kxc-caption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin-top: .8rem; padding: 1rem 1.1rem;
  border-radius: 20px; border: 1px solid var(--card-border); background: linear-gradient(160deg, var(--surface-start), var(--surface-end));
  animation: kxcUp .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes kxcUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.kxc-caption-text { flex: 1; min-width: 200px; }
.kxc-caption h2 { margin-top: .25rem; font-size: 1.15rem; font-weight: 900; line-height: 1.5; }
.kxc-caption p { margin-top: .25rem; font-size: .85rem; line-height: 1.9; color: var(--text-secondary); }
.kxc-count { margin-inline-start: .4rem; padding: .1rem .5rem; border-radius: 999px; font-size: .68rem; color: var(--text-muted); border: 1px solid var(--hairline); }
.kxc-story-cta { display: inline-flex; align-items: center; gap: .4rem; padding: .65rem 1.15rem; border-radius: 12px;
  font-size: .85rem; font-weight: 800; color: var(--kx-ink-on-gold, #1a1306); background-image: var(--btn-gold); box-shadow: 0 10px 24px -12px rgba(230,184,92,.8); transition: transform .15s; }
.kxc-story-cta:hover { transform: translateY(-2px); }
.kxc-nav { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; color: #fff; background: rgba(255,255,255,.14); backdrop-filter: blur(8px); opacity: 0; transition: opacity .2s, background .2s; }
.kxc-stories:hover .kxc-nav { opacity: 1; }
.kxc-nav:hover { background: rgba(255,255,255,.26); }
.kxc-nav-prev { right: .8rem; } .kxc-nav-next { left: .8rem; }
@media (hover: none) { .kxc-nav { display: none; } }
.kxc-pause { position: absolute; z-index: 3; bottom: .7rem; left: .7rem; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  color: #fff; background: rgba(0,0,0,.25); }
.kxc-thumbs { display: flex; gap: .5rem; margin-top: .7rem; overflow-x: auto; padding-bottom: .2rem; scrollbar-width: none; }
.kxc-thumbs::-webkit-scrollbar { display: none; }
.kxc-thumbs button { flex: none; width: 74px; height: 46px; overflow: hidden; border-radius: 12px; opacity: .55; border: 2px solid transparent;
  background: var(--hairline); transition: opacity .2s, border-color .2s, transform .2s; }
.kxc-thumbs button.is-on { opacity: 1; border-color: var(--gold); transform: translateY(-2px); }
.kxc-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.kxc-thumbs span { display: grid; place-items: center; height: 100%; font-weight: 800; color: var(--text-secondary); }
.kxc-story-skeleton { height: 300px; border-radius: 26px; background: linear-gradient(90deg, var(--hairline), color-mix(in srgb, var(--gold) 8%, transparent), var(--hairline));
  background-size: 200% 100%; animation: kxmShimmer 1.4s linear infinite; }

.kxc-section { display: grid; gap: .9rem; }
.kxc-section-head h3 { margin-top: .3rem; font-size: 1.35rem; font-weight: 900; }
.kxc-section-head p { margin-top: .25rem; font-size: .85rem; line-height: 1.9; color: var(--text-secondary); }
.kxc-eyebrow { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 800; color: var(--gold); }
.kxc-grid { display: grid; gap: .8rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .kxc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kxc-card.is-featured { grid-column: span 2; } }
@media (min-width: 1000px) { .kxc-grid-3, .kxc-grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kxc-grid-4 .kxc-card.is-featured { grid-column: span 3; } }
.kxc-card { position: relative; overflow: hidden; display: flex; align-items: center; gap: .9rem; min-height: 96px; padding: 1.1rem 1.15rem;
  border-radius: 22px; color: #fff; box-shadow: 0 18px 40px -26px rgba(0,0,0,.7); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, opacity .55s; }
.kxc-card.is-featured { min-height: 128px; }
.kxc-card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -24px rgba(0,0,0,.75); }
.kxc-card::before { content: ""; position: absolute; inset: auto -10% -60% auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.14); }
.kxc-card-shine { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 48%, transparent 66%);
  transform: translateX(120%); transition: transform .8s ease; }
.kxc-card:hover .kxc-card-shine { transform: translateX(-120%); }
.kxc-card-icon { position: relative; display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 17px;
  background: rgba(255,255,255,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.kxc-card.is-featured .kxc-card-icon { width: 66px; height: 66px; border-radius: 20px; }
.kxc-card-text { position: relative; display: grid; gap: .15rem; flex: 1; min-width: 0; }
.kxc-card-text b { font-size: 1.1rem; font-weight: 900; }
.kxc-card.is-featured .kxc-card-text b { font-size: 1.35rem; }
.kxc-card-text span { font-size: .78rem; opacity: .9; text-align: right; }
.kxc-card-cta { position: relative; display: inline-flex; align-items: center; gap: .3rem; flex: none; padding: .45rem .8rem; border-radius: 999px;
  font-size: .76rem; font-weight: 800; background: rgba(255,255,255,.22); transition: background .2s, gap .2s; }
.kxc-card:hover .kxc-card-cta { background: rgba(255,255,255,.32); gap: .5rem; }

.kxc-address { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; padding: 1.1rem; border-radius: 22px; }
.kxc-address-icon { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 16px; color: var(--gold);
  border: 1px solid var(--gold-line); background: color-mix(in srgb, var(--gold) 11%, transparent); }
.kxc-address > div { flex: 1; min-width: 200px; }
.kxc-address p { margin-top: .2rem; font-size: .9rem; line-height: 1.9; white-space: pre-line; color: var(--text-secondary); }
.kxc-copy { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; }

/* -------------------------------------------------------------- about -- */
.kxa { display: grid; gap: 1.3rem; grid-template-columns: minmax(0, 1fr); }
.kxa-hero { display: grid; gap: 1.2rem; align-items: center; padding: 1.3rem; border-radius: 28px; border: 1px solid var(--card-border);
  background:
    radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--gold) 11%, transparent), transparent 55%),
    linear-gradient(160deg, var(--surface-start), var(--surface-end)); }
@media (min-width: 860px) { .kxa-hero { grid-template-columns: 1.1fr .9fr; padding: 2rem; } }
.kxa-eyebrow { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 999px; font-size: .74rem; font-weight: 800;
  color: var(--gold); border: 1px solid var(--gold-line); background: color-mix(in srgb, var(--gold) 9%, transparent); }
.kxa-hero h2 { margin-top: .7rem; font-size: clamp(1.7rem, 5.5vw, 2.6rem); font-weight: 900; line-height: 1.35;
  background: linear-gradient(90deg, var(--text-primary), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kxa-hero-text p { margin-top: .7rem; font-size: .92rem; line-height: 2; color: var(--text-secondary); }
.kxa-hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
.kxa-hero-actions .btn { display: inline-flex; align-items: center; gap: .45rem; }
.kxa-hero-media { position: relative; }
.kxa-hero-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px; box-shadow: 0 30px 60px -34px rgba(6, 8, 12,.8); }
.kxa-float { position: absolute; display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .8rem; border-radius: 14px; font-size: .78rem; font-weight: 800;
  color: var(--text-primary); background: color-mix(in srgb, var(--bg-primary) 86%, transparent); backdrop-filter: blur(10px);
  border: 1px solid var(--gold-line); box-shadow: 0 14px 30px -18px rgba(0,0,0,.6); animation: kxaFloat 5s ease-in-out infinite; }
.kxa-float svg { color: var(--gold); }
.kxa-float-a { top: 1rem; inset-inline-start: .6rem; }
.kxa-float-b { bottom: 1rem; inset-inline-end: .6rem; animation-delay: -2.5s; }
.kxa-float-b svg { color: var(--mint); }
@keyframes kxaFloat { 50% { transform: translateY(-7px); } }
.kxa-facts { display: grid; gap: .7rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 860px) { .kxa-facts-3 { grid-template-columns: repeat(3, 1fr); } .kxa-facts-4 { grid-template-columns: repeat(4, 1fr); } }
.kxa-fact { display: grid; gap: .2rem; padding: 1.1rem; text-align: center; border-radius: 20px; border: 1px solid var(--card-border);
  background: linear-gradient(160deg, var(--surface-start), var(--surface-end)); }
.kxa-fact b { font-size: 1.9rem; font-weight: 900; color: var(--gold); }
.kxa-fact span { font-size: .78rem; color: var(--text-muted); }
.kxa-mission { position: relative; overflow: hidden; padding: 1.6rem 1.4rem; border-radius: 26px; border: 1px solid var(--card-border);
  background: linear-gradient(160deg, var(--surface-start), var(--surface-end)); }
.kxa-quote { position: absolute; top: -1.6rem; inset-inline-end: 1rem; font-size: 9rem; line-height: 1; color: var(--gold); opacity: .12; font-family: serif; }
.kxa-mission h3 { font-size: 1.2rem; font-weight: 900; }
.kxa-lead { margin-top: .8rem; font-size: 1.05rem; line-height: 2.1; font-weight: 600; color: var(--text-primary);
  border-inline-start: 3px solid var(--gold); padding-inline-start: .9rem; }
.kxa-mission p:not(.kxa-lead) { margin-top: .7rem; font-size: .9rem; line-height: 2; color: var(--text-secondary); }
.kxa-values { display: grid; gap: .8rem; }
@media (min-width: 760px) { .kxa-values { grid-template-columns: repeat(3, 1fr); } }
.kxa-value { display: grid; align-content: start; gap: .35rem; padding: 1.2rem; border-radius: 22px; border: 1px solid var(--card-border);
  background: linear-gradient(160deg, var(--surface-start), var(--surface-end)); transition: transform .25s, border-color .25s, opacity .55s; }
.kxa-value:hover { transform: translateY(-3px); border-color: var(--gold-line); }
.kxa-value-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; color: var(--gold);
  background: color-mix(in srgb, var(--gold) 12%, transparent); border: 1px solid var(--gold-line); }
.kxa-value b { margin-top: .35rem; font-size: 1rem; font-weight: 800; }
.kxa-value p { font-size: .82rem; line-height: 1.9; color: var(--text-secondary); }
.kxa-charity { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1.4rem; border-radius: 26px;
  border: 1px solid color-mix(in srgb, var(--mint) 35%, transparent);
  background: radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--mint) 18%, transparent), transparent 60%), color-mix(in srgb, var(--mint) 6%, transparent); }
.kxa-charity-icon { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 20px; color: var(--mint);
  background: color-mix(in srgb, var(--mint) 16%, transparent); }
.kxa-charity > div { flex: 1; min-width: 220px; }
.kxa-charity h3 { font-size: 1.1rem; font-weight: 900; color: var(--mint); }
.kxa-charity p { margin-top: .35rem; font-size: .88rem; line-height: 2; color: var(--text-secondary); }
.kxa-steps h3 { margin-bottom: .8rem; font-size: 1.2rem; font-weight: 900; }
.kxa-steps ol { display: grid; gap: .8rem; }
@media (min-width: 760px) { .kxa-steps ol { grid-template-columns: repeat(3, 1fr); } }
.kxa-step { position: relative; display: grid; align-content: start; gap: .3rem; height: 100%; padding: 1.2rem; border-radius: 22px; border: 1px solid var(--card-border);
  background: linear-gradient(160deg, var(--surface-start), var(--surface-end)); transition: transform .25s, border-color .25s; }
.kxa-step:hover { transform: translateY(-3px); border-color: var(--gold-line); }
.kxa-step-num { position: absolute; top: .8rem; inset-inline-end: 1rem; font-size: 2.2rem; font-weight: 900; color: var(--gold); opacity: .18; }
.kxa-step-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: var(--kx-ink-on-gold, #1a1306); background-image: var(--btn-gold); }
.kxa-step b { margin-top: .4rem; font-size: .98rem; font-weight: 800; }
.kxa-step p { font-size: .82rem; line-height: 1.9; color: var(--text-secondary); }
.kxa-step-go { display: inline-flex; align-items: center; gap: .3rem; margin-top: .2rem; font-size: .78rem; font-weight: 800; color: var(--gold); }
.kxa-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.4rem; border-radius: 26px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 15%, var(--surface-end)), color-mix(in srgb, var(--gold) 22%, var(--surface-end)));
  border: 1px solid var(--gold-line); }
.kxa-cta h3 { font-size: 1.15rem; font-weight: 900; }
.kxa-cta p { margin-top: .3rem; font-size: .85rem; line-height: 1.9; color: var(--text-secondary); }
.kxa-cta-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* An empty page label is hidden, bar and all. */
.eyebrow:empty { display: none; }

/* ==========================================================================
   Theme v2 — "Obsidian & Gold"
   One accent (gold) on calm neutrals. Dark: deep graphite, no purple haze.
   Light: porcelain white with ink text. Gains stay emerald, losses rose.
   Everything on the site reads these tokens, so this block re-colours it all.
   ========================================================================== */
:root,[data-theme=dark]{
  color-scheme:dark;
  --bg-primary:#0b0d12;--bg-secondary:#11141b;--bg-tertiary:#07080c;
  --gold:#e9b95f;--gold-soft:#f5d79c;--gold-deep:#b8862f;--gold-line:rgba(233,185,95,.2);
  --mint:#34d399;--mint-soft:#86efc4;--royal:#8f9bff;--rose:#ff6b81;--amber:#f6c15a;
  --text-primary:#eef0f4;--text-secondary:#a3aab8;--text-muted:#717888;
  --surface-start:rgba(27,31,41,.68);--surface-end:rgba(15,18,24,.84);
  --card-border:rgba(255,255,255,.075);--hairline:rgba(255,255,255,.07);
  --btn-gold:linear-gradient(135deg,#f6dca4 0%,#e9b95f 50%,#c99234 100%);
  --btn-mint:linear-gradient(135deg,#86efc4 0%,#34d399 55%,#10b981 100%);
  --ring:rgba(233,185,95,.55);
  --kx-ink-on-gold:#1a1306;
  --kx-shadow:0 1px 2px rgba(0,0,0,.35),0 16px 40px -18px rgba(0,0,0,.65);
  --kx-shadow-hover:0 1px 2px rgba(0,0,0,.35),0 24px 50px -20px rgba(0,0,0,.75);
}
[data-theme=light]{
  color-scheme:light;
  --bg-primary:#f5f6f8;--bg-secondary:#ffffff;--bg-tertiary:#eceef2;
  --gold:#9a6a0c;--gold-soft:#c08a2a;--gold-deep:#7a5208;--gold-line:rgba(154,106,12,.22);
  --mint:#08875d;--mint-soft:#10a774;--royal:#4f5bd5;--rose:#d23c56;--amber:#a86d0a;
  --text-primary:#10131a;--text-secondary:#4b5263;--text-muted:#7b8292;
  --surface-start:rgba(255,255,255,.92);--surface-end:rgba(255,255,255,.97);
  --card-border:rgba(16,19,26,.08);--hairline:rgba(16,19,26,.07);
  --btn-gold:linear-gradient(135deg,#f3d391 0%,#dcaa4a 50%,#b47f1e 100%);
  --btn-mint:linear-gradient(135deg,#34c78f 0%,#0a8f62 60%,#077a53 100%);
  --ring:rgba(154,106,12,.45);
  --kx-shadow:0 1px 2px rgba(16,19,26,.04),0 10px 28px -14px rgba(16,19,26,.12);
  --kx-shadow-hover:0 1px 2px rgba(16,19,26,.05),0 18px 40px -18px rgba(16,19,26,.18);
}

/* page background: one soft gold light, nothing else */
body{background:
  radial-gradient(80% 55% at 88% -12%,rgba(233,185,95,.09),transparent 62%),
  linear-gradient(180deg,#11141b 0%,#0b0d12 42%,#08090d 100%)}
[data-theme=light] body{background:
  radial-gradient(80% 50% at 88% -12%,rgba(220,170,74,.13),transparent 62%),
  linear-gradient(180deg,#fbfbfc 0%,#f4f5f7 55%,#eef0f3 100%)}

/* cards: quieter edges, real shadows, a smaller lift */
.glass{box-shadow:inset 0 1px rgba(255,255,255,.05),var(--kx-shadow)}
.glass:before{background:linear-gradient(140deg,rgba(255,255,255,.045),transparent 38%)}
.glass:hover{transform:translateY(-1px);border-color:var(--gold-line);box-shadow:inset 0 1px rgba(255,255,255,.07),var(--kx-shadow-hover)}
[data-theme=light] .glass{box-shadow:inset 0 1px #fff,var(--kx-shadow)}
[data-theme=light] .glass:before{background:linear-gradient(140deg,rgba(255,255,255,.7),transparent 40%)}
[data-theme=light] .glass:hover{box-shadow:inset 0 1px #fff,var(--kx-shadow-hover)}
.dock{box-shadow:0 -1px 0 var(--hairline),0 18px 40px -12px rgba(0,0,0,.6)}
[data-theme=light] .dock{box-shadow:0 1px 2px rgba(16,19,26,.05),0 14px 34px -14px rgba(16,19,26,.2)}

/* inputs */
.field,.input-box{background:rgba(255,255,255,.03)}
.field:focus-within,.input-box:focus{box-shadow:0 0 0 3px rgba(233,185,95,.16)}
[data-theme=light] .field,[data-theme=light] .input-box,[data-theme=light] .otp-cell,[data-theme=light] .loan-close{background:#fff}
[data-theme=light] .field:focus-within,[data-theme=light] .input-box:focus{box-shadow:0 0 0 3px rgba(154,106,12,.14)}
.tile{background:rgba(255,255,255,.025)}
[data-theme=light] .tile{background:rgba(16,19,26,.025)}

/* buttons and chips */
.btn-gold,.ct-gold,button.bg-gradient-to-r,a.bg-gradient-to-r,.btn-primary{color:var(--kx-ink-on-gold,#1a1306);box-shadow:inset 0 1px rgba(255,255,255,.4),0 8px 22px -10px rgba(201,146,52,.55)}
.btn-mint{box-shadow:inset 0 1px rgba(255,255,255,.35),0 8px 22px -10px rgba(16,185,129,.5)}
.chip-gold{background:rgba(233,185,95,.12)}
.chip-mint{background:rgba(52,211,153,.12);border-color:rgba(52,211,153,.28)}
.chip-royal{background:rgba(143,155,255,.13);border-color:rgba(143,155,255,.3)}
.chip-amber{background:rgba(246,193,90,.12);border-color:rgba(246,193,90,.3)}
.btn-danger{background:rgba(255,107,129,.12);border-color:rgba(255,107,129,.4)}
[data-theme=light] .chip-gold{background:rgba(154,106,12,.08)}
[data-theme=light] .chip-mint{background:rgba(8,135,93,.08);border-color:rgba(8,135,93,.22)}
[data-theme=light] .chip-royal{background:rgba(79,91,213,.08);border-color:rgba(79,91,213,.22)}
[data-theme=light] .chip-amber{background:rgba(168,109,10,.08);border-color:rgba(168,109,10,.22)}
.eyebrow:before{box-shadow:none}

/* light mode: the old purple ink becomes neutral ink */
[data-theme=light] .text-white{color:#10131a!important}
[data-theme=light] .text-slate-100,[data-theme=light] .text-slate-200{color:#1d2230!important}
[data-theme=light] .text-slate-300{color:#363e4f!important}
[data-theme=light] .text-slate-400{color:#5b6375!important}
[data-theme=light] button.text-white,[data-theme=light] a.text-white,[data-theme=light] .btn-primary,[data-theme=light] .btn-primary *,[data-theme=light] .text-emerald-100,[data-theme=light] .text-emerald-200,[data-theme=light] .text-emerald-300,[data-theme=light] .text-violet-100,[data-theme=light] .text-violet-200,[data-theme=light] .text-violet-300,[data-theme=light] .text-blue-100,[data-theme=light] .text-amber-100{color:#10131a!important}
[data-theme=light] .bg-black\/20,[data-theme=light] .bg-white\/5{background-color:rgba(16,19,26,.035)!important}
[data-theme=light] .bg-black\/25{background-color:rgba(16,19,26,.045)!important}
[data-theme=light] .bg-black\/30,[data-theme=light] .bg-white\/10{background-color:rgba(16,19,26,.055)!important}
[data-theme=light] .bg-black\/40{background-color:rgba(16,19,26,.07)!important}
[data-theme=light] input,[data-theme=light] textarea,[data-theme=light] select{color:#10131a}
[data-theme=light] .otp-cell:before{background:linear-gradient(160deg,rgba(16,19,26,.03),transparent 55%)}
[data-theme=light] .otp-cell.is-filled,[data-theme=light] .confirm-amount{background:rgba(154,106,12,.07)}
[data-theme=light] .loan-backdrop,[data-theme=light] .confirm-backdrop{background:rgba(16,19,26,.38)}

/* leftovers that were hard-wired to purple */
.banner-nav{background:rgba(8,10,14,.55)}
.charity-orb-one{background:rgba(143,155,255,.45)}
.charity-loading{background:radial-gradient(circle at 16% 18%,rgba(143,155,255,.28),transparent 45%),radial-gradient(circle at 84% 84%,rgba(52,211,153,.24),transparent 45%),var(--bg-primary)}

/* selection and scrollbars follow the accent */
::selection{background:rgba(233,185,95,.32);color:inherit}
[data-theme=light] ::selection{background:rgba(220,170,74,.28)}
*{scrollbar-color:rgba(127,133,148,.4) transparent}

/* dock: one colour at a time — idle icons are neutral, the current page is gold */
.dock-link:not(.dock-active) .nav3d{background:var(--surface-start)!important;color:var(--text-secondary);filter:none;opacity:1;
  box-shadow:inset 0 0 0 1px var(--hairline)}
.dock-link:not(.dock-active) .nav3d:before{opacity:0}
.dock-link:not(.dock-active) .nav3d>svg{filter:none}
.dock-link:not(.dock-active):hover .nav3d{filter:none;color:var(--gold)}
.dock-link.dock-active .nav3d{background:var(--btn-gold)!important;color:var(--kx-ink-on-gold,#1a1306);
  box-shadow:inset 0 1px rgba(255,255,255,.5),0 10px 22px -8px rgba(201,146,52,.6)}
.dock-link.dock-active .nav3d>svg{filter:none}
.dock-link.dock-active .dock-label{color:var(--gold)}

/* ==========================================================================
   Steady layout
   ========================================================================== */
/* the scrollbar's space is always kept, so content never jumps sideways
   when a page is shorter than the screen (or while the next page loads) */
html{scrollbar-gutter:stable}
/* phones zoom into any field under 16px when it is tapped; keep them at 16 */
@media (pointer:coarse){
  input.text-sm,input.text-xs,textarea.text-sm,textarea.text-xs,select.text-sm,select.text-xs,
  .field input,.field select,.field textarea{font-size:16px!important}
}

/* ==========================================================================
   Buttons v2 — solid, crisp, no wobble
   Primary: warm gold with a soft top light. Secondary: quiet surface with a
   hairline. Press = a small squeeze; nothing slides or sweeps.
   ========================================================================== */
:root,[data-theme=dark]{
  --btn-gold:linear-gradient(180deg,#f3cf86 0%,#e4ad4f 100%);
  --btn-mint:linear-gradient(180deg,#5ee3b0 0%,#22c08a 100%);
  --kx-btn-ghost-bg:rgba(255,255,255,.045);
  --kx-btn-ghost-bg-hover:rgba(255,255,255,.08);
  --kx-btn-ghost-border:rgba(255,255,255,.1);
  --kx-focus:0 0 0 2px var(--bg-primary),0 0 0 4px var(--gold);
}
[data-theme=light]{
  --btn-gold:linear-gradient(180deg,#eec36a 0%,#d79f3c 100%);
  --btn-mint:linear-gradient(180deg,#22b07e 0%,#0a8f62 100%);
  --kx-btn-ghost-bg:#fff;
  --kx-btn-ghost-bg-hover:#f7f8fa;
  --kx-btn-ghost-border:rgba(16,19,26,.12);
}

/* no more lifting or shine sweeps */
button:not(:disabled):hover{transform:none;filter:none}
button:not(:disabled):active,.btn:active{transform:scale(.975)}
.btn-gold:after,.btn-mint:after,button.bg-gradient-to-r:after,a.bg-gradient-to-r:after{display:none}
button,.btn,a.bg-gradient-to-r{transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,filter .18s ease,transform .12s ease}
button:focus-visible,a:focus-visible,.btn:focus-visible{outline:none;box-shadow:var(--kx-focus)!important}

.btn{border-radius:14px;min-height:46px;padding:.7rem 1.25rem;font-weight:700;font-size:.93rem;letter-spacing:0;line-height:1.2}

/* primary */
.btn-gold,.ct-gold,.btn-primary,button.bg-gradient-to-r,a.bg-gradient-to-r{
  background-image:var(--btn-gold);color:var(--kx-ink-on-gold,#1a1306)!important;font-weight:700;
  border:1px solid rgba(120,80,10,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(120,80,10,.18),0 1px 2px rgba(0,0,0,.18),0 6px 16px -8px rgba(228,173,79,.7)}
.btn-gold:hover,.ct-gold:hover,.btn-primary:hover,button.bg-gradient-to-r:not(:disabled):hover,a.bg-gradient-to-r:hover{
  filter:brightness(1.05) saturate(1.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(120,80,10,.18),0 1px 2px rgba(0,0,0,.18),0 10px 22px -8px rgba(228,173,79,.8)}
.btn-gold *,.btn-primary *,button.bg-gradient-to-r *,a.bg-gradient-to-r *{color:inherit}

/* success */
.btn-mint{background-image:var(--btn-mint);color:#04261a;border:1px solid rgba(4,80,52,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 1px 2px rgba(0,0,0,.18),0 6px 16px -8px rgba(34,192,138,.65)}
[data-theme=light] .btn-mint{color:#fff}
.btn-mint:hover{filter:brightness(1.05)}

/* secondary */
.btn-ghost{background:var(--kx-btn-ghost-bg);border:1px solid var(--kx-btn-ghost-border);color:var(--text-primary);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
[data-theme=light] .btn-ghost{box-shadow:0 1px 2px rgba(16,19,26,.06)}
.btn-ghost:hover{background:var(--kx-btn-ghost-bg-hover);border-color:var(--gold-line);color:var(--gold)}

/* danger */
.btn-danger{background:color-mix(in srgb,var(--rose) 12%,transparent);border:1px solid color-mix(in srgb,var(--rose) 38%,transparent);color:var(--rose)}
.btn-danger:hover{background:color-mix(in srgb,var(--rose) 18%,transparent)}

/* disabled looks disabled, not just faded gold */
.btn:disabled,button:disabled{opacity:1;filter:grayscale(.85) brightness(.85);box-shadow:none!important;cursor:not-allowed}
[data-theme=light] .btn:disabled,[data-theme=light] button:disabled{filter:grayscale(.9) brightness(1.02);opacity:.6}

/* ==========================================================================
   Theme switch motion: the new theme grows in a circle from the toggle.
   (Browsers without view transitions get a soft colour fade instead.)
   ========================================================================== */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}
::view-transition-new(root){z-index:2}
html.kx-theme-fade,html.kx-theme-fade *,html.kx-theme-fade *::before,html.kx-theme-fade *::after{
  transition:background-color .45s ease,color .45s ease,border-color .45s ease,fill .45s ease,stroke .45s ease,box-shadow .45s ease!important}
/* the toggle icon turns as it swaps */
button[aria-label="حالت روشن"] svg,button[aria-label="حالت تاریک"] svg{animation:kxSpinIn .5s cubic-bezier(.22,1,.36,1)}
@keyframes kxSpinIn{from{transform:rotate(-90deg) scale(.6);opacity:0}to{transform:none;opacity:1}}

/* round icon buttons stay round (buttons v2 gave .btn a min height) */
.btn.\!rounded-full{min-height:0}

/* notification bell: the badge sat outside the button and was cut off */
button[aria-label="اعلان‌ها"]{overflow:visible}
button[aria-label="اعلان‌ها"]>span.animate-pop{top:-5px;left:-5px;height:19px;min-width:19px;padding:0 5px;font-size:10.5px;line-height:1;
  color:#fff!important;background:var(--rose);box-shadow:0 0 0 2px var(--bg-primary),0 2px 6px rgba(0,0,0,.25);z-index:1;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  button[aria-label="حالت روشن"] svg,button[aria-label="حالت تاریک"] svg{animation:none}
}

/* ==========================================================================
   Dock motion — tapping a tab: the tile springs up, gold fills it from the
   centre, the icon pops and the label rises. Plays every time a page opens.
   ========================================================================== */
.nav3d::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--btn-gold);opacity:0;transform:scale(.2);pointer-events:none}
.nav3d>svg{position:relative;z-index:1}
.dock-link.dock-active .nav3d{background:var(--surface-start)!important;
  animation:kxDockLift .62s cubic-bezier(.34,1.56,.64,1) backwards}
.dock-link.dock-active .nav3d::after{opacity:1;transform:none;animation:kxDockFill .48s cubic-bezier(.22,1,.36,1) backwards}
.dock-link.dock-active .nav3d>svg{animation:kxDockIcon .6s cubic-bezier(.34,1.56,.64,1) backwards}
.dock-link.dock-active .dock-label{animation:kxDockLabel .45s cubic-bezier(.22,1,.36,1) backwards}
.dock-link:not(.dock-active):active .nav3d{transform:scale(.86);transition:transform .12s ease}
@keyframes kxDockLift{
  0%{transform:translateY(0) scale(.86)}
  55%{transform:translateY(-13px) scale(1.12)}
  100%{transform:translateY(-10px) scale(1.05)}
}
@keyframes kxDockFill{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
@keyframes kxDockIcon{0%{transform:scale(.5) rotate(-18deg)}60%{transform:scale(1.18) rotate(6deg)}100%{transform:none}}
@keyframes kxDockLabel{from{opacity:.3;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (max-width:640px){
  .dock-link.dock-active .nav3d{animation-name:kxDockLiftSm}
  @keyframes kxDockLiftSm{0%{transform:translateY(0) scale(.86)}55%{transform:translateY(-7px) scale(1.1)}100%{transform:translateY(-4px) scale(1.04)}}
}
@media (prefers-reduced-motion:reduce){
  .dock-link.dock-active .nav3d,.dock-link.dock-active .nav3d::after,.dock-link.dock-active .nav3d>svg,.dock-link.dock-active .dock-label{animation:none}
}

/* ==========================================================================
   Investment page (kxi-)
   ========================================================================== */
.kxi{display:grid;gap:1rem}
.kxi-layout{display:grid;gap:1rem;align-items:start}
@media (min-width:900px){.kxi-layout{grid-template-columns:minmax(0,1fr) 320px}.kxi-summary{position:sticky;top:1rem}}
.kxi-main{min-width:0}
.kxi-panel{display:grid;gap:1rem;animation:kxiIn .4s cubic-bezier(.22,1,.36,1) both}
@keyframes kxiIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.kxi-card{padding:1.25rem;display:grid;gap:1rem}
.kxi-card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem}
.kxi-card-head h3{display:flex;align-items:center;gap:.5rem;margin:0;font-size:1.05rem;font-weight:800}
.kxi-card-head h3 svg{color:var(--gold)}
.kxi-eyebrow{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:700;color:var(--gold)}

/* stepper */
.kxi-steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);padding:.9rem .5rem;border-radius:20px;
  border:1px solid var(--card-border);background:linear-gradient(150deg,var(--surface-start),var(--surface-end))}
.kxi-steps-bar{position:absolute;top:calc(.9rem + 17px);right:16.6%;left:16.6%;height:3px;border-radius:3px;background:var(--hairline)}
.kxi-steps-bar i{position:absolute;inset-block:0;right:0;border-radius:inherit;background:var(--btn-gold);transition:width .5s cubic-bezier(.22,1,.36,1)}
.kxi-step{position:relative;display:grid;justify-items:center;gap:.4rem;background:none;border:0;padding:0;color:var(--text-muted)}
.kxi-step:disabled{filter:none!important;opacity:1;cursor:default}
.kxi-step-dot{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--bg-secondary);
  border:1px solid var(--hairline);color:var(--text-muted);transition:all .3s ease}
.kxi-step-label{font-size:.75rem;font-weight:600}
.kxi-step.is-done .kxi-step-dot{background:color-mix(in srgb,var(--gold) 16%,var(--bg-secondary));border-color:var(--gold-line);color:var(--gold)}
.kxi-step.is-done{color:var(--text-secondary);cursor:pointer}
.kxi-step.is-now .kxi-step-dot{background-image:var(--btn-gold);border-color:transparent;color:var(--kx-ink-on-gold,#1a1306);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--gold) 16%,transparent);transform:scale(1.08)}
.kxi-step.is-now{color:var(--gold)}
.kxi-step.is-now .kxi-step-label{font-weight:800}

/* wallet pill */
.kxi-wallet{font-size:.78rem;padding:.3rem .7rem;border-radius:999px;border:1px solid var(--hairline);color:var(--text-secondary);background:var(--kx-btn-ghost-bg,transparent)}
.kxi-wallet b{color:var(--text-primary)}
.kxi-wallet.is-short b{color:var(--rose)}

/* amount */
.kxi-amount{display:grid;grid-template-columns:52px minmax(0,1fr) 52px;align-items:center;gap:.6rem}
.kxi-stepbtn{height:52px;border-radius:16px;border:1px solid var(--hairline);background:var(--kx-btn-ghost-bg,transparent);color:var(--text-primary);font-size:1.5rem;font-weight:500}
.kxi-stepbtn:not(:disabled):hover{border-color:var(--gold-line);color:var(--gold)}
.kxi-stepbtn:disabled{opacity:.35;filter:none}
.kxi-amount-field{display:flex;align-items:baseline;justify-content:center;gap:.35rem;padding:.4rem .8rem;border-radius:18px;
  border:1px solid var(--hairline);background:color-mix(in srgb,var(--gold) 5%,transparent);transition:border-color .2s,box-shadow .2s}
.kxi-amount-field:focus-within{border-color:var(--gold);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 14%,transparent)}
.kxi-amount-field input{width:100%;min-width:0;background:none;border:0;outline:none;text-align:center;font-size:2.4rem;font-weight:900;color:var(--gold);padding:0}
.kxi-amount-field span{font-size:1.4rem;font-weight:800;color:var(--gold)}

/* range */
.kxi-range{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:999px;margin:.2rem 0 0;
  background:linear-gradient(270deg,var(--gold) 0 var(--p),var(--hairline) var(--p) 100%);direction:rtl;cursor:pointer}
.kxi-range.is-amber{background:linear-gradient(270deg,var(--amber) 0 var(--p),var(--hairline) var(--p) 100%)}
.kxi-range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--gold);
  box-shadow:0 2px 8px rgba(0,0,0,.3);transition:transform .15s}
.kxi-range.is-amber::-webkit-slider-thumb{border-color:var(--amber)}
.kxi-range:active::-webkit-slider-thumb{transform:scale(1.15)}
.kxi-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--gold);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.kxi-range-ends{display:flex;justify-content:space-between;font-size:.72rem;color:var(--text-muted);margin-top:-.4rem}

/* chips */
.kxi-chips{display:flex;flex-wrap:wrap;gap:.45rem}
.kxi-chip{padding:.42rem .85rem;border-radius:999px;font-size:.8rem;font-weight:700;border:1px solid var(--hairline);
  background:var(--kx-btn-ghost-bg,transparent);color:var(--text-secondary)}
.kxi-chip:hover{border-color:var(--gold-line);color:var(--gold)}
.kxi-chip.is-on{background:color-mix(in srgb,var(--gold) 16%,transparent);border-color:var(--gold);color:var(--gold)}

/* notes */
.kxi-note{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:0;padding:.7rem .85rem;border-radius:14px;font-size:.84rem;line-height:1.9;
  background:color-mix(in srgb,var(--royal) 9%,transparent);border:1px solid color-mix(in srgb,var(--royal) 22%,transparent);color:var(--text-secondary)}
.kxi-note svg{flex:none;color:var(--royal)}
.kxi-note.is-warn{background:color-mix(in srgb,var(--rose) 10%,transparent);border-color:color-mix(in srgb,var(--rose) 28%,transparent);color:var(--rose)}
.kxi-note.is-warn svg{color:var(--rose)}
.kxi-note a,.kxi-link{font-weight:800;color:var(--gold);text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:0}

/* terms */
.kxi-terms{display:grid;gap:.7rem;grid-template-columns:repeat(3,minmax(0,1fr))}
.kxi-terms-2{grid-template-columns:repeat(2,minmax(0,1fr))}.kxi-terms-1{grid-template-columns:1fr}
.kxi-term{position:relative;display:grid;justify-items:center;gap:.15rem;padding:1.1rem .5rem .8rem;border-radius:18px;
  border:1px solid var(--hairline);background:var(--kx-btn-ghost-bg,transparent);color:var(--text-primary);text-align:center}
.kxi-term:hover{border-color:var(--gold-line)}
.kxi-term>b{font-size:2rem;font-weight:900;line-height:1}
.kxi-term-unit{font-size:.75rem;color:var(--text-secondary);font-weight:700}
.kxi-term-rate{margin-top:.45rem;font-size:.92rem;font-weight:900;color:var(--mint)}
.kxi-term-total{font-size:.7rem;color:var(--text-muted)}
.kxi-term-loan{display:inline-flex;align-items:center;gap:.25rem;margin-top:.5rem;padding:.18rem .55rem;border-radius:999px;font-size:.66rem;font-weight:700;
  color:var(--text-muted);background:var(--hairline)}
.kxi-term-loan.is-yes{color:var(--mint);background:color-mix(in srgb,var(--mint) 12%,transparent)}
.kxi-term-flag{position:absolute;top:-.6rem;left:50%;transform:translateX(-50%);white-space:nowrap;padding:.12rem .55rem;border-radius:999px;font-size:.62rem;font-weight:800;
  color:var(--kx-ink-on-gold,#1a1306);background-image:var(--btn-gold)}
.kxi-term.is-on{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 9%,var(--kx-btn-ghost-bg,transparent));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 12%,transparent),0 14px 30px -18px color-mix(in srgb,var(--gold) 70%,transparent);transform:translateY(-2px)}
.kxi-term.is-on>b{color:var(--gold)}
.kxi-term{transition:border-color .2s,box-shadow .25s,transform .25s cubic-bezier(.34,1.56,.64,1),background-color .2s}
.kxi-term-check{position:absolute;top:.5rem;right:.5rem;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--gold);color:var(--bg-primary);animation:kxiPop .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes kxiPop{from{transform:scale(0)}to{transform:none}}

.kxi-next,.kxi-submit{width:100%;min-height:54px!important;font-size:1rem!important}
.kxi-back{min-height:36px!important;padding:.35rem .8rem!important;font-size:.8rem!important}

/* charity */
.kxi-charity-hero{display:grid;justify-items:center;gap:.3rem;text-align:center;padding:.4rem 0}
.kxi-heart{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;color:var(--rose);
  background:color-mix(in srgb,var(--rose) 13%,transparent);transform:scale(var(--s,1));transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.kxi-heart svg{fill:currentColor}
.kxi-charity-hero b{font-size:2.6rem;font-weight:900;color:var(--amber);line-height:1.1}
.kxi-charity-hero p{margin:0;font-size:.84rem;color:var(--text-secondary)}
.kxi-impact{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.kxi-impact div{display:grid;gap:.15rem;padding:.75rem .9rem;border-radius:14px;border:1px solid color-mix(in srgb,var(--amber) 28%,transparent);
  background:color-mix(in srgb,var(--amber) 8%,transparent)}
.kxi-impact span{font-size:.74rem;color:var(--text-secondary)}
.kxi-impact b{font-size:1.15rem;font-weight:900;color:var(--amber)}
.kxi-hint{margin:0;font-size:.76rem;color:var(--text-muted)}

/* review */
.kxi-receipt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
@media (min-width:640px){.kxi-receipt{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kxi-receipt div{display:grid;gap:.15rem;padding:.7rem .85rem;border-radius:14px;border:1px solid var(--hairline);background:var(--kx-btn-ghost-bg,transparent)}
.kxi-receipt span{font-size:.72rem;color:var(--text-muted)}
.kxi-receipt b{font-size:.92rem;font-weight:800}
.kxi-rules{border-radius:16px;border:1px solid var(--hairline);overflow:hidden}
.kxi-rules-head{display:flex;align-items:center;gap:.5rem;width:100%;padding:.85rem 1rem;background:none;border:0;font-weight:800;font-size:.9rem;color:var(--text-primary)}
.kxi-rules-head svg:first-child{color:var(--gold)}
.kxi-rules-caret{margin-inline-start:auto;transition:transform .25s}
.kxi-rules.is-open .kxi-rules-caret{transform:rotate(-90deg)}
.kxi-rules ol{list-style:none;margin:0;padding:0 1rem .9rem;display:grid;gap:.5rem;animation:kxiIn .3s ease both}
.kxi-rules li{display:flex;gap:.6rem;font-size:.84rem;line-height:1.95;color:var(--text-secondary)}
.kxi-rules li span{flex:none;display:grid;place-items:center;width:22px;height:22px;margin-top:.2rem;border-radius:7px;font-size:.7rem;font-weight:800;
  color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,transparent)}
.kxi-contract{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.85rem 1rem;border-radius:14px;font-weight:800;font-size:.88rem;
  color:var(--gold);border:1px solid var(--gold-line);background:color-mix(in srgb,var(--gold) 7%,transparent);transition:background-color .2s}
.kxi-contract:hover{background:color-mix(in srgb,var(--gold) 12%,transparent)}
.kxi-contract span{display:flex;align-items:center;gap:.5rem}
.kxi-agree{display:flex;align-items:flex-start;gap:.7rem;padding:.85rem 1rem;border-radius:14px;cursor:pointer;font-size:.88rem;font-weight:600;line-height:1.9;
  border:1px solid var(--hairline);transition:border-color .2s,background-color .2s}
.kxi-agree input{position:absolute;opacity:0;pointer-events:none}
.kxi-agree-box{flex:none;display:grid;place-items:center;width:22px;height:22px;margin-top:.2rem;border-radius:7px;border:2px solid var(--gold-line);color:transparent;transition:all .2s}
.kxi-agree.is-on{border-color:color-mix(in srgb,var(--mint) 45%,transparent);background:color-mix(in srgb,var(--mint) 8%,transparent)}
.kxi-agree.is-on .kxi-agree-box{background:var(--mint);border-color:var(--mint);color:#fff;animation:kxiPop .3s cubic-bezier(.34,1.56,.64,1)}
.kxi-agree input:focus-visible+.kxi-agree-box{box-shadow:var(--kx-focus)}
.kxi-spin{width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;border-top-color:transparent;animation:kxiSpin .7s linear infinite}
@keyframes kxiSpin{to{transform:rotate(360deg)}}

/* summary */
.kxi-summary{padding:1.25rem;display:grid;gap:.9rem}
.kxi-sum-amount{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem}
.kxi-sum-amount b{font-size:2.3rem;font-weight:900;line-height:1.1}
.kxi-sum-amount>span{font-size:1.2rem;font-weight:800;color:var(--gold)}
.kxi-sum-amount small{flex-basis:100%;font-size:.8rem;color:var(--text-secondary)}
.kxi-growth{display:flex;align-items:flex-end;gap:4px;height:64px;padding:.3rem 0;border-bottom:1px dashed var(--hairline)}
.kxi-growth i{flex:1;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,var(--gold),color-mix(in srgb,var(--gold) 25%,transparent));
  transform-origin:bottom;animation:kxiBar .5s cubic-bezier(.22,1,.36,1) both;transition:height .4s cubic-bezier(.22,1,.36,1)}
@keyframes kxiBar{from{transform:scaleY(0)}to{transform:none}}
.kxi-sum-list{display:grid;gap:.55rem;margin:0}
.kxi-sum-list div{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.kxi-sum-list dt{font-size:.8rem;color:var(--text-secondary)}
.kxi-sum-list dd{margin:0;font-weight:800}
.kxi-sum-list .is-mint{color:var(--mint)}.kxi-sum-list .is-gold{color:var(--gold)}.kxi-sum-list .is-amber{color:var(--amber)}

/* done / closed / loading */
.kxi-done{justify-items:center;text-align:center;padding:2rem 1.25rem}
.kxi-done-mark{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;color:#fff;background:var(--mint);
  box-shadow:0 0 0 10px color-mix(in srgb,var(--mint) 15%,transparent);animation:kxiPop .5s cubic-bezier(.34,1.56,.64,1)}
.kxi-done h3{margin:.4rem 0 0;font-size:1.25rem;font-weight:900}
.kxi-done p{margin:0;max-width:440px;font-size:.9rem;line-height:2;color:var(--text-secondary)}
.kxi-done-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:.4rem}
.kxi-closed{justify-items:center;text-align:center;padding:2rem;color:var(--text-secondary)}
.kxi-closed svg{color:var(--gold)}
.kxi-skeleton{display:grid;gap:1rem}
.kxi-skeleton i{display:block;height:120px;border-radius:22px;background:linear-gradient(90deg,var(--hairline),color-mix(in srgb,var(--gold) 6%,transparent),var(--hairline));
  background-size:200% 100%;animation:kxiShimmer 1.4s linear infinite}
@keyframes kxiShimmer{to{background-position:-200% 0}}
@media (max-width:420px){
  .kxi-term>b{font-size:1.6rem}.kxi-term-total{display:none}
  .kxi-amount{grid-template-columns:44px minmax(0,1fr) 44px}.kxi-stepbtn{height:46px}
  .kxi-amount-field input{font-size:2rem}
}
@media (prefers-reduced-motion:reduce){.kxi-panel,.kxi-growth i,.kxi-term-check,.kxi-done-mark{animation:none}}

/* ==========================================================================
   Sign-in / sign-up (kxa2-)
   ========================================================================== */
.kxa2{min-height:100dvh;display:grid;place-items:center;padding:1.25rem 1rem 2rem}
.kxa2-shell{width:min(100%,980px);display:grid;padding:0;border-radius:28px;overflow:hidden}
.kxa2-shell:hover{transform:none}
@media (min-width:900px){.kxa2-shell{grid-template-columns:1.05fr 1fr;min-height:620px}}

/* brand side */
.kxa2-brand{position:relative;display:none;flex-direction:column;justify-content:space-between;gap:2rem;padding:2.5rem;overflow:hidden;
  background:linear-gradient(160deg,#151922 0%,#0c0f15 100%);color:#eef0f4;isolation:isolate}
@media (min-width:900px){.kxa2-brand{display:flex}}
.kxa2-brand-glow{position:absolute;inset:-30% -20% auto auto;width:520px;height:520px;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(233,185,95,.28),transparent 62%);filter:blur(10px);animation:kxa2Float 9s ease-in-out infinite alternate}
@keyframes kxa2Float{to{transform:translate(-40px,60px) scale(1.08)}}
.kxa2-brand::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:36px 36px;mask-image:radial-gradient(ellipse at 70% 30%,#000 10%,transparent 70%)}
.kxa2-brand-top,.kxa2-mobile-brand{display:flex;align-items:center;gap:.75rem}
.kxa2-brand-top b,.kxa2-mobile-brand b{display:block;font-size:1.15rem;font-weight:900;letter-spacing:.08em}
.kxa2-brand-top span,.kxa2-mobile-brand span{font-size:.75rem;opacity:.7}
.kxa2-logo{width:46px;height:46px;border-radius:14px;object-fit:cover;border:1px solid rgba(233,185,95,.35)}
.kxa2-brand-mid h2{margin:0;font-size:2rem;line-height:1.55;font-weight:900}
.kxa2-brand-mid h2 span{color:#e9b95f}
.kxa2-stat{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin-top:1.4rem;padding:.6rem .95rem;border-radius:14px;font-size:.85rem;
  background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.28);color:#c8f5e2}
.kxa2-stat b{font-size:1.1rem;color:#34d399}
.kxa2-stat-dot{width:8px;height:8px;border-radius:50%;background:#34d399;animation:kxmPulse 2s infinite}
.kxa2-perks{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:1rem}
.kxa2-perks li{display:flex;align-items:flex-start;gap:.8rem}
.kxa2-perks b{display:block;font-size:.92rem}
.kxa2-perks li span:not(.kxa2-perk-icon){font-size:.8rem;opacity:.65;line-height:1.8}
.kxa2-perk-icon{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:#e9b95f;
  background:rgba(233,185,95,.1);border:1px solid rgba(233,185,95,.25)}
.kxa2-candles{width:110px;height:60px;opacity:.9}
.kxa2-brand-foot{display:flex;justify-content:flex-end}

/* form side */
.kxa2-panel{display:flex;flex-direction:column;gap:1.25rem;padding:1.5rem 1.25rem;min-width:0}
@media (min-width:480px){.kxa2-panel{padding:2rem 2rem}}
@media (min-width:900px){.kxa2-panel{padding:2.75rem 2.5rem;justify-content:center}.kxa2-mobile-brand{display:none!important}}
.kxa2-mobile-brand{justify-content:center}
.kxa2-mobile-brand span{color:var(--text-secondary);opacity:1}

.kxa2-tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:16px;background:var(--hairline);isolation:isolate}
.kxa2-tabs a{position:relative;z-index:1;display:grid;place-items:center;height:42px;border-radius:12px;font-weight:800;font-size:.92rem;color:var(--text-secondary);transition:color .25s}
.kxa2-tabs a.is-on{color:var(--kx-ink-on-gold,#1a1306)}
.kxa2-tabs-pill{position:absolute;top:4px;bottom:4px;width:calc(50% - 4px);border-radius:12px;background-image:var(--btn-gold);z-index:0;
  box-shadow:0 6px 16px -8px rgba(228,173,79,.7);transition:inset-inline-start .35s cubic-bezier(.34,1.4,.64,1)}
.kxa2-tabs-pill[data-side=login]{inset-inline-start:4px}
.kxa2-tabs-pill[data-side=register]{inset-inline-start:50%}

.kxa2-form{display:grid;gap:1rem;animation:kxiIn .35s cubic-bezier(.22,1,.36,1) both}
.kxa2-head{display:grid;gap:.35rem}
.kxa2-head h1{margin:0;font-size:1.45rem;font-weight:900}
.kxa2-head p{margin:0;font-size:.88rem;line-height:1.95;color:var(--text-secondary)}
.kxa2-head p b{color:var(--text-primary);font-weight:800;margin:0 .15rem}
.kxa2-head-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;margin-bottom:.3rem;color:var(--gold);
  background:color-mix(in srgb,var(--gold) 12%,transparent);border:1px solid var(--gold-line)}

.kxa2-field{display:grid;gap:.4rem}
.kxa2-label{font-size:.8rem;font-weight:700;color:var(--text-secondary)}
.kxa2-label small{font-weight:500;color:var(--text-muted)}
.kxa2-input{position:relative;display:flex;align-items:center;gap:.6rem;height:54px;padding:0 1rem;border-radius:16px;
  border:1px solid var(--kx-btn-ghost-border,var(--hairline));background:var(--kx-btn-ghost-bg,transparent);transition:border-color .2s,box-shadow .2s}
.kxa2-input>svg,.kxa2-phone-icon{flex:none;color:var(--text-muted);display:grid;transition:color .2s}
.kxa2-input input{flex:1;min-width:0;height:100%;background:none;border:0;outline:none;font-size:16px;font-weight:600;color:var(--text-primary)}
.kxa2-input input[dir=ltr]{text-align:left;letter-spacing:.04em}
.kxa2-input input::placeholder{color:var(--text-muted);font-weight:400;letter-spacing:0}
.kxa2-input:focus-within{border-color:var(--gold);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 14%,transparent)}
.kxa2-input:focus-within>svg,.kxa2-input:focus-within .kxa2-phone-icon{color:var(--gold)}
.kxa2-field.is-bad .kxa2-input{border-color:color-mix(in srgb,var(--rose) 60%,transparent)}
.kxa2-field.is-good .kxa2-phone-icon{color:var(--mint)}
.kxa2-ok{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--mint);color:#fff;animation:kxiPop .3s cubic-bezier(.34,1.56,.64,1)}
.kxa2-err{font-size:.76rem;color:var(--rose)}
.kxa2-add{justify-self:start;display:inline-flex;align-items:center;gap:.4rem;padding:.3rem 0;background:none;border:0;font-size:.82rem;font-weight:700;color:var(--gold)}
.kxa2-wide{width:100%;min-height:54px!important;font-size:1rem!important}
.kxa2-msg{display:flex;align-items:center;gap:.45rem;margin:0;padding:.7rem .9rem;border-radius:14px;font-size:.84rem;font-weight:600;line-height:1.8}
.kxa2-msg.is-error{color:var(--rose);background:color-mix(in srgb,var(--rose) 10%,transparent);border:1px solid color-mix(in srgb,var(--rose) 30%,transparent)}
.kxa2-link{background:none;border:0;padding:0;margin-inline-start:.4rem;font-weight:800;font-size:.84rem;color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.kxa2-center{justify-self:center;margin:0}
.kxa2-switch{margin:.25rem 0 0;text-align:center;font-size:.88rem;color:var(--text-secondary)}
.kxa2-switch a,.kxa2-terms a{font-weight:800;color:var(--gold)}
.kxa2-terms{margin:-.4rem 0 0;text-align:center;font-size:.74rem;color:var(--text-muted)}
.kxa2-home{align-self:center;display:inline-flex;align-items:center;gap:.25rem;font-size:.8rem;color:var(--text-muted)}
.kxa2-home:hover{color:var(--gold)}
.kxa2-spin{width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;border-top-color:transparent;animation:kxiSpin .7s linear infinite}

/* code boxes */
.kxa2-otp{display:grid;justify-items:center}
.kxa2-otp{width:100%}
.kxa2-otp .otp-row{display:flex;justify-content:center;gap:clamp(.3rem,2vw,.55rem);width:100%;max-width:360px;margin-inline:auto}
.kxa2-otp .otp-cell{flex:1 1 0!important;width:auto!important;min-width:0!important;max-width:56px;aspect-ratio:auto!important;height:clamp(50px,14vw,60px)!important;border-radius:14px}
.kxa2-form>*,.kxa2-panel>*{min-width:0}
.kxa2-otp .otp-input{font-size:1.5rem!important;font-weight:900}
.kxa2-timer{display:grid;gap:.5rem}
.kxa2-timer-bar{height:4px;border-radius:4px;background:var(--hairline);overflow:hidden}
.kxa2-timer-bar i{display:block;height:100%;border-radius:inherit;background:var(--btn-gold);transition:width 1s linear;margin-inline-start:auto}
.kxa2-timer-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.8rem;color:var(--text-muted)}
.kxa2-resend{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .75rem;border-radius:999px;font-size:.8rem;font-weight:800;
  background:color-mix(in srgb,var(--gold) 10%,transparent);border:1px solid var(--gold-line);color:var(--gold)}
.kxa2-resend:disabled{filter:none!important;opacity:.45}

/* states */
.kxa2-state{display:grid;justify-items:center;gap:.7rem;text-align:center;padding:1.5rem 0;animation:kxiIn .35s ease both}
.kxa2-state h1{margin:.3rem 0 0;font-size:1.35rem;font-weight:900}
.kxa2-state p{margin:0;font-size:.88rem;line-height:2;color:var(--text-secondary)}
.kxa2-state-icon{display:grid;place-items:center;width:78px;height:78px;border-radius:50%;animation:kxiPop .5s cubic-bezier(.34,1.56,.64,1)}
.kxa2-state-icon.is-ok{color:#fff;background:var(--mint);box-shadow:0 0 0 10px color-mix(in srgb,var(--mint) 15%,transparent)}
.kxa2-state-icon.is-lock{color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,transparent)}
@media (prefers-reduced-motion:reduce){.kxa2-brand-glow,.kxa2-form,.kxa2-state,.kxa2-state-icon{animation:none}}

/* ==========================================================================
   Mobile fixes found by the 320px audit
   ========================================================================== */
.cd-party{min-width:0;overflow-wrap:anywhere}
@media (max-width:640px){
  .cd-parties,.cd-sign{grid-template-columns:minmax(0,1fr)}
  .contract-toolbar{flex-wrap:wrap;gap:8px;padding:10px 12px}
  .contract-toolbar>*{min-width:0}
  .contract-toolbar .ct-title{flex-basis:100%;justify-content:center;order:-1}
  .contract-toolbar .ct-btn{flex:1 1 auto;justify-content:center;padding:.55rem .7rem;font-size:.8rem}
}
/* small text buttons get a finger-sized hit area on touch screens */
@media (pointer:coarse){#root button.text-\[11px\],#root button.text-\[10px\]{min-height:34px;padding-inline:.7rem}}

/* ==========================================================================
   Sign-in / sign-up, calmer: one centred card, logo on top, nothing else
   ========================================================================== */
.kxa2{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}
.kxa2-shell{display:flex!important;flex-direction:column;gap:1.4rem;width:min(100%,400px);min-height:0!important;padding:2rem 1.5rem 1.75rem;border-radius:24px}
@media (min-width:480px){.kxa2-shell{padding:2.25rem 2rem 2rem}}
.kxa2-mobile-brand{display:flex!important;flex-direction:column;align-items:center;gap:.55rem}
.kxa2-mobile-brand .kxa2-logo{width:52px;height:52px;border-radius:16px}
.kxa2-mobile-brand b{font-size:1rem;letter-spacing:.18em;color:var(--text-primary)}
.kxa2-tabs a{height:40px;font-size:.88rem}
.kxa2-form{gap:1.1rem}
.kxa2-head{text-align:center;gap:.25rem}
.kxa2-head h1{font-size:1.3rem}
.kxa2-head p{font-size:.84rem;color:var(--text-muted)}
.kxa2-label{font-size:.76rem;font-weight:600;color:var(--text-muted)}
.kxa2-input{height:52px;padding:0 .95rem}
.kxa2-add{justify-self:center;font-weight:600;font-size:.8rem;color:var(--text-muted)}
.kxa2-add:hover{color:var(--gold)}
.kxa2-wide{min-height:52px!important}
.kxa2-timer{margin:0;text-align:center;font-size:.82rem;color:var(--text-muted)}
.kxa2-timer .kxa2-link{margin:0}
.kxa2-terms{margin:0;font-size:.72rem}
.kxa2-home{font-size:.8rem;color:var(--text-muted)}

/* ==========================================================================
   Wallet (kxw-) — a finance-app layout for the investor's money
   ========================================================================== */
.kxw{display:grid;gap:1rem}
.kxw-grid{display:grid;gap:1rem;align-items:start}
@media (min-width:900px){.kxw-grid{grid-template-columns:1fr 1fr}}
.kxw-col{display:grid;gap:1rem;min-width:0}
.kxw-card{padding:1.15rem 1.2rem;display:grid;gap:.9rem}
.kxw-card:hover{transform:none}
.kxw-card-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.kxw-card-head h3{margin:0;font-size:1rem;font-weight:800}
.kxw-link{font-size:.8rem;font-weight:700;color:var(--gold)}
.kxw-muted{font-size:.76rem;color:var(--text-muted)}

/* hero */
.kxw-hero{padding:1.35rem 1.3rem;display:grid;gap:1rem;
  background:radial-gradient(120% 120% at 100% 0%,color-mix(in srgb,var(--gold) 12%,transparent),transparent 60%),linear-gradient(150deg,var(--surface-start),var(--surface-end))}
.kxw-hero:hover{transform:none}
.kxw-hero-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.kxw-label{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--text-secondary)}
.kxw-eye{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:none;border:1px solid var(--hairline);color:var(--text-muted)}
.kxw-unit{display:inline-flex;padding:3px;border-radius:12px;background:var(--hairline)}
.kxw-unit button{padding:.3rem .8rem;border-radius:9px;border:0;background:none;font-size:.78rem;font-weight:700;color:var(--text-secondary)}
.kxw-unit button.is-on{background:var(--bg-secondary);color:var(--text-primary);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.kxw-total{display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap}
.kxw-total b{font-size:clamp(2rem,8vw,2.7rem);font-weight:900;line-height:1.1;letter-spacing:-.01em}
.kxw-total span{font-size:1rem;font-weight:700;color:var(--text-secondary)}
.kxw-split{display:flex;gap:3px;height:8px;border-radius:999px;overflow:hidden;background:var(--hairline)}
.kxw-split i{display:block;min-width:0;transition:width .6s cubic-bezier(.22,1,.36,1)}
.is-gold{--c:var(--gold)}.is-mint{--c:var(--mint)}.is-royal{--c:var(--royal)}
.kxw-split i,.kxw-legend i{background:var(--c)}
.kxw-legend{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;font-size:.78rem;color:var(--text-secondary)}
.kxw-legend span{display:inline-flex;align-items:center;gap:.35rem}
.kxw-legend i{width:8px;height:8px;border-radius:50%}
.kxw-legend b{color:var(--text-primary);font-weight:800}
.kxw-hero-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem;padding-top:.85rem;border-top:1px solid var(--hairline)}
.kxw-ticker{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .7rem;border-radius:10px;background:var(--hairline);font-size:.8rem;transition:background-color .4s,color .4s}
.kxw-ticker b{font-size:.95rem;font-weight:900}
.kxw-ticker small{color:var(--text-muted)}
.kxw-pair{font-size:.7rem;font-weight:800;letter-spacing:.06em;color:var(--text-muted)}
.kxw-ticker.is-up{background:color-mix(in srgb,var(--mint) 18%,transparent);color:var(--mint)}
.kxw-ticker.is-down{background:color-mix(in srgb,var(--rose) 16%,transparent);color:var(--rose)}
.kxw-live{width:7px;height:7px;border-radius:50%;background:var(--mint);animation:kxmPulse 2s infinite}
.kxw-profit{font-size:.8rem;color:var(--text-secondary)}
.kxw-profit b{color:var(--mint);font-weight:800}

/* quick actions */
.kxw-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}
.kxw-action{display:grid;justify-items:center;gap:.4rem;padding:.75rem .25rem;border-radius:18px;border:1px solid var(--card-border);
  background:linear-gradient(150deg,var(--surface-start),var(--surface-end));font-size:.78rem;font-weight:700;color:var(--text-primary)}
.kxw-action:hover{border-color:var(--gold-line)}
.kxw-action-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;color:var(--gold);
  background:color-mix(in srgb,var(--gold) 12%,transparent);transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.kxw-action:hover .kxw-action-icon{transform:translateY(-2px)}
.kxw-action:active .kxw-action-icon{transform:scale(.9)}

/* assets */
.kxw-assets{list-style:none;margin:0;padding:0;display:grid}
.kxw-assets li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.4rem .8rem;padding:.75rem 0;border-top:1px solid var(--hairline)}
.kxw-assets li:first-child{border-top:0;padding-top:0}
.kxw-asset-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;color:var(--c);background:color-mix(in srgb,var(--c) 13%,transparent)}
.kxw-asset-name{display:grid;gap:.1rem}
.kxw-asset-name b{font-size:.9rem}
.kxw-asset-name small{font-size:.68rem;font-weight:700;letter-spacing:.06em;color:var(--text-muted)}
.kxw-asset-amount{display:grid;gap:.1rem;text-align:left}
.kxw-asset-amount b{font-size:.92rem;font-weight:800}
.kxw-asset-amount small{font-size:.72rem;color:var(--text-muted)}
.kxw-asset-note{grid-column:1/-1;display:flex;align-items:flex-start;gap:.35rem;margin:0;padding:.55rem .7rem;border-radius:12px;font-size:.75rem;line-height:1.9;
  color:var(--amber);background:color-mix(in srgb,var(--amber) 10%,transparent)}
.kxw-asset-note svg{flex:none;margin-top:.3rem}

/* converter */
.kxw-swap{position:relative;display:grid;gap:.35rem}
.kxw-leg{display:grid;gap:.4rem;padding:.8rem .95rem;border-radius:16px;border:1px solid var(--hairline);background:var(--kx-btn-ghost-bg,transparent)}
.kxw-leg:focus-within{border-color:var(--gold)}
.kxw-leg.is-get{background:color-mix(in srgb,var(--gold) 6%,transparent)}
.kxw-leg-top{display:flex;align-items:center;justify-content:space-between;gap:.4rem;font-size:.75rem;color:var(--text-muted)}
.kxw-leg-row{display:flex;align-items:center;gap:.5rem}
.kxw-leg-row input,.kxw-leg-row output{flex:1;min-width:0;background:none;border:0;outline:none;font-size:1.45rem;font-weight:900;color:var(--text-primary);text-align:left;padding:0}
.kxw-leg-row b{font-size:.85rem;color:var(--text-secondary)}
.kxw-max{padding:.15rem .55rem;border-radius:999px;border:1px solid var(--gold-line);background:none;font-size:.7rem;font-weight:700;color:var(--gold)}
.kxw-flip{position:absolute;inset-inline-start:50%;top:50%;transform:translate(50%,-50%);z-index:1;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;
  border:3px solid var(--bg-primary);background-image:var(--btn-gold);color:var(--kx-ink-on-gold,#1a1306);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
[dir=rtl] .kxw-flip{transform:translate(50%,-50%)}
.kxw-flip:hover{transform:translate(50%,-50%) rotate(180deg)!important}
.kxw-rate-line{margin:0;font-size:.74rem;color:var(--text-muted);text-align:center}
.kxw-wide{width:100%;min-height:50px!important}
.kxw-note{margin:0;padding:.6rem .8rem;border-radius:12px;font-size:.8rem;line-height:1.9;background:var(--hairline);color:var(--text-secondary)}
.kxw-note.is-ok{background:color-mix(in srgb,var(--mint) 12%,transparent);color:var(--mint)}
.kxw-note.is-bad{background:color-mix(in srgb,var(--rose) 11%,transparent);color:var(--rose)}

/* deposits */
.kxw-deps{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.kxw-deps li{display:grid;gap:.5rem;padding:.8rem .9rem;border-radius:16px;border:1px solid var(--hairline)}
.kxw-dep-top{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem}
.kxw-dep-top b{font-size:1.05rem;font-weight:900}
.kxw-dep-top span{font-size:.76rem;color:var(--text-secondary)}
.kxw-bar{height:6px;border-radius:999px;background:var(--hairline);overflow:hidden}
.kxw-bar i{display:block;height:100%;border-radius:inherit;background:var(--btn-gold);margin-inline-start:0}
.kxw-dep-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.3rem .6rem;font-size:.74rem;color:var(--text-muted)}
.kxw-next{font-weight:700;color:var(--mint)}
.kxw-empty{display:grid;justify-items:center;gap:.7rem;margin:0;padding:1rem 0;text-align:center;font-size:.85rem;color:var(--text-muted)}

/* recent */
.kxw-tx{list-style:none;margin:0;padding:0;display:grid}
.kxw-tx li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.75rem;padding:.65rem 0;border-top:1px solid var(--hairline)}
.kxw-tx li:first-child{border-top:0;padding-top:0}
.kxw-tx-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--hairline);color:var(--text-secondary)}
.kxw-tx-icon.is-in{color:var(--mint);background:color-mix(in srgb,var(--mint) 12%,transparent)}
.kxw-tx-icon.is-out{color:var(--rose);background:color-mix(in srgb,var(--rose) 11%,transparent)}
.kxw-tx-main{display:grid;gap:.1rem;min-width:0}
.kxw-tx-main b{font-size:.84rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kxw-tx-main small{font-size:.7rem;color:var(--text-muted)}
.kxw-tx-amount{display:grid;text-align:left;gap:.1rem}
.kxw-tx-amount b{font-size:.84rem;font-weight:800}
.kxw-tx-amount.is-in b{color:var(--mint)}
.kxw-tx-amount small{font-size:.68rem;color:var(--amber)}

.kxw-skeleton{display:grid;gap:1rem}
.kxw-skeleton i{display:block;height:130px;border-radius:22px;background:linear-gradient(90deg,var(--hairline),color-mix(in srgb,var(--gold) 6%,transparent),var(--hairline));
  background-size:200% 100%;animation:kxiShimmer 1.4s linear infinite}
@media (max-width:420px){.kxw-action{font-size:.72rem}.kxw-action-icon{width:38px;height:38px}}

/* wallet page: withdraw card and full history moved here from the account page */
.kxw-card .kx-ww{margin:0;padding:0;border:0;background:none}
.kxw-card .kx-ww-head{display:none}
.kxw-history{display:grid}

/* account tabs: four tabs now (wallet and history moved to the wallet page) */
.kx-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:639.98px){
  .kx-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
  .kx-tab{padding:.45rem .15rem;font-size:.72rem;line-height:1.35;text-align:center}
}
@media (max-width:359.98px){.kx-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* wallet total: the figure and its unit slide in when the unit changes */
.kxw-total b,.kxw-total span{display:inline-block;animation:kxwIn .55s cubic-bezier(.22,1,.36,1) both}
.kxw-total span{animation-delay:.08s}
.kxw-total b{font-variant-numeric:tabular-nums}
@keyframes kxwIn{from{opacity:0;transform:translateY(10px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.kxw-unit button{transition:background-color .25s ease,color .25s ease,box-shadow .25s ease}
@media (prefers-reduced-motion:reduce){.kxw-total b,.kxw-total span{animation:none}}

/* in-page confirm sits above the dock and the notification panel */
.kx-confirm{z-index:2147483002!important}
/* result of cancelling a deposit, under its button */
.kx-dep-msg{margin-top:.6rem;padding:.6rem .8rem;border-radius:12px;font-size:.82rem;line-height:1.9;
  color:var(--text-primary);background:color-mix(in srgb,var(--gold) 10%,transparent);border:1px solid var(--gold-line)}