/* ============================================================================
 * auth.css — shared styling for the OUT-OF-SHELL auth screens (Login, Forgot,
 * Reset, Verify email, OAuth callback). Pixel-matches the Cryptrum Pay artifact
 * split layout: dark brand panel (left) + centered form card (right).
 *
 * All classes are prefixed .cpau-. Uses --cp-* tokens only. The brand panel is
 * hidden under 860px (matches the artifact's `.cp-auth-brand` rule). No inline
 * static CSS lives in the views — only dynamic values stay inline.
 * ========================================================================== */

/* full-viewport split shell sitting on the page gradient */
.cpau-shell{
  position:fixed; inset:0; z-index:50;
  display:flex;
  font-family:'Poppins',system-ui,sans-serif;
  color:var(--cp-fg);
  background:var(--cp-bg-grad);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

/* ---------------- LEFT — dark brand panel ---------------- */
.cpau-brand{
  flex:1; max-width:560px;
  background:#16181D; color:#fff;
  padding:48px 50px;
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden;
}
.cpau-brand-bg{
  position:absolute; right:-90px; bottom:-70px;
  width:360px; opacity:.06; pointer-events:none;
}
.cpau-brand-top{ position:relative; }
.cpau-brand-logo{ height:27px; object-fit:contain; }
.cpau-brand-mid{ position:relative; }
.cpau-brand-eyebrow{
  font:700 11px 'Poppins'; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.5); margin-bottom:18px;
}
.cpau-brand-h{
  font:600 33px/1.25 'Poppins'; letter-spacing:-.7px; margin:0; max-width:420px;
}
.cpau-brand-p{
  margin:18px 0 0; font:400 14px/1.65 'Poppins';
  color:rgba(255,255,255,.62); max-width:380px;
}
.cpau-brand-list{
  position:relative; display:flex; flex-direction:column; gap:14px;
}
.cpau-brand-feat{
  display:flex; align-items:center; gap:12px;
  font:500 13.5px 'Poppins'; color:rgba(255,255,255,.86);
}
.cpau-brand-tick{
  width:22px; height:22px; border-radius:7px;
  background:rgba(255,255,255,.13);
  display:inline-flex; align-items:center; justify-content:center;
  flex:none;
}
.cpau-brand-tick svg{ width:13px; height:13px; }

/* ---------------- RIGHT — form column ---------------- */
.cpau-formcol{
  flex:1; min-width:0;
  display:flex; align-items:center; justify-content:center;
  padding:24px; overflow-y:auto;
}
.cpau-card{
  width:100%; max-width:412px;
  background:var(--cp-surface);
  border:1px solid var(--cp-border);
  border-radius:20px;
  box-shadow:var(--cp-sh);
  padding:30px 32px;
  animation:cp-kfadeup .5s ease both;
}
.cpau-card-mobilebrand{
  display:none;
  margin-bottom:22px;
}
.cpau-card-mobilebrand img{ height:24px; object-fit:contain; }

/* tabs (login / signup) */
.cpau-tabs{
  display:flex;
  background:var(--cp-surface2);
  border:1px solid var(--cp-border);
  border-radius:12px; padding:4px; gap:3px;
  margin-bottom:24px;
}
.cpau-tab{
  flex:1; height:38px; border-radius:9px;
  background:transparent; border:none;
  color:var(--cp-fg-2); font:500 13px 'Poppins'; cursor:pointer;
  transition:background .15s,color .15s;
}
.cpau-tab.on{
  background:var(--cp-surface); box-shadow:var(--cp-sh-sm);
  color:var(--cp-fg); font-weight:600;
}

/* headings */
.cpau-h{ font:600 23px 'Poppins'; margin:0; letter-spacing:-.5px; color:var(--cp-fg); }
.cpau-sub{ margin:6px 0 20px; color:var(--cp-fg-2); font-size:13px; line-height:1.55; }
.cpau-sub strong{ color:var(--cp-fg); font-weight:600; }

/* SSO buttons row */
.cpau-sso{ display:flex; gap:10px; margin-bottom:18px; }
.cpau-sso-btn{
  flex:1; height:44px; border-radius:11px;
  border:1px solid var(--cp-border2); background:var(--cp-surface);
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font:600 13px 'Poppins'; color:var(--cp-fg); cursor:pointer;
  transition:background .15s,border-color .15s;
}
.cpau-sso-btn:hover:not(:disabled){ background:var(--cp-hover); }
.cpau-sso-btn:disabled{ cursor:not-allowed; }
.cpau-sso-btn svg{ width:17px; height:17px; }

/* "or with email" divider */
.cpau-divider{
  display:flex; align-items:center; gap:12px; margin-bottom:18px;
}
.cpau-divider::before, .cpau-divider::after{
  content:''; flex:1; height:1px; background:var(--cp-border);
}
.cpau-divider span{ font:500 11px 'Poppins'; color:var(--cp-fg-3); }

/* fields */
.cpau-fld{ margin-bottom:14px; }
.cpau-fld > label{
  display:block; font:600 12px 'Poppins'; margin-bottom:7px; color:var(--cp-fg);
}
/* Phase 30 — required asterisk inline in field labels */
.cpau-req{ color:var(--cp-neg); margin-left:3px; }
.cpau-input,
.cpau-select{
  width:100%; height:46px; padding:0 14px;
  border-radius:11px; border:1px solid var(--cp-border2);
  background:var(--cp-surface2); color:var(--cp-fg);
  font:400 14px 'Poppins'; outline:none;
  transition:border-color .15s,background .15s;
}
.cpau-select{ font-weight:500; font-size:13px; appearance:none; cursor:pointer; padding-right:32px; }
.cpau-input::placeholder{ color:var(--cp-fg-3); }
.cpau-input:focus,
.cpau-select:focus{ border-color:var(--cp-accent); background:var(--cp-surface); }
.cpau-input.cpau-mono{ font-family:var(--cp-mono); letter-spacing:.02em; }

/* password field w/ eye toggle */
.cpau-pw{ position:relative; }
.cpau-pw .cpau-input{ padding-right:44px; }
.cpau-eye{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border:none; background:none;
  color:var(--cp-fg-3); display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.cpau-eye:hover{ color:var(--cp-fg-2); }
.cpau-eye svg{ width:18px; height:18px; }

/* select chevron wrapper */
.cpau-selwrap{ position:relative; }
.cpau-selchev{
  position:absolute; right:11px; top:50%; transform:translateY(-50%);
  pointer-events:none; color:var(--cp-fg-3); display:inline-flex;
}
.cpau-selchev svg{ width:15px; height:15px; }

/* forgot link row */
.cpau-forgot{ text-align:right; margin-bottom:18px; }
.cpau-forgot a,
.cpau-forgot button{
  border:none; background:none; padding:0;
  font:600 12.5px 'Poppins'; color:var(--cp-brand); cursor:pointer;
  text-decoration:none;
}
.cpau-forgot a:hover, .cpau-forgot button:hover{ text-decoration:underline; }

/* primary CTA */
.cpau-cta{
  width:100%; height:48px; border-radius:13px;
  background:var(--cp-accent); border:none; color:var(--cp-accent-fg);
  font:600 14px 'Poppins'; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:background .15s,opacity .15s;
}
.cpau-cta:hover:not(:disabled){ background:var(--cp-accent-press); }
.cpau-cta:disabled{ cursor:not-allowed; }
.cpau-cta .cpau-arr{ font-size:16px; display:inline-flex; }
.cpau-cta .cpau-arr svg{ width:16px; height:16px; }

/* secondary / back button */
.cpau-btn2{
  height:48px; padding:0 20px; border-radius:13px;
  background:var(--cp-surface); border:1px solid var(--cp-border2);
  color:var(--cp-fg); font:600 14px 'Poppins'; cursor:pointer;
  transition:background .15s;
}
.cpau-btn2:hover{ background:var(--cp-hover); }

/* button row */
.cpau-row{ display:flex; gap:12px; }
.cpau-row .cpau-cta{ flex:1; }

/* centered back-to-login link */
.cpau-backlink{ text-align:center; margin-top:16px; }
.cpau-backlink a,
.cpau-backlink button{
  border:none; background:none; padding:0;
  font:600 12.5px 'Poppins'; color:var(--cp-fg-2); cursor:pointer; text-decoration:none;
}
.cpau-backlink a:hover, .cpau-backlink button:hover{ color:var(--cp-fg); }

/* status icon badge (verify / success) */
.cpau-iconbox{
  width:60px; height:60px; border-radius:16px;
  background:var(--cp-accent-soft); color:var(--cp-accent);
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:16px;
}
.cpau-iconbox svg{ width:28px; height:28px; }

/* centered block (verify / oauth) */
.cpau-center{ text-align:center; }

/* error note */
.cpau-err{
  background:var(--cp-neg-soft); border:1px solid var(--cp-neg);
  color:var(--cp-neg); border-radius:11px;
  padding:11px 14px; font:500 12.5px/1.5 'Poppins';
  margin-bottom:16px; word-break:break-word;
}

/* spinner */
.cpau-spin{
  width:14px; height:14px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent;
  display:inline-block; animation:cp-kspin .7s linear infinite;
}
.cpau-spin-lg{
  width:44px; height:44px; border-radius:50%;
  border:2px solid var(--cp-border2); border-top-color:var(--cp-brand);
  animation:cp-kspin .85s linear infinite; margin:0 auto 22px;
}

/* legal footer */
.cpau-legal{
  margin:22px 0 0; text-align:center;
  font:500 11px 'Poppins'; color:var(--cp-fg-3); letter-spacing:.01em;
}

/* resend / muted helper line */
.cpau-resend{ text-align:center; margin-top:18px; font-size:13px; color:var(--cp-fg-2); }
.cpau-resend .cpau-muted{ color:var(--cp-fg-3); }
.cpau-resend button{
  background:none; border:0; padding:0; font:600 13px 'Poppins';
  color:var(--cp-brand); cursor:pointer; text-decoration:underline;
}
.cpau-resend button:disabled{ color:var(--cp-fg-3); cursor:not-allowed; text-decoration:none; }

/* two-column grid for compact field pairs */
.cpau-2col{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* signup wizard step bar */
.cpau-steps{ margin-bottom:20px; }
.cpau-steps-top{
  display:flex; justify-content:space-between;
  font:600 11px 'Poppins'; color:var(--cp-fg-3); margin-bottom:8px;
}
.cpau-steps-bar{
  height:5px; border-radius:5px; background:var(--cp-surface2); overflow:hidden;
}
.cpau-steps-bar > i{
  display:block; height:100%; background:var(--cp-accent);
  border-radius:5px; transition:width .3s;
}

/* signup review block */
.cpau-review{
  background:var(--cp-surface2); border:1px solid var(--cp-border);
  border-radius:12px; overflow:hidden; margin-bottom:18px;
}
.cpau-review .r{
  display:flex; justify-content:space-between; padding:11px 15px; font-size:12.5px;
}
.cpau-review .r + .r{ border-top:1px solid var(--cp-border); }
.cpau-review .k{ color:var(--cp-fg-2); }
.cpau-review .v{ font-weight:600; }
.cpau-review .v.muted{ color:var(--cp-fg-3); font-weight:500; }

/* terms checkbox row */
.cpau-terms{
  display:flex; align-items:flex-start; gap:11px; margin-bottom:20px; cursor:pointer;
}
.cpau-terms .box{
  width:20px; height:20px; border-radius:6px; flex:none; margin-top:1px;
  background:var(--cp-accent); color:var(--cp-accent-fg);
  display:inline-flex; align-items:center; justify-content:center;
}
.cpau-terms .box.off{
  background:transparent; border:1.5px solid var(--cp-border2); color:transparent;
}
.cpau-terms .box svg{ width:12px; height:12px; }
.cpau-terms span:last-child{ font:400 12.5px/1.5 'Poppins'; color:var(--cp-fg-2); }
.cpau-terms a{ color:var(--cp-brand); font-weight:600; text-decoration:none; }

/* skip link (signup business step) */
.cpau-skip{
  margin-left:auto; border:none; background:none; padding:0;
  font:600 12px 'Poppins'; color:var(--cp-brand); cursor:pointer;
}
.cpau-steptag{
  display:inline-block; font:700 10.5px 'Poppins'; letter-spacing:.12em;
  text-transform:uppercase; color:var(--cp-fg-3); margin-bottom:10px;
}

/* phone group (dial code + number) */
.cpau-phone{ display:grid; grid-template-columns:84px 1fr; gap:8px; }
.cpau-phone .cpau-input:first-child{ text-align:center; }

/* hide brand panel on narrow screens — matches artifact's 860px rule */
@media (max-width:860px){
  .cpau-brand{ display:none; }
  .cpau-card-mobilebrand{ display:block; }
}
@media (max-width:480px){
  .cpau-card{ padding:26px 22px; }
  .cpau-2col{ grid-template-columns:1fr; }
}
/* Projects — page-scoped classes (artifact: isProjects branch + project modals). */

/* active-projects label row */
.cpj-subbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:16px;
}
.cpj-subbar-label{
  font:700 11px 'Poppins';letter-spacing:.08em;text-transform:uppercase;
  color:var(--cp-fg-2);
}

/* card grid */
.cpj-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:16px;
}

/* card */
.cpj-card{
  background:var(--cp-surface);border:1px solid var(--cp-border);
  border-radius:18px;box-shadow:var(--cp-sh-sm);padding:22px;cursor:pointer;
  display:flex;flex-direction:column;gap:16px;
  transition:box-shadow .2s,transform .2s;
}
.cpj-card:hover{box-shadow:var(--cp-sh);transform:translateY(-2px);}

