/* Self-hosted Figtree variable font, SIL Open Font License 1.1. */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/user/assets/fonts/figtree-latin-ext.woff2?v=4ba7d3d09669') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/user/assets/fonts/figtree-latin.woff2?v=4ba7d3d09669') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ===== Source: style.css ===== */
/* ============================================================
   style.css  —  Dashboard UI (FIXED & ENHANCED)
   Font: Figtree (self-hosted in the dashboard bundle)
   Theme: clean white/light — refined, flat, no card-in-card
   Place at: user/assets/css/style.css
   ============================================================ */

/* ── CSS VARIABLES (Aldeapath brand / light theme) ─────────── */
:root {
  --brand:        #00c9b7;
  --brand-dark:   #1a3560;
  --brand-light:  #e8f8f6;
  --brand-shadow: 0 8px 28px rgba(0,201,183,.28);

  --success:        #16a34a;
  --success-bg:     #f0fdf4;
  --success-border: #bbf7d0;

  --warning:        #d97706;
  --warning-bg:     #fffbeb;
  --warning-border: #fde68a;

  --danger:         #dc2626;
  --danger-bg:      #fef2f2;
  --danger-border:  #fecaca;

  --bg:      #f5f5f5;
  --surface: #ffffff;
  --card:    #ffffff;
  --border:  #eaeff6;
  --text:    #0f172a;
  --text-2:  #334155;
  --muted:   #64748b;

  --radius-sm: 10px;
  --radius:    14px;
  --radius-lg: 20px;

  --nav-h:    60px;
  --header-h: 60px;

  --shadow-xs: 0 1px 3px rgba(15,23,42,.05), 0 1px 2px rgba(15,23,42,.04);
  --shadow-sm: 0 2px 8px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
  --shadow-md: 0 4px 16px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.04);

  /* Font size scale */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 0.875rem;
  --fs-lg: 1rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 2rem;
}

/* ── DARK MODE VARIABLES ────────────────────────────────────── */
[data-theme="dark"] {
  --bg:      #0d1b30;
  --surface: #14243a;
  --card:    #14243a;
  --border:  rgba(255,255,255,.12);
  --text:    #f5fbfa;
  --text-2:  #d6e7e4;
  --muted:   #9db3b0;

  --brand-light:    rgba(0,201,183,.16);

  --success-bg:     rgba(22,163,74,.15);
  --success-border: rgba(22,163,74,.3);

  --warning-bg:     rgba(217,119,6,.15);
  --warning-border: rgba(217,119,6,.3);

  --danger-bg:      rgba(220,38,38,.15);
  --danger-border:  rgba(220,38,38,.3);

  --shadow-xs: 0 1px 3px rgba(0,0,0,.3);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.35);
  --shadow-md: 0 4px 16px rgba(0,0,0,.4);
}

/* ── GLOBAL RESET & BASE ───────────────────────────────────── */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background .25s, color .25s;
}

/* Fallback for dynamic viewport height */
.app-shell {
  height: 100vh;
  height: 100dvh;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ── FULL-SCREEN LOADER — Ripple Design ─────────────────────── */
.full-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  transition: opacity .45s ease, visibility .45s ease;
}

.full-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Ripple container */
.ripple-loader-wrap {
  position: relative;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Three expanding rings */
.ripple-ring {
  position: absolute;
  border-radius: 50%;
  animation: tv-ripple 2.4s cubic-bezier(0.21, 0.61, 0.35, 1) infinite;
  will-change: width, height, opacity;
}

.ripple-ring:nth-child(1) { animation-delay: 0s;   }
.ripple-ring:nth-child(2) { animation-delay: 0.8s; }
.ripple-ring:nth-child(3) { animation-delay: 1.6s; }

@keyframes tv-ripple {
  0% {
    width: 52px;
    height: 52px;
    opacity: 0.65;
    border: 2px solid rgba(0, 201, 183, 0.85);
    box-shadow: 0 0 0 0 rgba(0, 201, 183, 0.2);
  }
  50% {
    opacity: 0.3;
    border: 2px solid rgba(0, 201, 183, 0.5);
    box-shadow: 0 0 0 6px rgba(0, 201, 183, 0.08);
  }
  100% {
    width: 160px;
    height: 160px;
    opacity: 0;
    border: 2px solid rgba(34, 197, 94, 0);
    box-shadow: 0 0 0 18px rgba(34, 197, 94, 0);
  }
}

/* Center logo circle */
.ripple-logo-center {
  position: relative;
  z-index: 2;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow:
    0 0 0 1.5px rgba(0, 201, 183, 0.12),
    0 4px 20px rgba(0, 201, 183, 0.15),
    0 1px 4px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  animation: tv-logo-pulse 2.4s ease-in-out infinite;
  will-change: transform;
}

@keyframes tv-logo-pulse {
  0%, 100% { transform: scale(1);    }
  50%       { transform: scale(1.04); }
}

/* Logo image inside the ripple center */
.ripple-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Brand name */
.ripple-brand-text {
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--text);
  line-height: 1;
}

.ripple-brand-text span { color: #4ade80; }

/* Status message */
.ripple-loader-text {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.01em;
  margin-top: -0.15rem;
  transition: opacity 0.3s ease;
  text-align: center;
}

/* ── TOAST ──────────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 1rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 8888;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  pointer-events: none;
  width: 90vw;
  max-width: 340px;
}

.toast {
  background: var(--text);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: .625rem 1.25rem;
  border-radius: 9999px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(10px) scale(.96);
  transition: opacity .25s, transform .25s;
  pointer-events: auto;
  max-width: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: var(--shadow-md);
}

.toast.show { opacity: 1; transform: translateY(0) scale(1); }
.toast-success { background: var(--success); }
.toast-error   { background: var(--danger); }
.toast-default { background: var(--text); }

/* ── BOTTOM SHEET ───────────────────────────────────────────── */
.sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.35);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}

.sheet-overlay.open { opacity: 1; pointer-events: auto; }

.bottom-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: .75rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  z-index: 800;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 -8px 40px rgba(15,23,42,.12);
}

.bottom-sheet.open { transform: translateY(0); }

.sheet-handle {
  width: 2.25rem;
  height: 3.5px;
  background: var(--border);
  border-radius: 9999px;
  margin: 0 auto 1rem;
}

.sheet-title {
  font-size: var(--fs-lg);
  font-weight: 800;
  margin-bottom: 1.25rem;
  letter-spacing: -.025em;
}

/* ── NOTIFICATION PANEL ─────────────────────────────────────── */
.notif-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
}

.notif-overlay.open { display: block; }

.notif-panel {
  position: fixed;
  top: calc(var(--header-h) + .5rem);
  right: .75rem;
  width: min(320px, calc(100vw - 1.5rem));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  z-index: 600;
  overflow: hidden;
  transform: scale(.96) translateY(-6px);
  opacity: 0;
  pointer-events: none;
  transition: transform .2s cubic-bezier(.4,0,.2,1), opacity .2s;
  transform-origin: top right;
}

.notif-panel.open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.notif-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .875rem 1rem .75rem;
  border-bottom: 1px solid var(--border);
}

.notif-panel-title {
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: -.015em;
}

.notif-mark-read {
  font-size: .75rem;
  font-weight: 600;
  color: var(--brand);
  background: none;
  border: none;
  cursor: pointer;
  padding: .25rem .5rem;
  border-radius: 9999px;
  transition: background .15s;
}

.notif-mark-read:hover { background: var(--brand-light); }

.notif-list { max-height: 320px; overflow-y: auto; }

.notif-item {
  display: flex;
  gap: .75rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
  cursor: default;
}

.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bg); }
.notif-item.unread { background: var(--brand-light); }

.notif-dot {
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
  margin-top: .4rem;
}

.notif-item.unread .notif-dot { background: var(--brand); }
.notif-item:not(.unread) .notif-dot { background: transparent; }

.notif-text { font-size: var(--fs-sm); line-height: 1.5; color: var(--text-2); }
.notif-time { font-size: var(--fs-xs); color: var(--muted); margin-top: .2rem; }

.notif-empty {
  padding: 2rem 1rem;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* ── LANGUAGE SELECTOR ──────────────────────────────────────── */
.lang-selector { position: relative; }

.lang-btn {
  display: flex;
  align-items: center;
  gap: .3rem;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  line-height: 1;
  transition: color .15s;
}

.lang-btn:hover { color: var(--brand); }
.lang-flag { font-size: .95rem; line-height: 1; }

.lang-chevron {
  width: .7rem;
  height: .7rem;
  color: var(--muted);
  transition: transform .2s;
  flex-shrink: 0;
}

.lang-selector.open .lang-chevron { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  min-width: 140px;
  overflow: hidden;
  z-index: 600;
  transform: scale(.95) translateY(-4px);
  opacity: 0;
  pointer-events: none;
  transition: transform .18s cubic-bezier(.4,0,.2,1), opacity .18s;
  transform-origin: top right;
}

.lang-selector.open .lang-menu {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.lang-option {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .65rem .875rem;
  background: none;
  border: none;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  text-align: left;
  transition: background .15s;
  font-family: inherit;
}

.lang-option:hover { background: var(--bg); color: var(--brand); }
.lang-option.active { color: var(--brand); background: var(--brand-light); }
.lang-option-flag { font-size: 1rem; }

/* ── NOTIFICATION BELL BUTTON ───────────────────────────────── */
.notif-btn {
  position: relative;
  background: transparent;
  border: none;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  cursor: pointer;
  padding: .3rem;
  flex-shrink: 0;
  transition: color .15s;
}

.notif-btn:hover { color: var(--brand); }
.notif-btn svg { width: 1.15rem; height: 1.15rem; }

@keyframes _dash-spin { to { transform: rotate(360deg); } }
#header-refresh-btn.spinning { opacity: .6; pointer-events: none; }
#header-refresh-btn.spinning svg { animation: _dash-spin .7s linear infinite; transform-origin: center; }

#ptr-indicator {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-4rem);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
}
.ptr-pill {
  display: flex;
  align-items: center;
  gap: .45rem;
  background: var(--surface, #fff);
  border-radius: 99px;
  padding: .45rem 1rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.16);
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-2, #374151);
  white-space: nowrap;
}
.ptr-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  transition: transform .3s ease, color .2s;
}
#ptr-indicator.ptr-ready .ptr-icon { transform: rotate(180deg); color: var(--brand, #2563eb); }
#ptr-indicator.ptr-spinning .ptr-icon { animation: _dash-spin .7s linear infinite; }
#ptr-indicator.ptr-done { transition: opacity .35s ease; opacity: 0 !important; }

/* ── OFFLINE BANNER ──────────────────────────────────────── */
#offline-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  background: #ef4444;
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  padding: .55rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  transform: translateY(-100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
#offline-banner.visible { transform: translateY(0); pointer-events: auto; }

/* ── HOME PENDING STATUS CHIPS ────────────────────────────── */
#home-pending-status {
  display: none;
  flex-direction: column;
  gap: .4rem;
  margin: .5rem 0 .25rem;
}
.home-status-chip {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .85rem;
  background: transparent;
  border: 1.5px solid currentColor;
  border-radius: 10px;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .15s;
}
.home-status-chip:active { opacity: .75; }
.home-status-chip span { flex: 1; }

/* ── TRANSACTION FILTER PILLS ─────────────────────────────── */
.txn-filter-row {
  display: flex;
  gap: .4rem;
  align-items: center;
  margin-bottom: 1rem;
}
.txn-filter-btn {
  flex: 1;
  padding: .48rem .5rem;
  background: var(--bg, #f3f4f6);
  border: 1.5px solid transparent;
  border-radius: 8px;
  font-size: .75rem;
  font-weight: 700;
  color: var(--muted, #6b7280);
  cursor: pointer;
  transition: all .18s ease;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
}
.txn-filter-btn.active {
  background: var(--brand, #2563eb);
  color: #fff;
  border-color: var(--brand, #2563eb);
}
.txn-export-btn {
  padding: .45rem .75rem;
  background: transparent;
  border: 1.5px solid var(--border, #e5e7eb);
  border-radius: 8px;
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-2, #374151);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.txn-export-btn:active { opacity: .75; }

.notif-badge {
  position: absolute;
  top: -.2rem;
  right: -.2rem;
  background: var(--danger);
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
  min-width: .95rem;
  height: .95rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 .18rem;
  border: 1.5px solid var(--surface);
  line-height: 1;
}

/* ── FORMS ──────────────────────────────────────────────────── */
.form-group { margin-bottom: 1rem; }

.form-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: .35rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.form-input {
  width: 100%;
  padding: .7rem .9rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
  font-family: inherit;
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border-color .2s, background .2s, box-shadow .2s;
}

.form-input:focus {
  border-color: var(--brand);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.1);
}

.form-input[readonly] { opacity: .55; cursor: default; }
textarea.form-input { resize: vertical; min-height: 6rem; }

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: .8rem 1.25rem;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: opacity .15s, transform .12s, box-shadow .15s;
  letter-spacing: -.01em;
}

.btn:active { transform: scale(.98); }
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 2px 8px rgba(var(--brand-rgb),.28);
}

.btn-primary:hover:not(:disabled) {
  background: var(--brand-dark);
  box-shadow: 0 4px 14px rgba(var(--brand-rgb),.38);
}

.btn-ghost {
  background: transparent;
  color: var(--text-2);
  border: 1.5px solid var(--border);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--bg);
  border-color: #c8d4e3;
}

/* ── BADGE ──────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .22rem .6rem;
  border-radius: 9999px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.badge-verified   { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
.badge-pending    { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); }
.badge-unverified { background: var(--danger-bg);  color: var(--danger);  border: 1px solid var(--danger-border); }

/* ── APP SHELL ──────────────────────────────────────────────── */
.app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  background: var(--bg);
}

/* ── MOBILE TOP HEADER ──────────────────────────────────────── */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  height: var(--header-h);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 300;
  gap: .5rem;
}

.header-brand {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  max-width: 160px;
}

.header-logo-img {
  height: 50px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  display: block;
}

/* ADD THIS NEW RULE */
.header-brand span {
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  color:  #1e3a8a;
}

/* Styles the second part "Vill" */
.header-brand span span {
  color: #4ade80;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-shrink: 0;
}

/* ── AVATAR ─────────────────────────────────────────────────── */
.avatar {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 100%);
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: .02em;
}

/* ── SLIDES VIEWPORT (Single definition) ───────────────────── */
.slides-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
  touch-action: pan-y pinch-zoom;
}

.slides-track {
  display: flex;
  height: 100%;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.slides-track[data-active="0"] { transform: translateX(0%); }
.slides-track[data-active="1"] { transform: translateX(-100%); }
.slides-track[data-active="2"] { transform: translateX(-200%); }
.slides-track[data-active="3"] { transform: translateX(-300%); }
.slides-track[data-active="4"] { transform: translateX(-400%); }
.slides-track[data-active="5"] { transform: translateX(-500%); }
.slides-track[data-active="6"] { transform: translateX(-600%); }
.slides-track[data-active="7"] { transform: translateX(-700%); }
.slides-track[data-active="8"] { transform: translateX(-800%); }
.slides-track[data-active="9"] { transform: translateX(-900%); }

.slide {
  min-width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 1.125rem 1rem 2rem;
  -webkit-overflow-scrolling: touch;
  scroll-snap-align: start;
}

/* ── BALANCE ROW — show/hide toggle ─────────────────────────── */
.balance-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0.3rem 0;
}

.balance-value {
  font-size: var(--fs-3xl);
  font-weight: 900;
  letter-spacing: -0.06em;
  color: var(--text);
  line-height: 1;
  transition: opacity .2s;
}

.balance-value.balance-hidden {
  letter-spacing: .05em;
  font-size: var(--fs-xl);
  opacity: .6;
}

.balance-eye-btn {
  background: rgba(15,23,42,.06);
  border: none;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, color .15s;
  margin-top: .2rem;
}

.balance-eye-btn:hover {
  background: rgba(var(--brand-rgb),.1);
  color: var(--brand);
}

[data-theme="dark"] .balance-eye-btn {
  background: rgba(255,255,255,.08);
}

/* ── HERO CARD ──────────────────────────────────────────────── */
.hero-card {
  background: linear-gradient(135deg, var(--brand-dark) 0%, #00695c 55%, var(--brand) 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 1.375rem 1.5rem 1.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: var(--brand-shadow);
}

.hero-card::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -15%;
  width: 220px;
  height: 220px;
  background: rgba(255,255,255,.07);
  border-radius: 50%;
  pointer-events: none;
}

.hero-card::after {
  content: '';
  position: absolute;
  bottom: -40%;
  left: -10%;
  width: 160px;
  height: 160px;
  background: rgba(255,255,255,.05);
  border-radius: 50%;
  pointer-events: none;
}

.hero-label {
  font-size: .75rem;
  font-weight: 600;
  opacity: .7;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: .3rem;
}

.hero-name {
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.2;
}

.hero-sub {
  font-size: var(--fs-xs);
  opacity: .7;
  margin-top: .2rem;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 9999px;
  padding: .28rem .7rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: capitalize;
  border: 1px solid rgba(255,255,255,.2);
}

/* ── SECTION HEADING ────────────────────────────────────────── */
.section-heading {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .09em;
  margin: 1.25rem 0 .75rem;
}

/* ── ACTION ROW ─────────────────────────────────────────────── */
.action-row {
  display: flex;
  gap: .625rem;
  flex-wrap: wrap;
}

.action-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .875rem .5rem;
  flex: 1 1 calc(16.6% - .625rem);
  min-width: 64px;
  max-width: 96px;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  box-shadow: var(--shadow-xs);
}

.action-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(15,23,42,.1);
}

.action-chip:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.action-chip-icon {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--brand-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
}

.action-chip-icon svg { width: 1rem; height: 1rem; }

.action-chip-label {
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-2);
  text-align: center;
  line-height: 1.2;
}

