/* =====================================================================
   AVERMO STAFF DASHBOARD — internal ops tool styling
   Density and clarity over decoration. Neutral grayscale + one accent.
   ===================================================================== */

:root {
  --accent:        #00A651;
  --accent-dark:   #008440;
  --accent-tint:   rgba(0, 166, 81, 0.10);

  --bg:            #FFFFFF;
  --bg-soft:       #F8FAFC;
  --bg-alt:        #F1F5F9;
  --bg-hover:      #F1F5F9;

  --text:          #0F172A;
  --text-2:        #475569;
  --text-3:        #94A3B8;

  --border:        #E2E8F0;
  --border-2:      #CBD5E1;

  /* status colors */
  --amber:     #B45309; --amber-bg:  #FEF3C7;
  --green:     #15803D; --green-bg:  #DCFCE7;
  --red:       #B91C1C; --red-bg:    #FEE2E2;
  --blue:      #1D4ED8; --blue-bg:   #DBEAFE;
  --gray:      #475569; --gray-bg:   #E2E8F0;
  --purple:    #7E22CE; --purple-bg: #F3E8FF;
  --teal:      #0F766E; --teal-bg:   #CCFBF1;
  --orange:    #C2410C; --orange-bg: #FFEDD5;
  --pink:      #BE185D; --pink-bg:   #FCE7F3;

  --sidebar-w: 220px;
  --topbar-h:  56px;
  --radius:    6px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg-soft);
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }

.hidden { display: none !important; }
.muted { color: var(--text-3); }
.t-13 { font-size: 13px; }

/* ---------- LOGIN ---------------------------------------------------- */
#login {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 68px);   /* fill viewport below the sticky site header */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 24px;
  background: radial-gradient(120% 120% at 50% -10%, #0d1a15 0%, #081210 45%, #05100c 100%);
}

/* scene behind the card */
.bg-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

/* minimal ambient glows (static, very subtle) */
.bg-glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.16; }
.bg-glow.g1 { width: 44vw; height: 44vw; left: -10%; top: -16%; background: radial-gradient(circle, rgba(0,166,81,0.5), transparent 70%); }
.bg-glow.g2 { width: 40vw; height: 40vw; right: -12%; bottom: -18%; background: radial-gradient(circle, rgba(0,110,55,0.45), transparent 70%); }