.cpj-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.cpj-card-meta{min-width:0;}
.cpj-card-name{
  font:600 17px 'Poppins';letter-spacing:-.3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cpj-card-id{font:500 11.5px 'Poppins';color:var(--cp-fg-3);margin-top:4px;}

.cpj-card-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.cpj-stat-lbl{
  font:600 10px 'Poppins';letter-spacing:.05em;text-transform:uppercase;color:var(--cp-fg-3);
}
.cpj-stat-val{
  font:500 12.5px 'Poppins';color:var(--cp-fg-2);margin-top:5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cpj-stat-val.strong{font-weight:600;color:var(--cp-fg);}

.cpj-card-foot{
  display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid var(--cp-border);padding-top:14px;margin-top:auto;
}
.cpj-card-date{font:500 11px 'Poppins';color:var(--cp-fg-3);}
.cpj-card-open{
  font:600 12px 'Poppins';color:var(--cp-accent);
  background:none;border:none;cursor:pointer;padding:0;
}

/* skeleton card */
.cpj-card-sk{height:172px;cursor:default;}

/* detail-modal header (eyebrow + name + id) */
.cpj-dh{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:22px 24px;border-bottom:1px solid var(--cp-border);
}
.cpj-dh-meta{min-width:0;}
.cpj-dh-eyebrow{
  font:600 10px 'Poppins';letter-spacing:.06em;text-transform:uppercase;color:var(--cp-fg-3);
}
.cpj-dh-name{font:600 19px 'Poppins';margin-top:4px;}
.cpj-dh-id{
  font:500 11.5px 'Poppins';color:var(--cp-fg-3);margin-top:6px;
  display:flex;align-items:center;gap:8px;
}

/* tabs row sits inside modal, with its own padding */
.cpj-tabs{padding:0 24px;gap:2px;margin-bottom:0;}
.cpj-tabs .cp-tab{padding:13px 14px;}
.cpj-tab-body{padding:22px 24px;}

.cpj-cap{font:400 12.5px/1.5 'Poppins';color:var(--cp-fg-3);margin-bottom:16px;}
.cpj-cap .mono{font-family:var(--cp-mono);color:var(--cp-fg);}

/* webhook URL read row */
.cpj-urlrow{
  display:flex;align-items:center;gap:10px;
  background:var(--cp-surface2);border:1px solid var(--cp-border);
  border-radius:11px;padding:11px 14px;margin-bottom:20px;
}
.cpj-urlrow-val{
  flex:1;min-width:0;font:500 12.5px 'Poppins';color:var(--cp-fg-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cpj-edit-link,.cpj-revoke-link{
  border:none;background:none;font:600 12px 'Poppins';cursor:pointer;padding:0;flex:none;
}
.cpj-edit-link{color:var(--cp-accent);}
.cpj-revoke-link{color:var(--cp-neg);}

.cpj-url-edit{margin-bottom:20px;}
.cpj-url-edit-foot{display:flex;gap:10px;justify-content:flex-end;margin-top:12px;}

/* send-test row */
.cpj-test-row{display:flex;gap:10px;}
.cpj-test-row .cp-select-wrap{flex:1;}
.cpj-test-send{flex:none;}
.cpj-test-result{
  margin-top:14px;padding:13px 15px;
  background:var(--cp-surface2);border:1px solid var(--cp-border);border-radius:12px;
}
.cpj-test-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.cpj-test-meta{font:500 12px 'Poppins';color:var(--cp-fg-3);}
.cpj-test-err{font:500 12px 'Poppins';color:var(--cp-neg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cpj-test-toggles{display:flex;gap:16px;margin-top:10px;}
.cpj-test-toggle{
  background:none;border:none;cursor:pointer;padding:0;
  font:600 12px 'Poppins';color:var(--cp-accent);
}
.cpj-pre{
  font:400 11.5px var(--cp-mono);margin:10px 0 0;padding:12px;
  background:var(--cp-surface);border:1px solid var(--cp-border);border-radius:10px;
  max-height:240px;overflow:auto;white-space:pre;
}

/* keys tab */
.cpj-keys-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.cpj-keys-cap{font:400 12px 'Poppins';color:var(--cp-fg-3);}
.cpj-keys-cap .mono{font-family:var(--cp-mono);color:var(--cp-fg);}
.cpj-key-row{
  display:grid;grid-template-columns:1.4fr 0.8fr 1fr 0.7fr;align-items:center;
  padding:11px 2px;border-top:1px solid var(--cp-border);
}
.cpj-key-prefix{font:500 12.5px var(--cp-mono);color:var(--cp-fg-2);}
.cpj-key-date{font:500 11.5px 'Poppins';color:var(--cp-fg-3);}
.cpj-key-empty{
  padding:34px;text-align:center;color:var(--cp-fg-3);font-size:13px;
  border:1px solid var(--cp-border);border-radius:12px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}

/* secret tab */
.cpj-secret-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--cp-surface2);border:1px solid var(--cp-border);
  border-radius:11px;padding:11px 14px;margin-bottom:18px;
}
.cpj-secret-hint{font:500 11.5px 'Poppins';color:var(--cp-fg-3);}
.cpj-secret-note{font:400 11.5px 'Poppins';color:var(--cp-fg-3);margin-top:12px;}

/* reveal-once secret block */
.cpj-reveal-warn{
  display:flex;align-items:flex-start;gap:10px;
  background:var(--cp-neg-soft);border-radius:12px;padding:12px 14px;margin-bottom:18px;
  font:500 12.5px/1.5 'Poppins';color:var(--cp-neg);
}
.cpj-reveal-warn svg{flex:none;margin-top:1px;}
.cpj-reveal-code{
  display:flex;align-items:flex-start;gap:10px;
  background:var(--cp-surface2);border:1px solid var(--cp-border);
  border-radius:11px;padding:12px 14px;
}
.cpj-reveal-code code{flex:1;font:500 12.5px var(--cp-mono);color:var(--cp-fg-2);word-break:break-all;}
.cpj-reveal-copy{
  border:none;background:none;color:var(--cp-fg-3);cursor:pointer;
  display:inline-flex;flex:none;
}
.cpj-reveal-copy:hover{color:var(--cp-accent);}

/* confirm dialogs */
.cpj-confirm-title{font:600 16px 'Poppins';margin:0 0 10px;}
.cpj-confirm-text{font:400 13px/1.5 'Poppins';color:var(--cp-fg-2);margin:0 0 22px;}
.cpj-confirm-foot{display:flex;gap:10px;justify-content:flex-end;}

/* create-project field caption */
.cpj-create-hint{font:400 11.5px 'Poppins';color:var(--cp-fg-3);margin-top:7px;}
/* Payments — page-scoped classes (artifact: isPayments branch). */

/* stats strip */
.cpp-stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;}
.cpp-stat{
  background:var(--cp-surface);border:1px solid var(--cp-border);
  border-radius:13px;padding:13px 18px;min-width:120px;
}
.cpp-stat-l{font:500 11.5px 'Poppins';color:var(--cp-fg-3);}
.cpp-stat-v{font:600 21px var(--cp-mono);margin-top:3px;}
.cpp-stat-v.accent{color:var(--cp-accent);}

/* latest-payments sub-head */
.cpp-subhead{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:14px;padding:2px 2px 16px;flex-wrap:wrap;
}
.cpp-subhead-title{font:600 15px 'Poppins';}
.cpp-subhead-cap{font:400 12px 'Poppins';color:var(--cp-fg-3);margin-top:2px;}
.cpp-filters{display:flex;gap:9px;flex-wrap:wrap;}
.cpp-filters .cp-select{height:38px;font-size:13px;}

/* table grid */
.cpp-inner{min-width:680px;}
.cpp-grid{grid-template-columns:1.7fr 0.9fr 1.5fr 1.1fr 1fr;}
.cpp-method{text-transform:capitalize;font:500 12.5px 'Poppins';color:var(--cp-fg-2);}
.cpp-asset{display:flex;align-items:center;gap:9px;}
.cpp-conf{font:400 10.5px 'Poppins';color:var(--cp-fg-3);margin-top:4px;}

/* collection drill-down */
.cpp-collap{
  grid-column:1 / -1;background:var(--cp-surface2);
  border-radius:12px;margin:0 0 14px;padding:16px 18px;
}
.cpp-collap-h{
  font:700 10.5px 'Poppins';letter-spacing:.08em;text-transform:uppercase;
  color:var(--cp-fg-3);margin-bottom:12px;
}
.cpp-collap-note{font:400 13px 'Poppins';color:var(--cp-fg-3);}
.cpp-sweep{
  background:var(--cp-surface);border:1px solid var(--cp-border);
  border-radius:12px;padding:14px;
}
.cpp-sweep + .cpp-sweep{margin-top:12px;}
.cpp-sweep-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px;flex-wrap:wrap;}
.cpp-sweep-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.cpp-sweep-time{font:400 11.5px 'Poppins';color:var(--cp-fg-3);}
.cpp-sweep-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:10px;}
.cpp-kvs-k{font:600 10px 'Poppins';color:var(--cp-fg-3);margin-bottom:3px;}
.cpp-kvs code{font:400 11.5px 'Poppins';word-break:break-all;}
.cpp-hashrow{display:flex;align-items:center;gap:10px;font:400 11.5px 'Poppins';}
.cpp-hashrow .lbl{width:96px;color:var(--cp-fg-3);font-weight:500;flex:none;}
.cpp-hashrow code{flex:1;font:400 11px 'Poppins';color:var(--cp-fg-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cpp-hashrow-copy{border:none;background:none;color:var(--cp-fg-3);font-size:14px;cursor:pointer;display:inline-flex;}
.cpp-hashrow-copy:hover{color:var(--cp-accent);}
.cpp-err{background:var(--cp-neg-soft);color:var(--cp-neg);padding:8px 12px;border-radius:8px;font:400 12px 'Poppins';margin-top:8px;}
.cpp-sweep-meta .cp-cell-sub{margin:0;}
.cpp-hashes{display:flex;flex-direction:column;gap:6px;}
@media (max-width:560px){.cpp-sweep-grid{grid-template-columns:1fr;}}
/* Settlements — page-scoped classes (artifact: isSettlements branch + the
   request-action modal). Composes cp-kit primitives; only grid columns and a
   few one-off bits live here. Tokens come from cp-shell.css (--cp-*). */

/* filter selects sit a touch shorter, matching the artifact's 40px controls */
.cps-sel{height:40px;font-size:13px;}

/* table grid — When / Kind / Payment / Amount / Status / Custody tx / Request / Action */
.cps-inner{min-width:760px;}
.cps-grid{grid-template-columns:0.9fr 0.8fr 1.4fr 1fr 1.1fr 1fr 1.2fr 0.9fr;}

.cps-amt{font:600 12.5px 'Poppins';}
.cps-tok{color:var(--cp-fg-3);font-weight:500;}
.cps-hash{font:400 11.5px 'Poppins';color:var(--cp-fg-2);}
.cps-muted{font:400 12px 'Poppins';color:var(--cp-fg-3);}
.cps-reqact{font:600 12px 'Poppins';text-transform:capitalize;}

/* ── request-action modal ── */
.cps-msum{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--cp-surface2);border:1px solid var(--cp-border);
  border-radius:12px;padding:13px 15px;margin-bottom:18px;
}
.cps-msum-l{font:600 13px 'Poppins';}
.cps-msum-sub{color:var(--cp-fg-3);font-weight:400;text-transform:capitalize;}
.cps-msum-amt{font:600 14px 'Poppins';white-space:nowrap;}

.cps-flabel{margin-bottom:10px;}

.cps-radiogrid{display:flex;flex-direction:column;gap:8px;margin-bottom:6px;}
.cps-radio{
  display:flex;align-items:flex-start;gap:11px;width:100%;
  padding:12px 14px;border-radius:12px;cursor:pointer;
  border:1px solid var(--cp-border2);background:var(--cp-surface);
  transition:border-color .15s,background .15s;
}
.cps-radio:hover{background:var(--cp-hover);}
.cps-radio.on:hover{background:var(--cp-accent-soft);}
.cps-radio.on{border:1.5px solid var(--cp-accent);background:var(--cp-accent-soft);}
.cps-radio-input{position:absolute;opacity:0;width:0;height:0;pointer-events:none;}
.cps-radio-dot{
  width:18px;height:18px;border-radius:50%;flex:none;margin-top:1px;
  background:var(--cp-surface);border:1.6px solid var(--cp-border2);
  transition:border .15s;
}
.cps-radio-dot.on{border:5px solid var(--cp-accent);}
.cps-radio-body{display:flex;flex-direction:column;min-width:0;}
.cps-radio-l{font:600 13px 'Poppins';}
.cps-radio-d{font:400 12px 'Poppins';color:var(--cp-fg-2);margin-top:2px;}

.cps-field{margin-top:16px;margin-bottom:0;}

.cps-foot{display:flex;gap:12px;}
.cps-foot .cp-btn-lg,.cps-foot .cp-btn-ghost.cp-btn-lg{flex:1;}
/* Accounts — page-scoped (artifact: isAccounts branch). */
.cpa-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px;}
.cpa-search{
  display:flex;align-items:center;gap:9px;
  background:var(--cp-surface);border:1px solid var(--cp-border2);
  border-radius:11px;padding:9px 13px;flex:1;max-width:380px;
  transition:border-color .15s;
}
.cpa-search:focus-within{border-color:var(--cp-accent);}
.cpa-search input{flex:1;min-width:0;border:none;outline:none;background:none;font:400 13px 'Poppins';color:var(--cp-fg);}
.cpa-search-ic{font-size:16px;color:var(--cp-fg-3);display:inline-flex;flex:none;}
.cpa-spacer{flex:1;}

.cpa-inner{min-width:760px;}
.cpa-grid{grid-template-columns:1.3fr 1.1fr 1.3fr 1.2fr 0.7fr 0.8fr 0.95fr;}
.cpa-ext{display:flex;align-items:center;gap:10px;min-width:0;}
.cpa-extmeta{min-width:0;}
.cpa-ava{
  width:30px;height:30px;border-radius:9px;flex:none;
  background:var(--cp-hover);color:var(--cp-fg-2);
  display:inline-flex;align-items:center;justify-content:center;font:600 11px 'Poppins';
}
.cpa-id{font:500 11.5px 'Poppins';color:var(--cp-fg-2);}
.cpa-email{font:400 12px 'Poppins';color:var(--cp-fg-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cpa-chips{display:flex;gap:4px;flex-wrap:wrap;}
.cpa-chip{
  font:600 10px 'Poppins';letter-spacing:.03em;text-transform:uppercase;
  color:var(--cp-fg-2);background:var(--cp-hover);padding:2px 7px;border-radius:6px;
}
.cpa-dep{font:600 12.5px 'Poppins';}
.cpa-last{font:400 12px 'Poppins';color:var(--cp-fg-2);}
.cpa-created{font:400 11.5px 'Poppins';color:var(--cp-fg-3);}
.cpa-muted{color:var(--cp-fg-3);}
/* Account detail — page-scoped (extends Accounts visual language). Prefix .cpad-. */

/* ── header ── */
.cpad-back{margin-bottom:14px;}
.cpad-ident{display:flex;align-items:center;gap:14px;min-width:0;}
.cpad-ava{
  width:48px;height:48px;border-radius:13px;flex:none;
  background:var(--cp-accent-soft2);color:var(--cp-fg);
  display:inline-flex;align-items:center;justify-content:center;font:600 17px 'Poppins';
}
.cpad-meta{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:7px;}
.cpad-meta-item{font:400 12.5px 'Poppins';color:var(--cp-fg-2);}
.cpad-meta-sep{color:var(--cp-fg-3);}
.cpad-meta-item .cp-num{font-weight:500;color:var(--cp-fg-2);}

/* ── section blocks ── */
.cpad-sec{margin-bottom:22px;}
.cpad-sec-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:13px;
}
.cpad-sec-title{font:600 15px 'Poppins';}
.cpad-sec-cap{font:400 12px 'Poppins';color:var(--cp-fg-3);margin-top:2px;}

/* ── summary cards (balances) ── */
.cpad-cards{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:13px;
}
.cpad-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:11px;}
.cpad-card-bal{font:600 22px var(--cp-mono);letter-spacing:-.3px;}
.cpad-card-tok{font:500 12px 'Poppins';color:var(--cp-fg-3);margin-top:1px;}
.cpad-card-sub{margin-top:12px;display:flex;flex-direction:column;gap:7px;}

/* ── deposit-address copy rows ── */
.cpad-addrs{display:flex;flex-direction:column;gap:10px;}
.cpad-addr{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.cpad-addr-tag{flex:none;}
.cpad-addr .cp-copy{flex:1;min-width:240px;}
.cpad-addr-idx{font:500 10.5px 'Poppins';color:var(--cp-fg-3);letter-spacing:.03em;flex:none;}

/* ── deposits table ── */
.cpad-inner{min-width:880px;}
.cpad-grid{grid-template-columns:0.9fr 1.1fr 1.4fr 1.4fr 1fr 0.9fr 0.9fr;}
.cpad-tok{display:flex;align-items:center;gap:8px;}
.cpad-fiat-cur{color:var(--cp-fg-3);font-size:11px;}
.cpad-conf{font:500 12px 'Poppins';color:var(--cp-fg-2);}
.cpad-toolbar{display:flex;gap:9px;flex-wrap:wrap;align-items:center;}
.cpad-toolbar .cp-select{height:36px;font-size:12.5px;}
.cpad-fiat-sel{max-width:96px;}

/* ── drill-down modal ── */
.cpad-dd-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px;}
.cpad-dd-full{grid-column:1 / -1;}
.cpad-dd-k{
  font:600 10px 'Poppins';letter-spacing:.05em;text-transform:uppercase;
  color:var(--cp-fg-3);margin-bottom:4px;
}
.cpad-dd-v{font:400 13px 'Poppins';color:var(--cp-fg);}
.cpad-dd-v.mono{font:400 12px var(--cp-mono);word-break:break-all;}
.cpad-dd-v.strong{font-weight:600;}
.cpad-dd-fiats{margin-top:5px;display:flex;flex-direction:column;gap:2px;}
.cpad-dd-fiat{font:400 11.5px 'Poppins';color:var(--cp-fg-3);}
.cpad-dd-fiat .rate{opacity:.65;}
.cpad-dd-err{font:400 11px 'Poppins';color:var(--cp-neg);margin-top:4px;}

/* webhook-attempts mini table inside modal */
.cpad-wh-grid{grid-template-columns:0.4fr 1.4fr 0.6fr 1.1fr 1.2fr;min-width:0;}
.cpad-dd-loading{padding:40px;text-align:center;color:var(--cp-fg-3);font-size:13px;}

@media (max-width:620px){.cpad-dd-grid{grid-template-columns:1fr;}}
/* ============================================================================
 * Account Deposits page — dedicated ledger view. Uses cp-kit primitives
 * (cp-grid, cp-input, cp-select, cp-pill, cp-btn, cp-empty, cp-pager) + a
 * handful of page-specific rules for the grid columns + expanded detail row.
 * ============================================================================ */

/* Filter bar sits between the header and the table. Wraps gracefully on
   narrow viewports; search takes remaining width via flex:1. */
.cpad-filterbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:18px 0 14px;
}
.cpad-search{flex:1;min-width:220px;}
.cpad-select{min-width:150px;}
.cpad-date{max-width:150px;}
.cpad-refresh{margin-left:auto;}

/* Inline error/info banner directly above the table. */
.cpad-alert{margin-bottom:12px;}

/* Table lives inside cp-table-wrap → we scroll horizontally on narrow screens
   without breaking the row layout. */
.cpad-inner{min-width:780px;}

/* 6-col grid: When | Account | Asset | Amount | Status | chev.
   Widths tuned so account+asset take the middle mass, chev caps to 32px. */
.cpad-grid{
  grid-template-columns:0.9fr 1.4fr 0.9fr 1fr 0.9fr 32px;
}

/* Row cell atoms */
.cpad-when{font:500 12.5px 'Poppins';color:var(--cp-fg-2);}
.cpad-account{min-width:0;display:flex;flex-direction:column;gap:2px;}
.cpad-asset{min-width:0;display:flex;flex-direction:column;gap:2px;}
.cpad-mono{
  font-family:var(--cp-mono);
  font-variant-numeric:tabular-nums;
}

/* Chevron cell — rotates on open, subtle spring feel. */
.cpad-chev span{
  display:inline-flex;color:var(--cp-fg-3);
  transition:transform .2s ease,color .15s;
}
.cpad-chev span.is-open{transform:rotate(180deg);color:var(--cp-fg-2);}

/* Row hover feel + selected-open row keeps a bg to visually attach the
   expanded panel below. */
.cp-trow.clickable{cursor:pointer;transition:background .15s;}
.cp-trow.clickable:hover{background:var(--cp-hover);}
.cp-trow.clickable.open{background:var(--cp-surface2);}

/* Skeleton rows while loading. */
.cpad-skel{height:52px;border-radius:0;margin:0 8px;}

/* --- Expanded detail row ------------------------------------------------- */
.cpad-collap{
  border-top:1px solid var(--cp-border);
  background:var(--cp-surface2);
  animation:cp-kfadeup .18s ease both;
}
.cpad-detail{padding:16px 18px 18px;}
.cpad-detail-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px 22px;
}
@media (max-width:640px){
  .cpad-detail-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:420px){
  .cpad-detail-grid{grid-template-columns:1fr;}
}
.cpad-detail-label{
  font:600 10.5px 'Poppins';
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--cp-fg-3);
  margin-bottom:3px;
}
.cpad-detail-val{
  font:500 12.5px 'Poppins';
  color:var(--cp-fg);
  word-break:break-all;
}
.cpad-detail-h{
  font:600 11px 'Poppins';
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--cp-fg-3);
  margin:16px 0 8px;
}
.cpad-detail-cap{margin-top:12px;line-height:1.55;}

/* Fiat snapshot grid — 4 currencies typically (USD/EUR/GBP/INR). */
.cpad-fiat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:12px 20px;
}
.cpad-fiat-cell{min-width:0;}

/* Webhook attempts sub-table */
.cpad-webhooks-grid{
  grid-template-columns:0.9fr 0.9fr 2fr 0.6fr 0.7fr;
}
.cp-trow.sub{border-top:1px solid var(--cp-border);}
.cp-thead.sub > div{
  font:600 10px 'Poppins';
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--cp-fg-3);
  padding:8px 0;
}
.cpad-truncate{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* ============================================================================
 * wallet.css — page-scoped classes for the Wallet + Wallet coin-detail screens
 * (artifact: isWallet branch 949-1062 + isCoin branch 866-948). Shared by both
 * WalletView.jsx and WalletCoinDetailView.jsx. Pure --cp-* tokens; the cp-kit
 * primitives carry buttons/inputs/pills/modals — these classes only add the
 * page-specific layout (hero, toggle cards, holdings list, coin-settings rows,
 * div-grid column templates). All .cpw- prefixed.
 * ========================================================================== */

/* ---- HERO (big balance + action buttons) ---- */
.cpw-hero{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-bottom:22px;
}
.cpw-amount{font:600 34px 'Poppins';margin:8px 0 0;letter-spacing:-1px;}
.cpw-amount-cents{font-size:20px;color:var(--cp-fg-3);}
.cpw-pending{margin:7px 0 0;color:var(--cp-fg-2);font-size:13.5px;}
.cpw-hero-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.cpw-btn-elev{box-shadow:0 6px 16px rgba(20,22,30,.18);height:42px;padding:0 18px;font-size:13.5px;}

/* ---- TOGGLE CARDS ROW ---- */
.cpw-toggles{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px;}
.cpw-toggle-card{
  flex:1;min-width:250px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--cp-surface);border:1px solid var(--cp-border);
  border-radius:14px;padding:15px 18px;box-shadow:var(--cp-sh-sm);
}
.cpw-toggle-title{font:600 13.5px 'Poppins';}
.cpw-toggle-desc{font:400 12px 'Poppins';color:var(--cp-fg-3);margin-top:2px;}

/* ---- TAB STRIP with trailing refresh ---- */
.cpw-tabs{
  display:flex;align-items:center;gap:26px;
  border-bottom:1px solid var(--cp-border);margin-bottom:24px;
}
.cpw-refresh{
  margin-left:auto;margin-bottom:8px;
  width:34px;height:34px;border-radius:9px;
  border:1px solid var(--cp-border2);background:var(--cp-surface);
  color:var(--cp-fg-2);display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .15s,color .15s;
}
.cpw-refresh:hover{background:var(--cp-hover);color:var(--cp-fg);}
.cpw-refresh:disabled{opacity:.6;cursor:not-allowed;}
.cpw-refresh.spin svg{animation:cpw-spin .8s linear infinite;}
@keyframes cpw-spin{to{transform:rotate(360deg);}}

/* ---- SECTION HEAD (uppercase label + meta) ---- */
.cpw-sec-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin:0 0 12px;
}
.cpw-sec-head.mt{margin-top:34px;}
.cpw-sec-label{
  font:700 11px 'Poppins';letter-spacing:.08em;text-transform:uppercase;
  color:var(--cp-fg-2);
}
.cpw-sec-meta{font:500 12px 'Poppins';color:var(--cp-fg-3);}

/* ---- DEPOSIT ADDRESS 2-COL ---- */
.cpw-addr-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:32px;}
@media (max-width:760px){.cpw-addr-grid{grid-template-columns:1fr;}}
.cpw-addr-label{display:block;font:600 12px 'Poppins';color:var(--cp-fg-2);margin-bottom:7px;}

/* ---- HOLDINGS LIST ---- */
.cpw-hold-row{
  display:flex;align-items:center;gap:13px;
  padding:13px 0;border-top:1px solid var(--cp-border);
}
.cpw-hold-icon{display:inline-flex;flex:none;}
.cpw-hold-meta{min-width:0;flex:1;}
.cpw-hold-sym{font:600 13.5px 'Poppins';display:flex;align-items:center;gap:8px;}
.cpw-hold-sub{font:400 11.5px 'Poppins';color:var(--cp-fg-3);margin-top:3px;}
.cpw-hold-amt{text-align:right;}
.cpw-hold-usd{font:600 13.5px 'Poppins';}
.cpw-hold-state{font:400 11px 'Poppins';color:var(--cp-fg-3);}
.cpw-hold-manage{
  height:34px;padding:0 14px;border-radius:9px;
  border:1px solid var(--cp-border2);background:var(--cp-surface);
  color:var(--cp-fg);font:600 12px 'Poppins';cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;flex:none;transition:background .15s;
}
.cpw-hold-manage:hover{background:var(--cp-hover);}

/* Phase 31 — per-row action cluster (Deposit / Payout / Manage) */
.cpw-hold-actions{
  display:flex;align-items:center;gap:6px;flex:none;
}
.cpw-hold-btn{
  height:34px;padding:0 12px;border-radius:9px;
  font:600 12px 'Poppins';cursor:pointer;
  display:inline-flex;align-items:center;
  border:1px solid var(--cp-border2);
  transition:background .15s, color .15s, border-color .15s;
}
.cpw-hold-btn:disabled{opacity:.55;cursor:not-allowed;}
.cpw-hold-btn-primary{
  background:var(--cp-accent);color:#fff;border-color:var(--cp-accent);
}
.cpw-hold-btn-primary:hover:not(:disabled){filter:brightness(1.06);}
.cpw-hold-btn-ghost{
  background:var(--cp-surface);color:var(--cp-fg);
}
.cpw-hold-btn-ghost:hover:not(:disabled){background:var(--cp-hover);}

/* Phase 31 — Deposit modal (QR + address) */
.cpw-dep-qrwrap{
  display:flex;justify-content:center;padding:8px 0 4px;
}
.cpw-dep-qr{
  padding:12px;border-radius:12px;background:#fff;
  border:1px solid var(--cp-border);
  display:inline-flex;
}
.cpw-dep-addr code{
  font:500 12px 'JetBrains Mono', ui-monospace, monospace;
  word-break:break-all;
}
.cpw-dep-note{
  margin-top:12px;padding:10px 12px;
  border-radius:10px;border:1px solid var(--cp-border);
  background:var(--cp-surface2, rgba(0,0,0,.02));
  font:400 12px 'Poppins';color:var(--cp-fg-2);
  line-height:1.5;
}
.cpw-dep-note strong{color:var(--cp-fg);font-weight:600;}

/* ---- DIV-GRID TABLES (balances / transactions / credit history) ---- */
.cpw-table-min{min-width:560px;}
.cpw-bal-grid{grid-template-columns:1fr 1.4fr 1fr 1fr 1fr;}
.cpw-tx-grid{grid-template-columns:1fr 1.1fr 1.5fr 1fr 1.2fr;}
.cpw-credit-grid{grid-template-columns:1.2fr 1fr 1fr 1.1fr 1fr;}
.cpw-coin{display:flex;align-items:center;gap:8px;}
.cpw-coin-name{font:600 12.5px 'Poppins';}
.cpw-tx-date{font:600 12.5px 'Poppins';}
.cpw-tx-time{font:400 11px 'Poppins';color:var(--cp-fg-3);}
.cpw-tx-type{font:500 12.5px 'Poppins';color:var(--cp-fg-2);text-transform:capitalize;}
.cpw-tx-ref{font:400 11px var(--cp-mono);color:var(--cp-fg-3);margin-top:3px;}
.cpw-amt-strong{font:600 12.5px 'Poppins';}
.cpw-amt-muted{color:var(--cp-fg-3);}
.cpw-kind-chip{
  font:600 11px 'Poppins';color:var(--cp-fg-2);background:var(--cp-hover);
  padding:3px 9px;border-radius:20px;text-transform:capitalize;display:inline-block;
}
.cpw-pos{color:var(--cp-pos);}
.cpw-neg{color:var(--cp-neg);}

/* ---- READONLY (available inside modal field) ---- */
.cpw-readonly{
  height:42px;display:flex;align-items:center;padding:0 14px;
  border-radius:10px;background:var(--cp-surface2);
  font:500 13.5px 'Poppins';color:var(--cp-fg-2);
}
.cpw-readonly strong{color:var(--cp-fg);font-weight:600;}

/* ---- CREDIT CARD ---- */
.cpw-credit-card{
  background:var(--cp-lav50);border:1px solid var(--cp-accent-soft2);
  border-radius:18px;padding:24px;margin-bottom:30px;max-width:420px;
}
.cpw-credit-eyebrow{
  font:700 10.5px 'Poppins';letter-spacing:.12em;text-transform:uppercase;
  color:var(--cp-accent);
}
.cpw-credit-big{font:600 38px/1 var(--cp-mono);letter-spacing:-1px;margin:12px 0 8px;}
.cpw-credit-note{font:400 12.5px/1.6 'Poppins';color:var(--cp-fg-2);}

/* ---- ALERT (not provisioned) ---- */
.cpw-alert{
  padding:12px 14px;border-radius:11px;margin-bottom:22px;
  background:var(--cp-warn-soft);color:var(--cp-warn);
  font:500 12.5px/1.55 'Poppins';
}

/* ============================================================================
 * COIN DETAIL (isCoin branch)
 * ========================================================================== */
.cpw-coin-hero{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-bottom:26px;
}
.cpw-coin-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font:700 11px 'Poppins';letter-spacing:.1em;text-transform:uppercase;
  color:var(--cp-accent);
}
.cpw-coin-amount{font:600 32px 'Poppins';margin:8px 0 0;letter-spacing:-1px;}
.cpw-coin-amount-sym{font-size:18px;color:var(--cp-fg-3);}
.cpw-coin-sub{margin:7px 0 0;color:var(--cp-fg-2);font-size:13.5px;}