/* ── STAT GRID ──────────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .625rem;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  box-shadow: var(--shadow-xs);
}

.stat-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-icon svg { width: 1rem; height: 1rem; }

.stat-icon-brand  { background: var(--brand-light); color: var(--brand); }
.stat-icon-green  { background: var(--success-bg);  color: var(--success); }
.stat-icon-yellow { background: var(--warning-bg);  color: var(--warning); }
.stat-icon-red    { background: var(--danger-bg);   color: var(--danger); }

.stat-val { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.025em; }
.stat-lbl { font-size: .75rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }

/* ── CARD ───────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.card-body { padding: var(--space-4); }

/* ── SETTINGS ITEMS ─────────────────────────────────────────── */
.settings-item {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .875rem 1rem;
  cursor: pointer;
  transition: background .15s;
  border-bottom: 1px solid var(--border);
}

.settings-item:last-child { border-bottom: none; }
.settings-item:hover { background: var(--bg); }
.settings-item:active { background: var(--bg); }

.settings-item-left {
  display: flex;
  align-items: center;
  gap: .875rem;
  flex: 1;
  min-width: 0;
}

.settings-item-icon {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.settings-item-icon svg { width: 1.05rem; height: 1.05rem; }
.settings-item-title { font-size: .85rem; font-weight: 600; }
.settings-item-sub   { font-size: .75rem; color: var(--muted); margin-top: .1rem; }
.settings-item-arrow { color: var(--border); flex-shrink: 0; }
.settings-item-arrow svg { width: 1rem; height: 1rem; }

/* ── SETTINGS TOGGLES ────────────────────────────────────────── */
.settings-toggle {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  flex-shrink: 0;
}

.settings-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.settings-toggle-track {
  display: block;
  width: 2.375rem;
  height: 1.25rem;
  background: var(--border);
  border-radius: 9999px;
  transition: background .2s;
  position: relative;
}

.settings-toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(1.25rem - 4px);
  height: calc(1.25rem - 4px);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  transition: transform .2s cubic-bezier(.4,0,.2,1);
}

.settings-toggle input:checked + .settings-toggle-track { background: var(--brand); }
.settings-toggle input:checked + .settings-toggle-track::after { transform: translateX(1.125rem); }

/* ── SETTINGS OVERVIEW GRID ──────────────────────────────────── */
.settings-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .875rem .5rem;
}

.settings-overview-label {
  font-size: .75rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .2rem;
}

.settings-overview-value {
  font-size: .85rem;
  font-weight: 700;
  color: var(--text);
}

.settings-session-count {
  font-size: .75rem;
  font-weight: 700;
  color: var(--success);
  background: var(--success-bg);
  padding: .2rem .55rem;
  border-radius: 9999px;
  border: 1px solid var(--success-border);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   KYC WIZARD — complete redesign (with --card fix)
═══════════════════════════════════════════════════════════════ */

/* Page header */
.kyc-page-hdr {
  display: flex;
  align-items: center;
  gap: .875rem;
  margin-bottom: 1.25rem;
}
.kyc-page-hdr-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--brand-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--brand);
}

/* Progress row */
.kyc-progress-row {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
  gap: 0;
}
.kyc-ps-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  gap: .3rem;
}
.kyc-ps-dot {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 800;
  color: var(--muted);
  transition: background .25s, border-color .25s, color .25s;
}
.kyc-ps-dot.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 0 0 4px var(--brand-light);
}
.kyc-ps-dot.done {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
.kyc-ps-label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.kyc-ps-line {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin: 0 .375rem;
  margin-bottom: 1rem;
  border-radius: 2px;
  transition: background .25s;
}
.kyc-ps-line.done { background: var(--success); }

/* Panels */
.kyc-panel { display: none; }
.kyc-panel.active { display: block; }

.kyc-panel-hdr { margin-bottom: 1.125rem; }
.kyc-panel-title {
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--text);
}
.kyc-panel-sub {
  font-size: .75rem;
  color: var(--muted);
  margin-top: .25rem;
  line-height: 1.55;
}

/* Two-column grid - mobile-first horizontal layout with clear 16px gap */
.kyc-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1rem;
  row-gap: 1rem;
  align-items: start;
  justify-items: stretch;
  width: 100%;
  box-sizing: border-box;
}
.kyc-grid-2 > .form-group {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.kyc-grid-2 .form-label {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-wrap: anywhere;
  box-sizing: border-box;
}
.kyc-grid-2 .form-input {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Info note */
.kyc-info-note {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  background: var(--brand-light);
  border: 1px solid rgba(99,102,241,.15);
  border-radius: var(--radius);
  padding: .75rem .875rem;
  font-size: .75rem;
  color: var(--text-2);
  line-height: 1.55;
  margin-top: 1rem;
}

/* Document type grid */
.kyc-doctype-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-bottom: 1.125rem;
}
.kyc-doctype-card {
  position: relative;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  padding: 1rem .875rem;
  cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s;
  -webkit-tap-highlight-color: transparent;
}
.kyc-doctype-card:active,
.kyc-doctype-card:hover { border-color: var(--brand); background: var(--brand-light); }
.kyc-doctype-card.selected {
  border-color: var(--brand);
  background: var(--brand-light);
  box-shadow: 0 0 0 3px rgba(99,102,241,.18);
}
.kyc-doctype-icon { font-size: 1.5rem; margin-bottom: .375rem; }
.kyc-doctype-name { font-size: .78rem; font-weight: 800; color: var(--text); margin-bottom: .2rem; }
.kyc-doctype-desc { font-size: .75rem; color: var(--muted); line-height: 1.45; }
.kyc-doctype-check {
  position: absolute;
  top: .5rem;
  right: .5rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: var(--brand);
  display: none;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.kyc-doctype-card.selected .kyc-doctype-check { display: flex; }

/* Document tips */
.kyc-doc-tips {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .875rem 1rem;
  margin-top: .25rem;
}
.kyc-doc-tips-title { font-size: .75rem; font-weight: 700; color: var(--text); margin-bottom: .5rem; }
.kyc-doc-tips ul {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.kyc-doc-tips li { font-size: .75rem; color: var(--muted); line-height: 1.45; }

/* Upload zones */
.kyc-file-input { display: none; }

.kyc-upload-section { margin-bottom: 1rem; }
.kyc-upload-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .4rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text);
}
.kyc-upload-req {
  font-size: .75rem;
  font-weight: 700;
  color: var(--danger);
  background: var(--danger-bg);
  border-radius: 4px;
  padding: .15rem .4rem;
}

.kyc-upload-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  background: var(--card);
  cursor: pointer;
  transition: border-color .2s;
}
.kyc-upload-zone.has-file { border-color: var(--success); border-style: solid; }
.kyc-upload-zone:hover    { border-color: var(--brand); }

.kyc-zone-preview {
  min-height: 7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.kyc-zone-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .375rem;
  padding: 1.25rem;
}
.kyc-zone-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
.kyc-zone-icon svg { width: 1.25rem; height: 1.25rem; }
.kyc-zone-hint { font-size: .75rem; color: var(--muted); }

.kyc-preview-img {
  width: 100%;
  height: 8rem;
  object-fit: cover;
  display: block;
}

.kyc-pdf-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  padding: 1.5rem;
}

.kyc-zone-file-name {
  font-size: .75rem;
  color: var(--brand);
  font-weight: 600;
  text-align: center;
  padding: .25rem .75rem;
  background: var(--brand-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kyc-zone-actions {
  display: flex;
  gap: .5rem;
  padding: .625rem .75rem;
  border-top: 1px solid var(--border);
  background: var(--bg);
  flex-wrap: wrap;
}

.kyc-capture-btn,
.kyc-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .75rem;
  font-weight: 700;
  padding: .4rem .75rem;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, border-color .15s;
}
.kyc-capture-btn:hover { background: var(--brand-light); border-color: var(--brand); color: var(--brand); }
.kyc-upload-btn:hover  { background: var(--brand-light); border-color: var(--brand); color: var(--brand); }

.kyc-remove-btn {
  display: none;
  align-items: center;
  gap: .3rem;
  font-size: .75rem;
  font-weight: 700;
  padding: .4rem .6rem;
  border-radius: var(--radius);
  border: 1.5px solid var(--danger-border);
  background: var(--danger-bg);
  color: var(--danger);
  cursor: pointer;
  margin-left: auto;
  -webkit-tap-highlight-color: transparent;
}

/* Quality tips */
.kyc-quality-tips {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  margin-top: .5rem;
}
.kyc-tip-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  color: var(--muted);
  margin-bottom: .3rem;
  line-height: 1.4;
}
.kyc-tip-row:last-child { margin-bottom: 0; }
.kyc-tip-icon { font-style: normal; font-weight: 800; font-size: .75rem; flex-shrink: 0; }

/* Review step */
.kyc-review-section { margin-bottom: 1rem; }
.kyc-review-section-label {
  font-size: .75rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .4rem;
}
.kyc-review-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.kyc-review-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: .6rem .875rem;
  border-bottom: 1px solid var(--border);
  gap: .75rem;
}
.kyc-review-row.no-border { border-bottom: none; }
.kyc-rv-key { font-size: .75rem; color: var(--muted); flex-shrink: 0; }
.kyc-rv-val { font-size: .75rem; font-weight: 700; color: var(--text); text-align: right; }

.kyc-doc-thumbs {
  display: flex;
  gap: .75rem;
  padding: .75rem .875rem;
  flex-wrap: wrap;
}
.kyc-rv-thumb {
  flex: 1;
  min-width: 5rem;
  max-width: 8rem;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg);
}
.kyc-rv-thumb img {
  width: 100%;
  height: 4.5rem;
  object-fit: cover;
  display: block;
}
.kyc-rv-thumb-pdf {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 4.5rem;
  gap: .2rem;
}
.kyc-rv-thumb-lbl {
  font-size: .75rem;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  padding: .25rem .375rem;
  background: var(--bg);
  border-top: 1px solid var(--border);
}

/* Consent row */
.kyc-consent-row {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  cursor: pointer;
  padding: .875rem;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: var(--card);
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s;
  margin-top: .5rem;
}
.kyc-consent-row:has(.kyc-consent-check:checked) {
  border-color: var(--brand);
  background: var(--brand-light);
}
.kyc-consent-check { display: none; }
.kyc-consent-box {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  border: 2px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: .05rem;
  color: transparent;
  transition: background .15s, border-color .15s, color .15s;
}
.kyc-consent-check:checked ~ .kyc-consent-box {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.kyc-consent-text { font-size: .75rem; color: var(--text-2); line-height: 1.55; }

/* Navigation footer */
.kyc-nav-footer {
  display: flex;
  gap: .75rem;
  margin-top: 1.5rem;
}

/* ── Status view (pending / approved) ──────────────────────── */
.kyc-status-hero {
  border-radius: var(--radius-lg, 12px);
  padding: 1.5rem 1.25rem;
  text-align: center;
  margin-bottom: 1.25rem;
}
.kyc-status-hero.pending  { background: var(--warning-bg); border: 1.5px solid var(--warning-border); }
.kyc-status-hero.verified { background: var(--success-bg); border: 1.5px solid var(--success-border); }
.kyc-status-hero-icon  { font-size: 2.25rem; margin-bottom: .5rem; }
.kyc-status-hero-title { font-size: 1rem; font-weight: 800; color: var(--text); }
.kyc-status-hero-sub   { font-size: .75rem; color: var(--text-2); margin-top: .35rem; line-height: 1.55; }

/* Timeline */
.kyc-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.kyc-tl-item {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  padding: .875rem 1rem;
  border-bottom: 1px solid var(--border);
}
.kyc-tl-item:last-child { border-bottom: none; }
.kyc-tl-dot {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 800;
  color: var(--muted);
  flex-shrink: 0;
}
.kyc-tl-dot.done   { background: var(--success); border-color: var(--success); color: #fff; }
.kyc-tl-dot.active { background: var(--warning); border-color: var(--warning); color: #fff; }
.kyc-tl-title { font-size: .82rem; font-weight: 700; color: var(--text); }
.kyc-tl-sub   { font-size: .75rem; color: var(--muted); margin-top: .15rem; }

/* Verified badges */
.kyc-verified-badges {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.kyc-badge-row {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  padding: .875rem 1rem;
  border-bottom: 1px solid var(--border);
}
.kyc-badge-row:last-child { border-bottom: none; }
.kyc-badge-icon { font-size: 1.25rem; flex-shrink: 0; margin-top: .05rem; }
.kyc-badge-title { font-size: .82rem; font-weight: 700; color: var(--text); }
.kyc-badge-sub   { font-size: .75rem;  color: var(--muted); margin-top: .1rem; }

.kyc-status-note {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .875rem 1rem;
  font-size: .75rem;
  color: var(--text-2);
  line-height: 1.6;
}
.kyc-status-note.success { background: var(--success-bg); border-color: var(--success-border); }

/* ── KYC wizard polish ────────────────────────────────────── */
#kyc-wizard {
  width: min(100%, 42rem);
  margin: 0 auto;
  padding: .25rem 0 calc(.75rem + env(safe-area-inset-bottom, 0px));
}

.kyc-progress-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin: .25rem 0 .75rem;
}
.kyc-progress-kicker {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.kyc-progress-current {
  margin-top: .15rem;
  color: var(--text);
  font-size: .86rem;
  font-weight: 800;
}
.kyc-progress-note {
  color: var(--muted);
  font-size: .75rem;
  white-space: nowrap;
}
.kyc-progress-row {
  margin-bottom: 1.25rem;
  padding: .25rem 0 .65rem;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}
.kyc-ps-wrap[aria-current="step"] .kyc-ps-label {
  color: var(--brand);
  font-weight: 800;
}
.kyc-ps-line.done {
  background: var(--success);
}

.kyc-panel {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.kyc-panel-hdr {
  margin-bottom: 1.25rem;
}
.kyc-panel-title {
  font-size: 1.05rem;
}
.kyc-panel-sub {
  max-width: 34rem;
}
.kyc-panel .form-group {
  margin-bottom: 1rem;
}
.kyc-panel .form-label {
  display: block;
  margin-bottom: .4rem;
  font-size: .75rem;
  font-weight: 750;
}
.kyc-panel .form-input {
  min-height: 2.9rem;
  border-radius: .75rem;
}
.kyc-panel .form-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-light);
}

.kyc-doctype-grid {
  gap: .65rem;
}
.kyc-doctype-card {
  min-height: 7.4rem;
  padding: .9rem .8rem;
}
.kyc-doctype-card:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.kyc-upload-section {
  margin-bottom: 1.25rem;
}
.kyc-upload-label {
  margin-bottom: .55rem;
}
.kyc-upload-zone {
  min-height: 10.25rem;
  border-width: 1.5px;
}
.kyc-upload-zone.has-file {
  border-color: var(--success);
  background: var(--success-bg);
}
.kyc-upload-zone.has-error {
  border-color: var(--danger);
  background: var(--danger-bg);
}
.kyc-upload-file-status {
  display: block;
  min-height: 1.1rem;
  margin-top: .4rem;
  padding: 0 .15rem;
  color: var(--success);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.kyc-upload-file-status.is-error {
  color: var(--danger);
}
.kyc-upload-file-status.is-success {
  color: var(--success);
}
.kyc-quality-tips {
  margin-top: .25rem;
  padding: .8rem .9rem;
}

.kyc-review-section {
  margin-bottom: 1.15rem;
}
.kyc-review-section-label {
  display: flex;
  align-items: center;
  gap: .45rem;
  color: var(--text);
  font-size: .75rem;
  letter-spacing: .04em;
}
.kyc-review-section-label i {
  color: var(--brand);
  font-size: .8rem;
}
.kyc-review-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.kyc-review-row {
  min-height: 2.75rem;
  padding: .7rem .85rem;
}
.kyc-rv-val {
  max-width: 64%;
  overflow-wrap: anywhere;
}
#rv-docs:empty {
  display: none;
}
#rv-docs > div {
  width: 100%;
}

.kyc-consent-row {
  margin-top: .25rem;
}
.kyc-nav-footer {
  position: static;
  margin: 1rem -.25rem 0;
  padding: .75rem .25rem calc(.25rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to bottom, transparent, var(--bg) 28%);
}
.kyc-nav-footer #kyc-next-btn {
  flex: 1 1 auto;
  min-height: 2.9rem;
}
.kyc-nav-footer #kyc-back-btn {
  min-height: 2.9rem;
}

@media (min-width: 560px) {
  .kyc-panel {
    padding: 0;
  }
}

@media (max-width: 380px) {
  .kyc-progress-note {
    display: none;
  }
  .kyc-progress-row {
    padding-inline: 0;
  }
  .kyc-ps-label {
    font-size: .75rem;
  }
  .kyc-ps-line {
    margin-inline: .2rem;
  }
}

/* ── SUPPORT ────────────────────────────────────────────────── */
.support-option {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .875rem 1rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s;
}

.support-option:last-child { border-bottom: none; }
.support-option:hover { background: var(--bg); }

.support-option-icon {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.support-option-icon svg { width: 1.05rem; height: 1.05rem; }
.support-option-title { font-size: .85rem; font-weight: 600; }
.support-option-sub   { font-size: .75rem; color: var(--muted); margin-top: .1rem; }

.support-faq-item {
  padding: .875rem 1rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.support-faq-item:last-child { border-bottom: none; }

.support-faq-q {
  font-size: .82rem;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
}

.support-faq-q svg { width: 1rem; height: 1rem; color: var(--muted); flex-shrink: 0; transition: transform .25s; }
.support-faq-a { font-size: .75rem; color: var(--text-2); line-height: 1.6; margin-top: .5rem; display: none; }
.support-faq-item.open .support-faq-q svg { transform: rotate(180deg); }
.support-faq-item.open .support-faq-a { display: block; }

/* ── BOTTOM NAVIGATION ──────────────────────────────────────── */
.bottom-nav {
  display: flex;
  align-items: flex-start;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-top: .25rem;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  min-height: var(--nav-h);
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 200;
  position: relative;
}

.nav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  padding: .5rem .25rem;
  background: none;
  border: none;
  color: var(--muted);
  transition: color .2s;
  position: relative;
  min-height: 52px;
}

.nav-tab.active { color: var(--brand); }

/* Active top bar indicator */
.nav-tab.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 18%;
  right: 18%;
  height: 3px;
  background: var(--brand);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 2px 8px rgba(37,99,235,.4);
}