/* two rows of large currency symbols — same vertical band, opposite directions */
.bg-symbols { position: absolute; inset: 0; overflow: hidden; }
.sym-row {
  position: absolute; top: 50%; left: 0; white-space: nowrap; display: inline-flex;
  font-family: "Segoe UI Symbol", system-ui, "Apple Symbols", "Noto Sans", sans-serif;
  font-weight: 800; line-height: 1; letter-spacing: 0.04em;
  font-size: clamp(220px, 40vh, 520px);          /* 2x larger */
  /* solid green glyphs cut by vertical lines (striped fill via clipped gradient) */
  color: transparent; -webkit-text-fill-color: transparent;
  -webkit-background-clip: text; background-clip: text;
  will-change: transform;
}
.sym-row span { padding: 0 0.12em; }
.sym-row.a { background-image: repeating-linear-gradient(90deg, #12934f 0 8px, transparent 8px 15px); animation: symLeft 46s linear infinite; }
.sym-row.b { background-image: repeating-linear-gradient(90deg, #0b6f3a 0 8px, transparent 8px 15px); animation: symRight 64s linear infinite; }
@keyframes symLeft  { from { transform: translate(0, -50%); }    to { transform: translate(-50%, -50%); } }
@keyframes symRight { from { transform: translate(-50%, -50%); } to { transform: translate(0, -50%); } }

@media (prefers-reduced-motion: reduce) {
  .sym-row.a, .sym-row.b { animation: none; }
}

.login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 360px;
  background: #fff;                 /* solid — not see-through */
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px 28px;
  box-shadow: 0 24px 70px -24px rgba(0, 0, 0, 0.55), 0 0 60px -22px rgba(0, 166, 81, 0.3);
}

/* ---------- SITE HEADER + FOOTER on the login pages -----------------
   The marketing nav (nav.js) and footer (footer.js) inject their own
   styling but expect these brand tokens, the .wrap container, and the
   pill .btn variants from the page. Scope the buttons to header.nav so
   they don't clash with the dashboard .btn used inside the login card. */
:root {
  --brand: #2FBE66; --brand-600: #24A757; --brand-50: #E8F7EE; --brand-100: #C8EDDA;
  --ink: #0C1117; --ink-2: #2A3340; --muted: #5B6471;
  --line: #E7EAEE; --line-2: #EEF1F4; --surface: #F6F8F7; --maxw: 1240px;
}
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
/* The dashboard sidebar rule `.nav { padding; overflow-y:auto; flex:1 }` also
   matches the marketing <header class="nav">, which made the login header 24px
   taller and CLIPPED the Products dropdown. Undo it here (higher specificity),
   and reserve the 68px height so the JS-injected header doesn't flash/reflow. */
header.nav { padding: 0; overflow: visible; flex: none; min-height: 68px; background: #fff; }
header.nav .btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  font-weight: 600; font-size: 14px; line-height: 1;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background .18s, color .18s, border-color .18s;
}
header.nav .btn-ghost { background: transparent; color: var(--ink); }
header.nav .btn-ghost:hover { background: var(--surface); }
header.nav .btn-green { background: var(--brand); color: #fff; }
header.nav .btn-green:hover { background: var(--brand-600); }
@media (max-width: 560px) { .wrap { padding: 0 18px; } }
.login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.login-sub { color: var(--text-3); font-size: 13px; margin-bottom: 24px; }

/* Brand lockup — matches the public site header exactly */
.brand-icon {
  width: 38px; height: 38px; border-radius: 6px;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
}
.brand-icon img { width: 72%; height: 72%; object-fit: contain; display: block; filter: brightness(0) invert(1); }
.brand-type { display: block; height: 18px; width: auto; object-fit: contain; flex-shrink: 0; }

/* Keep the login-card brand as designed even though nav.js also styles
   .brand-icon / .brand-type globally on these pages. */
.login-brand .brand-icon { width: 38px; height: 38px; border-radius: 6px; background: var(--accent); }
.login-brand .brand-type { height: 18px; max-width: none; }

/* Sidebar brand is smaller than the login card brand */
.sidebar .brand-icon { width: 28px; height: 28px; border-radius: 5px; }
.sidebar .brand-type { height: 14px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; font-weight: 500; color: var(--text-2); margin-bottom: 6px; }
.field input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  background: var(--bg);
}
.field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.login-err { color: var(--red); font-size: 13px; margin: 4px 0 12px; min-height: 18px; }

/* MFA step */
.mfa-help { font-size: 13px; color: var(--text-2); line-height: 1.5; margin-bottom: 14px; }
.mfa-qr { display: flex; justify-content: center; padding: 10px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; }
.mfa-qr svg, .mfa-qr img { width: 180px; height: 180px; display: block; }
.mfa-secret { font-size: 12px; color: var(--text-3); line-height: 1.5; margin-bottom: 16px; text-align: center; }
.mfa-secret code { display: inline-block; margin-top: 4px; font-family: ui-monospace, monospace; font-size: 12px; color: var(--text); background: var(--bg-soft); border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; word-break: break-all; }
#mfa-code { letter-spacing: 0.3em; text-align: center; font-size: 18px; font-family: ui-monospace, monospace; }
.mfa-back { display: block; width: 100%; margin-top: 10px; font-size: 13px; color: var(--text-3); text-align: center; }
.mfa-back:hover { color: var(--accent); }
.mfa-status { text-align: center; font-size: 13px; font-weight: 500; color: var(--accent-dark); margin-top: 10px; }

/* password field: show/hide toggle + strength meter */
.pw-wrap { position: relative; }
.pw-wrap input { width: 100%; padding-right: 40px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  color: var(--text-3); border-radius: 4px;
}
.pw-toggle:hover { color: var(--text); background: var(--bg-hover); }
.pw-toggle svg { width: 18px; height: 18px; }
.pw-strength { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.pw-bar { flex: 1; height: 6px; border-radius: 100px; background: var(--bg-alt); overflow: hidden; }
.pw-bar span { display: block; height: 100%; width: 0; border-radius: 100px; transition: width .15s ease, background .15s ease; }
.pw-label { font-size: 12px; font-weight: 500; min-width: 46px; text-align: right; color: var(--text-3); }

/* MFA method chooser cards */
.mfa-method {
  display: block; width: 100%; text-align: left;
  padding: 12px 14px; margin-bottom: 10px;
  border: 1px solid var(--border-2); border-radius: var(--radius);
  background: var(--bg);
  transition: border-color .12s ease, background .12s ease;
}
.mfa-method:hover { border-color: var(--accent); background: var(--bg-soft); }
.mfa-method:last-child { margin-bottom: 0; }
.mm-title { display: block; font-weight: 600; font-size: 14px; color: var(--text); }
.mm-sub { display: block; font-size: 12px; color: var(--text-3); margin-top: 3px; line-height: 1.4; }

/* ---------- BUTTONS -------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border-2);
  background: var(--bg);
  font-weight: 500;
  font-size: 13px;
  transition: background .12s ease, border-color .12s ease;
}
.btn:hover { background: var(--bg-hover); }
.btn.full { width: 100%; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn.danger { color: var(--red); border-color: var(--border-2); }
.btn.danger:hover { background: var(--red-bg); border-color: var(--red); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.sm { padding: 5px 9px; font-size: 12px; }

/* ---------- APP SHELL ------------------------------------------------ */
#app { display: flex; min-height: 100%; }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar .brand {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px 0 24px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.02em;
  border-bottom: 1px solid var(--border);
}
.nav { flex: 1; padding: 12px 10px; overflow-y: auto; }
/* Hide the nav until JS has applied per-role tab visibility — prevents the
   flash of every tab before restrictions kick in on a hard refresh. */
.nav:not(.ready) { visibility: hidden; }
.nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px;
  border-radius: var(--radius);
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 3px;
}
.nav a:hover { background: var(--bg-hover); color: var(--text); }
.nav a:hover .ico { color: var(--text); }
.nav a.active { background: var(--accent-tint); color: var(--accent-dark); }
.nav a.active .ico { color: var(--accent); }
.nav a .ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex-shrink: 0;
  color: var(--text-3);
  transition: color .12s ease;
}
.nav a .ico svg { width: 20px; height: 20px; display: block; }
.nav a .lbl { flex: 1; }
.nav a .ext-arrow { display: inline-flex; color: var(--text-3); opacity: .8; }
.nav a .ext-arrow svg { width: 14px; height: 14px; }
.nav a:hover .ext-arrow { color: var(--text-2); }
.nav a .count {
  margin-left: auto;
  background: var(--amber-bg); color: var(--amber);
  font-size: 11px; font-weight: 600;
  padding: 1px 7px; border-radius: 100px;
}
.nav a .count.blue { background: var(--blue-bg); color: var(--blue); }
.nav .sep { height: 1px; background: var(--border); margin: 10px 6px; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: var(--topbar-h);
  flex-shrink: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 16px;
  padding: 0 20px;
  position: sticky; top: 0; z-index: 20;
}
.topbar h1 { font-size: 15px; font-weight: 600; }
/* Client-dashboard topbar carries the brand lockup (no sidebar). Lay it out
   horizontally and keep it compact; push the account menu to the far right. */
.topbar .brand { display: flex; align-items: center; gap: 10px; }
.topbar .brand .brand-icon { width: 30px; height: 30px; border-radius: 6px; }
.topbar .brand .brand-type { height: 16px; }
.topbar .staff-menu { margin-left: auto; }
.topbar .search {
  margin-left: auto;
  width: 260px;
  padding: 7px 11px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  background: var(--bg-soft);
}
.topbar .search:focus { outline: none; border-color: var(--accent); background: var(--bg); }
.staff-menu { position: relative; }
.staff-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: var(--radius);
}
.staff-btn:hover { background: var(--bg-hover); }
.avatar {
  width: 28px; height: 28px; border-radius: 100px;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
}
.staff-dropdown {
  position: absolute; right: 0; top: 110%;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); min-width: 180px;
  padding: 6px; box-shadow: 0 8px 24px rgba(15,23,42,.08);
}
.staff-dropdown .who { padding: 8px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.staff-dropdown button { display: block; width: 100%; text-align: left; padding: 7px 10px; border-radius: var(--radius); }
.staff-dropdown button:hover { background: var(--bg-hover); }

.content { flex: 1; padding: 20px; overflow-x: auto; }

/* client dashboard tab bar */
.client-tabs { display: flex; gap: 6px; padding: 10px 20px 0; background: var(--bg); border-bottom: 1px solid var(--border); }
.client-tabs button { padding: 8px 14px; border-radius: var(--radius) var(--radius) 0 0; color: var(--text-2); font-weight: 500; font-size: 14px; background: none; border: 1px solid transparent; border-bottom: none; cursor: pointer; }
.client-tabs button:hover { color: var(--text); background: var(--bg-soft); }
.client-tabs button.active { color: var(--accent-dark); background: var(--bg-soft); border-color: var(--border); }
.sig-pad { border: 1px solid var(--border-2); border-radius: var(--radius); background: #fff; touch-action: none; width: 100%; height: 120px; display: block; }

/* step-by-step apply wizard options */
.apply-list { display: flex; flex-direction: column; gap: 8px; }
.apply-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid var(--border-2); border-radius: 8px; background: #fff; cursor: pointer; transition: border-color .12s, background .12s; }
.apply-opt:hover { border-color: var(--accent); background: var(--bg-soft); }
.apply-opt .ao-name { font-weight: 600; font-size: 14px; color: var(--text); }
.apply-opt .ao-sub { font-size: 12px; color: var(--text-3); }

/* Country-grouped currency picker (client apply modal) */
.apply-groups { display: flex; flex-direction: column; gap: 18px; }
.apply-country { font-size: 13px; font-weight: 700; color: var(--text, #0c1117); margin-bottom: 9px; }
.apply-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cur-chip { padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--border-2, #e5e9ee); background: #fff; font-weight: 600; font-size: 13px; color: var(--text-2, #2a3340); cursor: pointer; transition: background .13s, border-color .13s, color .13s; }
.cur-chip:hover { border-color: var(--accent, #2FBE66); }
.cur-chip.on { background: var(--accent, #2FBE66); border-color: var(--accent, #2FBE66); color: #fff; }

/* ---------- STAT CARDS ---------------------------------------------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.stat-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.stat-card .label { font-size: 12px; color: var(--text-3); font-weight: 500; }
.stat-card .value { font-size: 26px; font-weight: 600; margin-top: 6px; letter-spacing: -0.02em; }
a.stat-card { transition: border-color .12s, box-shadow .12s; }
a.stat-card:hover { border-color: var(--accent, #2FBE66); box-shadow: 0 1px 3px rgba(15,23,42,.08); }
@media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } .prov-cards { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .stat-grid { grid-template-columns: 1fr; } }

/* ---------- RESPONSIVE DASHBOARD ------------------------------------ */
/* Narrow screens: sidebar collapses to an icon rail (labels on hover via
   title attr is unnecessary — active tint still orients), tabs scroll. */
@media (max-width: 900px) {
  .sidebar { width: 64px; }
  .sidebar .brand { padding: 0; justify-content: center; }
  .sidebar .brand-type { display: none; }
  .nav { padding: 12px 8px; }
  .nav a { position: relative; justify-content: center; padding: 10px 0; }
  .nav a .lbl, .nav a .ext-arrow { display: none; }
  .nav a .count { position: absolute; top: 2px; right: 4px; margin-left: 0; padding: 0 5px; }
  .client-tabs { overflow-x: auto; white-space: nowrap; }
  .topbar h1 { font-size: 15px; white-space: nowrap; }
  /* The title keeps its full width; the fixed-width search yields instead
     of crushing it into "Ov…". */
  .topbar .tt { flex-shrink: 0; }
  .topbar .search { width: auto; flex: 1 1 90px; min-width: 0; max-width: 260px; }
}
@media (max-width: 640px) {
  .content { padding: 14px; }
  .panel-head { flex-wrap: wrap; gap: 8px; }
  .panel-head .right { flex-wrap: wrap; }
  .filter-input { max-width: 100%; }
  .gm-row, .dialog .box [style*="grid-template-columns"] { grid-template-columns: 1fr 1fr !important; }
  .so-foot { flex-wrap: wrap; }
}

/* ---------- SECTION / PANEL ----------------------------------------- */
.panel { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.panel-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.panel-head h2 { font-size: 14px; font-weight: 600; }
.panel-head .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.tabs { display: inline-flex; background: var(--bg-alt); border-radius: var(--radius); padding: 2px; }
.tabs button { padding: 5px 12px; border-radius: 4px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.tabs button.active { background: var(--bg); color: var(--text); box-shadow: 0 1px 2px rgba(15,23,42,.06); }

.filter-input {
  padding: 6px 10px; border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--bg-soft);
}
.filter-input:focus { outline: none; border-color: var(--accent); }

/* custom dropdown (replaces native <select> in forms) */
.csel { position: relative; width: 100%; }
.csel-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 11px; border: 1px solid var(--border-2); border-radius: var(--radius);
  background: var(--bg); color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.csel-btn:hover { border-color: var(--text-3); }
.csel-btn.open { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.csel-chev { color: var(--text-3); display: inline-flex; flex-shrink: 0; transition: transform .15s ease; }
.csel-btn.open .csel-chev { transform: rotate(180deg); }
.csel-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csel-val.placeholder { color: var(--text-3); }
.csel-panel {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .14); padding: 4px; max-height: 240px; overflow-y: auto;
}
.csel-option { padding: 8px 10px; border-radius: 4px; cursor: pointer; font-size: 14px; }
.csel-option:hover { background: var(--bg-hover); }
.csel-option.selected { background: var(--accent-tint); color: var(--accent-dark); font-weight: 500; }
.csel-dot { display: inline-block; width: 7px; height: 7px; border-radius: 100px; margin-right: 8px; vertical-align: middle; }

/* ---------- TABLE --------------------------------------------------- */
.table-wrap { overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; }
table.grid thead th {
  position: sticky; top: 0;
  background: var(--bg-soft);
  text-align: left;
  font-size: 12px; font-weight: 600; color: var(--text-2);
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  cursor: pointer; user-select: none;
}
table.grid thead th.no-sort { cursor: default; }
table.grid tbody td { padding: 0 16px; height: 44px; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.grid tbody tr { cursor: pointer; }
table.grid tbody tr:hover { background: var(--bg-hover); }
table.grid tbody tr:last-child td { border-bottom: none; }
.th-arrow { color: var(--text-3); font-size: 10px; margin-left: 4px; }

/* ---------- BADGE --------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px; border-radius: 100px;
  font-size: 12px; font-weight: 500;
}
.badge .dot { width: 6px; height: 6px; border-radius: 100px; background: currentColor; }
.badge.amber  { background: var(--amber-bg);  color: var(--amber); }
.badge.green  { background: var(--green-bg);  color: var(--green); }
.badge.red    { background: var(--red-bg);    color: var(--red); }
.badge.blue   { background: var(--blue-bg);   color: var(--blue); }
.badge.gray   { background: var(--gray-bg);   color: var(--gray); }
.badge.purple { background: var(--purple-bg); color: var(--purple); }
.badge.teal   { background: var(--teal-bg);   color: var(--teal); }
.badge.orange { background: var(--orange-bg); color: var(--orange); }
.badge.pink   { background: var(--pink-bg);   color: var(--pink); }
.color-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; display: inline-block; }
.color-swatch.selected { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg); }

/* ---------- STATES -------------------------------------------------- */
.state { padding: 48px 16px; text-align: center; color: var(--text-3); }
.state .big { font-size: 14px; color: var(--text-2); margin-bottom: 8px; }
.skeleton-row { height: 44px; border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 16px; }
.skeleton-bar { height: 12px; border-radius: 4px; background: linear-gradient(90deg,var(--bg-alt),var(--bg-hover),var(--bg-alt)); background-size: 200% 100%; animation: shimmer 1.2s infinite; width: 40%; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---------- SLIDE-OVER ---------------------------------------------- */
.overlay { position: fixed; inset: 0; background: rgba(15,23,42,.35); z-index: 50; opacity: 0; transition: opacity .15s ease; }
.overlay.show { opacity: 1; }
.slideover {
  position: fixed; top: 0; right: 0; height: 100vh; width: 480px; max-width: 92vw;
  background: var(--bg); z-index: 51;
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .15s ease;
  box-shadow: -8px 0 24px rgba(15,23,42,.10);
}
.slideover.show { transform: translateX(0); }
.so-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.so-head h2 { font-size: 16px; font-weight: 600; }
.so-head .x { margin-left: auto; padding: 4px 8px; border-radius: var(--radius); color: var(--text-3); font-size: 18px; }
.so-head .x:hover { background: var(--bg-hover); }
.so-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.so-foot { border-top: 1px solid var(--border); padding: 12px 20px; display: flex; gap: 8px; }

.so-section { margin-bottom: 22px; }
.so-section h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); margin-bottom: 8px; }
.kv { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--text-3); }
.kv .v { color: var(--text); text-align: right; word-break: break-word; }
textarea.notes { width: 100%; min-height: 84px; padding: 10px; border: 1px solid var(--border-2); border-radius: var(--radius); resize: vertical; }
textarea.notes:focus, select:focus { outline: none; border-color: var(--accent); }
select.sel { padding: 7px 10px; border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--bg); }

/* ---------- CLIENT DETAIL ------------------------------------------- */
.page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.page-head h1 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.page-head .right { margin-left: auto; display: flex; gap: 8px; }
.back-link { color: var(--text-3); font-size: 13px; margin-bottom: 12px; display: inline-block; }
.back-link:hover { color: var(--accent); }
.detail-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.detail-tabs button { padding: 8px 14px; font-weight: 500; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.detail-tabs button.active { color: var(--accent-dark); border-bottom-color: var(--accent); }

/* ---------- ALLOCATION ---------------------------------------------- */
.alloc-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.alloc-row:last-child { border-bottom: none; }
.alloc-cur { width: 56px; font-weight: 600; }
.alloc-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; }
.alloc-controls input { padding: 7px 10px; border: 1px solid var(--border-2); border-radius: var(--radius); width: 180px; }

/* ---------- PROVIDERS ----------------------------------------------- */
.prov-group { margin-bottom: 20px; }
.prov-group h3 { font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 10px; }
.prov-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.prov-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; align-items: flex-start; gap: 12px; }
.prov-card .meta { flex: 1; min-width: 0; }
.prov-card .meta .name { font-weight: 600; font-size: 15px; }
.prov-card .meta .slug { font-size: 12px; color: var(--text-3); margin-top: 8px; }
.prov-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 100px; font-size: 12px; font-weight: 500; background: var(--bg-alt); color: var(--text-2); border: 1px solid var(--border); }

/* toggle */
.toggle { position: relative; width: 38px; height: 22px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle .track { position: absolute; inset: 0; background: var(--border-2); border-radius: 100px; transition: background .12s; }
.toggle .track::before { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; background: #fff; border-radius: 100px; transition: transform .12s; }
.toggle input:checked + .track { background: var(--accent); }
.toggle input:checked + .track::before { transform: translateX(16px); }

/* ---------- CONFIRM DIALOG ------------------------------------------ */
.dialog { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(15,23,42,.35); }
.dialog .box { background: var(--bg); border-radius: var(--radius); width: 380px; max-width: 92vw; padding: 20px; }

/* ---------- SEND-PAYMENT WIZARD --------------------------------------
   Fixed-size stepper: the modal never resizes between steps; panes slide
   horizontally inside .pw-body. */
.paywiz { display: flex; flex-direction: column; width: 100%; height: min(590px, 84svh); }
.pw-head { padding: 0 0 12px; }
.pw-head .pw-title { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.pw-head .pw-sub { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.pw-segs { display: flex; gap: 5px; margin-top: 12px; }
.pw-segs .seg { height: 3px; flex: 1; border-radius: 99px; background: var(--border); transition: background .25s; }
.pw-segs .seg.on { background: var(--accent); }
.pw-body { flex: 1; overflow: hidden; margin: 0 -20px; position: relative; }
.pw-track { display: flex; height: 100%; transition: transform .3s cubic-bezier(.4,0,.2,1); }
.pw-pane { width: 100%; flex-shrink: 0; overflow-y: auto; padding: 4px 20px 12px; }
.pw-foot { display: flex; gap: 8px; align-items: center; padding-top: 14px; border-top: 1px solid var(--border); }
.pw-foot .pw-err { flex: 1; color: var(--red); font-size: 12.5px; line-height: 1.35; min-height: 1em; }

/* Step 1 — amount hero + method cards */
.pw-amt { display: flex; align-items: baseline; gap: 10px; border: 1.5px solid var(--border-2); border-radius: 12px; padding: 14px 16px; transition: border-color .15s, box-shadow .15s; }
.pw-amt:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.pw-amt input { border: none; outline: none; background: none; font-size: 32px; font-weight: 650; letter-spacing: -.02em; width: 100%; min-width: 0; padding: 0; color: var(--text); font-family: inherit; }
.pw-amt input::-webkit-outer-spin-button, .pw-amt input::-webkit-inner-spin-button { -webkit-appearance: none; }
.pw-amt input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.pw-amt .cur { font-size: 15px; font-weight: 600; color: var(--text-3); flex-shrink: 0; }
.pw-balrow { display: flex; align-items: center; gap: 8px; margin: 8px 2px 18px; font-size: 12.5px; color: var(--text-3); }
.pw-balrow .max { margin-left: auto; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); font-size: 11.5px; font-weight: 600; color: var(--accent-dark); cursor: pointer; }
.pw-balrow .max:hover { border-color: var(--accent); background: var(--accent-tint); }
.pw-method { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 1.5px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; background: var(--bg); cursor: pointer; font-family: inherit; transition: border-color .13s, background .13s; }
.pw-method:hover { border-color: var(--accent); }
.pw-method.on { border-color: var(--accent); background: var(--accent-tint); }
.pw-method .mi { width: 36px; height: 36px; border-radius: 10px; background: var(--bg-soft); color: var(--text-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pw-method.on .mi { background: var(--accent); color: #fff; }
.pw-method .mt { font-size: 13.5px; font-weight: 600; color: var(--text); }
.pw-method .ms { font-size: 11.5px; color: var(--text-3); margin-top: 1px; line-height: 1.35; }
.pw-method .tick { margin-left: auto; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border-2); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: transparent; }
.pw-method.on .tick { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Saved-recipient pick rows (Send again to …) */
.pw-recip { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; margin-bottom: 6px; background: var(--bg); cursor: pointer; font-family: inherit; transition: border-color .12s, background .12s; }
.pw-recip:hover { border-color: var(--accent); }
.pw-recip.on { border-color: var(--accent); background: var(--accent-tint); }
.pw-recip-ic { width: 30px; height: 30px; border-radius: 8px; background: var(--bg-soft); color: var(--text-3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pw-recip.on .pw-recip-ic { background: var(--accent); color: #fff; }
.pw-recip-name { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-recip-sub { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Step 3 — review + sign */
.pw-kv { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }
.pw-kv .k { color: var(--text-3); flex-shrink: 0; }
.pw-kv .v { font-weight: 550; text-align: right; word-break: break-word; }
.pw-review-amt { text-align: center; padding: 10px 0 14px; }
.pw-review-amt .a { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.pw-review-amt .c { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }

/* Step 4 — success */
.pw-done { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; }
.pw-done .ring { width: 72px; height: 72px; border-radius: 50%; background: var(--accent-tint); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; animation: pwPop .45s cubic-bezier(.2,1.4,.4,1) both; }
.pw-done .ring svg { width: 34px; height: 34px; }
.pw-done .ring svg path { stroke: var(--accent-dark); stroke-dasharray: 26; stroke-dashoffset: 26; animation: pwDraw .4s .25s ease-out forwards; }
.pw-done h3 { font-size: 17px; font-weight: 650; }
.pw-done p { font-size: 13px; color: var(--text-2); line-height: 1.55; max-width: 280px; }
@keyframes pwPop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes pwDraw { to { stroke-dashoffset: 0; } }
.dialog .box h3 { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.dialog .box p { color: var(--text-2); font-size: 13px; margin-bottom: 18px; }
.dialog .box .row { display: flex; gap: 8px; justify-content: flex-end; }

/* ---------- TOAST --------------------------------------------------- */
.toasts { position: fixed; bottom: 18px; right: 18px; z-index: 70; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--text); color: #fff;
  padding: 10px 14px; border-radius: var(--radius); font-size: 13px;
  box-shadow: 0 8px 24px rgba(15,23,42,.18);
  opacity: 0; transform: translateY(8px); transition: all .15s ease; max-width: 320px;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.err { background: var(--red); }
.toast.ok { background: var(--accent-dark); }

/* signature image in request slide-over */
.sig-img { display: block; width: 100%; max-width: 280px; height: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-soft); padding: 6px; }

/* external nav link (KYC → Persona) */
.nav a.nav-external .ico { opacity: .7; }

/* login map (Leaflet) */
.login-map { width: 100%; height: 220px; border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; z-index: 0; }
.login-map .leaflet-tile { filter: saturate(.9); }

/* notifications */
.notif-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); cursor: pointer; }
.notif-row:last-child { border-bottom: none; }
.notif-row:hover { background: var(--bg-hover); }
.notif-dot { width: 8px; height: 8px; border-radius: 100px; background: var(--border-2); margin-top: 5px; flex-shrink: 0; }
.notif-row.unread .notif-dot { background: var(--blue); }
.notif-row.unread .notif-title { font-weight: 600; }
.notif-body { flex: 1; min-width: 0; }
.notif-title { font-size: 14px; }
.notif-time { flex-shrink: 0; white-space: nowrap; }

/* tab permission checkboxes */
.tab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.tab-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.tab-check input { width: 15px; height: 15px; accent-color: var(--accent); }

/* json block */
.json { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; font-family: ui-monospace, monospace; font-size: 12px; white-space: pre-wrap; word-break: break-word; }

/* ---------- CLIENT PORTAL ------------------------------------------- */
/* Centered, calm, one clear action per state. .cp scopes everything to
   the client dashboard so staff screens are untouched. */
.content.cp { max-width: 1080px; width: 100%; margin: 0 auto; }
.cp .cp-hero { padding: 22px 4px 20px; }
.cp .cp-hero h2 { font-size: 22px; font-weight: 650; letter-spacing: -.02em; }
.cp .cp-hero .sub { color: var(--text-3); font-size: 13.5px; margin-top: 4px; }
.cp .cp-balrow { display: flex; gap: 34px; flex-wrap: wrap; margin-top: 18px; }
.cp .cp-bal .cur { font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--text-3); text-transform: uppercase; }
.cp .cp-bal .amt { font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin-top: 2px; }
.cp .cp-bal .unit, .cp .cp-acct .unit { font-size: 13px; color: var(--text-3); font-weight: 600; }
.cp .cp-h { font-size: 15px; font-weight: 600; margin: 0 0 10px; }
.cp .cp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.cp .cp-acct { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 10px; transition: border-color .12s, box-shadow .12s; }
.cp .cp-acct:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(15,23,42,.06); }
.cp .cp-acct .top { display: flex; align-items: center; justify-content: space-between; }
.cp .cp-acct .cur { font-weight: 650; }
.cp .cp-acct .amt { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.cp .cp-acct .foot { margin-top: auto; }
.cp .cp-add { border: 1.5px dashed var(--border-2); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--text-3); font-weight: 550; cursor: pointer; min-height: 118px; background: none; font-size: 13.5px; transition: color .12s, border-color .12s; }
.cp .cp-add:hover { color: var(--accent-dark); border-color: var(--accent); }
.cp .cp-journey { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 24px 26px; margin-bottom: 26px; }
.cp .cp-steps { display: flex; margin-top: 22px; }
.cp .cp-step { flex: 1; position: relative; padding-right: 18px; }
.cp .cp-step .num { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 600; background: var(--bg-soft); color: var(--text-3); border: 1px solid var(--border); position: relative; z-index: 1; }
.cp .cp-step.done .num { background: var(--accent); border-color: var(--accent); color: #fff; }
.cp .cp-step.now .num { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-dark); }
.cp .cp-step .t { font-weight: 600; font-size: 13.5px; margin-top: 9px; }
.cp .cp-step.now .t { color: var(--accent-dark); }
.cp .cp-step .d { color: var(--text-3); font-size: 12.5px; margin-top: 2px; line-height: 1.45; }
.cp .cp-step:not(:last-child)::after { content: ""; position: absolute; top: 13px; left: 34px; right: 10px; height: 1px; background: var(--border); }
@media (max-width: 640px) {
  .cp .cp-steps { flex-direction: column; gap: 16px; }
  .cp .cp-step:not(:last-child)::after { display: none; }
  .cp .cp-balrow { gap: 20px; }
  .cp .cp-bal .amt { font-size: 24px; }
}

/* ---------- TRADING (preview UI) ----------------------------------- */
.cp .tr-grid { display: grid; grid-template-columns: 260px 1fr 290px; gap: 16px; align-items: stretch; }
.cp .tr-chart-wrap { display: flex; flex-direction: column; }
.cp .tr-chart-wrap #tr-chart { flex: 1; }
.cp .tr-grid .panel { padding: 0; overflow: hidden; }
.cp .tr-head { font-size: 12.5px; font-weight: 600; padding: 14px 16px 10px; color: var(--text-2); }
.cp .tr-mkt-list { display: flex; flex-direction: column; }
.cp .tr-mkt-group { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding: 10px 16px 5px; background: var(--bg-soft); border-top: 1px solid var(--border); }
.cp .tr-mkt-group:first-child { border-top: none; }
.cp .tr-mkt { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 16px; background: none; border: none; border-top: 1px solid var(--border); cursor: pointer; text-align: left; transition: background .12s; }
.cp .tr-mkt:hover { background: var(--bg-soft); }
.cp .tr-mkt.on { background: var(--accent-tint); }
.cp .tr-mkt-pair { font-weight: 600; font-size: 13.5px; }
.cp .tr-mkt-r { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.cp .tr-mkt-px { font-size: 13px; font-weight: 550; }
.cp .tr-mkt-chg { font-size: 11.5px; font-weight: 600; }
.cp .tr-chart-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 6px; flex-wrap: wrap; }
.cp .tr-pair { font-size: 15px; font-weight: 650; }
.cp .tr-price { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-top: 2px; }
.cp .tr-price .tr-chg, .cp .tr-chg { font-size: 13px; font-weight: 600; }
.cp .tr-ranges { display: flex; gap: 4px; }
.cp .tr-range { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); font-size: 11.5px; font-weight: 550; color: var(--text-3); }
.cp .tr-range.on { background: var(--accent-tint); color: var(--accent-dark); border-color: var(--accent); }
.cp .tr-ob { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--border); }
.cp .tr-ob-col { padding: 10px 16px 14px; }
.cp .tr-ob-col + .tr-ob-col { border-left: 1px solid var(--border); }
.cp .tr-ob-head { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
.cp .tr-ob-row { display: flex; justify-content: space-between; font-size: 12.5px; font-variant-numeric: tabular-nums; padding: 2px 0; }
.cp .tr-ticket { padding: 16px !important; }
.cp .tr-side { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.cp .tr-side-btn { padding: 9px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); font-weight: 600; font-size: 13.5px; color: var(--text-2); cursor: pointer; }
.cp .tr-side-btn.buy.on { background: color-mix(in srgb, var(--green) 14%, transparent); border-color: var(--green); color: var(--green); }
.cp .tr-side-btn.sell.on { background: color-mix(in srgb, var(--red) 14%, transparent); border-color: var(--red); color: var(--red); }
.cp .tr-types { display: flex; gap: 6px; margin-bottom: 12px; }
.cp .tr-type { flex: 1; padding: 7px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); font-size: 12.5px; font-weight: 550; color: var(--text-3); }
.cp .tr-type.on { background: var(--bg-soft); color: var(--text); border-color: var(--border-2); }
.cp .tr-lbl { display: block; font-size: 12px; font-weight: 600; color: var(--text-3); margin: 10px 0 5px; }
.cp .tr-input { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 8px; padding: 0 12px; background: var(--bg-soft); }
.cp .tr-input input { flex: 1; border: none; background: none; padding: 10px 0; font-size: 14px; outline: none; color: var(--text); }
.cp .tr-suf { font-size: 12px; font-weight: 600; color: var(--text-3); }
.cp .tr-avail { display: flex; justify-content: space-between; font-size: 12.5px; margin-top: 12px; }
.cp .btn.danger { background: var(--red); border-color: var(--red); }
.cp .tr-chart-loading { padding: 70px 12px; text-align: center; }
.cp .tr-stats { display: flex; gap: 0; border-top: 1px solid var(--border); }
.cp .tr-stat { flex: 1; padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; }
.cp .tr-stat + .tr-stat { border-left: 1px solid var(--border); }
.cp .tr-stat .k { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.cp .tr-stat .v { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.cp .msg-empty { margin: auto; text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; padding: 40px 16px; }
.cp .msg-empty .big { font-size: 15px; font-weight: 600; }
.cp .tr-activity { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cp .tr-actcard { padding: 14px 16px; }
.cp .tr-acthd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; margin-bottom: 10px; }
@media (max-width: 800px) { .cp .tr-activity { grid-template-columns: 1fr; } }
@media (max-width: 1000px) {
  .cp .tr-grid { grid-template-columns: 1fr; }
  .cp .tr-markets .tr-mkt-list { max-height: 220px; overflow-y: auto; }
}

/* ---------- MESSAGES (preview UI) ---------------------------------- */
.cp .msg-panel { padding: 0; overflow: hidden; }
.cp .msg-topbar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.cp .msg-av { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex-shrink: 0; }
.cp .msg-av.lg { width: 42px; height: 42px; font-size: 17px; }
.cp .msg-thread { padding: 22px 18px; display: flex; flex-direction: column; gap: 14px; min-height: 320px; max-height: 52vh; overflow-y: auto; background: var(--bg-soft); }
.cp .msg-row { display: flex; gap: 10px; max-width: 78%; }
.cp .msg-row.them { align-self: flex-start; }
.cp .msg-row.me { align-self: flex-end; flex-direction: row-reverse; }
.cp .msg-bubble { padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5; position: relative; }
.cp .msg-bubble.them { background: var(--bg); border: 1px solid var(--border); border-top-left-radius: 4px; }
.cp .msg-bubble.me { background: var(--accent); color: #fff; border-top-right-radius: 4px; }
.cp .msg-name { font-size: 11.5px; font-weight: 700; color: var(--accent-dark); margin-bottom: 3px; }
.cp .msg-time { display: block; font-size: 10.5px; opacity: .6; margin-top: 4px; }
.cp .msg-compose { display: flex; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--border); }
.cp .msg-compose input { flex: 1; border: 1px solid var(--border); border-radius: 999px; padding: 10px 16px; font-size: 14px; background: var(--bg-soft); outline: none; }
.cp .msg-attach { padding: 8px 16px 0; }
.cp .msg-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; }
.cp .msg-chip button { border: none; background: none; cursor: pointer; font-size: 15px; line-height: 1; color: var(--text-3); }
/* Attachment as a button (icon + name) with a Preview/Download menu on click */
.cp .msg-file { display: inline-flex; align-items: center; gap: 7px; max-width: 240px; padding: 7px 11px; border-radius: 9px; margin-bottom: 5px; font-size: 12.5px; font-weight: 550; cursor: pointer; text-align: left; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.28); color: inherit; }
.cp .msg-bubble.them .msg-file, .cp .msg-note .msg-file { background: var(--bg-soft); border-color: var(--border); color: var(--text); }
.cp .msg-file:hover { filter: brightness(1.06); }
.cp .msg-file-ic { width: 15px; height: 15px; flex: 0 0 auto; opacity: .85; }
.cp .msg-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-file-menu { position: absolute; z-index: 9999; background: var(--bg, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 10px; box-shadow: 0 8px 26px rgba(15,23,42,.16); padding: 5px; display: flex; flex-direction: column; min-width: 132px; }
.msg-file-menu button { text-align: left; padding: 8px 12px; border: none; background: none; border-radius: 7px; cursor: pointer; font-size: 13px; color: var(--text, #0f172a); }
.msg-file-menu button:hover { background: var(--bg-soft, #f1f5f9); }
/* Internal staff-only note — never shown to the client */
.cp .msg-note { align-self: stretch; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 9px 13px; font-size: 13.5px; line-height: 1.5; color: #7c5e10; position: relative; }
.cp .msg-note-tag { display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #b45309; margin-right: 7px; vertical-align: 1px; }
/* "Note" send button — same size as the primary Send, amber to signal it's an
   internal (staff-only) note rather than a client-facing message. */
.btn.note { background: #d97706; border-color: #d97706; color: #fff; }
.btn.note:hover { background: #b45309; border-color: #b45309; }

/* ---- Messages inbox ---- */
.msg-inbox { display: grid; grid-template-columns: 330px 1fr; gap: 16px; height: calc(100vh - 150px); min-height: 460px; }
.mi-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg); }
.mi-filters { padding: 12px; border-bottom: 1px solid var(--border); }
.mi-rows { overflow-y: auto; flex: 1; }
.mi-row { display: block; width: 100%; text-align: left; padding: 11px 14px; border: none; border-bottom: 1px solid var(--border); background: none; cursor: pointer; }
.mi-row:hover { background: var(--bg-soft); }
.mi-row.on { background: var(--accent-50, #e8f7ee); }
.mi-row.unread .mi-name { font-weight: 700; }
.mi-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mi-name { font-size: 13.5px; font-weight: 600; color: var(--text); }
.mi-when { font-size: 11px; color: var(--text-3); flex: 0 0 auto; }
.mi-row-sub { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 2px; }
.mi-pre { font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-badge { flex: 0 0 auto; background: var(--accent, #2FBE66); color: #fff; font-size: 10.5px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.mi-assigned { font-size: 10.5px; color: var(--text-3); margin-top: 3px; }
.mi-thread { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg); display: flex; }
.mi-empty { margin: auto; padding: 40px; text-align: center; }
.mi-chat { display: flex; flex-direction: column; width: 100%; height: 100%; }
.mi-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.mi-chat .msg-thread { min-height: 0; max-height: none; flex: 1; }
.mi-chat .msg-compose { border-top: 1px solid var(--border); }
@media (max-width: 820px) { .msg-inbox { grid-template-columns: 1fr; height: auto; } .mi-rows { max-height: 40vh; } .mi-thread { min-height: 420px; } }
.dep-ref { background: var(--accent-tint); border: 1px solid var(--accent); border-radius: 10px; padding: 12px 14px; }
.dep-ref .k { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-dark); }
.dep-ref .v { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.dep-ref .v strong { font-size: 17px; letter-spacing: .03em; }
.dep-instr { white-space: pre-wrap; word-break: break-word; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-top: 12px; font-family: inherit; font-size: 13px; line-height: 1.6; color: var(--text-2); }

/* ---------- STAFF DASHBOARD REVAMP ---------------------------------- */
/* Grouped sidebar sections */
.nav .sec-label { font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); padding: 14px 12px 5px; }
.nav .sec-label:first-child { padding-top: 4px; }

/* Topbar: title + one-line purpose */
.topbar .tt { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.topbar .page-sub { font-size: 11.5px; color: var(--text-3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Overview greeting */
.ov-hero { padding: 6px 2px 18px; }
.ov-hero h2 { font-size: 20px; font-weight: 650; letter-spacing: -.02em; }
.ov-hero .sub { color: var(--text-3); font-size: 13.5px; margin-top: 3px; }

/* ---------- PARTNER HOME ------------------------------------------- */
.ptr-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 4px 2px 20px; flex-wrap: wrap; }
.ptr-hero-l h2 { font-size: 22px; font-weight: 650; letter-spacing: -.02em; }
.ptr-hero-l .sub { color: var(--text-3); font-size: 13.5px; margin-top: 4px; }
.ptr-hero-r { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; min-width: 210px; }
.ptr-hero-r .lbl { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.ptr-code { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.ptr-code strong { font-size: 18px; letter-spacing: .04em; color: var(--purple, #7E22CE); }
.stat-card .sub { margin-top: 3px; }
.ptr-money { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin: 22px 0 6px; align-items: start; }
.ptr-money-col .cp-h { font-size: 14px; font-weight: 600; margin: 0 0 10px; }
.ptr-curs { display: flex; gap: 12px; flex-wrap: wrap; }
.ptr-cur { flex: 1; min-width: 150px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.ptr-cur .cur { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.ptr-cur .amt { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-top: 5px; }
.ptr-cur .amt .u { font-size: 12px; color: var(--text-3); font-weight: 600; }
@media (max-width: 900px) { .ptr-money { grid-template-columns: 1fr; } }
/* Time-frame switcher (pill tabs) */
.tf-tabs { display: inline-flex; gap: 4px; background: var(--bg-alt); border-radius: 999px; padding: 3px; }
.tf-btn { padding: 4px 12px; border-radius: 999px; border: none; background: none; font-size: 12px; font-weight: 600; color: var(--text-3); cursor: pointer; }
.tf-btn.on { background: var(--bg); color: var(--accent-dark); box-shadow: 0 1px 2px rgba(15,23,42,.08); }
/* Info "?" popover */
.info-wrap { position: relative; display: inline-block; }
.info-q { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--border-2); background: var(--bg); color: var(--text-3); font-size: 10.5px; font-weight: 700; line-height: 1; cursor: pointer; vertical-align: middle; }
.info-q:hover { color: var(--accent-dark); border-color: var(--accent); }
.info-pop { position: absolute; top: 22px; left: 0; z-index: 20; width: 230px; background: var(--text); color: #fff; font-size: 12px; font-weight: 400; line-height: 1.5; padding: 8px 11px; border-radius: 8px; box-shadow: 0 4px 14px rgba(15,23,42,.22); text-transform: none; letter-spacing: 0; }
.ptr-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 22px; }
.ptr-chart { padding: 14px 16px; }
.ptr-charthd { margin-bottom: 10px; }
.ptr-charthd .t { font-size: 13.5px; font-weight: 650; }
.pcd-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pcd-stat { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.pcd-stat .k { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.pcd-stat .v { font-size: 16px; font-weight: 700; }
/* Interactive chart overlay (shared by admin + client dashboards) */
.chart { position: relative; touch-action: none; }
.chart-plot { position: relative; }
.chart.has-axes { display: grid; grid-template-columns: 48px 1fr; grid-template-rows: 1fr 15px; column-gap: 6px; }
.chart.has-axes .chart-yax { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; font-size: 9.5px; color: var(--text-3); text-align: right; padding: 2px 0; font-variant-numeric: tabular-nums; }
.chart.has-axes .chart-plot { grid-column: 2; grid-row: 1; }
.chart.has-axes .chart-xax { grid-column: 2; grid-row: 2; display: flex; justify-content: space-between; font-size: 9.5px; color: var(--text-3); }
.chart svg rect { transition: opacity .08s; }
.chart-cursor { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border-2); display: none; pointer-events: none; }
.chart-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff; transform: translate(-50%, -50%); display: none; pointer-events: none; box-shadow: 0 0 0 1px rgba(15,23,42,.08); }
.chart-tip { position: absolute; top: 4px; background: var(--text); color: #fff; padding: 4px 9px; border-radius: 6px; font-size: 11.5px; line-height: 1.3; display: none; pointer-events: none; white-space: nowrap; z-index: 4; box-shadow: 0 2px 8px rgba(15,23,42,.18); }
.chart-tip strong { font-weight: 700; }
.chart-tip span { opacity: .7; margin-left: 7px; }

/* Dual work queues */
.q2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .q2 { grid-template-columns: 1fr; } }

/* Settings section chips */
.set-nav { position: sticky; top: 0; z-index: 5; display: flex; gap: 8px; flex-wrap: wrap; padding: 6px 0 12px; margin-bottom: 6px; background: linear-gradient(var(--bg-soft) 85%, transparent); }
.set-nav button { padding: 6px 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); font-size: 12.5px; font-weight: 550; color: var(--text-2); transition: border-color .12s, color .12s; }
.set-nav button:hover { border-color: var(--accent); color: var(--accent-dark); }

@media (max-width: 900px) {
  .nav .sec-label { display: none; }
  .topbar .page-sub { display: none; }
}