/* deposit + qr 2-col */
.cpw-deposit-grid{
  display:grid;grid-template-columns:1.5fr 1fr;gap:30px;
  align-items:start;margin-bottom:36px;
}
@media (max-width:760px){.cpw-deposit-grid{grid-template-columns:1fr;}}
.cpw-deposit-left{min-width:0;}
.cpw-deposit-cap{font:400 12.5px 'Poppins';color:var(--cp-fg-3);margin-bottom:13px;}
.cpw-deposit-warn{font:400 11.5px 'Poppins';color:var(--cp-fg-3);margin-top:11px;}
.cpw-deposit-meta{
  display:flex;align-items:center;gap:8px;margin-bottom:12px;
  font:600 13px 'Poppins';
}
.cpw-qr-wrap{display:flex;justify-content:center;}
.cpw-qr{
  padding:14px;background:#fff;border:1px solid var(--cp-border2);
  border-radius:16px;box-shadow:var(--cp-sh-sm);
}

/* coin-settings header row (label + save) */
.cpw-settings-bar{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:14px;margin-bottom:4px;flex-wrap:wrap;
}
.cpw-settings-title{
  font:700 11px 'Poppins';letter-spacing:.08em;text-transform:uppercase;
  color:var(--cp-fg-2);
}
.cpw-settings-cap{font:400 12.5px 'Poppins';color:var(--cp-fg-3);margin-top:4px;}

/* settings rows */
.cpw-setrows{margin-bottom:36px;}
.cpw-setrow{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:16px 0;border-top:1px solid var(--cp-border);flex-wrap:wrap;
}
.cpw-setrow.top{align-items:flex-start;}
.cpw-setrow.dimmed{opacity:.45;pointer-events:none;}
.cpw-setrow-l{min-width:0;}
.cpw-setrow-k{font:600 13.5px 'Poppins';}
.cpw-setrow-h{font:400 12px 'Poppins';color:var(--cp-fg-3);margin-top:2px;}
.cpw-setrow-r{display:flex;flex-direction:column;gap:10px;align-items:flex-end;}

/* percent / number input box */
.cpw-numbox{
  display:flex;align-items:center;overflow:hidden;width:120px;
  border:1px solid var(--cp-border2);background:var(--cp-surface2);border-radius:10px;
}
.cpw-numbox.wide{width:auto;min-width:200px;}
.cpw-numbox input{
  flex:1;min-width:0;height:40px;border:none;background:none;outline:none;
  padding:0 12px;font:600 14px 'Poppins';color:var(--cp-fg);
}
.cpw-numbox-suffix{
  padding:0 12px;color:var(--cp-fg-3);font:600 13px 'Poppins';
  border-left:1px solid var(--cp-border);
}
.cpw-custom-addr{
  width:280px;max-width:60vw;height:40px;padding:0 13px;border-radius:10px;
  border:1px solid var(--cp-border2);background:var(--cp-surface2);
  color:var(--cp-fg);font:400 12px var(--cp-mono);outline:none;
}
.cpw-custom-addr:focus{border-color:var(--cp-accent);}

/* policy / segmented choice buttons */
.cpw-choices{display:flex;gap:8px;flex-wrap:wrap;}

/* coin-detail transactions table */
.cpw-ctx-grid{grid-template-columns:1.2fr 1.1fr 1fr 1.3fr 1.3fr;}
.cpw-ctx-min{min-width:560px;}

/* withdraw-modal 2FA helper row */
.cpw-2fa-help{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font:400 11px 'Poppins';color:var(--cp-fg-3);margin-top:8px;flex-wrap:wrap;
}
.cpw-2fa-error{color:var(--cp-neg);font:400 12.5px 'Poppins';margin-bottom:14px;}
.cpw-modal-actions{display:flex;gap:10px;justify-content:flex-end;}
/* ============================================================================
 * Phase 29 — Custom Tokens page styles. Uses cp-kit primitives — only a
 * few page-specific rules for the grid columns + form layout.
 * ============================================================================ */

.ct-actionbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:20px 0 16px;
}

.ct-form{
  background:var(--cp-surface);
  border:1px solid var(--cp-border);
  border-radius:18px;
  padding:24px;
  margin-bottom:24px;
  box-shadow:var(--cp-sh-sm);
  display:flex;flex-direction:column;gap:14px;
}
.ct-form-actions{
  display:flex;justify-content:flex-end;gap:10px;
  padding-top:6px;
}

/* Table */
.ct-inner{min-width:720px;}
.ct-grid{
  grid-template-columns:1fr 1.4fr 0.7fr 1.4fr 1fr 0.6fr;
}
.ct-mono{
  font-family:var(--cp-mono);
  font-variant-numeric:tabular-nums;
}
/* ============================================================================
 * Phase 30 — Onboarding wizard styles. Full-screen centered card;
 * intentionally light chrome so the merchant focuses on the one question
 * per step. Uses cp-* primitives for buttons + inputs.
 * ============================================================================ */

.cp-onb-wrap{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:40px 16px;
  background:var(--cp-bg-grad);
}
.cp-onb-card{
  width:100%;max-width:560px;
  background:var(--cp-surface);
  border:1px solid var(--cp-border);
  border-radius:20px;
  box-shadow:var(--cp-sh-lg);
  padding:36px;
  animation:cp-kfadeup .35s ease both;
}

.cp-onb-brand{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:20px;
  flex-wrap:wrap;gap:12px;
}
.cp-onb-progress{
  display:flex;align-items:center;gap:8px;
}
.cp-onb-dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--cp-border2);
  transition:background .18s;
}
.cp-onb-dot.on{background:var(--cp-accent);}
.cp-onb-progress-text{
  font:500 11.5px 'Poppins';color:var(--cp-fg-3);
  margin-left:6px;
}

.cp-onb-actions{
  margin-top:22px;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
}

.cp-onb-choices{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px;
  margin-top:6px;
}
.cp-onb-choice{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:16px 12px;
  border-radius:14px;
  border:1px solid var(--cp-border2);
  background:var(--cp-surface2);
  cursor:pointer;
  transition:border-color .15s,background .15s,transform .12s;
  font:600 12.5px 'Poppins';color:var(--cp-fg);
}
.cp-onb-choice:hover{border-color:var(--cp-border); background:var(--cp-hover);}
.cp-onb-choice.on{
  border-color:var(--cp-accent);
  background:var(--cp-accent-soft);
  transform:translateY(-1px);
}
.cp-onb-choice-ic{font-size:22px;line-height:1;}
.cp-onb-choice-lbl{text-align:center;}

.cp-onb-fine{
  margin-top:22px;
  color:var(--cp-fg-3);font-size:11.5px;text-align:center;
}
.cp-onb-fine a{color:var(--cp-accent);}
/* Tracker + Webhook detail — page-scoped classes (artifact: isTracker branch
 * lines 588-630 + trCreate/trCreds modals). Composes cp-* kit primitives; only
 * grid-template-columns and a few one-off bits live here. Tokens = --cp-*. */

/* ── KPI strip (4 small stat cards, like Payments) ── */
.cpt-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px;}
.cpt-stat{
  background:var(--cp-surface);border:1px solid var(--cp-border);
  border-radius:16px;box-shadow:var(--cp-sh-sm);padding:16px 18px;
}
.cpt-stat-l{font:500 12px 'Poppins';color:var(--cp-fg-3);margin-bottom:8px;}
.cpt-stat-v{font:600 24px 'Poppins';}
.cpt-stat-v.accent{color:var(--cp-accent);}
.cpt-stat-sub{font:400 11px 'Poppins';color:var(--cp-fg-3);margin-top:5px;}
@media (max-width:760px){.cpt-stats{grid-template-columns:repeat(2,1fr);}}

/* ── webhooks table ── */
.cpt-inner{min-width:700px;}
.cpt-grid{grid-template-columns:1.9fr 0.9fr 0.9fr 0.7fr 0.8fr 0.6fr;}
.cpt-name{font:600 12.5px 'Poppins';overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cpt-url{
  font:400 11px 'Poppins';color:var(--cp-fg-3);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cpt-cells-of{color:var(--cp-fg-3);font-weight:400;}
.cpt-open{font:600 12px 'Poppins';color:var(--cp-accent);}

/* status pill with leading dot (matches artifact Active/Paused) */
.cpt-status{
  display:inline-flex;align-items:center;gap:6px;
  font:600 11px 'Poppins';padding:4px 10px;border-radius:20px;
}
.cpt-status i{width:6px;height:6px;border-radius:50%;background:currentColor;display:block;flex:none;}
.cpt-status.on{color:var(--cp-pos);background:var(--cp-pos-soft);}
.cpt-status.off{color:var(--cp-fg-2);background:var(--cp-hover);}

/* ── webhook detail: header meta row ── */
.cpt-meta{display:inline-flex;align-items:center;gap:12px;margin-top:6px;}

/* detail section card */
.cpt-sec{
  background:var(--cp-surface);border:1px solid var(--cp-border);
  border-radius:16px;box-shadow:var(--cp-sh-sm);padding:20px 22px;margin-bottom:18px;
}
.cpt-sec-h{margin-bottom:16px;}
.cpt-sec-t{font:600 15px 'Poppins';}
.cpt-sec-d{font:400 12px 'Poppins';color:var(--cp-fg-3);margin-top:3px;}

/* identity key/value rows */
.cpt-frow{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 0;border-top:1px solid var(--cp-border);
}
.cpt-frow:first-of-type{border-top:none;}
.cpt-fk{font:600 12.5px 'Poppins';}
.cpt-fh{font:400 11.5px 'Poppins';color:var(--cp-fg-3);margin-top:2px;}
.cpt-fv{font:500 12.5px var(--cp-mono);text-align:right;display:flex;align-items:center;gap:12px;}

/* address/tx sub-head with count + action */
.cpt-subhead{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;margin-bottom:14px;flex-wrap:wrap;
}
.cpt-subhead-t{font:600 11px 'Poppins';letter-spacing:.05em;text-transform:uppercase;color:var(--cp-fg-2);}
.cpt-subhead-t .n{color:var(--cp-fg-3);font-weight:500;margin-left:8px;}

/* search field */
.cpt-search{
  display:flex;align-items:center;gap:10px;max-width:420px;margin-bottom:16px;
  background:var(--cp-surface2);border:1px solid var(--cp-border2);
  border-radius:10px;padding:0 8px 0 14px;height:42px;
  transition:border-color .15s,background .15s;
}
.cpt-search:focus-within{border-color:var(--cp-accent);background:var(--cp-surface);}
.cpt-search-ic{color:var(--cp-fg-3);display:inline-flex;flex:none;}
.cpt-search input{flex:1;min-width:0;border:none;background:none;outline:none;font:400 13.5px 'Poppins';color:var(--cp-fg);}
.cpt-search input::placeholder{color:var(--cp-fg-3);}

/* address grid */
.cpt-addr-inner{min-width:560px;}
.cpt-addr-grid{grid-template-columns:1.8fr 1.1fr 0.8fr 0.5fr;}
.cpt-addr-mono{font:500 12.5px var(--cp-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cpt-muted{color:var(--cp-fg-3);}

/* tx grid */
.cpt-tx-inner{min-width:720px;}
.cpt-tx-grid{grid-template-columns:1.2fr 1.1fr 1.4fr 0.9fr 0.8fr 1fr;}
.cpt-tx-asset{display:inline-flex;align-items:center;gap:9px;}
.cpt-tx-when{font:400 11.5px 'Poppins';color:var(--cp-fg-3);}

/* textarea (bulk address paste) */
.cpt-textarea{font-family:var(--cp-mono);font-size:13px;min-height:120px;}

/* credentials warning value blocks */
.cpt-cred{
  display:flex;align-items:flex-start;gap:10px;
  background:var(--cp-surface2);border:1px solid var(--cp-border);
  border-radius:11px;padding:11px 14px;
}
.cpt-cred code{flex:1;min-width:0;font:500 12px 'Poppins';color:var(--cp-fg-2);word-break:break-all;}
.cpt-cred.one code{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:normal;}
.cpt-cred-copy{border:none;background:none;color:var(--cp-fg-3);cursor:pointer;display:inline-flex;flex:none;transition:color .15s;}
.cpt-cred-copy:hover{color:var(--cp-accent);}
.cpt-cred-help{font:400 11.5px 'Poppins';color:var(--cp-fg-3);margin-top:7px;}
.cpt-cred-help.neg{color:var(--cp-neg);}
/* ============================================================================
 * account.css — shared page styles for Profile (Business profile) and
 * Security & KYC. Rebuilt from Cryptrum Pay.dc.html (PROFILE branch 344-383,
 * SECURITY branch 384-432). Both views import this file.
 *
 * Layout: a 210px left sub-nav beside a stacked main column of cards. Cards
 * use the artifact's "label/desc on the left, value or control on the right"
 * divider-row pattern. All colors via --cp-* tokens; .cpac- prefix only.
 * ========================================================================== */

/* -------------------------------------------------------------------
 * SHELL — 210px sub-nav + main column. Collapses on narrow.
 * ------------------------------------------------------------------- */
.cpac-shell{
  display:grid;
  grid-template-columns:210px 1fr;
  gap:30px;
  align-items:start;
}
@media (max-width:820px){
  .cpac-shell{grid-template-columns:1fr;gap:18px;}
}

/* left sub-nav */
.cpac-nav{display:flex;flex-direction:column;gap:4px;}
@media (max-width:820px){
  .cpac-nav{flex-direction:row;flex-wrap:wrap;}
}
.cpac-nav-item{
  display:flex;align-items:center;gap:11px;
  width:100%;
  padding:10px 13px;
  border:none;border-radius:11px;
  background:transparent;
  color:var(--cp-fg-2);
  font:500 13px 'Poppins';
  text-decoration:none;
  cursor:pointer;
  transition:background .15s,color .15s;
}
.cpac-nav-item:hover{background:var(--cp-hover);color:var(--cp-fg);}
.cpac-nav-item.on{
  background:var(--cp-accent-soft);
  color:var(--cp-accent);
  font-weight:600;
}
.cpac-nav-ic{
  display:inline-flex;align-items:center;justify-content:center;
  flex:none;
}
.cpac-nav-ic svg{width:17px;height:17px;}

/* main column */
.cpac-main{display:flex;flex-direction:column;gap:18px;min-width:0;}

/* -------------------------------------------------------------------
 * CARD — section panel with header + divider rows.
 * ------------------------------------------------------------------- */
.cpac-card{
  background:var(--cp-surface);
  border:1px solid var(--cp-border);
  border-radius:18px;
  box-shadow:var(--cp-sh-sm);
  padding:4px 24px 20px;
}

.cpac-card-hd{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;
  padding:18px 0 4px;
}
.cpac-card-hd-text{min-width:0;}
.cpac-card-title{font:600 15px 'Poppins';}
.cpac-card-desc{font:400 12.5px 'Poppins';color:var(--cp-fg-3);margin-top:3px;}
.cpac-card-hd-actions{display:flex;gap:8px;flex:none;}

/* -------------------------------------------------------------------
 * ROW — label/desc (left) + value or control (right), divider on top.
 * ------------------------------------------------------------------- */
.cpac-rows{display:block;}
.cpac-row{
  display:flex;gap:16px;
  align-items:center;justify-content:space-between;
  padding:15px 0;
  border-top:1px solid var(--cp-border);
  flex-wrap:wrap;
}
.cpac-row-l{min-width:0;}
.cpac-row-k{font:600 13px 'Poppins';}
.cpac-row-h{font:400 12px 'Poppins';color:var(--cp-fg-3);margin-top:2px;}

.cpac-row-v{
  display:flex;align-items:center;gap:10px;
  flex-wrap:wrap;justify-content:flex-end;
}
.cpac-row-val{font:600 13.5px 'Poppins';}
.cpac-row-soft{font:500 13px 'Poppins';color:var(--cp-fg-2);}
.cpac-row-empty{font:500 13px 'Poppins';color:var(--cp-fg-3);}
.cpac-mono{font-family:var(--cp-mono);font-variant-numeric:tabular-nums;font-weight:600;font-size:13px;}

/* -------------------------------------------------------------------
 * INPUTS — divider-row inline inputs (narrow, right-aligned).
 * ------------------------------------------------------------------- */
.cpac-input,
.cpac-select{
  width:240px;max-width:100%;height:42px;
  padding:0 13px;
  border-radius:10px;
  border:1px solid var(--cp-border2);
  background:var(--cp-surface2);
  color:var(--cp-fg);
  font:500 13px 'Poppins';
  outline:none;
  transition:border-color .15s,background .15s;
}
.cpac-input:focus,
.cpac-select:focus{border-color:var(--cp-accent);background:var(--cp-surface);}
.cpac-input::placeholder{color:var(--cp-fg-3);}
.cpac-input-sm{width:170px;}
.cpac-input-code{
  width:120px;
  font:600 14px 'Poppins';letter-spacing:2px;
}
.cpac-input-wrap{position:relative;display:inline-flex;align-items:center;}
.cpac-input-wrap .cpac-input{width:240px;}

/* password field with eye toggle */
.cpac-eye{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border-radius:8px;
  border:none;background:transparent;color:var(--cp-fg-3);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.cpac-eye:hover{color:var(--cp-fg);}
.cpac-eye svg{width:16px;height:16px;}
.cpac-input-wrap .cpac-input{padding-right:40px;}

/* select chevron */
.cpac-select{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;}
.cpac-select-chev{
  position:absolute;right:11px;top:50%;transform:translateY(-50%);
  pointer-events:none;color:var(--cp-fg-3);
  display:inline-flex;
}
.cpac-select-chev svg{width:15px;height:15px;}

/* error state */
.cpac-input-err .cpac-input{border-color:var(--cp-neg);}
.cpac-err-msg{
  width:100%;text-align:right;
  font:500 11.5px 'Poppins';color:var(--cp-neg);margin-top:6px;
}

/* -------------------------------------------------------------------
 * BUTTONS — divider-row inline buttons.
 * ------------------------------------------------------------------- */
.cpac-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:42px;padding:0 16px;
  border:none;border-radius:10px;
  background:var(--cp-accent);color:var(--cp-accent-fg);
  font:600 13px 'Poppins';cursor:pointer;white-space:nowrap;
  text-decoration:none;
  transition:background .15s,opacity .15s;
}
.cpac-btn:hover{background:var(--cp-accent-press);}
.cpac-btn:disabled{opacity:.55;cursor:not-allowed;}
.cpac-btn-sm{height:36px;padding:0 16px;border-radius:9px;font-size:12.5px;}

.cpac-btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:42px;padding:0 16px;
  border:1px solid var(--cp-border2);border-radius:10px;
  background:var(--cp-surface);color:var(--cp-fg);
  font:600 13px 'Poppins';cursor:pointer;white-space:nowrap;
  text-decoration:none;
  transition:background .15s,border-color .15s;
}
.cpac-btn-ghost:hover{background:var(--cp-hover);}
.cpac-btn-ghost:disabled{opacity:.55;cursor:not-allowed;}
.cpac-btn-ghost.cpac-btn-sm{height:36px;padding:0 16px;border-radius:9px;font-size:12.5px;}
.cpac-btn-danger{color:var(--cp-neg);}
.cpac-btn-danger:hover{background:var(--cp-neg-soft);}

/* small copy button (merchant id) */
.cpac-copy-btn{
  display:inline-flex;align-items:center;gap:5px;
  height:30px;padding:0 11px;border-radius:8px;
  background:var(--cp-surface);border:1px solid var(--cp-border2);
  color:var(--cp-fg-2);font:600 11.5px 'Poppins';cursor:pointer;
  transition:color .15s,background .15s;
}
.cpac-copy-btn:hover{color:var(--cp-fg);background:var(--cp-hover);}
.cpac-copy-btn svg{width:13px;height:13px;}

/* a right-side control cluster (input + button) */
.cpac-ctrl{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  justify-content:flex-end;
}

/* footer action row at the bottom of a form */
.cpac-foot{
  display:flex;align-items:center;gap:12px;
  padding:16px 0 0;flex-wrap:wrap;
}

/* -------------------------------------------------------------------
 * PILLS — verified / status chips.
 * ------------------------------------------------------------------- */
.cpac-pill{
  font:600 11px 'Poppins';
  padding:4px 11px;border-radius:20px;
  display:inline-block;white-space:nowrap;
}
.cpac-pill.ok  {color:var(--cp-pos); background:var(--cp-pos-soft);}
.cpac-pill.pend{color:var(--cp-warn);background:var(--cp-warn-soft);}
.cpac-pill.fail{color:var(--cp-neg); background:var(--cp-neg-soft);}
.cpac-pill.info{color:var(--cp-info);background:var(--cp-info-soft);}

/* read-only "static" toggle pip (2FA active) */
.cpac-switch-static{
  width:42px;height:25px;border-radius:20px;flex:none;
  background:var(--cp-accent);position:relative;display:inline-block;
}
.cpac-switch-static::after{
  content:"";position:absolute;top:3px;left:20px;
  width:19px;height:19px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}

/* -------------------------------------------------------------------
 * KYC — alert + uploaded-documents div-grid.
 * ------------------------------------------------------------------- */
.cpac-kyc-alert{
  display:flex;align-items:flex-start;gap:9px;
  margin-top:14px;
  padding:11px 14px;border-radius:11px;
  background:var(--cp-neg-soft);color:var(--cp-neg);
  font:500 12.5px/1.55 'Poppins';
}
.cpac-kyc-alert svg{flex:none;margin-top:1px;}

.cpac-upload-hint{
  font:400 11.5px 'Poppins';color:var(--cp-fg-3);
  max-width:280px;text-align:right;
}
.cpac-fileinput{display:none;}

.cpac-docs{margin-top:18px;}
.cpac-docs-head{
  display:flex;align-items:center;gap:8px;margin-bottom:6px;
}
.cpac-docs-label{
  font:600 10.5px 'Poppins';letter-spacing:.05em;text-transform:uppercase;
  color:var(--cp-fg-3);
}
.cpac-docs-count{
  font:600 11px 'Poppins';color:var(--cp-fg-2);
  font-variant-numeric:tabular-nums;
}

.cpac-docgrid{display:block;}
.cpac-docgrid-head,
.cpac-docrow{
  display:grid;
  grid-template-columns:1fr 1.6fr 0.7fr 1.1fr;
  align-items:center;
  padding:0 2px;
}
.cpac-docgrid-head > div{
  font:600 10px 'Poppins';text-transform:uppercase;letter-spacing:.05em;
  color:var(--cp-fg-3);padding:9px 0;
}
.cpac-docrow{border-top:1px solid var(--cp-border);}
.cpac-docrow > div{padding:11px 0;min-width:0;}
.cpac-r{text-align:right;}

.cpac-dtype .cpac-pill{
  color:var(--cp-accent);background:var(--cp-accent-soft);
  font-size:11px;padding:3px 9px;
}
.cpac-dfile{display:flex;align-items:center;gap:9px;min-width:0;}
.cpac-dficon{
  width:30px;height:30px;border-radius:8px;flex:none;
  background:var(--cp-surface2);color:var(--cp-fg-2);
  display:inline-flex;align-items:center;justify-content:center;
}
.cpac-dfmeta{min-width:0;}
.cpac-dfname{
  font:500 12.5px 'Poppins';
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cpac-dfext{font:600 10px 'Poppins';color:var(--cp-fg-3);font-variant-numeric:tabular-nums;}

.cpac-empty{
  display:flex;align-items:center;gap:12px;
  margin-top:14px;padding:16px;
  border:1px dashed var(--cp-border2);border-radius:12px;
  color:var(--cp-fg-3);
}
.cpac-empty-ic{
  width:38px;height:38px;border-radius:11px;flex:none;
  background:var(--cp-surface2);color:var(--cp-fg-3);
  display:inline-flex;align-items:center;justify-content:center;
}
.cpac-empty-t{font:600 13px 'Poppins';color:var(--cp-fg-2);}
.cpac-empty-d{font:400 12px 'Poppins';color:var(--cp-fg-3);margin-top:2px;}

/* -------------------------------------------------------------------
 * ACTIVE SESSIONS — icon + meta + revoke, divider rows.
 * ------------------------------------------------------------------- */
.cpac-sess{display:block;}
.cpac-sess-row{
  display:flex;align-items:center;gap:14px;
  padding:14px 0;border-top:1px solid var(--cp-border);
}
.cpac-sess-ic{
  width:38px;height:38px;border-radius:11px;flex:none;
  background:var(--cp-accent-soft);color:var(--cp-accent);
  display:inline-flex;align-items:center;justify-content:center;
}
.cpac-sess-meta{flex:1;min-width:0;}
.cpac-sess-name{
  font:600 13px 'Poppins';
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
}
.cpac-sess-sub{font:400 11.5px 'Poppins';color:var(--cp-fg-3);margin-top:2px;}
.cpac-sess-revoke{
  height:34px;padding:0 13px;border-radius:9px;flex:none;
  background:var(--cp-surface);border:1px solid var(--cp-border2);
  color:var(--cp-fg-2);font:600 12px 'Poppins';cursor:pointer;
  transition:color .15s,background .15s;
}
.cpac-sess-revoke:hover{color:var(--cp-neg);background:var(--cp-neg-soft);}
.cpac-sess-revoke:disabled{opacity:.55;cursor:not-allowed;}
.cpac-sess-empty{
  padding:18px 2px;color:var(--cp-fg-3);font-size:13px;
  border-top:1px solid var(--cp-border);line-height:1.6;
}

/* -------------------------------------------------------------------
 * MODAL — 2FA setup + recovery codes.
 * ------------------------------------------------------------------- */
.cpac-rec-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.cpac-rec-code{
  padding:10px 14px;background:var(--cp-surface2);border-radius:10px;
  font:600 13px var(--cp-mono);font-variant-numeric:tabular-nums;
}
.cpac-qr-wrap{display:flex;justify-content:center;padding:8px 0 18px;}
.cpac-qr{padding:12px;background:#fff;border-radius:14px;border:1px solid var(--cp-border);}
.cpac-modal-p{margin:0 0 16px;font-size:13.5px;color:var(--cp-fg-2);line-height:1.6;}
.cpac-modal-code{
  width:100%;background:transparent;border:0;outline:none;
  font:600 18px var(--cp-mono);letter-spacing:4px;color:var(--cp-fg);
}
.cpac-secret-row{
  display:flex;align-items:center;gap:8px;
  background:var(--cp-surface2);border:1px solid var(--cp-border);
  border-radius:10px;padding:0 8px 0 14px;height:46px;
}
.cpac-secret-row code{
  flex:1;min-width:0;font:400 12px var(--cp-mono);color:var(--cp-fg);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cpac-icon-btn{
  width:32px;height:32px;border-radius:9px;flex:none;
  border:none;background:var(--cp-hover);color:var(--cp-fg-2);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}
.cpac-icon-btn:hover{color:var(--cp-fg);}
.cpac-modal-foot{
  display:flex;align-items:center;justify-content:flex-end;gap:10px;
}

/* card entrance stagger */
.cpac-anim{animation:cp-kfadeup .5s ease both;}
.cpac-d1{animation-delay:.02s;}
.cpac-d2{animation-delay:.08s;}
.cpac-d3{animation-delay:.14s;}
.cpac-d4{animation-delay:.20s;}

/* ============================================================================
 * Phase 30 additions — personal identity form + per-doc status pills
 * ========================================================================== */
.cpac-sec-label{
  font:700 10.5px 'Poppins'; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cp-fg-3); padding:14px 0 8px; margin-top:6px;
  border-top:1px solid var(--cp-border);
}
.cpac-row-v-col{display:flex; flex-direction:column; gap:8px; width:100%;}
.cpac-row-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px;}

/* Info alert variant (paired with existing .cpac-kyc-alert which is red-toned) */
.cpac-kyc-alert-info{
  background:var(--cp-info-soft);
  color:var(--cp-info);
  border-color:var(--cp-info-soft);
}

/* Extended pill tones for per-doc status (info=pending, success, danger, muted) */
.cpac-pill-info   {color:var(--cp-info); background:var(--cp-info-soft);}
.cpac-pill-success{color:var(--cp-pos);  background:var(--cp-pos-soft);}
.cpac-pill-danger {color:var(--cp-neg);  background:var(--cp-neg-soft);}
.cpac-pill-muted  {color:var(--cp-fg-3); background:var(--cp-hover);}

/* Doc-row rejection reason (inline red text under the file name) */
.cpac-dfrej{
  font:500 11px 'Poppins';color:var(--cp-neg);margin-top:2px;
}

/* Adjust the doc-grid template so status + action columns line up */
.cpac-docgrid-head,
.cpac-docrow{
  grid-template-columns: 130px 1fr 100px 140px 100px;
}
@media (max-width: 720px) {
  .cpac-docgrid-head, .cpac-docrow{
    grid-template-columns: 1fr;
  }
  .cpac-row-grid{grid-template-columns:1fr;}
}
/* ============================================================================
 * kyc.css — Dedicated KYC page (Phase 30). Two-column layout on desktop
 * (personal identity on the left, documents on the right). Uses the cp-*
 * design tokens from the app theme.
 * ============================================================================ */

.cp-kyc-status {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--cp-border);
  border-radius: 14px;
  background: var(--cp-surface);
  margin-bottom: 14px;
}
.cp-kyc-status-l { display: flex; align-items: center; gap: 12px; }
.cp-kyc-status-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--cp-fg-3);
  box-shadow: 0 0 0 4px var(--cp-surface-2, rgba(0,0,0,.04));
}
.cp-kyc-status-dot.ok   { background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.15); }
.cp-kyc-status-dot.pend { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,.15); }
.cp-kyc-status-dot.fail { background: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.15); }
.cp-kyc-status-t {
  font: 600 12.5px 'Poppins', sans-serif; color: var(--cp-fg);
}
.cp-kyc-status-h {
  font: 400 12.5px 'Poppins', sans-serif; color: var(--cp-fg-2);
}