.nav-tab-icon { width: 1.3rem; height: 1.3rem; }

.nav-tab-label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.nav-user-block { padding: 1rem; }

/* ── SCROLLBAR ──────────────────────────────────────────────── */
.slide::-webkit-scrollbar { width: 3px; }
.slide::-webkit-scrollbar-track { background: transparent; }
.slide::-webkit-scrollbar-thumb { background: var(--border); border-radius: 9999px; }

/* ── MARKET ERROR ───────────────────────────────────────────── */
.market-error {
  text-align: center;
  padding: 2rem;
  color: var(--danger);
}

.retry-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: .4rem 1rem;
  font-size: .75rem;
  margin-top: .75rem;
  cursor: pointer;
  transition: border-color .15s;
}

.retry-btn:hover { border-color: var(--brand); color: var(--brand); }

/* ── TICKER SKELETON / UNAVAILABLE ─────────────────────────── */
.ticker-skeleton {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0 1rem;
  animation: shimmer 1.5s ease-in-out infinite;
}

.ticker-skeleton span {
  display: inline-block;
  width: 80px;
  height: .7rem;
  background: linear-gradient(90deg, var(--border) 25%, var(--bg) 50%, var(--border) 75%);
  background-size: 200% 100%;
  border-radius: 9999px;
  animation: shimmerSlide 1.5s ease-in-out infinite;
}

.ticker-skeleton span:nth-child(2) { width: 60px; }
.ticker-skeleton span:nth-child(3) { width: 90px; }
.ticker-skeleton span:nth-child(4) { width: 70px; }
.ticker-skeleton span:nth-child(5) { width: 55px; }

@keyframes shimmerSlide {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.ticker-unavailable {
  padding: 0 1rem;
  font-size: .75rem;
  color: var(--muted);
  white-space: nowrap;
}

/* ── ACCESSIBILITY ──────────────────────────────────────────── */
button:focus-visible, a:focus-visible, .nav-tab:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ── GLASS EFFECT UTILITY ──────────────────────────────────── */
.glass {
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

[data-theme="dark"] .glass {
  background: rgba(30,41,59,0.8);
}

/* ── DESKTOP LAYOUT ─────────────────────────────────────────── */
@media (min-width: 768px) {
  .app-shell {
    max-width: 100%;
    flex-direction: row;
    height: 100vh;
    height: 100dvh;
  }

  .app-header { display: none; }

  .bottom-nav {
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    width: 210px;
    height: 100%;
    border-top: none;
    border-right: 1px solid var(--border);
    padding: 1.5rem 0 1rem;
    position: static;
    gap: .2rem;
    min-height: unset;
  }

  .nav-tab {
    flex-direction: row;
    justify-content: flex-start;
    padding: .75rem 1.125rem;
    gap: .75rem;
    border-radius: var(--radius-sm);
    margin: 0 .625rem;
    flex: none;
    min-height: unset;
    text-transform: none;
  }

  /* Desktop: no top bar, use background highlight instead */
  .nav-tab.active::before { display: none; }

  .nav-tab.active {
    background: var(--brand-light);
    color: var(--brand);
  }

  .nav-tab-icon { width: 1.05rem; height: 1.05rem; }
  .nav-tab-label { font-size: .82rem; letter-spacing: 0; text-transform: none; }

  .nav-user-block { display: block !important; margin-top: auto; padding: 1rem .625rem .5rem; }

  .slides-viewport { flex: 1; overflow: hidden; }
  .slide { max-width: 560px; margin: 0 auto; }
  .toast-container { bottom: 1.5rem; }
  .notif-panel { top: 1rem; right: 1rem; }
}

@media (min-width: 1024px) {
  .bottom-nav { width: 240px; }
}

/* ═══════════════════════════════════════════════════════════════
   HOME SCREEN — CLEAN WHITE LAYOUT
   ═══════════════════════════════════════════════════════════════ */

#slide-home {
  padding-top: 0;
  background: var(--surface);
}

.hero-portfolio {
  background: linear-gradient(145deg, #ffffff, #f8fafc);
  border-radius: 28px;
  padding: 2.2rem 1.6rem;
  margin: 1rem 1rem 0;
  box-shadow: var(--elevation-raised);
  border: 1px solid rgba(37,99,235,0.08);
  text-align: left;
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .hero-portfolio {
  background: linear-gradient(145deg, #1e293b, #0f172a);
  border-color: rgba(37,99,235,.2);
  box-shadow: var(--elevation-raised);
}

.hero-portfolio::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 3px;
  background: linear-gradient(180deg, #2563eb, #60a5fa);
}

.portfolio-label {
  font-size: .75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

#hero-balance {
  font-size: var(--fs-3xl);
  font-weight: 900;
  letter-spacing: -0.06em;
  color: var(--text);
  line-height: 1;
  transition: opacity .2s;
}

/* BTC equivalent — always rendered, styling improved */
.portfolio-btc {
  font-size: 0.85rem;
  color: var(--text-2);
  font-weight: 600;
  margin-top: 0.35rem;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: .35rem;
}

.portfolio-btc::before {
  content: '₿';
  font-size: .75rem;
  color: #f7931a;
  font-weight: 800;
}

.user-info {
  margin: 1rem 1rem 0.5rem;
  text-align: left;
  padding-left: 0.2rem;
}

#hero-name  { font-size: var(--fs-lg); font-weight: 700; }
#hero-email { font-size: var(--fs-sm); color: var(--muted); }

/* Home action row */
#slide-home .action-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
  margin: 1.75rem -1rem 0;
  padding: 1.125rem 1rem 1.25rem;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  flex-wrap: nowrap;
}

#slide-home .action-chip {
  flex: 1;
  min-width: 0;
  max-width: 120px;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 14px;
  padding: .25rem .5rem;
  gap: .6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: opacity .15s;
}

#slide-home .action-chip:active { opacity: .65; }
#slide-home .action-chip:hover { transform: none; box-shadow: none; background: transparent; }

#slide-home .action-chip-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--brand-light);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .18s;
  flex-shrink: 0;
}

#slide-home .action-chip-icon svg { width: 1.2rem; height: 1.2rem; }
#slide-home .action-chip:hover .action-chip-icon { transform: scale(1.06); }

#slide-home .action-chip-label {
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-2);
  text-align: center;
  letter-spacing: .01em;
}

#slide-home .section-heading { margin-top: 1.5rem !important; padding-top: 0; }
#slide-home .ticker-strip { margin-bottom: .75rem; }


.notif-icon-wrap {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kyc-label-context {
   font-size: .88em;
   font-weight: 600;
   letter-spacing: 0;
   text-transform: none;
   color: var(--muted);
}
.kyc-label-context-primary {
   color: inherit;
   /* Render the Country label in the same uppercase style as the other
      Step 1 labels (form-label uppercases, but kyc-label-context disables
      it). Restore it here so "Country of Residence" reads consistently. */
   text-transform: uppercase;
}
/* ───────────────────────────────────────────────────────────
   KYC Step 1 — Date of Birth visibility fix (UI only)
   The global input[type="date"]{ -webkit-appearance:none; appearance:none }
   reset in aldeapath-system.css strips the native date affordance and can
   render #kyc-dob as a blank, untappable area on mobile WebKit — the label
   shows but the control looks "missing".
   #kyc-dob is an ID selector (specificity 1,0,0), so it overrides that reset
   regardless of stylesheet load order. On touch devices we restore the native
   appearance so the iOS/mobile date picker stays visible and usable; on
   fine-pointer (desktop) the custom flat box is kept, which matches the
   neighbouring text inputs exactly. The box (border, background, height,
   radius) still comes from the shared input[type] + .form-input rules.
   No field IDs, JavaScript, validation, or backend logic is changed.
   ─────────────────────────────────────────────────────────── */
#kyc-dob {
  width: 100%;
  min-width: 0;
  min-inline-size: 0;
  max-inline-size: 100%;
  -webkit-min-logical-width: 0;
  box-sizing: border-box;
  min-height: 40px;
}
#kyc-dob::-webkit-calendar-picker-indicator {
  display: block;
  opacity: .7;
  cursor: pointer;
}
@media (pointer: coarse) {
  #kyc-dob {
    /* Keep type="date" and its native picker, but prevent iOS Safari's
       replaced-control intrinsic width from spilling into column two. */
    -webkit-appearance: none;
    appearance: none;
    inline-size: 100%;
  }
}

/* ===== Source: dashboard.css ===== */
/* ============================================================
   dashboard.css — Deposit Components
   Only additive styles. Core shell/layout/nav/slide rules
   live in style.css — do NOT redefine them here.
   ============================================================ */

/* ── DEPOSIT STEPPER ──────────────────────────────────────── */
.deposit-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
  padding: 0 1rem;
}

.deposit-step-dot {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
}

.deposit-step-dot.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  transform: scale(1.1);
  box-shadow: 0 0 0 4px rgba(var(--brand-rgb), 0.15);
}

.deposit-step-dot.done {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

.deposit-step-line {
  flex: 1;
  height: 3px;
  background: var(--border);
  margin: 0 0.5rem;
  border-radius: 99px;
  transition: background 0.4s ease;
}

.deposit-step-line.active {
  background: var(--brand);
}

/* ── DEPOSIT STEP LABELS ───────────────────────────────────── */
.deposit-step-labels {
  display: flex;
  justify-content: space-between;
  padding: 0 0.5rem;
  margin-top: -1.2rem;
  margin-bottom: 1.5rem;
}

.deposit-step-label {
  font-size: .75rem;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  width: 2.4rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: color 0.3s;
}

.deposit-step-label.active {
  color: var(--brand);
}

.deposit-step-label.done {
  color: var(--success);
}

/* ── DEPOSIT METHODS (Grid) ────────────────────────────────── */
.deposit-methods-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}

.deposit-method-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 0.5rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
  cursor: pointer;
}

.deposit-method-card:hover {
  border-color: var(--brand);
  transform: translateY(-1px);
}

.deposit-method-card.active {
  border-color: var(--brand);
  background: var(--brand-light);
  box-shadow: 0 4px 12px rgba(var(--brand-rgb), 0.1);
  transform: translateY(-2px);
}

.deposit-method-card i {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--muted);
  display: block;
  transition: color 0.2s;
}

.deposit-method-card.active i {
  color: var(--brand);
}

.deposit-method-label {
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── DEPOSIT AMOUNT INPUT ──────────────────────────────────── */
.deposit-amount-wrap {
  position: relative;
  margin-bottom: 1.25rem;
}

.deposit-amount-input {
  width: 100%;
  padding: 1.25rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 1.25rem;
  font-weight: 800;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  box-shadow: var(--shadow-sm);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.deposit-amount-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(var(--brand-rgb), 0.05);
}

.deposit-amount-prefix {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--muted);
  pointer-events: none;
}

/* ── DEPOSIT STATUS CARD ───────────────────────────────────── */
.deposit-status-card {
  background: var(--surface, #fff);
  border-radius: 1rem;
  border: 1px solid var(--border);
  padding: 1rem;
  margin-bottom: 0.75rem;
  box-shadow: var(--shadow-sm);
}

.deposit-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  border-radius: 99px;
  font-size: .75rem;
  font-weight: 800;
  white-space: nowrap;
}

.deposit-status-badge.pending {
  background: #fef3c7;
  color: #b45309;
}

.deposit-status-badge.waiting {
  background: #dbeafe;
  color: #1e40af;
}

.deposit-status-badge.sent {
  background: #d1fae5;
  color: #065f46;
}

.deposit-status-badge.rejected {
  background: #fee2e2;
  color: #dc2626;
}

.deposit-status-badge.approved {
  background: #dcfce7;
  color: #16a34a;
}

/* ── DEPOSIT UPLOAD ZONE ───────────────────────────────────── */
.deposit-upload-zone {
  border: 2px dashed var(--border);
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.deposit-upload-zone:hover {
  border-color: var(--brand);
  background: var(--brand-light, rgba(37, 99, 235, 0.04));
}

/* ── DEPOSIT INFO BANNERS ──────────────────────────────────── */
.deposit-info-banner {
  margin: 0.75rem 0;
  border-radius: 1rem;
  overflow: hidden;
  border: 1.5px solid rgba(37, 99, 235, 0.15);
  background: linear-gradient(135deg, #eff6ff, #f0f9ff);
}

.deposit-info-banner.bank {
  border-color: rgba(22, 163, 74, 0.15);
  background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
}

.deposit-info-banner-header {
  padding: 0.6rem 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.deposit-info-banner-body {
  padding: 0.75rem 0.875rem;
}

/* ── UTILITY STATES ─────────────────────────────────────────── */
.disabled { opacity: 0.5; pointer-events: none; }
.loading  { filter: grayscale(1); pointer-events: none; }

/* ── FADE-IN ANIMATION ──────────────────────────────────────── */
.deposit-fade-in {
  animation: _dep-fadeIn 0.35s ease-out both;
}

@keyframes _dep-fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── NOTIFICATION TOAST CARD ────────────────────────────────── */
/*
   The notification module (notifications.js) creates rich toasts with
   class "toast-notification" — separate from the simple ".toast" pills.
   Without these rules the toast renders as unstyled text that bleeds
   over the deposit status content.
*/
.toast-notification {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  width: 100%;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 1rem;
  padding: 0.85rem 0.9rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.07);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  transition: opacity 0.25s ease, transform 0.25s ease;
  cursor: default;
}

.toast-notification.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.toast-notif-icon {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.85rem;
}

.toast-content {
  flex: 1;
  min-width: 0;
}

.toast-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text, #0f172a);
  line-height: 1.3;
  margin-bottom: 0.2rem;
}

.toast-message {
  font-size: .75rem;
  color: var(--muted, #64748b);
  line-height: 1.5;
  word-break: break-word;
}

.toast-close {
  background: none;
  border: none;
  padding: 0.15rem 0.25rem;
  cursor: pointer;
  color: var(--muted, #64748b);
  font-size: 0.75rem;
  flex-shrink: 0;
  line-height: 1;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  margin-top: -0.1rem;
}

.toast-close:hover {
  color: var(--text, #0f172a);
  background: var(--bg, #f8fafc);
}

#slide-deposit {
  box-sizing: border-box;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  overflow-x: clip;
  padding-inline: clamp(0.875rem, 4vw, 1.25rem);
  padding-bottom: calc(2rem + env(safe-area-inset-bottom));
}

#slide-deposit *,
#slide-deposit *::before,
#slide-deposit *::after {
  box-sizing: border-box;
  min-width: 0;
}

#slide-deposit #deposit-dynamic-content {
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
  overflow-wrap: anywhere;
}

#slide-deposit .deposit-stepper {
  width: 100%;
  padding-inline: 0;
  margin-bottom: 1.65rem;
}

#slide-deposit .deposit-step-line {
  min-width: 0;
  margin-inline: clamp(0.2rem, 2vw, 0.5rem);
}

#slide-deposit .deposit-step-labels {
  padding-inline: 0;
  gap: 0.25rem;
}

#slide-deposit .deposit-step-label {
  flex: 1 1 25%;
  width: auto;
  font-size: clamp(0.5rem, 2.3vw, 0.58rem);
  overflow-wrap: normal;
}

#slide-deposit .deposit-methods-grid,
#slide-deposit .deposit-payment-options {
  width: 100%;
}

#slide-deposit input,
#slide-deposit select,
#slide-deposit textarea,
#slide-deposit button {
  max-width: 100%;
}

.deposit-approved-screen {
  width: 100%;
  padding-bottom: env(safe-area-inset-bottom);
}

.deposit-approved-hero {
  text-align: center;
  padding: 1rem 0.25rem 1.1rem;
}

.deposit-approved-icon {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 0.85rem;
  border-radius: 50%;
  color: var(--success, #16a34a);
  background: var(--success-bg, #dcfce7);
  border: 1px solid color-mix(in srgb, var(--success, #16a34a) 24%, transparent);
  box-shadow: 0 0 0 0.5rem color-mix(in srgb, var(--success, #16a34a) 7%, transparent);
  font-size: 1.75rem;
}

.deposit-approved-kicker {
  color: var(--success, #16a34a);
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.deposit-approved-title {
  margin: 0.3rem 0 0;
  color: var(--text, #0f172a);
  font-size: clamp(1.25rem, 6vw, 1.65rem);
  line-height: 1.2;
}

.deposit-approved-amount {
  margin-top: 0.45rem;
  color: var(--success, #16a34a);
  font-size: clamp(1.75rem, 9vw, 2.25rem);
  font-weight: 900;
  line-height: 1.1;
}

.deposit-approved-copy {
  max-width: 22rem;
  margin: 0.6rem auto 0;
  color: var(--muted, #64748b);
  font-size: 0.76rem;
  line-height: 1.55;
}

.deposit-approved-receipt {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0 0.875rem;
  margin-bottom: 1rem;
  overflow: hidden;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius, 12px);
}

.deposit-approved-receipt > div {
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
}

.deposit-approved-receipt > div > div {
  flex: 1 1 55%;
  justify-content: flex-end;
}

.deposit-approved-actions {
  display: grid;
  gap: 0.65rem;
  width: 100%;
}

#slide-deposit .deposit-approved-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  min-height: 3rem;
}

@media (max-width: 359px) {
  #slide-deposit {
    padding-inline: 0.75rem;
  }

  #slide-deposit .deposit-step-dot {
    width: 1.9rem;
    height: 1.9rem;
  }

  .deposit-approved-receipt > div {
    align-items: flex-start !important;
    flex-direction: column;
  }

  .deposit-approved-receipt > div > div {
    width: 100%;
    justify-content: flex-start;
  }

  .deposit-approved-receipt > div span {
    text-align: left !important;
  }
}

/* ===== Source: ai.css ===== */
/* ============================================================
   ai.css  —  AI Chat Panel (WhatsApp-style)
   Place at: user/assets/css/ai.css
   ============================================================ */

/* ── AI CHAT SLIDE LAYOUT ──────────────────────────────────── */
#slide-ai-chat {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  height: 100%;
  position: relative;
}

/* ── AI CHAT HEADER ─────────────────────────────────────────── */
.ai-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 1rem;
  background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
  color: #fff;
  flex-shrink: 0;
  z-index: 10;
  min-height: 60px;
}

.ai-chat-header-left {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex: 1;
  min-width: 0;
}

.ai-chat-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ai-chat-title {
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.2;
}

.ai-chat-subtitle {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .75rem;
  opacity: .85;
  margin-top: .1rem;
}

.ai-status-dot {
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
  animation: statusBlink 2s ease-in-out infinite;
}

.ai-status-dot.live-agent {
  background: #f59e0b;
}

@keyframes statusBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .5; }
}

.ai-chat-header-actions {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-shrink: 0;
}

.ai-chat-header-btn {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.ai-chat-header-btn:hover {
  background: rgba(255,255,255,.28);
}

/* ── ESCALATION BANNER ──────────────────────────────────────── */
.ai-escalation-banner {
  display: none;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1rem;
  font-size: .75rem;
  font-weight: 600;
  flex-shrink: 0;
  transition: all .25s ease;
}

.ai-escalation-banner.active {
  display: flex;
}

.ai-escalation-banner.pending {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #92400e;
  border-bottom: 1px solid rgba(146,64,14,.15);
}

.ai-escalation-banner.connected {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  color: #065f46;
  border-bottom: 1px solid rgba(6,95,70,.15);
}

.ai-escalation-banner.resolved {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  color: #1e40af;
  border-bottom: 1px solid rgba(30,64,175,.15);
}

.ai-escalation-icon {
  flex-shrink: 0;
  font-size: .85rem;
}

.ai-escalation-text {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

.ai-escalation-ticket {
  font-size: .75rem;
  font-weight: 700;
  opacity: .7;
  margin-top: .1rem;
}

/* ── MESSAGES AREA ──────────────────────────────────────────── */
.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: .85rem .75rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  background: var(--bg, #f0f2f5);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: auto;
  min-height: 0;
}

.ai-chat-messages::-webkit-scrollbar { width: 3px; }
.ai-chat-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }

/* ── DATE SEPARATOR ─────────────────────────────────────────── */
.ai-chat-date-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .5rem 0;
}

.ai-chat-date-sep span {
  background: rgba(0,0,0,.06);
  color: var(--muted, #64748b);
  font-size: .75rem;
  font-weight: 600;
  padding: .25rem .75rem;
  border-radius: 8px;
  letter-spacing: .02em;
}

/* ── MESSAGE BUBBLES (WhatsApp-style) ───────────────────────── */
.ai-msg {
  display: flex;
  flex-direction: column;
  max-width: 82%;
  animation: msgFadeIn .25s ease-out;
}

@keyframes msgFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ai-msg-user {
  align-self: flex-end;
}

.ai-msg-assistant {
  align-self: flex-start;
}

.ai-msg-system {
  align-self: center;
  max-width: 90%;
}

.ai-msg-bubble {
  padding: .5rem .7rem;
  font-size: .82rem;
  line-height: 1.5;
  word-break: break-word;
  position: relative;
}

.ai-msg-user .ai-msg-bubble {
  background: #dcf8c6;
  color: #111b21;
  border-radius: 10px 10px 2px 10px;
  box-shadow: 0 1px 1px rgba(0,0,0,.06);
}

[data-theme="dark"] .ai-msg-user .ai-msg-bubble,
.dark .ai-msg-user .ai-msg-bubble {
  background: #005c4b;
  color: #e9edef;
}

.ai-msg-assistant .ai-msg-bubble {
  background: var(--surface, #fff);
  color: var(--text, #111b21);
  border-radius: 10px 10px 10px 2px;
  border: 1px solid var(--border, rgba(0,0,0,.08));
  box-shadow: 0 1px 1px rgba(0,0,0,.04);
}

.ai-msg-system .ai-msg-bubble {
  background: rgba(0,0,0,.05);
  color: var(--muted, #64748b);
  border-radius: 8px;
  font-size: .75rem;
  text-align: center;
  padding: .4rem .75rem;
}

.ai-msg-error .ai-msg-bubble {
  background: var(--danger-bg, #fef2f2);
  border-color: var(--danger-border, rgba(239,68,68,.2));
  color: var(--danger, #dc2626);
}

/* ── MESSAGE META (time + ticks) ───────────────────────────── */
.ai-msg-meta {
  display: flex;
  align-items: center;
  gap: .25rem;
  justify-content: flex-end;
  font-size: .75rem;
  color: var(--muted, #667781);
  margin-top: .15rem;
  padding: 0 .15rem;
}

.ai-msg-user .ai-msg-meta {
  justify-content: flex-end;
}

.ai-msg-assistant .ai-msg-meta {
  justify-content: flex-start;
}

/* ── TYPING INDICATOR ──────────────────────────────────────── */
.ai-typing-wrap {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  align-self: flex-start;
  max-width: 82%;
  animation: msgFadeIn .2s ease-out;
}

.ai-typing-avatar {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  margin-top: .15rem;
}

.ai-typing-bubble {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: .65rem .85rem;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0,0,0,.08));
  border-radius: 10px 10px 10px 2px;
  box-shadow: 0 1px 1px rgba(0,0,0,.04);
}

.ai-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted, #667781);
  animation: typingBounce .9s ease-in-out infinite;
}

.ai-typing-dot:nth-child(2) { animation-delay: .15s; }
.ai-typing-dot:nth-child(3) { animation-delay: .3s; }

@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30%            { transform: translateY(-5px); opacity: 1; }
}

/* ── QUICK ACTIONS ─────────────────────────────────────────── */
.ai-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .5rem 0 .25rem;
  align-self: flex-start;
}

.ai-quick-btn {
  background: var(--surface, #fff);
  border: 1px solid var(--brand, #2563eb);
  color: var(--brand, #2563eb);
  font-size: .75rem;
  font-weight: 600;
  padding: .35rem .65rem;
  border-radius: 18px;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}

.ai-quick-btn:hover {
  background: var(--brand, #2563eb);
  color: #fff;
}

.ai-quick-btn:active {
  transform: scale(.95);
}

/* ── ESCALATE BUTTON (in chat) ─────────────────────────────── */
.ai-escalate-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  padding: .45rem .85rem;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  margin-top: .35rem;
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
}

.ai-escalate-btn:hover {
  filter: brightness(1.1);
}

.ai-escalate-btn:active {
  transform: scale(.96);
}

/* ── CHAT FOOTER ───────────────────────────────────────────── */
.ai-chat-footer {
  padding: .6rem .75rem;
  border-top: 1px solid var(--border, rgba(0,0,0,.08));
  background: var(--surface, #fff);
  flex-shrink: 0;
  z-index: 10;
}

.ai-chat-input-wrap {
  display: flex;
  align-items: flex-end;
  gap: .45rem;
  background: var(--bg, #f0f2f5);
  border: 1.5px solid var(--border, rgba(0,0,0,.08));
  border-radius: 22px;
  padding: .35rem .35rem .35rem .75rem;
  transition: border-color .2s, box-shadow .2s;
}

.ai-chat-input-wrap:focus-within {
  border-color: var(--brand, #2563eb);
  box-shadow: 0 0 0 3px rgba(37,99,235,.08);
}

.ai-chat-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: .84rem;
  color: var(--text, #111b21);
  outline: none;
  min-width: 0;
  resize: none;
  min-height: 1.4rem;
  max-height: 100px;
  line-height: 1.45;
  overflow-y: auto;
  padding: .15rem 0;
}

.ai-chat-input::placeholder { color: var(--muted, #667781); }
.ai-chat-input:disabled { opacity: .5; }

.ai-chat-send {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--brand, #2563eb);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, transform .12s, opacity .15s;
}

.ai-chat-send:hover  { background: var(--brand-dark, #1d4ed8); }
.ai-chat-send:active { transform: scale(.9); }
.ai-chat-send:disabled { opacity: .4; cursor: not-allowed; }
.ai-chat-send svg    { width: .85rem; height: .85rem; }

.ai-chat-powered {
  text-align: center;
  font-size: .75rem;
  color: var(--muted, #667781);
  margin-top: .35rem;
  letter-spacing: .02em;
}

/* ══════════════════════════════════════════════════════════════
   FULLSCREEN AI CHAT — when chat is open, take over the screen
   ══════════════════════════════════════════════════════════════ */

#support-ai-view {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#support-ai-view .ai-chat-messages {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#support-ai-view .ai-chat-footer {
  flex-shrink: 0;
}

#support-ai-view .ai-chat-header {
  flex-shrink: 0;
}

/* When AI chat is active and takes over the full screen */
body.ai-chat-open #support-ai-view {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 480px !important;
  margin: 0 auto !important;
  height: 100% !important;
  z-index: 9999 !important;
  background: var(--bg, #f0f2f5) !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Hide bottom nav and header when chat is fullscreen */
body.ai-chat-open .bottom-nav {
  display: none !important;
}

body.ai-chat-open .app-header {
  display: none !important;
}

/* Prevent body scroll when chat is open */
body.ai-chat-open {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
}

/* Safe area padding for footer when in fullscreen mode */
body.ai-chat-open .ai-chat-footer {
  padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
}

/* ── RESOLVED/ENDED OVERLAY ────────────────────────────────── */
.ai-chat-ended-overlay {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface, #fff);
  border-top: 1px solid var(--border);
  padding: 1.25rem;
  text-align: center;
  z-index: 20;
  animation: slideUp .3s ease-out;
}

.ai-chat-ended-overlay.active {
  display: block;
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.ai-chat-ended-title {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .3rem;
}

.ai-chat-ended-sub {
  font-size: .75rem;
  color: var(--muted);
  margin-bottom: .85rem;
}

.ai-chat-new-btn {
  background: var(--brand, #2563eb);
  color: #fff;
  border: none;
  padding: .55rem 1.25rem;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}

.ai-chat-new-btn:hover { filter: brightness(1.1); }
.ai-chat-new-btn:active { transform: scale(.96); }

/* ── LIVE AGENT OFFER BUTTONS ──────────────────────────────── */
.ai-agent-offer-bubble {
  padding-bottom: .55rem !important;
}

.ai-offer-yes {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: #fff;
  border: none;
  padding: .45rem .9rem;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
}

.ai-offer-yes:hover  { filter: brightness(1.1); }
.ai-offer-yes:active { transform: scale(.95); }

.ai-offer-no {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: var(--muted, #64748b);
  border: 1.5px solid var(--border, rgba(0,0,0,.12));
  padding: .45rem .9rem;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
}

.ai-offer-no:hover  { background: var(--bg, #f0f2f5); }
.ai-offer-no:active { transform: scale(.95); }

/* ── LIVE AGENT MESSAGE LABEL ──────────────────────────────── */
.ai-msg-sender {
  font-size: .75rem;
  font-weight: 700;
  color: #1d4ed8;
  margin-bottom: .18rem;
  padding-left: .1rem;
}

.ai-msg-bubble--agent {
  background: #eff6ff !important;
  border-color: rgba(37,99,235,.2) !important;
  color: #1e3a8a !important;
  font-weight: 500;
}

/* Status dot states ─────────────────────────────────────────── */
.ai-status-dot.resolved {
  background: #9ca3af;
  animation: none;
}

/* ===== Source: market.css ===== */
/* ============================================================
   market.css — Clean, flat, professional market UI
   ============================================================ */


/* ── TICKER STRIP ───────────────────────────────────────────── */

.ticker-strip {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .45rem 0;
  position: relative;
  margin-bottom: .75rem;
}

.ticker-strip::before,
.ticker-strip::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2rem;
  z-index: 2;
  pointer-events: none;
}

.ticker-strip::before {
  left: 0;
  background: linear-gradient(to right, var(--surface), transparent);
}

.ticker-strip::after {
  right: 0;
  background: linear-gradient(to left, var(--surface), transparent);
}

.ticker-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: tickerScroll 35s linear infinite;
}

.ticker-track:hover {
  animation-play-state: paused;
}

@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: 0 .75rem;
  font-size: .75rem;
  font-weight: 600;
}

.ticker-logo {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
}

.ticker-sym   { font-weight: 700; color: var(--text); }
.ticker-price { color: var(--text-2); }

.ticker-chg {
  font-weight: 700;
}

.ticker-item-up   .ticker-chg { color: var(--success); }
.ticker-item-down .ticker-chg { color: var(--danger); }

.ticker-sep {
  color: var(--border);
  font-size: .75rem;
  padding: 0 .25rem;
}


/* ── MARKET LIST ───────────────────────────────────────────── */

.market-grid {
  display: flex;
  flex-direction: column;
}


/* ── ROW ───────────────────────────────────────────────────── */

.market-row {
  display: flex;
  align-items: center;
  gap: .875rem;

  padding: .85rem 1rem;

  background: var(--surface);
  border-bottom: 1px solid var(--border);

  transition: background .15s ease;
}

/* Remove heavy “card grouping” feel */
.market-row:first-child,
.market-row:last-child,
.market-row:only-child {
  border-radius: 0;
}


/* ── HOVER ─────────────────────────────────────────────────── */

.market-row:hover {
  background: var(--bg);
}


/* ── LEFT: ICON ────────────────────────────────────────────── */

.mrow-logo {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  object-fit: contain;

  flex-shrink: 0;

  border: 1px solid var(--border);
}


/* ── MIDDLE: NAME + CHANGE ─────────────────────────────────── */

.mrow-mid {
  flex: 1;
  min-width: 0;
}

.mrow-name {
  font-size: .86rem;
  font-weight: 700;
  color: var(--text);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mrow-sub {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: .2rem;
}

.mrow-price-sub {
  font-size: .75rem;
  color: var(--muted);
}

.mrow-chg {
  font-size: .75rem;
  font-weight: 700;

  padding: .12rem .45rem;
  border-radius: 999px;
}


/* Change colors */

.mrow-chg-up {
  background: var(--success-bg);
  color: var(--success);
}

.mrow-chg-down {
  background: var(--danger-bg);
  color: var(--danger);
}


/* ── RIGHT: PRICE ─────────────────────────────────────────── */

.mrow-right {
  text-align: right;
  flex-shrink: 0;
}

.mrow-price-main {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);

  font-variant-numeric: tabular-nums;
}

.mrow-mcap {
  font-size: .75rem;
  color: var(--muted);
  margin-top: .15rem;

  font-variant-numeric: tabular-nums;
}


/* ── UPDATED TEXT ─────────────────────────────────────────── */

.market-updated {
  text-align: center;
  font-size: .75rem;
  color: var(--muted);

  margin-top: .65rem;
}


/* ── LOADING ─────────────────────────────────────────────── */

.market-loading {
  text-align: center;
  padding: 2rem;
  color: var(--muted);
  font-size: .8rem;
}



/* ============================================================
   🌙 DARK MODE — FLAT, CLEAN, NO “BOX-IN-BOX”
   ============================================================ */

[data-theme="dark"] .market-row {
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

[data-theme="dark"] .market-row:hover {
  background: rgba(255,255,255,0.04);
}

/* Remove ticker “card feel” */
[data-theme="dark"] .ticker-strip {
  background: transparent;
  border: none;
}

[data-theme="dark"] .ticker-strip::before {
  background: linear-gradient(to right, var(--bg), transparent);
}

[data-theme="dark"] .ticker-strip::after {
  background: linear-gradient(to left, var(--bg), transparent);
}


/* Subtle premium depth (very light) */
[data-theme="dark"] .market-grid {
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.02),
    transparent 20%
  );
}

/* ===== Source: support-chat.css ===== */
/* ============================================================
   support-chat.css  —  Live Support Chat Panel
   Place at: user/assets/css/support-chat.css
   ============================================================ */

/* ── Overlay ─────────────────────────────────────────────────── */
.support-chat-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 850;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}

.support-chat-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* ── Panel ───────────────────────────────────────────────────── */
.support-chat-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 480px;
  margin: 0 auto;
  height: 85vh;
  max-height: 680px;
  background: var(--surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -12px 48px rgba(15,23,42,.18);
  z-index: 900;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1), bottom .12s ease, max-height .12s ease;
  overflow: hidden;
  will-change: transform, bottom;
}

.support-chat-panel.open {
  transform: translateY(0);
}

@media (min-width: 768px) {
  .support-chat-panel {
    right: 1.5rem;
    left: auto;
    bottom: 1.5rem;
    width: 380px;
    max-width: 380px;
    height: 560px;
    max-height: 560px;
    border-radius: var(--radius-lg);
    transform: scale(.92) translateY(24px);
    opacity: 0;
    transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .25s;
  }

  .support-chat-panel.open {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

/* ── Header ──────────────────────────────────────────────────── */
.support-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem .875rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
  color: #fff;
}

.support-chat-header-left {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.support-agent-avatar {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,.3);
}

.support-chat-title {
  font-size: .9rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.01em;
}

.support-chat-subtitle {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .75rem;
  color: rgba(255,255,255,.75);
  margin-top: .1rem;
}

.support-status-dot {
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(74,222,128,.3);
  animation: support-pulse 2s ease-in-out infinite;
}

@keyframes support-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(74,222,128,.3); }
  50%       { box-shadow: 0 0 0 4px rgba(74,222,128,.15); }
}

.support-chat-new-btn,
.support-chat-close-btn {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s;
  flex-shrink: 0;
}

.support-chat-new-btn:hover,
.support-chat-close-btn:hover {
  background: rgba(255,255,255,.28);
}

/* ── Messages area ───────────────────────────────────────────── */
.support-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  scroll-behavior: smooth;
  background: var(--bg);
}

.support-chat-messages::-webkit-scrollbar { width: 3px; }
.support-chat-messages::-webkit-scrollbar-track { background: transparent; }
.support-chat-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 9999px; }

/* ── Empty state ─────────────────────────────────────────────── */
.support-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 2rem;
  gap: .75rem;
}

.support-empty-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.support-empty-title {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
}

.support-empty-sub {
  font-size: .75rem;
  color: var(--muted);
  line-height: 1.5;
  max-width: 220px;
}

/* ── Message bubbles ─────────────────────────────────────────── */
.support-msg {
  display: flex;
  gap: .5rem;
  align-items: flex-end;
  max-width: 85%;
}

.support-msg-agent {
  align-self: flex-start;
}

.support-msg-user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.support-msg-avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e40af, #2563eb);
  flex-shrink: 0;
  position: relative;
}

.support-msg-avatar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z'/%3E%3C/svg%3E") center/55% no-repeat;
  border-radius: 50%;
}

.support-msg-bubble {
  padding: .625rem .875rem;
  border-radius: 1rem;
  font-size: .82rem;
  line-height: 1.55;
  word-break: break-word;
  position: relative;
}

.support-msg-bubble-agent {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-bottom-left-radius: .25rem;
  box-shadow: var(--shadow-xs);
}

.support-msg-bubble-user {
  background: var(--brand);
  color: #fff;
  border-bottom-right-radius: .25rem;
}

.support-msg-time {
  font-size: .75rem;
  color: var(--muted);
  margin-top: .25rem;
  padding: 0 .25rem;
}

.support-msg-time-right { text-align: right; }

/* ── Typing indicator ────────────────────────────────────────── */
.support-typing-bubble {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .625rem .875rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  border-bottom-left-radius: .25rem;
}

.support-typing-dot {
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: var(--muted);
  animation: support-typing .9s ease-in-out infinite;
  flex-shrink: 0;
}

.support-typing-dot:nth-child(2) { animation-delay: .2s; }
.support-typing-dot:nth-child(3) { animation-delay: .4s; }

@keyframes support-typing {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%            { opacity: 1;  transform: translateY(-4px); }
}

/* ── Ticket bar ──────────────────────────────────────────────── */
.support-ticket-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  background: var(--brand-light);
  border-top: 1px solid rgba(37,99,235,.15);
  font-size: .75rem;
  color: var(--brand);
  font-weight: 600;
  flex-shrink: 0;
}

/* ── Footer ──────────────────────────────────────────────────── */
.support-chat-footer {
  padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}

.support-chat-input-wrap {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: .5rem .5rem .5rem .75rem;
  transition: border-color .2s, box-shadow .2s;
}

.support-chat-input-wrap:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}

.support-chat-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: .855rem;
  font-family: inherit;
  color: var(--text);
  outline: none;
  resize: none;
  min-height: 1.4rem;
  max-height: 100px;
  line-height: 1.5;
  overflow-y: auto;
}

.support-chat-input::placeholder { color: var(--muted); }

.support-chat-send-btn {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--brand);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, transform .12s;
}

.support-chat-send-btn:hover { background: var(--brand-dark); }
.support-chat-send-btn:active { transform: scale(.9); }
.support-chat-send-btn:disabled { opacity: .5; cursor: not-allowed; }

.support-chat-footer-meta {
  margin-top: .4rem;
  font-size: .75rem;
  color: var(--muted);
  text-align: center;
}

/* ── Live badge in support list ──────────────────────────────── */
.support-live-badge {
  background: var(--success);
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
  padding: .15rem .45rem;
  border-radius: 9999px;
  letter-spacing: .06em;
}

/* ── Settings toggles ────────────────────────────────────────── */
.settings-toggle {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  flex-shrink: 0;
}

.settings-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.settings-toggle-track {
  display: block;
  width: 2.375rem;
  height: 1.25rem;
  background: var(--border);
  border-radius: 9999px;
  transition: background .2s;
  position: relative;
}

.settings-toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(1.25rem - 4px);
  height: calc(1.25rem - 4px);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  transition: transform .2s cubic-bezier(.4,0,.2,1);
}

.settings-toggle input:checked + .settings-toggle-track {
  background: var(--brand);
}

.settings-toggle input:checked + .settings-toggle-track::after {
  transform: translateX(1.125rem);
}

/* ── Settings overview grid ──────────────────────────────────── */
.settings-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .875rem .5rem;
}

.settings-overview-item {}
.settings-overview-label {
  font-size: .75rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .2rem;
}

.settings-overview-value {
  font-size: .85rem;
  font-weight: 700;
  color: var(--text);
}

/* ── Settings session count ──────────────────────────────────── */
.settings-session-count {
  font-size: .75rem;
  font-weight: 700;
  color: var(--success);
  background: var(--success-bg);
  padding: .2rem .55rem;
  border-radius: 9999px;
  border: 1px solid var(--success-border);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════
   SUPPORT HUB SHEET
   Bottom-sheet overlay housing FAQs + AI CTA
═══════════════════════════════════════════════ */
.support-hub-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .38);
  z-index: 510;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.support-hub-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.support-hub-sheet {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, .16);
  z-index: 520;
  display: flex;
  flex-direction: column;
  transition: transform .38s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
}
.support-hub-sheet.open {
  transform: translateX(-50%) translateY(0);
}

.support-hub-header {
  padding: .85rem 0 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}

.support-hub-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.1rem 1.1rem 2.5rem;
  flex: 1;
}