.cp-kyc-alert {
  padding: 11px 14px;
  border: 1px solid var(--cp-border);
  background: var(--cp-surface-2, rgba(0,0,0,.02));
  border-radius: 12px;
  font: 500 12.5px 'Poppins', sans-serif;
  color: var(--cp-fg-2);
  margin-bottom: 12px;
}
.cp-kyc-alert strong { color: var(--cp-fg); font-weight: 600; }
.cp-kyc-alert-danger {
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.06);
}

.cp-kyc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) {
  .cp-kyc-grid { grid-template-columns: 1fr; }
}

.cp-kyc-card {
  background: var(--cp-surface);
  border: 1px solid var(--cp-border);
  border-radius: 16px;
  padding: 18px 20px 20px;
}
.cp-kyc-card-hd { margin-bottom: 14px; }
.cp-kyc-card-t {
  font: 600 14px 'Poppins', sans-serif; color: var(--cp-fg);
}
.cp-kyc-card-h {
  font: 400 12.5px 'Poppins', sans-serif; color: var(--cp-fg-2);
  margin-top: 2px;
}

.cp-kyc-form { display: flex; flex-direction: column; gap: 12px; }
.cp-kyc-sec-lbl {
  margin-top: 6px;
  font: 600 10.5px 'Poppins', sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cp-fg-3);
}
.cp-kyc-actions {
  margin-top: 4px;
  display: flex; justify-content: flex-end;
}

/* ── documents list ── */
.cp-kyc-docs-hd {
  margin-top: 20px;
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--cp-border);
}
.cp-kyc-docs-label {
  font: 600 10.5px 'Poppins', sans-serif;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--cp-fg-3);
}
.cp-kyc-docs-count {
  font: 600 11px 'Poppins', sans-serif;
  color: var(--cp-fg-2);
  padding: 1px 8px;
  background: var(--cp-surface-2, rgba(0,0,0,.04));
  border-radius: 999px;
}

.cp-kyc-doclist {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 10px;
}
.cp-kyc-doc {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--cp-border);
  border-radius: 12px;
  background: var(--cp-surface);
}
.cp-kyc-doc-ic {
  flex: none;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  font: 700 10.5px 'Poppins', sans-serif;
  letter-spacing: .04em;
  color: var(--cp-fg-2);
  background: var(--cp-surface-2, rgba(0,0,0,.03));
  border: 1px solid var(--cp-border);
  border-radius: 8px;
}
.cp-kyc-doc-body { flex: 1; min-width: 0; }
.cp-kyc-doc-name {
  font: 600 12.5px 'Poppins', sans-serif;
  color: var(--cp-fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cp-kyc-doc-meta {
  display: flex; align-items: center; gap: 6px;
  margin-top: 3px;
  flex-wrap: wrap;
}
.cp-kyc-doc-sub {
  font: 400 11px 'Poppins', sans-serif;
  color: var(--cp-fg-3);
  font-variant-numeric: tabular-nums;
}
.cp-kyc-doc-rej {
  margin-top: 4px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(239,68,68,.08);
  color: #dc2626;
  font: 500 11.5px 'Poppins', sans-serif;
}

/* ── submit CTA row ── */
.cp-kyc-submit {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--cp-border);
  border-radius: 12px;
  background: var(--cp-surface-2, rgba(0,0,0,.02));
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.cp-kyc-submit-t { font: 600 12.5px 'Poppins', sans-serif; color: var(--cp-fg); }
.cp-kyc-submit-h {
  font: 400 12px 'Poppins', sans-serif; color: var(--cp-fg-2);
  margin-top: 2px; max-width: 380px;
}

/* Outline pill variant for doc type badge */
.cp-pill.cp-pill-outline {
  background: transparent;
  border: 1px solid var(--cp-border);
  color: var(--cp-fg-2);
}

/* AuthedImage placeholder while loading / on fail (used by support view) */
.cp-authed-img-loading {
  background: var(--cp-surface-2, rgba(0,0,0,.04));
  border-radius: 6px;
  animation: cp-authed-pulse 1.2s ease-in-out infinite;
}
.cp-authed-img-fail {
  display: flex; align-items: center; justify-content: center;
  color: var(--cp-fg-3);
  background: var(--cp-surface-2, rgba(0,0,0,.03));
  border: 1px dashed var(--cp-border);
  border-radius: 6px;
  font: 600 14px 'Poppins', sans-serif;
}
@keyframes cp-authed-pulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: .85; }
}
/* ============================================================================
   Shared Dropzone component styles. Consumed by KYC + Support flows.
   Class prefix: cp-dz-*
   Tokens read via var(--cp-*) from the app theme.
   ============================================================================ */

.cp-dz-wrap { display: block; }