/* ── AI CTA banner ──────────────────────────── */
.support-hub-ai-cta {
  display: flex;
  align-items: center;
  gap: .85rem;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff;
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-xs);
  transition: transform .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.support-hub-ai-cta:active {
  transform: scale(.98);
  box-shadow: 0 2px 8px rgba(37, 99, 235, .2);
}
.support-hub-ai-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.support-hub-ai-text { flex: 1; min-width: 0; }

/* ── Quick-topic grid ───────────────────────── */
.support-hub-section-label {
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .07em;
  color: var(--muted);
  margin-bottom: .6rem;
  text-transform: uppercase;
}
.support-hub-topics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  margin-bottom: 1.25rem;
}
.support-hub-topic-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: .75rem;
  font-weight: 700;
  color: var(--text);
  font-family: inherit;
  text-align: left;
  transition: background .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.support-hub-topic-btn:active {
  background: var(--brand-light, #eff6ff);
  border-color: var(--brand, #2563eb);
}
.support-hub-topic-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── FAQ accordion groups ───────────────────── */
.support-hub-faq-group {
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.support-hub-faq-group-title {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  padding: .65rem .9rem;
  background: var(--bg, #f8fafc);
  border-bottom: 1px solid var(--border);
}
.support-hub-faq-item {
  border-bottom: 1px solid var(--border);
}
.support-hub-faq-item:last-child { border-bottom: none; }

.support-hub-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: .75rem .9rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text);
  font-family: inherit;
  text-align: left;
  gap: .6rem;
  transition: background .12s;
  -webkit-tap-highlight-color: transparent;
}
.support-hub-faq-q:hover { background: var(--bg, #f8fafc); }
.faq-chevron {
  flex-shrink: 0;
  color: var(--muted);
  transition: transform .2s;
}
.support-hub-faq-q.open .faq-chevron { transform: rotate(180deg); }

.support-hub-faq-a {
  display: none;
  padding: 0 .9rem .85rem;
  font-size: .75rem;
  line-height: 1.6;
  color: var(--muted);
}
.support-hub-faq-a.open { display: block; }

/* ── Still need help block ──────────────────── */
.support-hub-still-need {
  margin-top: 1.25rem;
  padding: 1.1rem;
  background: var(--bg, #f8fafc);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}

/* ===== Source: support-chat-polish.css ===== */
/* ─────────────────────────────────────────────────────────────
 * SUPPORT CHAT — BRAND POLISH PATCH (Aldeapath)
 * Loads AFTER support-chat.css to override.
 * ─────────────────────────────────────────────────────────────
 *  • Slimmer header, tighter padding, brand-aligned spacing
 *  • Teal accent on agent / system bubbles, monospace ticket refs
 *  • Resume-conversation card on the support hub
 *  • Dark-mode aware
 * ───────────────────────────────────────────────────────────── */

:root {
    --sp-teal:        var(--brand, #00796b);
    --sp-teal-soft:   rgba(0, 201, 183, .10);
    --sp-teal-edge:   rgba(0, 201, 183, .25);
    --sp-navy:        #1a3560;
    --sp-bg:          #ffffff;
    --sp-surface:     #f7f8fa;
    --sp-border:      rgba(15, 23, 42, .08);
    --sp-border-soft: rgba(15, 23, 42, .05);
    --sp-text:        #0f172a;
    --sp-muted:       #6b7280;
    --sp-mono:        ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html.dark, [data-theme="dark"] {
    --sp-bg:          #0f1418;
    --sp-surface:     #161b22;
    --sp-border:      rgba(255, 255, 255, .08);
    --sp-border-soft: rgba(255, 255, 255, .05);
    --sp-text:        #e5e7eb;
    --sp-muted:       #9ca3af;
}

/* ── Support hub sheet — tighter ───────────────────────────── */
.support-hub-sheet {
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -2px 24px rgba(15, 23, 42, .08) !important;
}
.support-hub-header {
    padding: .85rem 1rem .65rem !important;
    border-bottom: 1px solid var(--sp-border-soft) !important;
}
.support-hub-body { padding: .75rem .9rem 1.25rem !important; }

/* ── Resume conversation card (FAQ view) ───────────────────── */
.support-resume-card {
    margin: 0 0 .75rem;
    padding: .7rem .8rem;
    background: var(--sp-bg);
    border: 1px solid var(--sp-border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    position: relative;
    overflow: hidden;
}
.support-resume-card::before {
    content: '';
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 2.5px;
    background: var(--sp-teal);
    border-radius: 0 2px 2px 0;
}
.support-resume-row {
    display: flex;
    align-items: center;
    gap: .65rem;
}
.support-resume-icon {
    flex: 0 0 auto;
    width: 1.85rem; height: 1.85rem;
    border-radius: 8px;
    background: var(--sp-teal-soft);
    color: var(--sp-teal);
    display: flex; align-items: center; justify-content: center;
}
.support-resume-meta { flex: 1; min-width: 0; }
.support-resume-title {
    font-size: .82rem;
    font-weight: 600;
    color: var(--sp-text);
    line-height: 1.2;
    margin-bottom: .15rem;
}
.support-resume-status {
    font-size: .75rem;
    color: var(--sp-muted);
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    margin-bottom: .2rem;
}
.support-resume-dot {
    width: 6px; height: 6px;
    border-radius: 9999px;
    background: var(--sp-teal);
    box-shadow: 0 0 0 3px rgba(0, 201, 183, .15);
    flex: 0 0 auto;
}
.support-resume-waiting .support-resume-dot {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .18);
    animation: sp-pulse 1.6s ease-in-out infinite;
}
.support-resume-live .support-resume-dot {
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .18);
    animation: sp-pulse 1.6s ease-in-out infinite;
}
.support-resume-resolved .support-resume-dot {
    background: var(--sp-muted);
    box-shadow: none;
    animation: none;
}
@keyframes sp-pulse {
    0%, 100% { transform: scale(1);   opacity: 1;   }
    50%      { transform: scale(1.3); opacity: .55; }
}
.support-resume-ref {
    font-family: var(--sp-mono);
    font-size: .75rem;
    letter-spacing: .02em;
    color: var(--sp-text);
    background: var(--sp-surface);
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid var(--sp-border-soft);
}
.support-resume-preview {
    font-size: .75rem;
    color: var(--sp-muted);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}
.support-resume-cta {
    flex: 0 0 auto;
    padding: .42rem .85rem;
    background: var(--sp-navy);
    color: #fff;
    border: 0;
    border-radius: 8px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    transition: background .15s ease, transform .12s ease;
}
.support-resume-cta:hover  { background: #11203d; }
.support-resume-cta:active { transform: scale(.97); }

/* ── AI chat overlay — tighter header, neutral surface ─────── */
/* IMPORTANT: the base support-chat.css paints this header with a blue
   gradient and white text. The polish below intentionally replaces that
   with a clean light surface so the muted subtitle, close button and
   "new chat" button stay legible. Without this background override the
   small text and icons disappear into the gradient. */
.ai-chat-header,
.support-chat-header {
    padding: .7rem .9rem !important;
    border-bottom: 1px solid var(--sp-border) !important;
    background: var(--sp-bg) !important;
    color: var(--sp-text) !important;
}
.support-agent-avatar,
.ai-chat-avatar {
    width: 2rem !important;
    height: 2rem !important;
    border-radius: 9px !important;
    background: linear-gradient(135deg, var(--sp-teal) 0%, #00695c 100%) !important;
    box-shadow: 0 1px 3px rgba(0, 201, 183, .25) !important;
    border: 0 !important;
}
.support-chat-title,
.ai-chat-title {
    font-size: .85rem !important;
    font-weight: 600 !important;
    letter-spacing: -.005em !important;
    color: var(--sp-text) !important;
}
.support-chat-subtitle,
.ai-chat-subtitle {
    font-size: .75rem !important;
    color: var(--sp-muted) !important;
}

/* Status dot — tiny pulse ring */
.ai-status-dot,
.support-status-dot {
    width: 6px !important; height: 6px !important;
    background: var(--sp-teal) !important;
    box-shadow: 0 0 0 3px rgba(0, 201, 183, .18) !important;
}
.ai-status-dot.live-agent,
.support-status-dot.live-agent {
    background: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .2) !important;
}
.ai-status-dot.resolved {
    background: var(--sp-muted) !important;
    box-shadow: none !important;
}

/* Header buttons (new chat / close) */
.support-chat-new-btn,
.support-chat-close-btn,
.ai-chat-close-btn,
.ai-chat-new-btn {
    width: 2rem !important;
    height: 2rem !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--sp-muted) !important;
    transition: background .15s ease, color .15s ease !important;
}
.support-chat-new-btn:hover,
.ai-chat-new-btn:hover {
    background: var(--sp-teal-soft) !important;
    color: var(--sp-teal) !important;
}
.support-chat-close-btn:hover,
.ai-chat-close-btn:hover {
    background: rgba(15, 23, 42, .06) !important;
    color: var(--sp-text) !important;
}

/* ── Escalation banner — slimmer with brand edge ──────────── */
.ai-escalation-banner.active {
    padding: .55rem .8rem !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--sp-border) !important;
    font-size: .75rem !important;
    background: var(--sp-teal-soft) !important;
    color: var(--sp-text) !important;
    position: relative !important;
}
.ai-escalation-banner.active::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2.5px;
    background: var(--sp-teal);
}
.ai-escalation-banner.connected { background: rgba(16, 185, 129, .10) !important; }
.ai-escalation-banner.connected::before { background: #10b981 !important; }
.ai-escalation-banner.resolved  { background: rgba(107, 114, 128, .10) !important; }
.ai-escalation-banner.resolved::before  { background: var(--sp-muted) !important; }

.ai-escalation-icon { font-size: .9rem !important; }
.ai-escalation-text { font-weight: 500 !important; line-height: 1.25 !important; }
.ai-escalation-ticket {
    font-family: var(--sp-mono) !important;
    font-size: .75rem !important;
    color: var(--sp-muted) !important;
    margin-top: 1px !important;
    letter-spacing: .02em !important;
}

/* ── Resume notice (small system bubble shown on restore) ── */
.ai-msg-resume .ai-msg-bubble {
    background: var(--sp-teal-soft) !important;
    color: var(--sp-text) !important;
    border: 1px solid var(--sp-teal-edge) !important;
    font-size: .75rem !important;
    padding: .4rem .65rem !important;
}
.ai-msg-resume .ai-msg-bubble strong {
    font-family: var(--sp-mono);
    font-weight: 600;
    letter-spacing: .02em;
}

/* ── System messages — slimmer, centered, monospace tag ──── */
.ai-msg-system .ai-msg-bubble {
    font-size: .75rem !important;
    padding: .35rem .7rem !important;
    background: var(--sp-surface) !important;
    color: var(--sp-muted) !important;
    border: 1px solid var(--sp-border-soft) !important;
    border-radius: 8px !important;
    max-width: 85% !important;
}

/* ── Agent message — teal accent edge ─────────────────────── */
.ai-msg-bubble--agent {
    border-left: 2.5px solid var(--sp-teal) !important;
    background: var(--sp-bg) !important;
    border-top: 1px solid var(--sp-border) !important;
    border-right: 1px solid var(--sp-border) !important;
    border-bottom: 1px solid var(--sp-border) !important;
}
.ai-msg-sender {
    font-size: .75rem !important;
    color: var(--sp-teal) !important;
    font-weight: 600 !important;
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
    margin-bottom: 2px !important;
}

/* ── Agent offer card — brand-aligned ─────────────────────── */
.ai-agent-offer-bubble {
    background: var(--sp-bg) !important;
    border: 1px solid var(--sp-border) !important;
    border-left: 2.5px solid var(--sp-teal) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04) !important;
}
.ai-offer-yes {
    background: var(--sp-navy) !important;
    color: #fff !important;
    border: 0 !important;
    padding: .42rem .85rem !important;
    border-radius: 8px !important;
    font-size: .75rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background .15s ease, transform .12s ease !important;
}
.ai-offer-yes:hover  { background: #11203d !important; }
.ai-offer-yes:active { transform: scale(.97) !important; }
.ai-offer-no {
    background: var(--sp-surface) !important;
    color: var(--sp-text) !important;
    border: 1px solid var(--sp-border) !important;
    padding: .42rem .85rem !important;
    border-radius: 8px !important;
    font-size: .75rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background .15s ease !important;
}
.ai-offer-no:hover { background: rgba(15, 23, 42, .06) !important; }

/* ── Quick-action chips ───────────────────────────────────── */
.ai-quick-actions {
    gap: .35rem !important;
    padding: .4rem 0 !important;
}
.ai-quick-btn {
    padding: .32rem .7rem !important;
    background: var(--sp-bg) !important;
    color: var(--sp-text) !important;
    border: 1px solid var(--sp-border) !important;
    border-radius: 9999px !important;
    font-size: .75rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background .15s ease, border-color .15s ease, color .15s ease !important;
}
.ai-quick-btn:hover {
    background: var(--sp-teal-soft) !important;
    border-color: var(--sp-teal-edge) !important;
    color: var(--sp-teal) !important;
}

/* ── Date separator — tiny tracked label ──────────────────── */
.ai-chat-date-sep {
    margin: .85rem 0 .55rem !important;
    text-align: center !important;
}
.ai-chat-date-sep span {
    font-size: .75rem !important;
    color: var(--sp-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    background: transparent !important;
    padding: 0 !important;
}

/* ── Input area — slimmer, brand focus ring ───────────────── */
.support-chat-input-wrap,
.ai-chat-input-wrap {
    border-radius: 12px !important;
    border: 1px solid var(--sp-border) !important;
    background: var(--sp-bg) !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}
.support-chat-input-wrap:focus-within,
.ai-chat-input-wrap:focus-within {
    border-color: var(--sp-teal) !important;
    box-shadow: 0 0 0 3px rgba(0, 201, 183, .12) !important;
}
.support-chat-input,
.ai-chat-input {
    font-size: .82rem !important;
    line-height: 1.4 !important;
}
.support-chat-send-btn,
.ai-chat-send-btn {
    width: 2.1rem !important;
    height: 2.1rem !important;
    border-radius: 9px !important;
    background: var(--sp-teal) !important;
    transition: background .15s ease, transform .12s ease !important;
}
.support-chat-send-btn:hover,
.ai-chat-send-btn:hover { background: #00695c !important; }
.support-chat-send-btn:active,
.ai-chat-send-btn:active { transform: scale(.94) !important; }

/* ── Footer meta line — tiny secure note ─────────────────── */
.support-chat-footer-meta,
.ai-chat-footer-meta {
    font-size: .75rem !important;
    color: var(--sp-muted) !important;
    letter-spacing: .03em !important;
    text-transform: uppercase !important;
}

/* ── Custom scrollbar (matches notification panel) ────────── */
.ai-chat-messages::-webkit-scrollbar,
.support-chat-messages::-webkit-scrollbar { width: 6px !important; }
.ai-chat-messages::-webkit-scrollbar-track,
.support-chat-messages::-webkit-scrollbar-track { background: transparent !important; }
.ai-chat-messages::-webkit-scrollbar-thumb,
.support-chat-messages::-webkit-scrollbar-thumb {
    background: var(--sp-border) !important;
    border-radius: 9999px !important;
}
.ai-chat-messages::-webkit-scrollbar-thumb:hover,
.support-chat-messages::-webkit-scrollbar-thumb:hover {
    background: var(--sp-teal-edge) !important;
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .support-resume-dot,
    .ai-status-dot { animation: none !important; }
    .support-resume-cta,
    .ai-offer-yes,
    .support-chat-send-btn,
    .ai-chat-send-btn { transition: none !important; }
}

/* ── Past Conversations list (support hub) ───────────────── */
.support-history-section {
    margin: 0 0 1.25rem 0;
}
.support-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
}
.support-history-clear {
    background: none;
    border: none;
    color: var(--sp-muted, #6b7280);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    cursor: pointer;
    padding: .25rem .35rem;
    border-radius: 6px;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s, color .15s;
}
.support-history-clear:hover,
.support-history-clear:active {
    background: var(--sp-soft, rgba(0,0,0,.04));
    color: var(--sp-text, #111827);
}
.support-history-list {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.support-history-item {
    background: var(--sp-card-bg, #ffffff);
    border: 1px solid var(--sp-border, rgba(0,0,0,.08));
    border-radius: 14px;
    padding: .7rem .8rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.support-history-item:hover {
    border-color: var(--sp-teal-edge, #0ea5a4);
    box-shadow: 0 4px 14px rgba(0,0,0,.05);
}
.support-history-item:active {
    transform: scale(.985);
}
.support-history-item-top {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .35rem;
}
.support-history-item-meta {
    flex: 1;
    font-size: .75rem;
    color: var(--sp-muted, #6b7280);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.support-history-item-del {
    background: none;
    border: none;
    color: var(--sp-muted, #9ca3af);
    cursor: pointer;
    padding: .25rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.support-history-item-del:hover {
    background: rgba(239, 68, 68, .08);
    color: #dc2626;
}
.support-history-item-preview {
    font-size: .82rem;
    color: var(--sp-text, #111827);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.support-history-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .2rem .45rem;
    border-radius: 999px;
    line-height: 1;
    flex-shrink: 0;
}
.support-history-badge-ai       { background: rgba(59,130,246,.12);  color: #2563eb; }
.support-history-badge-waiting  { background: rgba(245,158,11,.14);  color: #b45309; }
.support-history-badge-live     { background: rgba(16,185,129,.14);  color: #047857; }
.support-history-badge-resolved { background: rgba(107,114,128,.14); color: #4b5563; }

/* ── Transcript viewer overlay ───────────────────────────── */
.support-history-viewer {
    position: absolute;
    inset: 0;
    background: var(--sp-bg, #ffffff);
    color: var(--sp-text, #111827);
    z-index: 5;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: supportHistorySlide .22s ease-out;
}
@keyframes supportHistorySlide {
    from { transform: translateX(12px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
.support-history-viewer-header {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--sp-border, rgba(0,0,0,.08));
    background: var(--sp-bg, #ffffff);
    flex-shrink: 0;
}
.support-history-viewer-back {
    background: none;
    border: none;
    color: var(--sp-text, #111827);
    cursor: pointer;
    padding: .4rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s;
}
.support-history-viewer-back:hover,
.support-history-viewer-back:active {
    background: var(--sp-soft, rgba(0,0,0,.05));
}
.support-history-viewer-title {
    flex: 1;
    min-width: 0;
}
.support-history-viewer-name {
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.support-history-viewer-meta {
    font-size: .75rem;
    color: var(--sp-muted, #6b7280);
    margin-top: .15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.support-history-viewer-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    background: var(--sp-bg, #ffffff);
}
.support-history-readonly {
    text-align: center;
    font-size: .75rem;
    color: var(--sp-muted, #9ca3af);
    margin: 1.25rem 0 .25rem 0;
    padding: .5rem;
    border-top: 1px dashed var(--sp-border, rgba(0,0,0,.08));
}
.support-history-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--sp-muted, #9ca3af);
    font-size: .85rem;
}

/* ===========================================================
   MOBILE-PRIORITY CHAT POLISH
   -----------------------------------------------------------
   Goal: a calm, sticky chat surface that does NOT zoom on
   focus, does NOT jump when the soft keyboard opens, respects
   notches, and never bounces the whole page when scrolling
   the message list.

   Targets the user-side AI/support chat panel (ai-chat-*)
   AND the in-page slide variant (#slide-ai-chat).
   =========================================================== */

/* 1) Lock typography at 16px on inputs so iOS Safari does NOT
      zoom the viewport when the user taps to type. The visible
      size stays small via line-height + padding compensation. */
.ai-chat-input,
.support-chat-input {
    font-size: 16px !important;
    line-height: 1.35 !important;
    -webkit-text-size-adjust: 100% !important;
}

/* 2) Use the dynamic viewport units everywhere so the chat
      doesn't get cut off behind the iOS URL bar / Android
      gesture bar. Falls back gracefully on older browsers. */
@supports (height: 100dvh) {
    #ai-chat-panel,
    #slide-ai-chat .ai-chat-shell,
    .ai-chat-shell {
        height: 100dvh !important;
        max-height: 100dvh !important;
    }
}

/* 3) Mobile-first layout — full-bleed sheet, sticky header
      and footer, single scroll surface in the middle. */
@media (max-width: 640px) {

    /* Stop the whole page from zooming in/out on double-tap
       inside the chat region. */
    #ai-chat-panel,
    #slide-ai-chat,
    .ai-chat-shell,
    .ai-chat-header,
    .ai-chat-footer,
    .ai-chat-input-wrap,
    .ai-chat-messages,
    .ai-chat-send-btn,
    .ai-chat-new-btn,
    .ai-chat-close-btn,
    .ai-chat-input {
        touch-action: manipulation;
    }

    /* Full-screen sheet with safe-area awareness.
       NOTE: `display` is intentionally NOT forced here. The chat panel
       starts with inline `style="display:none"` in dashboard.php; the
       open/close JS toggles that inline value. Forcing `display: flex
       !important` would override the inline `display:none` and cause the
       empty panel to cover the whole dashboard with a white sheet. */
    #ai-chat-panel,
    .ai-chat-shell {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        margin: 0 !important;
        flex-direction: column !important;
        overflow: hidden !important;
        background: var(--sp-bg, #ffffff) !important;
        padding-top: env(safe-area-inset-top, 0px) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        padding-left: env(safe-area-inset-left, 0px) !important;
        padding-right: env(safe-area-inset-right, 0px) !important;
    }

    /* Header stays put. */
    .ai-chat-header,
    .support-chat-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 5 !important;
        flex-shrink: 0 !important;
        backdrop-filter: saturate(150%) blur(8px);
        -webkit-backdrop-filter: saturate(150%) blur(8px);
        background: rgba(255, 255, 255, .94) !important;
    }

    /* Message list — the ONLY scrolling element. Smooth
       momentum scroll, no rubber-banding past the edges. */
    .ai-chat-messages {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        scroll-behavior: smooth !important;
        padding-bottom: .75rem !important;
    }

    /* Footer pinned to bottom. Uses safe-area + a small extra
       buffer so the send button is never under the home bar. */
    .ai-chat-footer {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 5 !important;
        flex-shrink: 0 !important;
        background: var(--sp-bg, #ffffff) !important;
        border-top: 1px solid var(--sp-border, rgba(0,0,0,.08)) !important;
        padding: .55rem .85rem calc(.55rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Input wrap — give it a comfortable touch target. */
    .ai-chat-input-wrap {
        padding: .35rem .35rem .35rem .75rem !important;
        min-height: 2.6rem !important;
    }
    .ai-chat-input {
        min-height: 1.6rem !important;
        max-height: 96px !important;
        padding: .25rem 0 !important;
    }

    /* Send button — bigger touch target, centred icon. */
    .ai-chat-send-btn {
        width: 2.35rem !important;
        height: 2.35rem !important;
        min-width: 2.35rem !important;
    }

    /* Message bubbles — wider on phones so two-line replies
       don't wrap awkwardly inside narrow columns. */
    .ai-chat-messages .ai-msg,
    .ai-chat-messages .ai-msg-bubble {
        max-width: 88% !important;
    }

    /* History viewer — same full-bleed treatment so the
       transcript doesn't feel like a tiny modal on phones. */
    .support-history-viewer {
        position: fixed !important;
        inset: 0 !important;
        height: 100dvh !important;
        padding-top: env(safe-area-inset-top, 0px) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }

    /* Resolved overlay — full sheet, content centred. */
    .ai-chat-ended-overlay {
        position: absolute !important;
        inset: 0 !important;
        padding: 1.5rem !important;
    }
}

/* 4) When the soft keyboard opens on iOS / Android, the visual
      viewport shrinks. The CSS variable below (set by
      chat-handler.js) lets us pin the footer to the actual
      visible bottom so it never floats above the keyboard. */
.ai-chat-shell.kb-open .ai-chat-footer,
#ai-chat-panel.kb-open .ai-chat-footer {
    bottom: var(--kb-offset, 0px) !important;
}

/* 5) Tablet & up — keep the existing floating-panel feel,
      but enforce a sane max height so the panel never
      overflows the viewport. */
@media (min-width: 641px) {
    #ai-chat-panel,
    .ai-chat-shell {
        max-height: min(640px, calc(100dvh - 2rem)) !important;
    }
    .ai-chat-messages {
        overscroll-behavior: contain !important;
        scroll-behavior: smooth !important;
    }
}

/* 6) Reduce layout thrash from the autosizing textarea by
      hinting the GPU. */
.ai-chat-input,
.ai-chat-messages {
    will-change: scroll-position, height;
    transform: translateZ(0);
}


/* ── Visible back button in the AI support header ──────────────
   The header surface is light, so the old inline white icon was
   invisible. This paints it with the text/teal tokens instead. */
.ai-chat-back-btn {
    display: inline-flex !important;
    align-items: center;
    gap: .25rem;
    flex-shrink: 0;
    margin-right: .4rem;
    padding: .3rem .55rem .3rem .35rem;
    border: 1px solid var(--sp-border);
    border-radius: 999px;
    background: #fff;
    color: var(--sp-text);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s ease, transform .15s ease;
}
.ai-chat-back-btn svg { width: 1rem; height: 1rem; stroke: currentColor; }
.ai-chat-back-btn:hover { background: var(--sp-surface, #f2f4f6); }
.ai-chat-back-btn:active { transform: scale(.96); }
@media (max-width: 360px) {
    .ai-chat-back-label { display: none; }
    .ai-chat-back-btn { padding: .3rem; }
}

/* ===== Source: style-patch.css ===== */
/* ═══════════════════════════════════════════════════════════════
   style-patch.css  —  Safe targeted improvements for style.css
   Link order in <head>:
     style.css → style-patch.css
   ═══════════════════════════════════════════════════════════════ */

/* ── VARIABLE BRIDGE ─────────────────────────────────────────── */
:root {
  --card-bg:        var(--surface);
  --bg-2:           var(--bg);

  /* --brand-rgb is used by dashboard.css for rgba() box-shadows
     but is missing from style.css — defining it here fixes those */
  --brand-rgb:      0, 201, 183;

  --ease-spring:    cubic-bezier(0.32, 0.72, 0, 1);
  --ease-smooth:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-focus:   0 0 0 3.5px rgba(37, 99, 235, 0.12);
  --shadow-card-up: var(--elevation-raised);
}

/* ── DARK MODE VARIABLE RESTORATION ──────────────────────────────
   dashboard.css redefines `:root` variables (--bg, --surface, etc.)
   AFTER style.css's [data-theme="dark"] block. Since both selectors
   have equal specificity, load order decides — and dashboard.css wins,
   wiping out every dark colour. Redeclaring them here (last file in
   load order) restores dark mode correctly. ───────────────────────── */
[data-theme="dark"] {
  --card-bg:      var(--surface);
  --bg-2:         var(--bg);
  --shadow-focus: 0 0 0 3.5px rgba(59, 130, 246, 0.18);

  /* Core colours overridden by dashboard.css :root — restore here */
  --bg:      #0f172a;
  --surface: #1e293b;
  --border:  #334155;
  --text:    #f1f5f9;
  --text-2:  #cbd5e1;
  --muted:   #64748b;

  --brand-light:    rgba(37, 99, 235, 0.18);

  --success-bg:     rgba(22, 163, 74, 0.15);
  --success-border: rgba(22, 163, 74, 0.3);

  --warning-bg:     rgba(217, 119, 6, 0.15);
  --warning-border: rgba(217, 119, 6, 0.3);

  --danger-bg:      rgba(220, 38, 38, 0.15);
  --danger-border:  rgba(220, 38, 38, 0.3);

  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* ── OVERLAYS — opacity only, NO backdrop-filter transition
   (animating backdrop-filter on fixed full-screen elements
    blocks touch/click events on iOS Safari and Android Chrome) ── */
.txn-overlay {
  transition: opacity 0.3s var(--ease-standard);
}

.sheet-overlay {
  transition: opacity 0.3s var(--ease-standard);
}

/* ── BOTTOM SHEET — spring easing (was material ease) ────────── */
.bottom-sheet {
  transition: transform 0.42s var(--ease-spring);
}

/* ── DEPOSIT STEPPER ─────────────────────────────────────────── */
.deposit-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 1rem;
  margin-bottom: 1.75rem;
}

.deposit-step-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 800;
  flex-shrink: 0;
  background: var(--bg);
  color: var(--muted);
  border: 2px solid var(--border);
  position: relative;
  z-index: 1;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s var(--ease-spring);
}

.deposit-step-dot.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  transform: scale(1.1);
  box-shadow: 0 0 0 4px var(--brand-light), 0 2px 8px rgba(37, 99, 235, 0.25);
}

.deposit-step-dot.done {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}

.deposit-step-line {
  flex: 1;
  max-width: 64px;
  height: 2.5px;
  background: var(--border);
  border-radius: 9999px;
  position: relative;
  overflow: hidden;
}

.deposit-step-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--success);
  border-radius: 9999px;
  transition: width 0.5s var(--ease-spring);
}

.deposit-step-line.done::after {
  width: 100%;
}

/* ── FORM INPUTS — hover state + refined focus ring ──────────── */
.form-input:hover:not(:focus):not([readonly]) {
  border-color: #c3d3e8;
}

.form-input:focus {
  box-shadow: var(--shadow-focus);
}

/* Select — native chevron */
select.form-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 0.9rem;
  padding-right: 2.25rem;
  -webkit-appearance: none;
  appearance: none;
}

/* ── AMOUNT INPUT WRAP ────────────────────────────────────────── */
.amount-input-wrap {
  border-radius: 14px;
}

.amount-input-wrap:hover:not(:focus-within) {
  border-color: #c3d3e8;
}

.amount-input-wrap:focus-within {
  box-shadow: var(--shadow-focus);
}

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn {
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s var(--ease-spring),
    opacity 0.15s ease;
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.38);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0) scale(0.976);
}

/* ── PAYMENT METHOD CARDS ─────────────────────────────────────── */
.method-card {
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s var(--ease-spring);
}

.method-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-xs);
  border-color: color-mix(in srgb, var(--brand) 35%, var(--border));
}

.method-card:active {
  transform: scale(0.97);
}

.method-card.active {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 16%, transparent);
}

.method-icon {
  transition: transform 0.2s var(--ease-spring);
}

.method-card:hover .method-icon {
  transform: scale(1.12);
}

/* ── ACTION CHIPS (home screen) ───────────────────────────────── */
#slide-home .action-chip-icon {
  transition: transform 0.2s var(--ease-spring), box-shadow 0.2s ease;
}

#slide-home .action-chip:hover .action-chip-icon {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.18);
}

#slide-home .action-chip:active .action-chip-icon {
  transform: scale(0.93);
  box-shadow: none;
}

/* ── HERO PORTFOLIO — accent line shimmer ─────────────────────── */
.hero-portfolio::before {
  background: linear-gradient(180deg, #2563eb 0%, #60a5fa 50%, #2563eb 100%);
  background-size: 100% 200%;
  animation: accentShimmer 4s ease-in-out infinite;
}

@keyframes accentShimmer {
  0%, 100% { background-position: 0% 0%; }
  50%       { background-position: 0% 100%; }
}

/* ── TRANSACTION ROWS ─────────────────────────────────────────── */
.txn-row {
  position: relative;
  overflow: hidden;
  transition: background 0.15s ease, transform 0.15s var(--ease-spring);
}

.txn-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: transparent;
  transition: background 0.2s ease;
}

.txn-row:hover {
  background: var(--surface-2);
}

.txn-row:has(.txn-icon.deposit):hover::before  { background: var(--success); }
.txn-row:has(.txn-icon.withdraw):hover::before { background: var(--danger); }

/* ── FILTER TABS ──────────────────────────────────────────────── */
.txn-filter-tab {
  transition: color 0.15s ease, background 0.2s var(--ease-smooth);
}

.txn-filter-tab.active {
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

/* ── ONBOARDING PROGRESS ──────────────────────────────────────── */
.onboarding-progress-fill {
  background: linear-gradient(90deg, var(--brand), #60a5fa);
}

/* ── KYC STEP DOTS ────────────────────────────────────────────── */
.kyc-ps-dot {
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.kyc-ps-dot.active {
  box-shadow: 0 0 0 4px var(--brand-light), 0 2px 8px rgba(37, 99, 235, 0.2);
}

/* ── NAV ACTIVE INDICATOR ─────────────────────────────────────── */
/* The JS-driven .nav-indicator calculates position by tab index
   but often lands on the wrong tab (off-by-one or wrong mapping).
   Hiding it and using the CSS ::before approach instead — it is
   always perfectly aligned because it lives on the .active tab
   itself, driven purely by CSS, no JS calculation needed. */
.nav-indicator {
  display: none;
}

/* Restore and polish the ::before bar on the active tab (mobile only) */
@media (max-width: 767px) {
  .nav-tab.active::before {
    content: '';
    position: absolute;
    top: 0;

    width: 26px;              /* controls indicator length */
    height: 3px;

    left: 50%;
    transform: translateX(-50%);

    background: var(--brand);
    border-radius: 0 0 6px 6px;
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.45);
    animation: navBarIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

/* Desktop keeps background-highlight approach from style.css — no ::before */
@media (min-width: 768px) {
  .nav-tab.active::before {
    display: none;
  }
}

@keyframes navBarIn {
  from { opacity: 0; transform: scaleX(0.4); }
  to   { opacity: 1; transform: scaleX(1); }
}

/* ── TOGGLE SWITCH — spring thumb ────────────────────────────── */
.settings-toggle-track::after {
  transition: transform 0.28s var(--ease-spring), box-shadow 0.2s ease;
}

.settings-toggle input:checked + .settings-toggle-track::after {
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
}

/* ── SETTINGS ITEMS ───────────────────────────────────────────── */
.settings-item {
  -webkit-tap-highlight-color: transparent;
}

/* ── NOTIFICATION PANEL ───────────────────────────────────────── */
.notif-panel {
  transition:
    transform 0.25s var(--ease-spring),
    opacity 0.2s ease;
}

/* ── LANGUAGE MENU ────────────────────────────────────────────── */
.lang-menu {
  transition:
    transform 0.2s var(--ease-spring),
    opacity 0.18s ease;
}

/* ── BADGES ───────────────────────────────────────────────────── */
.badge-verified  { box-shadow: inset 0 1px 0 rgba(22, 163, 74, 0.15); }
.badge-pending   { box-shadow: inset 0 1px 0 rgba(217, 119, 6, 0.15); }
.badge-unverified{ box-shadow: inset 0 1px 0 rgba(220, 38, 38, 0.12); }

/* ── FOCUS VISIBLE ────────────────────────────────────────────── */
button:focus-visible,
a:focus-visible,
.nav-tab:focus-visible,
.method-card:focus-visible {
  outline: 2.5px solid var(--brand);
  outline-offset: 2px;
}

/* ── REDUCED MOTION ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bottom-sheet,
  .txn-overlay,
  .sheet-overlay,
  .btn,
  .method-card,
  .txn-row,
  .deposit-step-dot,
  .nav-indicator {
    transition: none !important;
    animation: none !important;
  }

  .hero-portfolio::before {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE VIEWPORT LOCK  (FIXED)
   The previous version put `position: fixed` on <html> and <body>,
   which broke the percentage-height chain
   .app-shell → .slides-viewport → .slides-track → .slide
   on real devices. The middle pane collapsed to 0px and the page
   showed a blank white area between header and bottom nav.
   This version locks the viewport without position:fixed and
   restores explicit heights all the way down.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  html,
  body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }

  /* App shell fills exactly the locked viewport */
  .app-shell {
    height: 100vh;
    height: 100dvh;
    min-height: 100dvh;
  }

  /* ── BOTTOM NAV — always visible above browser UI ──────────── */
  /* style.css line 1665 resets bottom-nav to position:relative    */
  /* which lets the browser toolbar cover it. Fix: fixed + safe    */
  /* area so it always sits above any system UI chrome.            */
  .bottom-nav {
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    min-height: var(--nav-h);
    background: var(--surface);
    border-top: 1px solid var(--border);
  }

  /* Middle pane: must have a real, non-zero flex height.
     `min-height: 0` is required inside a flex column, otherwise
     the browser defaults it to `auto` and the pane collapses. */
  .slides-viewport {
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  }

  /* Re-assert explicit heights so slides actually render */
  .slides-track { height: 100%; }
  .slide        { height: 100%; }

  /* Fix nav-tab active indicator centering:
     navBarIn animation was overwriting translateX(-50%) with
     transform:scaleX() alone, mis-centering the indicator bar. */
  .nav-tab.active::before {
    animation: navBarInMobile 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  @keyframes navBarInMobile {
    from { opacity: 0; transform: translateX(-50%) scaleX(0.4); }
    to   { opacity: 1; transform: translateX(-50%) scaleX(1); }
  }
}

/* ===== Source: kyc-status.css ===== */
/* ============================================================
   kyc-status.css  —  KYC Phase Cards & Upload Zones
   Depends on:  style.css → style-patch.css → this file
   Do NOT redefine any layout/nav/shell rules here.
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   SHARED CARD SHELL
   ══════════════════════════════════════════════════════════════ */
.kyc-status-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius, 1.25rem);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
}

/* ── Coloured top accent line per phase ── */
.kyc-verified-card { border-top: 3px solid var(--success, #10b981); }
.kyc-pending-card  { border-top: 3px solid var(--warning, #f59e0b); }
.kyc-rejected-card { border-top: 3px solid var(--danger,  #ef4444); }

/* ══════════════════════════════════════════════════════════════
   ICON WRAP
   ══════════════════════════════════════════════════════════════ */
.kyc-status-icon-wrap {
  width:  var(--icon-lg);
  height: var(--icon-lg);
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: var(--space-3);
  flex-shrink: 0;
}

/* ── Verified: layered rings + glow + subtle pulse ── */
.kyc-status-icon-wrap.verified {
  width:  4.25rem;
  height: 4.25rem;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.12);
  color: var(--success, #10b981);
  font-size: 1.65rem;
  position: relative;
  box-shadow:
    0 0 0 6px rgba(16, 185, 129, 0.08),
    0 0 0 12px rgba(16, 185, 129, 0.04),
    0 4px 20px rgba(16, 185, 129, 0.22);
  animation: kyc-verified-pulse 3s ease-in-out infinite;
}

@keyframes kyc-verified-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 6px  rgba(16, 185, 129, 0.08),
      0 0 0 12px rgba(16, 185, 129, 0.04),
      0 4px 20px rgba(16, 185, 129, 0.22);
  }
  50% {
    box-shadow:
      0 0 0 8px  rgba(16, 185, 129, 0.12),
      0 0 0 16px rgba(16, 185, 129, 0.06),
      0 6px 28px rgba(16, 185, 129, 0.28);
  }
}

.kyc-status-icon-wrap.pending {
  background: rgba(245, 158, 11, 0.12);
  color: var(--warning, #f59e0b);
}

.kyc-status-icon-wrap.rejected {
  background: rgba(239, 68, 68, 0.12);
  color: var(--danger, #ef4444);
}

/* ══════════════════════════════════════════════════════════════
   BODY COPY
   ══════════════════════════════════════════════════════════════ */
.kyc-status-body {
  margin-bottom: var(--space-4);
}

.kyc-status-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 0.35rem;
  letter-spacing: -0.01em;
}

.kyc-status-sub {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 var(--space-4);
}

/* ══════════════════════════════════════════════════════════════
   PHASE BADGE  (pill inline below the subtitle)
   ══════════════════════════════════════════════════════════════ */
.kyc-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.kyc-status-badge.verified {
  background: rgba(16, 185, 129, 0.12);
  color: var(--success, #10b981);
}

.kyc-status-badge.pending {
  background: rgba(245, 158, 11, 0.12);
  color: var(--warning, #f59e0b);
}

.kyc-status-badge.rejected {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger, #ef4444);
}

/* ══════════════════════════════════════════════════════════════
   DETAIL ROWS  (name / doc type / nationality)
   ══════════════════════════════════════════════════════════════ */
.kyc-status-details {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.kyc-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border);
}

.kyc-detail-row:last-child {
  border-bottom: none;
}

.kyc-detail-label {
  font-size: .75rem;
  color: var(--muted);
  font-weight: 500;
}

.kyc-detail-value {
  font-size: .75rem;
  font-weight: 700;
  color: var(--text);
  text-align: right;
  max-width: 60%;
  word-break: break-word;
}

/* ══════════════════════════════════════════════════════════════
   PENDING TIMELINE  (3-step progress)
   ══════════════════════════════════════════════════════════════ */
.kyc-status-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

.kyc-timeline-step {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding-bottom: 1.1rem;
  position: relative;
}

/* Connecting vertical line between steps */
.kyc-timeline-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 0.9rem;
  top: 2rem;
  width: 2px;
  bottom: 0;
  background: var(--border);
  border-radius: 2px;
}

.kyc-timeline-step.done::before {
  background: var(--success, #10b981);
}

.kyc-timeline-step:last-child {
  padding-bottom: 0;
}

/* Dot */
.kyc-timeline-dot {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 800;
  color: var(--muted);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.kyc-timeline-step.done .kyc-timeline-dot {
  background: var(--success, #10b981);
  border-color: var(--success, #10b981);
  color: #fff;
}

.kyc-timeline-step.active .kyc-timeline-dot {
  background: var(--surface);
  border-color: var(--brand, #2563eb);
  color: var(--brand, #2563eb);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

/* Text block */
.kyc-timeline-text {
  padding-top: 0.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.kyc-timeline-text strong {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
}

.kyc-timeline-text span {
  font-size: .75rem;
  color: var(--muted);
  line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════════
   REJECTION REASON BOX
   ══════════════════════════════════════════════════════════════ */
.kyc-rejection-reason {
  background: var(--danger-bg, rgba(239, 68, 68, 0.08));
  border: 1px solid var(--danger-border, rgba(239, 68, 68, 0.2));
  border-radius: 0.875rem;
  padding: 1rem;
  margin-top: 1.25rem;
}

.kyc-rejection-reason-label {
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--danger, #ef4444);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.kyc-rejection-reason-text {
  font-size: 0.75rem;
  color: var(--text);
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════
   KYC UPLOAD ZONES  (front / back document upload)
   ══════════════════════════════════════════════════════════════ */
.kyc-upload-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius, 1.25rem);
  padding: 0;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background   0.2s ease;
  background: var(--bg);
  -webkit-tap-highlight-color: transparent;
  min-height: 9rem;
  display: flex;
  align-items: stretch;
}

.kyc-upload-zone:hover,
.kyc-upload-zone:focus-visible {
  border-color: var(--brand, #2563eb);
  background: var(--brand-light, rgba(37, 99, 235, 0.06));
  outline: none;
}

.kyc-upload-zone:active {
  transform: scale(0.985);
}

/* ── Zone preview wrapper (fills the zone, centres content) ── */
.kyc-zone-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 9rem;
  position: relative;
}

/* ── Placeholder (shown before an image is chosen) ── */
.kyc-zone-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem 1rem;
  width: 100%;
}

/* ── Upload arrow icon ── */
.kyc-zone-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.08);
  color: var(--brand, #2563eb);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}

.kyc-upload-zone:hover .kyc-zone-icon {
  background: rgba(37, 99, 235, 0.14);
  transform: translateY(-2px);
}

.kyc-zone-icon svg {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
  stroke: currentColor;
}

/* ── "Tap to upload" label ── */
.kyc-zone-hint {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--brand, #2563eb);
  display: block;
  letter-spacing: -0.01em;
}

/* ── Formats sub-line (when added) ── */
.kyc-zone-formats {
  font-size: .75rem;
  color: var(--muted);
  margin-top: 0.1rem;
  display: block;
  opacity: 0.75;
}

/* ── Preview image once selected ── */
.kyc-zone-img-preview {
  width: 100%;
  height: 100%;
  min-height: 9rem;
  object-fit: cover;
  border-radius: calc(var(--radius, 1.25rem) - 2px);
  display: block;
}

.kyc-upload-zone i {
  font-size: 1.5rem;
  color: var(--muted);
  display: block;
  margin-bottom: 0.4rem;
}

.kyc-upload-zone-label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--muted);
  display: block;
}

/* ── Accepted formats note ── */
.kyc-upload-zone-hint {
  font-size: .75rem;
  color: var(--muted);
  margin-top: 0.25rem;
  display: block;
  opacity: 0.7;
}

/* ══════════════════════════════════════════════════════════════
   DOC TYPE CARDS  (full replacement for style-patch.css line 7)
   These upgrade the minimal rule already in style-patch.css
   ══════════════════════════════════════════════════════════════ */
.kyc-doctype-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius, 1.25rem);
  padding: 1rem 0.75rem;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background   0.2s ease,
    box-shadow   0.2s ease,
    transform    0.2s var(--ease-spring, cubic-bezier(0.32,0.72,0,1));
  -webkit-tap-highlight-color: transparent;
}

.kyc-doctype-card:hover {
  border-color: var(--brand, #2563eb);
}

.kyc-doctype-card.selected {
  border-color: var(--brand, #2563eb);
  background: var(--brand-light, rgba(37, 99, 235, 0.06));
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1), 0 2px 8px rgba(37, 99, 235, 0.1);
  transform: translateY(-2px);
}

.kyc-doctype-card i {
  font-size: 1.35rem;
  color: var(--muted);
  display: block;
  margin-bottom: 0.4rem;
  transition: color 0.2s ease;
}

.kyc-doctype-card.selected i {
  color: var(--brand, #2563eb);
}

.kyc-doctype-card span {
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  transition: color 0.2s ease;
}

.kyc-doctype-card.selected span {
  color: var(--brand, #2563eb);
}

/* ══════════════════════════════════════════════════════════════
   KYC STEP PROGRESS BAR
   (replaces the 4 lines in style-patch.css — same classes,
    extended with done state + connecting line fill)
   ══════════════════════════════════════════════════════════════ */
.kyc-ps-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 800;
  background: var(--bg);
  color: var(--muted);
  border: 2px solid var(--border);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition:
    background     0.3s ease,
    border-color   0.3s ease,
    color          0.3s ease,
    box-shadow     0.3s ease,
    transform      0.3s var(--ease-spring, cubic-bezier(0.32,0.72,0,1));
}

.kyc-ps-dot.active {
  background: var(--brand, #2563eb);
  border-color: var(--brand, #2563eb);
  color: #fff;
  transform: scale(1.12);
  box-shadow: 0 0 0 4px var(--brand-light, rgba(37, 99, 235, 0.12)),
              0 2px 8px rgba(37, 99, 235, 0.25);
}

.kyc-ps-dot.done {
  background: var(--success, #10b981);
  border-color: var(--success, #10b981);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}

/* ══════════════════════════════════════════════════════════════
   DARK MODE OVERRIDES
   ══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .kyc-status-card {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .kyc-upload-zone {
  background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .kyc-upload-zone:hover {
  background: rgba(37, 99, 235, 0.1);
}

[data-theme="dark"] .kyc-rejection-reason {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.25);
}

[data-theme="dark"] .kyc-doctype-card.selected {
  background: rgba(37, 99, 235, 0.12);
}


/* ============================================================
   KYC VERIFIED CARD — FINAL PRODUCTION PRESENTATION
   Presentation only. No functional/JS behaviour depends on this.
   ============================================================ */

.kyc-status-card.kyc-vcard {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid rgba(16, 185, 129, 0.16);
  border-top: 3px solid var(--success, #10b981);
  border-radius: 1rem;
  background: var(--surface, #fff);
  box-shadow: var(--elevation-subtle);
}

/* ── Verified header ── */
.kyc-vcard .kyc-vhead {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

/* ── Shield verification emblem ── */
.kyc-vcard .kyc-vicon {
  width: 4.5rem;
  height: 4.5rem;
  min-width: 4.5rem;
  flex: 0 0 4.5rem;
  margin: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 185, 129, 0.1);
  color: var(--success, #10b981);
  line-height: 1;
  box-shadow: none;
  animation: none;
}

.kyc-vcard .kyc-vicon svg {
  width: 2.9rem;
  height: 2.9rem;
  display: block;
}

/* ── Title area ── */
.kyc-vcard .kyc-vhead-text {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.3rem;
  padding: 0;
}

.kyc-vcard .kyc-vtitle {
  margin: 0;
  padding: 0;
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  line-height: 1.2;
  font-weight: 750;
  letter-spacing: -0.015em;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* ── Verified status badge ── */
.kyc-vcard .kyc-vbadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0.18rem 0.5rem;
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.08);
  color: var(--success, #10b981);
  font-size: .75rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  box-shadow: none;
}

.kyc-vcard .kyc-vbadge i {
  margin: 0;
  padding: 0;
  display: inline-block;
  font-size: .75rem;
  line-height: 1;
  color: currentColor;
}

/* ── Verified description ── */
.kyc-vcard .kyc-vsub {
  margin: 0.7rem 0 0 5.5rem;
  padding: 0;
  font-size: 0.84rem;
  line-height: 1.55;
  font-weight: 400;
  color: var(--muted);
  max-width: 42rem;
}

/* ── Information sections ── */
.kyc-vcard .kyc-vsections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  margin-top: 1.5rem;
}

.kyc-vcard .kyc-vsection {
  min-width: 0;
  padding: 1rem 1.05rem 0.35rem;
  border: 1px solid rgba(16, 185, 129, 0.13);
  border-radius: 0.9rem;
  background: rgba(16, 185, 129, 0.025);
}

.kyc-vcard .kyc-vsection-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  color: var(--text);
  font-size: 0.84rem;
  line-height: 1.3;
  font-weight: 700;
}

.kyc-vcard .kyc-vsection-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  flex: 0 0 1.55rem;
  border-radius: 0.5rem;
  color: var(--success, #10b981);
  background: rgba(16, 185, 129, 0.1);
}

.kyc-vcard .kyc-vsection-icon svg {
  width: 0.9rem;
  height: 0.9rem;
}

/* ── Verified account information ── */
.kyc-vcard .kyc-vdetails {
  margin-top: 0.55rem;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Individual information row ── */
.kyc-vcard .kyc-vrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  column-gap: 0.9rem;
  min-height: 2.65rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border);
}

.kyc-vcard .kyc-vrow:last-child {
  border-bottom: none;
}

/* ── Information labels ── */
.kyc-vcard .kyc-vlabel {
  margin: 0;
  padding: 0;
  font-size: .75rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--muted);
}

/* ── Information values ── */
.kyc-vcard .kyc-vvalue {
  margin: 0;
  padding: 0;
  min-width: 0;
  max-width: 100%;
  font-size: 0.8rem;
  line-height: 1.4;
  font-weight: 650;
  color: var(--text);
  text-align: right;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* ── Mobile optimization ── */
@media (max-width: 480px) {
  .kyc-status-card.kyc-vcard {
    padding: 1.25rem 1rem;
  }

  .kyc-vcard .kyc-vhead {
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    text-align: center;
  }

  .kyc-vcard .kyc-vicon {
    width: 4.25rem;
    height: 4.25rem;
    min-width: 4.25rem;
    flex-basis: 4.25rem;
  }

  .kyc-vcard .kyc-vicon svg {
    width: 2.75rem;
    height: 2.75rem;
  }

  .kyc-vcard .kyc-vtitle {
    font-size: 1.3rem;
  }

  .kyc-vcard .kyc-vhead-text {
    align-items: center;
  }

  .kyc-vcard .kyc-vsub {
    margin: 0.75rem auto 0;
    font-size: 0.78rem;
    line-height: 1.55;
    max-width: 22rem;
  }

  .kyc-vcard .kyc-vsections {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-top: 1.25rem;
  }

  .kyc-vcard .kyc-vdetails {
    margin-top: 0.5rem;
  }

  .kyc-vcard .kyc-vrow {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    min-height: 2.6rem;
    padding: 0.5rem 0;
    column-gap: 0.75rem;
  }

  .kyc-vcard .kyc-vlabel {
    font-size: .75rem;
  }

  .kyc-vcard .kyc-vvalue {
    font-size: 0.76rem;
  }
}

/* ── Very small phones ── */
@media (max-width: 360px) {
  .kyc-status-card.kyc-vcard {
    padding: 1rem 0.9rem;
  }

  .kyc-vcard .kyc-vrow {
    grid-template-columns: 1fr;
    row-gap: 0.15rem;
    align-items: start;
  }

  .kyc-vcard .kyc-vvalue {
    text-align: left;
  }
}

/* ── Dark mode ── */
[data-theme="dark"] .kyc-vcard .kyc-vbadge {
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.08);
}

/* Shared status-card finish for pending, rejected, and verified states. */
#kyc-status-full {
  width: min(100%, 42rem);
  margin: 0 auto;
}
.kyc-status-card {
  border-radius: 1rem;
  box-shadow: var(--elevation-subtle);
}
.kyc-status-card .kyc-status-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 1.75rem;
  padding: .3rem .65rem;
  border-radius: 999px;
  font-weight: 800;
}
.kyc-status-card .kyc-status-icon-wrap {
  display: grid;
  place-items: center;
}
.kyc-pending-card .kyc-status-icon-wrap {
  color: var(--warning, #d97706);
}
.kyc-rejected-card .kyc-status-icon-wrap {
  color: var(--danger, #dc2626);
}
.kyc-status-timeline {
  margin-top: 1.25rem;
}
.kyc-rejected-card .kyc-status-title,
.kyc-pending-card .kyc-status-title {
  letter-spacing: -.015em;
}

@media (max-width: 480px) {
  .kyc-status-card {
    padding: 1rem;
  }
  .kyc-status-card .kyc-status-title {
    font-size: 1.05rem;
  }
}

/* ===== Source: improvements.css ===== */
/* ============================================================
   improvements.css — Complete UI Polish & Enhancement Layer
   Link LAST in <head> after all other CSS files.
   Place at: user/assets/css/improvements.css
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   1. BOTTOM NAV — Larger labels + stronger active indicator
   ══════════════════════════════════════════════════════════════ */
.nav-tab-label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.nav-tab-icon {
  width: 1.4rem;
  height: 1.4rem;
  transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.nav-tab.active .nav-tab-icon {
  transform: scale(1.1);
}

.nav-tab.active .nav-tab-label {
  font-weight: 800;
}

@media (max-width: 767px) {
  .nav-tab.active::before {
    width: 32px;
    height: 3.5px;
    box-shadow: 0 2px 12px rgba(37, 99, 235, 0.5);
  }
}

/* ══════════════════════════════════════════════════════════════
   2. SLIDE TRANSITION ANIMATION — Smooth horizontal slide
   THE highest-impact change: transforms tab-switching into
   a native app feel with directional sliding.
   ══════════════════════════════════════════════════════════════ */
.slides-track {
  transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}

.slide {
  will-change: opacity, transform;
}

.slide.slide-entering {
  animation: slideEnter 0.4s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

@keyframes slideEnter {
  from {
    opacity: 0.6;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ══════════════════════════════════════════════════════════════
   3. SWIPE HINT — First-load discoverability animation
   ══════════════════════════════════════════════════════════════ */
.swipe-hint {
  position: absolute;
  bottom: 5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--text);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: .75rem;
  font-weight: 600;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  animation: swipeHintShow 4s ease-in-out 2s forwards;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.swipe-hint-arrow {
  display: inline-flex;
  animation: swipeHintBounce 1.2s ease-in-out infinite;
}

@keyframes swipeHintShow {
  0%   { opacity: 0; transform: translateX(-50%) translateY(10px); }
  10%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  80%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

@keyframes swipeHintBounce {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(6px); }
}

/* ══════════════════════════════════════════════════════════════
   4. PORTFOLIO CARD — Glassmorphism + premium gradient
   ══════════════════════════════════════════════════════════════ */
.hero-portfolio {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(248, 250, 253, 0.9) 40%,
    rgba(239, 246, 255, 0.85) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(37, 99, 235, 0.12);
  box-shadow:
    0 20px 60px -15px rgba(37, 99, 235, 0.12),
    0 8px 24px -8px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.hero-portfolio::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -30%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.06) 0%, transparent 70%);
  pointer-events: none;
  border-radius: 50%;
}

[data-theme="dark"] .hero-portfolio {
  background: linear-gradient(
    145deg,
    rgba(30, 41, 59, 0.95) 0%,
    rgba(15, 23, 42, 0.9) 40%,
    rgba(37, 99, 235, 0.08) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(37, 99, 235, 0.25);
  box-shadow:
    0 20px 60px -15px rgba(0, 0, 0, 0.4),
    0 8px 24px -8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .hero-portfolio::after {
  background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
}

/* ══════════════════════════════════════════════════════════════
   5. ACTION BUTTONS — Tactile press feedback with shadow lift
   ══════════════════════════════════════════════════════════════ */
#slide-home .action-chip {
  transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.15s;
}

#slide-home .action-chip:active {
  transform: scale(0.92);
  opacity: 0.8;
}

#slide-home .action-chip:active .action-chip-icon {
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
  transform: scale(0.95);
}

#slide-home .action-chip-icon {
  transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1),
              box-shadow 0.2s ease;
}

/* ══════════════════════════════════════════════════════════════
   6. KYC ALERT BANNER — Stronger warning accent
   ══════════════════════════════════════════════════════════════ */
.kyc-info-note {
  border: 1px solid var(--warning-border);
  border-left: 4px solid var(--warning);
  background: var(--warning-bg);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kyc-info-note:hover {
  transform: translateX(2px);
  box-shadow: 0 2px 12px rgba(217, 119, 6, 0.12);
}

/* ══════════════════════════════════════════════════════════════
   7. KYC UPLOAD ZONES — Taller with obvious dashed border
   ══════════════════════════════════════════════════════════════ */
.kyc-upload-zone {
  border: 2.5px dashed var(--border);
  border-radius: var(--radius-lg, 16px);
  transition: border-color 0.25s ease,
              background 0.25s ease,
              transform 0.15s ease;
}

.kyc-zone-preview {
  min-height: 10rem;
}

.kyc-zone-placeholder {
  padding: 2rem 1.25rem;
}

.kyc-zone-icon {
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 0.25rem;
}

.kyc-zone-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.kyc-zone-hint {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--brand);
}

.kyc-upload-zone:hover {
  border-color: var(--brand);
  background: var(--brand-light);
  transform: translateY(-1px);
}

.kyc-upload-zone:active {
  transform: scale(0.99);
}

/* ══════════════════════════════════════════════════════════════
   8. FAQ ACCORDION — Smooth expand/collapse animation
   ══════════════════════════════════════════════════════════════ */
.support-faq-item .support-faq-a {
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s cubic-bezier(0.32, 0.72, 0, 1),
              opacity 0.25s ease,
              margin 0.25s ease;
  margin-top: 0;
}

.support-faq-item.open .support-faq-a {
  max-height: 200px;
  opacity: 1;
  margin-top: 0.5rem;
}

.support-faq-q {
  transition: color 0.2s ease;
}

.support-faq-item.open .support-faq-q {
  color: var(--brand);
}

.support-faq-q svg {
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

/* ══════════════════════════════════════════════════════════════
   9. AI CHAT — Character count + send-on-Enter styling
   ══════════════════════════════════════════════════════════════ */
.ai-chat-char-count {
  font-size: .75rem;
  color: var(--muted);
  text-align: right;
  margin-top: 0.25rem;
  padding-right: 0.5rem;
  transition: color 0.2s ease;
}

.ai-chat-char-count.near-limit {
  color: var(--warning);
}

.ai-chat-char-count.at-limit {
  color: var(--danger);
  font-weight: 700;
}

.ai-chat-enter-hint {
  font-size: .75rem;
  color: var(--muted);
  opacity: 0.6;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.ai-chat-enter-hint kbd {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.1rem 0.35rem;
  font-size: .75rem;
  font-family: inherit;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
   10. EMPTY STATES — Illustrated icons instead of plain text
   ══════════════════════════════════════════════════════════════ */
.empty-state-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  text-align: center;
  gap: 0.75rem;
}

.empty-state-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--brand-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.empty-state-icon svg {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--brand);
  opacity: 0.7;
}

.empty-state-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
}

.empty-state-text {
  font-size: .75rem;
  color: var(--muted);
  line-height: 1.5;
  max-width: 240px;
}

/* ══════════════════════════════════════════════════════════════
   11. MARKET DATA — Mini sparkline chart area
   ══════════════════════════════════════════════════════════════ */
.market-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.mrow-sparkline {
  width: 64px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mrow-sparkline svg {
  width: 100%;
  height: 100%;
}

.sparkline-up {
  stroke: var(--success);
}

.sparkline-down {
  stroke: var(--danger);
}

/* ══════════════════════════════════════════════════════════════
   12. DARK MODE — Portfolio card gradient fix
   ══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .hero-portfolio::before {
  background: linear-gradient(180deg, #3b82f6, #60a5fa);
}

[data-theme="dark"] .portfolio-label {
  color: var(--muted);
}

[data-theme="dark"] .portfolio-btc {
  color: var(--text-2);
}

[data-theme="dark"] #slide-home .action-chip-icon {
  background: rgba(59, 130, 246, 0.15);
}

[data-theme="dark"] .kyc-info-note {
  background: rgba(217, 119, 6, 0.1);
  border-color: rgba(217, 119, 6, 0.25);
}

/* ══════════════════════════════════════════════════════════════
   13. GENERAL POLISH — Micro-interactions & transitions
   ══════════════════════════════════════════════════════════════ */

/* Notification empty state */
.notif-empty {
  padding: 2.5rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

/* KYC step labels — ensure translateable */
.kyc-ps-label[data-i18n] {
  transition: color 0.25s ease;
}

/* Better mobile touch targets */
.btn,
.nav-tab,
.action-chip,
.kyc-doctype-card {
  min-height: 44px;
}

/* Safe area support for modern iPhones */
.bottom-nav {
  padding-bottom: env(safe-area-inset-bottom, 0.75rem);
}

/* Loading skeleton animation */
.loading-skeleton {
  background: linear-gradient(
    90deg,
    var(--border) 25%,
    var(--surface) 50%,
    var(--border) 75%
  );
  background-size: 200% 100%;
  animation: skeletonLoading 1.5s infinite;
}

@keyframes skeletonLoading {
  to {
    background-position: -200% 0;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .slides-track {
    transition-duration: 0.01ms !important;
  }

  .slide.slide-entering {
    animation: none !important;
  }

  .swipe-hint {
    animation: none !important;
    display: none !important;
  }

  .support-faq-a {
    transition: none !important;
  }

  .hero-portfolio::after {
    animation: none !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   MARKET TAB — Immediate skeleton loader
   ══════════════════════════════════════════════════════════════ */
@keyframes mkt-skel-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .45; }
}

.mkt-initial-skeleton {
  padding: .75rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  flex: 1;
  overflow: hidden;
}

.mkt-skel-summary-bar {
  display: flex;
  gap: .5rem;
  align-items: center;
  padding: .6rem .5rem;
  background: var(--surface, #fff);
  border-radius: 10px;
}

.mkt-skel-block {
  height: 1.15rem;
  background: var(--border, #e2e8f0);
  border-radius: 6px;
  animation: mkt-skel-pulse 1.4s ease-in-out infinite;
}

.mkt-skel-search {
  height: 2.4rem;
  background: var(--border, #e2e8f0);
  border-radius: 10px;
  animation: mkt-skel-pulse 1.4s ease-in-out infinite;
  animation-delay: .1s;
}

.mkt-skel-filter-row {
  display: flex;
  gap: .45rem;
}

.mkt-skel-pill {
  height: 1.85rem;
  width: 5rem;
  background: var(--border, #e2e8f0);
  border-radius: 99px;
  animation: mkt-skel-pulse 1.4s ease-in-out infinite;
  animation-delay: .15s;
}

.mkt-skel-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mkt-skel-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem .5rem;
  border-bottom: 1px solid var(--border, #e2e8f0);
}

.mkt-skel-circle {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--border, #e2e8f0);
  flex-shrink: 0;
  animation: mkt-skel-pulse 1.4s ease-in-out infinite;
  animation-delay: .2s;
}

.mkt-skel-info {
  flex: 1;
}

.mkt-skel-line {
  height: .65rem;
  background: var(--border, #e2e8f0);
  border-radius: 6px;
  animation: mkt-skel-pulse 1.4s ease-in-out infinite;
  animation-delay: .25s;
}

.mkt-skel-price {
  text-align: right;
}

/* ══════════════════════════════════════════════════════════════
   SESSION TIMEOUT MODAL
   ══════════════════════════════════════════════════════════════ */
.session-timeout-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.session-timeout-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.session-timeout-modal {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 20px;
  padding: 1.75rem 1.5rem 1.5rem;
  max-width: 340px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0,0,0,.2);
  transform: translateY(20px) scale(.97);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}

.session-timeout-overlay.active .session-timeout-modal {
  transform: translateY(0) scale(1);
}

.session-timeout-icon {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--warning-bg, #fffbeb);
  color: var(--warning, #d97706);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .85rem;
  border: 1.5px solid rgba(217,119,6,.2);
}

.session-timeout-title {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text, #0f172a);
  margin-bottom: .55rem;
}

.session-timeout-body {
  font-size: .8rem;
  color: var(--muted, #64748b);
  line-height: 1.55;
  margin-bottom: 1rem;
}

.session-countdown-wrap {
  display: inline-block;
  font-weight: 800;
  font-size: .88rem;
  color: var(--warning, #d97706);
  background: var(--warning-bg, #fffbeb);
  border-radius: 6px;
  padding: .05rem .35rem;
  margin: 0 .1rem;
}

.session-timeout-progress-track {
  height: 4px;
  background: var(--border, #e2e8f0);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.session-timeout-progress-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--warning, #d97706), #f59e0b);
  border-radius: 99px;
  transition: width 1s linear;
}

.session-timeout-actions {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.session-btn-stay {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  width: 100%;
  padding: .8rem 1rem;
  background: var(--brand, #2563eb);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: .85rem;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
  min-height: 2.75rem;
  -webkit-tap-highlight-color: transparent;
}

.session-btn-stay:active {
  opacity: .85;
  transform: scale(.97);
}

.session-btn-logout {
  width: 100%;
  padding: .7rem 1rem;
  background: transparent;
  color: var(--danger, #dc2626);
  border: 1.5px solid rgba(220,38,38,.25);
  border-radius: 12px;
  font-size: .8rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, transform .1s;
  min-height: 2.75rem;
  -webkit-tap-highlight-color: transparent;
}

.session-btn-logout:active {
  background: rgba(220,38,38,.06);
  transform: scale(.97);
}

/* ══════════════════════════════════════════════════════════════
   NOTIFICATION PANEL — read vs unread styling
   ══════════════════════════════════════════════════════════════ */
.notif-item.read {
  opacity: 0.6;
}

.notif-item.read .notif-icon-wrap {
  opacity: 0.5;
}

.notif-item.unread {
  opacity: 1;
}

.notif-item.unread::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--brand, #2563eb);
  border-radius: 0 2px 2px 0;
}

.notif-item {
  position: relative;
}