.cp-dz {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  padding: 26px 18px;
  border: 1.5px dashed var(--cp-border);
  border-radius: 12px;
  background: var(--cp-surface-2, rgba(0,0,0,0.02));
  color: var(--cp-fg-2, #4a4a4a);
  cursor: pointer;
  text-align: center;
  transition: border-color .18s ease, background .18s ease, transform .12s ease;
  user-select: none;
}
.cp-dz:hover { border-color: var(--cp-accent, #6469ff); background: var(--cp-surface-hover, rgba(100,105,255,.04)); }
.cp-dz:focus-visible { outline: 2px solid var(--cp-accent, #6469ff); outline-offset: 2px; }

.cp-dz-active {
  border-color: var(--cp-accent, #6469ff);
  background: var(--cp-surface-hover, rgba(100,105,255,.08));
  transform: scale(1.005);
}

.cp-dz-busy { opacity: .6; cursor: progress; pointer-events: none; }

.cp-dz-input { display: none; }

.cp-dz-ic {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: var(--cp-accent, #6469ff);
  border-radius: 50%;
  background: var(--cp-accent-soft, rgba(100,105,255,.10));
  margin-bottom: 2px;
}

.cp-dz-t {
  font: 600 13.5px 'Poppins', sans-serif;
  color: var(--cp-fg, #1a1a1a);
}
.cp-dz-h {
  font: 400 11.5px 'Poppins', sans-serif;
  color: var(--cp-fg-3, #7b7b7b);
}

/* ── selected file chip strip ─────────────────────────────────────────────── */
.cp-dz-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 10px;
}
.cp-dz-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 6px 6px;
  min-width: 180px; max-width: 260px;
  border: 1px solid var(--cp-border);
  border-radius: 10px;
  background: var(--cp-surface, #fff);
}
.cp-dz-thumb {
  width: 40px; height: 40px; object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--cp-border);
  flex: none;
}
.cp-dz-ext {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font: 700 10px 'Poppins', sans-serif;
  color: var(--cp-fg-2);
  background: var(--cp-surface-2, rgba(0,0,0,.03));
  border: 1px solid var(--cp-border);
  border-radius: 6px;
  flex: none;
  letter-spacing: .04em;
}
.cp-dz-chip-meta { min-width: 0; flex: 1; }
.cp-dz-chip-name {
  font: 600 12px 'Poppins', sans-serif;
  color: var(--cp-fg, #1a1a1a);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cp-dz-chip-sub {
  font: 400 10.5px 'Poppins', sans-serif;
  color: var(--cp-fg-3);
  font-variant-numeric: tabular-nums;
}
.cp-dz-chip-x {
  flex: none;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: none;
  color: var(--cp-fg-3);
  background: transparent;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.cp-dz-chip-x:hover { background: var(--cp-danger-soft, rgba(220,53,69,.10)); color: var(--cp-danger, #dc3545); }

/* Compact variant used inside tight rows (support reply) */
.cp-dz.cp-dz-sm { padding: 18px 14px; }
.cp-dz.cp-dz-sm .cp-dz-ic { width: 36px; height: 36px; }
.cp-dz.cp-dz-sm .cp-dz-t { font-size: 12.5px; }
.cp-dz.cp-dz-sm .cp-dz-h { font-size: 11px; }
/* ============================================================================
 * billing.css — page-scoped classes for the Billing screen.
 * (artifact: Cryptrum Pay.dc.html isBilling branch + blModalOpen modal.)
 * Composes cp-kit primitives; only one-off layout / grid-template-columns
 * and a few inline-derived bits live here. Tokens are all --cp-*.
 * ========================================================================== */

/* -------------------------------------------------------------------
 * HEADER — CPT balance figure + autopay indicator pill
 * ------------------------------------------------------------------- */
.cpb-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-bottom:22px;
}
.cpb-fig{
  font:600 40px/1 var(--cp-mono);letter-spacing:-1.5px;margin-top:10px;
}
.cpb-fig-unit{font-size:18px;color:var(--cp-fg-3);}

.cpb-autopay{
  display:flex;align-items:center;gap:8px;
  border-radius:11px;padding:9px 14px;
  font:600 12.5px 'Poppins';
}
.cpb-autopay i{width:7px;height:7px;border-radius:50%;display:block;flex:none;}
.cpb-autopay.is-on{background:var(--cp-accent-soft);color:var(--cp-accent);}
.cpb-autopay.is-on i{background:var(--cp-accent);}
.cpb-autopay.is-off{background:var(--cp-hover);color:var(--cp-fg-3);}
.cpb-autopay.is-off i{background:var(--cp-fg-3);}
.cpb-autopay-meta{font-weight:500;color:var(--cp-fg-2);}

/* -------------------------------------------------------------------
 * TABS — underline bar + refresh button on the right
 * ------------------------------------------------------------------- */
.cpb-tabs{gap:2px;margin-bottom:24px;}
.cpb-tabs .cp-tab{padding:11px 16px 12px;}
.cpb-tabs-spacer{flex:1;}
.cpb-refresh{width:36px;height:36px;font-size:15px;}
.cpb-refresh[data-spin="1"] svg{animation:cp-kspin .8s linear infinite;}

/* -------------------------------------------------------------------
 * GENERIC SECTION (eyebrow + caption)
 * ------------------------------------------------------------------- */
.cpb-sec{margin-bottom:26px;}
.cpb-sec-eyebrow{
  font-size:11px;letter-spacing:.08em;color:var(--cp-fg-2);
  margin-bottom:14px;
}
.cpb-sec-cap{font:400 12.5px 'Poppins';color:var(--cp-fg-3);margin:0 0 16px;}

/* -------------------------------------------------------------------
 * BUY — pack cards
 * ------------------------------------------------------------------- */
.cpb-sk{height:200px;}
.cpb-packs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:16px;
}
.cpb-pack{
  border-radius:18px;padding:22px;
  display:flex;flex-direction:column;gap:8px;
}
.cpb-pack-top{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:8px;min-height:24px;
}
.cpb-pack-name{font:600 15px 'Poppins';}
.cpb-pack-badge{
  font:700 9px 'Poppins';letter-spacing:.06em;
  color:var(--cp-accent);background:var(--cp-accent-soft);
  padding:3px 8px;border-radius:20px;white-space:nowrap;
}
.cpb-pack-block{margin-top:6px;}
.cpb-pack-block:first-of-type{margin-top:8px;}
.cpb-pack-lbl{
  font:600 9.5px 'Poppins';letter-spacing:.05em;text-transform:uppercase;
  color:var(--cp-fg-3);
}
.cpb-pack-cpt{font:600 28px 'Poppins';letter-spacing:-1px;margin-top:2px;}
.cpb-pack-tier{font:500 12px 'Poppins';color:var(--cp-fg-3);letter-spacing:0;}
.cpb-pack-price{font:600 20px 'Poppins';color:var(--cp-accent);margin-top:2px;}
.cpb-pack-desc{font:400 12px/1.5 'Poppins';color:var(--cp-fg-3);margin:4px 0 0;}
.cpb-pack-cta{margin-top:14px;height:42px;border-radius:11px;width:100%;}

/* -------------------------------------------------------------------
 * SAVINGS GUIDE — expandable tips card
 * ------------------------------------------------------------------- */
.cpb-sg{padding:0;overflow:hidden;margin-bottom:26px;}
.cpb-sg-head{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:16px 20px;background:none;border:none;cursor:pointer;text-align:left;
}
.cpb-sg-ic{width:36px;height:36px;border-radius:10px;font-size:18px;}
.cpb-sg-head-meta{flex:1;min-width:0;}
.cpb-sg-head-t{font:600 14px 'Poppins';}
.cpb-sg-head-d{font:400 12px 'Poppins';color:var(--cp-fg-3);margin-top:2px;}
.cpb-sg-toggle{font:600 12px 'Poppins';color:var(--cp-accent);white-space:nowrap;}

.cpb-sg-body{padding:0 20px 20px;border-top:1px solid var(--cp-border);}
.cpb-sg-lever{margin-top:20px;}
.cpb-sg-lever-head{display:flex;align-items:center;gap:10px;font:600 13.5px 'Poppins';}
.cpb-sg-num{
  width:22px;height:22px;border-radius:7px;flex:none;
  background:var(--cp-accent-soft);color:var(--cp-accent);
  display:inline-flex;align-items:center;justify-content:center;
  font:700 12px 'Poppins';
}
.cpb-sg-p{font:400 12.5px/1.6 'Poppins';color:var(--cp-fg-2);margin:8px 0 12px;}
.cpb-sg-foot{font:400 11.5px/1.55 'Poppins';color:var(--cp-fg-3);margin:10px 0 0;}

.cpb-sg-tablewrap{
  background:var(--cp-surface2);border:1px solid var(--cp-border);
  border-radius:12px;overflow:hidden;
}
.cpb-sg-grid{
  display:grid;align-items:center;gap:10px;
  padding:9px 14px;font:500 12px 'Poppins';color:var(--cp-fg-2);
  border-top:1px solid var(--cp-border);
}
.cpb-sg-grid:first-child{border-top:none;}
.cpb-sg-grid--head{
  font:600 10px 'Poppins';letter-spacing:.04em;text-transform:uppercase;
  color:var(--cp-fg-3);background:var(--cp-surface);
}
.cpb-sg-grid-1{grid-template-columns:1.5fr 1fr 1fr 1fr 0.8fr;}
.cpb-sg-grid-2{grid-template-columns:1fr 1.2fr 1fr 1.2fr;}
.cpb-sg-grid-3{grid-template-columns:1fr 1.2fr 1.2fr 0.8fr;}
.cpb-sg-grid .cp-r{text-align:right;}
.cpb-sg-row-good{background:var(--cp-pos-soft);}
.cpb-sg-tier{
  font:600 11.5px 'Poppins';color:var(--cp-fg-2);
}
.cpb-sg-tier.on{color:var(--cp-fg);}
.cpb-sg-muted{color:var(--cp-fg-3);}
.cpb-sg-pos{color:var(--cp-pos);}
.cpb-sg-neg{color:var(--cp-neg);}
.cpb-sg-strong{font-weight:700;}
.cpb-sg-accent{color:var(--cp-accent);}

.cpb-sg-stack{
  margin-top:20px;padding:16px;
  background:var(--cp-pos-soft);border-radius:12px;
}
.cpb-sg-stack-head{display:flex;align-items:center;gap:8px;font:600 13px 'Poppins';color:var(--cp-fg);}
.cpb-sg-stack-p{font:400 12.5px/1.6 'Poppins';color:var(--cp-fg-2);margin:8px 0 0;}
.cpb-sg-stack-bottom{font:600 13px 'Poppins';color:var(--cp-fg);margin:12px 0 0;}

/* -------------------------------------------------------------------
 * BUY — custom amount + live quote
 * ------------------------------------------------------------------- */
.cpb-custom{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start;}
.cpb-custom-col{flex:1;min-width:240px;max-width:340px;}
.cpb-custom-input{height:46px;font:600 16px 'Poppins';}

.cpb-quote{
  margin-top:18px;background:var(--cp-surface2);
  border:1px solid var(--cp-border);border-radius:12px;overflow:hidden;
}
.cpb-quote-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:11px 15px;font-size:12.5px;border-top:1px solid var(--cp-border);
}
.cpb-quote-row:first-child{border-top:none;}
.cpb-quote-total{background:var(--cp-surface);}
.cpb-quote-total .cp-kv-k{font-weight:600;}
.cpb-quote-total-v{font:600 17px 'Poppins';color:var(--cp-accent);}
.cpb-custom-cta{margin-top:16px;}
.cpb-quote-err,.cpb-quote-hint{margin-top:18px;}

/* -------------------------------------------------------------------
 * PURCHASE MODAL (blModalOpen)
 * ------------------------------------------------------------------- */
.cpb-pm-sk{height:240px;}
.cpb-pm-summary{
  background:var(--cp-surface2);border:1px solid var(--cp-border);
  border-radius:12px;overflow:hidden;margin-bottom:20px;
}
.cpb-pm-summary-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:11px 15px;font-size:12.5px;border-top:1px solid var(--cp-border);
}
.cpb-pm-summary-row:first-child{border-top:none;}
.cpb-pm-summary-total{background:var(--cp-surface);}
.cpb-pm-summary-total .cp-kv-k{font-weight:600;}
.cpb-pm-summary-totalv{font:600 17px 'Poppins';color:var(--cp-accent);}
.cpb-pm-label{margin-bottom:12px;letter-spacing:.07em;}

.cpb-pm-tokens{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;
}
.cpb-pm-token{
  text-align:left;border:1px solid var(--cp-border2);
  background:var(--cp-surface);border-radius:12px;padding:12px 14px;
  cursor:pointer;display:flex;flex-direction:column;gap:4px;
  transition:border-color .15s,background .15s;
}
.cpb-pm-token:hover{border-color:var(--cp-accent);}
.cpb-pm-token.is-on{border:1.5px solid var(--cp-accent);background:var(--cp-accent-soft);}
.cpb-pm-token-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.cpb-pm-token-name{font:600 14px 'Poppins';display:inline-flex;align-items:center;gap:6px;}
.cpb-pm-token-native{
  font:600 8.5px 'Poppins';letter-spacing:.04em;text-transform:uppercase;
  color:var(--cp-fg-3);background:var(--cp-hover);padding:2px 5px;border-radius:5px;
}
.cpb-pm-token-chain{
  font:600 9.5px 'Poppins';letter-spacing:.06em;text-transform:uppercase;
  color:var(--cp-fg-3);
}
.cpb-pm-token-amt{font:600 16px 'Poppins';color:var(--cp-fg);}
.cpb-pm-token-amt.is-on{color:var(--cp-accent);}
.cpb-pm-token-rate{font:400 11px 'Poppins';color:var(--cp-fg-3);}

.cpb-pm-foot{display:flex;gap:12px;}
.cpb-pm-foot .cp-btn-ghost{flex:none;}
.cpb-pm-pay{flex:1;}

/* -------------------------------------------------------------------
 * USAGE
 * ------------------------------------------------------------------- */
.cpb-usg-sk{height:60px;margin-bottom:16px;}
.cpb-usg-sk--h{height:90px;}
.cpb-usg-headline{margin-bottom:8px;}
.cpb-usg-headline-lbl{
  font:600 10px 'Poppins';letter-spacing:.05em;text-transform:uppercase;
  color:var(--cp-fg-3);
}
.cpb-usg-headline-fig{font:600 38px 'Poppins';letter-spacing:-1.4px;margin:8px 0 2px;}
.cpb-usg-headline-range{font:400 12px 'Poppins';color:var(--cp-fg-3);margin-bottom:18px;}

.cpb-usg-inner{min-width:560px;}
.cpb-usg-grid{grid-template-columns:1.6fr 1fr 1fr 0.8fr 0.6fr;}
.cpb-usg-evt{font:500 12.5px 'Poppins';color:var(--cp-fg-2);}
.cpb-usg-chain{font:500 12px 'Poppins';color:var(--cp-fg-2);}
.cpb-usg-strong{font:600 12.5px 'Poppins';}
.cpb-usg-soft{color:var(--cp-fg-2);}
.cpb-usg-pct{color:var(--cp-accent);font-weight:600;}

/* -------------------------------------------------------------------
 * AUTOPAY
 * ------------------------------------------------------------------- */
.cpb-ap-banner{margin-bottom:18px;}
.cpb-ap-card{max-width:600px;border-radius:18px;}
.cpb-ap-card + .cpb-ap-card{margin-top:18px;}
.cpb-ap-card-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;margin-bottom:6px;
}
.cpb-ap-card-t{font:600 16px 'Poppins';}
.cpb-ap-card-d{font:400 12.5px/1.5 'Poppins';color:var(--cp-fg-3);margin-top:3px;}
.cpb-ap-link{font-size:12px;}

.cpb-ap-kv{
  margin:12px 0 18px;
  background:var(--cp-surface2);border:1px solid var(--cp-border);
  border-radius:12px;overflow:hidden;
}
.cpb-ap-kv-row{padding:11px 15px;border-top:1px solid var(--cp-border);}
.cpb-ap-kv-row:first-child{border-top:none;}
.cpb-ap-kv-row.is-warn .cp-kv-v{color:var(--cp-warn);}
.cpb-ap-kv-mono{font-size:11.5px;color:var(--cp-fg-2);font-weight:500;word-break:break-all;}

.cpb-ap-actions{display:flex;flex-wrap:wrap;gap:10px;}
.cpb-ap-btn{height:44px;}
.cpb-ap-btn-danger{height:42px;}

.cpb-ap-cfg-grid{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin:12px 0 0;
}
.cpb-ap-cfg-field .cp-label{margin-bottom:6px;}
.cpb-ap-cfg-input{height:40px;}
.cpb-ap-cfg-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;}

@media (max-width:560px){
  .cpb-ap-cfg-grid{grid-template-columns:1fr;}
}

/* -------------------------------------------------------------------
 * HISTORY
 * ------------------------------------------------------------------- */
.cpb-hist-head{margin-bottom:14px;}
.cpb-hist-title{font:600 15px 'Poppins';}
.cpb-hist-cap{font:400 12px 'Poppins';color:var(--cp-fg-3);margin-top:2px;}

.cpb-hist-inner{min-width:680px;}
.cpb-hist-grid{grid-template-columns:1fr 1fr 0.9fr 1.1fr 0.8fr 0.9fr 0.7fr;}
.cpb-hist-d{font:500 12.5px 'Poppins';color:var(--cp-fg);}
.cpb-hist-t{font:400 11px 'Poppins';color:var(--cp-fg-3);margin-top:2px;}
.cpb-hist-recpt{font:500 11.5px 'Poppins';color:var(--cp-fg-2);}
.cpb-hist-strong{font:600 12.5px 'Poppins';}
.cpb-hist-tier{font:500 12px 'Poppins';color:var(--cp-fg-2);text-transform:capitalize;}
.cpb-hist-pdf{font-size:12px;justify-content:flex-end;}
.cpb-hist-pager-info{margin-right:auto;}
/* ============================================================================
 * docs.css — Integration guide (artifact: isDocs branch, lines 529-557).
 * Sticky 248px chapter-nav sidebar + body column. cp-* tokens only.
 * Page-scoped classes use the .cpd2- prefix (docs v2).
 * ========================================================================== */

/* page header block */
.cpd2-head{margin-bottom:22px;}

/* layout: 248px sticky sidebar + body */
.cpd2-grid{
  display:grid;
  grid-template-columns:248px 1fr;
  gap:32px;
  align-items:start;
}
@media (max-width:860px){
  .cpd2-grid{grid-template-columns:1fr;}
}

/* ---------- SIDEBAR ---------- */
.cpd2-side{
  position:sticky;top:0;
  align-self:start;
  min-width:0;
}

.cpd2-search{
  display:flex;align-items:center;gap:9px;
  background:var(--cp-surface);
  border:1px solid var(--cp-border2);
  border-radius:11px;
  padding:9px 13px;
  margin-bottom:14px;
  transition:border-color .15s;
}
.cpd2-search:focus-within{border-color:var(--cp-accent);}
.cpd2-search-icon{
  display:inline-flex;align-items:center;
  color:var(--cp-fg-3);flex:none;
}
.cpd2-search-input{
  flex:1;min-width:0;
  border:none;outline:none;background:none;
  font:400 12.5px 'Poppins';color:var(--cp-fg);
}
.cpd2-search-input::placeholder{color:var(--cp-fg-3);}

.cpd2-chap-list{display:block;}

/* chapter button — inactive */
.cpd2-chap{
  display:flex;flex-direction:column;gap:3px;align-items:flex-start;
  width:100%;text-align:left;
  padding:10px 12px;
  border-radius:10px;
  background:transparent;
  border:1px solid transparent;
  cursor:pointer;
  margin-bottom:4px;
  transition:background .15s,border-color .15s,box-shadow .15s;
}
.cpd2-chap:hover{background:var(--cp-hover);}

/* active */
.cpd2-chap.is-active{
  background:var(--cp-surface);
  border-color:var(--cp-border);
  box-shadow:var(--cp-sh-sm);
}

.cpd2-chap-slug{
  font:500 10px 'Poppins';letter-spacing:.04em;
  color:var(--cp-fg-3);
}
.cpd2-chap-title{
  font:600 13px 'Poppins';
  color:var(--cp-fg-2);
}
.cpd2-chap.is-active .cpd2-chap-title{color:var(--cp-fg);}
.cpd2-chap-aud{
  font:600 9.5px 'Poppins';letter-spacing:.06em;text-transform:uppercase;
  color:var(--cp-fg-3);
}
.cpd2-chap.is-active .cpd2-chap-aud{color:var(--cp-accent);}

.cpd2-empty{
  padding:18px 4px;
  color:var(--cp-fg-3);font-size:12.5px;
}

/* sidebar skeletons */
.cpd2-skel-list{display:flex;flex-direction:column;gap:8px;padding:4px 0;}
.cpd2-skel-list .cpd2-skel{height:52px;}

.cpd2-skel{
  border-radius:10px;
  background:linear-gradient(90deg,var(--cp-surface2) 25%,var(--cp-hover) 37%,var(--cp-surface2) 63%);
  background-size:450px 100%;
  animation:cp-shimmer 1.2s linear infinite;
}

/* ---------- BODY ---------- */
.cpd2-body{
  max-width:760px;
  min-width:0;
}

/* doc meta (slug.md + audience tag) */
.cpd2-meta{
  display:flex;align-items:center;gap:14px;
  margin-bottom:8px;
}
.cpd2-meta-slug{
  font:500 11px 'Poppins';letter-spacing:.04em;
  color:var(--cp-fg-3);
}
.cpd2-meta-aud{
  display:inline-flex;align-items:center;gap:5px;
  font:600 10px 'Poppins';letter-spacing:.06em;text-transform:uppercase;
  color:var(--cp-accent);
}
.cpd2-meta-aud svg{display:inline-flex;}

/* doc body skeletons */
.cpd2-skel-doc{display:flex;flex-direction:column;gap:12px;}
.cpd2-skel-doc .cpd2-skel{height:18px;}
.cpd2-skel-doc .cpd2-skel-title{height:34px;width:55%;margin-bottom:8px;}
.cpd2-skel-doc .cpd2-skel-85{width:85%;}

/* error / empty blocks */
.cpd2-alert{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:14px 16px;
  border:1px solid var(--cp-neg);
  background:var(--cp-neg-soft);color:var(--cp-neg);
  border-radius:14px;
  font:500 13px 'Poppins';
  margin-bottom:16px;
}
.cpd2-empty-block{
  padding:46px 24px;text-align:center;
  border:1px solid var(--cp-border);border-radius:14px;
}
.cpd2-empty-title{font:600 15px 'Poppins';margin-bottom:6px;}
.cpd2-empty-sub{font:400 13px 'Poppins';color:var(--cp-fg-3);line-height:1.6;}

/* ---------- MARKDOWN RENDER (.cpd2-md-* overrides for react-markdown) ---- */
.cpd2-md-h1{
  font:600 28px 'Poppins';letter-spacing:-.6px;
  margin:0 0 4px;color:var(--cp-fg);
}
.cpd2-md-h2{
  font:600 19px 'Poppins';
  margin:30px 0 12px;
  padding-bottom:8px;
  border-bottom:1px solid var(--cp-border);
  color:var(--cp-fg);
}
.cpd2-md-h3{
  font:600 16px 'Poppins';
  margin:24px 0 10px;color:var(--cp-fg);
}
.cpd2-md-p{
  font:400 14px/1.7 'Poppins';color:var(--cp-fg-2);
  margin:12px 0;
}
.cpd2-md-link{
  color:var(--cp-accent);text-decoration:underline;
  text-underline-offset:2px;
}
.cpd2-md-link:hover{opacity:.8;}
.cpd2-md-list{
  padding-left:20px;margin:12px 0;
  font:400 14px/1.8 'Poppins';color:var(--cp-fg-2);
}
.cpd2-md-list li{margin:4px 0;}
.cpd2-md-hr{border:none;border-top:1px solid var(--cp-border);margin:24px 0;}

/* inline code */
.cpd2-md-inline-code{
  font:500 12.5px var(--cp-mono);
  background:var(--cp-surface2);
  border:1px solid var(--cp-border);
  border-radius:6px;padding:1px 6px;
  color:var(--cp-fg);
}

/* code block (wraps a cp-copy-style frame) */
.cpd2-code-wrap{
  position:relative;
  margin:14px 0;
}
.cpd2-code{
  background:var(--cp-surface2);
  border:1px solid var(--cp-border);
  border-radius:12px;
  padding:14px 16px;
  overflow:auto;
  font:500 13px/1.65 var(--cp-mono);
  color:var(--cp-fg);
  white-space:pre;
}
.cpd2-code code{font:inherit;color:inherit;background:none;border:none;padding:0;}
.cpd2-code-copy{
  position:absolute;top:8px;right:8px;
  height:30px;padding:0 11px;border-radius:8px;border:none;
  background:var(--cp-surface);color:var(--cp-fg-2);
  font:600 11px 'Poppins';cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;
  box-shadow:var(--cp-sh-sm);
  transition:color .15s,background .15s;
  opacity:0;
}
.cpd2-code-wrap:hover .cpd2-code-copy{opacity:1;}
.cpd2-code-copy:hover{color:var(--cp-accent);background:var(--cp-hover);}

/* blockquote → note callout */
.cpd2-md-note{
  border-left:3px solid var(--cp-accent);
  background:var(--cp-accent-soft);
  padding:12px 16px;
  border-radius:0 10px 10px 0;
  margin:16px 0;
  font:400 13px/1.6 'Poppins';color:var(--cp-fg-2);
}
.cpd2-md-note > :first-child{margin-top:0;}
.cpd2-md-note > :last-child{margin-bottom:0;}

/* tables (markdown gfm) — div-free; keep <table> but style flat */
.cpd2-md-table-wrap{overflow-x:auto;margin:14px 0;}
.cpd2-md-table{
  width:100%;border-collapse:collapse;
  font:400 13px 'Poppins';
}
.cpd2-md-table th{
  text-align:left;
  font:600 11px 'Poppins';letter-spacing:.04em;text-transform:uppercase;
  color:var(--cp-fg-3);
  padding:10px 12px;
  border-bottom:1px solid var(--cp-border);
}
.cpd2-md-table td{
  padding:10px 12px;
  border-bottom:1px solid var(--cp-border);
  color:var(--cp-fg-2);
}
/* ============================================================================
 * support.css — page-scoped bits for SupportView (rebuilt from
 * Cryptrum Pay.dc.html SUPPORT branch, lines 284-343). Only grid columns,
 * thread chrome, and the avatar/message layout live here; everything else
 * composes cp-kit primitives. Tokens come from cp-shell.css (--cp-*).
 * ========================================================================== */

/* div-grid table columns (artifact: 2.2fr 1fr 0.8fr 1fr 1fr) */
.cpsp-grid{
  grid-template-columns:2.2fr 1fr 0.8fr 1fr 1fr;
  min-width:640px;
}

/* keep the subject cell from blowing out the row */
.cpsp-cell-subject{padding-right:12px;}

/* section title (artifact: "Your tickets" / "New ticket" — 600 13px, fg) */
.cpsp-section-title{font:600 13px 'Poppins';color:var(--cp-fg);}

/* form max width (artifact create + reply blocks) */
.cpsp-form{max-width:680px;}

/* create-mode header (title left / back link right) */
.cpsp-create-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:18px;
}

/* back link (← Back / ← All tickets) */
.cpsp-back{
  border:none;background:none;cursor:pointer;
  font:600 12.5px 'Poppins';color:var(--cp-accent);
  display:inline-flex;align-items:center;gap:4px;
}
.cpsp-back:hover{opacity:.85;}
.cpsp-back-spaced{margin-bottom:14px;}

/* thread header block (artifact: top/bottom rule + status chips + title + meta) */
.cpsp-thead{
  border-top:1px solid var(--cp-border);border-bottom:1px solid var(--cp-border);
  padding:18px 0;margin-bottom:24px;
}
.cpsp-thead-chips{display:flex;align-items:center;gap:9px;margin-bottom:8px;}
.cpsp-thead-title{
  font:600 21px 'Poppins';letter-spacing:-.4px;margin-bottom:5px;
}
.cpsp-thead-meta{font:400 12px 'Poppins';color:var(--cp-fg-3);}
.cpsp-thead-assigned{
  font:400 12px 'Poppins';color:var(--cp-fg-3);margin-top:8px;
}
.cpsp-thead-assigned strong{color:var(--cp-fg-2);font-weight:600;}

/* conversation list */
.cpsp-conv-label{margin-bottom:16px;}
.cpsp-msgs{margin-bottom:24px;}
.cpsp-msg{
  display:flex;align-items:flex-start;gap:12px;margin-bottom:18px;
}
.cpsp-avatar{
  width:34px;height:34px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  font:600 13px 'Poppins';
}
.cpsp-avatar-me{background:var(--cp-accent);color:var(--cp-accent-fg);}
.cpsp-avatar-them{
  background:var(--cp-surface2);border:1px solid var(--cp-border);color:var(--cp-fg);
}
.cpsp-msg-body{flex:1;min-width:0;}
.cpsp-msg-head{
  display:flex;align-items:center;gap:10px;margin-bottom:4px;
}
.cpsp-msg-author{font:600 13px 'Poppins';}
.cpsp-msg-when{font:400 11.5px 'Poppins';color:var(--cp-fg-3);}
.cpsp-msg-text{
  font:400 13.5px/1.6 'Poppins';color:var(--cp-fg-2);
  white-space:pre-wrap;word-break:break-word;
}

/* reply action row (close left / send right) */
.cpsp-reply-actions{
  display:flex;justify-content:space-between;gap:12px;margin-top:14px;
}

/* closed-ticket note */
.cpsp-closed{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:14px;font:500 13px 'Poppins';color:var(--cp-fg-2);
}

/* Phase 30 additions — per-message attachments + CSAT prompt */
.cpsp-msg-attach{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;
}
.cpsp-msg-attach a.cp-pill{
  background:var(--cp-accent-soft);color:var(--cp-accent);
  text-decoration:none;font:500 11.5px 'Poppins';
}
.cpsp-msg-attach a.cp-pill:hover{background:var(--cp-accent-soft2);}

.cpsp-csat{
  margin-top:18px;padding:16px;border:1px solid var(--cp-border);border-radius:12px;
  background:var(--cp-surface2);display:flex;flex-direction:column;gap:8px;
}
.cpsp-csat-lbl{font:600 13px 'Poppins';}
.cpsp-csat-stars{display:flex;gap:4px;}
.cpsp-csat-star{
  background:none;border:none;font-size:24px;cursor:pointer;padding:0 2px;color:var(--cp-border2);
  transition:color .1s,transform .1s;
}
.cpsp-csat-star:hover{transform:scale(1.15);}
.cpsp-csat-star.on{color:#F4B740;}
.cpsp-csat-done{
  text-align:center;color:var(--cp-fg-2);font:500 12.5px 'Poppins';
  background:var(--cp-pos-soft);border-color:var(--cp-pos-soft);
}

/* ── In-thread attachment tiles (Phase 30 rewrite of msg-attach) ── */
.cpsp-att-grid {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 10px;
}
.cpsp-att-thumb {
  position: relative;
  display: flex; flex-direction: column;
  padding: 0; border: 1px solid var(--cp-border);
  border-radius: 10px; background: var(--cp-surface);
  cursor: pointer; overflow: hidden;
  width: 140px;
  transition: border-color .12s ease, transform .12s ease;
}
.cpsp-att-thumb:hover { border-color: var(--cp-accent, #6469ff); transform: translateY(-1px); }
.cpsp-att-thumb-img {
  width: 100%; height: 100px; object-fit: cover;
  display: block; background: var(--cp-surface-2, rgba(0,0,0,.04));
}
.cpsp-att-thumb-cap {
  padding: 5px 8px;
  font: 500 11px 'Poppins', sans-serif; color: var(--cp-fg-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-top: 1px solid var(--cp-border);
}
.cpsp-att-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--cp-border);
  border-radius: 999px;
  background: var(--cp-surface);
  color: var(--cp-fg-2);
  font: 500 11.5px 'Poppins', sans-serif;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.cpsp-att-pill:hover {
  background: var(--cp-accent-soft, rgba(100,105,255,.10));
  color: var(--cp-accent, #6469ff);
  border-color: var(--cp-accent, #6469ff);
}
.cpsp-att-pill-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpsp-att-pill-size { color: var(--cp-fg-3); font-variant-numeric: tabular-nums; }

/* ── Lightbox ── */
.cpsp-lightbox {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .82);
  display: flex; align-items: center; justify-content: center;
  z-index: 3000;
  padding: 30px;
  cursor: zoom-out;
}
.cpsp-lightbox-img {
  max-width: 92vw; max-height: 82vh;
  object-fit: contain;
  border-radius: 10px;
  background: #111;
  cursor: default;
  box-shadow: 0 12px 60px rgba(0,0,0,.6);
}
.cpsp-lightbox-x {
  position: absolute; top: 20px; right: 24px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  color: #fff; background: rgba(255,255,255,.14);
  cursor: pointer;
}
.cpsp-lightbox-x:hover { background: rgba(255,255,255,.24); }
.cpsp-lightbox-cap {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px;
  background: rgba(0,0,0,.65);
  color: #fff;
  border-radius: 10px;
  font: 500 12.5px 'Poppins', sans-serif;
  cursor: default;
}
.cpsp-lightbox-cap .cp-btn {
  display: inline-flex; align-items: center; gap: 6px;
}
/* ============================================================================
 * swapbridge.css — page-scoped classes for Swap / Bridge / Swap-Bridge History.
 * Built from the artifact's SWAP (720-782) + BRIDGE (668-719) branches, extending
 * the cp-kit visual language. Prefix .cpx-. Tokens come from cp-shell.css (--cp-*).
 * NO inline CSS in the pages except genuinely dynamic values.
 * ========================================================================== */

/* centered single-column layout for the swap/bridge build card */
.cpx-wrap{max-width:480px;margin:0 auto;}
.cpx-head-c{text-align:center;}
.cpx-head-c .cp-sub{margin-left:auto;margin-right:auto;max-width:480px;}

/* fee info note centered above the card */
.cpx-fee-note{max-width:560px;margin:0 auto 20px;}

/* the swap/bridge card */
.cpx-card{
  background:var(--cp-surface);border:1px solid var(--cp-border);
  border-radius:18px;box-shadow:var(--cp-sh-sm);padding:20px;
}

/* top-level chain select (full width, swap page) */
.cpx-chain-label{display:block;font:600 12px 'Poppins';color:var(--cp-fg-2);margin-bottom:7px;}
.cpx-chain-wrap{position:relative;display:block;margin-bottom:16px;}
.cpx-chain-wrap .cpx-chain-select{
  width:100%;height:44px;padding:0 36px 0 14px;
  border-radius:11px;border:1px solid var(--cp-border2);
  background:var(--cp-surface2);color:var(--cp-fg);
  font:500 13.5px 'Poppins';outline:none;cursor:pointer;
  appearance:none;-webkit-appearance:none;text-transform:capitalize;
  transition:border-color .15s,background .15s;
}
.cpx-chain-wrap .cpx-chain-select:focus{border-color:var(--cp-accent);background:var(--cp-surface);}
.cpx-chain-chev{
  position:absolute;right:13px;top:22px;transform:translateY(-50%);
  pointer-events:none;color:var(--cp-fg-3);display:inline-flex;
}

/* token-leg box ("You pay" / "You receive" / "From" / "To") */
.cpx-leg{
  background:var(--cp-surface2);border:1px solid var(--cp-border);
  border-radius:14px;padding:14px 16px;
}
.cpx-leg + .cpx-dir,.cpx-dir + .cpx-leg{margin:0;}
.cpx-leg-top{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px;
}
.cpx-leg-tag{font:600 11px 'Poppins';color:var(--cp-fg-3);}

/* inline chain select inside a leg head (bridge) */
.cpx-leg-chain-wrap{position:relative;display:inline-flex;}
.cpx-leg-chain{
  height:30px;padding:0 26px 0 10px;border-radius:8px;
  border:1px solid var(--cp-border2);background:var(--cp-surface);color:var(--cp-fg);
  font:600 11.5px 'Poppins';outline:none;cursor:pointer;
  appearance:none;-webkit-appearance:none;text-transform:capitalize;
  transition:border-color .15s;
}
.cpx-leg-chain:focus{border-color:var(--cp-accent);}
.cpx-leg-chain-chev{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  pointer-events:none;color:var(--cp-fg-3);display:inline-flex;
}

/* the amount + token-picker row */
.cpx-leg-row{display:flex;align-items:center;gap:12px;}
.cpx-amount-in{
  flex:1;min-width:0;border:none;background:none;outline:none;
  font:600 24px 'Poppins';color:var(--cp-fg);
}
.cpx-amount-in::placeholder{color:var(--cp-fg-3);}
.cpx-amount-out{flex:1;min-width:0;font:600 24px 'Poppins';color:var(--cp-fg-3);}

/* token-picker pill button (coin icon + symbol + chevron) */
.cpx-tok{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  height:40px;padding:0 12px 0 10px;border-radius:999px;
  border:1px solid var(--cp-border2);background:var(--cp-surface);color:var(--cp-fg);
  font:600 14px 'Poppins';cursor:pointer;
  transition:background .15s,border-color .15s;
}
.cpx-tok:hover{background:var(--cp-hover);}
.cpx-tok-sym{white-space:nowrap;}
.cpx-tok-chev{display:inline-flex;color:var(--cp-fg-3);}
.cpx-tok-ic{display:inline-flex;}

/* token field as a plain input (no modal picker) inside the leg */
.cpx-tok-input{
  flex:none;width:120px;height:40px;padding:0 14px;border-radius:11px;
  border:1px solid var(--cp-border2);background:var(--cp-surface);color:var(--cp-fg);
  font:600 13.5px 'Poppins';outline:none;text-align:right;
  transition:border-color .15s;
}
.cpx-tok-input:focus{border-color:var(--cp-accent);}
.cpx-tok-input::placeholder{color:var(--cp-fg-3);font-weight:500;}

/* direction button between the two legs */
.cpx-dir{display:flex;justify-content:center;margin:-4px 0;}
.cpx-dir-btn{
  width:34px;height:34px;border-radius:10px;flex:none;
  background:var(--cp-surface);border:1px solid var(--cp-border2);color:var(--cp-fg-2);
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:var(--cp-sh-sm);cursor:pointer;
  transition:background .15s,color .15s,transform .15s;
}
.cpx-dir-btn:hover{background:var(--cp-hover);color:var(--cp-fg);}
.cpx-dir-btn:active{transform:rotate(180deg);}
.cpx-dir-static{
  width:34px;height:34px;border-radius:10px;
  background:var(--cp-surface);border:1px solid var(--cp-border2);color:var(--cp-fg-2);
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:var(--cp-sh-sm);
}

/* spacing between the two leg boxes + before the slippage row */
.cpx-leg-gap{margin-top:10px;}
.cpx-leg-gap2{margin-top:10px;margin-bottom:16px;}

/* slippage tolerance row */
.cpx-slip{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;
}
.cpx-slip-label{font:600 12.5px 'Poppins';color:var(--cp-fg-2);}
.cpx-slip-box{
  display:flex;align-items:center;width:110px;overflow:hidden;
  border:1px solid var(--cp-border2);background:var(--cp-surface2);border-radius:10px;
  transition:border-color .15s;
}
.cpx-slip-box:focus-within{border-color:var(--cp-accent);}
.cpx-slip-box input{
  flex:1;min-width:0;height:38px;border:none;background:none;outline:none;
  padding:0 12px;font:600 13.5px 'Poppins';color:var(--cp-fg);
}
.cpx-slip-suffix{
  padding:0 12px;color:var(--cp-fg-3);font:600 13px 'Poppins';
  border-left:1px solid var(--cp-border);
}

/* slippage presets (bridge keeps its chip row) */
.cpx-slip-presets{display:inline-flex;gap:6px;flex-wrap:wrap;}
.cpx-slip-chip{
  height:30px;padding:0 12px;border-radius:8px;
  border:1px solid var(--cp-border2);background:var(--cp-surface);color:var(--cp-fg-2);
  font:600 12px 'Poppins';cursor:pointer;transition:background .15s,color .15s,border-color .15s;
}
.cpx-slip-chip:hover{background:var(--cp-hover);color:var(--cp-fg);}
.cpx-slip-chip.on{
  background:var(--cp-accent-soft);color:var(--cp-accent);border-color:var(--cp-accent);
}

/* warn line (same-chain bridge) */
.cpx-warn{margin-bottom:16px;}

/* quote summary block */
.cpx-quote{
  background:var(--cp-surface2);border:1px solid var(--cp-border);
  border-radius:13px;padding:14px 16px;margin-bottom:14px;
}
.cpx-quote-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;
}
.cpx-quote-title{font:700 10.5px 'Poppins';letter-spacing:.08em;text-transform:uppercase;color:var(--cp-fg-3);}
.cpx-quote-route{font:600 12px 'Poppins';color:var(--cp-fg-2);}
.cpx-qrow{
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:5px 0;font-size:12.5px;
}
.cpx-qrow-k{color:var(--cp-fg-2);}
.cpx-qrow-v{font:600 12.5px 'Poppins';text-align:right;}
.cpx-qrow-v.cap{text-transform:capitalize;}
.cpx-qrow-sub{font:400 11px 'Poppins';color:var(--cp-fg-3);margin-top:2px;}

/* raw provider response disclosure */
.cpx-raw{margin-bottom:14px;}
.cpx-raw-sum{font:600 12px 'Poppins';color:var(--cp-fg-2);cursor:pointer;list-style:none;}
.cpx-raw-sum::-webkit-details-marker{display:none;}
.cpx-raw-body{
  margin-top:8px;background:var(--cp-surface);border:1px solid var(--cp-border);
  border-radius:10px;padding:12px;max-height:240px;overflow:auto;
  font:400 11px var(--cp-mono);color:var(--cp-fg-2);white-space:pre-wrap;word-break:break-all;
}
.cpx-quote-fine{font:400 11px/1.55 'Poppins';color:var(--cp-fg-3);margin-top:10px;}

/* action row (Edit/Confirm) */
.cpx-actions{display:flex;gap:10px;}
.cpx-actions .cp-btn{flex:1;}
.cpx-actions .cp-btn-ghost{flex:none;}

/* recent section header below the card */
.cpx-recent-head{
  font:700 11px 'Poppins';letter-spacing:.08em;text-transform:uppercase;
  color:var(--cp-fg-2);margin:34px 0 4px;
}
.cpx-recent-wrap{max-width:840px;}
.cpx-recent-wrap.center{margin-left:auto;margin-right:auto;}

/* ----------------------------------------------------------------------------
 * HISTORY page — div-grid activity table
 * -------------------------------------------------------------------------- */
.cpx-hist-inner{min-width:780px;}
.cpx-hist-grid{grid-template-columns:1fr 0.9fr 1.2fr 1.2fr 1fr 1fr 0.9fr 1.2fr;}
.cpx-hist-when{font:500 12.5px 'Poppins';color:var(--cp-fg-2);}
.cpx-hist-when-t{font:400 11px 'Poppins';color:var(--cp-fg-3);margin-top:2px;}
.cpx-hist-leg-tok{font:600 12.5px 'Poppins';}
.cpx-hist-leg-chain{font:400 11px 'Poppins';color:var(--cp-fg-3);margin-top:2px;text-transform:capitalize;}
.cpx-hist-amt{font:600 12px var(--cp-mono);}
.cpx-hist-tx{font:400 11px var(--cp-mono);color:var(--cp-fg-2);}
.cpx-hist-tx-empty{color:var(--cp-fg-3);font-size:11px;}
/* History — page-scoped classes (artifact: isHistory branch, lines 631-665).
 * Unified tabbed ledger. 4-column div-grid per tab:
 *   When / Detail / Amount(r) / Status(r).
 * Composes cp-kit primitives; only the grid template + a couple one-offs here. */

/* table min-width so the grid scrolls on narrow viewports (artifact min-width:600px) */
.cph-inner{min-width:600px;}

/* 4-column grid — When / Detail / Amount / Status (artifact 0.8 / 1.9 / 1.1 / 1fr) */
.cph-grid{grid-template-columns:0.8fr 1.9fr 1.1fr 1fr;}

/* Detail cell: id (strong, ellipsised) + chain·token (sub) */
.cph-detail{min-width:0;}
.cph-detail a{color:inherit;text-decoration:none;}
.cph-detail a:hover{color:var(--cp-accent);}

/* monospace hash/id helper inside cells */
.cph-mono{font-family:var(--cp-mono);font-variant-numeric:tabular-nums;}

/* "When" cell tone (artifact: fg-2, 500 weight) */
.cph-when{font:500 12.5px 'Poppins';color:var(--cp-fg-2);}

/* requested-action / muted inline value */
.cph-muted{color:var(--cp-fg-3);}
/* Notifications — page-scoped classes (artifact: isNotifications branch, lines 255-282). */

/* filter-bar select sits a touch shorter than the kit default, matching artifact (40px). */
.cpn-select{height:40px;font-size:13px;}

/* table grid */
.cpn-inner{min-width:680px;}
.cpn-grid{grid-template-columns:26px 0.7fr 0.85fr 2.5fr 1fr 0.6fr;}

/* unread dot */
.cpn-dot-cell{display:flex;align-items:center;}
.cpn-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--cp-brand,var(--cp-accent));display:block;flex:none;
}

/* title + body (body clamped to one line) */
.cpn-title-cell{padding-right:12px;}
.cpn-body{
  font:400 12px/1.5 'Poppins';color:var(--cp-fg-3);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
}

/* type column (small muted, single-line ellipsis) */
.cpn-type{
  font:500 11px 'Poppins';color:var(--cp-fg-3);
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* ============================================================================
 * cp-shell.css — fresh from Cryptrum Pay.dc.html. Source-of-truth tokens +
 * shell + dashboard classes. NO overrides on older classes; everything here
 * uses the .cp-* prefix (matches the artifact's own naming).
 *
 * As pages are rewritten one-by-one, the legacy dash- / wlt- / sb- etc.
 * classes in cryptrum.css get retired. This file is the new system.
 * ============================================================================ */

/* -------------------------------------------------------------------
 * Tokens — verbatim from artifact :root + :root[data-theme="dark"].
 * ------------------------------------------------------------------- */
:root,
:root[data-theme="light"]{
  --cp-accent:#16181D; --cp-accent-press:#000000; --cp-accent-fg:#FFFFFF;
  --cp-accent-soft:#EFEFF2; --cp-accent-soft2:#E5E5EA; --cp-brand:#3A6FF8;
  --cp-lav50:#F1F2F7;
  --cp-pos:#12A065; --cp-pos-soft:#E4F6EE;
  --cp-neg:#E5484D; --cp-neg-soft:#FCEBEB;
  --cp-warn:#B26B00; --cp-warn-soft:#FBF1DF; --cp-warn-ic:#E08A00;
  --cp-info:#2563EB; --cp-info-soft:#EAF0FE;

  --cp-bg:#ECECF0;
  --cp-bg-grad:linear-gradient(180deg,#F3F3F7 0%,#E8E8ED 100%);
  --cp-surface:#FFFFFF; --cp-surface2:#F6F6F9; --cp-hover:#F0F0F4;
  --cp-fg:#0E0F14; --cp-fg-2:#5C6170; --cp-fg-3:#969BA8;
  --cp-border:#ECECF1; --cp-border2:#E2E2E9;

  --cp-topbar:rgba(247,247,250,.72);

  /* Dark sidebar palette (lives inside light app) — local scope token-swap. */
  --cp-side-bg:#15171C; --cp-side-edge:#0B0C10;
  --cp-side-fg:#F4F6FA; --cp-side-fg2:#9AA1B0; --cp-side-fg3:#727A8C;
  --cp-side-border:rgba(255,255,255,.08);
  --cp-side-hover:rgba(255,255,255,.06);
  --cp-side-surf:rgba(255,255,255,.045);
  --cp-side-active:rgba(255,255,255,.10);
  --cp-side-accent:#FFFFFF;

  --cp-sh-sm:0 1px 2px rgba(16,18,28,.04),0 8px 22px rgba(16,18,28,.05);
  --cp-sh:0 14px 34px rgba(16,18,28,.07);
  --cp-sh-lg:0 24px 56px rgba(16,18,28,.12);
  --cp-sh-pop:0 14px 34px rgba(16,18,28,.12);

  --cp-mono:'Poppins',ui-monospace,monospace;
  --cp-sbw:250px;
  --cp-pad-page:24px;
  --cp-gap-2col:26px;
}
:root[data-theme="dark"]{
  --cp-accent:#F2F4F8; --cp-accent-press:#FFFFFF; --cp-accent-fg:#0E1014;
  --cp-accent-soft:#1E222C; --cp-accent-soft2:#272C38; --cp-brand:#5A8DEF;
  --cp-lav50:#15171E;
  --cp-pos:#34D399; --cp-pos-soft:#10261D;
  --cp-neg:#F76C6C; --cp-neg-soft:#2A1518;
  --cp-warn:#E5A33D; --cp-warn-soft:#2A2113; --cp-warn-ic:#E5A33D;
  --cp-info:#5A8DEF; --cp-info-soft:#16213A;

  --cp-bg:#08090C;
  --cp-bg-grad:radial-gradient(1100px 560px at 12% -8%,#15161C 0%,#0B0C10 52%,#08090C 100%);
  --cp-surface:#131419; --cp-surface2:#16181E; --cp-hover:#1C1E25;
  --cp-fg:#F3F5F9; --cp-fg-2:#A2A8B6; --cp-fg-3:#6E7484;
  --cp-border:#1E2027; --cp-border2:#2A2D37;

  --cp-topbar:rgba(14,15,19,.72);

  --cp-side-bg:#262B33; --cp-side-edge:#000000;
  --cp-side-fg:#F4F6FA; --cp-side-fg2:#A7AEBD; --cp-side-fg3:#7C8294;
  --cp-side-border:rgba(255,255,255,.09);
  --cp-side-hover:rgba(255,255,255,.06);
  --cp-side-surf:rgba(255,255,255,.05);
  --cp-side-active:rgba(255,255,255,.11);
  --cp-side-accent:#FFFFFF;

  --cp-sh-sm:0 1px 2px rgba(0,0,0,.35),0 8px 22px rgba(0,0,0,.4);
  --cp-sh:0 14px 34px rgba(0,0,0,.45);
  --cp-sh-lg:0 20px 50px rgba(0,0,0,.5);
  --cp-sh-pop:0 12px 32px rgba(0,0,0,.55);
}

/* -------------------------------------------------------------------
 * Reset / global helpers used by .cp-* classes (scoped tight, no body!).
 * ------------------------------------------------------------------- */
/* Global box model — verbatim from the artifact. WITHOUT this, width:100% +
   padding overflows the parent (e.g. .cp-content spilling past the viewport). */
*{box-sizing:border-box;}
/* Reset the browser's default body margin (8px). The artifact's preview sandbox
   strips this for free; a real browser does NOT — without it an 8px white frame
   shows around the 100vh app + adds 8px of scroll. background covers overscroll. */
html,body{margin:0;padding:0;}
body{min-height:100vh;background:var(--cp-bg);}
#root{min-height:100vh;}
@keyframes cp-kfade{from{opacity:0}to{opacity:1}}
@keyframes cp-kpop{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes cp-kfadeup{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes cp-kmenu{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes cp-kspin{to{transform:rotate(360deg)}}
@keyframes cp-shimmer{0%{background-position:-450px 0}100%{background-position:450px 0}}
/* hide scrollbars globally — scrolling still works (wheel / trackpad / shift+wheel).
   Verbatim from the artifact; removes the visible scrollbar + gray gutter. */
::-webkit-scrollbar{width:0;height:0;background:transparent;}
*{scrollbar-width:none;-ms-overflow-style:none;}

/* -------------------------------------------------------------------
 * SHELL — outer flex container, sidebar (dark), main column, topbar,
 * scrollable content area. Translates artifact's outer markup verbatim.
 * ------------------------------------------------------------------- */
.cp-shell{
  height:100vh;
  display:flex;
  overflow:hidden;
  font-family:'Poppins',system-ui,sans-serif;
  font-size:14px;
  color:var(--cp-fg);
  background:var(--cp-bg-grad);
  -webkit-font-smoothing:antialiased;
}

/* ---------- ASIDE (sidebar) ---------- */
.cp-aside{
  width:var(--cp-sbw);
  flex:none;
  background:var(--cp-side-bg);
  border-right:1px solid var(--cp-side-edge);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  color:var(--cp-side-fg);
  z-index:50;
}

.cp-aside-head{
  display:flex;align-items:center;gap:10px;
  padding:20px 18px 14px;
  height:64px;
  flex:none;
}
.cp-aside-logo{
  display:inline-flex;align-items:center;text-decoration:none;
}
.cp-aside-logo img{
  height:21px;
  object-fit:contain;
  flex:none;
  filter:brightness(0) invert(1);
}
.cp-aside-close{
  display:none;
  margin-left:auto;
  width:32px;height:32px;border-radius:9px;
  border:none;background:var(--cp-side-hover);
  color:var(--cp-side-fg2);
  align-items:center;justify-content:center;
  cursor:pointer;
}

.cp-aside-nav{
  flex:1;overflow-y:auto;
  padding:6px 12px 14px;
}
.cp-aside-nav::-webkit-scrollbar{width:6px;}
.cp-aside-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:6px;}

.cp-aside-sec{
  font:600 10.5px 'Poppins';
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--cp-side-fg3);
  padding:16px 12px 7px;
  white-space:nowrap;
}

/* Nav item — inactive */
.cp-aside-item{
  display:flex;align-items:center;gap:12px;
  width:100%;
  padding:9px 12px;
  border:none;border-radius:11px;
  background:transparent;
  color:var(--cp-side-fg2);
  font:500 13.5px 'Poppins';
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
  margin-bottom:2px;
  text-align:left;
  transition:background .15s,color .15s,box-shadow .15s,border-radius .15s;
}
.cp-aside-item:hover{
  background:var(--cp-side-hover);
  color:var(--cp-side-fg);
}
/* Active — artifact: solid bg + bold + 3px inset white left bar. */
.cp-aside-item.on{
  background:var(--cp-side-active);
  color:var(--cp-side-fg);
  font-weight:600;
  border-radius:10px;
  box-shadow:inset 3px 0 0 var(--cp-side-accent);
}
.cp-aside-item-ic{
  font-size:18px;
  display:inline-flex;align-items:center;justify-content:center;
  flex:none;
}
.cp-aside-item-lbl{flex:1;}
.cp-aside-item-badge{
  background:var(--cp-accent);
  color:var(--cp-accent-fg);
  font:600 10px 'Poppins';
  padding:1px 7px;border-radius:20px;
}
.cp-aside-item:not(.on) .cp-aside-item-badge{
  background:var(--cp-side-fg3);
  color:var(--cp-surface);
}

/* CPT card pinned to sidebar bottom */
.cp-cpt{
  flex:none;
  margin:0 14px 15px;
  display:flex;flex-direction:column;gap:3px;
  background:var(--cp-side-surf);
  border:1px solid var(--cp-side-border);
  border-radius:14px;
  padding:11px 13px 12px;
  text-decoration:none;color:inherit;
  transition:background .15s;
}
.cp-cpt:hover{background:var(--cp-side-hover);}
.cp-cpt-row{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:3px;
}
.cp-cpt-lbl{
  font:700 9px 'Poppins';
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--cp-side-fg3);
}
.cp-cpt-link{
  display:inline-flex;align-items:center;gap:3px;
  font:600 10.5px 'Poppins';
  color:var(--cp-side-fg);
  opacity:.85;
}
.cp-cpt:hover .cp-cpt-link{opacity:1;}
.cp-cpt-amt{
  font:700 20px 'Poppins';letter-spacing:-.5px;
  color:var(--cp-side-fg);
}
.cp-cpt-unit{
  font:600 11px 'Poppins';
  color:var(--cp-side-fg3);
  margin-left:5px;
}
.cp-cpt[data-low="1"] .cp-cpt-lbl{color:var(--cp-neg);}

/* Mobile backdrop (visible only when nav is open on narrow viewports) */
.cp-backdrop{
  position:fixed;inset:0;z-index:120;
  background:rgba(10,13,22,.45);
  animation:cp-kfade .18s ease;
  display:none;
}

/* ---------- MAIN COLUMN ---------- */
.cp-main{
  flex:1;
  display:flex;flex-direction:column;
  min-width:0;
  overflow:hidden;
}

/* ---------- TOPBAR ---------- */
.cp-topbar{
  height:64px;flex:none;
  display:flex;align-items:center;gap:16px;
  padding:0 24px;
  background:var(--cp-topbar);
  backdrop-filter:saturate(180%) blur(22px);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  border-bottom:1px solid var(--cp-border);
  position:relative;
  z-index:30;
}
.cp-burger{
  display:none;width:38px;height:38px;border-radius:10px;
  border:none;background:transparent;
  color:var(--cp-fg);
  align-items:center;justify-content:center;
  font-size:21px;cursor:pointer;
  flex:none;
}
.cp-burger:hover{background:var(--cp-hover);}

/* Breadcrumb — left side */
.cp-crumb{
  display:flex;align-items:center;gap:9px;
  font-size:14px;min-width:0;
}
.cp-crumb-section{color:var(--cp-fg-3);}
.cp-crumb-sep{color:var(--cp-fg-3);}
.cp-crumb-page{
  font-weight:600;font-size:15px;
  white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  color:var(--cp-fg);
}

.cp-topbar-spacer{flex:1;}
.cp-topbar-actions{display:flex;align-items:center;gap:6px;}

/* Notification bell trigger */
.cp-bell{
  width:40px;height:40px;border-radius:11px;
  border:none;background:transparent;
  color:var(--cp-fg-2);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:19px;
  position:relative;cursor:pointer;
}
.cp-bell:hover{background:var(--cp-hover);color:var(--cp-fg);}
.cp-bell-dot{
  position:absolute;top:9px;right:10px;
  width:7px;height:7px;border-radius:50%;
  background:var(--cp-neg);
  border:2px solid var(--cp-topbar);
}

/* Profile trigger */
.cp-prof-btn{
  display:flex;align-items:center;gap:10px;
  padding:5px 9px 5px 5px;
  border-radius:12px;
  background:transparent;border:none;
  cursor:pointer;
  font-family:inherit;color:inherit;
}
.cp-prof-btn:hover{background:var(--cp-hover);}
.cp-prof-av{
  width:34px;height:34px;border-radius:10px;
  background:var(--cp-accent-soft2);
  color:var(--cp-fg);
  display:flex;align-items:center;justify-content:center;
  font:600 13px 'Poppins';
  flex:none;
}
.cp-prof-meta{
  line-height:1.25;text-align:left;
  min-width:0;max-width:160px;
}
.cp-prof-name{
  display:block;
  font:600 13px 'Poppins';
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cp-prof-id{
  display:block;
  font:400 11px 'Poppins';
  color:var(--cp-fg-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cp-prof-chev{
  font-size:15px;color:var(--cp-fg-3);
  display:inline-flex;
}
.cp-prof-menu{
  position:absolute;top:52px;right:0;z-index:41;
  width:230px;
  background:var(--cp-surface);
  border:1px solid var(--cp-border);
  border-radius:14px;
  box-shadow:var(--cp-sh-pop);
  animation:cp-kmenu .14s ease;
  padding:6px;
}
.cp-prof-menu-head{
  padding:10px 11px 11px;
}
.cp-prof-menu-name{font:600 13px 'Poppins';}
.cp-prof-menu-email{font:400 11.5px 'Poppins';color:var(--cp-fg-3);}
.cp-prof-menu-item{
  display:flex;align-items:center;gap:11px;
  width:100%;
  padding:9px 11px;
  border:none;border-radius:9px;
  background:none;color:var(--cp-fg);
  font:500 13px 'Poppins';
  text-align:left;
  cursor:pointer;
  text-decoration:none;
}
.cp-prof-menu-item:hover{background:var(--cp-hover);}
.cp-prof-menu-item-ic{
  font-size:16px;color:var(--cp-fg-3);
  display:inline-flex;
}
.cp-prof-menu-divider{
  height:1px;background:var(--cp-border);margin:6px 4px;
}
.cp-prof-menu-item.danger{color:var(--cp-neg);}
.cp-prof-menu-item.danger:hover{background:var(--cp-neg-soft);}
.cp-prof-menu-item.danger .cp-prof-menu-item-ic{color:var(--cp-neg);}

.cp-prof-menu-overlay{
  position:fixed;inset:0;z-index:40;
}

/* ---------- CONTENT SCROLL AREA ---------- */
.cp-scroll{
  flex:1;overflow-y:auto;
}
.cp-content{
  padding:var(--cp-pad-page) 32px 52px;
  max-width:1320px;
  margin:0 auto;
  width:100%;
}

/* -------------------------------------------------------------------
 * RESPONSIVE
 * ------------------------------------------------------------------- */
@media (max-width:860px){
  .cp-burger{display:inline-flex;}
  .cp-aside{
    position:fixed!important;
    left:0;top:0;bottom:0;
    height:100dvh;
    z-index:130;
    transform:translateX(-100%);
    transition:transform .26s cubic-bezier(.4,0,.2,1);
    box-shadow:var(--cp-sh-lg);
  }
  .cp-aside[data-open="1"]{transform:translateX(0);}
  .cp-aside-close{display:inline-flex;}
  .cp-backdrop{display:block;}
  .cp-prof-meta{display:none;}
}
@media (max-width:560px){
  .cp-content{padding-left:16px;padding-right:16px;}
}

/* ===================================================================
 * DASHBOARD — exact translation of artifact's isDashboard branch.
 * Use the .cpd- prefix (cp-dashboard) so dashboard classes are isolated
 * from the rest of the .cp-* shell namespace.
 * =================================================================== */
.cpd-hello{margin-bottom:22px;animation:cp-kfadeup .5s ease both;}
.cpd-eyebrow{
  font:700 11px 'Poppins';
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--cp-accent);
}
.cpd-h1{
  font:600 26px 'Poppins';
  margin:8px 0 0;letter-spacing:-.5px;
}
.cpd-sub{
  margin:5px 0 0;
  color:var(--cp-fg-2);
  font-size:14px;
}

/* KPI grids — first row 4 today, second row 4 lifetime. Both 4-col, gap 14. */
.cpd-grid4{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-bottom:14px;
  animation:cp-kfadeup .5s ease both;
}
.cpd-grid4--lifetime{
  margin-bottom:24px;
  animation-delay:.06s;
}
@media (max-width:900px){.cpd-grid4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.cpd-grid4{grid-template-columns:1fr;}}

.cpd-kpi{
  background:var(--cp-surface);
  border:1px solid var(--cp-border);
  border-radius:15px;
  padding:14px 15px;
  box-shadow:var(--cp-sh-sm);
  min-width:0;
  transition:transform .18s ease,box-shadow .18s ease;
  text-decoration:none;color:inherit;
}
.cpd-kpi:hover{transform:translateY(-3px);box-shadow:var(--cp-sh);}
.cpd-kpi-head{display:flex;align-items:center;gap:10px;margin-bottom:13px;}
.cpd-kpi-ic{
  width:38px;height:38px;border-radius:50%;
  background:var(--cp-accent-soft);
  color:var(--cp-accent);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:18px;flex:none;
}
.cpd-kpi-lbl{
  font:500 12.5px 'Poppins';
  color:var(--cp-fg-2);
}
.cpd-kpi-vrow{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;}
.cpd-kpi-val{
  font:600 24px/1 var(--cp-mono);
  letter-spacing:-.5px;
  color:var(--cp-fg);
}
.cpd-kpi-delta{
  display:inline-flex;align-items:center;gap:2px;
  font:600 11.5px 'Poppins';
}
.cpd-kpi-delta.up{color:var(--cp-pos);}
.cpd-kpi-delta.down{color:var(--cp-neg);}

.cpd-kpi--lifetime{
  border-radius:16px;padding:16px 18px;
}
.cpd-kpi--lifetime .cpd-kpi-ic{
  width:32px;height:32px;border-radius:9px;
  background:var(--cp-hover);color:var(--cp-fg-2);
  font-size:16px;
}
.cpd-kpi--lifetime .cpd-kpi-val{font-size:20px;}
.cpd-kpi-sub{
  font:400 11.5px 'Poppins';
  color:var(--cp-fg-3);
  margin-top:6px;
}

/* 2-col layout: Sales report (left) + Balances panel (right) */
.cpd-2col{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:var(--cp-gap-2col);
  align-items:start;
  margin-bottom:30px;
  animation:cp-kfadeup .5s ease both;
  animation-delay:.08s;
}
@media (max-width:900px){.cpd-2col{grid-template-columns:1fr;}}

/* Sales report card */
.cpd-report{
  min-width:0;
}
.cpd-report-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:8px;
}
.cpd-report-title{font:600 18px 'Poppins';margin:0;}
.cpd-report-cap{
  font:400 13px 'Poppins';color:var(--cp-fg-3);margin-top:3px;
}
.cpd-report-pick{
  display:inline-flex;align-items:center;gap:8px;
  height:34px;padding:0 13px;
  border-radius:10px;
  background:var(--cp-surface);
  border:1px solid var(--cp-border);
  color:var(--cp-fg);
  font:600 12px 'Poppins';
  cursor:pointer;
  box-shadow:var(--cp-sh-sm);
}
.cpd-report-pick:hover{background:var(--cp-hover);}

.cpd-report-figrow{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  margin:6px 0 16px;
}
.cpd-report-fig{
  display:flex;align-items:baseline;gap:4px;
}
.cpd-report-fig-whole{
  font:600 36px/1 var(--cp-mono);
  letter-spacing:-1.4px;
}
.cpd-report-fig-cents{
  font:600 19px var(--cp-mono);
  color:var(--cp-fg-3);
}
.cpd-report-delta{
  display:inline-flex;align-items:center;gap:5px;
  font:600 13px 'Poppins';margin-top:7px;
}
.cpd-report-delta.up{color:var(--cp-pos);}
.cpd-report-delta.down{color:var(--cp-neg);}

.cpd-range-tabs{
  display:inline-flex;
  background:var(--cp-surface2);
  border:1px solid var(--cp-border);
  border-radius:11px;
  padding:3px;
  gap:2px;flex-wrap:wrap;
}
.cpd-range-tabs button{
  font:600 12px 'Poppins';
  padding:6px 12px;
  border-radius:8px;
  background:transparent;
  color:var(--cp-fg-2);
  border:none;
  cursor:pointer;
  white-space:nowrap;
}
.cpd-range-tabs button:hover{color:var(--cp-fg);}
.cpd-range-tabs button.on{
  background:var(--cp-surface);
  color:var(--cp-fg);
  box-shadow:var(--cp-sh-sm);
}

.cpd-chart{
  position:relative;
  height:220px;padding-top:8px;
}
.cpd-chart svg{width:100%;height:100%;display:block;overflow:visible;}
.cpd-chart-skel{
  width:100%;height:220px;border-radius:14px;
  background:linear-gradient(90deg,var(--cp-surface2) 25%,var(--cp-hover) 37%,var(--cp-surface2) 63%);
  background-size:450px 100%;
  animation:cp-shimmer 1.2s linear infinite;
}
.cpd-chart-empty{
  width:100%;height:220px;
  display:flex;align-items:center;justify-content:center;
  color:var(--cp-fg-3);font-size:13px;
}
.cpd-chart-tip{
  position:absolute;
  transform:translate(-50%,-120%);
  background:#0E1117;color:#fff;
  border-radius:13px;
  padding:10px 13px;
  box-shadow:0 14px 30px rgba(8,12,24,.3);
  pointer-events:none;white-space:nowrap;
  z-index:3;
}
.cpd-chart-tip-when{font:600 12px 'Poppins';margin-bottom:7px;}
.cpd-chart-tip-row{
  display:flex;align-items:center;gap:7px;margin-top:4px;
}
.cpd-chart-tip-sw{
  width:8px;height:8px;border-radius:2px;
  display:block;flex:none;
}
.cpd-chart-tip-val{font:600 11.5px 'Poppins';color:#fff;}
.cpd-chart-tip-lab{font:400 11.5px 'Poppins';color:#9aa1b2;}

.cpd-months{
  display:flex;justify-content:space-between;
  padding:10px 4px 0;
}
.cpd-months span{
  font:500 11px 'Poppins';color:var(--cp-fg-3);
}

/* Balances panel (right column) */
.cpd-bal{min-width:0;}
.cpd-bal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:2px 2px 12px;
}
.cpd-bal-title{font:600 16px 'Poppins';}
.cpd-bal-cap{font:400 11.5px 'Poppins';color:var(--cp-fg-3);margin-top:2px;}
.cpd-bal-all{
  display:inline-flex;align-items:center;gap:4px;
  font:600 12px 'Poppins';
  color:var(--cp-accent);
  background:none;border:none;
  cursor:pointer;text-decoration:none;
}
.cpd-bal-list{padding:0 2px;}
.cpd-bal-row{
  display:flex;align-items:center;gap:11px;
  padding:11px 0;
  border-top:1px solid var(--cp-border);
}
.cpd-bal-row:first-child{border-top:none;}
.cpd-bal-row-meta{min-width:0;flex:1;}
.cpd-bal-row-name{font:600 12.5px 'Poppins';}
.cpd-bal-row-sub{font:400 11px 'Poppins';color:var(--cp-fg-3);margin-top:2px;}
.cpd-bal-row-amt{text-align:right;}
.cpd-bal-row-usd{font:600 12.5px 'Poppins';}
.cpd-bal-row-pct{font:400 11px 'Poppins';color:var(--cp-fg-3);margin-top:2px;}

.cpd-bal-ctas{
  display:flex;flex-direction:column;gap:10px;
  margin-top:18px;
}
.cpd-cta-pri{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;
  border-radius:12px;
  background:var(--cp-accent);border:none;
  color:var(--cp-accent-fg);
  font:600 13.5px 'Poppins';
  cursor:pointer;
  text-decoration:none;
}
.cpd-cta-pri:hover{background:var(--cp-accent-press);}
.cpd-cta-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;
  border-radius:12px;
  background:var(--cp-surface);
  border:1px solid var(--cp-border2);
  color:var(--cp-fg);
  font:600 13.5px 'Poppins';
  cursor:pointer;
  text-decoration:none;
}
.cpd-cta-ghost:hover{background:var(--cp-hover);}

/* Recent transactions table (div-grid) */
.cpd-recent{
  animation:cp-kfadeup .5s ease both;animation-delay:.16s;
}
.cpd-recent-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 2px 14px;
}
.cpd-recent-title{font:600 16px 'Poppins';}
.cpd-recent-cap{font:400 12px 'Poppins';color:var(--cp-fg-3);margin-top:2px;}
.cpd-recent-wrap{overflow-x:auto;}
.cpd-recent-inner{min-width:560px;}
.cpd-recent-grid{
  display:grid;
  grid-template-columns:1.8fr 1fr 1.4fr 1.1fr 1fr;
  align-items:center;
  padding:0 2px;
}
.cpd-recent-grid.head > div{
  font:600 10.5px 'Poppins';
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--cp-fg-3);
  padding:12px 0;
}
.cpd-recent-grid.row{
  border-top:1px solid var(--cp-border);
  text-decoration:none;
  color:inherit;
}
.cpd-recent-grid.row:hover{background:var(--cp-hover);}
.cpd-recent-grid.row > div{padding:13px 0;min-width:0;}
.cpd-recent-cp-name{
  font:600 13px 'Poppins';
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cpd-recent-cp-sub{
  font:400 11.5px 'Poppins';color:var(--cp-fg-3);
}
.cpd-recent-chain{
  font:600 10.5px 'Poppins';
  letter-spacing:.04em;
  color:var(--cp-fg-2);
  background:var(--cp-hover);
  padding:3px 8px;border-radius:7px;
  display:inline-block;
}
.cpd-recent-asset{display:flex;align-items:center;gap:8px;}
.cpd-recent-token{font:600 12.5px 'Poppins';}
.cpd-r{text-align:right;}
.cpd-recent-amt{font:600 12.5px 'Poppins';}
.cpd-recent-fiat{font:400 11px 'Poppins';color:var(--cp-fg-3);}

/* Status pills (shared) */
.cpd-pill{
  font:600 11px 'Poppins';
  padding:4px 9px;
  border-radius:20px;
}
.cpd-pill.ok  {color:var(--cp-pos); background:var(--cp-pos-soft);}
.cpd-pill.pend{color:var(--cp-warn);background:var(--cp-warn-soft);}
.cpd-pill.fail{color:var(--cp-neg); background:var(--cp-neg-soft);}

/* Empty / loading helpers */
.cpd-empty{
  padding:30px 16px;text-align:center;
  color:var(--cp-fg-3);font-size:13px;
}
.cpd-loading{
  display:flex;flex-direction:column;gap:14px;padding:8px 0;
}
.cpd-sk{
  height:84px;border-radius:14px;
  background:linear-gradient(90deg,var(--cp-surface2) 25%,var(--cp-hover) 37%,var(--cp-surface2) 63%);
  background-size:450px 100%;
  animation:cp-shimmer 1.2s linear infinite;
}
.cpd-error{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px;
  border:1px solid var(--cp-neg);
  background:var(--cp-neg-soft);color:var(--cp-neg);
  border-radius:14px;
}
/* ============================================================================
 * cp-kit.css — shared component primitives, derived verbatim from the repeated
 * inline-style patterns in Cryptrum Pay.dc.html (page headers, buttons, inputs,
 * selects, cards, pills, div-grid tables, tabs, segmented controls, modal chrome,
 * dropdown menus, toggles, copy rows, empty/skeleton/error states).
 *
 * Every rebuilt page composes these classes (+ a small page-scoped CSS file for
 * its grid-template-columns and one-off bits). Tokens come from cp-shell.css
 * (--cp-*). NO page should reintroduce inline styles except genuinely dynamic
 * values (progress widths, chart stop offsets, tooltip positions).
 * ========================================================================== */

/* -------------------------------------------------------------------
 * PAGE HEADER — eyebrow + h1 + sub. (artifact: every screen top block)
 * ------------------------------------------------------------------- */
.cp-head{margin-bottom:22px;}
.cp-eyebrow{
  font:700 11px 'Poppins';
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--cp-accent);
}
.cp-h1{font:600 26px 'Poppins';margin:8px 0 0;letter-spacing:-.5px;}
.cp-sub{margin:6px 0 0;color:var(--cp-fg-2);font-size:13.5px;line-height:1.6;max-width:680px;}

/* Section header (smaller, inside a page) */
.cp-h2{font:600 18px 'Poppins';margin:0;}
.cp-cap{font:400 13px 'Poppins';color:var(--cp-fg-3);margin-top:3px;}
.cp-label-uc{
  font:600 11px 'Poppins';letter-spacing:.04em;text-transform:uppercase;
  color:var(--cp-fg-3);
}

/* Row that holds a title block on the left and an action on the right */
.cp-rowbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:14px;
}

/* numeric helper (tabular) */
.cp-num{font-family:var(--cp-mono);font-variant-numeric:tabular-nums;}

/* generic stagger entrance */
.cp-fadeup{animation:cp-kfadeup .5s ease both;}

/* small utilities (avoid inline style for static spacing/transforms) */
.cp-capitalize{text-transform:capitalize;}
.cp-mb-sm{margin-bottom:11px;}
.cp-mb{margin-bottom:16px;}
.cp-mb-lg{margin-bottom:18px;}
.cp-rowbar .cp-head{margin-bottom:0;}
.cp-copy a{color:inherit;text-decoration:none;}

/* -------------------------------------------------------------------
 * BUTTONS
 * ------------------------------------------------------------------- */
.cp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:40px;padding:0 16px;
  border:none;border-radius:11px;
  background:var(--cp-accent);color:var(--cp-accent-fg);
  font:600 13px 'Poppins';
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .15s,transform .15s,box-shadow .15s,opacity .15s;
}
.cp-btn:hover{background:var(--cp-accent-press);}
.cp-btn:disabled{opacity:.55;cursor:not-allowed;}
.cp-btn-lg{height:46px;border-radius:12px;font-size:14px;width:100%;}
.cp-btn-sm{height:34px;padding:0 13px;border-radius:10px;font-size:12px;}

.cp-btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:40px;padding:0 15px;
  border:1px solid var(--cp-border2);border-radius:11px;
  background:var(--cp-surface);color:var(--cp-fg);
  font:600 12.5px 'Poppins';
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .15s,border-color .15s;
}
.cp-btn-ghost:hover{background:var(--cp-hover);}
.cp-btn-ghost.cp-btn-lg{height:46px;border-radius:12px;font-size:13.5px;width:100%;}
.cp-btn-ghost.cp-btn-sm{height:34px;padding:0 13px;border-radius:10px;font-size:12px;}

/* tiny chip button (Dismiss / inline) */
.cp-btn-chip{
  height:28px;padding:0 10px;border-radius:8px;
  background:var(--cp-surface);border:1px solid var(--cp-border2);
  color:var(--cp-fg-2);font:600 11px 'Poppins';cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  transition:background .15s,color .15s;
}
.cp-btn-chip:hover{background:var(--cp-hover);color:var(--cp-fg);}

.cp-btn-danger{
  background:var(--cp-neg);color:#fff;
}
.cp-btn-danger:hover{background:var(--cp-neg);filter:brightness(.92);}
.cp-btn-ghost.cp-danger{color:var(--cp-neg);border-color:var(--cp-neg);}
.cp-btn-ghost.cp-danger:hover{background:var(--cp-neg-soft);}

/* square icon button (topbar-style, in-content) */
.cp-iconbtn{
  width:40px;height:40px;border-radius:11px;
  border:none;background:transparent;color:var(--cp-fg-2);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:18px;
  transition:background .15s,color .15s;
}
.cp-iconbtn:hover{background:var(--cp-hover);color:var(--cp-fg);}

/* "view all →" subtle text link/button */
.cp-link{
  display:inline-flex;align-items:center;gap:5px;
  font:600 12.5px 'Poppins';color:var(--cp-accent);
  background:none;border:none;cursor:pointer;text-decoration:none;
}
.cp-link:hover{opacity:.85;}

/* -------------------------------------------------------------------
 * FORM FIELDS
 * ------------------------------------------------------------------- */
.cp-field{display:block;margin-bottom:16px;}
.cp-field-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px;}
.cp-field-row > .cp-field,.cp-field-row > label{flex:1;min-width:140px;margin-bottom:0;}
.cp-label{display:block;font:600 12.5px 'Poppins';margin-bottom:7px;color:var(--cp-fg);}
.cp-help{font:400 11.5px 'Poppins';color:var(--cp-fg-3);margin-top:8px;}

/* Compact inline alert — used inline in setting-rows to flag validation gaps
   before save (e.g. Phase 28 auto-convert enabled with missing dest fields). */
.cp-alert{
  padding:9px 12px;
  border-radius:10px;
  font:500 12px 'Poppins';
  line-height:1.45;
}
.cp-alert-warn{background:var(--cp-warn-soft);color:var(--cp-warn);}
.cp-alert-neg {background:var(--cp-neg-soft); color:var(--cp-neg);}
.cp-alert-info{background:var(--cp-info-soft);color:var(--cp-info);}

.cp-input,.cp-select,.cp-textarea{
  width:100%;height:42px;padding:0 14px;
  border:1px solid var(--cp-border2);border-radius:10px;
  background:var(--cp-surface2);color:var(--cp-fg);
  font:400 13.5px 'Poppins';outline:none;
  transition:border-color .15s,background .15s;
}
.cp-input::placeholder,.cp-textarea::placeholder{color:var(--cp-fg-3);}
.cp-input:focus,.cp-select:focus,.cp-textarea:focus{
  border-color:var(--cp-accent);background:var(--cp-surface);
}
.cp-textarea{height:auto;min-height:96px;padding:11px 14px;line-height:1.55;resize:vertical;}

.cp-select{
  appearance:none;-webkit-appearance:none;
  padding-right:34px;cursor:pointer;font-weight:500;
}
.cp-select-wrap{position:relative;display:block;}
.cp-select-chev{
  position:absolute;right:11px;top:50%;transform:translateY(-50%);
  pointer-events:none;font-size:15px;color:var(--cp-fg-3);
  display:inline-flex;
}

/* amount input with token suffix + optional MAX */
.cp-amount{
  display:flex;align-items:center;overflow:hidden;
  border:1px solid var(--cp-border2);border-radius:11px;
  background:var(--cp-surface2);
  transition:border-color .15s,background .15s;
}
.cp-amount:focus-within{border-color:var(--cp-accent);background:var(--cp-surface);}
.cp-amount input{
  flex:1;min-width:0;height:46px;border:none;background:none;outline:none;
  padding:0 14px;font:600 17px 'Poppins';color:var(--cp-fg);
}
.cp-amount-suffix{
  padding:0 15px;color:var(--cp-fg-3);font:600 13px 'Poppins';
  border-left:1px solid var(--cp-border);white-space:nowrap;
}
.cp-amount-max{
  border:none;background:none;color:var(--cp-accent);
  font:700 11px 'Poppins';letter-spacing:.05em;cursor:pointer;padding:0 8px;
}

/* toggle switch */
.cp-switch{
  position:relative;width:42px;height:24px;border-radius:20px;flex:none;
  background:var(--cp-border2);border:none;cursor:pointer;padding:0;
  transition:background .18s;
}
.cp-switch::after{
  content:"";position:absolute;top:3px;left:3px;
  width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .18s;
}
.cp-switch[data-on="1"]{background:var(--cp-accent);}
.cp-switch[data-on="1"]::after{transform:translateX(18px);}
.cp-switch:disabled{opacity:.5;cursor:not-allowed;}

/* centered 2FA / OTP code input */
.cp-code-input{text-align:center;font-family:var(--cp-mono);letter-spacing:4px;font-size:15px;}
.cp-code-input.recovery{letter-spacing:0;}

/* toggle card (text block + switch on the right) */
.cp-toggle-card{display:flex;align-items:center;justify-content:space-between;gap:14px;}
.cp-toggle-card .cp-toggle-t{font:600 14px 'Poppins';}
.cp-toggle-card .cp-toggle-d{font:400 12px/1.5 'Poppins';color:var(--cp-fg-3);margin-top:3px;}
.cp-toggle-state{font:500 12px 'Poppins';color:var(--cp-fg-2);}
.cp-toggle-state.off{color:var(--cp-neg);}

/* -------------------------------------------------------------------
 * CARDS / PANELS
 * ------------------------------------------------------------------- */
.cp-card{
  background:var(--cp-surface);border:1px solid var(--cp-border);
  border-radius:16px;padding:18px;box-shadow:var(--cp-sh-sm);
}
.cp-card-pad-lg{padding:22px 24px;}
.cp-card-flat{box-shadow:none;}

/* soft inset row block (e.g. "Available 1,234 USDT") */
.cp-inset{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 14px;background:var(--cp-surface2);border-radius:11px;
  font:500 12.5px 'Poppins';color:var(--cp-fg-2);
}
.cp-inset strong{color:var(--cp-fg);font-weight:600;}

/* key/value divider row (modal summaries, detail lists) */
.cp-kv{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 0;border-top:1px solid var(--cp-border);font-size:13px;
}
.cp-kv-k{color:var(--cp-fg-2);}
.cp-kv-v{font-weight:600;}

/* note / callout banners */
.cp-note{
  padding:11px 14px;border-radius:11px;
  font:400 12px/1.6 'Poppins';color:var(--cp-fg-3);
  background:var(--cp-surface2);
}
.cp-note-ok{
  display:flex;align-items:center;gap:9px;
  background:var(--cp-pos-soft);color:var(--cp-pos);
  font:600 12.5px 'Poppins';padding:11px 14px;border-radius:11px;
}
.cp-note-info{
  display:flex;align-items:flex-start;gap:9px;
  background:var(--cp-info-soft);color:var(--cp-info);
  font:500 12.5px/1.55 'Poppins';padding:11px 14px;border-radius:11px;
}
.cp-note-warn{
  display:flex;align-items:flex-start;gap:9px;
  background:var(--cp-warn-soft);color:var(--cp-warn);
  font:500 12.5px/1.55 'Poppins';padding:11px 14px;border-radius:11px;
}

/* copy field (checkout url, deposit address) */
.cp-copy{
  display:flex;align-items:center;gap:10px;
  background:var(--cp-surface2);border:1px solid var(--cp-border);
  border-radius:11px;padding:0 8px 0 14px;height:46px;
}
.cp-copy code{
  flex:1;min-width:0;font:400 12px 'Poppins';color:var(--cp-fg);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cp-copy-btn{
  height:34px;padding:0 13px;border-radius:9px;border:none;
  background:var(--cp-surface);color:var(--cp-fg-2);
  font:600 12px 'Poppins';cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;flex:none;
  transition:color .15s,background .15s;
}
.cp-copy-btn:hover{color:var(--cp-accent);background:var(--cp-hover);}

/* -------------------------------------------------------------------
 * PILLS / TAGS
 * ------------------------------------------------------------------- */
.cp-pill{
  font:600 11px 'Poppins';padding:4px 9px;border-radius:20px;
  display:inline-block;white-space:nowrap;text-transform:capitalize;
}
.cp-pill-sm{padding:3px 9px;}
.cp-pill.ok  {color:var(--cp-pos); background:var(--cp-pos-soft);}
.cp-pill.pend{color:var(--cp-warn);background:var(--cp-warn-soft);}
.cp-pill.fail{color:var(--cp-neg); background:var(--cp-neg-soft);}
.cp-pill.info{color:var(--cp-info);background:var(--cp-info-soft);}
.cp-pill.neutral{color:var(--cp-fg-2);background:var(--cp-hover);}

/* chain tag (square-ish) */
.cp-tag{
  font:600 10.5px 'Poppins';letter-spacing:.04em;
  color:var(--cp-fg-2);background:var(--cp-hover);
  padding:3px 8px;border-radius:7px;display:inline-block;white-space:nowrap;
  text-transform:capitalize;
}
.cp-tag-outline{
  background:var(--cp-surface2);border:1px solid var(--cp-border);
  color:var(--cp-fg-2);font-weight:500;font-size:11.5px;
}

/* small round icon chip */
.cp-chip-ic{
  width:32px;height:32px;border-radius:9px;flex:none;
  background:var(--cp-accent-soft);color:var(--cp-accent);
  display:inline-flex;align-items:center;justify-content:center;font-size:15px;
}
.cp-chip-ic.round{border-radius:50%;}
.cp-avatar-ini{
  width:38px;height:38px;border-radius:10px;flex:none;
  background:var(--cp-accent-soft2);color:var(--cp-fg);
  display:inline-flex;align-items:center;justify-content:center;
  font:600 13px 'Poppins';
}

/* -------------------------------------------------------------------
 * DIV-GRID TABLE — shared header/row chrome. Each page sets the grid
 * columns via its own class (grid-template-columns) on .cp-grid.
 * ------------------------------------------------------------------- */
.cp-table-wrap{overflow-x:auto;}
.cp-grid{display:grid;align-items:center;padding:0 2px;}
.cp-thead > div,.cp-th{
  font:600 10.5px 'Poppins';letter-spacing:.05em;text-transform:uppercase;
  color:var(--cp-fg-3);padding:12px 0;
}
.cp-th.r,.cp-r{text-align:right;}
.cp-trow{
  border-top:1px solid var(--cp-border);
  text-decoration:none;color:inherit;
  transition:background .12s;
}
.cp-trow.clickable{cursor:pointer;}
.cp-trow:hover{background:var(--cp-hover);}
.cp-trow > div{padding:13px 0;min-width:0;}
.cp-cell-strong{font:600 13px 'Poppins';overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cp-cell-sub{font:400 11.5px 'Poppins';color:var(--cp-fg-3);margin-top:2px;}
.cp-cell-amt{font:600 12.5px 'Poppins';}
.cp-cell-fiat{font:400 11px 'Poppins';color:var(--cp-fg-3);margin-top:2px;}

/* -------------------------------------------------------------------
 * TABS (underline) + SEGMENTED control + FILTER bar
 * ------------------------------------------------------------------- */
.cp-tabs{
  display:flex;gap:22px;align-items:center;
  border-bottom:1px solid var(--cp-border);margin-bottom:18px;
  overflow-x:auto;
}
.cp-tab{
  position:relative;padding:0 0 12px;
  background:none;border:none;cursor:pointer;white-space:nowrap;
  font:600 13.5px 'Poppins';color:var(--cp-fg-3);
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .15s;
}
.cp-tab:hover{color:var(--cp-fg-2);}
.cp-tab.on{color:var(--cp-fg);border-bottom-color:var(--cp-accent);}

/* segmented (range / view switch) */
.cp-seg{
  display:inline-flex;background:var(--cp-surface2);
  border:1px solid var(--cp-border);border-radius:11px;padding:3px;gap:2px;
  flex-wrap:wrap;
}
.cp-seg button{
  font:600 12px 'Poppins';padding:6px 12px;border-radius:8px;
  background:transparent;color:var(--cp-fg-2);border:none;cursor:pointer;
  white-space:nowrap;transition:color .15s;
}
.cp-seg button:hover{color:var(--cp-fg);}
.cp-seg button.on{background:var(--cp-surface);color:var(--cp-fg);box-shadow:var(--cp-sh-sm);}

/* filter dropdown bar (e.g. Notifications / Settlements) */
.cp-filters{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap;}
.cp-filters .cp-spacer{flex:1;}
.cp-count{font:500 12.5px 'Poppins';color:var(--cp-fg-3);}

/* -------------------------------------------------------------------
 * MODAL CHROME
 * ------------------------------------------------------------------- */
.cp-modal-overlay{
  position:fixed;inset:0;z-index:95;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(10,13,22,.5);animation:cp-kfade .18s ease;
}
.cp-modal{
  background:var(--cp-surface);border-radius:20px;width:100%;max-width:480px;
  box-shadow:var(--cp-sh-lg);animation:cp-kpop .22s ease;
  max-height:92vh;overflow-y:auto;
}
.cp-modal-sm{max-width:460px;}
.cp-modal-lg{max-width:500px;}
.cp-modal-xl{max-width:620px;}
.cp-modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:20px 24px;border-bottom:1px solid var(--cp-border);
}
.cp-modal-title{font:600 16px 'Poppins';margin:0;}
.cp-modal-x{
  width:32px;height:32px;border-radius:9px;border:none;
  background:var(--cp-hover);color:var(--cp-fg-2);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:17px;cursor:pointer;flex:none;
}
.cp-modal-x:hover{color:var(--cp-fg);}
.cp-modal-body{padding:22px 24px;}
.cp-modal-foot{padding:16px 24px;border-top:1px solid var(--cp-border);}
.cp-modal-foot.actions{display:flex;gap:10px;justify-content:flex-end;}

/* -------------------------------------------------------------------
 * MENU / DROPDOWN (in-content popovers)
 * ------------------------------------------------------------------- */
.cp-pop-overlay{position:fixed;inset:0;z-index:40;}
.cp-pop{
  position:absolute;z-index:41;min-width:200px;
  background:var(--cp-surface);border:1px solid var(--cp-border);
  border-radius:14px;box-shadow:var(--cp-sh-pop);
  animation:cp-kmenu .14s ease;padding:6px;
}
.cp-pop-item{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:9px 11px;border:none;border-radius:9px;
  background:none;color:var(--cp-fg);font:500 13px 'Poppins';
  text-align:left;cursor:pointer;text-decoration:none;
}
.cp-pop-item:hover{background:var(--cp-hover);}

/* -------------------------------------------------------------------
 * STATE BLOCKS — empty / skeleton / error / loading
 * ------------------------------------------------------------------- */
.cp-empty{
  padding:42px 16px;text-align:center;
  color:var(--cp-fg-3);font-size:13px;
  border-top:1px solid var(--cp-border);
}
.cp-empty-hero{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;min-height:46vh;gap:6px;
}
.cp-empty-hero .cp-empty-ic{
  width:62px;height:62px;border-radius:18px;margin-bottom:12px;
  background:var(--cp-surface);border:1px solid var(--cp-border);
  box-shadow:var(--cp-sh-sm);display:inline-flex;align-items:center;justify-content:center;
  font-size:26px;color:var(--cp-accent);
}
.cp-empty-hero h2{font:600 19px 'Poppins';margin:6px 0 8px;}
.cp-empty-hero p{margin:0 0 20px;color:var(--cp-fg-2);font-size:13.5px;line-height:1.6;max-width:380px;}

.cp-skel{
  border-radius:14px;
  background:linear-gradient(90deg,var(--cp-surface2) 25%,var(--cp-hover) 37%,var(--cp-surface2) 63%);
  background-size:450px 100%;animation:cp-shimmer 1.2s linear infinite;
}
.cp-skel-list{display:flex;flex-direction:column;gap:12px;padding:8px 0;}
.cp-skel-row{height:64px;}

.cp-error{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:14px 16px;border:1px solid var(--cp-neg);
  background:var(--cp-neg-soft);color:var(--cp-neg);border-radius:14px;
}

/* pager */
.cp-pager{
  display:flex;align-items:center;justify-content:flex-end;gap:10px;
  padding:16px 2px 0;font:500 12.5px 'Poppins';color:var(--cp-fg-3);
}

/* generic 2-col content grid that collapses on narrow */
.cp-2col{display:grid;grid-template-columns:1fr 1fr;gap:var(--cp-gap-2col);align-items:start;}
@media (max-width:760px){.cp-2col{grid-template-columns:1fr;}}

/* -------------------------------------------------------------------
 * SHARED COMPONENT: CountryDropdown (searchable select)
 * ------------------------------------------------------------------- */
.cp-cdd{position:relative;}
.cp-cdd-trigger{
  display:flex;align-items:center;gap:9px;width:100%;height:42px;
  padding:0 12px 0 14px;border:1px solid var(--cp-border2);border-radius:10px;
  background:var(--cp-surface2);color:var(--cp-fg);font:500 13.5px 'Poppins';
  cursor:pointer;outline:none;transition:border-color .15s,background .15s;
}
.cp-cdd-trigger:disabled{opacity:.6;cursor:not-allowed;}
.cp-cdd[data-open="1"] .cp-cdd-trigger,.cp-cdd-trigger:focus{border-color:var(--cp-accent);background:var(--cp-surface);}
.cp-cdd-name{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cp-cdd-ph{flex:1;text-align:left;color:var(--cp-fg-3);}
.cp-cdd-flag{font-size:18px;flex:none;}
.cp-cdd-dial{font:500 12px var(--cp-mono);color:var(--cp-fg-3);}
.cp-cdd-chev{display:inline-flex;color:var(--cp-fg-3);flex:none;}
.cp-cdd-chev svg{width:16px;height:16px;display:block;}
.cp-cdd-menu{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:1050;
  max-height:320px;display:flex;flex-direction:column;
  background:var(--cp-surface);border:1px solid var(--cp-border);border-radius:12px;
  box-shadow:var(--cp-sh-pop);animation:cp-kmenu .14s ease;overflow:hidden;
}
.cp-cdd-search{padding:8px;border-bottom:1px solid var(--cp-border);}
.cp-cdd-list{overflow-y:auto;flex:1;padding:5px;}
.cp-cdd-opt{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:8px 10px;border:none;border-radius:8px;background:none;
  color:var(--cp-fg);font:500 13px 'Poppins';text-align:left;cursor:pointer;
}
.cp-cdd-opt:hover,.cp-cdd-opt.hi{background:var(--cp-hover);}
.cp-cdd-opt.sel{background:var(--cp-accent-soft);color:var(--cp-accent);}
.cp-cdd-opt-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cp-cdd-empty{padding:18px;text-align:center;color:var(--cp-fg-3);font-size:13px;}

/* -------------------------------------------------------------------
 * SHARED COMPONENT: Notifications bell dropdown (topbar)
 * ------------------------------------------------------------------- */
.cp-nbell{position:relative;}
.cp-nbell-menu{
  position:absolute;top:48px;right:0;z-index:41;width:320px;
  background:var(--cp-surface);border:1px solid var(--cp-border);
  border-radius:14px;box-shadow:var(--cp-sh-pop);animation:cp-kmenu .14s ease;overflow:hidden;
}
.cp-nbell-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 16px;border-bottom:1px solid var(--cp-border);
}
.cp-nbell-title{font:600 13.5px 'Poppins';}
.cp-nbell-pill{font:600 11px 'Poppins';color:var(--cp-accent);background:var(--cp-accent-soft);padding:2px 8px;border-radius:20px;}
.cp-nbell-row{
  display:flex;gap:11px;padding:12px 16px;width:100%;text-align:left;
  border:none;border-bottom:1px solid var(--cp-border);background:none;cursor:pointer;
}
.cp-nbell-row:hover{background:var(--cp-hover);}
.cp-nbell-ic{
  width:32px;height:32px;border-radius:9px;flex:none;
  background:var(--cp-accent-soft);color:var(--cp-accent);
  display:inline-flex;align-items:center;justify-content:center;font-size:15px;
}
.cp-nbell-ic.warn{background:var(--cp-warn-soft);color:var(--cp-warn);}
.cp-nbell-ic.err{background:var(--cp-neg-soft);color:var(--cp-neg);}
.cp-nbell-rbody{min-width:0;}
.cp-nbell-rtitle{font:600 12.5px 'Poppins';overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cp-nbell-rsub{font:400 11.5px/1.4 'Poppins';color:var(--cp-fg-3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.cp-nbell-all{width:100%;padding:11px;border:none;background:none;color:var(--cp-accent);font:600 12.5px 'Poppins';cursor:pointer;}
.cp-nbell-all:hover{background:var(--cp-hover);}
.cp-nbell-empty,.cp-nbell-loading{padding:26px;text-align:center;color:var(--cp-fg-3);font-size:13px;}

/* -------------------------------------------------------------------
 * SHARED COMPONENT: RecentSwapBridge mini-table
 * ------------------------------------------------------------------- */
.cp-rsb{margin-top:28px;max-width:840px;}
.cp-rsb-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px;}
.cp-rsb-head h3{margin:0;font:600 14px 'Poppins';}
.cp-rsb-inner{min-width:620px;}
.cp-rsb-grid{grid-template-columns:0.8fr 0.9fr 0.9fr 0.8fr 0.8fr 0.7fr 0.9fr;}
.cp-rsb-mono{font:400 11.5px var(--cp-mono);}
/* Sonner toast — restyled onto the cp-* design system (was using retired
   legacy tokens). Surface card + per-type soft tint + accent left-bar. */
[data-sonner-toaster] { font-family: 'Poppins', system-ui, sans-serif; z-index: 2200; }

[data-sonner-toaster] [data-sonner-toast] {
  background: var(--cp-surface) !important;
  color: var(--cp-fg) !important;
  border: 1px solid var(--cp-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--cp-sh-pop) !important;
  padding: 12px 14px !important;
  font-family: 'Poppins', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  min-width: 320px;
}

[data-sonner-toast][data-type="success"], .cryptrum-toast--ok {
  background: var(--cp-pos-soft) !important; color: var(--cp-pos) !important;
  border-color: color-mix(in srgb, var(--cp-pos) 30%, transparent) !important;
  border-left: 3px solid var(--cp-pos) !important;
}
[data-sonner-toast][data-type="error"], .cryptrum-toast--err {
  background: var(--cp-neg-soft) !important; color: var(--cp-neg) !important;
  border-color: color-mix(in srgb, var(--cp-neg) 30%, transparent) !important;
  border-left: 3px solid var(--cp-neg) !important;
}
[data-sonner-toast][data-type="info"], .cryptrum-toast--info {
  background: var(--cp-info-soft) !important; color: var(--cp-info) !important;
  border-color: color-mix(in srgb, var(--cp-info) 25%, transparent) !important;
  border-left: 3px solid var(--cp-info) !important;
}
[data-sonner-toast][data-type="warning"], .cryptrum-toast--warn {
  background: var(--cp-warn-soft) !important; color: var(--cp-warn) !important;
  border-color: color-mix(in srgb, var(--cp-warn) 30%, transparent) !important;
  border-left: 3px solid var(--cp-warn) !important;
}

[data-sonner-toast] [data-title], .cryptrum-toast-title {
  font-weight: 600; font-size: 14px; line-height: 1.35; letter-spacing: -.1px;
}
[data-sonner-toast] [data-description], .cryptrum-toast-desc {
  font-size: 13px; line-height: 1.45; opacity: .85; margin-top: 2px;
}
[data-sonner-toast] [data-close-button], .cryptrum-toast-close {
  background: transparent !important; border: 1px solid currentColor !important;
  color: currentColor !important; opacity: .55; transition: .15s;
  border-radius: 999px !important; width: 18px !important; height: 18px !important;
}
[data-sonner-toast] [data-close-button]:hover { opacity: 1; }
[data-sonner-toast] [data-button] {
  background: var(--cp-accent) !important; color: var(--cp-accent-fg) !important;
  border-radius: 60px !important; padding: 6px 14px !important;
  font-family: 'Poppins', system-ui, sans-serif !important;
  font-weight: 600 !important; font-size: 12.5px !important;
}
@media (prefers-reduced-motion: reduce) {
  [data-sonner-toast] { transition: none !important; animation: none !important; }
}